/* ═══════════════════════════════════════════════════════════════
   OFFERING DETAIL PAGE — offering-single.css
   single-offering.php — `offering` CPT (body.offering-single-page).
   Everything is namespaced .ofs-* so nothing leaks into the
   Offerings listing (offerings.css) or other marketing pages.
   Desktop values are taken from the 1920px design and scale down
   fluidly with clamp(); layout breakpoints: 1199 / 991 / 767 / 479.
═══════════════════════════════════════════════════════════════ */

.offering-single-page {
	--ofs-bg: #131313;
	--ofs-bg-alt: #0f0f0f;
	--ofs-surface: #1b1b1b;
	--ofs-text: #f0f0e5;
	--ofs-dim: rgba(240, 240, 229, 0.5);
	--ofs-border: rgba(240, 240, 229, 0.1);
	--ofs-border-strong: rgba(240, 240, 229, 0.22);
	--ofs-accent: #a47764;
	--ofs-ink: #131313;
	--ofs-radius: 24px;
	--ofs-ease: cubic-bezier(0.22, 1, 0.36, 1);
	/* Side gutter. 7.8vw (≈150px at 1920), not 8.33vw (160px): vw includes
	   the vertical scrollbar, so with a ~15px scrollbar a 1920 window only
	   has ~1905px of page — 160px gutters left ~1585px of content instead of
	   the design's 1600. At 7.8vw the container reaches its 1600px cap
	   with or without a scrollbar. */
	--ofs-gutter: clamp(20px, 7.8vw, 160px);
	/* Section padding (top/bottom): 160px at 1920. */
	--ofs-section-y: clamp(80px, 8.33vw, 160px);
	/* Spacing scale — flex/grid gaps, not margins, own all sibling spacing. */
	--ofs-gap-head: clamp(48px, 4.2vw, 80px);   /* section header → content */
	--ofs-gap-stack: clamp(24px, 1.875vw, 36px); /* stacked text blocks */
	--ofs-gap-card: clamp(16px, 1.25vw, 24px);  /* grid of cards */
	--ofs-font-heading: 'Lenia Sans', var(--font-heading, sans-serif);
	--ofs-font-body: 'Archivo', var(--font-main, sans-serif);

	background: var(--ofs-bg);
}

.ofs-page {
	background: var(--ofs-bg);
	color: var(--ofs-text);
	font-family: var(--ofs-font-body);
}

/* Content width set directly — 1600px exactly once there's room, else the
   page width minus a gutter each side — and centred. Not max-width
   (1600 + 2 × gutter) with the gutter as padding: the browser rounds each
   length to 1/64px, so the two gutters didn't cancel exactly and the
   content measured 1600.02px. Here the capped width is a literal 1600px. */
.ofs-container {
	width: min(1600px, calc(100% - (var(--ofs-gutter) * 2)));
	margin-inline: auto;
}

/* In-page anchors (#ofs-work; the contact section has its own) clear the fixed nav bar. */
.ofs-page [id] {
	scroll-margin-top: var(--anchor-under-nav-offset, 88px);
}

/* ─── SHARED TYPE ─────────────────────────────────────────────── */

.ofs-eyebrow {
	color: var(--ofs-accent);
	font-family: var(--ofs-font-heading);
	font-size: clamp(13px, 0.83vw, 16px);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ofs-heading,
.ofs-hero__title {
	color: var(--ofs-text);
	font-family: var(--ofs-font-heading);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.08;
}

.ofs-heading {
	font-size: clamp(34px, 3.33vw, 64px);
}

.ofs-heading__line,
.ofs-heading__accent {
	display: block;
}

.ofs-heading__accent {
	max-width: 860px;
	color: var(--ofs-accent);
	font-style: italic;
}

/* Centred headings: a flex column keeps the 860px-capped accent line
   centred under the first line without auto margins. */
.ofs-hero__title,
.ofs-cta__title {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ofs-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid var(--ofs-border-strong);
	border-radius: 999px;
	color: var(--ofs-text);
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
}

.ofs-pill--accent {
	border-color: rgba(164, 119, 100, 0.7);
	color: var(--ofs-accent);
}

/* Split header: eyebrow + heading left, intro paragraph bottom-right. */
.ofs-section-head {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: end;
	gap: 48px clamp(40px, 6vw, 120px);
}

.ofs-section-head__main {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ofs-section-head__intro {
	max-width: 560px;
	color: var(--ofs-text);
	font-size: clamp(16px, 1.04vw, 20px);
	line-height: 1.7;
}

.ofs-section {
	padding-block: var(--ofs-section-y);
}

/* Section header and content sit as direct children of the container;
   the gap between them lives here, once, instead of a margin on each header. */
.ofs-section > .ofs-container {
	display: flex;
	flex-direction: column;
	gap: var(--ofs-gap-head);
}

/* Generic dark card (why / deliver / audiences). */
.ofs-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: clamp(28px, 2.2vw, 40px);
	border: 1px solid var(--ofs-border);
	border-radius: var(--ofs-radius);
	background: var(--ofs-surface);
	transition: border-color 0.4s var(--ofs-ease), transform 0.4s var(--ofs-ease);
}

.ofs-card:hover {
	border-color: rgba(164, 119, 100, 0.45);
	transform: translateY(-4px);
}

.ofs-card__title {
	color: var(--ofs-text);
	font-family: var(--ofs-font-heading);
	font-size: clamp(22px, 1.7vw, 32px);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.ofs-card__desc {
	color: var(--ofs-text);
	font-size: clamp(15px, 0.95vw, 18px);
	line-height: 1.65;
}

/* Buttons are the shared viitorx_button() component as-is (size, type and
   fill-sweep live in marketing-shared.css). Colors are set here through the
   component's own custom properties — never inline from the template.
   .ofs-btn            copper → cream fill (dark backgrounds)
   .ofs-btn--outline   transparent + cream border → cream fill
   .ofs-btn--on-light  copper → ink fill (white case-study band) */
.ofs-btn {
	--btn-bg: var(--ofs-accent);
	--btn-text: #ffffff;
	--btn-bg-hover: var(--ofs-text);
	--btn-text-hover: var(--ofs-ink);
}

/* The outline variant only adds the border the component lacks — a real
   border, not an inset box-shadow, because the component's own :hover
   box-shadow would otherwise replace it (same as the 404 secondary button). */
.ofs-btn.ofs-btn--outline {
	--btn-bg: transparent;
	--btn-text: var(--ofs-text);
	border: 1px solid var(--ofs-text);
}

.ofs-btn.ofs-btn--on-light {
	--btn-bg-hover: var(--ofs-ink);
	--btn-text-hover: #ffffff;
}


/* ─── COPPER GLOW (hero + mid-page CTA) ─────────────────────────
   Design spec: 900×360 ellipse, #A47764, opacity 0.6, Figma blur 220.
   Figma's "background blur" is a backdrop effect; the visible soft blob
   it produces is recreated here by blurring the shape itself (filter),
   which is also far cheaper to paint than backdrop-filter. Width and
   blur scale together on narrower screens so the glow keeps its shape
   instead of a 220px blur dissolving a small ellipse entirely. */
.ofs-hero__glow,
.ofs-cta__glow {
	--ofs-glow-w: min(900px, 80vw);
	border-radius: 50%;
	background: var(--Primary, #a47764);
	opacity: 0.6;
	/* Figma's blur value ≈ 2× the CSS blur() radius for the same look, so
	   Figma 220 → CSS 110px. Passing 220 straight through spreads the glow
	   twice as wide as the design. */
	filter: blur(clamp(45px, 5.73vw, 110px));
	pointer-events: none;
	/* Promote to its own layer — a large blur repaints poorly otherwise. */
	will-change: transform;
}

/* ─── HERO ────────────────────────────────────────────────────── */

.ofs-hero {
	position: relative;
	overflow: hidden;
	padding-top: clamp(140px, 10.4vw, 200px);
	/* Image → stats gap: 120px at 1920. */
	padding-bottom: clamp(64px, 6.25vw, 120px);
	/* Content → image gap (64px at 1920). The wordmark and glow are
	   absolutely positioned, so they take no part in the gap. */
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 3.33vw, 64px);
	text-align: center;
}

.ofs-hero__glow {
	position: absolute;
	/* Centred behind the H1 (breadcrumb sits above it). */
	top: clamp(110px, 8.4vw, 160px);
	left: 50%;
	width: var(--ofs-glow-w);
	height: auto;
	aspect-ratio: 900 / 360;
	transform: translateX(-50%);
}

.ofs-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ofs-gap-stack);
}

.ofs-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	color: var(--ofs-text);
	font-size: clamp(13px, 0.85vw, 16px);
}

.ofs-breadcrumb a {
	color: var(--ofs-text);
	text-decoration: none;
	transition: color 0.25s;
}

.ofs-breadcrumb a:hover,
.ofs-breadcrumb a:focus-visible {
	color: var(--ofs-accent);
}

.ofs-breadcrumb__sep {
	color: var(--ofs-dim);
}

.ofs-hero__title {
	font-size: clamp(44px, 5.9vw, 112px);
	line-height: 1.02;
}

.ofs-hero__desc {
	max-width: 1280px;
	color: var(--ofs-text);
	font-size: clamp(16px, 1.25vw, 24px);
	line-height: 1.6;
}

.ofs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.ofs-hero__media {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: var(--ofs-radius);
	background: var(--ofs-bg-alt);
	aspect-ratio: 1600 / 760;
}

.ofs-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ─── STATS ───────────────────────────────────────────────────── */

.ofs-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	/* 56px top/bottom at 1920; no inline padding, so the first stat sits
	   flush with the divider lines' left edge (per design). */
	padding-block: clamp(36px, 2.92vw, 56px);
	border-block: 1px solid var(--ofs-border);
}

.ofs-stat {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Two-class selectors on purpose: .stat-count-display (the hook
   section-reveal.js counts into) also has a global rule in front-page.css —
   cream, 40px, weight 700 — which loads after this file and would win at
   equal specificity. */
.ofs-stat .ofs-stat__value {
	margin: 0;
	color: var(--ofs-accent);
	font-family: var(--ofs-font-heading);
	font-size: clamp(44px, 3.75vw, 72px);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	line-height: 1;
}

.ofs-stat .ofs-stat__label {
	margin: 0;
	color: var(--ofs-text);
	font-size: clamp(14px, 0.95vw, 18px);
}

/* ─── WHY ─────────────────────────────────────────────────────── */

/* 160px top/bottom at 1920. */
.ofs-why {
	padding-block: clamp(80px, 8.33vw, 160px);
}

.ofs-why__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ofs-gap-card);
}

/* Card spec (1920): 40px padding, 20px gap, 24px radius, 1px border,
   #1B1B1B fill — count 20px, title 32px, description 18px. */
.ofs-why__card {
	gap: 20px;
	padding: clamp(28px, 2.08vw, 40px);
	border-width: 1px;
	border-radius: 24px;
	background: #1b1b1b;
}

.ofs-why__num {
	color: var(--ofs-accent);
	font-size: clamp(16px, 1.04vw, 20px);
	line-height: 1.2;
}

.ofs-why__card .ofs-card__title {
	font-size: clamp(24px, 1.67vw, 32px);
}

.ofs-why__card .ofs-card__desc {
	font-size: clamp(16px, 0.94vw, 18px);
}

/* ─── WHAT WE DELIVER ─────────────────────────────────────────── */

/* 160px top/bottom at 1920, #0E0E0E band. */
.ofs-deliver {
	padding-block: clamp(80px, 8.33vw, 160px);
	background: #0e0e0e;
}

.ofs-deliver__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ofs-gap-card);
	align-items: stretch;
}

/* Card spec (1920): 48px / 40px padding, 28px gap between count row,
   title and bullets, 24px radius, 1px border, #171717 fill. */
.ofs-deliver__card {
	gap: clamp(20px, 1.46vw, 28px);
	padding: clamp(32px, 2.5vw, 48px) clamp(28px, 2.08vw, 40px);
	border-width: 1px;
	border-radius: 24px;
	background: #171717;
}

.ofs-deliver__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ofs-deliver__num {
	color: var(--ofs-accent);
	font-family: var(--ofs-font-heading);
	font-size: clamp(40px, 2.9vw, 56px);
	font-weight: 700;
	line-height: 1;
}

.ofs-deliver__card .ofs-deliver__title {
	/* Title → divider spacing matches the card's own 28px gap. */
	padding-bottom: clamp(20px, 1.46vw, 28px);
	border-bottom: 1px solid var(--ofs-border-strong);
	font-size: clamp(24px, 1.77vw, 34px);
}

.ofs-deliver__list {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 0.94vw, 18px);
	list-style: none;
}

.ofs-deliver__list li {
	position: relative;
	padding-left: 22px;
	color: var(--ofs-text);
	font-size: clamp(16px, 1.04vw, 20px);
	line-height: 1.5;
}

.ofs-deliver__list li::before {
	content: '';
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ofs-accent);
}

/* ─── TOOLKIT ─────────────────────────────────────────────────── */

/* 160px top/bottom at 1920. */
/* No top padding: the mid-page CTA above shares this #131313 band and its
   bottom padding is the whole gap. */
.ofs-toolkit {
	padding-block: 0 clamp(80px, 8.33vw, 160px);
}

/* Header → rows gap is 72px here (other sections use the shared 80px). */
.ofs-toolkit > .ofs-container {
	gap: clamp(40px, 3.75vw, 72px);
}

.ofs-toolkit__list {
	border-top: 1px solid var(--ofs-border);
	list-style: none;
}

.ofs-toolkit__row {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	/* 42px top/bottom at 1920. */
	padding-block: clamp(24px, 2.19vw, 42px);
	border-bottom: 1px solid var(--ofs-border);
	transition: background 0.4s var(--ofs-ease);
}

.ofs-toolkit__num {
	color: var(--ofs-accent);
	font-size: clamp(16px, 1.04vw, 20px);
}

.ofs-toolkit__title {
	color: var(--ofs-text);
	font-family: var(--ofs-font-heading);
	font-size: clamp(24px, 2.08vw, 40px);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	transition: color 0.3s, transform 0.4s var(--ofs-ease);
}

.ofs-toolkit__row:hover .ofs-toolkit__title {
	color: var(--ofs-accent);
	transform: translateX(8px);
}

.ofs-toolkit__desc {
	max-width: 660px;
	color: var(--ofs-text);
	font-size: clamp(16px, 1.04vw, 20px);
	line-height: 1.6;
}

/* Two classes so the 15px here beats the shared .ofs-pill (14px). */
.ofs-pill.ofs-toolkit__tag {
	justify-self: end;
	font-size: clamp(13px, 0.78vw, 15px);
}

/* ─── MID-PAGE CTA ────────────────────────────────────────────── */

/* Sits between What We Deliver (#0e0e0e band) and the Toolkit. Keeps the
   shared .ofs-section padding top and bottom; the Toolkit below shares this
   #131313 band, so it drops its own top padding instead (see .ofs-toolkit)
   — otherwise the two would stack to a 320px+ gap. */

.ofs-cta__card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Card spec (1920): 112px / 120px padding, 28px gap, 32px radius, 1px border. */
	gap: clamp(20px, 1.46vw, 28px);
	padding: clamp(56px, 5.83vw, 112px) clamp(24px, 6.25vw, 120px);
	border: 1px solid rgba(164, 119, 100, 0.6);
	border-radius: 32px;
	background: var(--ofs-surface);
	text-align: center;
}

/* CTA glow spec: 820×300 ellipse, opacity 0.75, Figma blur 200 — overrides
   the shared hero values above. Same filter-not-backdrop reasoning. */
.ofs-cta__card .ofs-cta__glow {
	/* 820px at 1920, shrinking proportionally with the viewport (down to
	   260px on phones). Height, top offset and blur all derive from this /
	   scale with vw, so the whole glow shrinks together with the card —
	   min(820px, 80vw) only started shrinking below ~1025px. */
	--ofs-glow-w: clamp(260px, 42.7vw, 820px);
	position: absolute;
	/* Per design: ellipse top ~120px above the card edge (centre ~30px
	   inside), so most of it is clipped and only a soft cap glows in. */
	top: calc(var(--ofs-glow-w) * -0.146);
	left: 50%;
	width: var(--ofs-glow-w);
	height: auto;
	aspect-ratio: 820 / 300;
	opacity: 0.75;
	/* Figma 200 → CSS 100px (see the shared glow note above). */
	filter: blur(clamp(40px, 5.2vw, 100px));
	transform: translateX(-50%);
}

.ofs-cta__card > *:not(.ofs-cta__glow) {
	position: relative;
}

.ofs-cta__pill {
	padding: 8px 18px;
	border: 1px solid var(--ofs-text);
	border-radius: 999px;
	color: var(--ofs-text);
	font-size: clamp(12px, 0.73vw, 14px);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ofs-cta__desc {
	max-width: 800px;
	color: var(--ofs-text);
	font-size: clamp(17px, 1.15vw, 22px);
	line-height: 1.65;
}

/* Title 72px bold (the shared .ofs-heading is 64px / 600). */
.ofs-cta__card .ofs-cta__title {
	font-size: clamp(36px, 3.75vw, 72px);
	font-weight: 700;
}

/* Larger CTA button: 20px text, 22px / 44px padding. Two-class selectors
   because marketing-shared.css (.viitorx-btn) loads after this file. */
.ofs-cta__card .viitorx-btn {
	padding: clamp(16px, 1.15vw, 22px) clamp(32px, 2.29vw, 44px);
}

.ofs-cta__card .viitorx-btn__text {
	font-size: clamp(16px, 1.04vw, 20px);
	/* Regular weight here only — the shared component is 600. */
	font-weight: 400;
}

.ofs-cta__note {
	color: var(--ofs-dim);
	font-size: 15px;
}

/* ─── CASE STUDIES (light band) ───────────────────────────────── */

.ofs-work {
	/* 160px top/bottom at 1920. */
	padding-block: clamp(80px, 8.33vw, 160px);
	background: #ffffff;
	color: var(--ofs-ink);
	overflow: hidden;
	/* header → carousel → View More: 64px at 1920. */
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 3.33vw, 64px);
}

.ofs-work__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.ofs-work__intro {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ofs-work__title {
	color: var(--ofs-ink);
	font-family: var(--ofs-font-heading);
	font-size: clamp(40px, 4.58vw, 88px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.ofs-work__sub {
	color: var(--ofs-accent);
	font-size: clamp(17px, 1.15vw, 22px);
	line-height: 1.5;
}

.ofs-work__nav {
	display: flex;
	flex: none;
	gap: clamp(10px, 0.83vw, 16px);
}

.ofs-work__nav[hidden] {
	display: none;
}

.ofs-work__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 68px circle at 1920, scaling down to 40px on phones (icon and gap
	   scale with it — see .ofs-work__arrow svg / .ofs-work__nav). */
	width: clamp(40px, 3.54vw, 68px);
	height: clamp(40px, 3.54vw, 68px);
	border: 1px solid var(--ofs-ink);
	border-radius: 50%;
	background: transparent;
	color: var(--ofs-ink);
	cursor: pointer;
	/* border-color transitions with the fill — it used to snap instantly,
	   briefly showing a copper fill inside an ink ring (or the reverse). */
	transition: background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s, transform 0.3s var(--ofs-ease);
}

.ofs-work__arrow svg {
	width: clamp(16px, 1.15vw, 22px);
	height: clamp(16px, 1.15vw, 22px);
}

/* Fill follows state, not side: a clickable arrow is filled ink, a disabled
   one stays an outline (faded, below). At the start of the carousel that
   gives the design's look — previous outlined, next filled — and it flips
   correctly at the end, instead of "next" staying black even when there's
   nowhere left to go. js/offering-single.js keeps `disabled` in sync on scroll. */
.ofs-work__arrow:not(:disabled) {
	background: var(--ofs-ink);
	color: #ffffff;
}

/* One interaction state for both arrows: copper. Previously "prev" went ink
   and "next" went copper on hover, so the same action showed two colours.
   Keyboard focus always gets it; pointer hover only on devices that really
   hover, so a tap on a touch screen doesn't leave the arrow stuck copper. */
.ofs-work__arrow:focus-visible {
	border-color: var(--ofs-accent);
	background: var(--ofs-accent);
	color: #ffffff;
}

@media (hover: hover) {
	.ofs-work__arrow:hover {
		border-color: var(--ofs-accent);
		background: var(--ofs-accent);
		color: #ffffff;
	}
}

.ofs-work__arrow:disabled {
	background: transparent;
	color: var(--ofs-ink);
	opacity: 0.3;
	pointer-events: none;
}

/* Native scroll-snap track: swipe/trackpad/keyboard work without JS;
   js/offering-single.js only wires the arrow buttons. The track starts
   aligned with the container and bleeds off the right edge. */
.ofs-work__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* Same left inset as .ofs-work__track so snapped cards line up with the container. */
	/* 100% (the page width beside the scrollbar), not 100vw — keeps the
	   carousel's left edge aligned with the 1600px container above. */
	scroll-padding-inline: max(var(--ofs-gutter), calc((100% - 1600px) / 2)) var(--ofs-gutter);
	scrollbar-width: none;
	outline: none;
}

.ofs-work__viewport::-webkit-scrollbar {
	display: none;
}

.ofs-work__viewport:focus-visible {
	outline: 2px solid var(--ofs-accent);
	outline-offset: -2px;
}

.ofs-work__track {
	display: flex;
	gap: 32px;
	width: max-content;
	padding-inline: max(var(--ofs-gutter), calc((100% - 1600px) / 2)) var(--ofs-gutter);
	/* Room for the Read More hover underline (absolutely placed 2px below
	   its label): the viewport is a scroll container, which clips anything
	   past its edge — so on the tallest cards, whose Read More sits right at
	   the bottom, the underline was cut off. */
	padding-bottom: 8px;
	list-style: none;
}

.ofs-work__slide {
	/* flex so the card fills the slide — the track already stretches every
	   slide to the tallest card's height. */
	display: flex;
	flex: none;
	width: clamp(280px, 37.5vw, 720px);
	scroll-snap-align: start;
}

/* Card: image → body, 28px at 1920. */
.ofs-work-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: clamp(20px, 1.46vw, 28px);
	color: inherit;
	text-decoration: none;
}

/* Body: logo → title → description → Read More, 18px apart. Items
   shrink-wrap (flex-start) so the Read More underline is only as wide as its label. */
.ofs-work-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(14px, 0.94vw, 18px);
}

/* Image spec: 720×450, 22px radius. */
.ofs-work-card__media {
	overflow: hidden;
	border-radius: 22px;
	background: #e9e6e1;
	aspect-ratio: 720 / 450;
}

.ofs-work-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ofs-ease);
}

.ofs-work-card:hover .ofs-work-card__img {
	transform: scale(1.04);
}

/* 56px tall / up to 160px wide at 1920, scaling down with the viewport
   (36px / 110px on phones) to stay in proportion with the card. */
.ofs-work-card__logo {
	width: auto;
	max-width: clamp(110px, 8.33vw, 160px);
	height: clamp(36px, 2.92vw, 56px);
	object-fit: contain;
	object-position: left center;
}

.ofs-work-card__title {
	color: var(--ofs-ink);
	font-family: var(--ofs-font-heading);
	font-size: clamp(24px, 1.875vw, 36px);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

/* The description grows to fill the card's spare height, which pins
   Read More to the same baseline on every card. Besides lining the CTAs up
   across the carousel, this keeps their 2px hover underline identical: when
   cards had different description lengths, each Read More sat at a different
   offset, and under fractional display scaling (e.g. 125%) that landed some
   underlines between device pixels, rendering them thinner than others. */
.ofs-work-card__desc {
	flex: 1 0 auto;
	max-width: 600px;
	color: #555555;
	font-size: clamp(16px, 0.94vw, 18px);
	line-height: 1.7;
}

/* Underline + arrow on card hover come from the shared component
   (.viitorx-link-trigger on the card, marketing-shared.css). Only the hover
   color is set here — same darker copper as the homepage work cards, which
   sit on the same white background. */
.ofs-work-card:hover .ofs-work-card__more,
.ofs-work-card:focus-visible .ofs-work-card__more {
	color: #8b6355;
}

/* ─── WHO IT IS FOR ───────────────────────────────────────────── */
/* No dedicated spec — follows the page's established system: 160px
   section padding and #0E0E0E band (as What We Deliver), 72px header →
   grid gap (as the Toolkit), and the Why card treatment (#1B1B1B, 24px
   radius, 1px border, 40px padding). Title/description/tag sizes follow
   the design frame for this narrower 4-up card. */

.ofs-aud {
	padding-block: clamp(80px, 8.33vw, 160px);
	background: #0e0e0e;
}

.ofs-aud > .ofs-container {
	gap: clamp(40px, 3.75vw, 72px);
}

.ofs-aud__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ofs-gap-card);
}

/* Title → description → tags, 20px apart (same rhythm as the Why cards). */
.ofs-aud__card {
	gap: 20px;
	padding: clamp(28px, 2.08vw, 40px);
	border-width: 1px;
	border-radius: 24px;
	background: #1b1b1b;
}

.ofs-aud__card .ofs-aud__title {
	font-size: clamp(22px, 1.46vw, 28px);
}

.ofs-aud__card .ofs-card__desc {
	font-size: clamp(16px, 0.94vw, 18px);
}

.ofs-aud__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
}

/* Same size as the shared .ofs-pill (14px, 6px / 14px), filled instead of outlined. */
.ofs-aud__tag {
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(240, 240, 229, 0.07);
	color: var(--ofs-text);
	font-size: 14px;
	line-height: 1.4;
}

/* ─── FAQ ─────────────────────────────────────────────────────── */

/* 160px top/bottom at 1920 (page system), on the base #131313 band so it
   alternates with the #0E0E0E audience section above. */
.ofs-faq {
	padding-block: clamp(80px, 8.33vw, 160px);
	background: var(--ofs-bg);
}


/* Two classes so this beats the generic `.ofs-section > .ofs-container`
   flex stack — the FAQ container is a two-column grid instead. */
.ofs-faq .ofs-faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	gap: 48px clamp(40px, 5vw, 100px);
	align-items: start;
}

/* Heading column stays pinned while the questions scroll past. Needs the
   grid's align-items: start (above) so the column isn't stretched to the
   list's height; top clears the fixed nav bar. */
.ofs-faq__head {
	position: sticky;
	top: calc(var(--nav-bar-outer-height, 80px) + 40px);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ofs-faq__list {
	border-top: 1px solid var(--ofs-border);
}

.ofs-faq__item {
	border-bottom: 1px solid var(--ofs-border);
}

.ofs-faq__q {
	margin: 0;
	font-size: inherit;
}

.ofs-faq__btn {
	display: flex;
	/* Icon pinned to the question's FIRST line (see .ofs-faq__icon margin),
	   not centred on the whole block — centring dropped it to the middle of
	   2-3 line questions on mobile, so icons sat at different heights. */
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding-block: 32px;
	border: 0;
	background: none;
	color: var(--ofs-text);
	font-family: var(--ofs-font-heading);
	/* Question: 26px at 1920. */
	font-size: clamp(18px, 1.35vw, 26px);
	font-weight: 400;
	line-height: 1.35;
	/* Line box rounded to an even whole pixel (26 × 1.35 would be 35.1px):
	   even, so centring the 16px icon lands on a whole-pixel offset. */
	line-height: round(1.35em, 2px);
	text-align: left;
	cursor: pointer;
	transition: color 0.3s;
}

.ofs-faq__btn:hover,
.ofs-faq__btn:focus-visible {
	color: var(--ofs-accent);
}

/* Plus that collapses into a minus. The bars are CSS borders, not SVG
   shapes or filled boxes: browsers round a border's WIDTH to whole device
   pixels the same way wherever it sits, so every row draws the identical
   2px bar. The previous SVG (crispEdges rects) snapped each bar's edges to
   device pixels by position, so on phones with fractional pixel ratios
   (2.625x, 2.75x…) rows rounded to different thicknesses — some plus signs
   bold, others thin. No transform at rest (only the open state scales the
   vertical bar away), so nothing is resampled/blurred while closed. */
.ofs-faq__icon {
	position: relative;
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
	/* Centres the 16px icon on the first line box. The icon inherits the
	   button's font-size, so 1.35em is that line's height; the second
	   declaration matches the button's rounded line-height where round()
	   is supported. */
	margin-top: calc((1.35em - 16px) / 2);
	margin-top: calc((round(1.35em, 2px) - 16px) / 2);
	color: var(--ofs-accent);
}

.ofs-faq__icon-h,
.ofs-faq__icon-v {
	position: absolute;
	box-sizing: border-box;
}

/* Horizontal bar: full width, 2px border at 7px (centre of the 16px box). */
.ofs-faq__icon-h {
	top: 7px;
	left: 0;
	width: 16px;
	height: 0;
	border-top: 2px solid currentColor;
}

/* Vertical bar: full height, 2px border at 7px. Hides when open, scaling
   about its own centre. */
.ofs-faq__icon-v {
	top: 0;
	left: 7px;
	width: 0;
	height: 16px;
	border-left: 2px solid currentColor;
	transform-origin: center;
	transition: transform 0.4s var(--ofs-ease);
}

.ofs-faq__item.is-open .ofs-faq__icon-v {
	transform: scaleY(0);
}

/* Collapsing only kicks in once the JS has enhanced the list
   ([data-ofs-faq].is-enhanced) — without JS every answer stays readable.
   grid-template-rows 0fr → 1fr animates to the content's natural height. */
.ofs-faq__panel {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.45s var(--ofs-ease);
}

.is-enhanced .ofs-faq__item:not(.is-open) .ofs-faq__panel {
	grid-template-rows: 0fr;
}

.ofs-faq__panel-inner {
	overflow: hidden;
}

.ofs-faq__a {
	max-width: 840px;
	padding-bottom: 32px;
	color: var(--ofs-text);
	/* Answer: 20px at 1920. */
	font-size: clamp(16px, 1.04vw, 20px);
	line-height: 1.65;
}

/* ─── CLOSING BAND ────────────────────────────────────────────── */

/* Same idea: the FAQ above is the same #131313 band, so its 160px bottom
   is the only gap. */
.ofs-close {
	padding-top: 0;
}

.ofs-close__card {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 31vw, 600px);
	/* 32px radius; the background image is clipped to it by overflow: hidden. */
	border-radius: 32px;
	background: var(--ofs-surface);
}

.ofs-close__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ofs-close__shade {
	position: absolute;
	inset: 0;
	/* Design spec. */
	background: linear-gradient(90deg, rgba(13, 13, 13, 0.92) 0%, rgba(13, 13, 13, 0.45) 100%);
}

.ofs-close__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Title → description → button: 32px at 1920. */
	gap: clamp(24px, 1.67vw, 32px);
	max-width: 1000px;
	padding: clamp(40px, 5.2vw, 100px);
}

.ofs-close__card .ofs-close__title {
	font-size: clamp(40px, 4.17vw, 80px);
}

.ofs-close__desc {
	max-width: 720px;
	color: var(--ofs-text);
	font-size: clamp(17px, 1.15vw, 22px);
	line-height: 1.65;
}

/* Closing-band button: 18px text, 20px / 36px padding. Two-class selectors
   because marketing-shared.css (.viitorx-btn) loads after this file. */
.ofs-close__card .viitorx-btn {
	padding: clamp(16px, 1.04vw, 20px) clamp(28px, 1.875vw, 36px);
}

.ofs-close__card .viitorx-btn__text {
	font-size: clamp(16px, 0.94vw, 18px);
}

/* ─── RESPONSIVE ──────────────────────────────────────────────── */

@media (max-width: 1199px) {
	.ofs-aud__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.ofs-toolkit__row {
		grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1.2fr) auto;
	}
}

@media (max-width: 991px) {
	.ofs-section-head,
	.ofs-faq .ofs-faq__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.ofs-why__grid,
	.ofs-deliver__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Stacked above the list here — nothing to stay beside. */
	.ofs-faq__head {
		position: static;
	}

	/* Number + title + tag on one line, description underneath. */
	.ofs-toolkit__row {
		grid-template-columns: 48px minmax(0, 1fr) auto;
		grid-template-areas:
			'num title tag'
			'.   desc  desc';
		gap: 12px 16px;
	}

	.ofs-toolkit__num { grid-area: num; }
	.ofs-toolkit__title { grid-area: title; }
	.ofs-toolkit__desc { grid-area: desc; }
	.ofs-toolkit__tag { grid-area: tag; }
}

@media (max-width: 767px) {
	/* 1600/760 would leave a ~170px-tall strip on phones — taller crop here. */
	.ofs-hero__media {
		aspect-ratio: 4 / 3;
	}

	.ofs-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 40px;
	}

	.ofs-aud__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ofs-hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 360px;
	}

	.ofs-work__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.ofs-work__slide {
		width: min(82vw, 420px);
	}

	.ofs-work__track {
		gap: 20px;
	}

	.ofs-faq__btn {
		padding-block: 24px;
	}

	.ofs-faq__a {
		padding-bottom: 24px;
	}

	.ofs-close__shade {
		/* Same stops as the design, turned vertical: on phones the text spans
		   the full width, so a left-to-right fade would leave its right half
		   on the light end. */
		background: linear-gradient(180deg, rgba(13, 13, 13, 0.45) 0%, rgba(13, 13, 13, 0.92) 100%);
	}
}

@media (max-width: 479px) {
	.ofs-toolkit__row {
		grid-template-columns: 36px minmax(0, 1fr);
		grid-template-areas:
			'num title'
			'.   desc'
			'.   tag';
	}

	.ofs-pill.ofs-toolkit__tag {
		justify-self: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ofs-card,
	.ofs-toolkit__title,
	.ofs-work-card__img,
	.ofs-faq__panel,
	.ofs-faq__icon-v {
		transition: none;
	}

	.ofs-card:hover,
	.ofs-work-card:hover .ofs-work-card__img,
	.ofs-toolkit__row:hover .ofs-toolkit__title {
		transform: none;
	}

	.ofs-work__viewport {
		scroll-behavior: auto;
	}
}