/* ==========================================================================
   QuantumOrbit Consulting — Components
   Header, heroes, sections, cards, grids, CTA band, footer, forms, posts.
   (Breakpoint overrides live in responsive.css)
   ========================================================================== */

/* ==========================================================================
   Decorative network pattern (constellation lines from the mockup)
   ========================================================================== */
.decor-network {
	position: relative;
	isolation: isolate;
	overflow-x: clip; /* contains the decoration without breaking position: sticky */
}

.decor-network::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: min(760px, 70vw);
	aspect-ratio: 9 / 7;
	background: url("../images/network-pattern.svg") center / contain no-repeat;
	pointer-events: none;
	opacity: 0.9;
}

.decor-network--tl::before {
	top: -40px;
	left: -180px;
	width: min(560px, 60vw);
}

.decor-network--left::before {
	top: 30%;
	left: -260px;
}

.decor-network--right::before {
	top: 10%;
	right: -260px;
}

.decor-network--top::before {
	top: -120px;
	left: 10%;
	width: min(420px, 50vw);
	opacity: 0.6;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: relative;
	z-index: 100;
	background: var(--qo-primary);
	transition: box-shadow 0.3s ease;
}

.qo-sticky-header .site-header {
	position: sticky;
	top: 0;
}

.admin-bar.qo-sticky-header .site-header {
	top: 32px;
}

.site-header.is-scrolled {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--qo-header-h);
}

.site-logo {
	display: inline-flex;
	flex-shrink: 0;
}

.site-logo--header img,
.site-logo--header .custom-logo {
	width: auto;
	height: 74px;
}

.site-logo .custom-logo-link {
	display: inline-flex;
}

.site-header__menu {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.2vw, 32px);
}

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

.primary-nav__list li {
	position: relative;
}

.primary-nav__list a {
	display: block;
	padding: 8px 12px;
	border-radius: 999px;
	color: var(--qo-text);
	font-size: 16px;
	line-height: 1.4;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.primary-nav__list a:hover,
.primary-nav__list a:focus-visible,
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current_page_item > a,
.primary-nav__list .current-menu-ancestor > a,
.primary-nav__list .current_page_ancestor > a {
	background: var(--qo-secondary);
	color: var(--qo-text);
}

/* Dropdowns (optional second level) */
.primary-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--qo-secondary);
	border: 1px solid var(--qo-border);
	border-radius: 12px;
	box-shadow: var(--qo-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.primary-nav__list .sub-menu a {
	border-radius: 8px;
	white-space: normal;
}

.primary-nav__list .sub-menu a:hover {
	background: var(--qo-primary);
}

.primary-nav__list li:hover > .sub-menu,
.primary-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.site-header__cta {
	padding-inline: 1.15em;
	white-space: nowrap;
}

/* Hamburger */
.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--qo-border);
	border-radius: 12px;
	cursor: pointer;
}

.nav-toggle__bars {
	position: relative;
	display: block;
	width: 22px;
	height: 16px;
}

.nav-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--qo-text);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 7px; }
.nav-toggle__bars span:nth-child(3) { top: 14px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
	top: 7px;
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
	top: 7px;
	transform: rotate(-45deg);
}

/* ==========================================================================
   Heroes
   ========================================================================== */
.hero {
	position: relative;
}

.hero__title {
	font-family: var(--qo-font-heading);
	font-size: var(--qo-fs-hero);
	font-weight: 700;
	line-height: 1.16;
	margin: 0 0 0.45em;
	text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.hero__title:has(strong) {
	font-weight: 400;
}

.hero__title strong {
	font-weight: 700;
}

.hero__text {
	font-size: var(--qo-fs-lead);
	line-height: 1.45;
}

.hero__text p + p {
	margin-top: 0.9em;
}

.hero__actions {
	margin-top: clamp(24px, 3vw, 36px);
}

/* Home hero: text + framed image on Dusty charcoal, curved edges */
.hero--home {
	background: var(--qo-secondary);
	padding: clamp(56px, 7vw, 96px) 0 clamp(110px, 12vw, 170px);
	overflow: hidden;
}

.hero--home::after {
	content: "";
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: -1px;
	height: clamp(48px, 7vw, 96px);
	background: var(--qo-primary);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	z-index: 0;
}

.hero--home__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: start;
	gap: clamp(32px, 4vw, 64px);
}

.hero--home .hero__title {
	font-size: clamp(36px, 20.8px + 2.9vw, 60px);
}

.hero--home .hero__media {
	position: relative;
	overflow: hidden;
}

.hero--home .hero__media img {
	width: 100%;
	aspect-ratio: 430 / 485;
	object-fit: cover;
}

/* Concave top and bottom edges on the framed image */
.hero--home .hero__media::before,
.hero--home .hero__media::after {
	content: "";
	position: absolute;
	left: -15%;
	right: -15%;
	height: 44px;
	background: var(--qo-secondary);
	border-radius: 50%;
	z-index: 1;
}

.hero--home .hero__media::before {
	top: -26px;
}

.hero--home .hero__media::after {
	bottom: -26px;
}

/* Inner-page banner: full-bleed image with dark overlay, centred copy */
.hero--banner {
	display: flex;
	align-items: center;
	min-height: clamp(460px, 42vw, 620px);
	padding-block: clamp(64px, 8vw, 110px);
	background-color: var(--qo-secondary);
	background-image: var(--qo-bg, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
}

.hero--banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 33, 32, 0.62), rgba(28, 33, 32, 0.72));
}

.hero--banner .hero__content {
	position: relative;
	z-index: 1;
	max-width: calc(1120px + 2 * var(--qo-gutter));
}

.hero--banner .hero__title {
	font-size: clamp(30px, 19.2px + 2.5vw, 56px);
}

.hero--banner .hero__text {
	max-width: 900px;
	margin-inline: auto;
}

.hero--banner .hero__actions {
	justify-content: center;
}

/* Simple banner: short image strip with left-aligned underlined title */
.hero--simple {
	display: flex;
	align-items: center;
	min-height: clamp(180px, 16vw, 240px);
	padding-block: 40px;
	background-color: var(--qo-secondary);
	background-image: var(--qo-bg, none);
	background-position: center 30%;
	background-size: cover;
	background-repeat: no-repeat;
}

.hero--simple::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(28, 33, 32, 0.55);
}

.hero--simple .container {
	position: relative;
	z-index: 1;
}

.hero--solid {
	background: #333333;
}

.hero--solid::before {
	content: none;
}

.hero__title--underline {
	display: inline-block;
	margin: 0;
	padding-bottom: 6px;
	font-weight: 400;
	font-size: clamp(36px, 25.6px + 2vw, 52px);
}

.hero__title--underline::after {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	margin-top: 6px;
	background: var(--qo-underline);
	border-radius: 2px;
}

.hero__subtitle {
	margin-top: 16px;
	color: var(--qo-text-muted);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(22px, 2.6vw, 32px);
	background: var(--qo-primary);
	border: 1px solid var(--qo-border);
	border-radius: var(--qo-radius);
	transition: background-color 0.3s var(--qo-ease), box-shadow 0.3s var(--qo-ease), transform 0.3s var(--qo-ease);
}

.card:hover {
	background: var(--qo-secondary);
	box-shadow: var(--qo-shadow);
}

.card__title {
	font-size: var(--qo-fs-card-title);
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 18px;
}

.card__intro,
.card__text {
	font-size: var(--qo-fs-small);
	line-height: 1.45;
}

.card__intro {
	margin-bottom: 24px;
}

.card__list {
	margin: 0;
	padding-left: 1.35em;
	font-size: var(--qo-fs-small);
	line-height: 1.4;
}

.card__list li + li {
	margin-top: 14px;
}

.card__list--plain li + li {
	margin-top: 6px;
}

.card__list--spaced li + li {
	margin-top: 18px;
}

.card__block {
	font-size: var(--qo-fs-small);
	line-height: 1.45;
}

.card__block + .card__block {
	margin-top: 32px;
}

.card__block--end {
	margin-top: auto;
	padding-top: 32px;
}

.card__label {
	margin-bottom: 6px;
}

.card--context-alt .card__label {
	font-weight: 600;
}

.card__label--accent {
	color: var(--qo-accent);
	font-weight: 600;
}

.card__footer {
	margin-top: 22px;
	font-size: var(--qo-fs-small);
	line-height: 1.45;
}

/* Icon card: icon top, title + text pinned to the bottom */
.card--icon {
	min-height: 300px;
}

.card--icon .card__icon {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.card__bottom {
	padding-top: clamp(40px, 5vw, 64px);
}

.card--icon .card__title {
	font-size: 18px;
	margin-bottom: 20px;
}

/* Reveal card: background image fades in on hover/focus */
.card--reveal {
	min-height: 330px;
	overflow: hidden;
	isolation: isolate;
}

.card--reveal::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(180deg, rgba(28, 33, 32, 0.55), rgba(28, 33, 32, 0.8)), var(--qo-bg, none);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.45s var(--qo-ease), transform 0.6s var(--qo-ease);
}

.card--reveal:hover::before,
.card--reveal:focus-within::before {
	opacity: 1;
	transform: none;
}

.card--reveal .card__title {
	min-height: 2.6em; /* two lines, so every description starts at the same height */
	font-size: 18px;
	margin: 30px 0 44px;
}

.card-num {
	display: block;
	margin-bottom: clamp(28px, 4vw, 52px);
	font-family: var(--qo-font-body);
	font-size: clamp(36px, 30.4px + 1vw, 44px);
	font-weight: 300;
	line-height: 1;
}

/* ==========================================================================
   Questions grid (Home)
   ========================================================================== */
.q-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 820px;
	margin-inline: auto;
}

.q-grid__item {
	padding: 22px 14px 26px;
	border-bottom: 1px solid #b5a48e;
}

.q-grid__item:nth-child(odd) {
	border-right: 1px solid #b5a48e;
}

.q-grid__item:nth-child(2n+1):nth-last-child(-n+2),
.q-grid__item:nth-child(2n+1):nth-last-child(-n+2) ~ .q-grid__item {
	border-bottom: 0;
}

.q-grid__label {
	margin-bottom: 22px;
	font-size: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.q-grid__question {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
}

/* ==========================================================================
   Tile grids (Home advisory grid, How We Work "ways to begin")
   ========================================================================== */
.tile-grid {
	display: grid;
}

.tile-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tile-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tile {
	min-width: 0;
	padding: 20px 22px 26px;
	background: var(--qo-primary);
	transition: background-color 0.3s var(--qo-ease);
}

.tile:hover {
	background: var(--qo-secondary);
}

.tile__icon {
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	object-fit: contain;
}

.tile__title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

.tile__text {
	font-size: var(--qo-fs-small);
	line-height: 1.45;
}

/* Boxed: outer rounded border + 1px inner lines */
.tile-grid--boxed {
	gap: 1px;
	background: var(--qo-border);
	border: 1px solid var(--qo-border);
	border-radius: var(--qo-radius);
	overflow: hidden;
}

.tile-grid--boxed .tile:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* Home advisory grid: transparent tiles so the background visual shows through */
.section--advisory .tile-grid--boxed {
	gap: 0;
	background: transparent;
}

.section--advisory .tile-grid--boxed .tile {
	margin: 0 -1px -1px 0; /* inner lines; outer edges are clipped by the box */
	background: transparent;
	border-right: 1px solid var(--qo-border);
	border-bottom: 1px solid var(--qo-border);
}

.section--advisory .tile-grid--boxed .tile:hover,
.section--approach .card--icon:hover {
	background: rgba(51, 51, 51, 0.85);
}

.section--approach .card--icon {
	background: transparent;
}

/* Lines only (no outer border) */
.tile-grid--lines .tile {
	padding: 48px 22px 56px;
	border-right: 1px solid #b5a48e;
	border-bottom: 1px solid #b5a48e;
}

.tile-grid--lines.tile-grid--3 .tile:nth-child(3n) {
	border-right: 0;
}

.tile-grid--lines.tile-grid--3 .tile:nth-child(3n+1):nth-last-child(-n+3),
.tile-grid--lines.tile-grid--3 .tile:nth-child(3n+1):nth-last-child(-n+3) ~ .tile {
	border-bottom: 0;
}

.tile-grid--lines .tile__title {
	margin-bottom: 36px;
}

/* ==========================================================================
   Founder block
   ========================================================================== */
.founder {
	padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 72px);
}

.founder__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	align-items: start;
	gap: 0 12px;
}

.founder__panel {
	margin-top: 70px;
	padding: clamp(32px, 4vw, 48px) clamp(32px, 6vw, 96px) clamp(48px, 6vw, 72px) max(var(--qo-gutter), calc((100vw - var(--qo-container)) / 2 + var(--qo-gutter)));
	background: var(--qo-secondary);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), calc(100% - 110px) 100%, 0 100%);
}

.founder__content {
	max-width: 620px;
}

.founder__title {
	margin: 0 0 18px;
	font-family: var(--qo-font-heading);
	font-size: clamp(32px, 24px + 1.6vw, 46px);
	font-weight: 400;
	line-height: 1.1;
}

.founder__role {
	margin: -6px 0 14px;
	font-size: 19px;
}

.founder__social {
	display: inline-flex;
	margin-bottom: 22px;
	border-radius: 4px;
}

.founder__social img {
	width: 24px;
	height: 24px;
}

.founder__text {
	font-size: var(--qo-fs-small);
	line-height: 1.4;
}

.founder__text p + p {
	margin-top: 1.1em;
}

.founder__highlight {
	margin-top: 22px;
	color: var(--qo-accent);
	font-size: var(--qo-fs-small);
	line-height: 1.5;
}

.founder .btn {
	margin-top: 28px;
}

.founder__photo {
	position: relative;
	clip-path: polygon(70px 0, 100% 0, 100% 100%, 0 100%, 0 70px);
}

.founder__photo img {
	width: 100%;
	aspect-ratio: 400 / 405;
	object-fit: cover;
	object-position: center 20%;
}

.founder__caption {
	padding: 16px 12px 0;
	text-align: center;
}

.founder__caption-name {
	display: block;
	font-family: var(--qo-font-heading);
	font-size: 24px;
	line-height: 1.2;
}

.founder__caption-role {
	display: block;
	margin-top: 4px;
	font-size: var(--qo-fs-small);
}

/* Home page variant: panel + photo kept inside the page container (same edges as
   the header and other sections). Photo top sits above the panel; the panel ends
   just below the photo. Cut corners as in the mockup: photo top-left, panel bottom-right.
   Desktop only. */
@media (min-width: 861px) {
	.founder--home .founder__grid {
		grid-template-columns: minmax(0, 1.48fr) minmax(0, 1fr);
		gap: 0 8px;
		max-width: calc(var(--qo-container) + 2 * var(--qo-gutter));
		margin-inline: auto;
		padding-inline: var(--qo-gutter);
		container-type: inline-size;
	}

	.founder--home .founder__panel {
		margin-top: 70px;
		padding: 36px 36px 44px;
		/* End 24px below the photo: photo width = (grid - gap) / 2.48, height = width × 368/351; panel starts 48px lower. */
		min-height: calc((100cqw - 8px) / 2.48 * 368 / 351 - 24px);
	}

	.founder--home .founder__content {
		max-width: none;
	}

	.founder--home .founder__photo img {
		aspect-ratio: 351 / 368;
	}
}

/* Home: photo stretches to the panel height so both bottom edges line up
   (the photo still starts 48px higher, as in the mockup). The cut corner moves to
   the image so the caption below it is not clipped. */
@media (min-width: 861px) {
	.founder--home .founder__grid {
		align-items: stretch;
	}

	.founder--home .founder__panel {
		min-height: 0;
	}

	.founder--home .founder__photo {
		position: relative;
		clip-path: none;
	}

	.founder--home .founder__photo img {
		height: 83%;
		aspect-ratio: auto;
		clip-path: polygon(70px 0, 100% 0, 100% 100%, 0 100%, 0 70px);
	}

	.founder--home .founder__caption {
		position: absolute;
		top: 80%;
		left: 0;
		right: 0;
	}

	.founder--home {
		padding-bottom: clamp(96px, 9vw, 128px);
	}
}

/* Banner heading weight: regular on Home, Where We Help and How We Work. */
.hero--home .hero__title,
.page-template-template-where-we-help .hero--banner .hero__title,
.page-template-template-how-we-work .hero--banner .hero__title {
	font-weight: 400;
}

/* About + Contact banners: solid #1c2120 (the blog keeps the Sand banner). */
.page-template-template-about .hero--solid,
.page-template-template-contact .hero--solid {
	background: #333333;
}

/* About: Jiten's LinkedIn icon uses the footer social-icon style. */
.founder .founder__socials {
	margin: 0 0 22px;
}

/* ==========================================================================
   Stacked cards (sticky stacking — see responsive.css and main.js)
   ========================================================================== */
.stack__item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	background: #ebedee;
	opacity: calc(var(--qo-cover, 0) * 0.35);
	pointer-events: none;
}

.stack {
	display: grid;
	gap: clamp(28px, 5vw, 64px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Split card (Where We Help: text + image) */
.split-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 500px;
	overflow: hidden;
	background: var(--qo-secondary);
	border: 1px solid var(--qo-border);
	border-radius: var(--qo-radius);
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
}

.split-card__body {
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 36px);
}

.split-card__title {
	margin: 0 0 18px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
}

.split-card__text {
	font-size: var(--qo-fs-small);
	line-height: 1.45;
}

.split-card__help {
	margin-top: 28px;
	color: var(--qo-accent);
	font-size: var(--qo-fs-small);
	line-height: 1.45;
}

.split-card__media {
	position: relative;
}

.split-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(28, 33, 32, 0.5);
	pointer-events: none;
}

.split-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Advisory + phase cards share one border colour (#505453 = the previous
   25% Cloud White border, made opaque so it reads the same on every image). */
.section--areas,
.section--process {
	--qo-card-border: #505453;
}

/* Equal-height cards so stacked edges line up even when the text length differs. */
.section--areas .stack,
.stack--phases {
	grid-auto-rows: 1fr;
}

/* Advisory area card: full background image */
.area-card {
	position: relative;
	isolation: isolate;
	min-height: 480px;
	overflow: hidden;
	background-color: var(--qo-secondary);
	background-image: var(--qo-bg, none);
	background-position: center;
	background-size: cover;
	border-radius: var(--qo-radius);
	/* Border drawn as an inset outline so it sits on top of the image and the
	   stacking tint: same thickness and colour on every card, whatever the photo. */
	outline: 1px solid var(--qo-card-border);
	outline-offset: -1px;
	box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.35);
}

.area-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(18, 22, 24, 0.86) 0%, rgba(18, 22, 24, 0.66) 55%, rgba(18, 22, 24, 0.25) 100%),
		rgba(28, 33, 32, 0.5);
}

.area-card__content {
	max-width: 640px;
	padding: clamp(28px, 4vw, 48px);
}

.area-card__title {
	margin: 0 0 20px;
	font-family: var(--qo-font-body);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.area-card__question {
	margin-bottom: 8px;
	font-weight: 600;
	line-height: 1.45;
}

.area-card__text {
	font-size: var(--qo-fs-small);
	line-height: 1.45;
}

.area-card__outcomes {
	margin: 0;
	font-size: var(--qo-fs-small);
	line-height: 1.45;
}

.area-card__outcomes::before {
	content: "";
	display: block;
	width: min(330px, 60%);
	height: 1px;
	margin: 26px 0 30px;
	background: var(--qo-line);
}

/* Phase cards (How We Work, image layout) */
.stack--phases {
	margin-inline: auto;
}

.phase-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 48px;
	min-height: 376px;
	padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3.5vw, 36px);
	overflow: hidden;
	background-color: var(--qo-secondary);
	background-image: var(--qo-bg, none);
	background-position: center;
	background-size: cover;
	border-radius: var(--qo-radius);
	/* Border drawn as an inset outline so it sits on top of the image and the
	   stacking tint: same thickness and colour on every card, whatever the photo. */
	outline: 1px solid var(--qo-card-border);
	outline-offset: -1px;
	box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.35);
}

.phase-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(18, 22, 24, 0.55) 0%, rgba(18, 22, 24, 0.25) 70%, rgba(18, 22, 24, 0.1) 100%),
		rgba(28, 33, 32, 0.5);
}

.phase-card__label {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.phase-card__body {
	max-width: 540px;
}

.phase-card__title {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 600;
}

.phase-card__text {
	font-size: var(--qo-fs-small);
	line-height: 1.45;
}

/* Timeline (How We Work, circles layout) */
.timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.timeline::before {
	content: "";
	position: absolute;
	top: 59px;
	left: 10%;
	right: 10%;
	height: 2px;
	background: var(--qo-accent);
}

.timeline__step {
	position: relative;
}

.timeline__num {
	display: grid;
	place-items: center;
	width: 118px;
	height: 118px;
	margin: 0 auto 28px;
	background: var(--qo-accent);
	border-radius: 50%;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
	color: #fff;
	font-size: 40px;
	font-weight: 400;
}

.timeline__title {
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 18px;
}

.timeline__text {
	font-size: var(--qo-fs-small);
	line-height: 1.45;
}

/* ==========================================================================
   Journey table (Where We Help)
   ========================================================================== */
.journey {
	max-width: 740px;
	margin-inline: auto;
	padding: clamp(28px, 4vw, 44px) clamp(20px, 3.5vw, 34px);
	border: 1px solid var(--qo-border);
	border-radius: var(--qo-radius);
	background: rgba(28, 33, 32, 0.6);
}

.journey__table {
	width: 100%;
	border-collapse: collapse;
}

.journey__table th {
	padding: 0 8px 30px;
	color: rgba(235, 237, 238, 0.6);
	font-size: 20px;
	font-weight: 600;
	text-align: left;
}

.journey__table td {
	padding: 22px 8px;
	font-size: var(--qo-fs-small);
	line-height: 1.45;
	vertical-align: middle;
}

.journey__table tbody tr {
	border-bottom: 1px solid var(--qo-link);
}

.journey__table tbody tr:last-child {
	border-bottom: 0;
}

.journey__table tbody tr:last-child td {
	padding-bottom: 0; /* bottom spacing matches the top */
}

.journey__table th.journey__to-label {
	color: var(--qo-text);
	font-weight: 700;
}

.journey__from {
	width: 46%;
	color: rgba(235, 237, 238, 0.7);
}

.journey__arrow {
	width: 8%;
	font-size: 18px;
	text-align: center;
}

.journey__to {
	width: 46%;
}

/* ==========================================================================
   Strong fit (Where We Help)
   ========================================================================== */
.fit {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
	align-items: center;
	gap: clamp(24px, 3vw, 40px);
}

.fit__title {
	text-align: left;
	font-size: clamp(36px, 25.6px + 2vw, 52px);
	line-height: 1.25;
}

.fit__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	overflow: hidden; /* clips the outer right/bottom edges: no surrounding box */
	list-style: none;
}

.fit__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin: 0 -1px -1px 0; /* pushes the outer right/bottom edges outside the clipped grid */
	padding: 24px 18px 26px;
	border-right: 1px solid var(--qo-border);
	border-bottom: 1px solid var(--qo-border);
	text-align: center;
	font-size: var(--qo-fs-small);
	line-height: 1.45;
}

.fit__icon {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

/* ==========================================================================
   Split intro (About / Contact)
   ========================================================================== */
.split-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 0;
}

.split-intro__title {
	padding-right: clamp(24px, 4vw, 56px);
	text-align: left;
	text-shadow: none;
}

.split-intro__text {
	padding: clamp(40px, 5vw, 64px) 0 clamp(40px, 5vw, 64px) clamp(24px, 3vw, 34px);
	border-left: 1px solid var(--qo-border);
	font-size: var(--qo-fs-lead);
	line-height: 1.45;
}

.section--why .section-intro p + p {
	margin-top: 1.4em;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
	align-items: start;
	gap: clamp(20px, 3vw, 32px);
}

.contact-card {
	padding: clamp(28px, 3.5vw, 40px);
	background: var(--qo-secondary);
	border-radius: var(--qo-radius);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), calc(100% - 64px) 100%, 0 100%);
}

.contact-card__title {
	margin: 0 0 8px;
	font-family: var(--qo-font-heading);
	font-size: clamp(26px, 20.8px + 1vw, 32px);
	font-weight: 400;
	line-height: 1.2;
}

.contact-card__role {
	margin-bottom: 28px;
	color: var(--qo-accent);
}

.contact-card__list {
	margin: 0;
}

.contact-card__list > div + div {
	margin-top: 20px;
}

.contact-card__list dt {
	margin-bottom: 4px;
	color: var(--qo-text-muted);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.contact-card__list dd {
	margin: 0;
	font-size: var(--qo-fs-small);
	overflow-wrap: anywhere;
}

.contact-card__social {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
	color: var(--qo-text);
}

.form-card {
	padding: clamp(24px, 3.5vw, 40px);
	background: var(--qo-primary);
	border: 1px solid var(--qo-border);
	border-radius: var(--qo-radius);
}

.form-card__title {
	margin: 0 0 10px;
	font-family: var(--qo-font-heading);
	font-size: clamp(28px, 22.4px + 1vw, 36px);
	font-weight: 400;
	line-height: 1.2;
}

.form-card__text {
	margin-bottom: 28px;
	color: var(--qo-text-muted);
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

.form-field {
	margin: 0;
}

.form-field label {
	display: block;
}

.form-field--full {
	grid-column: 1 / -1;
}

.req {
	color: var(--qo-accent);
}

.optional {
	color: var(--qo-text-muted);
	font-size: 14px;
}

.enquiry-form {
	position: relative;
}

.enquiry-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
	margin-top: 24px;
}

.enquiry-form__notes {
	color: var(--qo-text-muted);
	font-size: 14px;
}

.enquiry-form__notes p {
	margin: 0;
}

.form-notice {
	margin-bottom: 22px;
	padding: 12px 16px;
	border-radius: var(--qo-radius-sm);
	border: 1px solid;
}

.form-notice--success {
	background: rgba(108, 181, 255, 0.1);
	border-color: var(--qo-link);
}

.form-notice--error {
	background: rgba(255, 110, 110, 0.1);
	border-color: #ff8a8a;
}

/* Contact Form 7 — keeps the original enquiry-form design */
.enquiry-form--cf7 .wpcf7-form {
	position: relative;
	margin: 0;
}

.enquiry-form--cf7 .hidden-fields-container {
	display: none;
}

.enquiry-form--cf7 .wpcf7-form-control-wrap {
	position: relative;
	display: block;
}

.enquiry-form--cf7 .enquiry-form__footer {
	position: relative;
}

.enquiry-form--cf7 .wpcf7-submit {
	min-height: 44px;
}

.enquiry-form--cf7 .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

.enquiry-form--cf7 .wpcf7 .wpcf7-spinner {
	position: absolute;
	right: 0;
	bottom: -34px;
	margin: 0;
}

.enquiry-form--cf7 .wpcf7-not-valid {
	border-color: #ff8a8a;
}

.enquiry-form--cf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #ff8a8a;
	font-size: 14px;
}

.enquiry-form--cf7 .wpcf7 form .wpcf7-response-output {
	margin: 22px 0 0;
	padding: 12px 16px;
	border: 1px solid #ff8a8a;
	border-radius: var(--qo-radius-sm);
	background: rgba(255, 110, 110, 0.1);
	color: var(--qo-text);
	font-size: var(--qo-fs-small);
}

.enquiry-form--cf7 .wpcf7 form.init .wpcf7-response-output,
.enquiry-form--cf7 .wpcf7 form.resetting .wpcf7-response-output,
.enquiry-form--cf7 .wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

.enquiry-form--cf7 .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--qo-link);
	background: rgba(108, 181, 255, 0.1);
}

.enquiry-form--cf7 .wpcf7 form.invalid .wpcf7-response-output,
.enquiry-form--cf7 .wpcf7 form.unaccepted .wpcf7-response-output,
.enquiry-form--cf7 .wpcf7 form.payment-required .wpcf7-response-output {
	border-color: var(--qo-accent);
	background: rgba(181, 164, 142, 0.1);
}

.enquiry-form__fallback a {
	color: var(--qo-link);
}

/* ==========================================================================
   CTA band (curved top, wave lines)
   ========================================================================== */
   .cta-band__inner {
	padding: 30px 0px;
}
.cta-band {
	position: relative;
	isolation: isolate;
	margin-top: 0;
	padding: clamp(100px, 9vw, 140px) 0 clamp(48px, 5vw, 72px);
	overflow: hidden;
	clip-path: inset(0); /* clips the fixed wave layer to this section (parallax) */
	background: var(--qo-secondary);
	text-align: center;
}



.cta-band::after {
	content: "";
	position: fixed; /* parallax: the wave image stays fixed while the section scrolls over it */
	inset: 0;
	z-index: -2;
	background: var(--qo-waves, none) center / cover no-repeat;
	opacity: 0.7;
	pointer-events: none;
}

.cta-band::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -10%;
	right: -10%;
	z-index: -1;
	height: clamp(64px, 9vw, 120px);
	background: var(--qo-primary);
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
	box-shadow: inset 0 -18px 26px -10px rgba(0, 0, 0, 0.55); /* shadow sits outside the CTA box, along the curve */
}

.cta-band__title {
	margin: 22px 0 22px;
	font-size: var(--qo-fs-h2);
	line-height: 1.22;
}

.cta-band__text {
	font-size: var(--qo-fs-lead);
	line-height: 1.45;
}

.cta-band__actions {
	justify-content: center;
	margin-top: clamp(28px, 4vw, 52px);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-top: clamp(56px, 6vw, 80px);
	background: var(--qo-black);
	color: var(--qo-text);
}

.site-footer::before {
	content: "";
	position: absolute;
	right: -40px;
	bottom: -10px;
	z-index: -1;
	width: min(620px, 70vw);
	aspect-ratio: 700 / 520;
	background: url("../images/footer-lines.svg") right bottom / contain no-repeat;
	opacity: 0.45;
	pointer-events: none;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
	gap: clamp(32px, 4vw, 64px);
}

.site-logo--footer img,
.site-logo--footer .custom-logo {
	width: 190px;
	height: auto;
}

.site-footer__about {
	margin-top: 24px;
	max-width: 300px;
	font-size: 16px;
	line-height: 1.5;
}

.site-footer__brand .btn {
	margin-top: 20px;
}

.site-footer__title {
	max-width: 250px;
	margin: 6px 0 22px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--qo-text);
	font-family: var(--qo-font-body);
	font-size: 18px;
	font-weight: 400;
}

.footer-nav {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 18px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-nav a,
.contact-list a {
	color: var(--qo-text);
}

.footer-nav a:hover,
.contact-list a:hover {
	color: var(--qo-accent);
}

.contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-list__item {
	overflow-wrap: anywhere;
}

.contact-list__item + .contact-list__item {
	margin-top: 18px;
}

.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.social-links a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--qo-line);
	border-radius: 50%;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.social-links a:hover {
	background: var(--qo-secondary);
	border-color: var(--qo-accent);
}

.social-links img {
	width: 18px;
	height: 18px;
}

.site-footer__bottom {
	margin-top: clamp(40px, 5vw, 64px);
	padding-block: 18px 22px;
	border-top: 1px solid rgba(235, 237, 238, 0.45);
	text-align: center;
}

.site-footer__copyright {
	margin: 0;
	color: rgba(235, 237, 238, 0.65);
	font-size: 15px;
}

/* ==========================================================================
   Blog / archive
   ========================================================================== */
/* Post card (blog grid) */
.post-card {
	padding: 0;
	overflow: hidden;
}

.post-card__media {
	position: relative;
	display: block;
	overflow: hidden;
}

.post-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(28, 33, 32, 0.25);
	transition: background-color 0.3s var(--qo-ease);
}

.post-card__media img {
	width: 100%;
	aspect-ratio: 720 / 450;
	object-fit: cover;
	transition: transform 0.6s var(--qo-ease);
}

@media (hover: hover) {
	.post-card:hover .post-card__media img,
	.post-card:focus-within .post-card__media img {
		transform: scale(1.04);
	}

	.post-card:hover .post-card__media::after,
	.post-card:focus-within .post-card__media::after {
		background: rgba(28, 33, 32, 0);
	}
}

.post-card__media--empty {
	display: grid;
	place-items: center;
	aspect-ratio: 720 / 450;
	background: var(--qo-secondary);
}

.post-card__media--empty img {
	width: 40%;
	aspect-ratio: auto;
	object-fit: contain;
	opacity: 0.6;
}

.post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px 24px 28px;
}

.post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin-bottom: 12px;
	color: var(--qo-text-muted);
	font-size: 14px;
}

.post-card__cat {
	color: var(--qo-accent);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 13px;
}

.post-card__title {
	margin: 0 0 12px;
	font-family: var(--qo-font-body);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.post-card__title a {
	color: var(--qo-text);
}

.post-card__title a:hover {
	color: var(--qo-accent);
}

.post-card__excerpt {
	margin-bottom: 20px;
	font-size: var(--qo-fs-small);
	line-height: 1.5;
	color: var(--qo-text-muted);
}

.post-card .link-more {
	margin-top: auto;
	font-size: 16px;
}

/* Numbered pagination */
.navigation.pagination {
	margin-top: clamp(40px, 5vw, 64px);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--qo-border);
	border-radius: 999px;
	color: var(--qo-text);
	font-size: 16px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.page-numbers.dots {
	border-color: transparent;
}

.page-numbers.current,
a.page-numbers:hover,
a.page-numbers:focus-visible {
	background: var(--qo-accent);
	border-color: var(--qo-accent);
	color: var(--qo-on-accent);
}

/* Single post */
.post-hero__meta {
	position: relative;
	z-index: 1;
	margin: 0 0 12px;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.post-hero__meta a {
	color: var(--qo-text);
}

.post-hero__meta a:hover {
	color: var(--qo-primary);
}

.post-hero__meta span {
	margin: 0 6px;
}

.hero--post .hero__title--underline {
	max-width: 900px;
	line-height: 1.2;
}

.post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	align-items: start;
	gap: clamp(32px, 4vw, 56px);
}

.post-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0 0 24px;
	color: var(--qo-text-muted);
	font-size: 14px;
}

.post-article__media {
	margin-bottom: 32px;
	overflow: hidden;
	border: 1px solid var(--qo-border);
	border-radius: var(--qo-radius);
}

.post-article__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.post-article .entry-content h2 {
	font-size: clamp(28px, 22.4px + 1vw, 34px);
}

.post-article .entry-content h3 {
	font-size: 20px;
}

.post-article .entry-content ul,
.post-article .entry-content ol {
	padding-left: 1.25em;
}

.post-article .entry-content li + li {
	margin-top: 8px;
}

.post-sidebar {
	display: grid;
	gap: 24px;
}

.sidebar-box {
	padding: 28px 24px;
	background: var(--qo-primary);
	border: 1px solid var(--qo-border);
	border-radius: var(--qo-radius);
}

.sidebar-box__title {
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--qo-line);
	font-family: var(--qo-font-heading);
	font-size: 24px;
	font-weight: 400;
}

.sidebar-box--cta {
	background: var(--qo-secondary);
	border-color: var(--qo-secondary);
}

.sidebar-box--cta p {
	margin-bottom: 20px;
	font-size: var(--qo-fs-small);
}

.recent-posts,
.category-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.recent-posts li + li {
	margin-top: 16px;
}

.recent-posts__link {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	color: var(--qo-text);
}

.recent-posts__thumb {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: var(--qo-radius-sm);
	object-fit: cover;
}

.recent-posts__text {
	display: grid;
	gap: 4px;
	font-size: 15px;
	line-height: 1.35;
}

.recent-posts__link:hover .recent-posts__title {
	color: var(--qo-accent);
}

.recent-posts__text time {
	color: var(--qo-text-muted);
	font-size: 13px;
}

.category-list li + li {
	border-top: 1px solid var(--qo-line);
}

.category-list a {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	color: var(--qo-text);
	font-size: 16px;
}

.category-list a:hover {
	color: var(--qo-accent);
}

.category-list span {
	color: var(--qo-text-muted);
}

/* Previous / next post */
.post-navigation {
	margin-top: 48px;
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.post-navigation .nav-next {
	grid-column: 2;
	text-align: right;
}

.post-navigation a {
	display: block;
	height: 100%;
	padding: 20px 22px;
	border: 1px solid var(--qo-border);
	border-radius: var(--qo-radius);
	color: var(--qo-text);
	transition: background-color 0.2s ease;
}

.post-navigation a:hover {
	background: var(--qo-secondary);
}

.post-navigation .nav-label {
	display: block;
	margin-bottom: 6px;
	color: var(--qo-accent);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.post-navigation .nav-title {
	font-weight: 600;
	line-height: 1.35;
}

.entry-footer {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--qo-line);
	color: var(--qo-text-muted);
}

.entry-tags__label {
	color: var(--qo-text);
	font-weight: 600;
}

.empty-state {
	display: grid;
	justify-items: start;
	gap: 20px;
}

.comments-area {
	margin-top: 56px;
}

.comment-list {
	padding-left: 0;
	list-style: none;
}

.comment-body {
	padding: 20px 0;
	border-bottom: 1px solid var(--qo-line);
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.comment-form-cookies-consent input {
	margin-top: 5px;
}

.comment-form-cookies-consent label {
	margin: 0;
}

.comment-form .submit {
	margin-top: 12px;
}

.page-links {
	margin-top: 32px;
}