/*
 * QuakeWrap shared styles.
 * Extracted from quakewrap-build-kit/designs. Tokens mirror theme.json.
 * Yellow (--qw-cta) is for calls to action only.
 */

:root {
	--qw-white: #ffffff;
	--qw-charcoal: #333333;
	--qw-ocean: #006994;
	--qw-cta: #ffe411;
	--qw-black: #000000;
	--qw-body: #4d4d4d;
	--qw-caption: #595959;
	--qw-field: #f5f5f5;
	--qw-border: #e0e0e0;
	--qw-border-strong: #d6d6d6;
	--qw-on-dark: #e6e6e6;
	--qw-on-dark-muted: #cccccc;
	--qw-font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--qw-font-body: 'IBM Plex Sans', system-ui, sans-serif;
	--qw-gutter: 80px;
}

@media (max-width: 1180px) {
	:root { --qw-gutter: 40px; }
}

@media (max-width: 640px) {
	:root { --qw-gutter: 16px; }
}

/* ---------- Base ---------- */

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Sections butt together; spacing lives inside each section. */
:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

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

:focus-visible {
	outline: 3px solid var(--qw-ocean);
	outline-offset: 3px;
}

.qw-topbar :focus-visible,
.qw-footer :focus-visible,
.qw-mega__panel :focus-visible,
.qw-weave :focus-visible {
	outline-color: var(--qw-white);
}

.skip-link.screen-reader-text:focus {
	z-index: 1000;
}

.qw-weave {
	/* Carbon fiber twill, kept low-contrast so white text stays readable. */
	background:
		linear-gradient(27deg, #2c2c2c 5px, transparent 5px) 0 5px,
		linear-gradient(207deg, #2c2c2c 5px, transparent 5px) 10px 0,
		linear-gradient(27deg, #3a3a3a 5px, transparent 5px) 0 10px,
		linear-gradient(207deg, #3a3a3a 5px, transparent 5px) 10px 5px,
		linear-gradient(90deg, #303030 10px, transparent 10px),
		linear-gradient(#323232 25%, #2f2f2f 25%, #2f2f2f 50%, transparent 50%, transparent 75%, #383838 75%, #383838);
	background-color: var(--qw-charcoal);
	background-size: 20px 20px;
}

/* Hero: fade the texture out behind the copy, let it show toward the photo. */
.qw-hero--split::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--qw-charcoal) 0%, rgba(51, 51, 51, 0.95) 40%, rgba(51, 51, 51, 0.55) 58%, rgba(51, 51, 51, 0) 78%);
	pointer-events: none;
}

/* ---------- Buttons ---------- */

.qw-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	padding: 0 28px;
	border-radius: 999px;
	font-family: var(--qw-font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.05em;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.qw-btn:hover {
	filter: brightness(0.94);
}

.qw-btn:active {
	transform: translateY(1px);
}

.qw-btn--cta {
	background: var(--qw-cta);
	color: var(--qw-black);
}

.qw-btn--dark {
	background: var(--qw-black);
	color: var(--qw-white);
}

.qw-btn--dark:hover {
	filter: none;
	background: #1a1a1a;
}

.qw-btn--sm {
	height: 44px;
	padding: 0 20px;
	font-size: 13px;
}

.qw-btn--lg {
	height: 56px;
	padding: 0 30px;
	font-size: 15px;
}

/* ---------- Top bar ---------- */

.qw-topbar {
	background: var(--qw-charcoal);
	color: var(--qw-on-dark);
	font-family: var(--qw-font-body);
	font-size: 13px;
}

.qw-topbar__inner {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 0 var(--qw-gutter);
}

.qw-topbar svg {
	color: var(--qw-white);
	flex-shrink: 0;
}

.qw-topbar__address,
.qw-topbar__links a {
	display: flex;
	align-items: center;
	gap: 8px;
}

.qw-topbar__links {
	display: flex;
	align-items: center;
	gap: 28px;
}

.qw-topbar a {
	color: inherit;
	text-decoration: none;
}

.qw-topbar a:hover {
	color: var(--qw-white);
}

.qw-topbar__sep {
	color: #777777;
}

.qw-topbar__brand,
.qw-topbar__lang {
	font-weight: 600;
}

.qw-topbar__links a {
	white-space: nowrap;
}

/* ---------- Header pill ---------- */

/* Zero-height anchor so the pill floats over the hero below it. */
.qw-header-anchor {
	position: relative;
	height: 0;
	z-index: 100;
}

.qw-header {
	position: absolute;
	top: 24px;
	left: var(--qw-gutter);
	right: var(--qw-gutter);
	font-family: var(--qw-font-body);
	color: var(--qw-black);
}

.qw-header__bar {
	height: 76px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 0 12px 0 32px;
	background: var(--qw-white);
	border-radius: 40px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.qw-header__logo {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
	flex-shrink: 0;
}

.qw-header__logo img {
	width: 58px;
	height: 58px;
	display: block;
}

.qw-header__tagline {
	max-width: 120px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.35;
	color: var(--qw-charcoal);
}

.qw-header__toggle {
	display: none;
}

/* ---------- Main nav ---------- */

.qw-nav__list {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qw-nav__item {
	position: static;
}

.qw-nav__top {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	margin: 0 -12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--qw-black);
	font-family: var(--qw-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.qw-nav__top:hover {
	background: var(--qw-field);
}

.qw-nav__caret::after {
	content: '▾';
}

.qw-nav__top[aria-expanded='true'] {
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-nav__top[aria-expanded='true'] .qw-nav__caret::after {
	content: '▴';
}

.qw-nav__top.is-current,
.qw-nav__top[aria-current='page'] {
	box-shadow: inset 0 -2px 0 var(--qw-ocean);
	border-radius: 0;
}

.qw-nav__mobile-cta {
	display: none;
}

/* ---------- Mega menu (desktop) ---------- */

.qw-mega {
	position: absolute;
	top: calc(100% + 10px);
	left: 40px;
	right: 40px;
	background: var(--qw-white);
	border-radius: 24px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
	overflow: hidden;
	color: var(--qw-black);
}

.qw-mega[hidden] {
	display: none;
}

.qw-mega p {
	margin: 0;
}

.qw-mega ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qw-mega__body {
	display: grid;
	grid-template-columns: repeat(var(--qw-mega-cols, 4), minmax(0, 1fr)) var(--qw-mega-panel, 290px);
	gap: 36px;
	padding: 32px 36px;
}

.qw-mega__group,
.qw-mega__items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.qw-mega__title {
	padding-bottom: 8px;
	border-bottom: 2px solid var(--qw-charcoal);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--qw-charcoal);
}

.qw-mega__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px;
	margin: 0 -10px;
	border-radius: 10px;
	color: var(--qw-black);
	text-decoration: none;
}

.qw-mega__link:hover {
	background: var(--qw-field);
}

.qw-mega__label {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.qw-mega--products .qw-mega__label {
	font-weight: 700;
}

.qw-mega__desc {
	font-size: 13px;
	line-height: 1.4;
	color: var(--qw-caption);
}

.qw-mega__sub {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.qw-mega__items .qw-mega__sub {
	margin-top: 8px;
}

/* Extra space after a product family's sub-list (e.g. before Form-A-Tube). */
.qw-mega__items > li:has(.qw-mega__sub) + li {
	margin-top: 6px;
}

.qw-mega__sublink {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px 5px 14px;
	margin-left: -10px;
	border-left: 2px solid var(--qw-border);
	font-size: 14px;
	line-height: 1.4;
	color: var(--qw-charcoal);
	text-decoration: none;
}

.qw-mega__sublink:hover {
	border-left-color: var(--qw-ocean);
	color: var(--qw-black);
}

.qw-mega__also {
	margin-top: 6px !important;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--qw-caption);
}

.qw-listen {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.qw-listen__show {
	display: block;
	margin: 0;
	color: var(--qw-black);
	text-decoration: none;
	font-family: var(--qw-font-heading);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
}

.qw-listen__show:hover {
	color: var(--qw-ocean);
}

.qw-listen__arrow {
	font-family: var(--qw-font-body);
	font-size: 16px;
}

.qw-listen__show > span:first-child {
	display: block;
	margin-bottom: 2px;
	font-family: var(--qw-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--qw-ocean);
}

.qw-listen__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.qw-listen__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 6px 16px 6px 12px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 12px;
	background: #000000;
	color: #ffffff;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.qw-listen__btn:hover,
.qw-listen__btn:focus-visible {
	background: #1f1f1f;
	color: #ffffff;
	transform: translateY(-1px);
}

.qw-listen__btn svg {
	flex-shrink: 0;
}

.qw-listen__txt {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.qw-listen__txt small {
	font-size: 11px;
	font-weight: 500;
	opacity: 0.8;
}

.qw-listen__txt strong {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

/* Menu: a tinted card under News & Media, badges full width. */
.qw-listen--menu {
	margin-top: 14px;
	padding: 14px;
	border-radius: 14px;
	background: #f2f2f2;
}

.qw-listen--menu .qw-listen__btns {
	flex-direction: column;
}

.qw-listen--menu .qw-listen__btn {
	width: 100%;
	border-color: #000000;
}

/* Footer: on charcoal, show name in white. */
.qw-listen--footer {
	margin: 4px 0 18px;
}

.qw-listen--footer .qw-listen__show {
	color: #ffffff;
}

.qw-listen--footer .qw-listen__show > span:first-child {
	color: #7fc4e3;
}

.qw-listen--footer .qw-listen__show:hover {
	color: #ffe600;
}

.qw-listen--footer .qw-listen__btns {
	gap: 6px;
}

.qw-listen--footer .qw-listen__btn {
	min-height: 44px;
	gap: 8px;
	padding: 5px 11px 5px 9px;
	border-radius: 10px;
}

.qw-listen--footer .qw-listen__txt strong {
	font-size: 14px;
}

.qw-listen--footer .qw-listen__txt small {
	font-size: 10px;
}

.qw-mega__panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px;
	border-radius: 18px;
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-mega__panel-img {
	height: 140px;
	border-radius: 14px;
	overflow: hidden;
}

.qw-mega__panel-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.qw-mega__panel-eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
}

.qw-mega__panel-title {
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.05;
	text-transform: uppercase;
}

.qw-mega__panel-text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--qw-on-dark);
}

.qw-mega__panel .qw-btn {
	align-self: flex-start;
}

.qw-mega__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 16px 36px;
	background: var(--qw-field);
	border-top: 1px solid var(--qw-border);
	font-size: 14px;
	color: var(--qw-charcoal);
}

.qw-mega__foot a {
	font-weight: 700;
	color: var(--qw-black);
	text-decoration: none;
}

.qw-mega__foot a:hover {
	text-decoration: underline;
}

/* Tighter desktop widths: drop the tagline before anything wraps. */
@media (max-width: 1380px) {
	.qw-header__tagline { display: none; }
	.qw-nav__list { gap: 26px; }
	.qw-mega { left: 0; right: 0; }
	.qw-mega__body { gap: 28px; padding: 28px; --qw-mega-panel: 250px !important; }
}

/* ---------- Mobile and tablet: drawer + accordions ---------- */

@media (max-width: 1180px) {
	.qw-topbar__address,
	.qw-topbar__sep,
	.qw-topbar__links .qw-topbar__brand {
		display: none;
	}

	.qw-topbar__inner {
		justify-content: center;
	}

	.qw-header {
		top: 16px;
	}

	.qw-header__bar {
		height: 68px;
		padding: 0 10px 0 16px;
		gap: 12px;
	}

	.qw-header__logo img {
		width: 50px;
		height: 50px;
	}

	.qw-header__cta {
		margin-left: auto;
		height: 48px;
		padding: 0 22px;
	}

	.qw-header__toggle {
		order: 3;
		display: inline-flex;
		align-items: center;
		gap: 10px;
		height: 48px;
		padding: 0 18px;
		border: 1px solid var(--qw-border-strong);
		border-radius: 999px;
		background: var(--qw-white);
		color: var(--qw-black);
		font-family: var(--qw-font-body);
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.qw-header__toggle-bars,
	.qw-header__toggle-bars::before,
	.qw-header__toggle-bars::after {
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.qw-header__toggle-bars {
		position: relative;
	}

	.qw-header__toggle-bars::before,
	.qw-header__toggle-bars::after {
		content: '';
		position: absolute;
		left: 0;
	}

	.qw-header__toggle-bars::before { top: -6px; }
	.qw-header__toggle-bars::after { top: 6px; }

	.qw-header.is-open .qw-header__toggle-bars { background: transparent; }
	.qw-header.is-open .qw-header__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
	.qw-header.is-open .qw-header__toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

	.qw-nav {
		display: none;
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		right: 0;
		max-height: calc(100vh - 150px);
		max-height: calc(100dvh - 150px);
		overflow-y: auto;
		overscroll-behavior: contain;
		box-sizing: border-box;
		padding: 8px 20px 20px;
		background: var(--qw-white);
		border-radius: 24px;
		box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
	}

	.qw-header.is-open .qw-nav {
		display: block;
	}

	.qw-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.qw-nav__item {
		border-bottom: 1px solid var(--qw-border);
	}

	.qw-nav__top {
		width: 100%;
		justify-content: space-between;
		margin: 0;
		padding: 16px 4px;
		border-radius: 0;
		font-size: 15px;
	}

	.qw-nav__top:hover {
		background: transparent;
	}

	.qw-nav__top[aria-expanded='true'] {
		background: transparent;
		color: var(--qw-ocean);
	}

	.qw-nav__top.is-current,
	.qw-nav__top[aria-current='page'] {
		box-shadow: none;
		color: var(--qw-ocean);
	}

	.qw-mega {
		position: static;
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
	}

	.qw-mega__body {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 4px 4px 20px;
	}

	.qw-mega__panel {
		display: none;
	}

	.qw-mega__foot {
		padding: 0 4px 20px;
		background: transparent;
		border-top: 0;
	}

	.qw-mega__foot span {
		display: none;
	}

	.qw-nav__mobile-cta {
		display: flex;
		width: 100%;
		margin-top: 20px;
	}
}

@media (max-width: 640px) {
	.qw-topbar__inner {
		gap: 18px;
	}

	.qw-topbar__links {
		gap: 18px;
	}

	.qw-header__cta {
		display: none;
	}

	.qw-header__toggle {
		margin-left: auto;
	}

	.qw-header__toggle-text {
		font-size: 13px;
	}
}

@media (max-width: 400px) {
	.qw-topbar__links a[href^='mailto'] span {
		display: none;
	}
}

/* ---------- Footer ---------- */

.qw-footer {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 56px var(--qw-gutter) 28px;
	background: var(--qw-charcoal);
	color: var(--qw-on-dark-muted);
	font-family: var(--qw-font-body);
}

.qw-footer p,
.qw-footer ul,
.qw-footer address {
	margin: 0;
}

.qw-footer a {
	color: inherit;
	text-decoration: none;
}

.qw-footer a:hover {
	color: var(--qw-white);
}

.qw-footer__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 32px;
}

.qw-footer__brand {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-right: 24px;
	font-size: 14px;
	line-height: 1.6;
}

.qw-footer__wordmark {
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 32px;
	line-height: 1.1;
	color: var(--qw-white);
}

.qw-footer__social {
	display: flex;
	gap: 10px;
}

.qw-footer__social a {
	width: 44px;
	height: 44px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid #444444;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--qw-white);
}

.qw-footer__social a:hover {
	border-color: var(--qw-white);
}

.qw-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

.qw-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	list-style: none;
}

.qw-footer__heading {
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--qw-white);
}

.qw-footer address {
	font-style: normal;
	line-height: 1.6;
}

.qw-footer .qw-footer__consult {
	color: var(--qw-cta);
	font-weight: 700;
}

.qw-footer .qw-footer__consult:hover {
	color: var(--qw-cta);
	text-decoration: underline;
}

.qw-footer__legal {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid #444444;
	font-size: 13px;
}

@media (max-width: 1180px) {
	.qw-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.qw-footer__brand {
		grid-column: 1 / -1;
		padding-right: 0;
		max-width: 520px;
	}
}

@media (max-width: 640px) {
	.qw-footer {
		padding-top: 44px;
	}

	.qw-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 20px;
	}

	.qw-footer__legal {
		flex-direction: column;
	}
}

/* ---------- Basic page shell (until per-template heroes land) ---------- */

.qw-hero--page {
	padding: 160px var(--qw-gutter) 88px;
	color: var(--qw-white);
}

.qw-hero--page .qw-hero__title {
	max-width: 900px;
	margin: 0;
	color: var(--qw-white);
}

.qw-hero__eyebrow {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--qw-white);
}

.qw-hero__lead {
	max-width: 640px;
	margin: 18px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--qw-on-dark);
}

.qw-content {
	padding-top: 64px;
	padding-bottom: 96px;
	color: var(--qw-body);
	line-height: 1.65;
}

@media (max-width: 1180px) {
	.qw-hero--page {
		padding-top: 136px;
		padding-bottom: 64px;
	}
}

/* =========================================================================
 * Sections (inc/sections.php). Desktop values match designs/01-home.html.
 * ====================================================================== */

.qw-wrap {
	max-width: 1280px;
	margin: 0 auto;
}

.qw-section {
	padding: 60px var(--qw-gutter);
	font-family: var(--qw-font-body);
	color: var(--qw-black);
}

.qw-section--ocean {
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-section--dark {
	color: var(--qw-white);
}

.qw-section p,
.qw-hero p,
.qw-final p,
.qw-consult p {
	margin: 0;
}

.qw-section ul,
.qw-section ol,
.qw-hero ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qw-center {
	display: flex;
	justify-content: center;
}

.qw-h1,
.qw-h2 {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	text-transform: uppercase;
	color: inherit;
}

.qw-h1 {
	font-size: clamp(38px, 3.4vw, 44px);
	line-height: 1.02;
	letter-spacing: 0.005em;
}

.qw-h2 {
	font-size: clamp(34px, 3.4vw, 48px);
	line-height: 1;
}

.qw-section--white .qw-h2 {
	color: var(--qw-black);
}

.qw-section__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 48px;
	margin-bottom: 28px;
}

.qw-section__head-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: 760px;
}

.qw-section__head--center {
	justify-content: center;
	text-align: center;
}

.qw-section__head--center .qw-section__head-text {
	align-items: center;
	max-width: 760px;
}

.qw-section__intro {
	font-size: 17px;
	line-height: 1.6;
	color: var(--qw-body);
	max-width: 720px;
}

.qw-section--ocean .qw-section__intro,
.qw-section--dark .qw-section__intro {
	color: var(--qw-on-dark);
}

/* Eyebrow pills */
.qw-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

.qw-eyebrow__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}

.qw-eyebrow--light {
	background: var(--qw-white);
	border: 1px solid var(--qw-charcoal);
	color: var(--qw-black);
}

.qw-eyebrow--light .qw-eyebrow__dot {
	background: var(--qw-charcoal);
}

.qw-eyebrow--dark,
.qw-eyebrow--hero {
	background: rgba(255, 255, 255, 0.1);
	color: var(--qw-white);
	font-weight: 600;
}

.qw-eyebrow--hero {
	padding: 7px 16px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	letter-spacing: 0.1em;
}

.qw-eyebrow--dark .qw-eyebrow__dot,
.qw-eyebrow--hero .qw-eyebrow__dot {
	background: var(--qw-ocean);
}

/* Extra button styles */
.qw-btn--md {
	height: 50px;
	padding: 0 24px;
}

.qw-btn--xl {
	height: 58px;
	padding: 0 32px;
	font-size: 15px;
}

.qw-btn--outline-light {
	border: 2px solid rgba(255, 255, 255, 0.8);
	color: var(--qw-white);
	background: transparent;
}

.qw-section--ocean .qw-btn--outline-light {
	border-color: var(--qw-white);
}

.qw-btn--outline-light:hover {
	filter: none;
	background: rgba(255, 255, 255, 0.12);
}

.qw-btn--outline-dark {
	border: 2px solid var(--qw-black);
	color: var(--qw-black);
	background: transparent;
}

/* Section header links default to the light outline; on white and light gray bands that is white on white. */
.qw-section--white .qw-section__head .qw-btn--outline-light,
.qw-section--light .qw-section__head .qw-btn--outline-light {
	border-color: var(--qw-black);
	color: var(--qw-black);
}

.qw-section--white .qw-section__head .qw-btn--outline-light:hover,
.qw-section--light .qw-section__head .qw-btn--outline-light:hover {
	background: rgba(0, 0, 0, 0.06);
}

.qw-btn--card {
	height: 46px;
	padding: 0 22px;
	font-size: 13px;
	letter-spacing: 0.06em;
	white-space: normal;
	text-align: left;
}

.qw-btn--card svg {
	color: var(--qw-cta);
	flex-shrink: 0;
}

.qw-icon-circle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--qw-ocean);
	color: var(--qw-white);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.qw-icon-circle--sm {
	width: 28px;
	height: 28px;
}

/* ---------- Hero (split, angled photo) ---------- */

.qw-hero--split {
	position: relative;
	box-sizing: border-box;
	/* Bottom padding = 120px card overlap + 28px gap below the buttons. */
	padding: 128px var(--qw-gutter) 152px;
	overflow: hidden;
	color: var(--qw-white);
	font-family: var(--qw-font-body);
}

.qw-hero__media {
	position: absolute;
	inset: 0 0 0 auto;
	width: 48%;
}

.qw-hero__media-edge,
.qw-hero__media-img {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
}

.qw-hero__media-edge {
	left: 0;
	background: var(--qw-ocean);
}

.qw-hero__media-img {
	left: 16px;
	margin: 0;
	overflow: hidden;
}

.qw-hero__media-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * Before/after hero: the divider runs parallel to the angled hero edge
 * (66% at the top to 42% at the bottom), with a 6px ocean gap between panels.
 */
.qw-hero__ba {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 66%;
}

.qw-hero__ba--before {
	left: 0;
	clip-path: polygon(0 0, calc(100% - 3px) 0, calc(63.6% - 3px) 100%, 0 100%);
}

.qw-hero__ba--after {
	right: 0;
	width: 58%;
	clip-path: polygon(calc(41.4% + 3px) 0, 100% 0, 100% 100%, 3px 100%);
}

.qw-hero__ba img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.qw-hero__ba-label {
	position: absolute;
	bottom: 136px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.qw-hero__ba--before .qw-hero__ba-label {
	left: 56px;
	background: rgba(0, 0, 0, 0.78);
	color: var(--qw-white);
}

.qw-hero__ba--after .qw-hero__ba-label {
	right: 32px;
	background: var(--qw-cta);
	color: var(--qw-black);
}

.qw-hero__media-img--compare .qw-hero__caption {
	bottom: 184px;
	right: 32px;
}

.qw-hero__caption a {
	color: inherit;
	text-decoration: none;
}

.qw-hero__caption a:hover {
	text-decoration: underline;
}

.qw-hero__caption {
	position: absolute;
	right: 40px;
	bottom: 136px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.78);
	color: var(--qw-white);
	font-size: 12px;
	font-weight: 600;
}

.qw-hero--split .qw-wrap {
	position: relative;
}

.qw-hero__copy {
	width: 740px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.qw-hero__lead {
	max-width: 680px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--qw-on-dark);
}

.qw-hero__checks {
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: 10px 22px;
	font-size: 15px;
	font-weight: 500;
}

.qw-hero__checks li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.qw-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 8px;
}

.qw-hero__actions .qw-btn {
	height: 54px;
}

/* ---------- Consultation card ---------- */

.qw-consult-wrap {
	position: relative;
	z-index: 2;
	margin-top: -120px;
	padding: 0 var(--qw-gutter);
	font-family: var(--qw-font-body);
	scroll-margin-top: 110px;
}

.qw-consult {
	max-width: 1280px;
	margin: 0 auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px 36px 26px;
	background: var(--qw-white);
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.qw-consult__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 20px;
	font-size: 15px;
	color: var(--qw-body);
}

.qw-consult__head .qw-consult__note {
	margin-left: auto;
}

.qw-consult__title {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 30px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--qw-black);
}

.qw-consult__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.qw-consult__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px 14px;
	align-items: end;
}

.qw-field--wide {
	grid-column: span 2;
}

/* HubSpot-connected card: row 1 = names, email, role, product; row 2 = message (3 cols), source, button. */
.qw-field--msg {
	grid-column: span 3;
}

.qw-consult__error {
	margin: 14px 0 0;
	font-size: 14px;
	color: #b42318;
}

.qw-consult__error a {
	color: inherit;
}

.qw-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.qw-field label {
	font-size: 12px;
	font-weight: 600;
	color: var(--qw-charcoal);
}

.qw-field input,
.qw-field select,
.qw-field textarea {
	height: 46px;
	box-sizing: border-box;
	padding: 0 16px;
	border: 1px solid var(--qw-border-strong);
	border-radius: 12px;
	background: var(--qw-field);
	font: inherit;
	font-size: 15px;
	color: var(--qw-black);
}

.qw-field select {
	padding: 0 14px;
}

.qw-field textarea {
	padding: 12px 16px;
	resize: vertical;
}

.qw-field input::placeholder,
.qw-field textarea::placeholder {
	color: #757575;
}

.qw-field :focus-visible {
	outline-offset: 0;
	border-color: var(--qw-ocean);
}

.qw-consult__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.qw-consult__note {
	font-size: 13px;
	color: var(--qw-body);
}

.qw-consult__submit {
	height: 46px;
	width: 100%;
	padding: 0 20px;
	border: 0;
	cursor: pointer;
}

/* ---------- Proof: awards + stats ---------- */

.qw-proof {
	padding-top: 56px;
	padding-bottom: 56px;
}

.qw-proof .qw-wrap {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.qw-proof__heading {
	display: flex;
	align-items: center;
	gap: 24px;
}

.qw-proof__heading > span {
	flex-grow: 1;
	height: 4px;
	background: var(--qw-charcoal);
}

.qw-proof__heading h2 {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
	color: var(--qw-black);
}

.qw-proof__awards {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
}

.qw-award {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	border: 1px solid var(--qw-border);
	border-radius: 16px;
	background: var(--qw-white);
}

.qw-award__title {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
}

.qw-award__text {
	font-size: 13px;
	line-height: 1.45;
	color: var(--qw-body);
}

.qw-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	border-radius: 20px;
	background: var(--qw-charcoal);
	color: var(--qw-white);
	overflow: hidden;
}

.qw-stats__item {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 4px;
	padding: 28px 32px;
	border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.qw-stats__item:last-child {
	border-right: 0;
}

.qw-stats dd {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 56px;
	line-height: 1;
}

.qw-stats dt {
	font-size: 15px;
	color: var(--qw-on-dark);
}

/* ---------- Card grid (applications) ---------- */

.qw-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.qw-cards > li {
	display: flex;
}

.qw-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--qw-white);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	color: var(--qw-black);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.qw-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.qw-card__media {
	position: relative;
	height: 168px;
	flex-shrink: 0;
	overflow: hidden;
}

.qw-card__media img,
.qw-project__media img,
.qw-feature__media img,
.qw-person__photo img,
.qw-final__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.qw-card__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	height: 40px;
	margin: 0;
	display: flex;
	align-items: center;
	padding-left: 20px;
	background: var(--qw-charcoal);
	color: var(--qw-white);
	font-family: var(--qw-font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	text-transform: uppercase;
}

.qw-card__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex-grow: 1;
	padding: 22px 24px 26px;
}

.qw-card__body p {
	font-size: 16px;
	line-height: 1.55;
	color: var(--qw-body);
}

.qw-card__body .qw-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* Page hero notice (e.g. a product still in development). */
.qw-phero__notice {
	max-width: 560px;
	margin: 20px 0 0;
	padding: 14px 18px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 15px;
	line-height: 1.5;
	color: var(--qw-on-dark);
}

.qw-phero__notice strong {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--qw-white);
}

/* ---------- Product family ---------- */

.qw-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.qw-feature {
	display: flex;
	min-height: 244px;
	border-radius: 24px;
	overflow: hidden;
	background: var(--qw-charcoal);
	color: var(--qw-white);
	text-decoration: none;
}

.qw-feature__body {
	flex: 1 1 56%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 34px 32px;
}

.qw-feature__kicker {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
}

.qw-feature__name {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--qw-white);
}

.qw-feature__body p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--qw-on-dark);
}

.qw-feature__link {
	margin-top: auto;
	padding-top: 8px;
	font-weight: 700;
	font-size: 14px;
}

.qw-feature:hover .qw-feature__link {
	text-decoration: underline;
}

.qw-feature__media {
	position: relative;
	width: 44%;
	flex-shrink: 0;
	overflow: hidden;
}

.qw-chips {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
	margin-top: 28px !important;
}

.qw-chips > li {
	display: flex;
}

/* Three feature tiles: stacked cards, photo on top. */
.qw-features--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qw-features--3 .qw-feature {
	flex-direction: column-reverse;
}

.qw-features--3 .qw-feature__media {
	width: 100%;
	height: 200px;
}

.qw-features--3 .qw-feature__body {
	padding: 28px 26px;
}

.qw-features--3 .qw-feature__name {
	font-size: 36px;
}

.qw-chips.qw-chips--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1380px) {
	.qw-chips.qw-chips--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
	.qw-features--3 { grid-template-columns: 1fr; }
}

.qw-chip {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	padding: 22px 18px;
	border: 1px solid var(--qw-border);
	border-radius: 18px;
	background: var(--qw-white);
	color: var(--qw-black);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.qw-chip:hover {
	border-color: var(--qw-charcoal);
}

.qw-chip__rule {
	width: 32px;
	height: 5px;
	background: var(--qw-charcoal);
	border-radius: 2px;
}

.qw-chip__name {
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.1;
	text-transform: uppercase;
}

.qw-chip__text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--qw-body);
}

/* ---------- Team grid ---------- */

.qw-team {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.qw-person {
	display: flex;
	flex-direction: column;
	background: var(--qw-white);
	border-radius: 20px;
	overflow: hidden;
	color: var(--qw-black);
}

.qw-person__photo {
	position: relative;
	height: 200px;
	overflow: hidden;
}

.qw-person__flag {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 4px 8px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.75);
	color: var(--qw-white);
	font-size: 11px;
	font-weight: 600;
}

.qw-person__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 16px 20px;
}

.qw-person__body h3 {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 22px;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--qw-black);
}

/* Post-nominals stay mixed case and wrap as one unit under long names. */
.qw-person__creds {
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	white-space: nowrap;
	color: var(--qw-charcoal);
}

.qw-person__title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--qw-charcoal);
}

.qw-person__text {
	margin-top: 4px !important;
	font-size: 13px;
	line-height: 1.5;
	color: var(--qw-body);
}

.qw-points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 28px !important;
}

.qw-points li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-radius: 16px;
	background: var(--qw-white);
	color: var(--qw-black);
	font-size: 15px;
	font-weight: 700;
}

/* ---------- Steps ---------- */

.qw-steps-section {
	padding-top: 64px;
	padding-bottom: 72px;
}

.qw-steps-section .qw-section__head {
	margin-bottom: 40px;
}

.qw-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin-bottom: 40px !important;
}

.qw-steps::before {
	content: '';
	position: absolute;
	top: 36px;
	left: 12%;
	right: 12%;
	height: 2px;
	background: rgba(255, 255, 255, 0.3);
}

.qw-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.qw-step__num {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--qw-ocean);
	color: var(--qw-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 30px;
	box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.08);
}

.qw-step__title {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--qw-white);
}

.qw-step p {
	max-width: 260px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--qw-on-dark);
}

/* ---------- Projects ---------- */

.qw-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex-shrink: 0;
}

.qw-filter {
	height: 44px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 0 18px;
	border: 1px solid var(--qw-border-strong);
	border-radius: 999px;
	color: var(--qw-black);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.qw-filter:hover {
	border-color: var(--qw-black);
}

.qw-filter.is-active {
	background: var(--qw-black);
	border-color: var(--qw-black);
	color: var(--qw-white);
}

.qw-projects {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.qw-project {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--qw-black);
	text-decoration: none;
}

.qw-project__media {
	height: 250px;
	margin-bottom: 10px;
	border-radius: 20px;
	overflow: hidden;
}

.qw-project__media img {
	transition: transform 0.3s ease;
}

.qw-project:hover .qw-project__media img {
	transform: scale(1.03);
}

.qw-project__kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--qw-charcoal);
}

.qw-project__title {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--qw-black);
}

.qw-project p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--qw-body);
}

/* ---------- Testimonials ---------- */

.qw-section--ocean > .qw-wrap > .qw-section__head:only-child,
.qw-quotes {
	margin-top: 0;
}

.qw-quotes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.qw-quotes > li {
	display: flex;
}

.qw-quote {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	margin: 0;
	padding: 30px;
	box-sizing: border-box;
	border-top: 6px solid var(--qw-charcoal);
	border-radius: 20px;
	background: var(--qw-white);
	color: var(--qw-black);
}

.qw-quote__tag {
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: 999px;
	background: #f2f2f2;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--qw-charcoal);
}

.qw-quote__mark {
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 56px;
	line-height: 0.5;
	height: 24px;
}

.qw-quote blockquote {
	margin: 0;
}

.qw-quote blockquote p {
	font-family: var(--qw-font-heading);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.15;
	text-transform: uppercase;
}

.qw-quote__by {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}

.qw-quote__by > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--qw-caption);
}

.qw-quote__by strong {
	font-size: 15px;
	color: var(--qw-black);
}

.qw-quote__initials {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--qw-charcoal);
	color: var(--qw-white);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-weight: 700;
	font-size: 15px;
}

.qw-quote__initials--long {
	font-size: 11px;
}

/* ---------- Split layouts: library, FAQ ---------- */

.qw-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px;
	align-items: center;
}

.qw-split--faq {
	gap: 56px;
	align-items: start;
}

.qw-split__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.qw-docs {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.qw-doc {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 22px;
	border: 1px solid var(--qw-border);
	border-radius: 18px;
	color: var(--qw-black);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.qw-doc:hover {
	border-color: var(--qw-charcoal);
}

.qw-doc--featured {
	background: var(--qw-charcoal);
	border-color: var(--qw-charcoal);
	color: var(--qw-white);
}

.qw-doc__badge {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #f2f2f2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-weight: 700;
	font-size: 12px;
}

.qw-doc--featured .qw-doc__badge {
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-doc__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex-grow: 1;
}

.qw-doc__kicker {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.qw-doc__title {
	font-weight: 700;
	font-size: 17px;
}

.qw-doc__desc {
	font-size: 14px;
	color: var(--qw-body);
}

.qw-doc__arrow {
	font-size: 20px;
}

/* FAQ */
.qw-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.qw-faq__item {
	border-radius: 16px;
	background: var(--qw-white);
	color: var(--qw-black);
}

.qw-faq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 22px;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	list-style: none;
}

.qw-faq__item summary::-webkit-details-marker {
	display: none;
}

.qw-faq__sign::after {
	content: '+';
	font-size: 22px;
	line-height: 1;
}

.qw-faq__item[open] {
	background: var(--qw-charcoal);
	color: var(--qw-white);
	border-left: 6px solid var(--qw-ocean);
}

.qw-faq__item[open] .qw-faq__sign::after {
	content: '−';
}

.qw-faq__item p {
	padding: 0 22px 18px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--qw-on-dark);
}

.qw-faq__item summary:focus-visible {
	outline-color: var(--qw-white);
	border-radius: 16px;
}

.qw-ask {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 28px;
	border-radius: 20px;
	background: var(--qw-white);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	color: var(--qw-black);
}

.qw-ask__who {
	display: flex;
	align-items: center;
	gap: 14px;
}

.qw-ask__who img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.qw-ask__who > span {
	display: flex;
	flex-direction: column;
	font-size: 14px;
	color: var(--qw-caption);
}

.qw-ask__who strong {
	font-size: 17px;
	color: var(--qw-black);
}

.qw-ask > p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--qw-body);
}

/* ---------- Final CTA ---------- */

.qw-final {
	position: relative;
	padding: 64px var(--qw-gutter);
	overflow: hidden;
	color: var(--qw-white);
	font-family: var(--qw-font-body);
}

.qw-final__edge,
.qw-final__media {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}

.qw-final__edge {
	width: 520px;
	background: var(--qw-ocean);
}

.qw-final__media {
	width: 504px;
	overflow: hidden;
}

.qw-final .qw-wrap {
	position: relative;
}

.qw-final__copy {
	width: 760px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.qw-final__title {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: clamp(40px, 4.2vw, 60px);
	line-height: 1;
	text-transform: uppercase;
	color: var(--qw-white);
}

.qw-final__copy > p {
	font-size: 18px;
	line-height: 1.6;
	color: var(--qw-on-dark);
}

.qw-final__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.qw-final__phone {
	display: flex;
	flex-direction: column;
	color: var(--qw-white);
	text-decoration: none;
}

.qw-final__phone span {
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--qw-on-dark-muted);
}

.qw-final__phone strong {
	font-size: 18px;
}

/* ---------- Section responsive ---------- */

@media (max-width: 1380px) {
	.qw-proof__awards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.qw-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.qw-team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.qw-final__copy { width: 620px; }
}

@media (max-width: 1180px) {
	.qw-section { padding-top: 52px; padding-bottom: 52px; }
	.qw-hero--split { padding-top: 132px; padding-bottom: 168px; min-height: 0; }
	.qw-hero__media { width: 44%; }
	.qw-hero__caption { display: none; }
	.qw-hero__copy { width: 54%; }
	.qw-consult__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qw-consult__submit-cell { grid-column: 1 / -1; }
	.qw-field--loc { grid-column: 1 / -1; }
	.qw-field--msg { grid-column: 1 / -1; }
	/* Two columns: let the source field fill the gap beside product interest. */
	.qw-consult__grid--hs { grid-auto-flow: row dense; }
	.qw-hero__checks { flex-wrap: wrap; white-space: normal; }
	.qw-cards,
	.qw-projects,
	.qw-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qw-features { grid-template-columns: 1fr; }
	.qw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
	.qw-steps::before { display: none; }
	.qw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qw-stats__item:nth-child(2) { border-right: 0; }
	.qw-stats__item:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
	.qw-split,
	.qw-split--faq { grid-template-columns: 1fr; gap: 40px; }
	.qw-split--faq .qw-split__text { order: -1; }
	.qw-section__head { flex-direction: column; align-items: flex-start; gap: 20px; }
	.qw-section__head--center { align-items: center; }
	.qw-final__edge,
	.qw-final__media { display: none; }
}

@media (max-width: 760px) {
	.qw-hero--split { padding-top: 116px; padding-bottom: 0; }
	.qw-hero__media {
		position: relative;
		inset: auto;
		width: auto;
		height: 260px;
		margin: 36px calc(-1 * var(--qw-gutter)) 0;
		order: 2;
	}
	.qw-hero--split { display: flex; flex-direction: column; }
	.qw-hero__media-edge,
	.qw-hero__media-img { clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%); }
	.qw-hero__media-img { left: 0; top: 10px; }
	.qw-hero__ba-label { bottom: 54px; }
	.qw-hero__ba--before .qw-hero__ba-label { left: 16px; }
	.qw-hero__ba--after .qw-hero__ba-label { right: 16px; }
	.qw-hero__copy { width: 100%; }
	.qw-hero__actions .qw-btn { width: 100%; }
	.qw-consult-wrap { margin-top: -40px; }
	.qw-consult { padding: 26px 20px 24px; }
	.qw-consult__title { font-size: 30px; }
	.qw-consult__grid { grid-template-columns: 1fr; }
	.qw-field--wide,
	.qw-field--loc,
	.qw-field--msg { grid-column: auto; }
	.qw-consult__head .qw-consult__note { margin-left: 0; }
	.qw-consult__submit { height: 52px; }
	.qw-proof__heading > span { display: none; }
	.qw-proof__heading h2 { font-size: 20px; }
	.qw-proof__awards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.qw-award { padding: 16px; }
	.qw-stats__item { padding: 22px 20px; }
	.qw-stats dd { font-size: 44px; }
	.qw-cards,
	.qw-projects,
	.qw-quotes,
	.qw-points { grid-template-columns: 1fr; }
	.qw-feature { flex-direction: column-reverse; }
	.qw-feature__media { width: 100%; height: 200px; }
	.qw-feature__body { padding: 26px 22px; }
	.qw-feature__name { font-size: 38px; }
	.qw-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.qw-chip { padding: 18px 16px; }
	.qw-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.qw-person__photo { height: 170px; }
	.qw-steps { grid-template-columns: 1fr; }
	.qw-quote { padding: 24px; }
	.qw-quote blockquote p { font-size: 26px; }
	.qw-doc { padding: 14px 16px; gap: 14px; }
	.qw-final { padding-top: 52px; padding-bottom: 56px; }
	.qw-final__actions .qw-btn { width: 100%; }
}

/* Section pages: bands sit flush; no block gap between sections. */
.qw-main--sections .wp-block-post-content > *,
.qw-main--sections > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Feature tiles: fixed 244px height, photo fills its column. */
.qw-feature {
	min-height: 244px;
	height: auto;
}

.qw-feature__media img {
	position: absolute;
	inset: 0;
}

/* A heading with no side link uses the full width (e.g. testimonials). */
.qw-section__head-text:only-child {
	max-width: none;
}

@media (max-width: 760px) {
	.qw-feature { height: auto; }
}

@media (max-width: 1180px) {
	.qw-field textarea { height: 96px; }
}

.qw-chips > li,
.qw-chip { min-width: 0; }

@media (max-width: 760px) {
	.qw-chip__name { font-size: 20px; overflow-wrap: anywhere; }
}

/* Consultation card overlaps the hero (design: 120px). Must beat the flush-sections reset above. */
.qw-main--sections .wp-block-post-content > .qw-consult-wrap {
	margin-block-start: -120px;
}

@media (max-width: 760px) {
	.qw-main--sections .wp-block-post-content > .qw-consult-wrap {
		margin-block-start: -40px;
	}
}

/* Wide screens: chrome lines up with the 1280px content column. */
:root {
	--qw-edge: max(var(--qw-gutter), calc((100% - 1280px) / 2));
}

.qw-topbar__inner {
	padding-left: var(--qw-edge);
	padding-right: var(--qw-edge);
}

.qw-header {
	left: var(--qw-edge);
	right: var(--qw-edge);
}

.qw-footer {
	padding-left: var(--qw-edge);
	padding-right: var(--qw-edge);
}

/* ---------- Sticky header ----------
 * The <header> sticks at -44px (top bar height), so the top bar scrolls away and the
 * floating pill stays pinned. Containing block is the whole page, so it sticks everywhere.
 */
.qw-site-header {
	position: sticky;
	top: calc(-44px + var(--wp-admin--admin-bar--height, 0px));
	z-index: 100;
}

.qw-header {
	transition: top 0.2s ease;
}

.qw-header__bar {
	transition: height 0.2s ease, box-shadow 0.2s ease;
}

.qw-header.is-scrolled {
	top: 12px;
}

.qw-header.is-scrolled .qw-header__bar {
	height: 64px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

.qw-header.is-scrolled .qw-header__logo img {
	width: 50px;
	height: 50px;
}

/* In-page anchors land below the pinned pill. */
[id] {
	scroll-margin-top: 110px;
}

@media (max-width: 1180px) {
	.qw-header.is-scrolled { top: 10px; }
	.qw-header.is-scrolled .qw-header__bar { height: 60px; }
	.qw-header.is-scrolled .qw-header__logo img { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.qw-header,
	.qw-header__bar { transition: none; }
}

/* Pinned header: a tall mega menu scrolls inside itself on short screens. */
@media (min-width: 1181px) {
	.qw-mega {
		max-height: calc(100vh - 110px);
		max-height: calc(100dvh - 110px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* Phones: text spans the full width, so fade the texture evenly behind it. */
@media (max-width: 760px) {
	.qw-hero--split::before {
		background: rgba(51, 51, 51, 0.88);
	}
}

.qw-hero__media-img picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* =========================================================================
 * Phone optimizations (<= 760px)
 * ====================================================================== */

@media (max-width: 760px) {
	/* Top bar: full-height touch targets. */
	.qw-topbar__links a {
		min-height: 44px;
		min-width: 44px;
		justify-content: center;
	}

	/* Hero: tighter stack, shorter photo strip. */
	.qw-hero--split { padding-top: 104px; }
	.qw-hero__copy { gap: 16px; }
	.qw-hero__lead { font-size: 16px; line-height: 1.6; }
	.qw-hero__checks { gap: 8px; font-size: 15px; }
	.qw-hero__actions { gap: 12px; margin-top: 6px; }
	.qw-hero__media { height: 220px; margin-top: 32px; }

	/* Form: pair short fields, larger labels. */
	.qw-consult__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.qw-field--org,
	.qw-field--email,
	.qw-field--phone,
	.qw-field--type,
	.qw-field--loc,
	.qw-field--help,
	.qw-field--role,
	.qw-field--interest,
	.qw-field--msg,
	.qw-field--heard,
	.qw-consult__submit-cell { grid-column: 1 / -1; }
	.qw-field label { font-size: 13px; }
	.qw-field input,
	.qw-field select,
	.qw-field textarea { height: 48px; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
	.qw-field textarea { height: 96px; }
	.qw-field select { padding: 0 10px; }

	/* Section rhythm. */
	.qw-section { padding-top: 48px; padding-bottom: 48px; }
	.qw-section__head { margin-bottom: 22px; gap: 16px; }
	.qw-section__intro { font-size: 16px; }
	.qw-h2 { font-size: 32px; }

	/* Swipe rows: solution cards, projects, testimonials. */
	.qw-cards,
	.qw-projects,
	.qw-quotes {
		display: flex;
		gap: 14px;
		margin: 0 calc(-1 * var(--qw-gutter)) !important;
		padding: 4px var(--qw-gutter) 18px !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 var(--qw-gutter);
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.qw-cards::-webkit-scrollbar,
	.qw-projects::-webkit-scrollbar,
	.qw-quotes::-webkit-scrollbar {
		display: none;
	}

	.qw-cards > li,
	.qw-projects > li,
	.qw-quotes > li {
		flex: 0 0 84%;
		scroll-snap-align: start;
	}

	.qw-card__media { height: 150px; }
	.qw-card__body { gap: 16px; padding: 18px 18px 20px; }
	.qw-card__body p { font-size: 15px; }
	.qw-project__media { height: 200px; }
	.qw-quote blockquote p { font-size: 24px; }

	/* Awards: compact two-up. */
	.qw-proof { padding-top: 40px; padding-bottom: 40px; }
	.qw-proof .qw-wrap { gap: 20px; }
	.qw-award { gap: 8px; padding: 14px; }
	.qw-award .qw-icon-circle { width: 32px; height: 32px; }
	.qw-award__title { font-size: 14px; }
	.qw-stats dd { font-size: 40px; }
	.qw-stats dt { font-size: 14px; }

	/* Product family. */
	.qw-feature__media { height: 180px; }
	.qw-chips { margin-top: 16px !important; }
	.qw-chip { gap: 6px; }

	/* Steps: number beside text instead of stacked and centered. */
	.qw-steps { gap: 22px; margin-bottom: 32px !important; }
	.qw-step {
		display: grid;
		grid-template-columns: 52px 1fr;
		column-gap: 16px;
		row-gap: 4px;
		align-items: start;
		text-align: left;
	}
	.qw-step__num {
		grid-row: span 2;
		width: 52px;
		height: 52px;
		font-size: 22px;
		box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08);
	}
	.qw-step__title { font-size: 22px; padding-top: 4px; }
	.qw-step p { max-width: none; }
	.qw-steps-section .qw-btn { width: 100%; }

	/* Library + FAQ. */
	.qw-split,
	.qw-split--faq { gap: 28px; }
	.qw-split__text .qw-btn { width: 100%; }
	.qw-doc__title { font-size: 16px; }
	.qw-faq__item summary { padding: 16px 18px; font-size: 15px; min-height: 56px; box-sizing: border-box; }
	.qw-faq__item p { padding: 0 18px 16px; }
	.qw-ask { padding: 22px; }
	.qw-ask .qw-btn { width: 100%; }

	/* Final CTA. */
	.qw-final__phone { align-items: center; width: 100%; }

	/* Footer: real touch targets on stacked links. */
	.qw-footer__col ul { gap: 0; }
	.qw-footer__col ul a,
	.qw-footer__col > a {
		display: block;
		padding: 8px 0;
	}
	.qw-footer__col { gap: 4px; }
	.qw-footer__legal a {
		display: inline-block;
		padding: 8px 0;
	}
}

/* ---------- Split top-level items: label links to the hub, arrow opens the menu ---------- */

.qw-nav__split {
	display: inline-flex;
	align-items: center;
	margin: 0 -12px;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.qw-nav__split .qw-nav__top {
	margin: 0;
	padding: 8px 2px 8px 12px;
	border-radius: 999px 0 0 999px;
}

.qw-nav__split .qw-nav__top:hover {
	background: transparent;
}

.qw-nav__caret-btn {
	display: inline-flex;
	align-items: center;
	align-self: stretch;
	padding: 0 12px 0 4px;
	border: 0;
	border-radius: 0 999px 999px 0;
	background: transparent;
	color: inherit;
	font-family: var(--qw-font-body);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.qw-nav__split:hover {
	background: var(--qw-field);
}

.qw-nav__item.is-open .qw-nav__split {
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-nav__item.is-open .qw-nav__split .qw-nav__top {
	color: var(--qw-white);
}

.qw-nav__item.is-open .qw-nav__caret::after {
	content: '▴';
}

@media (max-width: 1180px) {
	.qw-nav__split {
		display: flex;
		width: 100%;
		margin: 0;
		border-radius: 0;
	}

	.qw-nav__split:hover,
	.qw-nav__item.is-open .qw-nav__split {
		background: transparent;
	}

	.qw-nav__split .qw-nav__top {
		flex: 1;
		width: auto;
		padding: 16px 4px;
		border-radius: 0;
	}

	.qw-nav__item.is-open .qw-nav__split .qw-nav__top,
	.qw-nav__item.is-open .qw-nav__caret-btn {
		color: var(--qw-ocean);
	}

	.qw-nav__caret-btn {
		justify-content: center;
		width: 52px;
		padding: 0;
		border-left: 1px solid var(--qw-border);
		border-radius: 0;
		font-size: 15px;
	}
}

/* =========================================================================
 * Hub page sections: page-hero, stat-bar, product-groups, link-groups,
 * comparison, resource-groups. Desktop values follow designs 03 and 09.
 * ====================================================================== */

.qw-section--light {
	background: var(--qw-field);
}

/* ---------- Inner page hero ---------- */

.qw-phero {
	padding: 140px var(--qw-gutter) 64px;
	color: var(--qw-white);
	font-family: var(--qw-font-body);
}

.qw-phero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}

.qw-phero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.qw-phero__title {
	font-size: clamp(38px, 4vw, 56px);
	line-height: 0.98;
}

.qw-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--qw-on-dark-muted);
}

.qw-crumbs li {
	display: flex;
	gap: 8px;
}

.qw-crumbs a {
	color: inherit;
	text-decoration: none;
}

.qw-crumbs a:hover {
	color: var(--qw-white);
	text-decoration: underline;
}

.qw-crumbs [aria-current] {
	color: var(--qw-white);
	font-weight: 600;
}

.qw-phero__media {
	position: relative;
	height: 460px;
}

.qw-phero__frame {
	position: absolute;
	inset: 24px 0 0 24px;
	border-radius: 24px;
	background: var(--qw-ocean);
}

.qw-phero__img {
	position: absolute;
	inset: 0 24px 24px 0;
	border-radius: 24px;
	overflow: hidden;
}

.qw-phero__img img,
.qw-phero__img picture,
.qw-pcard__media img,
.qw-pcard__media picture,
.qw-card__media picture,
.qw-project__media picture,
.qw-feature__media picture,
.qw-lgroup picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.qw-phero__badge {
	position: absolute;
	left: -28px;
	bottom: 48px;
	max-width: 320px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	border-radius: 18px;
	background: var(--qw-charcoal);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.qw-phero__badge strong {
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 46px;
	line-height: 0.9;
}

.qw-phero__badge span {
	font-size: 14px;
	line-height: 1.4;
}

/* ---------- Stat bar ---------- */

.qw-statbar {
	padding: 30px var(--qw-gutter);
	background: var(--qw-charcoal);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--qw-white);
	font-family: var(--qw-font-body);
}

.qw-statbar__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: 0;
	margin-bottom: 0;
}

.qw-statbar__grid > div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 4px;
}

.qw-statbar dd {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 34px;
	line-height: 1;
}

.qw-statbar dt {
	font-size: 14px;
	line-height: 1.45;
	color: var(--qw-on-dark);
}

/* ---------- Product groups ---------- */

.qw-pgroups {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

/* Small line under the product groups (e.g. products still in development). */
.qw-pgroups__note {
	margin: 40px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--qw-border);
	font-size: 14px;
	line-height: 1.55;
	color: var(--qw-caption);
}

.qw-pgroups__note a {
	font-weight: 600;
	color: var(--qw-ocean);
}

.qw-pgroup__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 32px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--qw-charcoal);
}

.qw-pgroup__title {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 30px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--qw-black);
}

.qw-pgroup__head p {
	max-width: 620px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--qw-body);
}

.qw-pcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 20px;
}

.qw-pcard {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	background: var(--qw-white);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.qw-pcard__media {
	display: block;
	height: 190px;
	flex-shrink: 0;
	overflow: hidden;
}

.qw-pcard__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-grow: 1;
	padding: 22px 24px 24px;
}

.qw-pcard__name {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 30px;
	line-height: 1;
	text-transform: uppercase;
}

.qw-pcard__name a {
	color: var(--qw-black);
	text-decoration: none;
}

.qw-pcard__text {
	font-size: 15px;
	line-height: 1.55;
	color: var(--qw-body);
}

.qw-pcard__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.qw-pcard__links a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 12px;
	border: 1px solid var(--qw-border-strong);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--qw-charcoal);
	text-decoration: none;
}

.qw-pcard__links a:hover {
	border-color: var(--qw-ocean);
	color: var(--qw-ocean);
}

.qw-pcard__more {
	margin-top: auto;
	padding-top: 6px;
	font-weight: 700;
	font-size: 14px;
	color: var(--qw-black);
	text-decoration: none;
}

.qw-pcard__more:hover {
	color: var(--qw-ocean);
}

.qw-pcard--noimg {
	border-top: 6px solid var(--qw-charcoal);
}

/* Wide product cards (one or two per row): photo beside the text. */
@media (min-width: 761px) {
	.qw-pcards > .qw-pcard:only-child,
	.qw-pcards:has(> .qw-pcard:nth-child(2):last-child) > .qw-pcard:not(.qw-pcard--noimg) {
		flex-direction: row;
	}

	.qw-pcards > .qw-pcard:only-child .qw-pcard__media,
	.qw-pcards:has(> .qw-pcard:nth-child(2):last-child) > .qw-pcard:not(.qw-pcard--noimg) .qw-pcard__media {
		width: 42%;
		height: auto;
		min-height: 260px;
	}
}

/* ---------- Link groups (application hub) ---------- */

.qw-lgroups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.qw-lgroup {
	background: var(--qw-white);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	scroll-margin-top: 110px;
}

.qw-lgroup .qw-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.qw-lgroup__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 22px 14px;
}

.qw-lgroup__body > p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--qw-body);
}

.qw-lgroup__links li + li {
	border-top: 1px solid var(--qw-border);
}

.qw-lgroup__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 10px 2px;
	color: var(--qw-black);
	text-decoration: none;
}

.qw-lgroup__links a > span:first-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.qw-lgroup__links strong {
	font-size: 16px;
	font-weight: 700;
}

.qw-lgroup__links small {
	font-size: 13px;
	line-height: 1.4;
	color: var(--qw-caption);
}

.qw-lgroup__arrow {
	color: var(--qw-ocean);
	font-size: 18px;
	transition: transform 0.15s ease;
}

.qw-lgroup__links a:hover strong {
	color: var(--qw-ocean);
}

.qw-lgroup__links a:hover .qw-lgroup__arrow {
	transform: translateX(3px);
}

/* ---------- Comparison table (design 03) ---------- */

.qw-table {
	border: 1px solid var(--qw-border);
	border-radius: 20px;
	overflow: hidden;
	font-family: var(--qw-font-body);
}

.qw-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

.qw-table caption {
	padding: 18px 22px;
	background: var(--qw-ocean);
	color: var(--qw-white);
	font-weight: 700;
	font-size: 16px;
	text-align: left;
}

.qw-table thead tr {
	background: var(--qw-charcoal);
	color: var(--qw-white);
	text-align: left;
}

.qw-table th,
.qw-table td {
	padding: 14px 22px;
	text-align: left;
	vertical-align: top;
}

.qw-table thead th {
	font-weight: 700;
}

.qw-table tbody tr {
	border-top: 1px solid var(--qw-border);
}

.qw-table tbody tr:nth-child(even) {
	background: var(--qw-field);
}

.qw-table tbody th {
	width: 34%;
	font-weight: 700;
	color: var(--qw-black);
}

.qw-table td {
	color: var(--qw-charcoal);
}

.qw-table td a {
	font-weight: 700;
	color: var(--qw-ocean);
	text-decoration: none;
	white-space: nowrap;
}

.qw-table td a:hover {
	text-decoration: underline;
}

.qw-note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 24px;
	padding: 22px 26px;
	border-radius: 18px;
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-note__title {
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 26px;
	text-transform: uppercase;
	line-height: 1.1;
}

.qw-note p + p {
	margin-top: 4px;
	font-size: 15px;
}

.qw-note .qw-btn svg {
	color: var(--qw-cta);
}

/* ---------- Resource groups (engineer hub) ---------- */

.qw-rgroups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: start;
}

.qw-rgroup__title {
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--qw-charcoal);
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 26px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--qw-black);
}

.qw-rgroup .qw-doc {
	background: var(--qw-white);
	padding: 14px 16px;
	gap: 14px;
	scroll-margin-top: 110px;
}

.qw-rgroup .qw-doc--featured {
	background: var(--qw-charcoal);
}

.qw-rgroup .qw-doc--featured .qw-doc__desc {
	color: var(--qw-on-dark);
}

.qw-rgroup .qw-doc__title {
	font-size: 16px;
}

/* ---------- Hub responsive ---------- */

@media (max-width: 1180px) {
	.qw-phero { padding-top: 128px; }
	.qw-phero__grid { grid-template-columns: 1fr; gap: 40px; }
	.qw-phero__media { height: 360px; margin-left: 28px; }
	.qw-lgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qw-rgroups { grid-template-columns: 1fr; gap: 36px; }
	.qw-statbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.qw-phero { padding-top: 104px; padding-bottom: 48px; }
	.qw-phero__copy { gap: 14px; }
	.qw-phero__media { height: 240px; margin-left: 16px; }
	.qw-phero__frame { inset: 14px 0 0 14px; }
	.qw-phero__img { inset: 0 14px 14px 0; }
	.qw-phero__badge { left: -16px; bottom: 28px; padding: 12px 16px; max-width: 260px; }
	.qw-phero__badge strong { font-size: 34px; }
	.qw-phero__badge span { font-size: 13px; }
	.qw-phero .qw-hero__actions .qw-btn { width: 100%; white-space: normal; text-align: center; }

	.qw-statbar { padding-top: 24px; padding-bottom: 24px; }
	.qw-statbar__grid { gap: 18px 16px; }
	.qw-statbar dd { font-size: 30px; }
	.qw-statbar dt { font-size: 13px; }

	.qw-pgroups { gap: 36px; }
	.qw-pgroup__title { font-size: 26px; }
	.qw-pcards { grid-template-columns: 1fr; gap: 14px; }
	.qw-pcards > .qw-pcard { flex-direction: column !important; }
	.qw-pcards > .qw-pcard .qw-pcard__media { width: auto !important; height: 170px !important; min-height: 0 !important; }
	.qw-pcard__body { padding: 18px 18px 20px; }
	.qw-pcard__name { font-size: 26px; }

	.qw-lgroups { grid-template-columns: 1fr; gap: 16px; }
	.qw-lgroup__body { padding: 16px 18px 8px; }

	/* Table becomes one card per row. */
	.qw-table { border: 0; border-radius: 0; overflow: visible; }
	.qw-table table,
	.qw-table tbody,
	.qw-table tr,
	.qw-table th,
	.qw-table td { display: block; width: auto; }
	.qw-table caption { display: block; border-radius: 16px 16px 0 0; }
	.qw-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.qw-table tbody tr { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--qw-border); border-radius: 14px; background: var(--qw-white) !important; }
	.qw-table tbody th { width: auto; padding: 0 0 6px; font-size: 16px; }
	.qw-table td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
	.qw-table td::before { content: attr(data-label); font-weight: 600; color: var(--qw-caption); flex-shrink: 0; }
	.qw-table td a { white-space: normal; text-align: right; }
	.qw-note { flex-direction: column; align-items: stretch; padding: 20px; }
	.qw-note .qw-btn { width: 100%; white-space: normal; text-align: center; }

	.qw-rgroup__title { font-size: 24px; }
}

/* Product cards: photo fills its frame instead of setting the card height. */
.qw-pcard__media {
	position: relative;
}

.qw-pcard__media img,
.qw-pcard__media picture {
	position: absolute;
	inset: 0;
}

.qw-pcard__media picture img {
	position: static;
}

.qw-lgroup--cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 16px;
	padding: 36px 32px;
	background: var(--qw-ocean);
	color: var(--qw-white);
	box-shadow: none;
}

.qw-lgroup__cta-title {
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 34px;
	line-height: 1;
	text-transform: uppercase;
}

.qw-lgroup--cta p:not(.qw-lgroup__cta-title) {
	font-size: 16px;
	line-height: 1.6;
	color: var(--qw-on-dark);
}

@media (max-width: 760px) {
	.qw-lgroup--cta { padding: 26px 20px; }
	.qw-lgroup__cta-title { font-size: 28px; }
	.qw-lgroup--cta .qw-btn { width: 100%; }
}

@media (max-width: 760px) {
	.qw-table td { text-align: right; }
}

/* Phones: long button labels wrap inside the pill instead of spilling out. */
@media (max-width: 760px) {
	.qw-btn {
		height: auto;
		min-height: 52px;
		padding-top: 12px;
		padding-bottom: 12px;
		white-space: normal;
		text-align: center;
		line-height: 1.25;
	}
}

/* =========================================================================
 * Projects / Learn / About sections: feature, card-library, doc-row, timeline
 * ====================================================================== */

.qw-section--tight-bottom {
	padding-bottom: 0;
}

/* ---------- Feature (design 09 featured case study) ---------- */

.qw-feat {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	border: 1px solid var(--qw-border);
	border-radius: 24px;
	overflow: hidden;
	background: var(--qw-white);
}

.qw-feat__media {
	position: relative;
	min-height: 380px;
}

.qw-feat__media img,
.qw-feat__media picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.qw-feat__media picture img {
	position: static;
}

.qw-feat__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 36px;
}

.qw-feat__tag {
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--qw-black);
	color: var(--qw-white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.qw-feat__title {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: clamp(30px, 2.8vw, 40px);
	line-height: 1;
	text-transform: uppercase;
	color: var(--qw-black);
}

.qw-feat__body > p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--qw-body);
}

.qw-feat__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
	margin: 0;
}

.qw-feat__stats > div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	padding: 12px;
	border-radius: 12px;
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-feat__stats dd {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 26px;
	line-height: 1.1;
}

.qw-feat__stats dt {
	font-size: 12px;
	line-height: 1.35;
	color: var(--qw-on-dark);
}

.qw-feat .qw-btn {
	margin-top: auto;
}

.qw-feat .qw-btn svg {
	color: var(--qw-cta);
}

/* ---------- Card library ---------- */

.qw-libfilters {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 40px;
	padding: 24px;
	border-radius: 20px;
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-libfilters__row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.qw-libfilters__label {
	flex: 0 0 110px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.qw-libfilters__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.qw-libfilters__btns button {
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--qw-border-strong);
	border-radius: 999px;
	background: var(--qw-white);
	color: var(--qw-black);
	font-family: var(--qw-font-body);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.qw-libfilters__btns button:hover {
	border-color: var(--qw-charcoal);
}

.qw-libfilters__btns button[aria-pressed='true'] {
	background: var(--qw-charcoal);
	border-color: var(--qw-white);
	color: var(--qw-white);
}

.qw-libfilters :focus-visible {
	outline-color: var(--qw-white);
}

.qw-lib__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 22px;
}

.qw-lib__title {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 40px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--qw-black);
}

.qw-lib__count {
	font-size: 14px;
	color: var(--qw-caption);
}

.qw-lib {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.qw-lib > li {
	display: flex;
}

.qw-lib > li[hidden] {
	display: none;
}

.qw-libcard {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid var(--qw-border);
	border-radius: 20px;
	overflow: hidden;
	background: var(--qw-white);
	color: var(--qw-black);
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.qw-libcard:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.qw-libcard__media {
	position: relative;
	height: 200px;
	flex-shrink: 0;
	overflow: hidden;
}

.qw-libcard__media img,
.qw-libcard__media picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.qw-libcard__note {
	position: absolute;
	left: 12px;
	top: 12px;
	right: 12px;
	padding: 6px 10px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.78);
	color: var(--qw-white);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
}

.qw-libcard__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-grow: 1;
	padding: 20px 22px 24px;
}

.qw-libcard__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.qw-tag {
	padding: 4px 10px;
	border: 1px solid var(--qw-border-strong);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.qw-tag--solid {
	background: var(--qw-ocean);
	border-color: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-libcard__title {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--qw-black);
}

.qw-libcard__loc {
	font-size: 13px;
	color: var(--qw-caption);
}

.qw-libcard__text {
	font-size: 15px;
	line-height: 1.5;
	color: var(--qw-body);
}

.qw-libcard__more {
	margin-top: auto;
	padding-top: 8px;
	font-weight: 700;
	font-size: 14px;
}

.qw-libcard__more.is-muted {
	font-weight: 600;
	color: var(--qw-caption);
}

a.qw-libcard:hover .qw-libcard__more {
	color: var(--qw-ocean);
}

/* Compact (text-only) cards: articles. */
.qw-lib--compact .qw-libcard {
	border-top: 5px solid var(--qw-charcoal);
}

.qw-lib--compact .qw-libcard__title {
	font-size: 22px;
}

.qw-lib__empty {
	margin-top: 20px !important;
	font-size: 15px;
	color: var(--qw-body);
}

.qw-lib__empty button {
	margin-left: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--qw-ocean);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- Doc row (design 09 resources) ---------- */

.qw-docrow-section {
	padding-top: 56px;
	padding-bottom: 56px;
}

.qw-docrow-section .qw-h2 {
	font-size: 40px;
}

.qw-docrow {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

/* Fewer or more than 3 cards: balanced rows, no lone card on a second row. */
.qw-docrow--n2,
.qw-docrow--n4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qw-docrow--n1 {
	grid-template-columns: minmax(0, 420px);
}

.qw-docrow .qw-doc {
	height: 100%;
	box-sizing: border-box;
	padding: 22px;
	gap: 16px;
	border: 0;
	background: var(--qw-white);
}

.qw-docrow .qw-doc__badge {
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-docrow .qw-doc--featured {
	background: var(--qw-charcoal);
}

.qw-docrow .qw-doc__title {
	font-size: 16px;
}

.qw-docrow .qw-doc__kicker {
	font-size: 11px;
	font-weight: 700;
}

/* ---------- Timeline ---------- */

.qw-timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 18px;
}

.qw-timeline::before {
	content: '';
	position: absolute;
	top: 22px;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--qw-charcoal);
}

.qw-timeline__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.qw-timeline__year {
	align-self: flex-start;
	position: relative;
	padding: 10px 14px;
	border-radius: 999px;
	background: var(--qw-ocean);
	color: var(--qw-white);
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 18px;
	line-height: 1.1;
	white-space: nowrap;
}

.qw-timeline__body h3 {
	margin: 0 0 6px;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 21px;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--qw-black);
}

.qw-timeline__body p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--qw-body);
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
	.qw-feat { grid-template-columns: 1fr; }
	.qw-feat__media { min-height: 300px; }
	.qw-lib { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qw-docrow { grid-template-columns: 1fr; }
	.qw-timeline { grid-template-columns: 1fr; gap: 0; padding-left: 4px; }
	.qw-timeline::before { top: 0; bottom: 0; left: 18px; right: auto; width: 3px; height: auto; }
	.qw-timeline__item { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding-bottom: 26px; }
	.qw-timeline__year { justify-self: start; }
}

@media (max-width: 760px) {
	.qw-feat__media { min-height: 220px; }
	.qw-feat__body { padding: 22px 20px 24px; }
	.qw-feat__stats { gap: 8px; }
	.qw-feat__stats > div { padding: 10px; }
	.qw-feat__stats dd { font-size: 22px; }
	.qw-feat .qw-btn { width: 100%; }

	.qw-libfilters { margin: 0 calc(-1 * var(--qw-gutter)) 28px; padding: 18px var(--qw-gutter); border-radius: 0; gap: 14px; }
	.qw-libfilters__row { flex-direction: column; align-items: flex-start; gap: 8px; }
	.qw-libfilters__label { flex: none; }
	.qw-libfilters__btns { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + var(--qw-gutter)); padding-right: var(--qw-gutter); scrollbar-width: none; }
	.qw-libfilters__btns::-webkit-scrollbar { display: none; }
	.qw-libfilters__btns button { flex-shrink: 0; height: 44px; }

	.qw-lib__head { flex-direction: column; align-items: flex-start; gap: 6px; }
	.qw-lib__title { font-size: 32px; }
	.qw-lib { grid-template-columns: 1fr; gap: 14px; }
	.qw-libcard__media { height: 180px; }
	.qw-lib--compact .qw-libcard__body { padding: 16px 18px 18px; }

	.qw-docrow-section .qw-h2 { font-size: 32px; }

	.qw-timeline__item { grid-template-columns: 1fr; gap: 10px; padding-left: 44px; }
	.qw-timeline__year { font-size: 16px; padding: 8px 12px; margin-left: -44px; }
}

@media (max-width: 760px) {
	/* Chip rows swipe sideways but never widen the page. */
	.qw-libfilters { overflow: hidden; }
}

/* =========================================================================
 * Consultation page (design 05)
 * ====================================================================== */

/* ---------- Hero + booking ---------- */

.qw-chero {
	position: relative;
	padding: 140px var(--qw-gutter) 64px;
	font-family: var(--qw-font-body);
}

.qw-chero__bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 640px;
}

.qw-chero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 56px;
	align-items: start;
}

.qw-chero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding-top: 12px;
	color: var(--qw-white);
}

.qw-chero__title {
	font-size: clamp(40px, 4vw, 60px);
	line-height: 0.95;
}

.qw-chero__checks {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	font-weight: 500;
}

.qw-chero__checks li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.qw-ways {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: 6px;
}

.qw-ways__label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--qw-on-dark-muted);
}

.qw-way {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border: 2px solid var(--qw-black);
	border-radius: 14px;
	background: var(--qw-white);
	color: var(--qw-black);
	text-decoration: none;
	transition: transform 0.15s ease;
}

.qw-way:hover {
	transform: translateX(3px);
}

.qw-way--primary {
	border-color: var(--qw-cta);
	background: var(--qw-cta);
}

.qw-way > span:last-child {
	display: flex;
	flex-direction: column;
}

.qw-way strong {
	font-size: 15px;
}

.qw-way > span:last-child > span {
	font-size: 13px;
	color: var(--qw-body);
}

.qw-way--primary > span:last-child > span {
	color: var(--qw-black);
}

.qw-way__num {
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	flex-shrink: 0;
	border: 2px solid var(--qw-black);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
}

.qw-way--primary .qw-way__num {
	border-color: var(--qw-charcoal);
	background: var(--qw-charcoal);
	color: var(--qw-cta);
}

.qw-book {
	background: var(--qw-white);
	border-radius: 24px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22);
	overflow: hidden;
	scroll-margin-top: 110px;
}

.qw-book__bar {
	height: 8px;
	background: var(--qw-charcoal);
}

.qw-book__inner {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px 28px 28px;
}

.qw-book__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
}

.qw-book__head > div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.qw-book__tag {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--qw-black);
	color: var(--qw-white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.qw-book__title {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 32px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--qw-black);
}

.qw-book__meta {
	margin: 0;
	font-size: 13px;
	color: var(--qw-caption);
	text-align: right;
}

.qw-book__frame {
	width: 100%;
	height: 640px;
	border: 0;
	border-radius: 8px;
}

/* meeting-embed section: intro beside the booking card, stacked at 1360px and below (HubSpot needs ~620px). */
.qw-meet {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 48px;
	align-items: start;
}

.qw-meet__points {
	margin-top: 20px;
	color: var(--qw-charcoal);
}

@media (max-width: 1360px) {
	.qw-meet { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* HubSpot draws its own card and sets the iframe about 45px taller than it; let it fill the card's side
   padding and tuck its blank bottom into the card's bottom padding (both white). */
.qw-book__meetings {
	min-height: 615px;
	margin: 0 -20px -24px;
}

.qw-book__meetings iframe {
	display: block;
	width: 100%;
	border: 0;
}

.qw-book__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 420px;
	padding: 32px 28px;
	border: 2px dashed var(--qw-border-strong);
	border-radius: 16px;
	background: var(--qw-field);
	text-align: center;
	color: var(--qw-body);
}

.qw-book__placeholder > svg {
	color: var(--qw-ocean);
}

.qw-book__placeholder p {
	max-width: 420px;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

.qw-book__ph-title {
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 26px !important;
	line-height: 1.1 !important;
	text-transform: uppercase;
	color: var(--qw-black);
}

.qw-book__ph-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 6px;
}

.qw-book__admin {
	margin-top: 6px !important;
	font-size: 12px !important;
	color: var(--qw-caption);
}

.qw-book__note {
	margin: 0;
	font-size: 12px;
	text-align: center;
	color: var(--qw-caption);
}

.qw-or {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 8px var(--qw-gutter) 0;
}

.qw-or span {
	flex-grow: 1;
	height: 1px;
	background: var(--qw-border-strong);
}

.qw-or strong {
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: 0.1em;
}

/* ---------- Option 2 form ---------- */

.qw-cform-section {
	padding-top: 48px;
	padding-bottom: 72px;
	scroll-margin-top: 90px;
}

.qw-cform {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 56px;
	align-items: start;
}

.qw-cform__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding-top: 8px;
}

.qw-cform__tag {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--qw-ocean);
	color: var(--qw-white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.qw-cform__intro .qw-h2 {
	color: var(--qw-black);
	font-size: clamp(34px, 3.2vw, 44px);
}

.qw-helpful {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border-radius: 16px;
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-helpful strong {
	font-size: 15px;
}

.qw-helpful ul {
	margin: 0 !important;
	padding: 0 0 0 18px !important;
	list-style: disc !important;
	font-size: 15px;
	line-height: 1.7;
}

.qw-cform__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border: 1px solid var(--qw-border);
	border-radius: 24px;
	background: var(--qw-white);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.qw-cform__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}

.qw-cform .qw-field label {
	font-size: 13px;
}

.qw-cform .qw-field input,
.qw-cform .qw-field select {
	height: 50px;
}

.qw-cform .qw-field textarea {
	height: auto;
	min-height: 120px;
	padding: 14px 16px;
}

.qw-cform__submit {
	width: 100%;
	border: 0;
	cursor: pointer;
}

.qw-cform__privacy {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	color: var(--qw-caption);
}

.qw-cform__privacy a {
	color: inherit;
}

.qw-cform__notice {
	padding: 14px 16px;
	border-left: 5px solid var(--qw-ocean);
	border-radius: 10px;
	background: #e8f3f7;
	font-size: 14px;
	line-height: 1.55;
	color: var(--qw-black);
}

.qw-cform__notice a {
	font-weight: 700;
	color: var(--qw-ocean);
}

.qw-hsform__loading {
	color: var(--qw-caption);
}


/* ---------- What happens next ---------- */

.qw-nextsteps-section {
	padding-top: 24px;
	padding-bottom: 72px;
}

.qw-nextsteps-section .qw-h2 {
	color: var(--qw-black);
}

.qw-nextsteps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.qw-nextsteps li {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px;
	border-radius: 18px;
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-nextsteps__num {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.5);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 24px;
}

.qw-nextsteps h3 {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--qw-white);
}

.qw-nextsteps p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--qw-on-dark);
}

/* ---------- Quote + proof tiles ---------- */

.qw-qproof {
	padding: 56px var(--qw-gutter);
	background: var(--qw-charcoal);
	color: var(--qw-white);
	font-family: var(--qw-font-body);
}

.qw-qproof__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.qw-qproof__quote {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.qw-qproof__mark {
	height: 28px;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 64px;
	line-height: 0.5;
}

.qw-qproof blockquote {
	margin: 0;
}

.qw-qproof blockquote p {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 700;
	font-size: clamp(30px, 2.8vw, 40px);
	line-height: 1.1;
	text-transform: uppercase;
}

.qw-qproof figcaption {
	display: flex;
	align-items: center;
	gap: 12px;
}

.qw-qproof__initials {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--qw-ocean);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
}

.qw-qproof figcaption > span:last-child {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	color: var(--qw-on-dark-muted);
}

.qw-qproof figcaption strong {
	font-size: 15px;
	color: var(--qw-white);
}

.qw-qproof__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
}

.qw-qproof__tiles > div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 6px;
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 16px;
}

.qw-qproof__tiles dd {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 32px;
	line-height: 1;
}

.qw-qproof__tiles .is-small dd {
	font-size: 22px;
	line-height: 1.1;
	text-transform: uppercase;
}

.qw-qproof__tiles dt {
	font-size: 13px;
	color: var(--qw-on-dark);
}

/* ---------- Other ways to reach us ---------- */

.qw-contacts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.qw-contacts > li {
	display: flex;
}

.qw-contact {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	padding: 24px;
	border: 1px solid var(--qw-border);
	border-radius: 18px;
	color: var(--qw-black);
	text-decoration: none;
}

a.qw-contact:hover {
	border-color: var(--qw-charcoal);
}

.qw-contact__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--qw-charcoal);
}

.qw-contact__value {
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 28px;
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.qw-contact__text {
	font-size: 14px;
	color: var(--qw-body);
}

.qw-askstrip {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 24px;
	padding: 20px 24px;
	border-radius: 18px;
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-askstrip img {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
}

.qw-askstrip p {
	flex-grow: 1;
	font-size: 15px;
	line-height: 1.5;
}

.qw-askstrip .qw-btn {
	flex-shrink: 0;
}

/* ---------- Single-column FAQ ---------- */

.qw-faq-solo {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.qw-faq-solo .qw-faq {
	max-width: 1000px;
}

.qw-faq-solo .qw-h2 {
	font-size: clamp(32px, 3vw, 40px);
}

.qw-faq-solo .qw-faq__item summary {
	padding: 18px 24px;
	font-size: 17px;
	font-weight: 700;
}

.qw-faq-solo .qw-faq__item p {
	padding: 0 24px 20px;
}

/* ---------- Header call button (consultation page) ---------- */

.qw-header__cta.qw-btn--dark {
	padding: 0 26px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
	.qw-chero { padding-top: 128px; }
	.qw-chero__bg { height: 760px; }
	.qw-chero__grid,
	.qw-cform,
	.qw-qproof__grid { grid-template-columns: 1fr; gap: 36px; }
	.qw-chero__copy { max-width: 720px; }
	.qw-ways { max-width: 520px; }
	.qw-nextsteps,
	.qw-contacts { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
	.qw-chero { padding-top: 104px; padding-bottom: 40px; }
	.qw-chero__bg { height: 900px; }
	.qw-chero__copy { gap: 16px; }
	.qw-chero__checks { font-size: 15px; }
	.qw-book { border-radius: 20px; margin: 0 calc(-1 * var(--qw-gutter) + 8px); }
	.qw-book__inner { padding: 20px 16px 22px; }
	.qw-book__meetings { margin: 0 -10px -18px; }
	.qw-book__head { flex-direction: column; align-items: flex-start; gap: 6px; }
	.qw-book__meta { text-align: left; }
	.qw-book__placeholder { min-height: 0; padding: 26px 18px; }
	.qw-book__ph-actions .qw-btn { width: 100%; }
	.qw-book__frame { height: 760px; }
	.qw-cform-section { padding-top: 36px; padding-bottom: 48px; }
	.qw-cform__card { padding: 20px 16px; border-radius: 20px; }
	.qw-cform__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.qw-cform__grid .qw-field:nth-child(n + 3) { grid-column: 1 / -1; }
	.qw-nextsteps li { padding: 20px; }
	.qw-qproof { padding-top: 44px; padding-bottom: 44px; }
	.qw-qproof__tiles dd { font-size: 26px; }
	.qw-qproof__tiles .is-small dd { font-size: 18px; }
	.qw-contact { padding: 18px; }
	.qw-contact__value { font-size: 24px; }
	.qw-askstrip { flex-direction: column; align-items: flex-start; padding: 20px; }
	.qw-askstrip .qw-btn { width: 100%; }
	.qw-faq-solo .qw-faq__item summary { padding: 16px 18px; font-size: 16px; }
	.qw-faq-solo .qw-faq__item p { padding: 0 18px 16px; }
}

/* Grids must be able to shrink below their fields' natural width on phones. */
.qw-field input,
.qw-field select,
.qw-field textarea {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

@media (max-width: 1180px) {
	.qw-chero__grid,
	.qw-cform,
	.qw-qproof__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
	.qw-cform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Consultation hero: the dark band follows the copy column's real height (never cuts through it).
   It spans the full width from a pseudo-element; overflow-x: clip stops it widening the page. */
.qw-chero {
	overflow-x: clip;
}

.qw-chero__bg {
	display: none;
}

.qw-chero__copy {
	position: relative;
}

.qw-chero__copy::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -200px;
	bottom: -56px;
	left: -100vw;
	right: -100vw;
	background:
		linear-gradient(27deg, #2c2c2c 5px, transparent 5px) 0 5px,
		linear-gradient(207deg, #2c2c2c 5px, transparent 5px) 10px 0,
		linear-gradient(27deg, #3a3a3a 5px, transparent 5px) 0 10px,
		linear-gradient(207deg, #3a3a3a 5px, transparent 5px) 10px 5px,
		linear-gradient(90deg, #303030 10px, transparent 10px),
		linear-gradient(#323232 25%, #2f2f2f 25%, #2f2f2f 50%, transparent 50%, transparent 75%, #383838 75%, #383838);
	background-color: var(--qw-charcoal);
	background-size: 20px 20px;
}

/* Consultation hero stacks earlier than the rest of the site: HubSpot's scheduler needs a card about
   620px wide for its two-column calendar + times layout, which the side-by-side grid gives only above 1360px. */
@media (max-width: 1360px) {
	.qw-chero { padding-top: 128px; }
	.qw-chero__bg { height: 760px; }
	.qw-chero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.qw-chero__copy { max-width: 720px; }
	.qw-ways { max-width: 520px; }
	.qw-chero__copy::before { bottom: -220px; }
}
@media (max-width: 1180px) {
	/* Stacked: run the band under the top of the booking card. */
	.qw-chero__copy::before {
		bottom: -220px;
	}
}

/* =========================================================================
 * Product pages (designs 06, 07, 08): hero checks, tiles, step cards,
 * advantages, content-needed, FAQ on white.
 * ====================================================================== */

.qw-phero__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 500;
}

.qw-phero__checks li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.qw-phero__img .qw-libcard__note {
	z-index: 1;
}

/* Tiles */
.qw-tiles {
	display: grid;
	grid-template-columns: repeat(var(--qw-tile-cols, 3), minmax(0, 1fr));
	gap: 18px;
}

.qw-tiles > li {
	display: flex;
}

.qw-tile .qw-libcard__media {
	height: 180px;
}

.qw-tiles + .qw-note,
.qw-advs + .qw-note,
.qw-stepcards + .qw-note {
	margin-top: 24px;
}

/* Step cards (charcoal, numbered) */
.qw-stepcards {
	display: grid;
	grid-template-columns: repeat(var(--qw-step-cols, 4), minmax(0, 1fr));
	gap: 14px;
}

.qw-stepcards li {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	border-radius: 18px;
	background: var(--qw-charcoal);
	color: var(--qw-white);
}

.qw-stepcards__num {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--qw-ocean);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 22px;
}

.qw-stepcards h3 {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--qw-white);
}

.qw-stepcards p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--qw-on-dark);
}

.qw-stepcards__link {
	margin-top: 22px !important;
}

.qw-stepcards__link .qw-btn svg {
	color: var(--qw-cta);
}

/* Advantages (ocean tiles; descriptions use on-dark text for contrast) */
.qw-advs {
	display: grid;
	grid-template-columns: repeat(var(--qw-adv-cols, 4), minmax(0, 1fr));
	gap: 14px;
}

.qw-advs li {
	display: flex;
	gap: 12px;
	padding: 18px;
	border-radius: 16px;
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-advs .qw-icon-circle {
	width: 26px;
	height: 26px;
	background: rgba(255, 255, 255, 0.16);
}

.qw-advs h3 {
	margin: 0 0 4px;
	font-family: var(--qw-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--qw-white);
}

.qw-advs p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--qw-on-dark);
}

/* Content needed */
.qw-needed {
	padding: 26px 28px;
	border: 2px dashed var(--qw-border-strong);
	border-radius: 18px;
	background: var(--qw-field);
}

.qw-needed__title {
	margin-bottom: 8px !important;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 26px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--qw-black);
}

.qw-needed p:not(.qw-needed__title) {
	max-width: 820px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--qw-body);
}

/* FAQ on a white band: closed questions are ocean bars (designs 06-08). */
.qw-section--white .qw-faq__item {
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-section--white .qw-faq__item[open] {
	background: var(--qw-charcoal);
}

.qw-section--white .qw-faq__item summary:focus-visible {
	outline-color: var(--qw-black);
}

.qw-section--white .qw-faq-solo .qw-h2,
.qw-section--light .qw-faq-solo .qw-h2 {
	color: var(--qw-black);
}

/* Testimonials on a light band keep the dark-on-light heading. */
.qw-section--light .qw-h2 {
	color: var(--qw-black);
}

/* Comparison tables with an empty corner header. */
.qw-table thead th:empty {
	width: 26%;
}

@media (max-width: 1180px) {
	.qw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qw-stepcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qw-advs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.qw-tiles,
	.qw-stepcards,
	.qw-advs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.qw-stepcards li { padding: 20px; }
	.qw-stepcards__link .qw-btn { width: 100%; }
	.qw-phero__checks { flex-direction: column; gap: 8px; }
	.qw-needed { padding: 20px; }
}

/* Tables keep white rows on gray bands. */
.qw-table {
	background: var(--qw-white);
}

/* =========================================================================
 * Application pages (design 03)
 * ====================================================================== */

.qw-btn--xs {
	height: 40px;
	padding: 0 16px;
	font-size: 12px;
	letter-spacing: 0.06em;
}

.qw-note--dark {
	padding: 28px 32px;
	background: var(--qw-charcoal);
}

.qw-note--dark .qw-note__title {
	font-size: 30px;
}

.qw-note--dark p + p {
	color: var(--qw-on-dark);
}

/* Causes */
.qw-causes {
	display: grid;
	grid-template-columns: repeat(var(--qw-cause-cols, 4), minmax(0, 1fr));
	gap: 16px;
}

.qw-causes li {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	border-radius: 16px;
	background: #e6f2f6;
	color: var(--qw-black);
}

.qw-causes li:first-child {
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-causes__num {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--qw-ocean);
	color: var(--qw-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 18px;
}

.qw-causes li:first-child .qw-causes__num {
	background: rgba(255, 255, 255, 0.18);
}

.qw-causes h3 {
	margin: 0 0 4px;
	font-family: var(--qw-font-body);
	font-size: 17px;
	font-weight: 700;
	color: inherit;
}

.qw-causes p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--qw-body);
}

.qw-causes li:first-child p {
	color: var(--qw-on-dark);
}

/* Systems */
.qw-systems {
	display: grid;
	grid-template-columns: repeat(var(--qw-sys-cols, 2), minmax(0, 1fr));
	gap: 20px;
}

.qw-system {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--qw-border);
	border-radius: 20px;
	overflow: hidden;
	background: var(--qw-white);
}

.qw-system__media {
	height: 210px;
	flex-shrink: 0;
	overflow: hidden;
}

.qw-system__media img,
.qw-system__media picture,
.qw-medialist__img img,
.qw-medialist__img picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.qw-system__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	flex-grow: 1;
	padding: 24px;
}

.qw-system__kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--qw-charcoal);
}

.qw-system__name {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 30px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--qw-black);
}

.qw-system__body > p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--qw-body);
}

.qw-system__body ul {
	margin: 0 !important;
	padding: 0 0 0 18px !important;
	list-style: disc !important;
	font-size: 15px;
	line-height: 1.7;
	color: var(--qw-charcoal);
}

.qw-system .qw-btn {
	margin-top: auto;
}

.qw-system .qw-btn svg {
	color: var(--qw-cta);
}

.qw-systems + .qw-note {
	margin-top: 24px;
}

/* Media list */
.qw-medialist {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: center;
}

.qw-medialist__img {
	height: 340px;
	border-radius: 20px;
	overflow: hidden;
}

.qw-medialist__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.qw-medialist__text .qw-h2 {
	color: var(--qw-black);
	font-size: clamp(32px, 3vw, 40px);
}

.qw-medialist__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
}

.qw-medialist__list li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.qw-medialist__list .qw-icon-circle {
	width: 24px;
	height: 24px;
}

/* Sheet cards */
.qw-sheets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.qw-sheet {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 22px;
	border: 1px solid var(--qw-border);
	border-radius: 18px;
	background: var(--qw-white);
}

.qw-sheet h3 {
	margin: 0;
	font-family: var(--qw-font-body);
	font-size: 18px;
	font-weight: 700;
	color: var(--qw-black);
}

.qw-sheet p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--qw-body);
}

.qw-sheet .qw-sheet__loc {
	font-size: 14px;
	color: var(--qw-caption);
}

.qw-sheet .qw-btn {
	margin-top: auto;
}

.qw-sheets + .qw-note {
	margin-top: 22px;
}

/* Related applications */
.qw-related {
	display: grid;
	grid-template-columns: repeat(var(--qw-rel-cols, 5), minmax(0, 1fr));
	gap: 16px;
}

.qw-related > li {
	display: flex;
}

.qw-related__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	padding: 22px;
	border-top: 5px solid var(--qw-charcoal);
	border-radius: 18px;
	background: var(--qw-white);
	color: var(--qw-black);
	text-decoration: none;
	transition: transform 0.15s ease;
}

.qw-related__card:hover {
	transform: translateY(-2px);
}

.qw-related__title {
	font-family: var(--qw-font-heading);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.05;
	text-transform: uppercase;
}

.qw-related__text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--qw-body);
}

.qw-related__more {
	margin-top: auto;
	padding-top: 6px;
	font-weight: 700;
	font-size: 13px;
}

@media (max-width: 1180px) {
	.qw-causes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qw-systems { grid-template-columns: minmax(0, 1fr); }
	.qw-sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qw-related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.qw-causes,
	.qw-sheets { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.qw-related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.qw-related__card { padding: 16px; }
	.qw-related__title { font-size: 20px; }
	.qw-medialist { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.qw-medialist__img { height: 220px; }
	.qw-system__media { height: 180px; }
	.qw-system__body { padding: 20px; }
	.qw-system .qw-btn { width: 100%; }
	.qw-note--dark { padding: 22px 20px; }
	.qw-note--dark .qw-note__title { font-size: 24px; }
}

.qw-related > li,
.qw-related__card { min-width: 0; }

@media (max-width: 420px) {
	.qw-related { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
 * Case studies (designs 10, 11)
 * ====================================================================== */

.qw-phero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qw-phero__tags li {
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* Facts grid */
.qw-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	border: 1px solid var(--qw-border);
	border-radius: 20px;
	overflow: hidden;
	background: var(--qw-white);
}

.qw-facts > div {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 24px;
	border-right: 1px solid var(--qw-border);
	border-bottom: 1px solid var(--qw-border);
}

.qw-facts > div:nth-child(3n) {
	border-right: 0;
}

.qw-facts dt {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--qw-ocean);
}

.qw-facts dd {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--qw-black);
}

/* Story blocks */
.qw-story {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.qw-story--flip .qw-story__text {
	order: 2;
}

.qw-story__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.qw-story__text .qw-h2 {
	color: var(--qw-black);
	font-size: clamp(32px, 3vw, 42px);
}

.qw-story__kicker {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--qw-ocean);
}

.qw-story__points {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
}

.qw-story__points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.5;
}

.qw-story__points .qw-icon-circle {
	width: 24px;
	height: 24px;
	margin-top: 1px;
}

.qw-story__side {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.qw-story__img {
	position: relative;
	height: 360px;
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
}

.qw-story__img img,
.qw-story__img picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.qw-story__stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qw-layers {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qw-layers li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-radius: 12px;
	background: var(--qw-ocean);
	color: var(--qw-white);
	font-size: 15px;
}

.qw-layers li:last-child {
	background: var(--qw-charcoal);
}

.qw-layers span {
	color: var(--qw-on-dark);
	text-align: right;
}

/* Video */
.qw-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 20px;
	overflow: hidden;
	background: var(--qw-charcoal);
}

.qw-video img,
.qw-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.qw-video img {
	filter: brightness(0.6);
}

.qw-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border: 0;
	background: transparent;
	color: var(--qw-white);
	font-family: var(--qw-font-body);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}

.qw-video__icon {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--qw-cta);
	color: var(--qw-black);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease;
}

.qw-video__play:hover .qw-video__icon {
	transform: scale(1.06);
}

.qw-video__play:focus-visible {
	outline: 3px solid var(--qw-white);
	outline-offset: -8px;
}

.qw-video__note {
	position: absolute;
	right: 16px;
	bottom: 12px;
	margin: 0;
	font-size: 12px;
	color: var(--qw-on-dark);
}

@media (max-width: 1180px) {
	.qw-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qw-facts > div:nth-child(3n) { border-right: 1px solid var(--qw-border); }
	.qw-facts > div:nth-child(2n) { border-right: 0; }
	.qw-story { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.qw-story--flip .qw-story__text { order: 0; }
}

@media (max-width: 760px) {
	.qw-facts { grid-template-columns: minmax(0, 1fr); }
	.qw-facts > div { border-right: 0 !important; padding: 16px 18px; }
	.qw-story__img { height: 220px; }
	.qw-video { border-radius: 14px; }
	.qw-video__icon { width: 60px; height: 60px; }
}

/* =========================================================================
 * Learn articles: article-hero + article-body (inc/article.php)
 * ====================================================================== */

.qw-ahero {
	padding: 140px var(--qw-gutter) 56px;
	color: var(--qw-white);
	font-family: var(--qw-font-body);
}

.qw-ahero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 56px;
	align-items: end;
}

.qw-ahero__title {
	margin: 14px 0 0;
	font-size: clamp(40px, 4.6vw, 64px);
	line-height: 0.98;
}

.qw-ahero__lead {
	max-width: 760px;
	margin: 20px 0 0;
	font-size: 19px;
	line-height: 1.6;
	color: var(--qw-on-dark);
}

.qw-ahero__lead a {
	color: var(--qw-white);
}

.qw-ahero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--qw-on-dark-muted);
}

.qw-ahero__author {
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.32);
}

.qw-ahero__who {
	display: flex;
	align-items: center;
	gap: 14px;
}

.qw-ahero__who > span:last-child {
	display: flex;
	flex-direction: column;
}

.qw-ahero__avatar img {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.qw-ahero__by {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--qw-on-dark-muted);
}

.qw-ahero__role {
	font-size: 13px;
	color: var(--qw-on-dark-muted);
}

.qw-ahero__author p {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--qw-on-dark);
}

.qw-ahero__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--qw-white);
}

/* Two-column body: sticky sidebar + reading column. */
.qw-article-section {
	padding-top: 56px;
	padding-bottom: 72px;
}

.qw-article {
	display: grid;
	grid-template-columns: 260px minmax(0, 760px);
	justify-content: center;
	gap: 64px;
	align-items: start;
}

.qw-article__side {
	align-self: stretch;
}

.qw-article__sticky {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}

.qw-toc summary {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qw-ocean);
	cursor: default;
	list-style: none;
	pointer-events: none;
}

.qw-toc summary::-webkit-details-marker {
	display: none;
}

.qw-toc ol {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--qw-border);
}

.qw-toc a {
	display: block;
	margin-left: -2px;
	padding: 7px 0 7px 14px;
	border-left: 2px solid transparent;
	font-size: 14px;
	line-height: 1.4;
	color: var(--qw-body);
	text-decoration: none;
}

.qw-toc a:hover {
	color: var(--qw-black);
}

.qw-toc a.is-active {
	border-left-color: var(--qw-ocean);
	font-weight: 600;
	color: var(--qw-black);
}

.qw-article__card {
	padding: 20px;
	border-radius: 18px;
	background: var(--qw-charcoal);
	color: var(--qw-white);
}

.qw-article__card-title {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

.qw-article__card p:not(.qw-article__card-title) {
	margin: 10px 0 16px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--qw-on-dark);
}

.qw-article__card .qw-btn {
	width: 100%;
	height: auto;
	min-height: 44px;
	padding-block: 10px;
	line-height: 1.25;
	justify-content: center;
	white-space: normal;
	text-align: center;
}

.qw-article__links p {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qw-caption);
}

.qw-article__links ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qw-article__links a {
	display: block;
	padding: 6px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--qw-ocean);
}

/* Reading column. */
.qw-prose {
	font-size: 18px;
	line-height: 1.75;
	color: var(--qw-body);
}

.qw-prose > * + * {
	margin-top: 22px;
}

.qw-prose p,
.qw-prose ul,
.qw-prose ol {
	margin-bottom: 0;
}

.qw-prose h2 {
	margin: 56px 0 0;
	font-family: var(--qw-font-heading);
	font-size: clamp(32px, 3vw, 42px);
	font-weight: 800;
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--qw-black);
}

.qw-prose h3 {
	margin: 36px 0 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--qw-black);
}

.qw-prose h2 + *,
.qw-prose h3 + * {
	margin-top: 14px;
}

.qw-prose a {
	color: var(--qw-ocean);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.qw-prose strong {
	color: var(--qw-black);
}

.qw-prose ul,
.qw-prose ol {
	padding-left: 24px;
}

.qw-prose li + li {
	margin-top: 8px;
}

.qw-takeaways {
	padding: 26px 28px;
	border-left: 6px solid var(--qw-ocean);
	border-radius: 18px;
	background: var(--qw-field);
}

.qw-takeaways__title,
.qw-callout__title,
.qw-aread__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--qw-black);
}

.qw-takeaways ul {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.6;
}

.qw-afig {
	position: relative;
	margin-left: 0;
	margin-right: 0;
}

.qw-afig img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
}

.qw-afig--needed img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.qw-afig figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--qw-caption);
}

.qw-atable {
	font-size: 15px;
}

.qw-atable th[scope="row"] {
	font-weight: 600;
	color: var(--qw-black);
}

.qw-atable__note {
	font-size: 14px;
	line-height: 1.5;
	color: var(--qw-caption);
}

.qw-prose > .qw-atable__note {
	margin-top: 10px;
}

.qw-callout {
	padding: 22px 24px;
	border-radius: 18px;
	border: 1px solid var(--qw-border);
	font-size: 16px;
	line-height: 1.65;
}

.qw-callout p,
.qw-callout ul {
	margin: 8px 0 0;
}

.qw-callout__label {
	margin: 0 !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--qw-ocean);
}

.qw-callout__title + p,
.qw-callout__label + .qw-callout__title {
	margin-top: 6px;
}

.qw-callout--example {
	border-color: transparent;
	background: rgba(0, 105, 148, 0.08);
}

.qw-callout--tip {
	border-left: 6px solid var(--qw-ocean);
}

.qw-callout--warning {
	border-left: 6px solid var(--qw-charcoal);
	background: var(--qw-field);
}

.qw-callout__link,
.qw-prose .qw-callout__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	text-decoration: none;
}

.qw-astats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}

.qw-astats > div {
	padding: 18px;
	border-radius: 16px;
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-astats strong {
	display: block;
	font-family: var(--qw-font-heading);
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: var(--qw-white);
}

.qw-astats span {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.4;
}

.qw-aquote {
	margin-left: 0;
	margin-right: 0;
	padding: 26px 28px;
	border-radius: 18px;
	background: var(--qw-charcoal);
	color: var(--qw-white);
}

.qw-aquote blockquote {
	margin: 0;
}

.qw-aquote blockquote p {
	margin: 0;
	font-size: 20px;
	line-height: 1.55;
}

.qw-aquote figcaption {
	display: flex;
	flex-direction: column;
	margin-top: 14px;
	font-size: 14px;
	color: var(--qw-on-dark);
}

.qw-aquote figcaption strong {
	color: var(--qw-white);
}

.qw-acta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 26px;
	border-radius: 18px;
	background: var(--qw-ocean);
	color: var(--qw-white);
}

.qw-acta__title {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

.qw-acta p:not(.qw-acta__title) {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.5;
}

.qw-prose .qw-acta .qw-btn,
.qw-prose .qw-atool .qw-btn {
	flex-shrink: 0;
	font-weight: 700;
	text-decoration: none;
	color: var(--qw-black);
}

.qw-aread {
	padding: 22px 24px;
	border: 1px solid var(--qw-border);
	border-radius: 18px;
}

.qw-aread ul {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.qw-aread li + li {
	margin-top: 4px;
}

.qw-prose .qw-aread a {
	display: block;
	padding: 8px 0;
	text-decoration: none;
}

.qw-aread a strong {
	color: var(--qw-ocean);
}

.qw-aread a span {
	display: block;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--qw-body);
}

.qw-avideo {
	border-radius: 18px;
}

.qw-asteps {
	padding: 0 !important;
	list-style: none;
	counter-reset: qwstep;
}

.qw-asteps li {
	position: relative;
	padding: 4px 0 0 56px;
	counter-increment: qwstep;
}

.qw-asteps li + li {
	margin-top: 18px;
}

.qw-asteps li::before {
	content: counter(qwstep);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--qw-ocean);
	color: var(--qw-white);
	font-weight: 700;
	font-size: 16px;
}

.qw-asteps strong {
	display: block;
	line-height: 1.4;
}

.qw-asteps span {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	line-height: 1.6;
}

.qw-atool {
	padding: 26px 28px;
	border: 2px dashed var(--qw-border-strong);
	border-radius: 18px;
	font-size: 16px;
	line-height: 1.6;
}

.qw-atool p {
	margin: 8px 0 0;
}

.qw-atool .qw-btn {
	margin-top: 16px;
}

.qw-afaq {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.qw-afaq__item {
	border: 1px solid var(--qw-border);
	border-radius: 14px;
}

.qw-afaq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--qw-black);
	cursor: pointer;
	list-style: none;
}

.qw-afaq__item summary::-webkit-details-marker {
	display: none;
}

.qw-afaq__item[open] {
	border-left: 6px solid var(--qw-ocean);
}

.qw-afaq__item[open] .qw-faq__sign::after {
	content: '−';
}

.qw-afaq__item p {
	margin: 0;
	padding: 0 20px 18px;
	font-size: 16px;
	line-height: 1.7;
}

.qw-prose h2.qw-asources__title {
	font-size: 24px;
}

.qw-asources {
	font-size: 14px;
	line-height: 1.6;
	color: var(--qw-caption);
}

.qw-asources a {
	font-weight: 400;
	word-break: break-word;
}

@media (max-width: 1180px) {
	.qw-ahero__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.qw-ahero__author { max-width: 520px; }
	.qw-article { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 1023px) {
	.qw-article { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.qw-article__sticky { position: static; max-height: none; overflow: visible; }
	.qw-article__card,
	.qw-article__links { display: none; }
	.qw-toc { padding: 14px 18px; border: 1px solid var(--qw-border); border-radius: 14px; }
	.qw-toc summary { pointer-events: auto; cursor: pointer; display: flex; justify-content: space-between; }
	.qw-toc summary::after { content: '+'; font-size: 18px; }
	.qw-toc[open] summary::after { content: '−'; }
}

@media (max-width: 760px) {
	.qw-ahero { padding-top: 120px; padding-bottom: 40px; }
	.qw-ahero__lead { font-size: 17px; }
	.qw-prose { font-size: 17px; }
	.qw-acta { flex-direction: column; align-items: stretch; }
	.qw-acta .qw-btn { justify-content: center; white-space: normal; text-align: center; }
	.qw-takeaways,
	.qw-callout,
	.qw-aquote,
	.qw-atool { padding: 20px; }
}

.qw-afig--narrow {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/* The section-wide list reset strips bullets; the reading column restores them. */
.qw-prose ul,
.qw-takeaways ul,
.qw-callout ul {
	padding-left: 22px;
	list-style: disc;
}

.qw-prose ol {
	padding-left: 24px;
	list-style: decimal;
}

.qw-prose li::marker {
	color: var(--qw-ocean);
}

.qw-prose .qw-asteps,
.qw-prose .qw-aread ul {
	padding-left: 0;
	list-style: none;
}

.qw-prose .qw-asources {
	padding-left: 20px;
}

@media (max-width: 760px) {
	.qw-astats { grid-template-columns: minmax(0, 1fr); }
}

/* Article estimator block. */
.qw-est {
	padding: 30px;
	border-radius: 20px;
	background: var(--qw-charcoal);
	color: var(--qw-white);
	font-size: 16px;
	line-height: 1.6;
}

.qw-est__title {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	color: var(--qw-white);
}

.qw-est__intro {
	margin: 10px 0 0;
	color: var(--qw-on-dark);
}

.qw-est__form {
	margin-top: 22px;
}

.qw-est__fields {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.qw-est label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--qw-on-dark);
}

.qw-est input,
.qw-est select {
	width: 100%;
	box-sizing: border-box;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--qw-border-strong);
	border-radius: 12px;
	background: var(--qw-white);
	color: var(--qw-black);
	font: 500 16px/1 var(--qw-font-body);
}

.qw-est input:focus-visible,
.qw-est select:focus-visible {
	outline: 3px solid var(--qw-ocean);
	outline-offset: 2px;
}

.qw-est .qw-btn {
	width: 100%;
	justify-content: center;
	margin-top: 16px;
	border: 0;
	cursor: pointer;
}

.qw-est__error {
	margin: 12px 0 0;
	font-weight: 600;
	color: var(--qw-white);
}

.qw-est__result {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 18px;
}

.qw-est__result > div {
	padding: 18px;
	border-radius: 14px;
	background: var(--qw-ocean);
}

.qw-est__result span {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--qw-on-dark);
}

.qw-est__result strong {
	display: block;
	margin-top: 6px;
	font-family: var(--qw-font-heading);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.05;
	color: var(--qw-white);
}

.qw-est__note {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--qw-on-dark-muted);
}

.qw-est__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.qw-est__cta p {
	margin: 0;
	font-weight: 600;
}

.qw-prose .qw-est .qw-btn--outline-light {
	flex-shrink: 0;
	color: var(--qw-white);
	text-decoration: none;
}

@media (max-width: 760px) {
	.qw-est { padding: 22px; }
	.qw-est__fields,
	.qw-est__result { grid-template-columns: minmax(0, 1fr); }
	.qw-est__cta { flex-direction: column; align-items: stretch; }
	.qw-est__cta .qw-btn { justify-content: center; white-space: normal; text-align: center; }
}

.qw-est__cta p {
	flex: 1 1 auto;
	min-width: 0;
}

/* Only the Calculate button spans the form; the consultation link sizes to its label. */
.qw-est .qw-est__cta .qw-btn {
	width: auto;
	margin-top: 0;
}

/* display: grid above would otherwise override the hidden attribute. */
.qw-est__result[hidden],
.qw-est__error[hidden] {
	display: none;
}

/* Estimator variants: field count sets the columns; results wrap to fit. */
.qw-est__fields--1 { grid-template-columns: minmax(0, 1fr); }
.qw-est__fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qw-est__result { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.qw-est__result > .is-total { background: var(--qw-black); }

@media (max-width: 760px) {
	.qw-est__fields--2,
	.qw-est__result { grid-template-columns: minmax(0, 1fr); }
}

.qw-est-section .qw-est {
	max-width: 860px;
	margin: 0 auto;
}

.qw-est-section .qw-est .qw-btn--outline-light {
	color: var(--qw-white);
}

/* ---------- Project globe (Projects hub) ---------- */

.qw-globe-section {
	/* Categorical slots 1-3, validated on the dark globe surface. */
	--qw-globe-marine: #3987e5;
	--qw-globe-pipes: #d95926;
	--qw-globe-buildings: #199e70;
}

.qw-globe {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
	gap: 40px;
	align-items: center;
}

.qw-globe__stage {
	position: relative;
	width: 100%;
	max-width: 640px;
	aspect-ratio: 1;
	margin: 0 auto;
}

.qw-globe__canvas {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

.qw-globe__canvas:focus-visible {
	outline: 3px solid var(--qw-white);
	outline-offset: 6px;
}

.qw-globe__status {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #1d303b, #0f191f 70%);
	color: var(--qw-on-dark-muted);
	font-size: 14px;
	text-align: center;
	padding: 0 18%;
}

.qw-globe__status[hidden] {
	display: none;
}

.qw-globe__tip {
	position: absolute;
	transform: translate(-50%, calc(-100% - 14px));
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: 220px;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--qw-white);
	color: var(--qw-black);
	font-size: 12px;
	line-height: 1.35;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	z-index: 2;
}

.qw-globe__tip[hidden] {
	display: none;
}

.qw-globe__tip strong {
	font-size: 13px;
}

.qw-globe__tip span {
	color: var(--qw-caption);
}

.qw-globe__zoom {
	position: absolute;
	right: 0;
	bottom: 4%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.qw-globe__zoom button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: rgba(20, 28, 33, 0.85);
	color: var(--qw-white);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.qw-globe__zoom button:hover {
	border-color: var(--qw-white);
}

.qw-globe__panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.qw-globe__filters {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.qw-globe__label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--qw-on-dark-muted);
}

.qw-globe__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.qw-globe__chips button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	background: transparent;
	color: var(--qw-white);
	font-family: var(--qw-font-body);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.qw-globe__chips button:hover {
	border-color: var(--qw-white);
}

.qw-globe__chips button[aria-pressed='true'] {
	background: var(--qw-white);
	border-color: var(--qw-white);
	color: var(--qw-black);
}

.qw-globe__dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #0d1418;
	flex-shrink: 0;
}

.qw-globe__dot--marine { background: var(--qw-globe-marine); }
.qw-globe__dot--pipes { background: var(--qw-globe-pipes); }
.qw-globe__dot--buildings { background: var(--qw-globe-buildings); }

.qw-globe__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
}

.qw-globe__select {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 200px;
}

.qw-globe__select select {
	height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 12px;
	background: rgba(20, 28, 33, 0.85);
	color: var(--qw-white);
	font-family: var(--qw-font-body);
	font-size: 14px;
}

.qw-globe__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	font-size: 14px;
	color: var(--qw-on-dark);
	cursor: pointer;
}

.qw-globe__check input {
	width: 18px;
	height: 18px;
	accent-color: var(--qw-ocean);
}


.qw-globe__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 20px;
	background: rgba(13, 20, 24, 0.72);
}

.qw-globe__card[hidden] {
	display: none;
}

.qw-globe__card-note {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--qw-on-dark-muted);
}

.qw-globe__card-cat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qw-on-dark);
}

.qw-globe__card-title {
	margin: 0;
	font-family: var(--qw-font-heading);
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	color: var(--qw-white);
}

.qw-globe__card-facts {
	display: grid;
	gap: 6px;
	margin: 0;
	width: 100%;
}

.qw-globe__card-facts div {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 12px;
	font-size: 14px;
	line-height: 1.5;
}

.qw-globe__card-facts dt {
	color: var(--qw-on-dark-muted);
	font-weight: 600;
}

.qw-globe__card-facts dd {
	margin: 0;
	color: var(--qw-white);
}

.qw-globe__card-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--qw-on-dark);
}

.qw-globe__card .qw-btn {
	margin-top: 4px;
}










@media (max-width: 1023px) {
	.qw-globe { grid-template-columns: 1fr; gap: 28px; }
	.qw-globe__card { order: -1; }
	.qw-globe__stage { max-width: 560px; }

}

@media (max-width: 640px) {
	.qw-globe__zoom { bottom: 0; }
	.qw-globe__zoom button { width: 40px; height: 40px; }
	.qw-globe__card { padding: 20px; }
	.qw-globe__card-title { font-size: 26px; }

}

/* ---------- Scene hotspots (Applications hub) ---------- */

.qw-scene {
	position: relative;
}

.qw-scene__stage {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 24px;
	background: #6fd3d8;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
}

.qw-scene__still,
.qw-scene__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.qw-scene__video {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.qw-scene.is-playing .qw-scene__video {
	opacity: 1;
}

.qw-scene__markers {
	position: absolute;
	inset: 0;
}

.qw-scene__marker {
	position: absolute;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	transform: translate(-50%, -50%);
	cursor: pointer;
}

.qw-scene__marker img {
	position: relative;
	z-index: 1;
	display: block;
	width: 40px;
	height: 40px;
	margin: 2px;
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s ease;
}

/* Soft pulse so visitors see the markers are clickable. */
.qw-scene__marker::before {
	content: '';
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	animation: qw-scene-pulse 2.4s ease-out infinite;
}

@keyframes qw-scene-pulse {
	0% { transform: scale(1); opacity: 0.8; }
	100% { transform: scale(1.8); opacity: 0; }
}

.qw-scene__marker:hover img,
.qw-scene__marker:focus-visible img,
.qw-scene__marker.is-active img {
	transform: scale(1.15);
}

.qw-scene__marker.is-active img {
	box-shadow: 0 0 0 3px var(--qw-white), 0 3px 12px rgba(0, 0, 0, 0.45);
}

.qw-scene__marker:focus-visible {
	outline: 3px solid var(--qw-charcoal);
	outline-offset: 2px;
}

.qw-scene__label {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	z-index: 2;
	transform: translateX(-50%);
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--qw-charcoal);
	color: var(--qw-white);
	font-family: var(--qw-font-body);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.qw-scene__marker--left .qw-scene__label {
	left: 0;
	transform: none;
}

.qw-scene__marker--right .qw-scene__label {
	left: auto;
	right: 0;
	transform: none;
}

.qw-scene__marker:hover .qw-scene__label,
.qw-scene__marker:focus-visible .qw-scene__label {
	opacity: 1;
}

.qw-scene__info {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: min(400px, calc(100% - 48px));
	padding: 22px 24px;
	border-radius: 18px;
	background: rgba(51, 51, 51, 0.96);
	color: var(--qw-white);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.qw-scene__info--right {
	left: auto;
	right: 24px;
}

.qw-scene__info--top {
	bottom: auto;
	top: 24px;
}

.qw-scene__info[hidden] {
	display: none;
}

.qw-scene__close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	color: var(--qw-white);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.qw-scene__title {
	margin: 0;
	padding-right: 32px;
	font-family: var(--qw-font-heading);
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

.qw-scene__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--qw-white);
}

/* The scene sits in a white band, so pin the dark card's text to white. */
.qw-scene__info .qw-scene__title,
.qw-scene__info .qw-scene__text {
	color: var(--qw-white);
}

.qw-scene__info .qw-btn[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.qw-scene__marker::before { animation: none; opacity: 0; }
}

@media (max-width: 1023px) {
	.qw-scene__marker { width: 36px; height: 36px; }
	.qw-scene__marker img { width: 32px; height: 32px; }
}

@media (max-width: 760px) {
	.qw-scene__stage { border-radius: 16px; }
	/* Small markers, but a 44px tap area. */
	.qw-scene__marker { width: 44px; height: 44px; }
	.qw-scene__marker img { width: 24px; height: 24px; margin: 10px; }
	.qw-scene__marker::before { inset: 10px; }
	.qw-scene__label { display: none; }
	/* On phones the card sits under the scene instead of covering it. */
	.qw-scene__info,
	.qw-scene__info--right,
	.qw-scene__info--top { position: relative; inset: auto; width: auto; margin-top: 12px; padding: 18px 20px; }
	.qw-scene__title { font-size: 24px; }
}