/* ============================================================
   CASE STUDY PAGES — /case-studies/{client}/
   ============================================================
   Architecture is the Carpet Court project page
   (templates/page-project-carpet-court.html, patterns/proj-cc-*):
   hero → stat strip → article + sticky sidebar → lead form. The
   COMPONENTS are the same ones; the DESIGN is the
   current light system rather than that page's March dark theme.

   Written as its own `.ac-cs-*` namespace instead of reusing
   ac-projects.css. That file is dark end to end and carries its
   own radii and type scale, so retoning it would have meant a
   second !important layer fighting rules we do not control. A new
   namespace needs no !important at all: nothing else on the site
   matches these selectors.

   WHAT IT INHERITS (do not restate here)
     - ac-interior-system.css  7rem gutters + 1680px caps, widened
       to 9rem below
     - ac-radius-system.css    --ac-r-sm/md/lg/xl, loaded at 102
     - ac-hero-tri.css         --ac-hero-band / --ac-hero-ramp /
       --ac-hero-veil, the standard left-heavy hero scrim
     - the site CTA band (.ac-cta-wrapper-bg) and #lead-form, both
       styled globally

   THE SYSTEM (mirrors ac-capp-system.css / ac-ind-system.css)
     1. SPACING  9rem side gutters on every band (→3rem ≤960,
        →1.25rem ≤600); 7rem/5rem/3.5rem vertical rhythm.
     2. COLOUR   light below the hero: white grounds + #08222E ink.
        The HERO STAYS DARK, the same hands-off rule the homepage,
        capability and industry heroes follow.
     3. TYPE     section headings Inter clamp(2.5rem,4vw,3.75rem)
        /700/1.1/-0.02em; plain-caps eyebrows (no pill, no border);
        24px/1.7 #5A6B75 intros; left-aligned headers; the
        eyebrow →1.25rem→ heading →20px→ intro stack.

   ACCENTS  the brand gradient #07A9D1→#06CFC3 for graphic accents;
   #0A576B for accent text small enough to need the contrast.
   Never the a11y cyans as a decorative fill; they are for text.

   Applied 2026-09-25. Reversible: delete this file and its
   wp_enqueue_style( 'ac-case-study' ) in functions.php.
   ============================================================ */

body.ac-cs-page {
  --lt-page:         #FFFFFF;
  --lt-surface:      #FFFFFF;
  --lt-tint:         #E9F3F7;
  --lt-ink:          #08222E;
  --lt-grey:         #3F5560;
  --lt-prose:        #1E3A46;
  --lt-border:       rgba(9, 32, 42, 0.10);
  --lt-border-brand: rgba(7, 169, 209, 0.22);

  /* Accent text that sits on white at body size or smaller. The
     brand #07A9D1 fails AA there; these are the approved pair. */
  --lt-accent-text:  #0A576B;
  --lt-accent-link:  #067A99;

  /* Graphic accents only — rules, bullets, gradient fills. */
  --ac-grad: linear-gradient(135deg, #07A9D1 0%, #06CFC3 100%);

  /* Legacy vars some shared components read. */
  --ac-text-dark: #08222E;

  background-color: var(--lt-page);
  color: var(--lt-ink);
}

/* ============================================================
   1. SPACING — 9rem side gutters on every band
   ============================================================ */
body.ac-cs-page :is(
  .ac-cs-hero,
  .ac-cs-stats,
  .ac-cs-body,
  .ac-cta-wrapper-bg,
  .ac-footer
) {
  padding-left: 9rem;
  padding-right: 9rem;
}
@media (max-width: 1280px) {
  body.ac-cs-page :is(
    .ac-cs-hero, .ac-cs-stats, .ac-cs-body,
    .ac-cta-wrapper-bg, .ac-footer
  ) {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media (max-width: 960px) {
  body.ac-cs-page :is(
    .ac-cs-hero, .ac-cs-stats, .ac-cs-body,
    .ac-cta-wrapper-bg, .ac-footer
  ) {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (max-width: 600px) {
  body.ac-cs-page :is(
    .ac-cs-hero, .ac-cs-stats, .ac-cs-body,
    .ac-cta-wrapper-bg, .ac-footer
  ) {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ============================================================
   2. HERO — dark, hands off
   The photo sits under the standard left-heavy scrim, same three
   gradient tokens the capability heroes use, so the copy column
   holds contrast without dimming the whole image.

   The background was proj-bg-link-foundation-new.webp: 1170px, 33KB,
   and generated from a 256-colour palettised PNG, which is what made
   the skin tones band across a band close to 1900px wide.

   The crop is cut 2200px in from the right of the 5568px original.
   `cover` on a band this wide shows the full width of whatever it is
   given, so there is no horizontal slack and background-position does
   nothing: taking the right edge off is the only way to move the
   subject across, and the narrower the frame gets the more the band
   zooms into it. At this cut the band shows about 58% of the frame's
   height and the stacked hands sit around 62% across, clear of the
   headline. Cutting 1700 instead is the halfway setting.

   Its replacement has to be a LANDSCAPE source. The client's other
   photograph of the same subject is portrait, and `cover` on a 2.6:1
   band always shows the full width of whatever it is given, so a
   portrait close-up has no framing to give: it arrives zoomed however
   it is cropped. That one is now the figure in the article, at 936px,
   where a close-up is a detail rather than a wall of fingers.

   No fold requirement (see the hero fold rule): this band is as
   tall as its copy plus nav clearance. Nothing below it is
   expected to show on screen one.
   ============================================================ */
body.ac-cs-page .ac-cs-hero {
  position: relative;
  color: #FFFFFF;
  background:
    var(--ac-hero-band), var(--ac-hero-ramp), var(--ac-hero-veil),
    url('../images/cs-link-foundation-hero.webp') center / cover no-repeat,
    #010D12;
  padding-top: 11rem;
  padding-bottom: 5rem;
  overflow: hidden;
}
@media (max-width: 960px) {
  body.ac-cs-page .ac-cs-hero {
    padding-top: 8rem;
    padding-bottom: 3.5rem;
  }
}

/* Hero content needs its own stacking context or it renders behind
   the background layers while still being hit-testable. */
body.ac-cs-page .ac-cs-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1680px;
  margin-inline: auto;
}

/* ── Meta row: the trail and the sector tag, on one line ── */
body.ac-cs-page .ac-cs-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 0 0 2.5rem;
}

/* ── Breadcrumb ──
   Every part of the trail is pinned here. The links were picking up
   18px/600 Inter from the global anchor styling while the current page,
   which only this file styles, stayed 14px/400 Source Sans 3: the last
   crumb read as a caption trailing off the end of two headings. The
   whole row now declares one face, one size and one weight, and only
   the colour separates a link from the page you are on. ── */
body.ac-cs-page .ac-cs-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
}
body.ac-cs-page .ac-cs-breadcrumb a {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.18s ease;
}
body.ac-cs-page .ac-cs-breadcrumb a:hover,
body.ac-cs-page .ac-cs-breadcrumb a:focus-visible {
  color: #FFFFFF;
  text-decoration: underline;
}
body.ac-cs-page .ac-cs-breadcrumb span[aria-hidden] {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.35);
}
/* The current page. Set to match the links exactly rather than left to
   inherit the nav's own dimmer colour: it is the last crumb, not a
   footnote, and reading as a lighter weight beside Home and Case
   studies made the trail look like it had run out. Size and weight are
   pinned for the same reason, so nothing downstream drifts one crumb
   away from the other two. */
body.ac-cs-page .ac-cs-breadcrumb span:not([aria-hidden]) {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
}

/* ── Tag pills. Deliberately still pills: the radius system keeps
      tag-shaped labels round (they read as tags, not panels). ── */
body.ac-cs-page .ac-cs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}
/* Solid white with ink on it. It was a 12% cyan wash with a 35% cyan
   hairline, which is a tint of the background rather than a colour:
   over a dark photograph it went to near-black and the white label on
   it had nothing to sit against. A filled pill does not depend on what
   the hero photo happens to be doing behind it. */
body.ac-cs-page .ac-cs-tag {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 100px;
  border: 1px solid #FFFFFF;
  background: #FFFFFF;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--lt-ink);
}
body.ac-cs-page .ac-cs-tag--quiet {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
}

/* ── Client lockup, under the tag row ──
   The lockup is 176x44 with the mark stacked over the wordmark, so a
   quarter of that height is type. 68px is where "The Link Foundation
   AOD" is still reading as words on a photograph rather than as a grey
   smudge under the mark. ── */
body.ac-cs-page .ac-cs-hero__logo {
  display: block;
  height: 68px;
  width: auto;
  margin: 0 0 1.75rem;
}
@media (max-width: 600px) {
  body.ac-cs-page .ac-cs-hero__logo { height: 56px; }
}

/* ── Title + standfirst ── */
body.ac-cs-page .ac-cs-hero__title {
  margin: 0 0 1.25rem;
  max-width: 20ch;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
body.ac-cs-page .ac-cs-hero__title strong {
  font-weight: 700;
  background: var(--ac-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.ac-cs-page .ac-cs-hero__sub {
  margin: 0;
  /* ch on the 22px body size, so the measure holds under body zoom
     rather than drifting the way a px cap would. */
  max-width: 62ch;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}
@media (max-width: 600px) {
  body.ac-cs-page .ac-cs-hero__title { max-width: none; }
  body.ac-cs-page .ac-cs-hero__sub { font-size: 20px; }
}

/* ── Share control ── */
body.ac-cs-page .ac-cs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
body.ac-cs-page .ac-cs-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 11px 20px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.07);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
body.ac-cs-page .ac-cs-action:hover,
body.ac-cs-page .ac-cs-action:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Like button and view count sit in the same row as share and borrow the
   same chip. Both counts arrive from ac/v1/engagement after load, so each
   number starts hidden and is unhidden once it has a value: an empty chip
   or a bare zero is worse than nothing. */
body.ac-cs-page .ac-cs-action__count {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.72);
}
body.ac-cs-page .ac-cs-action__count[hidden] { display: none; }

body.ac-cs-page .ac-cs-action--like .ac-cs-action__heart {
  transition: transform 0.18s ease;
}
body.ac-cs-page .ac-cs-action--like.is-liked {
  background: rgba(7, 169, 209, 0.18);
  border-color: rgba(6, 207, 195, 0.55);
}
body.ac-cs-page .ac-cs-action--like.is-liked .ac-cs-action__heart {
  fill: #06CFC3;
  stroke: #06CFC3;
  transform: scale(1.1);
}
body.ac-cs-page .ac-cs-action--like.is-liked .ac-cs-action__count {
  color: #FFFFFF;
}
body.ac-cs-page .ac-cs-action--like.is-liked:hover,
body.ac-cs-page .ac-cs-action--like.is-liked:focus-visible {
  background: rgba(7, 169, 209, 0.24);
  border-color: rgba(6, 207, 195, 0.7);
}
/* Liking is one-way, so the pressed state is not a hover target. */
body.ac-cs-page .ac-cs-action--like[aria-pressed="true"] { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  body.ac-cs-page .ac-cs-action--like .ac-cs-action__heart {
    transition: none;
    transform: none;
  }
  body.ac-cs-page .ac-cs-action--like.is-liked .ac-cs-action__heart { transform: none; }
}

/* The view count is a readout, not a control: same chip, no affordance. */
body.ac-cs-page .ac-cs-action--static {
  cursor: default;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.14);
  background: transparent;
}
body.ac-cs-page .ac-cs-action--static:hover {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.14);
}
body.ac-cs-page .ac-cs-action--static[hidden] { display: none; }

/* ── Share menu ──
   The button used to fire navigator.share and fall back to a silent
   clipboard write, which on a desktop browser meant a click with
   nothing to show for it. It now opens this: real links, so a share
   goes where the reader chose and a middle click still works. Light
   panel on a dark hero, because it reads as a layer above the page
   rather than more hero. */
body.ac-cs-page .ac-cs-share { position: relative; }
body.ac-cs-page .ac-cs-share__menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 40;
  min-width: 15rem;
  padding: 0.5rem;
  border-radius: var(--ac-r-md, 10px);
  background: #FFFFFF;
  border: 1px solid rgba(9, 32, 42, 0.10);
  box-shadow: 0 18px 44px rgba(8, 34, 46, 0.30);
  display: grid;
  gap: 2px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
/* display:grid above would otherwise beat the hidden attribute. */
body.ac-cs-page .ac-cs-share__menu[hidden] { display: none; }
body.ac-cs-page .ac-cs-share__menu.is-open {
  opacity: 1;
  transform: none;
}
body.ac-cs-page .ac-cs-share__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.8rem;
  border: 0;
  border-radius: var(--ac-r-sm, 8px);
  background: transparent;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--lt-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
body.ac-cs-page .ac-cs-share__item svg {
  flex: none;
  color: var(--lt-grey);
  transition: color 0.14s ease;
}
body.ac-cs-page .ac-cs-share__item:hover,
body.ac-cs-page .ac-cs-share__item:focus-visible {
  background: var(--lt-tint);
  color: var(--lt-accent-text);
}
body.ac-cs-page .ac-cs-share__item:hover svg,
body.ac-cs-page .ac-cs-share__item:focus-visible svg {
  color: var(--lt-accent-text);
}
@media (prefers-reduced-motion: reduce) {
  body.ac-cs-page .ac-cs-share__menu { transition: opacity 0.16s ease; transform: none; }
}
/* Below the hero the menu would otherwise run off the left gutter on a
   narrow screen; the button is near the edge there. */
@media (max-width: 480px) {
  body.ac-cs-page .ac-cs-share__menu { min-width: min(15rem, 78vw); }
}

/* Share confirmation. Fixed to the viewport rather than inline in the
   hero, because the copy can be triggered from the sticky-nav share on
   the way down the page and a confirmation you have already scrolled
   past confirms nothing. Dark pill so it reads on the hero image and on
   the white article band alike. */
body.ac-cs-page .ac-cs-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 9999;
  transform: translate(-50%, 0.75rem);
  padding: 0.85rem 1.5rem;
  border-radius: 100px;
  background: var(--lt-ink);
  color: #FFFFFF;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 12px 32px rgba(8, 34, 46, 0.32);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
body.ac-cs-page .ac-cs-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  body.ac-cs-page .ac-cs-toast {
    transition: opacity 0.22s ease, visibility 0.22s;
    transform: translate(-50%, 0);
  }
}

/* ============================================================
   3. STAT STRIP — first light band
   Three columns by default. Written as auto-fit so a four-stat
   case study drops in without touching this file.
   ============================================================ */
body.ac-cs-page .ac-cs-stats {
  background: var(--lt-page);
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
body.ac-cs-page .ac-cs-stats__inner {
  max-width: 1680px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2.5rem 3rem;
}
body.ac-cs-page .ac-cs-stat__num {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2.25rem, 3.2vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  /* The figures carry the brand gradient, which is what separates one
     stat from the next now that the vertical rules are gone. Only safe
     at this size and weight; the small accent text below stays on the
     solid --lt-accent-* tokens. */
  background: var(--ac-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.ac-cs-page .ac-cs-stat__label {
  display: block;
  margin-top: 0.75rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.55;
  color: var(--lt-prose);
  /* No measure. A 34ch cap held the label to roughly half its grid
     column, which pushed the longest of the three onto a third line on
     a full-width screen while the space beside it sat empty. The column
     is the measure. */
}
@media (max-width: 600px) {
  body.ac-cs-page .ac-cs-stats { padding-top: 3rem; padding-bottom: 3rem; }
}

/* ============================================================
   4. BODY — article + sticky sidebar
   ============================================================ */
body.ac-cs-page .ac-cs-body {
  /* White, not the tint. The article used to be a white card floating
     on a blue band; it now sits directly on the page. The tint is still
     the panel colour inside the article (the gap list, the quotes, the
     forward box), and those panels read better as the only tinted
     things on the page than they did as tint on tint. */
  background: var(--lt-page);
  padding-top: 7rem;
  padding-bottom: 7rem;
}
body.ac-cs-page .ac-cs-layout {
  /* Same 1680px cap as every other band inner on the site, so the
     article's left edge lines up with the hero and the stat strip
     above it. An earlier 1180px cap looked right in the source and
     wrong on screen: body carries zoom:0.80 site-wide, which scales
     declared px LENGTHS too, so 1180px rendered at 944px and inset
     the article ~130px further than the bands around it.
     The reading measure is held by a ch cap on the prose itself
     (below), not by squeezing the container. */
  max-width: 1680px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 5rem;
  align-items: start;
}
@media (max-width: 1100px) {
  body.ac-cs-page .ac-cs-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.5rem;
  }
}
@media (max-width: 600px) {
  body.ac-cs-page .ac-cs-body { padding-top: 4rem; padding-bottom: 4rem; }
}

/* ── Article ──
   No card chrome and no padding: the background, the border and the
   radius all existed to lift a white card off the blue band, and with
   the band white they only boxed the text in. Dropping the padding with
   them also lines the article's left edge up with the hero, the
   breadcrumb and the stat strip, which the 4rem inset did not. The band
   gutters above are what hold the text off the viewport edge. */
body.ac-cs-page .ac-cs-article {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* ── Section header stack: eyebrow →1.25rem→ heading →20px→ body ── */
body.ac-cs-page .ac-cs-eyebrow {
  display: inline-block;
  margin: 0 0 1.25rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--lt-accent-text);
}
body.ac-cs-page .ac-cs-section__title {
  margin: 0 0 20px;
  font-family: 'Inter', system-ui, sans-serif;
  /* One step down from the band-heading scale: these are headings
     inside a reading column, not section banners. */
  font-size: clamp(2rem, 2.9vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--lt-ink);
}
/* 22px, and darker. #35505C cleared AA at 8.6:1 but read as grey
   against the near-black headings; --lt-prose is 12:1, short of the
   headings' own 16:1 so the hierarchy survives, and the whole page
   steps up with it. Every body-weight rule below shares the token. */
body.ac-cs-page .ac-cs-section p {
  margin: 0 0 1.5rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.7;
  color: var(--lt-prose);
}
body.ac-cs-page .ac-cs-section p:last-child { margin-bottom: 0; }
/* No reading measure on the article blocks. An earlier 76ch cap on the
   prose (and 26ch on the headings) held a book-like line length, but
   inside this card it left a wide empty strip down the right-hand side
   of the column and read as a layout fault rather than as a measure.
   The text now runs the full width of the card, so the prose, the
   tinted panels and the dividers all share one right edge. The card's
   own 4rem padding is what keeps the lines off the border; headings
   still break sensibly because ac-site-system.css balances them. */
body.ac-cs-page .ac-cs-section p strong {
  font-weight: 700;
  color: var(--lt-ink);
}
body.ac-cs-page .ac-cs-section a {
  color: var(--lt-accent-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.ac-cs-page .ac-cs-section a:hover { color: var(--lt-ink); }

/* The article's one CTA. It sits inside a sentence rather than on its
   own line, so it is an inline pill: inline-flex centres the label,
   and baseline alignment keeps it sitting on the prose line instead of
   riding above it. The underline rule above has to be undone here, and
   the colour set on both states, or the link rules win on hover.
   Ink fill rather than the brand gradient, matching .ac-cs-cta__btn:
   white on #07A9D1 is 2.9:1, which fails at this label size.

   Scoped `.ac-cs-section a.ac-cs-inline-cta`, NOT `.ac-cs-inline-cta`.
   The underline rule above is (0,2,2) and a bare class here is (0,2,1),
   so the pill shipped with the body link's underline straight through
   it. Same specificity trap as the quote avatar further down. */
body.ac-cs-page .ac-cs-section a.ac-cs-inline-cta {
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  margin-left: 0.3rem;
  padding: 0.55rem 1.2rem;
  border-radius: 100px;
  background: var(--lt-ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: #FFFFFF;
  text-decoration: none;
  transition: background 0.16s ease, transform 0.16s ease;
}
body.ac-cs-page .ac-cs-section a.ac-cs-inline-cta:hover,
body.ac-cs-page .ac-cs-section a.ac-cs-inline-cta:focus-visible {
  background: #041620;
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  body.ac-cs-page .ac-cs-section a.ac-cs-inline-cta { transition: none; }
  body.ac-cs-page .ac-cs-section a.ac-cs-inline-cta:hover { transform: none; }
}
/* nowrap above keeps the label whole, so on a narrow column the pill
   drops to its own line rather than breaking across two. Taller here
   than on desktop: body zoom 0.80 means a declared height renders at
   80% of itself, so the 36px desktop pill measures 29px to a thumb.
   44px declared lands at ~35px real, clear of the 24px target floor. */
@media (max-width: 600px) {
  body.ac-cs-page .ac-cs-section a.ac-cs-inline-cta {
    margin-left: 0;
    margin-top: 0.75rem;
    padding: 0.8rem 1.4rem;
    font-size: 15px;
  }
}

body.ac-cs-page .ac-cs-divider {
  height: 1px;
  border: 0;
  margin: 3.5rem 0;
  background: var(--lt-border);
}

/* ── Gap list: what did not exist at the start. Crosses, in the
      attention red, so the "before" state reads as a deficit. ── */
/* No panel: these sit straight on the page. In a tinted box they read
   as an aside, something set apart from the argument, when they are the
   argument. Off the tint the list has to carry itself, so it steps up
   from 20px to 24px ink at 600 and takes more room between rows than
   the paragraphs around it. The red crosses do the rest. */
body.ac-cs-page .ac-cs-gaps {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
/* No font-family here on purpose. A global rule forces
   var(--font-secondary) on every li with !important, so declaring Inter
   would be a dead line that reads as a lie about what renders. Source
   Sans 3 at 600 is the voice these rows actually have, and it is the
   right one: they sit inside prose, not above it. */
body.ac-cs-page .ac-cs-gaps li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--lt-ink);
}
body.ac-cs-page .ac-cs-gaps svg {
  flex: none;
  width: 21px;
  height: 21px;
  margin-top: 0.3rem;
  color: #C62B30;
}
@media (max-width: 600px) {
  body.ac-cs-page .ac-cs-gaps li { font-size: 20px; }
}

/* ── Question list: the things that had to be decided before any
      of it could be built. Plain gradient dashes, because these are
      open questions, not a checklist of anything won or lost. ── */
body.ac-cs-page .ac-cs-qs {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
body.ac-cs-page .ac-cs-qs li {
  position: relative;
  padding-left: 2rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.6;
  color: var(--lt-prose);
}
/* 4px, not the 2px it started at. Every item sits at a different
   subpixel offset, because body zoom 0.80 makes the line-height plus
   gap stride fractional, and a 2px bar antialiased across two device
   rows on some items and one on others: the fourth dash rendered at
   roughly half the weight of the first three. 4px carries the same
   half-pixel drift without the weight visibly changing. top drops to
   0.7em to keep the bar optically centred at the larger height. */
body.ac-cs-page .ac-cs-qs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 1.25rem;
  height: 4px;
  border-radius: 999px;
  background: var(--ac-grad);
}

/* ── Build list: what we shipped. Same shape, brand tick. ── */
/* Set to match .ac-cs-gaps exactly. The two lists are the before and
   the after of the same argument and they sit three screens apart, so
   they have to be the same object: 24px/600 ink, same rhythm, same icon
   size. Only the mark changes, red cross to gradient tick. */
body.ac-cs-page .ac-cs-built {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
body.ac-cs-page .ac-cs-built li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--lt-ink);
}
body.ac-cs-page .ac-cs-built__tick {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 0.22rem;
  border-radius: 50%;
  background: var(--ac-grad);
  display: grid;
  place-items: center;
  color: #FFFFFF;
}
/* The line is already 600 ink, so strong only has the extra weight left
   to work with. That is enough: it is marking the noun inside the row,
   not lifting it off a lighter colour the way it did at 20px prose. */
body.ac-cs-page .ac-cs-built li strong {
  font-weight: 800;
  color: var(--lt-ink);
}
@media (max-width: 600px) {
  body.ac-cs-page .ac-cs-built li { font-size: 20px; }
}

/* ── Pull quote ── */
/* No panel. The quote sits on the page's own white, aligned to the
   prose column, and earns its break from the text through colour and
   size instead of a tinted box with a rule down the side. */
body.ac-cs-page .ac-cs-quote {
  margin: 3.25rem 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
body.ac-cs-page .ac-cs-quote__text {
  margin: 0 0 1.5rem;
  /* Uncapped like the prose around it. A 40ch pull-quote measure left
     the quote breaking at roughly 40% of a panel that now runs the full
     width of the card, which read as the panel being half empty. */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  /* Brand blue, not ink. With the panel gone this is the only thing
     separating the quote from the paragraphs above and below it. */
  color: var(--lt-accent-text);
}
body.ac-cs-page .ac-cs-quote__by {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
/* A photo since 2026-10-06, initials before that. The source is a
   wide shot with a second person at the left edge, so it is cropped
   square to the face before it gets here; object-fit only guards
   against a future file that is not already square. The gradient
   stays underneath as the fallback if the image ever fails to load. */
body.ac-cs-page .ac-cs-quote__avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ac-grad);
  object-fit: cover;
}
/* Scoped through the name div, NOT as `.ac-cs-quote__by span`. A bare
   descendant rule there scores (0,2,2) against the avatar's own
   (0,2,1), so back when the avatar was a <span> of initials it won:
   they came out grey, left-aligned and overflowing the circle instead
   of white and centred. The avatar is an <img> now, but the name and
   role beside it still need the scoped rules below. */
body.ac-cs-page .ac-cs-quote__by div strong {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--lt-ink);
}
body.ac-cs-page .ac-cs-quote__by div span {
  display: block;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--lt-prose);
}
@media (max-width: 600px) {
  body.ac-cs-page .ac-cs-quote { margin: 2.5rem 0; }
}

/* ── Figures ──
   The only photography in the article. No card chrome: a border and a
   fill around a photo on a white page reads as a stamp, and the radius
   is the page's own. Captions sit a step below the prose so they read
   as labels and not as one more paragraph.

   Full column width, like the prose, the tinted panels and the
   dividers. An inset plate was tried first and read as a layout fault
   for the same reason the old reading measure did: an empty strip down
   the right-hand side of one block and not the others. ── */
body.ac-cs-page .ac-cs-figure {
  margin: 2.5rem 0;
}
body.ac-cs-page .ac-cs-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ac-r-lg, 12px);
}
body.ac-cs-page .ac-cs-figure figcaption {
  margin-top: 0.9rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--lt-prose);
}

/* Pair: two portrait sources cropped square, so they share a baseline
   whatever the column does. aspect-ratio holds the square if one file
   is ever swapped for a crop that is not quite one. */
body.ac-cs-page .ac-cs-figure__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
body.ac-cs-page .ac-cs-figure--pair img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* The pair stacks on a phone rather than halving. Side by side it put
   the group shot, which has sixteen faces in it, at 152px wide: a
   texture, not a photograph. */
@media (max-width: 600px) {
  body.ac-cs-page .ac-cs-figure { margin: 2rem 0; }
  body.ac-cs-page .ac-cs-figure__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  body.ac-cs-page .ac-cs-figure figcaption { font-size: 16px; }
}

/* ── Forward box: what is still in flight ── */
body.ac-cs-page .ac-cs-forward {
  margin-top: 2rem;
  padding: 2rem 2.25rem;
  border-radius: var(--ac-r-lg, 12px);
  border: 1px solid var(--lt-border-brand);
  background: var(--lt-tint);
}
body.ac-cs-page .ac-cs-forward__label {
  display: inline-block;
  margin-bottom: 0.85rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lt-accent-text);
}
body.ac-cs-page .ac-cs-forward h3 {
  margin: 0 0 0.85rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--lt-ink);
}
body.ac-cs-page .ac-cs-forward p {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.7;
  color: var(--lt-prose);
}

/* ============================================================
   5. SIDEBAR
   ============================================================ */
body.ac-cs-page .ac-cs-aside {
  display: grid;
  gap: 1.5rem;
  /* Sticks past the fixed nav pill. Only while there is room for
     it: below 1100px the column is stacked and sticky is pointless. */
  position: sticky;
  top: 7.5rem;
}
@media (max-width: 1100px) {
  body.ac-cs-page .ac-cs-aside { position: static; }
}
/* 2rem of padding and 17px type throughout. At 1.75rem and 16px the
   column read as compressed next to 22px article prose: the problem was
   never the size on its own but six rows of it at 1.5 line-height in a
   22rem column with 1.75rem walls. Everything below opens up with it. */
body.ac-cs-page .ac-cs-card {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--ac-r-lg, 12px);
  padding: 2rem;
}

/* One sentence on the client, under the lockup. */
body.ac-cs-page .ac-cs-card__intro {
  margin: 0 0 1.5rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--lt-prose);
}
body.ac-cs-page .ac-cs-card__title {
  margin: 0 0 1.25rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--lt-accent-text);
}
body.ac-cs-page .ac-cs-card__title + .ac-cs-card__title { margin-top: 1.75rem; }

body.ac-cs-page .ac-cs-dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.25rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
/* Label, not a dimmer version of the value. It was --lt-grey, which put
   two greys of text in one card and made the column look washed out.
   The weight and the width separate a label from its value already. */
body.ac-cs-page .ac-cs-dl dt {
  color: var(--lt-prose);
  white-space: nowrap;
}
body.ac-cs-page .ac-cs-dl dd {
  margin: 0;
  font-weight: 600;
  color: var(--lt-ink);
}

body.ac-cs-page .ac-cs-card__rule {
  height: 1px;
  border: 0;
  margin: 1.75rem 0;
  background: var(--lt-border);
}

/* What we built. Dotted rows rather than one middot-run paragraph. The
   dot is the brand gradient: it is a graphic accent, which is what the
   gradient is for, and the a11y cyans are reserved for text. */
body.ac-cs-page .ac-cs-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}
body.ac-cs-page .ac-cs-card__list li {
  position: relative;
  padding-left: 1.15rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--lt-prose);
}
body.ac-cs-page .ac-cs-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ac-grad);
}

body.ac-cs-page .ac-cs-card__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}
body.ac-cs-page .ac-cs-card__links a {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--lt-accent-link);
  text-decoration: none;
}
body.ac-cs-page .ac-cs-card__links a:hover,
body.ac-cs-page .ac-cs-card__links a:focus-visible {
  color: var(--lt-ink);
  text-decoration: underline;
}

/* NOT CURRENTLY USED: the one card that carried it is a list now. */
body.ac-cs-page .ac-cs-card__meta {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--lt-prose);
}
body.ac-cs-page .ac-cs-card__meta + .ac-cs-card__meta { margin-top: 0.85rem; }

/* The client's mark. Height-constrained rather than width-constrained
   so a wide logo and a tall one land at the same optical weight. */
/* Was sized for the 116x70 mark on its own. The lockup is 4:1 with the
   wordmark under the mark, so it is set by the height that keeps the
   type legible rather than by the height the mark wants. */
body.ac-cs-page .ac-cs-card__logo {
  height: 56px;
  width: auto;
  display: block;
  margin-bottom: 1.25rem;
}

/* ── Sidebar CTA ──
   NOT CURRENTLY ON ANY PAGE. Removed from the Link Foundation sidebar
   on request; kept here because the next case study built on this shape
   may want it back. Delete this block and its siblings if it is still
   unused when a second study ships.

   Sits where the About card used to. Carries the brand gradient, so it
   is the one thing in a column of white reference cards that is asking
   for something. Type on it is ink rather than white: white on #07A9D1
   is 2.8:1 and fails, while ink clears 6:1 on the blue end of the ramp
   and better on the teal. */
body.ac-cs-page .ac-cs-card--cta {
  position: relative;
  overflow: hidden;
  background: var(--ac-grad);
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(7, 169, 209, 0.24);
}
body.ac-cs-page .ac-cs-cta__label {
  display: inline-block;
  margin-bottom: 0.85rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(8, 34, 46, 0.72);
}
body.ac-cs-page .ac-cs-cta__title {
  margin: 0 0 0.85rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #08222E;
}
body.ac-cs-page .ac-cs-cta__text {
  margin: 0 0 1.5rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(8, 34, 46, 0.86);
}
/* Ink pill, not white: a white button on the gradient reads as a hole
   punched in the card, and the dark fill is the only thing on the page
   with this much weight. */
body.ac-cs-page .ac-cs-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.75rem 1.5rem;
  border-radius: 100px;
  background: var(--lt-ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-decoration: none;
  transition: background 0.16s ease, transform 0.16s ease;
}
body.ac-cs-page .ac-cs-cta__btn:hover,
body.ac-cs-page .ac-cs-cta__btn:focus-visible {
  background: #041620;
  transform: translateY(-1px);
  color: #FFFFFF;
}
@media (prefers-reduced-motion: reduce) {
  body.ac-cs-page .ac-cs-cta__btn { transition: none; }
  body.ac-cs-page .ac-cs-cta__btn:hover { transform: none; }
}

/* ── About the client ──
   A SIBLING of .ac-cs-layout, not a grid item in it. It used to span
   both columns of that grid, which put the sticky sidebar's grid area
   at the foot of the grid rather than at the foot of the article: the
   CTA card slid down and sat on top of this panel. Outside the grid
   the sidebar stops where the article does, and the panel takes its
   width from the same 1680px cap every other band inner uses.

   Light, on the tint, with the same hairline the sidebar card carries.
   It was a dark panel, which separated it from the article but put a
   second dark block directly above the dark lead-form band and broke
   the page's one light-to-dark step into two. The tint plus a border is
   enough to say this is reference and not more story, and it is the
   treatment the gap list and the quotes already use.

   The type is a step below the article's, for the same reason: this is
   reference, not narrative. ── */
/* The wrapper carries the band cap and the panel fills it, so the panel
   runs the full width of the page inside the 9rem gutters: left edge on
   the article, right edge on the hero, the stat strip and the footer.
   It was held to the article column (width: calc(100% - 27rem), the
   sidebar plus the grid gap) so its right edge stopped where the
   sections above it stop. Widened 2026-10-06 on request: the sidebar
   ends above this band, so the column it was avoiding is not there. */
body.ac-cs-page .ac-cs-about-wrap {
  max-width: 1680px;
  margin-inline: auto;
  margin-top: 5rem;
}
body.ac-cs-page .ac-cs-about {
  width: 100%;
  /* The theme has no global border-box reset, so without this the
     panel's own padding is added outside the width and it overflows
     the band by ~106px. */
  box-sizing: border-box;
  padding: 3rem 3.25rem;
  border-radius: var(--ac-r-lg, 12px);
  border: 1px solid var(--lt-border);
  background: var(--lt-tint);
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: 1.5rem 4rem;
  align-items: start;
}
body.ac-cs-page .ac-cs-about__head {
  display: grid;
  justify-items: start;
  gap: 0.85rem;
}
/* The brand #06CFC3 this used to be is a 1.9:1 on the tint. The
   approved accent-text pair is what every other eyebrow on the light
   pages uses. */
body.ac-cs-page .ac-cs-about__label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--lt-accent-text);
}
body.ac-cs-page .ac-cs-about__title {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--lt-ink);
}
/* 22px, the article's own prose size. At 18px the panel read as a
   footnote to the case study rather than as the last section of it. */
body.ac-cs-page .ac-cs-about__body p {
  margin: 0 0 1.5rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.7;
  color: var(--lt-prose);
}
body.ac-cs-page .ac-cs-about__body p:last-child { margin-bottom: 0; }
/* Below the sidebar breakpoint the two-column head reads as a stranded
   logo, so the whole panel stacks. */
@media (max-width: 860px) {
  body.ac-cs-page .ac-cs-about-wrap { margin-top: 3.5rem; }
  body.ac-cs-page .ac-cs-about {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    padding: 2.25rem 1.75rem;
  }
}

/* ============================================================
   6. THE HUB — /case-studies/
   Shares the palette and the 9rem gutters above (body.ac-cs-page
   is on the hub too).

   Rebuilt 2026-10-08 on the blog index (/insights/): dark hero
   band, then the studies as three-up cards grouped by sector with
   one H2 per sector. It had a light hero before, because a flat
   dark band holding nothing but a heading reads as an empty slot
   — that reason goes away with a photograph behind it, so the hero
   now follows the same hands-off dark rule as the study pages,
   the capability pages and the homepage, using the §2 recipe: the
   three scrim tokens from ac-hero-tri.css over the photo.

   WHY THE CARD SPEC IS MIRRORED RATHER THAN SHARED. The blog
   cards are .ac-post-card in ac-insights.css, which is dark, and
   their light retone lives in ac-insights-system.css scoped to
   body.page-template-page-insights — a scope this page can never
   match. Reusing them would have meant widening every selector in
   that file to cover a second template, editing the live
   /insights/ page to style one band over here. The numbers are
   copied into this namespace instead (16/9 thumb with the 1.04
   hover zoom, 24px gaps, 28px card gutters, 18px titles, 15px
   excerpts, the cyan footer link), which is how the industry
   pages carry the /capabilities/ cards.
   ============================================================ */
body.ac-cs-page :is(.ac-csi-hero, .ac-hero-trust, .ac-csi-list) {
  padding-left: 9rem;
  padding-right: 9rem;
}
@media (max-width: 1280px) {
  body.ac-cs-page :is(.ac-csi-hero, .ac-hero-trust, .ac-csi-list) {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media (max-width: 960px) {
  body.ac-cs-page :is(.ac-csi-hero, .ac-hero-trust, .ac-csi-list) {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (max-width: 600px) {
  body.ac-cs-page :is(.ac-csi-hero, .ac-hero-trust, .ac-csi-list) {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ── Hero ──
   No fold requirement (see the hero fold rule): the band is as tall
   as its three lines plus nav clearance, which is the same
   11rem/5rem the study heroes use. ── */
body.ac-cs-page .ac-csi-hero {
  position: relative;
  overflow: hidden;
  background: #010D12;
  color: #FFFFFF;
  padding-top: 11rem;
  padding-bottom: 5rem;
}
@media (max-width: 960px) {
  body.ac-cs-page .ac-csi-hero {
    padding-top: 8rem;
    padding-bottom: 3.5rem;
  }
}
/* The photograph, with the standard left-heavy scrim on top of it as
   a pseudo-element: the image is an <img> in the pattern, so the
   gradients cannot ride in the same background shorthand the way
   they do on .ac-cs-hero. */
body.ac-cs-page .ac-csi-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
body.ac-cs-page .ac-csi-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
body.ac-cs-page .ac-csi-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ac-hero-band), var(--ac-hero-ramp), var(--ac-hero-veil);
}
/* Needs its own stacking context or the copy renders behind the
   background layers while still being hit-testable. */
body.ac-cs-page .ac-csi-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1680px;
  margin-inline: auto;
}
/* The shared eyebrow is #0A576B, which is the pair for white grounds.
   On the photograph it takes the hero's own white instead. */
body.ac-cs-page .ac-csi-hero .ac-cs-eyebrow {
  color: rgba(255, 255, 255, 0.72);
}
body.ac-cs-page .ac-csi-hero__title {
  margin: 0 0 20px;
  /* ch, not px, so the measure holds under body zoom. 20ch keeps the
     gradient run inside the scrim's dark end: the photo brightens past
     about 60% across, and cyan over a lit window is the one place this
     heading can lose contrast. */
  max-width: 20ch;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
body.ac-cs-page .ac-csi-hero__title strong {
  font-weight: 700;
  background: var(--ac-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.ac-cs-page .ac-csi-hero__sub {
  margin: 0;
  /* ch on the 22px size, so the measure holds under body zoom rather
     than drifting the way a px cap would. */
  max-width: 62ch;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}
@media (max-width: 600px) {
  body.ac-cs-page .ac-csi-hero__sub { font-size: 20px; }
}

/* ── The list band ── */
body.ac-cs-page .ac-csi-list {
  background: var(--lt-page);
  padding-top: 7rem;
  padding-bottom: 7rem;
}
@media (max-width: 960px) {
  body.ac-cs-page .ac-csi-list {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
@media (max-width: 600px) {
  body.ac-cs-page .ac-csi-list {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}
body.ac-cs-page .ac-csi-list__inner {
  max-width: 1680px;
  margin-inline: auto;
}

/* ── One heading over the whole grid, →32px→ cards. The blog index
      runs an H2 per category; the hub was asked for a single list, so
      the sector moved onto the cards and this is the only H2. ── */
body.ac-cs-page .ac-csi-list__title {
  margin: 0 0 32px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--lt-ink);
}

/* ── The grid: three up, as the blog index is. Two columns from
      1280px (the gutters drop to 5rem there) and one from 860px. A
      lone card sits in the first column rather than stretching
      across the band, which is what /insights/ does with a category
      that holds one post. ── */
body.ac-cs-page .ac-csi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1280px) {
  body.ac-cs-page .ac-csi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  body.ac-cs-page .ac-csi-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Cards ──
   One <a> around the whole card, so the hover state, the focus ring
   and the click target are the element itself and nothing has to be
   stretched over it with a pseudo-element.

   The frame is the IMAGE, not the card: a rounded, bordered photo
   with the copy on the page underneath it rather than a panel with
   everything inside one outline. The card element itself therefore
   carries no border, ground or shadow — moving those to .__thumb is
   the whole of the difference. ── */
body.ac-cs-page .ac-csi-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
body.ac-cs-page .ac-csi-card:hover { text-decoration: none; }
body.ac-cs-page .ac-csi-card:focus-visible {
  outline: 2px solid var(--lt-accent-link);
  outline-offset: 6px;
  border-radius: var(--ac-r-md, 10px);
}
body.ac-cs-page .ac-csi-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--lt-border);
  border-radius: var(--ac-r-xl, 16px);
  background: var(--lt-tint);
  box-shadow: 0 4px 20px rgba(12, 40, 55, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.ac-cs-page .ac-csi-card:hover .ac-csi-card__thumb {
  border-color: var(--lt-border-brand);
  box-shadow: 0 14px 34px rgba(7, 169, 209, 0.16);
  transform: translateY(-3px);
}
body.ac-cs-page .ac-csi-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}
body.ac-cs-page .ac-csi-card:hover .ac-csi-card__thumb img { transform: scale(1.04); }
body.ac-cs-page .ac-csi-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 2px 0;
}
/* The client mark, on the photo. A WHITE PANEL under it, because
   these are client lockups in their own colours: over a photograph
   they lose the ground they were drawn for, and this one is three
   fine outlines in apricot and sage that a scrim turns to smudge.
   Bottom left is where the stat badge used to sit, so the frame keeps
   its weight in the same corner. */
body.ac-cs-page .ac-csi-card__brand {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.1rem;
  border-radius: var(--ac-r-md, 10px);
  background: #FFFFFF;
  box-shadow: 0 6px 20px rgba(8, 34, 46, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.ac-cs-page .ac-csi-card:hover .ac-csi-card__brand {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(8, 34, 46, 0.28);
}
/* The full lockup, not the mark on its own: at card size the mark
   alone is a shape with no name attached to it. */
body.ac-cs-page .ac-csi-card__logo {
  display: block;
  height: 30px;
  width: auto;
}
@media (max-width: 600px) {
  body.ac-cs-page .ac-csi-card__brand { padding: 0.55rem 0.9rem; }
  body.ac-cs-page .ac-csi-card__logo { height: 26px; }
}
body.ac-cs-page .ac-csi-card__title {
  margin: 0 0 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--lt-ink);
}
@media (max-width: 1280px) {
  body.ac-cs-page .ac-csi-card__title { font-size: 30px; }
}
/* Ink rather than the grey the blog card uses: on a card with no
   panel behind it the standfirst is page copy, and it reads at the
   same weight as the rest of the page's prose. */
body.ac-cs-page .ac-csi-card__desc {
  margin: 0 0 18px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--lt-ink);
}
body.ac-cs-page .ac-csi-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 4px;
}
body.ac-cs-page .ac-csi-card__read {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--lt-grey);
}
/* The call, carrying the brand colour the way the stat badge does:
   the label stays #067A99 because it is small text on white, and the
   gradient goes in the disc behind the arrow, which is a graphic. */
body.ac-cs-page .ac-csi-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lt-accent-link);
}
body.ac-cs-page .ac-csi-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 100px;
  background: var(--ac-grad);
  box-shadow: 0 6px 16px rgba(7, 169, 209, 0.32);
  font-size: 14px;
  line-height: 1;
  color: #08222E;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.ac-cs-page .ac-csi-card:hover .ac-csi-card__link { text-decoration: underline; text-underline-offset: 4px; }
body.ac-cs-page .ac-csi-card:hover .ac-csi-card__arrow {
  transform: translate(3px, -3px);
  box-shadow: 0 10px 22px rgba(7, 169, 209, 0.42);
}
@media (prefers-reduced-motion: reduce) {
  body.ac-cs-page .ac-csi-card__thumb,
  body.ac-cs-page .ac-csi-card__thumb img,
  body.ac-cs-page .ac-csi-card__brand,
  body.ac-cs-page .ac-csi-card__arrow { transition: none; }
  body.ac-cs-page .ac-csi-card:hover .ac-csi-card__thumb,
  body.ac-cs-page .ac-csi-card:hover .ac-csi-card__brand,
  body.ac-cs-page .ac-csi-card:hover .ac-csi-card__arrow,
  body.ac-cs-page .ac-csi-card:hover .ac-csi-card__thumb img { transform: none; }
}
@media (max-width: 600px) {
  body.ac-cs-page .ac-csi-card__title { font-size: 26px; }
  body.ac-cs-page .ac-csi-card__desc { font-size: 17px; }
}

/* ============================================================
   7. FOOTER — light, the same treatment every other light page gets
   Ported from ac-ind-system.css, which is the fourth scope to carry
   this block (homepage, industries, capabilities, now case studies).
   The footer part hardcodes background:#010D12 inline and colours its
   type for a dark band, so every one of these has to be !important and
   every text element needs its own ink override or it ships grey on
   white. If a new element is added to parts/footer.html it has to be
   added here and in the other three files together.
   ============================================================ */
body.ac-cs-page .ac-footer {
  background: #FFFFFF !important;
  color: var(--lt-ink) !important;
}
body.ac-cs-page :is(
  .ac-footer__heading,
  .ac-footer__desc,
  .ac-footer__reach-cta
) { color: var(--lt-ink) !important; }
body.ac-cs-page .ac-footer__brand .ac-logo span { color: var(--lt-ink) !important; }
body.ac-cs-page .ac-footer__address-label,
body.ac-cs-page .ac-footer__address-label span,
body.ac-cs-page .ac-footer__address address span { color: var(--lt-ink) !important; }
body.ac-cs-page .ac-footer a { color: var(--lt-ink) !important; }
body.ac-cs-page .ac-footer a:hover { color: var(--ac-primary) !important; }
/* These two outrank the blanket `.ac-footer a` rule above rather than
   relying on source order, because the dark-theme sheet sets them by
   class too. */
body.ac-cs-page .ac-footer a.ac-footer__email-link,
body.ac-cs-page .ac-footer a.ac-footer__phone { color: var(--lt-ink) !important; }
body.ac-cs-page .ac-footer__email svg { stroke: var(--lt-ink) !important; }
body.ac-cs-page .ac-footer a.ac-pill-cta.ac-footer__map-pill {
  color: var(--lt-ink) !important;
  border: 1.5px solid rgba(8, 34, 46, 0.18);
}
body.ac-cs-page .ac-footer__linkedin svg path { fill: var(--lt-ink) !important; }
body.ac-cs-page .ac-footer__linkedin--min { border-color: var(--lt-ink) !important; }
body.ac-cs-page .ac-footer__linkedin--min:hover { border-color: var(--ac-primary) !important; }
body.ac-cs-page .ac-footer__linkedin--min:hover svg path { fill: var(--ac-primary) !important; }
body.ac-cs-page .ac-footer__divider {
  background-color: var(--lt-border) !important;
  color: var(--lt-border) !important;
  opacity: 1 !important;
}
/* Paragraph copy (call note, address, and the copyright line's inline
   dark-theme grey) has to be ink on white to clear WCAG. */
body.ac-cs-page .ac-footer p { color: var(--lt-ink) !important; }
body.ac-cs-page .ac-footer__call-note { opacity: 1 !important; }
body.ac-cs-page .ac-footer__links li > span { color: var(--lt-ink) !important; }