/*
   Success-story template stylesheet. Shared by success-stories/[slug].astro and
   success-stories/ag1.astro. Externalised from an inline <style> block so the ~29KB
   is fetched once and cached across all case-study pages, the same arrangement as
   horizon-cluster.css. Loaded after site.css (via headExtra) so its equal-specificity
   overrides still win. Edit here; the ?v= build stamp cache-busts it.
*/
/* ===== AG1 Case Study page ===== */
/* The three bands a case study runs through. The opening band was #1e1e1e
   until the V3 design pass turned it white: the at-a-glance card is the black
   object on the page now, and on a dark band it had nothing to sit against.
   Everything that band paints therefore reads dark-on-light — see the light
   token set below, which it shares with .cs-band-light. */
.cs-band-dark1 { background-color: var(--white); }
.cs-band-light { background-color: #f9f9f9; }
.cs-band-black { background-color: var(--ink); }

/* Ink tokens per band. The story body components below read these instead of
   hard-coding a colour, so the same markup reads correctly on dark and light. */
.cs-band-black {
  --cs-ink: var(--cream);
  --cs-ink-dim: var(--ink-muted);
  --cs-accent: var(--red-bright);
  --cs-rule: rgba(246, 245, 240, 0.35);
  --cs-surface: rgba(255, 255, 255, 0.06);
}
.cs-band-dark1, .cs-band-light {
  --cs-ink: var(--ink);
  --cs-ink-dim: var(--ink-soft);
  --cs-accent: var(--red-deep);
  --cs-rule: rgba(18, 18, 17, 0.18);
  --cs-surface: rgba(18, 18, 17, 0.09);
}

/* Hero */
.cs-hero { display: grid; grid-template-columns: 1fr 600px; gap: 48px; align-items: start; padding-top: 45px; padding-bottom: 60px; position: relative; }
.cs-h1 {
  margin: 0 0 60px;
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 72px; font-weight: 600; line-height: 0.9;
  color: var(--ink); max-width: 540px;
}
.cs-dek {
  margin: 0 0 36px;
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 24px; font-style: italic; font-weight: 400; line-height: 1.2;
  color: var(--ink); max-width: 400px;
}
.cs-byline { display: flex; align-items: center; gap: 28px; }
.cs-byline-avatar { width: 64px; height: 64px; border-radius: var(--r-pill); border: 1px solid #000; object-fit: cover; }
.cs-byline-name { font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.cs-byline-role { font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; color: var(--ink); }
.cs-hero-logo {
  display: block; height: 34px; width: auto; max-width: 280px;
  margin: 0 0 28px;
}
.cs-hero-tile {
  width: 600px; height: 600px; border-radius: var(--r-lg);
  /* The wash behind the hero art. Every story used to share one lavender-to-
     peach gradient that belonged to no brand — the four the design review liked
     only looked brand-tinted because their artwork happened to carry it. The
     hue is now the brand's own and the tone is fixed across all of them; the
     page sets the pair from src/lib/brand-tints.js. */
  background: linear-gradient(to right, var(--cs-tint-a, #e8e4dc), var(--cs-tint-b, #d3ccc0));
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.cs-hero-tile img { width: 91%; height: auto; display: block; }
/* Sits over the poster still and fades in on its first painted frame. */
.cs-hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; opacity: 0; transition: opacity 700ms ease;
}
.cs-hero-canvas.is-live { opacity: 1; }
/* Impact stats */
.cs-impact { padding-top: 100px; padding-bottom: 90px; }
.cs-impact-h {
  margin: 0 0 80px;
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 48px; font-weight: 600; line-height: 0.99;
  color: var(--red);
}
.cs-impact-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 60px; }
/* The lit card and the dimmed ones differ by one colour, declared once on the
   card and inherited by everything inside it — the icon included. The three
   icon files used to carry the state in their own fill (one white, two grey),
   which is why the lit card vanished the moment this band turned white. They
   are masks now, so a card's icon is always the colour of the words under it.

   Dimmed is --ink-soft rather than the --ink-muted the comp drew: on white,
   #a4a4a4 is 2.3:1 and fails even the 3:1 large-text bar. */
.cs-stat { color: var(--ink); }
.cs-stat-dim { color: var(--ink-soft); }
.cs-stat-icon {
  display: block; width: 32px; height: 32px; margin-bottom: 28px;
  background-color: currentColor;
  -webkit-mask: var(--cs-stat-icon) no-repeat left center / contain;
  mask: var(--cs-stat-icon) no-repeat left center / contain;
}
.cs-stat-title {
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 32px; font-weight: 500; line-height: 1.2;
  color: inherit; margin-bottom: 40px;
}
.cs-stat-desc {
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 24px; font-weight: 500; line-height: 1.2;
  color: inherit;
}
/* The bar marks which card is lit, so the fill is positioned rather than
   sized from the left edge — public/js/story-impact.js drives both. The 26%
   width is the still it degrades to with no JS. */
.cs-progress { position: relative; overflow: hidden; height: 5px; background: rgba(18, 18, 17, 0.12); border-radius: var(--r-sm); margin-top: 72px; }
.cs-progress-fill {
  position: absolute; left: 0; top: 0;
  width: 26%; height: 5px; background: var(--ink); border-radius: var(--r-sm);
  transition: transform .45s ease, width .45s ease;
}
.cs-stat { transition: color .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .cs-progress-fill, .cs-stat, .cs-tab, .cs-tab-title { transition: none; }
}

/* Article layout */
.cs-article { display: grid; grid-template-columns: 336px 1fr; gap: 96px; align-items: start; }
.cs-article-body { max-width: 721px; }

/* Sidebar card */
/* The at-a-glance card carries the brand's hue on its edge. That is the one
   place a story's tint is under CSS control on every story — the hero art has
   its wash baked into the image file — so it is where the token file actually
   shows, and it shows on all thirty rather than the four the review noticed. */
.cs-sidebar { position: sticky; top: 120px; background: #000; border: 1px solid var(--cs-tint-b, #fff); border-radius: var(--r-lg); padding: 35px 40px 40px; }
.cs-sidebar-logo { width: 224px; height: auto; display: block; margin-bottom: 36px; }
.cs-side-row { display: flex; align-items: center; gap: 16px; margin: 28px 0 18px; }
.cs-side-row img { width: 23px; height: 23px; }
.cs-side-label { font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; color: #fff; }
.cs-side-value { font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.24; color: #fff; margin: 0 0 6px; }
.cs-side-pills { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* Each pill is sized by its own label. The long ones — "Subscription &
   Retention Experiences", "Technology Adoption & Change Strategy" — do not fit
   the 256px measure inside the card, and the default greedy wrap filled the
   first line to the card's edge and dropped one word onto the second: a pill
   spanning the full width with an orphan under it, beside pills that hug three
   words. `balance` picks the narrower measure that evens the lines out, so a
   two-line pill is as wide as it needs to be and no wider. Browsers without it
   fall back to the greedy wrap, which is what this looked like before.

   A box that wraps its text still takes the whole measure — shrink-to-fit is
   min(max-content, available), and no CSS length shrinks it back to the
   longest line it actually drew. So the wrapped ones are centred, which is
   what makes the two even lines read as a deliberate pill rather than as a
   bar with a ragged edge. It has no effect on the pills that hug.

   The radius stays --r-pill rather than a fixed value: CSS clamps it to half
   the shorter side, so one token gives a true stadium at one line and at
   three. And the gap was 25px, which on a 34px pill read as five separate
   objects rather than one set. */
.cs-side-pill {
  background: var(--ink-strong); border-radius: var(--r-pill); min-height: 34px; max-width: 100%;
  display: inline-flex; align-items: center; justify-content: center; padding: 7px 18px 5px;
  text-wrap: balance; hyphens: none; text-align: center;
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.24; color: #fff;
  text-decoration: none; transition: background-color .15s;
}
/* Only a Solutions pill is ever an <a> (a matching /what-we-do/ page exists);
   Partners pills and unmapped solution tags stay <span> and keep the plain look. */
a.cs-side-pill:hover { background: var(--red-deep); }
/* Partners were a bulleted list beside a column of pills — two treatments for
   two lists of the same kind of short label. They share the pill now; the
   modifier only changes the stacking, because partner names are short enough
   to sit side by side where a solution name is not. */
.cs-side-pills-wrap { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 14px 12px; }
.cs-btn-outline-w {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 64px; padding: 16px 24px 12px; border-radius: var(--r-md);
  background: transparent; border: 1px solid #fff;
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.1; color: #fff;
  text-decoration: none; margin-top: 40px; transition: background-color .15s;
}
/* An outline button on a black card is easy to miss, so the hover state is the
   brand fill rather than a barely-there wash. */
.cs-btn-outline-w:hover { background: var(--red); border-color: var(--red); }

/* Article text */
.cs-eyebrow {
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 20px; font-weight: 500; line-height: 1.2;
  letter-spacing: 2px; text-transform: uppercase; color: var(--cs-accent);
  margin: 0 0 12px;
}
.cs-h2 {
  margin: 0 0 40px;
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 48px; font-weight: 600; line-height: 1.2;
  color: var(--cs-ink); max-width: 620px;
}
/* Kept because the hand-built AG1 partial still carries the class on its
   light-band heading, where it now resolves to the same colour it always did. */
.cs-h2-dark { color: var(--ink); }
.cs-p, .cs-ul, .cs-ol {
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 24px; font-weight: 400; line-height: 1.35;
  color: var(--cs-ink); margin: 0 0 28px;
}
.cs-light-text .cs-p, .cs-light-text .cs-ul, .cs-light-text .cs-ol,
.cs-light-text .cs-h3 { color: var(--ink); }
.cs-ul { padding-left: 30px; } .cs-ol { padding-left: 30px; }
.cs-ul li, .cs-ol li { margin-bottom: 28px; }
.cs-p strong, .cs-ul strong { font-weight: 600; }
.cs-p .cs-med { font-weight: 500; }
.cs-h3 {
  margin: 56px 0 40px;
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 48px; font-weight: 600; line-height: 1.2;
  color: var(--cs-ink); max-width: 620px;
}
.cs-inline-h { font-weight: 600; margin-top: 44px; }

/* Mockup image on gray card */
.cs-mockup { position: relative; margin: 64px 0; }
.cs-mockup-card { background: #d9d9d9; border-radius: var(--r-lg); height: 368px; }
.cs-mockup img { position: absolute; top: -31px; left: 3px; width: 95%; height: auto; }

/* Feature tabs. Which one is lit follows the reader, the way the impact row's
   lit card does — public/js/story-impact.js drives both, and the transition
   below is what makes the hand-off read as one thing lighting up rather than
   as a repaint. */
.cs-tab { border-left: 5px solid var(--ink-muted); padding: 4px 0 4px 32px; margin-bottom: 48px; transition: border-color .35s ease; }
.cs-tab-active { border-left-color: var(--ink); }
.cs-tab-head { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.cs-tab-head img { width: 32px; height: 32px; }
.cs-tab-title { font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 36px; font-weight: 500; line-height: 1.2; color: var(--ink-muted); transition: color .35s ease; }
.cs-tab-active .cs-tab-title { color: var(--ink); }
.cs-tab-items { font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--ink); }
.cs-tab-items div { margin-bottom: 24px; }

.cs-body-img { width: 100%; max-width: 500px; height: auto; border-radius: var(--r-md); margin: 48px 0 0; display: block; }

/* Results section spacing */
.cs-results { padding-top: 120px; }

/* Pull quote */
.cs-quote { border-top: 1px solid rgba(246,245,240,0.35); border-bottom: 1px solid rgba(246,245,240,0.35); padding: 40px 0 64px; margin-top: 96px; }
/* Opening quote. Was a 128px Calibre italic double-quote at weight 900 —
   at that size the glyph stops reading as punctuation and becomes a filled
   shape, which is what the design review meant by "looks like a Word symbol".
   It is the shared hairline mark now (scripts/generate-icons.mjs), kept in
   brand red but at a size that punctuates the quotation instead of competing
   with it. */
.cs-quote-mark {
  display: block;
  width: 62px;
  height: 44px;
  margin: 24px 0 22px;
  background-color: var(--red);
  -webkit-mask: url("/images/icons/quote-solid.svg") no-repeat left top / contain;
  mask: url("/images/icons/quote-solid.svg") no-repeat left top / contain;
}
.cs-quote-text {
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 32px; font-weight: 400; line-height: 1.3;
  color: var(--cream); max-width: 680px; margin: 0 0 48px;
}
.cs-quote-attr { display: flex; align-items: center; gap: 40px; }
.cs-quote-avatar { width: 100px; height: 100px; border-radius: var(--r-circle); object-fit: cover; }
.cs-quote-name { font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--cream); }
.cs-quote-role { font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; color: var(--cream); }

/* CTA banner.
 *
 * The same banner the home page and What We Do carry
 * (.solution-cta-banner_component): cream, with the brand red as a rule down
 * the left edge rather than as the whole slab. This was a red slab with a
 * black button on it, and .button-hero-dark's hover fill is the brand red —
 * so the one interactive thing in the banner disappeared into its own
 * background the moment a cursor reached it. Recolouring the button would have
 * split it from the same button everywhere else on the site, so the banner
 * moves to the treatment that already works underneath it.
 *
 * The copy is per-story and unchanged; only the surface is. */
.pp-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background-color: var(--cream);
  border-left: 4px solid var(--red);
  border-radius: var(--r-lg);
  min-height: 150px;
  padding: 40px 48px; margin: 88px 0;
}
.pp-banner-text {
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 36px; font-weight: 600; line-height: 1.05;
  color: var(--ink); max-width: 560px;
}

/* Success story cards (same as platinum page) */
.pp-h2-stories { margin: 0 0 56px; font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 48px; font-weight: 600; line-height: 0.99; color: #fff; }
.pp-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; }
.pp-story-card {
  background-color: #fff; border: 1px solid var(--ink-muted); border-radius: var(--r-lg);
  padding: 9px 22px 30px; max-width: 349px; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: flex-start;
}
.pp-story-media { position: relative; width: calc(100% + 26px); margin: 0 -13px; }
.pp-story-media img { width: 100%; height: 186px; object-fit: cover; border-radius: var(--r-md); display: block; }
.pp-story-pill {
  position: absolute; top: 26px; left: 22px;
  background-color: #fff; border-radius: var(--r-pill); height: 34px;
  display: inline-flex; align-items: center; padding: 3px 16px 0;
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--ink);
}
/* Same logo slot the directory page uses, so a very wide wordmark fits inside
   the box instead of being squeezed to the card's width at the wrong aspect —
   Caldera + Lab and Molekule both rendered 303x38 in this rail. */
.pp-story-logo {
  height: 38px; width: auto; max-width: 185px;
  object-fit: contain; object-position: left center;
  margin: 32px 0 0 4px; align-self: flex-start;
}
.pp-story-text { margin: 20px 4px 28px; font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.1; color: var(--ink-strong); }
.pp-btn-read {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 64px; padding: 16px 24px 12px; border-radius: var(--r-md);
  background-color: transparent; border: 1px solid var(--ink);
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.1; color: var(--ink);
  text-decoration: none; margin: auto 0 0 4px; transition: background-color .15s;
}
.pp-btn-read:hover { background-color: rgba(18, 18, 17, 0.06); }
.cs-pad { padding-top: 60px; padding-bottom: 60px; }
.cs-divider { border-top: 1px solid rgba(246, 245, 240, 0.35); margin-top: 72px; }

.ss-logo-band .margin-top-40 { margin-top: 0; }
.ss-logo-band .full-bleed-section { background-color: var(--ink); }

/* Responsive */
@media (max-width: 1200px) {
  .cs-hero { grid-template-columns: 1fr 1fr; }
  .cs-hero-tile { width: 100%; height: auto; aspect-ratio: 1; }
  .cs-article { grid-template-columns: 300px 1fr; gap: 48px; }
}
@media (max-width: 991px) {
  .cs-h1 { font-size: 48px; }
  .cs-hero-logo { height: 26px; margin-bottom: 22px; }
  .cs-h2, .cs-h3 { font-size: 38px; }
  .cs-hero { grid-template-columns: 1fr; }
  .cs-article { grid-template-columns: 1fr; }
  .cs-sidebar { position: static; max-width: 420px; }
  .cs-impact-grid { grid-template-columns: 1fr; gap: 48px; }
  .cs-stat-dim { color: var(--ink); }
  .cs-progress { display: none; }
  .cs-p, .cs-ul, .cs-ol, .cs-tab-items, .cs-stat-desc { font-size: 20px; }
  .cs-quote-text { font-size: 26px; }
  .cs-lede { font-size: 28px; }
  .cs-callout { font-size: 22px; padding-left: 24px; margin: 36px 0; }
  .cs-say-text { font-size: 22px; }
  .cs-say-pull { font-size: 20px; }
  .cs-tally { padding-left: 24px; }
  .cs-tally-num { font-size: 44px; }
  .cs-tally-compact .cs-tally-num { font-size: 34px; }
  .cs-tally-highlights .cs-tally-item { font-size: 20px; }
  .cs-metrics { gap: 32px; margin: 40px 0; padding: 32px 0; }
  .cs-metric-value { font-size: 52px; }
  .cs-metric-caption { font-size: 16px; margin-top: 12px; }
  .cs-devices-stage { padding: 20px 20px 24px; gap: 16px; }
  .cs-shot-card { inset: 24px 0 -20px 16px; }
  /* The gutter collapses at this width, so the rail has nowhere to sit. */
  .cs-rail-gutter { display: none; }
  .cs-mockup img { position: static; width: 100%; }
  .cs-mockup-card { height: auto; padding: 20px; }
  .cs-mockup-card img { display: block; }
  .pp-stories { grid-template-columns: 1fr; }
  .pp-banner { flex-direction: column; align-items: flex-start; padding: 40px; }
}
@media (max-width: 479px) {
  .cs-h1 { font-size: 38px; }
  .cs-h2, .cs-h3 { font-size: 30px; }
  .cs-impact-h { font-size: 36px; margin-bottom: 48px; }
  .cs-stat-title { font-size: 26px; margin-bottom: 20px; }
  .cs-tab-title { font-size: 26px; }
  .cs-banner-text, .pp-banner-text { font-size: 28px; }
  .cs-quote-text { font-size: 22px; }
  .cs-lede { font-size: 24px; }
  .cs-metrics { gap: 24px; }
  .cs-metric-value { font-size: 42px; }
  .cs-tally-num { font-size: 36px; }
  /* Below this the two frames are too narrow to read side by side. */
  .cs-devices-pair .cs-devices-stage { grid-template-columns: 1fr; justify-items: center; }
  .cs-devices-pair .cs-phone { width: 52%; }
  .cs-sidebar { padding: 28px 24px; }
  .cs-byline { gap: 16px; }
  .cs-byline-name, .cs-byline-role { font-size: 20px; }
}

/* ===== Story body blocks (src/components/StoryBlocks.astro) ===== */

/* Opening statement carried over from the legacy overview headline. */
.cs-lede {
  margin: 0 0 40px;
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 36px; font-weight: 600; line-height: 1.15;
  color: var(--cs-ink);
}
.cs-overview-img {
  width: 100%; max-width: 420px; height: auto;
  border-radius: var(--r-lg); display: block; margin: 0 0 48px;
}

/* Pull statements the old timeline set beside the narrative. */
.cs-callout {
  margin: 48px 0;
  padding: 4px 0 4px 32px;
  border-left: 5px solid var(--red);
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 28px; font-weight: 500; line-height: 1.25;
  color: var(--cs-ink);
}
.cs-callout strong { font-weight: 500; }

/* "3 Product Categories" tallies from the overview lists. */
.cs-tally { margin: 48px 0; padding-left: 32px; border-left: 5px solid var(--red); }
.cs-tally-title {
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 20px; font-weight: 500; line-height: 1.2;
  letter-spacing: 2px; text-transform: uppercase; color: var(--cs-accent);
  margin-bottom: 28px;
}
.cs-tally-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 40px; }
/* Two columns, not auto-fit: four items strung across the measure read as a
   row of unrelated numbers, where two columns keep each number with its label. */
.cs-tally-large .cs-tally-items,
.cs-tally-compact .cs-tally-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 760px; }
.cs-tally-item { font-family: Calibre, "Calibre Fallback", Arial, sans-serif; color: var(--cs-ink); }
.cs-tally-num { display: block; font-size: 56px; font-weight: 600; line-height: 1; }
.cs-tally-compact .cs-tally-num { font-size: 40px; }
.cs-tally-label { display: block; font-size: 20px; font-weight: 400; line-height: 1.2; margin-top: 10px; }
/* Highlights carried a checkmark rather than a number in the old design. */
.cs-tally-highlights .cs-tally-items { grid-template-columns: 1fr; gap: 16px; }
.cs-tally-highlights .cs-tally-item { position: relative; padding-left: 34px; font-size: 24px; line-height: 1.25; }
.cs-tally-highlights .cs-tally-item::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 18px; height: 10px; border-left: 3px solid var(--red); border-bottom: 3px solid var(--red);
  transform: rotate(-45deg);
}
.cs-tally-highlights .cs-tally-label { margin-top: 0; font-size: inherit; }

/* Headline results numbers. */
.cs-metrics {
  display: flex; flex-wrap: wrap; gap: 56px;
  margin: 56px 0; padding: 40px 0;
  border-top: 1px solid var(--cs-rule); border-bottom: 1px solid var(--cs-rule);
}
.cs-metric-value {
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 72px; font-weight: 600; line-height: 0.95; color: var(--red);
}
.cs-metric-caption {
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 18px; font-weight: 400; line-height: 1.3;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--cs-ink-dim);
  max-width: 240px; margin-top: 16px;
}

/* Testimonials that run inside the narrative, as against the closing quote. */
.cs-say {
  margin: 56px 0; padding: 36px 0 0;
  border-top: 1px solid var(--cs-rule);
}
.cs-say-text {
  /* Webflow's base sheet puts a grey bar and indent on every blockquote. */
  margin: 0; padding: 0; border: 0;
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 28px; font-weight: 400; line-height: 1.3; color: var(--cs-ink);
}
.cs-say-text::before { content: "\201C"; color: var(--red); }
.cs-say-text::after { content: "\201D"; color: var(--red); }
.cs-say-pull {
  margin: 24px 0 0;
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 24px; font-weight: 600; line-height: 1.25; color: var(--red);
}
.cs-say-attr { display: flex; align-items: center; gap: 20px; margin-top: 28px; text-align: left; }
.cs-say-avatar { width: 64px; height: 64px; border-radius: var(--r-pill); object-fit: cover; flex: none; }
.cs-say-name { font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--cs-ink); }
.cs-say-role { font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 1.3; color: var(--cs-ink-dim); }

/* Screenshots. Wide crops float over an offset card; the rest sit inline. */
.cs-shot { margin: 64px 0 72px; }
.cs-shot-label {
  text-align: left;
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 14px; font-weight: 500; line-height: 1.2;
  letter-spacing: 1.75px; text-transform: uppercase; color: var(--cs-ink-dim);
  margin-bottom: 40px;
}
.cs-shot-stage { position: relative; }
.cs-shot-card { position: absolute; inset: 32px -20px -28px 24px; background: var(--cs-surface); border-radius: var(--r-lg); }
.cs-shot-stage img {
  position: relative; width: 100%; height: auto; display: block;
  border-radius: var(--r-md); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
}

.cs-figure { margin: 48px 0; }
.cs-figure img { width: 100%; height: auto; display: block; border-radius: var(--r-md); }
.cs-figure-portrait { max-width: 440px; }
.cs-figure-cap {
  text-align: left;
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 16px; line-height: 1.4; color: var(--cs-ink-dim); margin-top: 12px;
}

/* The desktop + mobile pair the old case studies used to show a redesign.
   The source art is a full-page capture thousands of pixels tall, so each one
   is cropped from the top into a device frame rather than shown at length. */
.cs-devices { margin: 64px 0 80px; }
.cs-devices-stage {
  display: grid; grid-template-columns: 1fr 27%; gap: 28px; align-items: end;
  padding: 32px 32px 36px;
  background: var(--cs-surface); border: 1px solid var(--cs-rule); border-radius: var(--r-lg);
}
.cs-devices-browser .cs-devices-stage { grid-template-columns: 1fr; }
.cs-devices-phone .cs-devices-stage { grid-template-columns: 1fr; justify-items: center; }
/* Flat crops, not device mockups.
   These carried a fake browser chrome bar with three grey dots and a phone with
   a 6px black bezel, both floating on a heavy drop shadow — the 2015-2018 SaaS
   treatment the design review asked us to drop. What was actually worth keeping
   is the crop: the source captures are full pages thousands of pixels tall, and
   the frame is what stops them printing at length.

   So the crop stays and the costume goes. Each shot is a plain rounded panel on
   a hairline, which lets the work inside it be the thing on the page. */
.cs-browser {
  border-radius: var(--r-md); overflow: hidden; background: #fff;
  border: 1px solid var(--cs-rule);
}
.cs-devices-desktop { display: block; width: 100%; height: auto; }
/* Full-page captures run thousands of pixels tall; crop those to a viewport. */
.cs-devices-desktop.cs-crop { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.cs-phone {
  border: 1px solid var(--cs-rule); border-radius: var(--r-md); overflow: hidden; background: #fff;
}
.cs-devices-phone .cs-phone { width: 46%; min-width: 220px; }
.cs-devices-mobile { display: block; width: 100%; height: auto; }
.cs-devices-mobile.cs-crop { aspect-ratio: 9 / 17; object-fit: cover; object-position: top center; }

/* Timeline rail in the middle band's gutter, from the old year/quarter markers. */
.cs-rail-gutter { align-self: stretch; }
.cs-rail { position: sticky; top: 140px; list-style: none; margin: 8px 0 0; padding: 0 0 0 4px; }
.cs-rail-item {
  position: relative; padding: 0 0 28px 28px;
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 16px; font-weight: 500; line-height: 1.2;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--cs-ink-dim);
}
.cs-rail-item::after {
  content: ""; position: absolute; left: 4px; top: 14px; bottom: 0; width: 1px; background: var(--cs-rule);
}
.cs-rail-item:last-child { padding-bottom: 0; }
.cs-rail-item:last-child::after { display: none; }
.cs-rail-dot {
  position: absolute; left: 0; top: 5px;
  width: 9px; height: 9px; border-radius: var(--r-circle); background: var(--red);
}

/* Template additions */
/* Two kinds of hero art, and they want opposite things from the tile.
   A photograph fills it — the tile's gradient is only there so the tile is
   never empty, and `cover` hides it. A device mockup is a transparent PNG and
   the gradient is the ground it stands on, so it is contained at its own
   aspect ratio and centred; `cover` cropped the phones and laptops off at the
   sides. `width: 91%` is the base .cs-hero-tile img rule, which the hand-built
   AG1 page has always used for exactly this. */
.cs-hero-tile img.cs-hero-photo { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }
.cs-hero-tile img.cs-hero-art { width: 91%; height: auto; max-height: 88%; object-fit: contain; }
.cs-sidebar-brand { font-family: Calibre, "Calibre Fallback", Arial, sans-serif; font-size: 40px; font-weight: 600; color: #fff; margin-bottom: 24px; }

/* The at-a-glance groups only become boxes for the revised card below; on the
   original sidebar they generate none, so its single column is laid out from
   the same markup with its margins collapsing exactly as they did before. */
.cs-side-brand, .cs-side-facts, .cs-side-meta { display: contents; }