/* ==========================================================================
   Base elements, layout primitives and shared components.

   Written as plain, readable CSS on purpose: the whole reason for leaving
   Showit is that the team wants to edit HTML and CSS directly. No build step,
   no preprocessor, no utility-class soup to decode.
   ========================================================================== */

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

/* scroll-padding-top keeps anchor targets and focus-driven scrolls clear of
   the sticky header (var(--header-h)), so a heading or button never lands
   underneath it. Uses the token, so it tracks the header's height at every
   breakpoint. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  /* The mobile nav drawer is position:fixed and parked off-screen right with
     translateX(100%). Fixed elements are laid out against the root, so body's
     overflow-x:hidden below can't contain it; without this the document is
     twice the viewport wide and swipes sideways into empty space on every
     page. Clipping at the root is the one place that reaches a fixed child.
     Vertical scrolling and the sticky header are unaffected. */
  overflow-x: hidden;
  /* Scales up the whole page at once: every rem-based size (the type scale, the
     rem parts of the fluid clamp() headings) grows from this one root. Bumped so
     the content reads larger and fills more of a wide screen. */
  font-size: 110%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  /* `clip`, not `hidden`: overflow-x:hidden makes the body a scroll container
     (it computes overflow-y to auto), which breaks the sticky header — it
     scrolls away instead of pinning. `clip` still contains horizontal overflow
     but establishes no scroll container, so position:sticky keeps working. The
     fixed mobile drawer is clipped at the root (html) regardless. */
  overflow-x: clip;
  /* Both from the V2 design's body rule. Proxima Nova renders heavy on macOS
     without the first of these. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* No browser inherits font-family into a form control, so without this a
   <button>, <input> or <select> silently drops to the UA font (Arial) while
   everything around it is Proxima Nova. Several components set var(--font)
   by hand for exactly this reason; this catches the ones that were missed,
   the mobile menu button among them. Only the family is inherited: font-size
   is left alone, since the components size their controls deliberately. */
button, input, select, textarea { font-family: inherit; }

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--pink-text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible focus ring. Showit's output has none, so the current site is not
   keyboard-navigable in any usable way. */
:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---- Type ---------------------------------------------------------------- */

/* var(--navy) is the same value the V2 design calls --ink, so headings land on
   the design's headline colour without a rename. The tight tracking is doing
   real work here: at the top weight Proxima Nova needs the -.02em to stop the
   big headlines looking loose. */
h1, h2, h3, h4 {
  margin: 0 0 0.4em;
  color: var(--navy);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}

h1 { font-size: var(--fs-title); }
h2 { font-size: var(--fs-heading); }
/* Sitewide headline fix: balance wrapped lines so a headline never strands a
   single word or short fragment on its own line. Works alongside the intended
   two-colour <br> splits; only the auto-wrapped remainder is balanced. */
h1, h2 { text-wrap: balance; }
/* At phone widths the heading container cannot widen (it is viewport-bound), so
   step H1/H2 down a notch. With text-wrap:balance this stops long two-colour
   second lines from stranding a single word. Desktop/tablet sizes are untouched. */
@media (max-width: 430px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
}
h3 { font-size: var(--fs-h3); }
/* Card and panel headings sit at 800 in the design, not 900. */
h3, h4 { font-weight: 800; letter-spacing: -0.01em; line-height: var(--lh-snug); }
h4 { font-size: 1.02rem; }

/* Weight 500 (Proxima Nova Medium, a real cut) rather than 400, so running copy
   reads a touch heavier and holds up better on both the light and dark bands. */
p { margin: 0 0 1.1em; font-weight: 500; }
p:last-child { margin-bottom: 0; }

/* The pink half of a two-tone headline, e.g. "Direct Mail That / Really
   Delivers." where the second line is pink. */
.accent { color: var(--pink); }
.text-white, .text-white h1, .text-white h2, .text-white h3, .text-white p { color: var(--white); }

/* Power-word emphasis for running copy: a weight and colour jump so the phrase
   that carries the point catches the eye without shouting. Navy on light bands;
   pure white on the dark bands so it is the brightest thing in the line. (White
   is only used on the dark bands: on the light bands it would vanish, so those
   stay navy.) */
.pop { font-weight: 700; color: var(--navy); }
/* On the dark bands the white emphasis goes to extrabold (800, the heaviest real
   Proxima Nova cut) so it carries even more against the navy. */
.section--deep .pop,
.section--navy .pop,
.points .pop { color: var(--white); font-weight: 800; }

/* Small uppercase label above a heading. Showit calls these eyebrows and marks
   them up as h3, which is part of why heading order is broken sitewide. Here
   it is a styled span so the document outline stays correct. */
.eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--pink-text);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: var(--lh-snug);
}
/* On a dark band the eyebrow goes arctic, which is the design's .on-dark. */
.eyebrow--light { color: var(--arctic); }

/* --muted was the near-white eyebrow the live site put on its colour bands. It
   is keyed off the band rather than fixed, because the class is used on light
   bands too (the /about hero, for one) where a pale value is 1.5:1 and the
   eyebrow simply is not there. So: pink by default, and lightened only where
   the band behind it is actually dark.

   The eyebrow is 11.5px uppercase, which counts as small text and needs 4.5:1.
   --pink-text on a light band clears it; arctic on the navy bands clears it by
   a wide margin. See --pink-text in tokens.css. */
.eyebrow--muted { color: var(--pink-text); }
.section--navy .eyebrow--muted,
.section--deep .eyebrow--muted,
.hero--dark .eyebrow--muted,
.points .eyebrow--muted,
.cta-band .eyebrow--muted { color: var(--arctic); }

.subheading {
  font-size: var(--fs-subheading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: var(--lh-snug);
  color: var(--navy);
}
/* Some of these subheads are sentence case on the live site, not caps. */
.subheading--plain { text-transform: none; }

.lead { font-size: var(--fs-body-lg); line-height: 1.7; }

/* ---- Layout -------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow { max-width: 860px; }

/* Long-form legal copy (Terms, Privacy). A single left-aligned reading column
   that reads like a document rather than marketing sections: section titles get
   air above them, paragraphs sit at a comfortable measure, and the trailing
   contact/updated block is set apart. */
.legal { text-align: left; }
.legal h2 {
  font-size: var(--fs-h3);
  margin: 2em 0 0.5em;
  padding-top: 1.4em;
  border-top: 1px solid var(--line-soft);
}
.legal > p:first-child { font-size: var(--fs-body-lg); line-height: 1.7; }
.legal ul { margin: 0 0 1.1em; padding-left: 1.3em; }
.legal ul li { margin-bottom: 0.4em; }
.legal__contact { margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--line-soft); }
.legal__contact-label { font-weight: 700; margin-bottom: 0.3em; }
.legal__contact address { font-style: normal; line-height: 1.8; }
.legal__updated { margin-top: 1.4em; font-size: 0.9rem; color: var(--muted-text, inherit); }

/* Section rhythm is one token so the whole site can be compacted by setting
   --sp, which is how the design's own density control worked. */
.section { padding: var(--section-pad) 0; }
.section--tight { padding: calc(var(--section-pad) * 0.62) 0; }
.section--light { background: var(--bg-soft); }
.section--navy { background: var(--navy); color: var(--white); }
/* The design's darkest band, used for heroes and the "why us" panels. */
.section--deep { background: var(--deep-navy); color: var(--white); }
/* There is deliberately no .section--pink or .section--teal. Pink and turquoise
   are accents here: type, icons, rules, badges and buttons. A whole band or card
   in either one is what the brand pink and turquoise are NOT for, per Owen, so
   every band that used to carry one now carries --navy or --deep-navy. */
.section--navy h2, .section--navy h3, .section--navy p,
.section--deep h2, .section--deep h3, .section--deep p { color: var(--white); }
.section--navy li, .section--deep li { color: var(--white); }
/* Body copy on the dark bands is held back to 66% white in the design rather
   than run at full strength, which is most of what keeps them from shouting. */
.section--navy > .container p,
.section--deep > .container p { color: var(--white); }
.section--navy > .container p.lead,
.section--deep > .container p.lead { color: var(--white); }

/* A colour band with a photograph behind it, held back far enough that the
   copy on top still reads. Showit paints these as absolutely-positioned
   canvas layers; here the photo is one <img> the band clips. */
.section--photo { position: relative; overflow: hidden; }
.section--photo > .container { position: relative; z-index: 1; }
.section__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Held well back by default: every band carrying a photo also carries copy on
   top of it, and these photographs are light. */
.section--photo > .section__bg { opacity: 0.24; }

/* In a CONTENT section the title (eyebrow + heading) is centred on the page, and
   the body copy under it is centred too, on a capped measure so the centred lines
   stay short and readable. The block is centred so its heading lands at page
   centre. */
.section__head { max-width: 780px; margin: 0 auto clamp(32px, 4vw, 56px); text-align: center; }
.section__head p { text-align: center; max-width: 640px; margin-inline: auto; }
/* Retained as a no-op alias now that centred body copy is the default, so the
   markup that opted in still resolves. */
.section__head--body-center p { text-align: center; max-width: 640px; margin-inline: auto; }
.section__head--center { margin-left: auto; margin-right: auto; }
.hero .container--narrow:has(> h1) { text-align: center; }

/* A page's opening HERO is the exception: it centres its WHOLE content, so the
   icon, eyebrow, heading, body copy and CTA all line up on one centre axis.
   Scoped to .hero so content sections keep the centred-heading / left-body
   pattern above. */
.hero .section__head p,
.hero .container--narrow:has(> h1) p { text-align: center; }
.hero .hero__body { margin-inline: auto; }
.hero .section__head .btn-row,
.hero .container--narrow:has(> h1) .btn-row { justify-content: center; }
.hero .section__head .hero__icon { margin-inline: auto; -webkit-mask-position: center; mask-position: center; }

/* Sitewide headline fix: a page's opening hero heading gets room to hold its two
   intended (white / pink) lines at desktop and tablet, so the 780px content cap
   can't force a second wrap that strands a word. The hero body copy is re-capped
   so only the heading widens, not the paragraph measure. */
.hero .section__head { max-width: 1200px; }
.hero .section__head .hero__body,
.hero .section__head p { max-width: 640px; margin-inline: auto; }

/* A row of cards that straddles the seam between two bands, which is the one
   layout signature the live design repeats on nearly every page. */
.overlap {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--overlap-pull));
  margin-bottom: clamp(40px, 5vw, 72px);
}

/* The row climbs --overlap-pull into the band above, so that band's own
   padding-bottom is the only thing keeping the row off its last line of copy.
   The default padding is smaller than the pull, which is why the first row of
   industry tiles landed on the /industries hero paragraph. Reserving the pull
   plus a clear gap fixes every .overlap page at once and keeps the straddle
   itself intact: the band grows, the cards do not move relative to the seam. */
:is(.hero, .section):has(+ .overlap) {
  padding-bottom: calc(var(--overlap-pull) + var(--overlap-clear));
}

/* The last content section runs straight into the navy .site-footer. A dark
   closer (.cta-band, which most pages end on) merges into the footer cleanly,
   and a filled --light band keeps its own colour right up to the seam. But a
   plain white section stacks its padding-bottom on top of the footer's
   padding-top, leaving a tall white void trapped against the dark footer, which
   is what makes the homepage's card-to-footer gap read as disproportionate. Drop
   that section's bottom padding so the footer's own padding-top owns the gap: one
   deliberate space, not two summed. Scoped to transparent sections; --light,
   --navy and --deep bands are left alone because their fill contains the space. */
body:has(> .site-footer) main > .section:last-child:not(.section--light):not(.section--navy):not(.section--deep) {
  padding-bottom: 0;
}

.grid { display: grid; gap: clamp(24px, 3vw, 40px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Constrain and centre a short row (e.g. two a la carte cards) so the cards do
   not stretch the full container width. */
.grid--center { max-width: 760px; margin-inline: auto; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* A two-up stat pair, centred as a tidy group rather than spread to the full
   container width. Used by the industry pages that carry only two trust stats,
   so they no longer sit lop-sided in a three-column grid. */
.grid.stats-pair { max-width: 620px; margin-inline: auto; }
/* Two content cards centred as a pair, so a section with only two cards is not
   left-weighted in a three-column grid. Width keeps each card close to the size
   it has on the three-card industry pages. */
.grid.card-pair { max-width: 760px; margin-inline: auto; }

/* Asymmetric split used by the hero: image left, copy right. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--reverse > :first-child { order: 2; }
/* A grid track's automatic minimum is its content's min-content width, so a
   carousel (whose slides are min-width:100% of a flex track) blows its column
   out and squeezes the other one to nothing. */
.split > *, .grid > * { min-width: 0; }
/* The testimonial bands give the heading roughly 40% and the quote the rest. */
.split--lead { grid-template-columns: 0.8fr 1.2fr; }
/* Tips the balance towards the media column. Used where the copy is short and
   the photos would otherwise leave a band of empty space beside it. Kept mild
   on purpose: past about 1.1fr the heading loses a word to a fifth line. */
.split--media-wide { grid-template-columns: 0.9fr 1.1fr; }

@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .grid--2, .grid--4, .split { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
}

/* ---- Buttons ------------------------------------------------------------- */
/* The V2 design's .btn family. Two things differ from the old Showit buttons
   and both are deliberate:

     - hover keeps the fill and deepens the shadow instead of swapping pink for
       navy. The old swap made every CTA change meaning on hover.
     - the lift is on transform only, so it composites on the GPU and cannot
       reflow the row it sits in.

   The shadow is tinted to the button's own fill, which is what stops a pink
   CTA from looking like it is floating over a grey smudge. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  /* --pink-text (#d51d6d), not --pink: at the 0.82rem/800 button size, white on
     the true brand pink is 4.30:1, under the 4.5:1 AA floor for normal text.
     This darker cut clears 4.97:1. Pink FILLS elsewhere and display pink stay
     --pink; only the button label needs the darker ground. */
  background: var(--pink-text);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--fs-button);
  font-weight: 800;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-pink);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-pink-hover); }
.btn:active { transform: translateY(0); }

.btn--secondary { background: var(--navy); box-shadow: var(--shadow-navy); }
.btn--secondary:hover { box-shadow: 0 14px 30px -10px rgba(11, 59, 96, 0.6); }

/* The design's btn-ghost-navy: a hairline in --line that firms up to navy on
   hover, rather than a 2px navy border that reads as a second primary button. */
.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--navy);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--navy); background: transparent; color: var(--navy); box-shadow: none; }

/* btn-ghost-light: the outline button on a dark band. */
.btn--ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white);
  box-shadow: none;
}
.btn--ghost-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); box-shadow: none; }

.btn--on-navy { background: var(--white); color: var(--navy); box-shadow: none; }
.btn--on-navy:hover { background: var(--white); color: var(--navy); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.35); }

.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.btn-row--center { justify-content: center; }

/* ---- Cards --------------------------------------------------------------- */

/* The design draws cards at 1.5px so the border stays visible against
   --bg-soft, which a 1px hairline does not. */
.card {
  padding: clamp(24px, 2.6vw, 32px);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-card);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 10px; }
.card p { font-size: var(--fs-small); line-height: 1.6; margin: 0; }
.card p + p { margin-top: 10px; }

/* Borderless tinted card. The live site alternates: off-white cards on a white
   band, white cards on an off-white band, never a border on either. */
.card--soft { background: var(--bg-soft); border-color: transparent; }
.section--light .card--soft { background: var(--white); }

/* A card is its own surface. Without this it inherits the white text colour of
   a navy, pink or teal band, so a quote sitting in a white card on the pink
   testimonial band renders white on off-white. */
.card:not(.card--solid) { color: var(--ink); }
.card:not(.card--solid) h3 { color: var(--navy); }
/* The band rules target p and li directly, so inheritance alone is not enough. */
.card:not(.card--solid) p,
.card:not(.card--solid) li { color: var(--ink); }

/* Card heading accents. The live design cycles pink, navy, teal and light blue
   across a row rather than colouring every heading the same. Written with two
   classes so they outrank the band reset above. Each also sets the icon colour,
   because on the live site an icon always matches its card's accent. */
.card.card--pink h3 { color: var(--pink-text); }
.card.card--navy h3 { color: var(--navy); }
.card.card--teal h3 { color: var(--teal-text); }
.card.card--sky h3 { color: var(--sky-text); }
.card--pink { --icon-color: var(--pink); }
.card--navy { --icon-color: var(--navy); }
.card--teal { --icon-color: var(--teal-text); }
.card--sky { --icon-color: var(--sky-text); }

/* Fully filled cards, used for the "Our People" row. The copy is white on these,
   so a masked icon takes white too rather than the band accent it would get on a
   soft card. */
.card--solid { border: 0; --icon-color: var(--white); }
.card--solid h3, .card--solid p { color: var(--white); }
/* Both "Our People" rows are filled with --deep-navy throughout. They used to
   mix the two navies to give the row some rhythm, but in practice one darker
   card among three lighter ones just read as a mistake, so the row is now one
   flat colour. --fill-navy is kept as a variant but is currently unused; if you
   reach for it, do not put it in the same row as --fill-deep. */
.card--solid.card--fill-navy { background: var(--navy); }
.card--solid.card--fill-deep { background: var(--deep-navy); }

.card__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  object-fit: contain;
  object-position: left center;
}

/* Several icons in the export are filled white, because Showit paints them on
   a navy band rather than inside a card. Dropped straight onto an off-white
   card they disappear, so they are drawn as a mask instead and take the card's
   accent colour. Used on a <span>: masking an <img> would leave its own white
   pixels on top of the tint. Set the file with style="--icon:url(...)". */
.card__icon--tint {
  display: block;
  background-color: var(--icon-color, var(--pink));
  -webkit-mask: var(--icon) no-repeat left center / contain;
  mask: var(--icon) no-repeat left center / contain;
}
/* Centre the masked glyph, for icons that sit above centred content (stats). */
.card__icon--center {
  -webkit-mask-position: center;
  mask-position: center;
  margin-inline: auto;
}

a.card, a.card:hover { text-decoration: none; color: inherit; }

/* The same whole-card click target for a card that already carries its own CTA
   button, where wrapping the card in an <a> would nest one link inside another.
   The button stays the only link on the card: its ::after stretches over the
   card box, so the card has one destination and one focus stop.

   Two consequences to keep in mind when using this: nothing else inside such a
   card can be interactive, and text on the card is no longer selectable.

   The button's own hover lift is dropped here, because a transform on the
   button would make it the containing block for that ::after and collapse the
   hit area back to the button. The card lift covers the affordance instead. */
.card--link { position: relative; cursor: pointer; }
.card--link .btn::after { content: ''; position: absolute; inset: 0; }
.card--link .btn:hover { transform: none; }
/* Pointer anywhere on the card, so the button reads as the thing being hit.
   The lift is unavailable here (see above), so the shadow carries the state. */
.card--link:hover .btn { box-shadow: var(--shadow-pink-hover); }
.card--link:hover .btn--secondary { box-shadow: 0 14px 30px -10px rgba(11, 59, 96, 0.6); }

/* Icon in a filled tile, as used in the three-points band. The design draws
   these as rounded squares rather than circles (.mw-tier-ico, .mw-why-ico), so
   the geometry follows it, but the fill stays solid and saturated: the icons
   inside are white-filled <img> artwork from the Showit export, and the
   design's own treatment (accent icon on a 14%-alpha tint) would render them
   as white-on-near-white. */
.icon-circle {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: var(--radius-card);
  background: var(--pink);
}
.icon-circle svg, .icon-circle img { width: 38px; height: 38px; }
.icon-circle svg { fill: var(--white); }
/* Arctic is too light to carry white artwork, so the sky variant takes the
   darker arctic value. The old rule tinted `svg` only and never applied to the
   <img> icons these are actually used with, so this was white-on-#9DDAE7. */
.icon-circle--sky { background: var(--arctic-text); }
.icon-circle--teal { background: var(--turquoise); }
.icon-circle--navy { background: var(--navy); }

/* ---- Stat row ------------------------------------------------------------ */

.stat { text-align: center; }
.stat__value {
  display: block;
  color: var(--navy);
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  /* The figures count up on scroll, so equal-width digits stop the whole line
     from twitching sideways as they change. */
  font-variant-numeric: tabular-nums;
}
/* The design puts the accent on the suffix rather than the whole figure, so a
   "+" or "%" wrapped in <em> comes out pink against a navy number. */
.stat__value em { color: var(--pink); font-style: normal; }
.stat__label {
  display: block;
  margin-top: 6px;
  color: var(--graphite);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}
.section--navy .stat__label,
.section--deep .stat__label { color: var(--white); }
.section--navy .stat__value,
.section--deep .stat__value { color: var(--white); }
.section--navy .stat__value em,
.section--deep .stat__value em { color: var(--pink); }

/* The industry pages set the same three statistics much smaller, in body ink
   rather than pink, with the icon above the number. */
.stat--compact .stat__value {
  color: var(--navy);
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  text-transform: uppercase;
}
.stat--compact .stat__label {
  color: var(--graphite);
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: 0;
  text-transform: none;
}
.stat__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  object-fit: contain;
}

/* ---- Media --------------------------------------------------------------- */

.media { border-radius: var(--radius-card); overflow: hidden; }
.media img, .media video { width: 100%; }

.embed {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--deep-navy);
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Utilities ----------------------------------------------------------- */

.center { text-align: center; }
/* Even out multi-line headings so a lone short word does not drop to its own
   line. Progressive enhancement: ignored where text-wrap:balance is unsupported. */
.balance { text-wrap: balance; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}