/**
 * Component styles, added incrementally as each phase builds the component.
 * Scaffolded now so later phases append to a known structure instead of
 * hunting for where a rule belongs. Nothing below duplicates base.css.
 */

/* ==========================================================================
   Phase 4 — full pill header, mobile nav polish, footer columns refinement
   ========================================================================== */

/* Floating pill header, matching the SABQ reference exactly: the header
   itself has no background and is lifted out of the document flow with
   `position: fixed`, so it overlays the hero/breadcrumb image that every
   template places directly beneath it — the image runs full-bleed to the
   very top of the page and shows through around the white pill, instead of
   sitting behind a solid body-colour bar. Only the pill (`.site-header__bar`)
   is opaque. Once the page scrolls past the header's own height, nav.js adds
   `.is-stuck`, which only changes the pill's cosmetics (it flushes out to a
   full-width, square-cornered bar) — the header itself stays `fixed` the
   whole time, so it never scrolls away and snaps back; every state change is
   a plain property transition instead of a positional jump. */
.site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	padding-top: 16px;
	background: transparent;
	border-bottom: none;
	transition: padding-top 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.site-header__bar {
	width: 100%;
	background: var(--color-surface);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-header);
	padding: 10px 12px 10px 28px;
	transition:
		max-width 0.45s cubic-bezier(0.23, 1, 0.32, 1),
		border-radius 0.45s cubic-bezier(0.23, 1, 0.32, 1),
		box-shadow 0.45s cubic-bezier(0.23, 1, 0.32, 1),
		padding 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
/* base.css's global `@media (prefers-reduced-motion: reduce)` rule (see the
   note above the news ticker's own carve-out further down this file) clamps
   every transition sitewide to 0.01ms, which for most motion is the right
   accessibility default but turns this header dock into an invisible,
   jarring snap instead of the gentle settle a "less motion" preference is
   actually asking for — there's no parallax or large-scale movement here,
   just a small pill tightening into a bar. Give it a short, calm transition
   instead of none at all. */
@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__bar {
		transition-duration: 0.15s !important;
		transition-timing-function: ease-out !important;
	}
}
@media (max-width: 880px) {
	.site-header { padding-top: 12px; }
	.site-header__bar { border-radius: 22px; padding: 10px 16px; }
}

/* Scrolled / "stuck" state — toggled by nav.js once the page scrolls past
   the header's own height. `width: 100%` never changes (see above), so
   letting `max-width` alone expand from the container width to "uncapped"
   is what animates the pill into a flush full-width bar; margin-inline stays
   on `auto` throughout and simply settles at 0 once there's no room left,
   instead of being snapped there. */
.site-header.is-stuck {
	padding-top: 0;
}
.site-header.is-stuck .site-header__bar {
	max-width: 100vw;
	border-radius: 0;
	box-shadow: var(--shadow-header-stuck);
}
@media (max-width: 880px) {
	.site-header.is-stuck .site-header__bar { border-radius: 0; }
}

.site-header__actions .btn { padding: 12px 22px; }
.site-header__actions .menu-toggle { border-color: var(--color-border); }

/* Back-to-top: left side, mirroring the Joinchat WhatsApp bubble's own
   offset (right: 20px + 8px = 28px) on the opposite corner, at the same
   height, since Joinchat sits bottom-right. */
.back-to-top {
	position: fixed;
	left: 28px;
	bottom: 28px;
	z-index: 90;
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-ink);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--shadow-card);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--color-accent); border-color: var(--color-accent); }

/* Pre-footer CTA — full treatment (media, scrim, ghost watermark) */
.pre-footer-cta {
	position: relative;
	overflow: hidden;
	color: #fff;
	text-align: center;
	padding-block: 96px;
	background: var(--color-navy-700);
}
.pre-footer-cta__media { position: absolute; inset: 0; }
.pre-footer-cta__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.pre-footer-cta__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,29,48,0.75) 0%, rgba(20,29,48,0.94) 100%);
}
.pre-footer-cta__watermark {
	display: none;
	position: absolute;
	left: 50%; top: 42%;
	transform: translate(-50%, -50%);
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(4rem, 14vw, 11rem);
	letter-spacing: 0.02em;
	color: rgba(255,255,255,0.06);
	white-space: nowrap;
	max-width: none;
	user-select: none;
}
.pre-footer-cta__inner { position: relative; z-index: 1; }
.pre-footer-cta h2 { color: #fff; }
.pre-footer-cta p { color: rgba(255,255,255,0.75); margin-inline: auto; margin-bottom: 1.2em; }

/* Footer: flat navy band, no card/overlap — see base.css for the current
   .site-footer / .site-footer__grid rules (this used to be an earlier
   floating-card treatment; superseded, kept out to avoid re-conflicting). */

/* ==========================================================================
   Phase 5 — hero-home, info-trio, value-grid, logo-strip, quote-slider
   ========================================================================== */

.eyebrow--on-dark { color: var(--color-accent); }

/* Hero (homepage) — fullscreen, like the SABQ reference: the header sits
   above it in its own white space (body background shows around the
   pill), and the hero image itself fills the rest of the viewport. */
.hero-home {
	position: relative;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding-block: 64px 48px;
}
.hero-home__media { position: absolute; inset: 0; overflow: hidden; }
.hero-home__media img { width: 100%; height: 100%; object-fit: cover; }
/* The background image above always renders first (instant paint, video
   poster, and the fallback if a video is skipped). A video or embed, when
   set, is layered directly on top of it at the same size and always plays,
   since it's muted and silent either way. */
.hero-home__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-home__video-embed { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Base guess before JS measures the box (assets/js/hero-video.js) and sets
   an exact pixel size — Chrome ignores `object-fit` on <iframe>, so this
   can't be done in CSS alone once the hero grows taller than 100vh (small
   screens, once the heading/copy/chips need more room than the viewport). */
.hero-home__video-embed iframe {
	position: absolute; top: 50%; left: 50%;
	width: 177.78vh; height: 100vh; /* 16:9, oversized to roughly cover a 100vh box */
	transform: translate(-50%, -50%);
	border: 0;
}
/* Vimeo's own `background=1` mode already scales its video to cover a
   100%-sized iframe, so it skips the oversize-and-center trick above (and
   the JS sizing only targets the --youtube variant). */
.hero-home__video-embed--vimeo iframe { position: absolute; inset: 0; width: 100%; height: 100%; top: 0; left: 0; transform: none; }
.hero-home__scrim {
	position: absolute; inset: 0;
	/* Deliberately heavier and more even than a typical photo scrim — this
	   also sits over an uncontrolled, moving video background, so it needs
	   to keep the hero text readable through any frame, not just a single
	   chosen still image. */
	background: linear-gradient(180deg, rgba(15,21,35,0.72) 0%, rgba(15,21,35,0.9) 100%);
}
/* `.container` (the shared utility class this also carries) centres itself
   with `margin-inline: auto` by default — fine for normal page content, but
   this hero reads off the SABQ reference, where the copy sits toward the
   left of the frame rather than in the middle of it. Pinning the margin to
   0 keeps `.container`'s max-width/padding but drops its auto-centring. */
.hero-home__content { position: relative; max-width: 760px; margin-inline: 0; }
.hero-home__content h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.6rem); }
.hero-home__lede { color: rgba(255,255,255,0.8); font-size: var(--text-lg); max-width: 56ch; }
.hero-home__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }

/* News ticker — a continuously scrolling strip of live headlines directly
   under the hero (template-parts/sections/news-ticker.php). The visible
   window clips an inner track that's rendered twice back to back; the
   keyframe slides it exactly one copy's width (-50%) so the loop point is
   invisible. */
.news-ticker {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--color-navy-700);
	color: #fff;
	padding-block: 14px;
	padding-inline: clamp(20px, 4vw, 56px);
}
.news-ticker__label {
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	padding-right: 20px;
	border-right: 1px solid rgba(255,255,255,0.2);
}
.news-ticker__viewport { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.news-ticker__track {
	display: flex;
	align-items: center;
	gap: 20px;
	width: max-content;
	animation: news-ticker-scroll 40s linear infinite;
}
.news-ticker__item { color: #fff; text-decoration: none; font-size: var(--text-sm); white-space: nowrap; }
.news-ticker__item:hover { color: var(--color-accent); }
.news-ticker__sep { color: var(--color-accent); font-size: 0.5em; flex-shrink: 0; }
@keyframes news-ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.news-ticker:hover .news-ticker__track { animation-play-state: paused; }
/* base.css's global `@media (prefers-reduced-motion: reduce)` rule forces
   every animation's duration/iteration-count down with `!important` — a
   sitewide accessibility default that's the right call for decorative
   motion (hover lifts, transitions), but it also silently clamped this
   ticker to a single ~0.01ms cycle, i.e. visually frozen. The ticker is
   content, not decoration, so it's deliberately exempted here: this rule
   only wins because a class selector always beats a bare `*`, `!important`
   or not. */
@media (prefers-reduced-motion: reduce) {
	.news-ticker__track { animation-duration: 40s !important; animation-iteration-count: infinite !important; }
}
@media (max-width: 640px) {
	.news-ticker__label { display: none; }
}

/* "Who We Are" — a photo beside a statement heading, with a Vision /
   Mission split underneath. */
.who-we-are { padding-block: var(--section-spacing); }
.who-we-are__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.who-we-are__media img { display: block; width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; object-fit: cover; }
.eyebrow--marked { position: relative; padding-left: 22px; display: inline-block; }
.eyebrow--marked::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	transform: translateY(-50%);
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--color-accent);
}
.who-we-are__content-col h2 { max-width: 22ch; }
.who-we-are__split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 36px; }
.who-we-are__item-mark { display: block; width: 34px; height: 3px; background: var(--color-accent); margin-bottom: 16px; }
.who-we-are__item-label { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-ink); margin-bottom: 6px; }
.who-we-are__item p { color: var(--color-ink-soft); margin: 0; }
@media (max-width: 860px) {
	.who-we-are__grid { grid-template-columns: 1fr; gap: 16px; }
	.who-we-are__split { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
	.who-we-are { padding-top: 56px; }
}

/* Stats belt (about teaser) */
.stats-belt {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	padding-top: 96px;
	padding-bottom: var(--section-spacing);
}
.stats-belt__figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; }
.stats-belt__item dt { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-ink); }
.stats-belt__item dd { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.stats-belt__media img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
@media (max-width: 820px) {
	.stats-belt { grid-template-columns: 1fr; padding-top: 40px; }
	.stats-belt__figures { grid-template-columns: repeat(3, 1fr); }
}

/* Homepage services teaser */
.home-services { padding-block: var(--section-spacing); text-align: center; }
.home-services__head h2 { max-width: 46ch; margin-inline: auto; }
.home-services__lede { max-width: 56ch; margin: 12px auto 0; color: var(--color-muted); font-size: var(--text-base); }
.home-services__cta { margin-top: 32px; }

/* Case study teaser (dark band) — a horizontal-scroll carousel, matching
   the SABQ reference's dark "Projects" strip: cards run off the edge of
   the viewport to hint there's more, and the row drags/scrolls by touch,
   trackpad or the arrow keys (no JS required for the scrolling itself). */
.case-study-teaser { background: var(--color-navy); color: #fff; padding-block: var(--section-spacing); overflow: hidden; }
.case-study-teaser__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.case-study-teaser__head h2 { color: #fff; max-width: 30ch; }
.case-study-teaser__row {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--container-padding);
	padding-inline: max(var(--container-padding), calc((100vw - var(--container-width)) / 2 + var(--container-padding)));
	padding-bottom: 12px;
	margin-inline: 0;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.case-study-teaser__row::-webkit-scrollbar { display: none; }
.gallery-card {
	position: relative;
	display: block;
	border-radius: var(--radius-card);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	text-decoration: none;
	transition: transform var(--duration-base) var(--ease-standard);
}
.case-study-teaser__row .gallery-card {
	flex: 0 0 clamp(220px, 24vw, 300px);
	scroll-snap-align: start;
}
.gallery-card:hover { transform: translateY(-4px); }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; }
.gallery-card__label {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 20px 18px;
	background: linear-gradient(0deg, rgba(20,29,48,0.9) 0%, rgba(20,29,48,0) 100%);
	color: #fff;
	display: flex; flex-direction: column; gap: 2px;
}
.gallery-card__label small { color: rgba(255,255,255,0.7); font-family: var(--font-mono); font-size: var(--text-xs); }
.gallery-card__label strong { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }

@media (max-width: 560px) {
	.case-study-teaser__row .gallery-card { flex-basis: 78vw; }
}

/*
 * Image accordion — hover-capable pointers only (a phone/tablet has no
 * hover, so it keeps the swipeable scroll row above). One panel runs wide
 * by default (the first); hovering any panel swaps which one is wide,
 * exactly like the SABQ reference's "Reputation" projects section. Every
 * rule below is scoped to .case-study-teaser__row so it can't touch the
 * plain .gallery-card grids on the Case Studies / Industries archives.
 */
@media (hover: hover) and (pointer: fine) {
	.case-study-teaser__row {
		overflow: visible;
		scroll-snap-type: none;
		height: 460px;
		padding-inline: var(--container-padding);
		max-width: var(--container-width);
		margin-inline: auto;
	}
	.case-study-teaser__row .gallery-card {
		flex: 1 1 0%;
		height: 100%;
		aspect-ratio: auto;
		scroll-snap-align: none;
		transition: flex 0.5s var(--ease-standard);
	}
	.case-study-teaser__row .gallery-card:first-child { flex: 2.6 1 0%; }
	.case-study-teaser__row:hover .gallery-card { flex: 1 1 0%; }
	.case-study-teaser__row:hover .gallery-card:hover { flex: 2.6 1 0%; }

	/* Collapsed panel: centered, vertical-set title. */
	.case-study-teaser__row .gallery-card__label {
		inset: 0;
		bottom: auto;
		justify-content: center;
		align-items: center;
		text-align: center;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		background: linear-gradient(0deg, rgba(20,29,48,0.5) 0%, rgba(20,29,48,0) 45%, rgba(20,29,48,0.35) 100%);
	}
	.case-study-teaser__row .gallery-card__label small { writing-mode: inherit; }

	/* Expanded panel: the first one at rest, or whichever is hovered. */
	.case-study-teaser__row:not(:hover) .gallery-card:first-child .gallery-card__label,
	.case-study-teaser__row:hover .gallery-card:hover .gallery-card__label {
		writing-mode: horizontal-tb;
		transform: none;
		justify-content: flex-end;
		align-items: flex-start;
		text-align: left;
		background: linear-gradient(0deg, rgba(20,29,48,0.92) 0%, rgba(20,29,48,0) 55%);
	}
	.case-study-teaser__row:not(:hover) .gallery-card:first-child .gallery-card__label strong::after,
	.case-study-teaser__row:hover .gallery-card:hover .gallery-card__label strong::after {
		content: " \2197";
		color: var(--color-accent);
	}
}

/* Value grid */
.value-grid-section { padding-block: var(--section-spacing); }
.value-grid-section__head { text-align: center; max-width: 60ch; margin: 0 auto 44px; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.value-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 28px 26px;
	transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.value-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(29, 27, 23, 0.32); }
.value-card__index { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent-600); }
.value-card h3 { margin-top: 10px; }
.value-card p { margin-bottom: 0; }
@media (max-width: 860px) {
	.value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.value-grid { grid-template-columns: 1fr; }
}

/* Commitment split — image + heading + three promises, dark like the
   SABQ reference's "Dear Builders of Tomorrow" band, with an optional
   trust-badge chip overlaid on the image (hidden unless configured). */
.commitment-split { background: var(--color-navy-700); color: #fff; padding-block: var(--section-spacing); }
.commitment-split__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 56px;
	align-items: center;
}
.commitment-split__media { position: relative; }
.commitment-split__media img { display: block; width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; object-fit: cover; }
.commitment-split__badge {
	position: absolute;
	left: 24px;
	bottom: -24px;
	background: var(--color-surface);
	color: var(--color-ink);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-card);
	padding: 12px 22px;
	font-weight: 700;
	font-size: var(--text-sm);
}
.commitment-split__body h2 { color: #fff; max-width: 20ch; }
.commitment-split__lede { color: rgba(255,255,255,0.75); font-size: var(--text-lg); max-width: 52ch; margin-top: 4px; }
.commitment-list { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.commitment-list__item { display: flex; gap: 16px; align-items: flex-start; }
.commitment-list__mark {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-navy-700);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: var(--text-sm);
}
.commitment-list__item strong { color: #fff; }
.commitment-list__item p { margin: 2px 0 0; color: rgba(255,255,255,0.7); font-size: var(--text-sm); }
@media (max-width: 860px) {
	.commitment-split__grid { grid-template-columns: 1fr; }
	.commitment-split__media { margin-bottom: 8px; }
}

/* Mid-page "Get a Quote" lead-capture band — background image with a
   scrim (or a flat navy fallback when no image is set) behind a heading
   and a compact copy of the contact form, matching the SABQ reference's
   mid-page quote-request CTA. */
.quote-cta { position: relative; overflow: hidden; background: var(--color-navy); color: #fff; }
.quote-cta__media { position: absolute; inset: 0; }
.quote-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.quote-cta__scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(20,29,48,0.94) 0%, rgba(20,29,48,0.75) 100%); }
.quote-cta__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	padding-block: var(--section-spacing);
}
.quote-cta__copy h2 { color: #fff; max-width: 18ch; }
.quote-cta__lede { color: rgba(255,255,255,0.75); font-size: var(--text-lg); margin-top: 8px; max-width: 46ch; }
.quote-cta__form-wrap { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 32px 30px; }
.quote-cta__form-wrap .form-notice { margin-bottom: 14px; }
.quote-cta__form label { color: var(--color-ink-soft); }
.quote-cta__form .btn { margin-top: 16px; width: 100%; justify-content: center; }
@media (max-width: 860px) {
	.quote-cta__grid { grid-template-columns: 1fr; padding-block: 64px; }
}

/* Client logo strip */
.logo-strip { padding-block: 64px; text-align: center; }
.logo-strip__caption { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: 28px; }
.logo-strip__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px; }
.logo-strip__logo { max-height: 40px; width: auto; filter: grayscale(1); opacity: 0.6; }

/* Quote slider */
.quote-slider { padding-block: var(--section-spacing); text-align: center; }
.quote-slider h2 { max-width: 40ch; margin-inline: auto; }
/* Three cards side by side by default (also the entire no-JS layout — with
   3 or fewer testimonials this is the whole design, nothing to page
   through). JS adds `.is-carousel` once there's more than one page's worth,
   turning this into a sliding track driven by assets/js/sliders.js. */
.quote-slider__viewport { overflow: hidden; margin-top: 40px; }
.quote-slider__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote-slider__track.is-carousel {
	display: flex;
	gap: 24px;
	transition: transform 0.5s var(--ease-standard);
}
.quote-slider__track.is-carousel > .quote-card { flex: 0 0 calc((100% - 48px) / 3); }
.quote-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	margin: 0;
	padding: 32px 28px;
	text-align: left;
	display: flex;
	flex-direction: column;
}
.quote-card__rating { color: var(--color-accent); letter-spacing: 2px; margin-bottom: 14px; font-size: var(--text-sm); }
.quote-card__text { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-ink-soft); margin: 0 0 24px; }
.quote-card footer { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote-card__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.quote-card__author { font-weight: 700; color: var(--color-ink); margin: 0; }
.quote-card__role { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }
.quote-slider__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 32px; }
.quote-slider__dots { display: flex; align-items: center; gap: 8px; }
.quote-slider__dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: var(--color-border); cursor: pointer; }
.quote-slider__dot.is-active { background: var(--color-accent); }
.quote-slider__prev, .quote-slider__next {
	width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid var(--color-border); background: var(--color-surface);
	cursor: pointer; font-size: 1rem; flex-shrink: 0;
}
.quote-slider__prev:hover, .quote-slider__next:hover { background: var(--color-accent); border-color: var(--color-accent); }
@media (max-width: 1000px) {
	.quote-slider__track { grid-template-columns: repeat(2, 1fr); }
	.quote-slider__track.is-carousel > .quote-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 720px) {
	.quote-slider__track { grid-template-columns: 1fr; }
	.quote-slider__track.is-carousel > .quote-card { flex-basis: 100%; }
}

/* Insights teaser */
.insights-teaser { padding-block: var(--section-spacing); }
.insights-teaser__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 8px; flex-wrap: wrap; }

/* ==========================================================================
   Phase 6 — service-row (alternating), related-services, service FAQ accordion
   ========================================================================== */

.services-archive__intro { text-align: center; padding-block: 56px 8px; max-width: 62ch; margin-inline: auto; }
.services-archive__intro h2 { font-size: var(--text-2xl); }

.service-row { padding-block: 56px; }
.service-row:nth-child(odd) { background: var(--color-wash); }
.service-row__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.service-row--reverse .service-row__grid { direction: rtl; }
.service-row--reverse .service-row__grid > * { direction: ltr; }
.service-row__media img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.service-row__body h3 { font-size: var(--text-2xl); }
.service-row__body h3 a { color: var(--color-ink); text-decoration: none; }
.service-row__link { font-weight: 700; }
@media (max-width: 780px) {
	.service-row__grid, .service-row--reverse .service-row__grid { grid-template-columns: 1fr; direction: ltr; }
}

/* Single service */
.service-single__intro { padding-top: 48px; text-align: center; }
.service-single__lede { font-size: var(--text-lg); color: var(--color-ink-soft); max-width: 62ch; margin-inline: auto; }
.service-single__grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 56px;
	padding-block: 40px var(--section-spacing);
}
.service-single__aside { position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; gap: 20px; }
.service-single__aside img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.service-single__cta-card {
	background: var(--color-wash);
	border-radius: var(--radius-card);
	padding: 28px 26px;
}
.service-single__cta-card .btn { margin-top: 10px; }
@media (max-width: 900px) {
	.service-single__grid { grid-template-columns: 1fr; }
	.service-single__aside { position: static; }
}

/* FAQ accordion */
.service-faqs, .related-services { padding-block: 56px; border-top: 1px solid var(--color-border); }
.accordion { max-width: 780px; }
.accordion__item {
	border-bottom: 1px solid var(--color-border);
	padding-block: 16px;
}
.accordion__item summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--color-ink);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary::after {
	content: "+";
	font-family: var(--font-mono);
	font-size: var(--text-lg);
	color: var(--color-accent-600);
	margin-left: 12px;
}
.accordion__item[open] summary::after { content: "\2212"; }
.accordion__panel { padding-top: 10px; color: var(--color-ink-soft); }

/* ==========================================================================
   Phase 7 — timeline, numbered feature cards, case-study editorial layout,
   industry cards, contact info-trio + message/map split
   ========================================================================== */

/* Info trio (Contact page) */
.info-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-block: 56px 40px; }
.info-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 32px 28px;
}
.info-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-wash);
	color: var(--color-accent-600);
	margin-bottom: 14px;
}
.info-card h3 { font-size: var(--text-lg); }
.info-card__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (max-width: 860px) { .info-trio { grid-template-columns: 1fr; } }

/* Contact split */
.page-contact__split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: stretch; padding-bottom: var(--section-spacing); }
.contact-form-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 36px 34px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { margin-top: 14px; }
.contact-form__honeypot { position: absolute; left: -9999px; top: -9999px; }
.form-notice { padding: 12px 16px; border-radius: var(--radius-input); font-size: var(--text-sm); margin-bottom: 18px; }
.form-notice--success { background: rgba(63,125,92,0.12); color: var(--color-ok); }
.form-notice--error { background: rgba(179,65,44,0.1); color: var(--color-error); }
.page-contact__map { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); min-height: 340px; }
.page-contact__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }
@media (max-width: 860px) {
	.page-contact__split { grid-template-columns: 1fr; }
	.contact-form__row { grid-template-columns: 1fr; }
}

/* Story timeline */
.story-timeline { background: var(--color-wash); padding-block: var(--section-spacing); }
.story-timeline .eyebrow, .story-timeline h2 { text-align: center; display: block; }
.story-timeline h2 { max-width: 46ch; margin: 0 auto 48px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
.timeline::before { content: ""; position: absolute; top: 14px; left: 8%; right: 8%; height: 1px; background: var(--color-border); }
.timeline__item { position: relative; text-align: center; }
.timeline__year { display: inline-block; font-family: var(--font-mono); font-weight: 600; color: var(--color-accent-600); background: var(--color-wash); padding: 0 12px; position: relative; z-index: 1; }
@media (max-width: 780px) {
	.timeline { grid-template-columns: 1fr; }
	.timeline::before { display: none; }
}

/* Explore cards (numbered) */
.explore-cards { padding-block: var(--section-spacing); }
.explore-cards .eyebrow, .explore-cards h2 { text-align: center; display: block; }
.explore-cards h2 { margin: 0 auto 40px; }
.explore-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.explore-card {
	display: block;
	border-radius: var(--radius-card);
	padding: 32px 28px;
	text-decoration: none;
	min-height: 220px;
	position: relative;
	transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
/* Pin each card's text colour on :hover too — a bare `.explore-card--N`
   loses to the site-wide `a:hover { color: var(--color-accent); }` rule on
   specificity, which was turning the orange card's own text orange on
   hover (invisible against its identical background). */
.explore-card--0, .explore-card--0:hover { background: var(--color-ink); color: #fff; }
.explore-card--1, .explore-card--1:hover { background: var(--color-accent); color: var(--color-ink); }
.explore-card--2, .explore-card--2:hover { background: var(--color-navy); color: #fff; }
.explore-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.explore-card__num { font-family: var(--font-mono); opacity: 0.6; }
.explore-card h3 { color: inherit; margin-top: 20px; }
.explore-card p { color: inherit; opacity: 0.8; font-size: var(--text-sm); }
.explore-card__link { position: absolute; right: 24px; bottom: 24px; font-weight: 700; }
@media (max-width: 860px) { .explore-cards__grid { grid-template-columns: 1fr; } }

/* Team grid */
.team-grid-section { padding-block: var(--section-spacing); text-align: center; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; text-align: left; }
.team-card img { border-radius: var(--radius-card); aspect-ratio: 1/1; object-fit: cover; margin-bottom: 14px; }
.team-card__role { color: var(--color-accent-600); font-weight: 600; font-size: var(--text-sm); margin: 0; }
.team-card__credentials { color: var(--color-muted); font-size: var(--text-xs); margin: 0 0 6px; }
@media (max-width: 960px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }

/* Industries / case studies archive grid (light variant of gallery-card) */
.industries-archive, .case-studies-archive { padding-block: 56px var(--section-spacing); }
.industries-archive .eyebrow, .case-studies-archive .eyebrow,
.industries-archive h2, .case-studies-archive h2 { text-align: center; display: block; }
.industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.gallery-card--light { aspect-ratio: 4 / 3; box-shadow: var(--shadow-card); }
@media (max-width: 860px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .industries-grid { grid-template-columns: 1fr; } }

/* Location pages (page-location.php) */
.page-location__office { padding-bottom: var(--section-spacing); }
.page-location__services { padding-block: 56px var(--section-spacing); text-align: center; }
.page-location__services .industries-grid { text-align: left; }
.page-location__cta { padding-bottom: var(--section-spacing); }
.page-location__cta .service-single__cta-card { max-width: 640px; margin-inline: auto; text-align: center; }

/* Single case study */
.case-study-single__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; padding-block: 48px; }
.case-study-single__aside { display: flex; flex-direction: column; gap: 22px; }
.case-study-single__field p { color: var(--color-ink); font-weight: 600; margin: 4px 0 0; }
.case-study-single__metrics { display: grid; gap: 16px; margin: 0; padding: 20px; background: var(--color-wash); border-radius: var(--radius-card); }
.case-study-single__metrics dt { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink); }
.case-study-single__metrics dd { margin: 0; font-size: var(--text-xs); color: var(--color-muted); }
.case-study-single__quote { border-left: 3px solid var(--color-accent); padding-left: 16px; font-style: italic; }
.case-study-single__quote footer { margin-top: 8px; font-size: var(--text-sm); color: var(--color-muted); font-style: normal; }
.case-study-single__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-bottom: var(--section-spacing); }
.case-study-single__gallery img { border-radius: var(--radius-card); width: 100%; }
@media (max-width: 900px) {
	.case-study-single__grid { grid-template-columns: 1fr; }
	.case-study-single__gallery { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Phase 8 — blog grid hover-reveal, related posts, table of contents
   ========================================================================== */

/* Smaller, tighter blog card than the generic post-grid/service-card sizing
   in base.css: a shorter image, a card-sized headline instead of the h2
   default it would otherwise inherit (up to --text-3xl), and a smaller
   excerpt. Scoped to .post-card only so .service-card is untouched. */
.post-card__body { padding: 18px 20px 22px; }
.post-card__title {
	font-size: var(--text-xl);
	line-height: 1.3;
	margin: 0 0 8px;
}
.post-card__body p { font-size: var(--text-sm); color: var(--color-ink-soft); margin: 0; }

.post-card__media { position: relative; aspect-ratio: 16 / 10; }
.post-card__expand {
	position: absolute;
	top: 14px; right: 14px;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-ink);
	display: flex; align-items: center; justify-content: center;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.post-card:hover .post-card__expand { opacity: 1; transform: scale(1); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__media img { transition: transform var(--duration-base) var(--ease-standard); }

.related-posts { padding-block: var(--section-spacing); border-top: 1px solid var(--color-border); }

/* Table of contents (long-form blog posts, 3+ H2s) */
.toc {
	background: var(--color-wash);
	border-radius: var(--radius-card);
	padding: 22px 26px;
	margin-bottom: 32px;
}
.toc__title { font-weight: 700; color: var(--color-ink); margin-bottom: 10px; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc a { color: var(--color-ink-soft); }
.entry-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); display: flex; gap: 16px; margin-bottom: 8px; }
.entry-footer { font-size: var(--text-sm); color: var(--color-muted); margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--color-border); display: flex; gap: 20px; flex-wrap: wrap; }

/* ==========================================================================
   Phase 9 — responsive pass: intentional mobile layouts, not scaled-down
   desktop. Headings already went fluid in base.css; everything here is
   layout/spacing that only makes sense as a deliberate mobile rework.
   ========================================================================== */

@media (max-width: 640px) {
	/* Hero: a little shorter than full screen on small phones (100vh feels
	   cramped with the browser's own address-bar chrome), tighter line
	   length, stacked actions. */
	.hero-home { min-height: 92vh; min-height: 92dvh; }
	.hero-home__actions .btn { width: 100%; justify-content: center; }
	.hero-home__actions { flex-direction: column; }

	/* Quote slider: one card per view on small phones. */
	.quote-card__text { font-size: var(--text-base); }

	/* Team grid: one column reads better than a cramped two on a phone. */
	.team-grid { grid-template-columns: 1fr; }

	/* Case study metrics: two-up instead of a tall single column. */
	.case-study-single__metrics { grid-template-columns: repeat(2, 1fr); }

	/* Explore / value / info cards: full-width tap targets. */
	.explore-card { min-height: auto; padding: 26px 22px; }
	.explore-card__link { position: static; display: inline-block; margin-top: 18px; }

	/* Back-to-top: mirror Joinchat's own offset on the opposite corner. */
	.back-to-top { left: 28px; bottom: 28px; width: 42px; height: 42px; }

	/* Section rhythm tightens on small screens rather than just scaling. */
	:root { --section-spacing: var(--section-spacing-mobile); }
}

@media (max-width: 400px) {
	.stats-belt__figures { grid-template-columns: 1fr; text-align: center; }
	.case-study-single__metrics { grid-template-columns: 1fr; }
}

/* Respect touch target size on any pointer:coarse device, independent of
   viewport width (a large tablet in portrait still benefits). */
@media (pointer: coarse) {
	.btn, .menu-toggle, .back-to-top, .quote-slider__prev, .quote-slider__next {
		min-height: 44px;
	}
	.main-navigation.is-open a { padding-block: 12px; }
}

/* ==========================================================================
   Phase 10 — accessibility & comments polish (SEO/schema is server-side,
   no CSS needed for it)
   ========================================================================== */

.comments-area { max-width: 780px; margin: 0 auto; padding-block: var(--section-spacing); }
.comments-title { margin-bottom: 24px; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .children { list-style: none; margin: 0 0 0 32px; padding: 0; }
.comment-body { padding-block: 20px; border-bottom: 1px solid var(--color-border); }
.comment-author { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.comment-author .avatar { border-radius: 50%; }
.comment-author .fn { font-style: normal; font-weight: 700; color: var(--color-ink); }
.comment-metadata { font-size: var(--text-xs); color: var(--color-muted); }
.comment-reply-link { font-size: var(--text-sm); font-weight: 600; }
.comment-respond { margin-top: 32px; }
.comment-form p { margin-bottom: 14px; }
.comment-form-comment textarea { min-height: 140px; }

/* Utility */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Pricing page (page-pricing.php) */
.pricing-table-wrap { padding-block: 56px 40px; overflow-x: auto; }
.pricing-table { width: 100%; min-width: 640px; border-collapse: collapse; text-align: center; }
.pricing-table th, .pricing-table td { padding: 16px 18px; border-bottom: 1px solid var(--color-border); }
.pricing-table__row-label { text-align: left; font-weight: 600; color: var(--color-ink); font-size: var(--text-sm); }
.pricing-table thead th { vertical-align: top; padding-top: 24px; }
.pricing-table__plan { display: block; font-weight: 700; font-size: var(--text-lg); }
.pricing-table__price { display: block; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); color: var(--color-accent-600); margin-top: 6px; }
.pricing-table__cap { display: block; color: var(--color-muted); font-size: var(--text-xs); margin-top: 4px; }
.pricing-table__col--featured { background: var(--color-accent-100); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.pricing-table tbody tr td:nth-child(4) { background: var(--color-accent-100); }
.pricing-table tbody tr:last-child td:nth-child(4) { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.pricing-table__yes { color: var(--color-ok); font-weight: 700; font-size: var(--text-lg); }
.pricing-table__no { color: var(--color-muted); }
.pricing-table__cta-row td { border-bottom: 0; padding-top: 24px; }

/* Stacked-card alternative to .pricing-table on phones and small tablets —
   see the comment in page-pricing.php for why. Hidden by default (desktop
   uses the table); the media query below swaps the two. */
.pricing-cards { display: none; }

@media (max-width: 760px) {
	.pricing-table-wrap { display: none; }

	.pricing-cards {
		display: grid;
		gap: 24px;
		padding-block: 40px;
	}
	.pricing-card {
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-card);
		box-shadow: var(--shadow-card);
		padding: 28px 24px;
		text-align: center;
	}
	.pricing-card--featured { border-color: var(--color-accent); box-shadow: 0 20px 40px -20px rgba(29, 27, 23, 0.32); }
	.pricing-card__plan { margin: 0; font-size: var(--text-xl); }
	.pricing-card__price { display: block; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); color: var(--color-accent-600); margin-top: 8px; }
	.pricing-card__cap { display: block; color: var(--color-muted); font-size: var(--text-xs); margin-top: 4px; margin-bottom: 20px; }
	.pricing-card__list { list-style: none; margin: 0 0 24px; padding: 0; text-align: left; display: grid; gap: 12px; }
	.pricing-card__list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-sm); }
	.pricing-card__list li.is-excluded { color: var(--color-muted); }
	.pricing-card__list li > span:last-child { flex: 1; }
	.pricing-card .btn { width: 100%; }
}

.pricing-startup { background: var(--color-navy); color: #fff; padding-block: var(--section-spacing); margin-top: 24px; text-align: left; }
.pricing-startup__inner { max-width: 720px; margin-inline: 0; }
.pricing-startup h2 { color: #fff; }
.pricing-startup__price { display: block; font-size: var(--text-3xl); font-weight: 700; margin: 12px 0 20px; font-variant-numeric: tabular-nums; }
.pricing-startup__list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; text-align: left; max-width: 420px; }
.pricing-startup__list li { padding-left: 26px; position: relative; }
.pricing-startup__list li::before { content: '\2713'; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }
@media (max-width: 720px) {
	.pricing-startup { padding-block: 56px; }
}

/* Slightly stronger focus ring on dark sections, where the default accent
   ring can wash out against a busy photo background. */
.hero-home :focus-visible,
.hero-breadcrumb :focus-visible,
.pre-footer-cta :focus-visible,
.case-study-teaser :focus-visible,
.commitment-split :focus-visible,
.quote-cta :focus-visible {
	outline-color: #fff;
	outline-offset: 3px;
}


/* ==========================================================================
   Service card (Phase 9 restyle) — flush overlay design. Same base
   structure the shared .post-card/.service-card rules in base.css set up
   (image on top, body below, grid via .post-grid), but everything here is
   scoped to .service-card specifically, so .post-card (blog listings)
   keeps its original boxed-white-card style untouched. One card, reused
   by the homepage's "What We Offer" grid, related-services, and the
   services archive carousel — restyle it once here and it updates
   everywhere a service is listed.
   ========================================================================== */

.service-card {
	position: relative;
	display: block;
	background: none;
	border: none;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.service-card__media {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--color-wash);
}
.service-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-base) var(--ease-standard);
}
.service-card:hover .service-card__media img,
.service-card:focus-within .service-card__media img {
	transform: scale(1.08);
}
.service-card__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 22px 22px 20px;
	background: linear-gradient(180deg, rgba(20, 29, 48, 0) 0%, rgba(20, 29, 48, 0.78) 60%, rgba(20, 29, 48, 0.94) 100%);
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.service-card__body p { display: none; }
.service-card__eyebrow {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-accent-100);
	font-weight: 600;
}
.service-card__body h3 {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}
.service-card__body h3 a { color: #fff; text-decoration: none; }
.service-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--color-accent-100);
	margin-top: 4px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.service-card:hover .service-card__link,
.service-card:focus-within .service-card__link {
	opacity: 1;
	transform: none;
}
.service-card__link svg { flex-shrink: 0; }

/* Keep "Learn More" visible without hover on touch devices, where
   ":hover" never fires. */
@media (hover: none) {
	.service-card__link { opacity: 1; transform: none; }
}

/* Flush, edge-to-edge filmstrip for the homepage teaser and archive
   carousel (currently unused, kept for when they're wired back up).
   Related services keeps its own gap below — as a plain 3-up grid, not a
   filmstrip, its cards read better spaced apart with rounded corners.
   Blog's .post-grid (.post-card) is untouched throughout. */
.home-services .post-grid,
.services-carousel__track {
	gap: 0;
}
.related-services .post-grid {
	gap: 24px;
}

/* ==========================================================================
   Services carousel (archive-service.php) — full catalogue, three cards a
   page, sliding + looping via assets/js/sliders.js. Renders the shared
   .service-card above inside each .services-carousel__slide. Same
   base-grid / .is-carousel pattern as .quote-slider further up: without
   JS this is just a 3-column grid of every service; JS switches it to a
   sliding, wrapping track and wires the prev/next buttons.
   ========================================================================== */

.services-carousel { padding-bottom: var(--section-spacing); }

.services-carousel__viewport { overflow: hidden; }

.services-carousel__track { display: grid; grid-template-columns: repeat(3, 1fr); }
.services-carousel__track.is-carousel {
	display: flex;
	flex-wrap: nowrap;
	transition: transform 0.5s var(--ease-standard);
}
.services-carousel__track.is-carousel > .services-carousel__slide { flex: 0 0 calc(100% / 3); }

.services-carousel__slide { margin: 0; }

.services-carousel__controls { display: flex; justify-content: flex-end; gap: 12px; margin-top: 28px; }
.services-carousel__prev, .services-carousel__next {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-ink);
	cursor: pointer;
	flex-shrink: 0;
	transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.services-carousel__prev:hover, .services-carousel__next:hover,
.services-carousel__prev:focus-visible, .services-carousel__next:focus-visible {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

@media (max-width: 1000px) {
	.services-carousel__track { grid-template-columns: repeat(2, 1fr); }
	.services-carousel__track.is-carousel > .services-carousel__slide { flex-basis: calc(100% / 2); }
}
@media (max-width: 720px) {
	.services-carousel__track { grid-template-columns: 1fr; }
	.services-carousel__track.is-carousel > .services-carousel__slide { flex-basis: 100%; }
	.service-card { aspect-ratio: 5 / 4; }
}


/* ==========================================================================
   Homepage services showcase — hover-expand image accordion, reproducing
   almeh-rab.com's homepage product slider natively in CSS: within the
   active page every item sits at equal width at rest; hovering — or
   focusing, for keyboard users — grows that item and reveals its
   title/excerpt/Learn More button, while its siblings shrink back to
   plain photo strips. Shows 6 services as two pages of 3
   (template-parts/sections/services-showcase.php), with left/right
   buttons sliding the whole page over to the next 3 and looping
   continuously in either direction — see assets/js/services-accordion.js.
   ========================================================================== */

.services-accordion-wrap { position: relative; margin-top: 40px; }

.services-accordion-viewport { overflow: hidden; }
.services-accordion {
	display: flex;
	transition: transform var(--duration-base) var(--ease-standard);
}
.services-accordion-page {
	display: flex;
	align-items: stretch;
	/* flex-basis needs to be auto, not a percentage, so the explicit pixel
	   width services-accordion.js sets on each slide actually wins —
	   flex-basis, when it isn't auto, overrides width outright. Without JS
	   this still renders at full viewport width via the width: 100%
	   fallback below. */
	flex: 0 0 auto;
	width: 100%;
	height: 460px;
	gap: 6px;
}
.services-accordion__item {
	position: relative;
	display: block;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--radius-card);
	transition: flex var(--duration-base) var(--ease-standard);
	text-decoration: none;
}
.services-accordion__item img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Stacked in DOM order after the overlay text (::after generated content
   is always painted last), so it needs an explicit z-index to sit
   BETWEEN the photo and the caption rather than on top of everything. */
.services-accordion__item::after {
	content: "";
	position: absolute; inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(20, 29, 48, 0.94) 0%, rgba(20, 29, 48, 0.7) 42%, rgba(20, 29, 48, 0.25) 72%, rgba(20, 29, 48, 0) 100%);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-standard);
}
.services-accordion__overlay {
	position: absolute;
	z-index: 2;
	left: 24px; right: 24px; bottom: 22px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
	white-space: normal;
	text-align: left;
}
.services-accordion__title {
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-lg);
	line-height: 1.2;
}
.services-accordion__tagline {
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--text-sm);
	max-width: 32ch;
}
.services-accordion__overlay .btn--sm { padding: 10px 20px; font-size: var(--text-xs); }
.services-accordion__item:hover,
.services-accordion__item:focus-visible {
	flex: 3.4;
}
.services-accordion__item:hover::after,
.services-accordion__item:focus-visible::after,
.services-accordion__item:hover .services-accordion__overlay,
.services-accordion__item:focus-visible .services-accordion__overlay {
	opacity: 1;
	transform: translateY(0);
}
/* .is-featured marks whichever item should read expanded at rest —
   server-rendered onto the very first item of the very first page as a
   sane no-JS default, then reassigned by services-accordion.js to lead
   whichever page is currently in view. Scoped per .services-accordion-page
   (rather than the whole track) so hovering an item on the active page
   never reaches into an off-screen one. */
.services-accordion-page .services-accordion__item.is-featured { flex: 3.4; }
.services-accordion-page .services-accordion__item.is-featured::after,
.services-accordion-page .services-accordion__item.is-featured .services-accordion__overlay {
	opacity: 1;
	transform: translateY(0);
}
.services-accordion-page:hover .services-accordion__item.is-featured:not(:hover):not(:focus-visible) {
	flex: 1;
}
.services-accordion-page:hover .services-accordion__item.is-featured:not(:hover):not(:focus-visible)::after,
.services-accordion-page:hover .services-accordion__item.is-featured:not(:hover):not(:focus-visible) .services-accordion__overlay {
	opacity: 0;
	transform: translateY(10px);
}

/* ---------- Services showcase: pager nav ---------- */
.services-accordion-nav {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 18px;
}
.services-accordion-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-ink);
	cursor: pointer;
	transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.services-accordion-nav__btn svg { width: 20px; height: 20px; }
.services-accordion-nav__btn:hover:not(:disabled),
.services-accordion-nav__btn:focus-visible {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}
.services-accordion-nav__btn:active:not(:disabled) { transform: scale(0.93); }
.services-accordion-nav__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.services-accordion-nav__btn:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 900px) {
	.services-accordion-nav { display: none; }
}

@media (max-width: 900px) {
	/* No sliding below tablet width — there's no reliable hover to page
	   through with, so every service just stacks in one long list instead
	   (services-accordion.js turns paging off at this same breakpoint).
	   display: contents removes the page wrapper from the box tree
	   entirely, so its items become direct children of .services-accordion
	   and the stacked-column rules below apply exactly as they did before
	   pages existed.
	   Each item switches from "photo with an absolutely-positioned,
	   fixed-height caption overlay" to a plain in-flow layout instead: a
	   static 220px photo followed by a solid caption block sized by its
	   own content, so the title/excerpt/button can never get clipped no
	   matter how long the copy runs. */
	.services-accordion-viewport { overflow: visible; }
	.services-accordion {
		flex-direction: column;
		height: auto;
		transform: none !important;
		gap: 16px;
	}
	.services-accordion-page { display: contents; }
	.services-accordion__item,
	.services-accordion__item:first-child,
	.services-accordion-page .services-accordion__item.is-featured {
		flex: none;
		height: auto;
		display: flex;
		flex-direction: column;
	}
	.services-accordion__item img {
		position: static;
		height: 220px;
	}
	.services-accordion__item::after,
	.services-accordion__item:first-child::after {
		display: none;
	}
	.services-accordion__item .services-accordion__overlay,
	.services-accordion__item:first-child .services-accordion__overlay {
		position: static;
		opacity: 1;
		transform: none;
		background: var(--color-navy-700);
		padding: 20px 24px;
	}
	.services-accordion__tagline {
		max-width: none;
	}
}


/* ==========================================================================
   404 error page – big numeral, friendly copy, a centred search box, two
   primary actions and a row of popular-page links so a lost visitor has
   somewhere useful to go. Sits below the shared .hero-breadcrumb band.
   ========================================================================== */

.not-found { padding-block: var(--section-spacing); }
.not-found__panel { max-width: 620px; margin-inline: auto; text-align: center; }
.not-found__code {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(72px, 14vw, 148px);
	line-height: 1;
	margin: 0;
	color: var(--color-accent);
	letter-spacing: -0.02em;
}
.not-found__panel h2 { margin-top: 4px; }
.not-found__lede { color: var(--color-muted); font-size: var(--text-lg); max-width: 46ch; margin: 12px auto 0; }

.not-found__search { max-width: 420px; margin: 28px auto 0; }
.not-found__search .search-form { margin: 0; }

.not-found__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 24px; }

.not-found__links-wrap { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.not-found__links-label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted);
	font-weight: 600;
	margin-bottom: 14px;
}
.not-found__links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	padding: 0;
	margin: 0;
}
.not-found__links a { font-weight: 600; }

@media (max-width: 560px) {
	.not-found__actions { flex-direction: column; align-items: stretch; }
	.not-found__actions .btn { justify-content: center; }
}


/* Team: co-founder feature cards (two columns above the regular grid) */
.team-founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 40px; text-align: left; }
.founder-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.founder-card__media { display: block; overflow: hidden; }
.founder-card__media img { display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: center 18%; transition: transform var(--duration-base) var(--ease-standard); }
.founder-card:hover .founder-card__media img { transform: scale(1.03); }
.founder-card__body { display: flex; flex-direction: column; flex: 1; padding: 28px 32px 32px; }
.founder-card__body h3 { font-size: var(--text-2xl); margin: 6px 0 4px; }
.founder-card__body h3 a,
.team-card h3 a { color: inherit; text-decoration: none; }
.founder-card__body h3 a:hover,
.team-card h3 a:hover { color: var(--color-accent-600); }
.founder-card__bio { color: var(--color-ink-soft); margin: 14px 0 24px; }
.founder-card__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: auto; }
.team-card__linkedin { font-weight: 600; font-size: var(--text-sm); color: var(--color-navy); }
.team-card__linkedin::after { content: " \2197"; }
.team-founders + .team-grid { margin-top: 56px; }
.team-card h3 { margin: 0 0 4px; }

/* Team member profile page */
.team-profile { padding-block: var(--section-spacing); }
.team-profile__layout { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 64px; align-items: start; }
.team-profile__card { position: sticky; top: 120px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.team-profile__card img { display: block; width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; object-position: center 18%; }
.team-profile__card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 24px 28px 28px; }
.team-profile__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-ink); margin: 0; }
.team-profile__card .team-card__credentials { margin-bottom: 8px; }
.team-profile__cta { margin-top: 16px; }
.team-profile__bio { max-width: 760px; }
.team-profile__bio > :first-child { margin-top: 0; }
.team-profile__others { padding-bottom: 0; }

@media (max-width: 960px) {
	.team-profile__layout { grid-template-columns: 1fr; gap: 40px; }
	.team-profile__card { position: static; max-width: 460px; }
}
@media (max-width: 860px) {
	.team-founders { grid-template-columns: 1fr; gap: 24px; }
	.founder-card__body { padding: 24px; }
	.team-profile { padding-block: var(--section-spacing-mobile); }
}

/* Team page intro (page content above the team grid) */
.page-team > .prose { padding-block: 88px 0; }
.team-intro { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.team-intro__lead h2 { margin: 14px 0 0; font-size: var(--text-4xl); line-height: 1.15; }
.team-intro__text p { color: var(--color-ink-soft); margin-top: 0; }
.team-intro__text p:last-child { margin-bottom: 0; }
.team-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.team-highlight { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 28px 30px; }
.team-highlight p { margin: 0; }
.team-highlight__value { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-navy); }
.team-highlight__label { margin-top: 8px !important; font-size: var(--text-sm); color: var(--color-muted); }
.page-team .team-grid-section { padding-top: 88px; }

/* Keep founder portraits from growing too tall on wide screens */
.founder-card__media img { max-height: 520px; }

@media (max-width: 960px) {
	.team-intro { grid-template-columns: 1fr; gap: 20px; }
	.team-intro__lead h2 { font-size: var(--text-3xl); }
	.team-highlights { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
}
@media (max-width: 860px) {
	.page-team > .prose { padding-block: 48px 0; }
	.page-team .team-grid-section { padding-top: 56px; }
}