/* "What We Do" specialty pages (template-what-we-do.php). Figma node
   3284:14290 ("Brand marketing") — shared by every specialty page, so
   sizing here uses the site's usual clamp()/rem scale rather than Figma's
   literal pixel values, the same as every other template in this theme. */

/* Loads full-screen, then settles down to its normal size (see .is-intro
   below and what-we-do.js, which removes that class a frame after load so
   this transition actually runs). The 360px floor is lower than this used
   to sit at (420px) — on a short "laptop window" screen, 55vh alone would
   otherwise flatten out at 420px and go no smaller.
   360px on its own would let the tagline/heading (bottom-anchored inside
   .what-we-do-hero__inner, below) poke up far enough to overlap the fixed
   header's logo — this section deliberately bleeds under that header
   (mix-blend-mode:exclusion inverts the logo over the photo), so unlike a
   solid-background page, an overlap here is genuinely visible, not just a
   z-index technicality. .what-we-do-hero__inner's own bottom/gap below
   compensate by tightening too, but ONLY below ~654px viewport height —
   the exact point this 55vh formula reaches this 360px floor — so nothing
   changes above that; the room only gets squeezed once the hero itself is
   already as short as it'll go. */
.what-we-do-hero {
	position: relative;
	height: clamp(360px, 55vh, 788px);
	background-size: cover;
	background-position: center;
	background-color: var(--color-ink);
	transition: height 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.what-we-do-hero.is-intro {
	height: 100vh;
	height: 100svh;
}

@media (prefers-reduced-motion: reduce) {
	.what-we-do-hero {
		transition: none;
	}
}

.what-we-do-hero__inner {
	position: absolute;
	left: 0;
	right: 0;
	/* min() of the original width-based offset and a new height-based one —
	   see .what-we-do-hero's comment above. The height-based side only
	   starts undercutting the width-based one below ~900px viewport height,
	   and is fully compressed (32px) by ~654px — right where the hero
	   itself bottoms out at its own 360px floor — so the two stay in sync:
	   maximally tight exactly when the hero has no more room left to give. */
	bottom: min(clamp(48px, 6vw, 90px), clamp(32px, calc(23.6vh - 122px), 90px));
	/* Same duration/easing as .what-we-do-hero's own height transition
	   above, so as .is-intro below is removed, this content glides down
	   into its settled resting spot exactly as the photo finishes
	   shrinking around it, rather than snapping there the instant the
	   photo stops moving. An earlier version of this used
	   position:fixed + a transitionend listener to make the content hold
	   dead still throughout, switching back to this normal bottom-anchor
	   the moment the shrink finished — correct in principle, but relied
	   on that switch landing at EXACTLY the right instant, and any tiny
	   mismatch (rounding, a slightly-early transitionend) showed up as a
	   visible jump right at the end. A single ordinary transition, always
	   in this same position/anchor mode, can't develop that kind of seam. */
	transition: bottom 2.2s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(8px, calc(6.5vh - 34px), 24px);
}

@media (prefers-reduced-motion: reduce) {
	.what-we-do-hero__inner {
		transition: none;
	}
}

/* While full-screen (.is-intro, removed by what-we-do.js after a short
   hold), the content sits further up from the very bottom of the screen
   than its settled bottom-offset (above) would put it — roughly centred
   rather than hugging the bottom edge of the whole viewport. 40vh alone
   would push it too high on a short "laptop window" screen (the same
   header-overlap risk as .what-we-do-hero's own floor, see its comment) —
   the min() caps it so content-top never comes closer than ~130px to the
   very top of the frame, regardless of how short the screen is. */
.what-we-do-hero.is-intro .what-we-do-hero__inner {
	bottom: min(40vh, calc(100vh - 331px));
	bottom: min(40svh, calc(100svh - 331px));
}

.what-we-do-hero__tagline {
	margin: 0;
	font-family: var(--font-body);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.125rem, 4vw, 1.5625rem);
	line-height: 1.28;
	color: var(--color-white);
}

.what-we-do-hero__heading {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	line-height: 1.1;
	color: var(--color-white);
}

/* Global mobile h1 baseline (3.1rem) — see base.css. */
@media (max-width: 900px) {
	.what-we-do-hero__heading {
		font-size: clamp(2.25rem, 13vw, 3.1rem);
	}
}

.what-we-do-hero__arrow,
.what-we-do-intro__arrow {
	display: block;
	width: clamp(2.5rem, 9vw, 3.6875rem);
	height: clamp(2.5rem, 9vw, 3.6875rem);
	flex-shrink: 0;
}

.what-we-do-hero__arrow img,
.what-we-do-intro__arrow img {
	display: block;
	width: 100%;
	height: 100%;
}

.what-we-do-intro {
	display: grid;
	grid-template-columns: 223px 1fr auto;
	align-items: center;
	column-gap: 50px;
	padding-block: clamp(56px, 8vw, 96px);
}

.what-we-do-intro__label {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: clamp(1.125rem, 4vw, 1.5625rem);
	line-height: 1.4;
	color: var(--color-ink);
}

.what-we-do-intro__copy {
	max-width: 58rem;
}

.what-we-do-intro__copy p {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: clamp(1.125rem, 4vw, 1.5625rem);
	line-height: 1.68;
	color: var(--color-ink);
}

/* Gold underline reveals on scroll-in, staggered per italicised phrase —
   same pattern as .intro__highlight on the homepage (home.css), reused
   here rather than reinvented. That version wraps each phrase in a
   hand-authored <span class="intro__highlight"> since the homepage's copy
   is hardcoded markup; here the copy comes from an ACF wysiwyg field where
   an editor just italicises a phrase normally, so this targets the <em>
   tags that produces instead. display:inline-block lets the ::after
   underline transform independently of the text's own baseline. The
   ".is-visible" toggle comes from the IntersectionObserver in
   what-we-do.js (ported from home.js's own .intro observer). */
.what-we-do-intro__copy em {
	position: relative;
	display: inline-block;
	font-style: italic;
}

.what-we-do-intro__copy em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.05em;
	height: 1px;
	background: #b89c02;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s ease;
}

.what-we-do-intro__copy em:nth-of-type(1)::after {
	transition-delay: 0s;
}

.what-we-do-intro__copy em:nth-of-type(2)::after {
	transition-delay: 0.35s;
}

.what-we-do-intro__copy em:nth-of-type(3)::after {
	transition-delay: 0.7s;
}

.what-we-do-intro__copy em:nth-of-type(4)::after {
	transition-delay: 1.05s;
}

.what-we-do-intro.is-visible .what-we-do-intro__copy em::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.what-we-do-intro__copy em::after {
		transition: none;
	}
}

/* Darkening treatment (stat_overlay_style/_color, ACF) lives here as CSS
   rather than being baked into the uploaded photo — this template gets
   reused for whatever image a future specialty page uploads, and a
   treatment baked into today's two files wouldn't travel with it. Figma
   treats each photo differently (confirmed by comparing rendered vs raw
   exports): the ocean photo gets an even tint across the whole image,
   the mountain photo gets a gradient that's clear at the top and darkens
   toward the bottom where the text sits — --wwd-overlay-style picks
   between the two, --wwd-overlay-color (with its own alpha) sets the
   colour/strength for either. */
.what-we-do-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 1340 / 745;
	/* Extra vertical padding (beyond the horizontal) so the number reel
	   has more room around it — it's clipped to exactly one line's height
	   regardless, but cramming that right up against the card edge made
	   the roll feel cramped. */
	padding-inline: clamp(24px, 4vw, 56px);
	padding-block: clamp(48px, 8vw, 96px);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	/* Single source of truth for the big number/suffix size, referenced by
	   every one of the 4 places below that must render at EXACTLY the same
	   size for the reveal windows to clip in sync (see their own comments)
	   — previously each repeated the same clamp() expression by hand, which
	   is exactly the kind of thing that quietly drifts out of sync the next
	   time just one of the 4 gets tweaked. Same idea for the heading size. */
	--wwd-number-font: clamp(3.5rem, 8vw, 8.2rem);
	--wwd-heading-font: clamp(1.75rem, 3.8vw, 3.75rem);
}

.what-we-do-stat::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.what-we-do-stat--tint::before {
	background: var(--wwd-overlay-color, rgba(0, 0, 0, 0.45));
}

.what-we-do-stat--gradient::before {
	background: linear-gradient(to bottom, transparent 35%, var(--wwd-overlay-color, rgba(0, 0, 0, 0.8)) 100%);
}

.what-we-do-stat__label,
.what-we-do-stat__cycle,
.what-we-do-stat__divider,
.what-we-do-stat__citation {
	position: relative;
	z-index: 1;
}

.what-we-do-stat__label {
	margin: 0 0 14px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	color: var(--color-white);
}

/* Static, no-JS fallback: what-we-do.js replaces .what-we-do-stat__cycle's
   contents with the animated window/track version below on load — these
   rules only matter until (or unless) that runs, so JS is free to rebuild
   the DOM here without fighting a CSS animation already in flight. */
.what-we-do-stat__cycle {
	display: grid;
}

.what-we-do-stat__row {
	display: none;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4em 0.2em;
	/* Stacks every row in the same grid cell so layout doesn't jump when
	   the active one changes and its content wraps to a different number
	   of lines than the last. */
	grid-area: 1 / 1;
}

.what-we-do-stat__row.is-active {
	display: flex;
}

.what-we-do-stat__number {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--wwd-number-font);
	line-height: 1;
	color: var(--color-white);
}

.what-we-do-stat__heading {
	font-family: var(--font-body);
	font-weight: 800;
	font-size: var(--wwd-heading-font);
	line-height: 1.1;
	color: var(--color-white);
}

/* Animated version (what-we-do.js): three independent reels (number,
   unit, heading), each its own clipped "window" with a track of stacked
   values sliding upward inside it — same translateY-track mechanic as
   .btn__roll-track elsewhere in this theme, just driven by an interval
   instead of :hover, and with the values swapped out at runtime rather
   than fixed markup. All three animate for the exact same duration (set
   in JS), so the heading's single slide and the number's multi-frame
   "slot machine" spin land at the same moment — the number only feels
   faster because it's covering several stacked frames in that same span
   of time, not because it's actually quicker.
   No gap set here on the flex container itself — the number/unit/heading
   windows each set their own left margin instead, so the unit->heading
   gap can be deliberately larger than the number->unit gap. */
.what-we-do-stat__cycle.is-animated {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	/* The number/suffix windows are bottom-anchored, so their extra reveal
	   height (see .what-we-do-stat__number-window/__suffix-window) shows up
	   as empty space ABOVE the glyph — right next to .what-we-do-stat__label
	   above this row — which was pushing the two further apart than
	   intended. Pulling the row itself back up compensates, without
	   shrinking the actual reveal window the glyphs scroll through. Uses
	   the same big font-size as those two windows so it scales with them. */
	font-size: var(--wwd-number-font);
	margin-top: -0.05em;
	/* All three reveal windows compute their height from this one value
	   (see --wwd-reveal-height below) rather than each from their own
	   font-size — the heading's font-size is a completely different
	   clamp() (different min/max, different vw rate), so sizing its
	   window in its OWN em units could only ever match the number/suffix
	   windows' pixel height at one specific viewport width, drifting
	   apart at every other width. Calculating all three from the same
	   value guarantees they clip at the identical point everywhere. */
	--wwd-reveal-height: calc(1.15 * var(--wwd-number-font));
}

.what-we-do-stat__number-window {
	overflow: hidden;
	/* A little taller than the glyph's own 1em so more of the roll is
	   visible before it's clipped — kept modest since this font-size can
	   run much bigger than the heading's, so even a small em bump here is
	   a large absolute pixel change. The glyph stays bottom-anchored
	   (below) so the extra height doesn't shift its resting position. */
	height: var(--wwd-reveal-height);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--wwd-number-font);
	line-height: 1;
	color: var(--color-white);
}

.what-we-do-stat__number-track {
	display: flex;
	flex-direction: column;
}

.what-we-do-stat__number-track > span {
	display: flex;
	align-items: flex-end;
	height: var(--wwd-reveal-height);
	line-height: 1;
}

/* The "X"/"%" unit is its own reel, not appended to the number's — it's
   the same big character height as the number (not the smaller heading
   text), and needs to be able to transition independently (e.g. "X" to
   "%") rather than only ever moving in lockstep with the digits. */
.what-we-do-stat__suffix-window {
	overflow: hidden;
	/* Must match the number window's height exactly (same font-size, same
	   row) so both clip at the same point — they didn't (1.6em vs the
	   number's 1.25em), which is what let this column's own reveal space
	   run high enough to crash into .what-we-do-stat__label above. Window
	   height must also match each frame's own height, or part of the next
	   frame would peek in at rest. */
	height: var(--wwd-reveal-height);
	/* Fixed rather than auto: "X" and "%" aren't the same width, and
	   mid-transition the track holds both stacked at once, so an
	   auto-sized window would resize to whichever is wider and visibly
	   nudge the heading column sideways. Wide enough for either. */
	width: 0.72em;
	flex-shrink: 0;
	margin-left: 0.08em;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--wwd-number-font);
	line-height: 1;
	color: var(--color-white);
}

.what-we-do-stat__suffix-track {
	display: flex;
	flex-direction: column;
}

.what-we-do-stat__suffix-track > span {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: var(--wwd-reveal-height);
}

/* Fixed at ~2 lines' worth of height (rather than 1) since the real copy
   varies a lot in length — "Higher ROI." vs "Increase in total conversion
   value." — so a longer heading can wrap without the window clipping it.
   Every frame gets forced to that same height (below) so the track's
   per-frame spacing stays even regardless of how many lines any one
   frame's text actually wraps to — the translateY math only works if
   every stacked frame is the same height. */
.what-we-do-stat__heading-window {
	overflow: hidden;
	/* Same --wwd-reveal-height as the number/suffix windows (see
	   .what-we-do-stat__cycle.is-animated) rather than an em-multiple of
	   this element's own (much smaller, differently-scaling) font-size —
	   sizing it relative to its own font-size could only ever match the
	   other two windows' pixel height at one specific viewport width,
	   drifting apart at every other width since the two font-size
	   clamp()s scale at different rates. This is comfortably taller than
	   the ~2.2em (2 real lines) the copy needs at every width in
	   practice — see the padding-top note below for how that's split. */
	height: var(--wwd-reveal-height);
	/* Wide enough that the longest real heading ("Increase in total
	   conversion value.") still wraps to 2 lines, not 3 (26rem wrapped to
	   3 and overflowed this window's fixed 2-line height, causing lines
	   to visibly overlap the next frame) — but narrow enough that the
	   shorter headings still break where they're meant to: "Higher" /
	   "conversion rate." and "Lower total cost" / "per acquisition.",
	   not wider single-line-per-half wraps. */
	max-width: 30rem;
	margin-left: 0.45em;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: var(--wwd-heading-font);
	line-height: 1.1;
	color: var(--color-white);
}

.what-we-do-stat__heading-track {
	display: flex;
	flex-direction: column;
}

.what-we-do-stat__heading-track > span {
	display: flex;
	align-items: center;
	height: var(--wwd-reveal-height);
	/* Reserves whatever's left over above the real 2.2em (2 lines) the
	   copy needs as the gap (see .what-we-do-stat__heading-window's own
	   comment on why the window is --wwd-reveal-height tall rather than
	   an em-multiple of this element's own font-size), so centring below
	   applies to that real 2.2em rather than the full box. That's what
	   keeps a 1-line heading like "Higher ROI." centred in the same band
	   a 2-line one fills, instead of sitting flush at the bottom. */
	padding-top: calc(var(--wwd-reveal-height) - 2.2em);
	box-sizing: border-box;
}

.what-we-do-stat__divider {
	margin: 20px 0 12px;
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.4);
}

/* The citation logo (currently always McKinsey Global Institute's own
   wordmark, assets/images/what-we-do/mckinsey-global-institute.svg — a
   fixed brand mark, not something that varies per page the way the rest
   of this template's content does) is already white in the source SVG,
   sized to its own real aspect ratio (151.217 / 34.5261) rather than a
   fixed height so it doesn't distort. */
.what-we-do-stat__citation {
	display: block;
	width: clamp(90px, 10vw, 151px);
	height: auto;
}

/* Only present when an optional citation URL is set (template-what-we-do.php)
   — a plain block wrapper so the logo inside keeps the exact same layout
   whether or not it's actually a link. */
.what-we-do-stat__citation-link {
	display: block;
	width: fit-content;
	opacity: 1;
	transition: opacity 0.2s ease;
}

.what-we-do-stat__citation-link:hover,
.what-we-do-stat__citation-link:focus-visible {
	opacity: 0.75;
}

.what-we-do-list {
	padding-block: clamp(56px, 8vw, 96px);
}

.what-we-do-list__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding-block: 43px;
}

.what-we-do-list__divider {
	margin: 0;
	border: none;
	border-top: 1px solid var(--color-ink);
}

.what-we-do-list__text {
	display: flex;
	align-items: center;
	gap: clamp(24px, 5vw, 80px);
}

.what-we-do-list__title {
	margin: 0;
	/* Fixed, not min-width — with just a min-width, each title only took as
	   much room as its own text needed, so the description column started
	   at a different point on every row depending on how long that row's
	   title happened to be. A fixed width lines every description up at
	   the same spot; longer titles ("Account Based Marketing", "Data,
	   Analytics & CRM") wrapping to 2 lines here is expected and fine. */
	width: 21rem;
	flex-shrink: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.75rem, 7vw, 2.5rem);
	line-height: 1.25;
	color: var(--color-ink);
}

.what-we-do-list__description {
	margin: 0;
	max-width: 37rem;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--color-ink);
}

.what-we-do-list__cta {
	flex-shrink: 0;
}

.what-we-do-closing {
	padding-top: clamp(32px, 4vw, 60px);
	padding-bottom: clamp(48px, 6vw, 90px);
}

/* Orange reveal on scroll, ported from .oa-technology__copy-wrap/__accent
   (our-agency.css/js) rather than rebuilt — same mechanic: overflow:hidden
   here clips the accent bar to exactly this paragraph's own box, and
   what-we-do.js repositions the bar on every scroll frame so its bottom
   edge stays locked to a fixed point in the viewport, mix-blend-mode:screen
   tinting whatever text has scrolled past that line. This section sits
   right above the footer at the very bottom of the page, with much less
   scroll distance below it than the Our Agency original had — see
   what-we-do.js's own comment on why LINE_AT is tuned much higher here. */
.what-we-do-closing__copy-wrap {
	position: relative;
	overflow: hidden;
}

.what-we-do-closing__copy {
	position: relative;
	margin: 0;
	max-width: 56.5rem;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	line-height: 1.4;
	color: var(--color-ink);
}

@media (max-width: 900px) {
	.what-we-do-closing__copy {
		font-size: 1.8rem;
	}
}

/* Links to /contact/ (template-what-we-do.php) — same look as the plain
   text it replaces, not a default blue underlined link. */
.what-we-do-closing__link {
	color: inherit;
	text-decoration: none;
}

.what-we-do-closing__accent {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--accent-top, 0px);
	/* Unlike the homepage hero (a self-contained box whose OWN height needs
	   to stay visually stable), this bar's top is already continuously
	   recalculated from window.innerHeight on every scroll frame (see
	   what-we-do.js) — a live viewport unit is the right tool here, not a
	   bug to work around. svh (the smallest possible viewport) is still the
	   safer of the two: 100vh briefly overshoots what's actually visible
	   while a mobile toolbar is showing, which this bar doesn't need. */
	height: 100vh;
	height: 100svh;
	background: var(--color-accent);
	mix-blend-mode: screen;
	pointer-events: none;
}

/* Mobile-only — see .what-we-do-closing__cta's own rule (900px query below)
   and template-what-we-do.php's markup comment. Desktop has no equivalent
   in this design, only the plain text link inside the quote itself. */
.what-we-do-closing__cta {
	display: none;
}

@media (max-width: 900px) {
	/* The full-screen-then-shrink hero intro is a deliberate desktop effect
	   (see .what-we-do-hero's own comment) — on mobile it isn't wanted at
	   all, so both states are pinned to the SAME settled height/position
	   with the transition switched off, rather than just disabling the
	   transition alone (which would still show the full-screen state
	   first, then SNAP to settled instead of gliding — same unwanted
	   movement, just instant instead of animated). what-we-do.js still
	   removes .is-intro after its hold regardless of width; with both
	   states identical here, that removal is a visual no-op on mobile. */
	.what-we-do-hero,
	.what-we-do-hero.is-intro {
		height: clamp(360px, 55vh, 788px);
		transition: none;
	}

	.what-we-do-hero__inner,
	.what-we-do-hero.is-intro .what-we-do-hero__inner {
		bottom: min(clamp(48px, 6vw, 90px), clamp(32px, calc(23.6vh - 122px), 90px));
		transition: none;
	}

	.what-we-do-intro {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}

	.what-we-do-intro__arrow {
		display: none;
	}

	/* Figma's mobile intro keeps this large/prominent rather than shrinking
	   it down with the viewport the way the fluid clamp() above does —
	   floor raised to stay close to its own ceiling instead of tapering
	   much below it. */
	.what-we-do-intro__label {
		font-size: clamp(1.5rem, 4vw, 1.5625rem);
	}

	.what-we-do-list__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.what-we-do-list__text {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	/* Exception to the site's global mobile h2 baseline (2.3rem, see
	   base.css) — requested smaller specifically for this list. */
	.what-we-do-list__title {
		width: auto;
		font-size: 1.7rem;
	}

	/* Figma's mobile list drops the per-row CTA entirely — one button lives
	   at the very end of the page instead (see .what-we-do-closing__cta). */
	.what-we-do-list__cta {
		display: none;
	}

	.what-we-do-closing {
		padding-top: 8px;
		text-align: center;
	}

	.what-we-do-closing__cta {
		display: inline-flex;
		margin-top: 32px;
	}

	/* Figma's mobile stat block drops the auto-rotating "slot machine" reel
	   entirely — what-we-do.js skips building the .is-animated version at
	   this width (see its own comment), leaving the plain markup below:
	   EVERY stat shown at once as a centred, divided list, rather than the
	   .what-we-do-stat__row.is-active-only static fallback these rules were
	   originally written for (a no-JS/no-animation safety net, not a
	   deliberate mobile layout — repurposed here since it already renders
	   the right underlying markup, just needs every row visible instead of
	   only the first). */
	.what-we-do-stat {
		align-items: center;
		text-align: center;
	}

	.what-we-do-stat__cycle {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.what-we-do-stat__row {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding-bottom: 24px;
		margin-bottom: 24px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	}

	.what-we-do-stat__row:last-child {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}
}

/* This file previously only had the 900px query above (tablet-width grid
   collapses) — 700px is the site's established second tier for phone-width
   tightening (base.css's nav, blog.css, work.css etc. all use it too), and
   this template was missing it entirely. */
@media (max-width: 700px) {
	/* The 1340/745 aspect-ratio is tuned for a wide desktop card — held onto
	   a ~340px-wide mobile .container, that same ratio comes out under
	   190px tall, not nearly enough room for the label, the number/suffix/
	   heading row, the divider, AND the citation logo without clipping.
	   aspect-ratio:auto lets the box grow to whatever height its own
	   padding + content actually need instead. */
	.what-we-do-stat {
		aspect-ratio: auto;
		--wwd-number-font: clamp(2.5rem, 12vw, 4rem);
		--wwd-heading-font: clamp(1.5rem, 6vw, 2.25rem);
	}
}