/* ============================================================
   Cubiq Horizontal Cards — premium glassmorphic card carousel
   Brand: #020b31 bg · teal/blue gradient accent · Open Sauce One
   Self-contained under .chc-section — no theme edits required.
   ============================================================ */

/* This theme sets `html, body { overflow-x: hidden }`. `overflow-x: clip`
   suppresses the horizontal scrollbar the same way without the side effects
   of `hidden` on other layout math elsewhere on the page. Loaded only on
   pages that use this module, so the blast radius stays limited. */
html, body { overflow-x: clip !important; }

.chc-section,
.chc-section *,
.chc-section *::before,
.chc-section *::after { box-sizing: border-box; }

/* ── Transparent variant ───────────────────────────────────────────────────
   The module paints nothing of its own, so the cards' backdrop-filter has real
   content to frost instead of the flat navy this section normally lays down.

   That opaque background-color was the whole blocker: the cards have always
   carried `backdrop-filter: blur(20px) saturate(150%)`, but a blur can only
   sample what is painted behind it, and the section's own navy was all there
   was. Remove it and whatever sits behind the row comes through.

   Built for the theme's Cubiq Big Text block, whose JS pins
   .big-text-heading-inner to `position: fixed` once it scrolls past. It stays
   on screen while this row scrolls over it, and because this section comes
   later in the document both are positioned with z-index auto, so the cards
   paint on top and frost the type underneath.

   The ::before edge glow goes too — it is as much "module background" as the
   fill, and leaving it would haze the very thing the cards are meant to be
   showing through.

   Doubled class on purpose: the base .chc-section rules below are a single
   class too, and they come later in the file — equal specificity, so source
   order would otherwise hand the opaque navy the win. */
.chc-section.chc-section--transparent {
	background-color: transparent;
}

.chc-section.chc-section--transparent::before {
	display: none;
}

/* Over a flat panel a 6% white tint is enough. Over live content — especially
   the big text's bright cyan — it isn't: the copy loses contrast against the
   brightest parts of whatever is behind. A deeper, navy-weighted fill and a
   wider blur keep the quote readable while still clearly showing what it sits
   on. Tuned against the big text; raise --chc-glass-tint if a busier
   background ever needs more. */
.chc-section.chc-section--transparent .chc-card {
	--chc-glass-tint: .52;
	background-color: rgba(6, 16, 54, var(--chc-glass-tint));
	-webkit-backdrop-filter: blur(30px) saturate(135%);
	        backdrop-filter: blur(30px) saturate(135%);

	/* This line is what makes the frost work at all, and it is not obvious.
	   .chc-card carries `opacity: calc(0.7 + 0.3 * var(--chc-focus))` for the
	   unfocused dim. Per the Filter Effects spec, any element with opacity < 1
	   becomes a Backdrop Root — and an element that is its own backdrop root has
	   nothing outside itself left for backdrop-filter to sample. The blur then
	   silently does nothing, and the translucent fill simply alpha-composites
	   whatever is behind straight through, sharp. "Transparent but not frosted"
	   is precisely that failure.

	   So the dim is dropped here. The focus emphasis survives it: --chc-focus
	   still drives the scale and translate below, and neither transform property
	   creates a backdrop root. It also matters less in this mode — dimming a
	   card over live content muddies what the frost is meant to be showing. */
	opacity: 1;
}

/* Scroll-driven mode gives .chc-pin-inner its own opaque navy so the pinned
   row reads as a solid panel while it holds. That is a second background in
   front of whatever is behind, and it blocks the frost just as the section's
   own fill did — so it goes too in this mode. */
.chc-section.chc-section--transparent.chc-pinned .chc-pin-inner {
	background: transparent;
}

/* The faint 46px grid overlay is module decoration as well. */
.chc-section.chc-section--transparent .chc-grid-bg {
	display: none;
}

/* A card carrying its own photograph is already opaque by design — it should
   not be turned into glass just because the section is transparent. */
.chc-section.chc-section--transparent .chc-card--has-bg {
	background-color: #0a1442;
	-webkit-backdrop-filter: none;
	        backdrop-filter: none;
}

.chc-section {
	position: relative;
	/* Brand ramp for the button below — same values as the hero and statement,
	   which is where that control comes from. */
	--c1: 20, 171, 218;
	--c2: 3, 139, 241;
	--c3: 114, 89, 191;
	background-color: #020b31;
	color: rgba(255, 255, 255, .78);
	font-family: 'Open Sauce One', 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
	padding: clamp(72px, 10vw, 140px) 0;
}

/* The section's glow lives on a layer of its own so it can be feathered out
   at the top and bottom edges. Painted straight onto the section, the glow
   anchored at 15% from the top was simply sliced off where the section began,
   which drew a hard horizontal line against whatever sat above — the seam is
   the cut, not the colour. Faded to nothing at both edges, the section now
   meets its neighbours on the same flat #020b31 they end on. */
.chc-section::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(1100px 560px at 85% 15%, rgba(19, 152, 194, .22), transparent 60%),
		radial-gradient(820px 520px at 8% 85%, rgba(19, 152, 194, .13), transparent 58%),
		radial-gradient(620px 600px at 50% 45%, rgba(72, 209, 240, .06), transparent 72%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
	        mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.chc-grid-bg {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(circle at 22% 30%, #000, transparent 66%);
	        mask-image: radial-gradient(circle at 22% 30%, #000, transparent 66%);
	pointer-events: none;
}

.chc-inner { position: relative; max-width: 92rem; margin: 0 auto; padding: 0 20px; }
@media (min-width: 1536px) { .chc-inner { padding: 0; } }

/* ── Pin scaffold ─────────────────────────────────────────────
   Unengaged (no JS, reduced-motion, or buttons mode): plain block,
   no special positioning — the track just scrolls natively.

   Engaged by JS (adds .chc-pinned) only for the scroll-driven mode.
   Deliberately NOT position:sticky — this theme has a documented history
   of sticky quietly failing to pin (the same issue hit the insights ToC
   sidebar), even with no obvious CSS blocker. JS instead toggles the
   pin-inner between three explicit states as it scrolls through the
   reserved space below, which is immune to containing-block quirks:
     .chc-pin-before — position:absolute, top:0    (resting, pre-pin)
     .chc-pin-fixed  — position:fixed,    top:0    (actively pinned)
     .chc-pin-after  — position:absolute, bottom:0 (settled, post-pin)
   The three line up exactly at their handoff points so there's no jump. */
.chc-pin-wrap { position: relative; }
.chc-pin-inner { position: relative; }

.chc-section.chc-pinned .chc-pin-inner {
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	/* `safe center` falls back to start-alignment instead of centring when
	   the content (head + card row + progress bar) is taller than the
	   100vh box — without it, plain `center` + overflow:hidden silently
	   clips the bottom on shorter screens, and the progress bar (the
	   last child) is the first thing to disappear. */
	justify-content: safe center;
	overflow: hidden;
	background: #020b31;
}
.chc-section.chc-pinned .chc-pin-inner.chc-pin-before { position: absolute; top: 0; }
.chc-section.chc-pinned .chc-pin-inner.chc-pin-fixed  { position: fixed; top: 0; z-index: 5; }
.chc-section.chc-pinned .chc-pin-inner.chc-pin-after  { position: absolute; bottom: 0; }

.chc-section.chc-pinned .chc-viewport { overflow: hidden; }
.chc-section.chc-pinned .chc-track {
	overflow: visible !important;
	will-change: transform;
}

/* ── Header row: heading + nav ───────────────────────────────── */
.chc-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(32px, 5vw, 56px);
}

/* Brand-gradient highlight word(s) — same gradient as .cqh-hl (hero) and
   .cqs-w--hl (statement), so *asterisks* look identical wherever they're used. */
.chc-hl {
	background: linear-gradient(100deg, #4fd6f1 0%, #2f8fda 55%, #7259BF 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.chc-heading {
	font-size: clamp(1.875rem, 4.2vw, 3.375rem);
	color: #fff;
	margin: 0;
	max-width: 640px;
	/* Keeps the flex row from refusing to shrink this below its content width,
	   which is what would push the nav buttons off the end. */
	min-width: 0;
  /* Shared display-heading treatment — matches .cqh-title in cubiq-hero-glow.
     Grep "display-heading treatment" to find every module using it. */
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.032em;
}

.chc-nav { display: flex; gap: 12px; flex-shrink: 0; }
[data-chc-mode="scrolljack"] .chc-nav { display: none; }
/* Set by JS when the track has nothing to scroll — with exactly four cards
   they fill the row margin-to-margin, and two permanently dead buttons read
   worse than no buttons at all. */
.chc-nav.is-idle { display: none; }

.chc-nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
	color: rgba(255, 255, 255, .85);
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease, translate .25s ease, opacity .25s ease;
}
.chc-nav-btn svg { width: 20px; height: 20px; display: block; }
@media (hover: hover) {
	.chc-nav-btn:hover:not(:disabled) {
		background: rgba(255, 255, 255, .12);
		border-color: rgba(101, 200, 192, .35);
		translate: 0 -2px;
	}
}
.chc-nav-btn:disabled { opacity: .32; cursor: default; }

/* ── Scroll progress indicator ───────────────────────────────────
   Scroll-driven mode only. A scrollbar-style thumb — fixed width,
   sliding position — rather than a fill that grows from zero, so it
   reads as "here's where you are" like a native scrollbar rather than
   a loading/completion bar. Tracks scroll 1:1 with no transition, so
   it feels directly wired to the user's scroll. Sits close under the
   card row (small margin-top), and — unlike the cards, which deliberately
   bleed off the right — its own bar stays within the normal page margin
   on BOTH sides: same --chc-edge-inset on the left as the track, and
   mirrored on the right rather than running to the true screen edge.
   Padding the same value onto both sides of a full-width element lands
   on exactly the width .chc-inner would produce at any viewport size
   (confirmed against .wrap's own max-width/centring math), without
   needing max-width + margin:auto for it. */
.chc-progress-wrap {
	margin-top: clamp(10px, 1.5vw, 16px);
	padding-left: var( --chc-edge-inset, 20px );
	padding-right: var( --chc-edge-inset, 20px );
}
[data-chc-mode="buttons"] .chc-progress-wrap { display: none; }

.chc-progress {
	position: relative;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
}
.chc-progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 20%;
	border-radius: 999px;
	background: linear-gradient(90deg, #65C8C0 0%, #3973D9 70%, #4974D2 100%);
	box-shadow: 0 0 12px rgba(101, 200, 192, .55);
}

/* ── Track ────────────────────────────────────────────────────
   Default: native horizontal scroll, snap, hidden scrollbar.
   Works for buttons mode AND as the safe fallback for scroll-driven
   mode when JS hasn't engaged the pin (no-JS / reduced-motion).

   The track sits full-bleed (outside .chc-inner) so cards can run
   off the true right edge of the browser — not just to the edge of
   the centred content column — as a deliberate "there's more, keep
   scrolling" cue. Only the LEFT edge is pulled in, matching the exact
   inset the sitewide `.wrap` container produces (max-width: 92rem /
   1472px, padding: 1.25rem / 20px, padding dropping to 0 at the
   1536px breakpoint where `.wrap` starts centring with a growing
   gap) — so the first card lines up with the page margin everywhere
   the heading text does, while the right side is intentionally left
   alone.

   That inset is computed in JS, not a pure-CSS `100vw` calc() — `vw`
   includes the vertical scrollbar's width in most browsers, while
   `.wrap`'s own centring (plain margin:auto within normal flow) does
   not, so a `100vw`-based replica drifts a few pixels off `.wrap`'s
   real position on wide screens. JS reads the scrollbar-EXCLUDED
   width instead and writes it to --chc-edge-inset. */
.chc-viewport { position: relative; }

.chc-track {
	display: flex;
	/* One source of truth for the column gap: the four-up card widths below
	   subtract 3 of these, and the end spacer subtracts 1, so a change here
	   can't silently put the row out of alignment. */
	--chc-gap: 20px;
	gap: var( --chc-gap );
	overflow-x: auto;
	/* overflow-y stays hidden so buttons-mode never shows a vertical
	   scrollbar, but 4px of top padding wasn't enough clearance for the
	   card's own focus-driven upward nudge (-8px) — that clipped the very
	   top of whichever card was lifted. 18px covers the nudge plus the
	   hover-lift (-4px) with room to spare. */
	overflow-y: hidden;
	/* No scroll-snap here (deliberately — see .chc-card below): CSS Scroll
	   Snap on a container with inline-start padding auto-corrects the
	   INITIAL scroll position to snap the first card flush against the
	   scrollport edge, silently eating the left-margin inset at rest —
	   confirmed live (scrollLeft jumped to exactly the padding value on
	   load, with or without scroll-snap-align on the first card). Native
	   drag/trackpad scroll is smooth without it regardless, and the arrow
	   buttons already land on exact card boundaries via cardStep(), so
	   nothing here actually needed snap to feel "aligned". */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 18px 0 28px;
	padding-left: var( --chc-edge-inset, 20px );
}
.chc-track::-webkit-scrollbar { display: none; }

/* Reserves the same margin at the end of the track (buttons mode only)
   so native scroll's actual limit stops there rather than at the true
   right edge — see the long comment beside its markup in the PHP. */
.chc-track-end-spacer {
	flex: 0 0 auto;
	/* Being a flex item, this already has one --chc-gap of the track's gap in
	   front of it, so taking the full inset reserved inset+gap and left the
	   last card stopping a gap short of the right margin. Subtract the gap it
	   inherits; max() keeps it off negative if the inset is ever smaller. */
	width: max(0px, calc(var(--chc-edge-inset, 20px) - var(--chc-gap, 20px)));
	pointer-events: none;
}

/* ── Card shell ───────────────────────────────────────────────── */
.chc-card {
	position: relative;
	flex: 0 0 auto;
	width: clamp(300px, 32vw, 440px);
	display: flex;
	flex-direction: column;
	/* rounded-lg, exactly — matches the Cubiq Work With Us Team Members
	   card (`rounded-lg border border-white/15 ... shadow-lg`) literally
	   rather than the looser 16px approximation used before. */
	border-radius: 8px;
	padding: clamp(24px, 2.75vw, 36px) clamp(22px, 2.5vw, 32px) clamp(24px, 2.75vw, 32px);
	/* True frosted glass — a light tint, not a dark fill, is what actually
	   lifts a card off a dark backdrop; a dark-on-dark fill (the previous
	   #0a1442 background-color) reads as a flat opaque panel and makes the
	   backdrop-filter blur invisible since there's nothing translucent left
	   to blur through. This is the same recipe as the Cubiq Sector Hero
	   stat cards, pushed slightly stronger for a card this size.

	   Background pattern below is the Team Members card's actual
	   `mesh-bg-blue-transparent` — that class isn't a Tailwind utility (it
	   never appears in the compiled theme CSS), it's hand-written CSS
	   living inline in header.php; pulled the literal radial-gradient
	   stack from there rather than guessing. Layered as background-image
	   OVER the frost tint (background-color paints behind image layers
	   regardless of declaration order), and a card with its own uploaded
	   photo (chc-card--has-bg) overrides background-image via its inline
	   style anyway, so this only shows on cards using the default glass. */
	background-color: rgba(255, 255, 255, .06);
	background-image:
		radial-gradient(circle at 20% 30%, #000F2F11 0%, transparent 60%),
		radial-gradient(circle at 70% 20%, #1548A311 0%, transparent 60%),
		radial-gradient(circle at 50% 70%, #0DE8E711 0%, transparent 70%),
		radial-gradient(circle at 80% 80%, #1548A311 0%, transparent 70%),
		radial-gradient(circle at 30% 80%, #0DE8E711 0%, transparent 70%);
	background-size: cover;
	background-position: center;
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	        backdrop-filter: blur(20px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, .15);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .14),
		0 10px 15px -3px rgba(0, 0, 0, .25),
		0 4px 6px -4px rgba(0, 0, 0, .2);
	overflow: hidden;
	--chc-focus: 0;
	opacity: calc(0.7 + 0.3 * var(--chc-focus));
	scale: calc(1 + 0.03 * var(--chc-focus));
	translate: 0 calc(var(--chc-focus) * -8px);
	transition:
		opacity .2s ease-out,
		scale .2s ease-out,
		translate .2s ease-out,
		box-shadow .35s ease;
}

/* Cards with a custom uploaded background image aren't meant to be
   see-through — they're a photo with a dark scrim over it — so they get
   an opaque navy base instead of the translucent glass tint. */
.chc-card--has-bg {
	background-color: #0a1442;

	/* Kills the bright hairline around an image card, and the cause is worth
	   recording because it is invisible in the markup.

	   background-clip defaults to border-box, so the photograph paints all the
	   way out under the 1px border. .chc-card-scrim is `position: absolute;
	   inset: 0`, and inset resolves against the PADDING box — measured, the
	   scrim sits exactly 1px inside the card on every side. So the border ring
	   carried raw, unscrimmed image, seen through a border that is only 15%
	   opaque: a thin bright line of whatever the photo happened to be at its
	   very edge, which read as the glass breaking down.

	   Two values, not one, and the order matters. The first applies to the
	   image layer — clipped to the padding box, so it stops where the scrim
	   stops. The colour takes the LAST value, so the navy still fills the
	   border ring; with a single `padding-box` the ring would instead be
	   transparent and show whatever sits behind the section, which is the same
	   problem wearing a different hat on the glass variant. */
	background-clip: padding-box, border-box;
}

/* `min()` against a vh figure rather than a flat px value: generous on
   normal/tall screens, but shrinks gracefully on short ones instead of
   forcing the section past 100vh in scroll-driven mode (which is what
   was squeezing the progress bar out of the pinned viewport). Also
   trimmed down slightly from the previous flat values — combined with
   the footer-anchoring fix above, less reserved height that the content
   doesn't reach reads as tighter and more deliberate, not hollow. */
/* Sized so exactly 4 cards fit margin-to-margin, matching the same column
   width as non-scrolling elements on the page — the viewport width minus
   the same left/right inset the track/heading use, minus 3 gaps, divided
   by 4. Anything past the 4th card still overflows/bleeds off the right as
   normal; this only governs the width of each card, not how many are
   shown. Overridden by the mobile breakpoint below, which keeps its own
   single-card-dominant sizing.

   --chc-vw, not 100vw: see updateEdgeInset() in the JS. Both terms have to
   come from the same measurement or the row is out by a scrollbar. */
.chc-card--testimonial { width: calc((var(--chc-vw, 100vw) - 2 * var(--chc-edge-inset, 20px) - 3 * var(--chc-gap, 20px)) / 4); min-height: min(560px, 64vh); }
.chc-card--process { min-height: min(300px, 42vh); }

@media (hover: hover) {
	.chc-card:hover {
		translate: 0 -4px;
		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 8px 10px -6px rgba(0, 0, 0, .25);
	}
}

/* The arrow-press wave lives entirely in the JS (glideStep()), which writes
   an inline `transform: translateX()` per card per frame. Deliberately
   `transform` and not `translate`: the card already uses `translate` for its
   focus/hover lift and `scale` for the focus grow, and the individual
   transform properties compose with `transform` rather than overwriting it,
   so the wave owns the X axis without disturbing either. Nothing is needed
   here — noted only so the inline transforms aren't a mystery. */

.chc-card-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(2, 11, 49, .18) 0%, rgba(2, 11, 49, .58) 55%, rgba(2, 11, 49, .92) 100%);
	pointer-events: none;
}

/* ── Testimonial content ─────────────────────────────────────── */
.chc-card-top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: clamp(20px, 3vw, 28px);
}
.chc-card--process .chc-card-top { justify-content: flex-start; }

/* Framed layout: title top-left, icon top-right, no frosted box around
   the icon — just the coloured mark itself, on its own. */
.chc-card-top--framed {
	justify-content: space-between !important;
	align-items: flex-start;
	gap: 16px;
}
.chc-card-top--framed .chc-step-title,
.chc-card-top--framed .chc-link-title { padding-top: 2px; }

/* Title alignment — a per-card choice, independent of layout/card type.
   Stacked layout's title is a plain block, so text-align alone centres
   it. Framed/link layout shares its row with the icon/arrow, so the
   title also needs to grow (flex: 1) for text-align: center to centre
   it within the available row space rather than just centring inside
   its own content-sized box, which wouldn't visibly move it at all. */
.chc-card--title-center .chc-step-title,
.chc-card--title-center .chc-link-title { text-align: center; }
.chc-card--title-center .chc-card-top--framed .chc-step-title,
.chc-card--title-center .chc-card-top--framed .chc-link-title { flex: 1; }

.chc-step-icon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	display: block;
	fill: #fff; /* SVG root only — ignored harmlessly if this resolves to an <img> */
	object-fit: contain; /* <img> only — ignored harmlessly if this resolves to an <svg> */
}

.chc-headshot {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
	flex-shrink: 0;
}

.chc-logo {
	max-height: 26px;
	max-width: 140px;
	width: auto;
	object-fit: contain;
	opacity: 1;
}

.chc-quote-mark {
	position: absolute;
	top: clamp(70px, 8vw, 92px);
	left: clamp(20px, 2.5vw, 28px);
	width: clamp(130px, 13vw, 190px);
	height: clamp(130px, 13vw, 190px);
	fill: #fff;
	opacity: .06;
	pointer-events: none;
	z-index: 0;
	user-select: none;
}

.chc-quote {
	position: relative;
	z-index: 1;
	font-size: 1.05rem;
	line-height: 1.62;
	font-weight: 300;
	color: rgba(234, 241, 245, .9);
	margin: clamp(14px, 1.8vw, 24px) 0 20px;
}

.chc-card-foot {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding-top: clamp(16px, 2vw, 20px);
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.chc-person { margin: 0; font-size: .95rem; font-weight: 600; color: #fff; }
.chc-company { margin: 0; font-size: .82rem; color: rgba(255, 255, 255, .55); }

/* ── Process content ─────────────────────────────────────────── */
.chc-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .11);
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.chc-icon-wrap svg { width: 26px; height: 26px; fill: #fff; flex-shrink: 0; display: block; }
.chc-icon-wrap img { width: 26px; height: 26px; object-fit: contain; display: block; }

.chc-step-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .11);
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
	font-size: 1.05rem;
	font-weight: 700;
	background-image: linear-gradient(100deg, #65C8C0 0%, #3973D9 60%, #4974D2 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* margin-top stays `auto` (inherited from .chc-card-foot) so the title +
   description pin to the bottom of the card, same as the testimonial
   footer — without this override it was landing at a fixed 20px below
   the icon instead, leaving a slab of dead empty space underneath on
   any card whose text didn't reach the card's full height. */
.chc-card-foot--process { border-top: none; padding-top: 0; gap: 8px; }

/* Matches Cubiq Work With Us Icon Info Grid's title/description type
   exactly (pulled from its real template classes, not assumed):
   title = text-2xl font-extralight text-white leading-[1.5rem];
   description = text-base leading-[1.25rem] text-gray-300
   font-extralight tracking-[1px]. Shared with the link-through cards
   below so the two never drift apart — one definition, both card types. */
.chc-step-title, .chc-link-title { margin: 0; font-size: 1.5rem; font-weight: 200; color: #fff; line-height: 1.5rem; }
.chc-step-desc, .chc-link-desc { margin: 0; font-size: 1rem; line-height: 1.25rem; color: #d1d5db; font-weight: 200; letter-spacing: 1px; }

/* ── Link-through content (menu tile) ────────────────────────────
   The whole card is the <a> — a photo behind it (via the existing
   bg_image/scrim mechanism), title top-left + arrow top-right (same
   row/footer classes as the framed process layout, so they share the
   same top/bottom rhythm), description at the bottom. */
.chc-card--link { text-decoration: none; color: inherit; cursor: pointer; min-height: min(380px, 46vh); }

/* Bare glyph, no bubble/border/blur, no opacity fade — the stroke
   itself is the only thing hiding it at rest (dasharray/dashoffset),
   so the draw-on is the sole reveal mechanism rather than two
   transitions (opacity + dashoffset) overlapping and blurring together
   into what just reads as a quick fade. Sized up and slowed down from
   the first pass too — at 26px/0.5s the motion was too small and too
   fast to actually read as drawing rather than appearing. Reverses
   (un-draws) automatically on hover-out, since it's a plain CSS
   transition running backward. */
.chc-link-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	color: #fff;
}
.chc-link-arrow svg { width: 100%; height: 100%; display: block; }

/* Asymmetric on purpose: the transition duration used is whichever
   rule matches the state being transitioned TO, so the base rule below
   governs the un-draw speed (leaving hover) and the :hover rule governs
   the draw-in speed (entering hover) — the standard technique for a
   hover effect that isn't the same speed both ways. */
.chc-link-arrow-path {
	stroke-dasharray: 32;
	stroke-dashoffset: 32;
	transition: stroke-dashoffset .35s cubic-bezier(.2, .7, .2, 1);
}

@media (hover: hover) {
	.chc-card--link:hover .chc-link-arrow-path,
	.chc-card--case_study:hover .chc-link-arrow-path,
	.chc-card--news:hover .chc-link-arrow-path,
	.chc-card--testimonial:hover .chc-link-arrow-path {
		stroke-dashoffset: 0;
		transition: stroke-dashoffset 1s cubic-bezier(.2, .7, .2, 1);
	}
}
/* No hover on touch — show it fully drawn at rest, since there's no
   hover gesture available to trigger the animation. */
@media (hover: none) {
	.chc-link-arrow-path { stroke-dashoffset: 0; }
}

/* ── The story behind the glass ────────────────────────────────────────────
   On hover, the case study's hero image rises up inside the card and is read
   through a heavy blur — a wash of the client's own colour and shape rather
   than a legible photograph, so it suggests the story without competing with
   the quote.

   The blur is on the image itself, not the card's backdrop-filter, and that is
   a constraint rather than a preference: backdrop-filter samples what is
   painted OUTSIDE its element, so a card can never frost its own children. To
   have the card's real glass do the blurring, the image would have to be a
   sibling behind the card, which means wrapping every card in the track and
   re-deriving cardStep() from the wrapper. Blurring the image directly lands
   the same read and leaves the carousel geometry alone — and it means this
   blur can be tuned independently of the frost.

   Two background layers on one element: a navy scrim over the photo. Keeping
   the scrim here rather than on a separate overlay means it cannot be forgotten
   — the photo is never drawn without it, so the quote never loses contrast. */
.chc-tst-story {
	position: absolute;
	/* Bled past the card on every side. A blurred edge inside the clip would
	   read as a soft grey rim; pushing it out means the card's own
	   overflow: hidden crops the bleed instead. */
	inset: -28px;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;

	/* --chc-story-veil is the dial: it is the scrim's alpha through the open
	   band, so lower = more of the client's image, higher = quieter. The two
	   ends stay heavy regardless, because the logo sits at the top and the
	   name and CTA at the bottom, and both need their contrast. */
	--chc-story-veil: .10;
	background-image:
		linear-gradient(to bottom,
			rgba(2, 11, 49, .86) 0%,
			rgba(2, 11, 49, .40) 26%,
			rgba(2, 11, 49, var(--chc-story-veil)) 58%,
			rgba(2, 11, 49, .28) 84%,
			rgba(2, 11, 49, .82) 100%),
		var(--chc-story);
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;

	/* 7px, not the 18px this started at. The hero is already downscaled to
	   cover a ~345px card, so a heavy blur flattens it to a single averaged
	   colour — which the scrim then erases completely. Light blur keeps enough
	   shape for the image to read as the client's own without ever becoming a
	   legible photograph competing with the quote. */
	filter: blur(7px) saturate(165%) brightness(1.05);

	/* Open through the same band the scrim opens, and closed at both ends.
	   The first version peaked at the BOTTOM while the scrim was also heaviest
	   there, so the two cancelled each other out and the image was invisible —
	   mask and scrim have to agree about where the window is. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .5) 18%, #000 46%, #000 88%, rgba(0, 0, 0, .45) 97%, transparent 100%);
	        mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .5) 18%, #000 46%, #000 88%, rgba(0, 0, 0, .45) 97%, transparent 100%);

	opacity: 0;
	translate: 0 30px;
	scale: 1.06;
	transition:
		opacity .5s ease,
		translate .75s cubic-bezier(.2, .7, .2, 1),
		scale .75s cubic-bezier(.2, .7, .2, 1);
}

@media (hover: hover) {
	.chc-card--testimonial:hover .chc-tst-story {
		opacity: 1;
		translate: 0 0;
		scale: 1;
	}
}

/* Keyboard parity with the hover state. */
.chc-card--testimonial:focus-visible .chc-tst-story {
	opacity: 1;
	translate: 0 0;
	scale: 1;
}

/* No hover to wait for on touch, and no cursor to invite it — show it settled
   at a lower strength so the card still reads as a quote first. */
@media (hover: none) {
	.chc-tst-story { opacity: .72; translate: 0 0; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.chc-tst-story { transition: opacity .3s ease; translate: 0 0; scale: 1; }
}

/* ── Testimonial → case study link ─────────────────────────────────────────
   Shown only on the testimonials whose company has a published case study, so
   most cards are unaffected. Hidden until hover for the same reason the case
   study card's blurb is: a row of quotes should read as quotes, and offer the
   extra step only once you are actually on one. Reuses .chc-link-arrow and its
   draw-in wholesale rather than restating them. */
/* Attribution and call to action stacked in one grid cell, so they occupy the
   same space and crossfade rather than one appearing beneath the other. The
   cell takes the height of the taller of the two, which means the card's height
   is identical in both states — no reflow on hover, and nothing extra taking up
   room while the card is at rest.

   grid-area: 1/1 on both children is what does the stacking; it is cleaner than
   absolutely positioning the CTA over the foot, because the cell still sizes
   itself to the content instead of needing a height guessed in advance. */
.chc-tst-swap {
	position: relative;
	z-index: 1;
	margin-top: auto;
	display: grid;
}

.chc-tst-swap > * {
	grid-area: 1 / 1;
}

/* The foot brings its own margin-top: auto for the unwrapped case; inside the
   wrapper that job has moved up a level. */
.chc-tst-swap > .chc-card-foot {
	margin-top: 0;
	transition: opacity .3s ease, translate .4s cubic-bezier(.2, .7, .2, 1);
}

/* They pass in the same direction — attribution up and out, CTA up and in — so
   it reads as one movement rather than two things trading places. */
@media (hover: hover) {
	.chc-card--testimonial:hover .chc-tst-swap > .chc-card-foot {
		opacity: 0;
		translate: 0 -8px;
	}
}

.chc-card--testimonial:focus-visible .chc-tst-swap > .chc-card-foot {
	opacity: 0;
	translate: 0 -8px;
}

.chc-tst-cta {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	align-self: end;
	gap: 6px;
	opacity: 0;
	translate: 0 10px;
	transition: opacity .35s ease, translate .35s cubic-bezier(.2, .7, .2, 1);
}

.chc-tst-cta-label {
	/* A step up from the 13px it was as a secondary row — it now carries the
	   whole bottom of the card on hover, so it reads as the message rather than
	   a footnote. */
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: #fff;
	white-space: nowrap;
}

/* Smaller than the link tile's arrow — here it trails a 13px label rather than
   anchoring a heading. */
.chc-tst-cta .chc-link-arrow { width: 20px; height: 20px; }

/* A linked testimonial is an <a>; it should still look like a card. */
a.chc-card--testimonial { text-decoration: none; color: inherit; }

@media (hover: hover) {
	.chc-card--testimonial:hover .chc-tst-cta { opacity: 1; translate: 0 0; }
}

/* No hover gesture to wait for, so show it at rest. */
@media (hover: none) {
	.chc-tst-cta { opacity: 1; translate: 0 0; }
}

.chc-card--testimonial:focus-visible .chc-tst-cta { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
	.chc-tst-cta,
	.chc-tst-swap > .chc-card-foot { transition: opacity .2s ease; translate: 0 0; }
}

/* ── Latest news card ──────────────────────────────────────────────────────
   Shares the case study card's shell (see the shared selectors above) — same
   four-up width, same crop, same hover language. What differs is where the
   words sit: a case study can lean on its client logo, an article can't, so the
   headline is visible from the start and the summary rises beneath it. */

/* Top-left label. Was the category; the date is the more useful signal on a
   "latest news" row, where every card is likely to share a category anyway. */
.chc-news-date {
	position: relative;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
	white-space: nowrap;
}

.chc-news-foot {
	position: relative;
	z-index: 1;
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.chc-news-title {
	margin: 0;
	font-size: clamp(1rem, 1.15vw, 1.1875rem);
	line-height: 1.3;
	font-weight: 500;
	color: #fff;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
	/* Unclamped — the whole headline shows, however long it runs.
	   Safe because the cards are flex items in a stretch row: a long title
	   grows its card, every sibling matches the tallest, and the min-height
	   below is a floor rather than a ceiling. Nothing gets cropped by the
	   card's overflow: hidden. */
}

/* On show from the start, not revealed on hover. Muted against the headline so
   the title still leads the card and this reads as supporting detail — the
   hierarchy has to come from weight and colour now that both are always
   visible. Hover changes only the arrow. */
.chc-news-desc {
	margin: 6px 0 0;
	font-size: .8125rem;
	line-height: 1.25rem;
	font-weight: 300;
	color: rgba(230, 237, 247, .74);
	/* Two lines: the headline can already take three, and a card that spends
	   more than five lines on text stops reading as an image card. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Section call to action ────────────────────────────────────────────────
   Sits in the heading row, grouped with the arrows as the row's controls. It
   was below the track first; up here it reads as belonging to the section's
   title rather than trailing the cards, and it costs no vertical space. */
.chc-head-actions {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.4vw, 20px);
	/* The heading is the flexible half of .chc-head; the controls never shrink. */
	flex-shrink: 0;
}

/* Ported from .cqh-btn / .cqh-btn--gradient in cubiq-hero-glow, the same
   control cubiq-statement uses, so all three read identically. The arrow is the
   one addition — it earns its place on a "view all" action, where the hero's
   buttons are terminal. */
.chc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 30px;
	border-radius: 999px;
	font-family: 'Open Sauce One', system-ui, -apple-system, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s;
}

.chc-btn--gradient {
	color: #02101f;
	background: linear-gradient(100deg,
		rgb(var(--c1, 20, 171, 218)) 0%,
		rgb(var(--c2, 3, 139, 241)) 55%,
		rgb(var(--c3, 114, 89, 191)) 120%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .35),
		0 16px 40px -16px rgba(var(--c2, 3, 139, 241), .8);
}

/* Matched to the 48px round arrow buttons beside it, so the group reads as one
   row of controls rather than two sizes of thing. An explicit height beats
   fiddling with padding to land on the same number. */
.chc-btn--in-head {
	height: 48px;
	padding: 0 clamp(18px, 1.6vw, 26px);
}

.chc-btn-arrow {
	display: block;
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	transition: translate .28s cubic-bezier(.2, .7, .2, 1);
}
.chc-btn-arrow svg { width: 100%; height: 100%; display: block; }

@media (hover: hover) {
	.chc-btn--gradient:hover {
		transform: translateY(-2px);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, .45),
			0 22px 52px -16px rgba(var(--c2, 3, 139, 241), .95);
	}
	/* The arrow leads the button rather than just riding along with it. */
	.chc-btn--gradient:hover .chc-btn-arrow { translate: 3px 0; }
}

.chc-btn:focus-visible {
	outline: 2px solid rgb(var(--c1, 20, 171, 218));
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.chc-btn, .chc-btn-arrow { transition: none; }
	.chc-btn--gradient:hover { transform: none; }
	.chc-btn--gradient:hover .chc-btn-arrow { translate: 0; }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 700px) {
	/* A heading, a button and two arrows will not share one line at this width.
	   Wrapping drops the controls to their own row, right-aligned, instead of
	   crushing the heading. */
	.chc-head { flex-direction: row; align-items: center; flex-wrap: wrap; row-gap: 18px; }
	.chc-head-actions { margin-left: auto; }
	.chc-btn--in-head { height: 44px; font-size: 14px; }
	.chc-heading { max-width: 100%; }
	.chc-card { width: clamp(260px, 78vw, 340px); }
	.chc-quote-mark { width: clamp(90px, 22vw, 125px); height: clamp(90px, 22vw, 125px); }
}

@media (prefers-reduced-motion: reduce) {
	.chc-card { transition: none; }
	.chc-section.chc-pinned .chc-pin-inner { position: static; height: auto; }
	.chc-section.chc-pinned .chc-track { transform: none !important; }
}

/* ── Case study cards ─────────────────────────────────────────────────────
   An image-led tile: the case study's hero image fills the card, its logo
   sits over the top-left, and there's no body copy. A row of them reads as
   a client wall. Sized 4-to-the-viewport like the testimonial cards so a
   page mixing the two keeps one column rhythm. */

.chc-card--case_study,
.chc-card--news {
	width: calc((var(--chc-vw, 100vw) - 2 * var(--chc-edge-inset, 20px) - 3 * var(--chc-gap, 20px)) / 4);
	/* Portrait rather than the near-square it was: at four-up the width lands
	   around 335px, so this puts it near a 3:4 crop, which suits a hero image
	   and leaves room for the description to rise into. */
	min-height: min(460px, 58vh);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	/* The image is the content, so it runs to the edges — the base card's
	   generous padding would letterbox it. */
	padding: clamp(18px, 1.6vw, 24px);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Lighter than the testimonial scrim: enough to hold a white logo, not so
   much that the photograph goes muddy. Weighted to the top, where the logo
   sits, rather than the bottom, where the copy would have been. */
.chc-card--case_study .chc-card-scrim {
	background: linear-gradient(170deg,
		rgba(2, 11, 49, .62) 0%,
		rgba(2, 11, 49, .34) 42%,
		rgba(2, 11, 49, .12) 72%,
		rgba(2, 11, 49, .30) 100%);
}

/* News needs the opposite weighting to the case study card, and inheriting that
   one was a mistake worth naming: it is deliberately heaviest at the TOP, where
   a case study's logo sits, and lightest across the bottom where it has no copy.
   A news card puts its date, headline and summary exactly there — so on a bright
   photograph the headline washed out completely. Weighted to the bottom instead,
   with just enough at the top to hold the category label. */
.chc-card--news .chc-card-scrim {
	background: linear-gradient(to top,
		rgba(2, 11, 49, .92) 0%,
		rgba(2, 11, 49, .78) 30%,
		rgba(2, 11, 49, .38) 58%,
		rgba(2, 11, 49, .22) 78%,
		rgba(2, 11, 49, .46) 100%);
}

.chc-cs-top {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.chc-cs-logo {
	max-width: min(58%, 190px);
	max-height: clamp(26px, 2.4vw, 40px);
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: left center;
	/* Client logos arrive in every colour; on a photograph a single flat
	   white reads consistently across a whole row where the originals
	   wouldn't. Paired with the drop-shadow so it holds on a light image. */
	filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0, 0, 0, .45));
}

/* Used when a case study has no logo set — the name has to stand in. */
.chc-cs-fallback {
	position: relative;
	font-size: clamp(15px, 1.3vw, 19px);
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

/* The card is a link, so it needs a visible keyboard focus state of its own —
   the arrow draw-in is a hover affordance and never fires for keyboard users. */
.chc-card--case_study:focus-visible,
.chc-card--news:focus-visible {
	outline: 2px solid #14ABDA;
	outline-offset: 3px;
}


/* Screen-reader-only accessible name for the link. */
.chc-cs-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ── Case study: description on hover ──────────────────────────────────────
   Not copied from the link card — that one's description is always visible.
   Here the tile stays clean at rest and the copy rises in on hover, so a row
   reads as a wall of clients until you show interest in one.

   The card is already a flex column, so margin-top:auto pins this to the
   bottom regardless of how tall the image makes the card. */

.chc-cs-foot {
	position: relative;
	z-index: 1;
	margin-top: auto;
	opacity: 0;
	translate: 0 10px;
	transition: opacity .35s ease, translate .35s cubic-bezier(.2, .7, .2, 1);
}

.chc-cs-desc {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.35rem;
	color: #e6edf7;
	font-weight: 300;
}

/* The resting scrim is weighted to the top, where the logo sits. On hover it
   deepens at the bottom instead, so the description has something to sit on
   without darkening the photograph the rest of the time. */
.chc-card--case_study .chc-card-scrim,
.chc-card--news .chc-card-scrim {
	transition: background .35s ease;
}

@media (hover: hover) {
	.chc-card--case_study:hover .chc-cs-foot {
		opacity: 1;
		translate: 0 0;
	}
	.chc-card--case_study:hover .chc-card-scrim {
		background: linear-gradient(170deg,
			rgba(2, 11, 49, .60) 0%,
			rgba(2, 11, 49, .34) 34%,
			rgba(2, 11, 49, .52) 68%,
			rgba(2, 11, 49, .88) 100%);
	}
	/* Deepens where the summary lands, and only there. */
	.chc-card--news:hover .chc-card-scrim {
		background: linear-gradient(to top,
			rgba(2, 11, 49, .96) 0%,
			rgba(2, 11, 49, .90) 42%,
			rgba(2, 11, 49, .52) 66%,
			rgba(2, 11, 49, .26) 82%,
			rgba(2, 11, 49, .48) 100%);
	}
}

/* No hover on touch, so the copy has to be there from the start. */
@media (hover: none) {
	.chc-cs-foot { opacity: 1; translate: 0 0; }
	.chc-card--case_study .chc-card-scrim,
.chc-card--news .chc-card-scrim {
		background: linear-gradient(170deg,
			rgba(2, 11, 49, .60) 0%,
			rgba(2, 11, 49, .34) 34%,
			rgba(2, 11, 49, .52) 68%,
			rgba(2, 11, 49, .88) 100%);
	}
}

/* Keyboard users never trigger :hover — the reveal has to answer focus too. */
.chc-card--case_study:focus-visible .chc-cs-foot { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
	.chc-cs-foot { transition: none; }
}


/* Section heading on one line above the mobile breakpoint. The 640px cap is
   what was wrapping it; nowrap then holds it even when the flex row would
   rather break it. Below 700px it goes back to wrapping normally, because a
   phone has nowhere near the width for it.

   Worth knowing: a genuinely long heading will now run past the container
   rather than wrap. Headings for this module want to stay short. */
@media (min-width: 701px) {
	.chc-heading {
		max-width: none;
		white-space: nowrap;
	}
}

/* ── Mobile card sizing ───────────────────────────────────────────────────
   The four-up widths defined earlier — testimonial (~L456) and case_study /
   news (~L1037) — divide the viewport by four so a desktop row sits exactly
   margin-to-margin. On a phone that same maths yields ~70px cards jammed
   four-across: unreadable, and the whole reason the row "isn't mobile
   optimised". This override HAS to live after those rules. Every card
   modifier is a single class (specificity 0,1,0), so the plain `.chc-card`
   width set inside the earlier 700px block loses the source-order tie to the
   case_study/news width that is declared below it — which is why only the
   image-led variants stayed broken. Declared last, all variants collapse to
   one dominant card with a peek of the next, signalling the row still swipes.
   The min-heights set on each variant are kept (they are already vh-capped),
   so the cards read as tall portraits on a phone rather than squares. */
@media (max-width: 700px) {
	.chc-card,
	.chc-card--testimonial,
	.chc-card--case_study,
	.chc-card--news {
		width: clamp(255px, 82vw, 340px);
	}
}