/*!
 * case-vitality-access.css
 *
 * A BESPOKE SKIN for the v2 case-study markup, in Vitality Access's brand.
 *
 * This page loads this file INSTEAD OF `case-v2.css` — not on top of it. The v2 template
 * gives the page its structure (components in `components/cases/v2/`, content model in
 * `types/case-study.ts`); the skin is per-case, the same way all 31 legacy case pages
 * carry their own stylesheet. Navigation, footer and the contact form are inherited from
 * the site and deliberately untouched.
 *
 * SOURCE OF TRUTH — Constantine's approved comp (Figma `Nf0vq9U1zoaOWubw5wnJVB`, node
 * `10963:366`, DIFWEB-227, rebuilt to it 2026-09-17 on Vadim's "exact Figma design").
 * The comp is a 1790px frame with a 1300px content grid; the site's `.wrap-v4` is also
 * 1300px at 1440, so its measurements are used 1:1: section paddings, card sizes,
 * type sizes, radii, rule colours. The comp has no mobile frame — the stacking below
 * 1280px / 768px is derived, with "no horizontal overflow at 375" as the hard rule.
 *
 * Deviations from the comp, all deliberate (see the header of `data/case-vitality-access.ts`):
 *   - the site header stays white (site-wide rule for case pages, `app/cases/CLAUDE.md`);
 *   - `RelatedCasesSection` stays (SEO-load-bearing, DIFWEB-90) and is recoloured onto
 *     the sand ground at the bottom of this file so it no longer reads as an unskinned band;
 *   - the architecture diagram is the existing SVG inside the glass panel — the comp's
 *     live-vector nodes are out of scope for this pass.
 *
 * ACCESSIBILITY — a hard constraint carried over from the client's own docs:
 * `--va-ink-soft` (#6b6052) is 4.74:1 on sand, passing AA by ~5% with no slack. It must
 * NEVER be used at partial opacity on a light background (any alpha drops it to 1.96–3.25:1).
 * De-emphasise with the eyebrow treatment, size or position — never with lightness.
 */

/* ------------------------------------------------------------------ fonts */
/* Vendored locally rather than pulled from Google (38 KB total) — the CI perf budget
   audits the site and an extra CDN handshake isn't worth it. Latin subset only. */
@font-face {
  font-family: 'Gloock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/va/gloock-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/va/figtree-var.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ tokens */
/* Declared on the page wrapper, not the article, so the related-cases chrome below the
   article can use them too. Values are the comp's, pixel-sampled where not in the spec. */

.page.-case-va {
  --va-forest: #011703;
  --va-forest-soft: #0a2510;
  --va-lime: #84cc16;
  --va-sage: #91bd91;
  --va-navy: #07122a;
  --va-navy-deep: #050d1f;
  --va-navy-2: #0c1b3d;
  --va-sand: #ece1cd;
  --va-sand-deep: #e6d9c0;
  --va-cream: #f5eede;
  --va-watermark: #e8d8be;
  --va-ink: #1a1208;
  --va-ink-soft: #6b6052;
  --va-rule: rgba(26, 18, 8, 0.16);
  --va-rule-faint: rgba(26, 18, 8, 0.1);
  --va-rule-light: rgba(255, 255, 255, 0.18);
  --va-on-navy: rgba(255, 255, 255, 0.8);
  --va-on-navy-mute: rgba(255, 255, 255, 0.64);
  --va-on-forest-mute: rgba(245, 238, 222, 0.64);

  --va-display: 'Gloock', Georgia, 'Times New Roman', serif;
  --va-sans: 'Figtree', system-ui, sans-serif;
  --va-body: Inter, system-ui, sans-serif;
}

.case-v2 {
  display: block;
  font-family: var(--va-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--va-ink);
  background: var(--va-sand);
  overflow: hidden;
}

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

/* The header stays the site's own white chrome, as on every other case page. Note the
   theme's `.page.-cases-one .header { background-color: #131426 }` never applies — the
   element's class is `.header-v4`, not `.header` — so case headers have always rendered
   white. Left alone deliberately: tinting it forest would hide the dark Diffco logo, and
   the navigation is inherited on purpose. */
.page.-case-va .middle {
  padding-top: 0;
  /* The sand ground continues under the related-cases chrome (see the end of the file). */
  background: var(--va-sand);
}

/* ------------------------------------------------------------- shared bits */

/* Comp rhythm: every sand section opens ~120px under the previous one and closes 120px
   above the next; the two exceptions (built, architecture) override below. */
.case-v2__section {
  padding: 120px 0;
}

/* The eyebrow is the client's own utility: Figtree 600, 11px, 0.22em (= the comp's 2.42px
   tracking), uppercase. It is how this brand de-emphasises — never with lighter text on
   light ground. */
.case-v2__eyebrow,
.case-v2__label,
.case-v2__callout-label,
.case-v2__phase-period,
.case-v2__stack-label,
.case-v2__glance-item dt {
  font-family: var(--va-sans);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.case-v2__eyebrow {
  margin: 0 0 14px;
  color: var(--va-ink-soft);
}

/* Gloock 48/51.84, −0.48px — the comp's H2. No hairline rule above it: the comp has none. */
.case-v2__h2 {
  margin: 0 0 40px;
  font-family: var(--va-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--va-ink);
}

.case-v2__eyebrow.-center,
.case-v2__h2.-center {
  text-align: center;
}

.case-v2__prose {
  max-width: 720px;
}

.case-v2__prose.-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.case-v2__prose p {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 28px;
  color: var(--va-ink);
}

.case-v2__prose p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------- block 1 — the forest hero */

/* Flat #011703, 180 top / 240 bottom, copy column 648, phone on the right. The comp has
   no bloom, no grain and no fade into the sand — the two grounds meet on a hard edge. */
.case-v2__hero {
  position: relative;
  padding: 180px 0 240px;
  background: var(--va-forest);
  overflow: hidden;
}

.case-v2__hero > .wrap-v4 {
  position: relative;
  z-index: 1;
}

.case-v2__hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.case-v2__hero.-with-visual .case-v2__hero-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

/* The mockup-tilt hero: fixed 648px copy column (the comp's), the rest is the phone's
   column and a positioning context for it. Rows stretch so the phone can hang from the
   grid's top edge rather than from the copy's height. */
.case-v2__hero.-mockup-tilt .case-v2__hero-grid {
  grid-template-columns: 648px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.case-v2__hero-logo {
  /* Comp: logo 180–288, H1 box top ≈ 375 — the empty eyebrow slot's room is in here. */
  margin-bottom: 88px;
}

.case-v2__hero-logo img {
  display: block;
  width: auto;
  max-width: 200px;
  max-height: 108px;
}

.case-v2__hero .case-v2__label {
  margin: 0 0 20px;
  color: var(--va-lime);
}

/* Gloock 56/1.1, −0.64px, cream. */
.case-v2__hero-title {
  margin: 0 0 40px;
  font-family: var(--va-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.0114em;
  color: var(--va-cream);
}

.case-v2__hero-sub {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--va-sage);
}

.case-v2__hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
}

/* The phone. Comp (1x): rotated bounding box 392×741 at x 807 / y 144 relative to the
   content's left edge and the hero's top — i.e. an unrotated 290×698 device box whose
   centre sits at (1003, 514), rotated 8.74° clockwise. The asset is the trimmed device
   plus a 6px transparent margin, so the box is 297px wide; its right edge lands 152px in
   from the content's right edge and its top 15px above the copy (the grid starts at the
   180px padding). Everything is expressed from the right so the phone stays clear of the
   copy column when the content is narrower than 1300. */
.case-v2__hero-visual.-mockup-tilt {
  position: relative;
  min-height: 1px;
}

.case-v2__hero-visual.-mockup-tilt img {
  position: absolute;
  top: -15px;
  right: 152px;
  width: 297px;
  height: auto;
  border-radius: 0;
  transform: rotate(8.74deg);
  transform-origin: 50% 50%;
}

/* --------------------------------------- block 2 — the cream card on the seam */
/* Not rendered on this page (the comp has no strip) — kept so re-adding `glance` to
   `order` renders the brand version rather than browser defaults. */

.case-v2__glance {
  position: relative;
  z-index: 2;
  padding: 0;
  margin-top: -96px;
}

.case-v2__glance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 16px;
  background: var(--va-cream);
  border-radius: 36px;
}

.case-v2__glance-item {
  padding: 22px 26px;
  border-right: 1px solid rgba(26, 18, 8, 0.08);
  border-bottom: 1px solid rgba(26, 18, 8, 0.08);
}
.case-v2__glance-item:nth-child(3n) { border-right: 0; }
.case-v2__glance-item:nth-last-child(-n + 3) { border-bottom: 0; }

.case-v2__glance-item dt {
  margin-bottom: 10px;
  color: var(--va-ink-soft);
}

.case-v2__glance-item dd {
  margin: 0;
  font-family: var(--va-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
  color: var(--va-ink);
}

.case-v2__stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__stack-tags li {
  padding: 4px 12px;
  font-family: var(--va-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 19px;
  color: var(--va-ink);
  background: var(--va-sand-deep);
  border-radius: 100px;
}

/* ---------------------------------------------------- block 3 — the situation */

/* Comp: text column 618 at x0, figure column 682 with a 32px inset → a 618px image; the
   H2 sits 66px below the section's 120px top padding and the figure's top edge sits at
   121px. The shared markup puts the H2 ABOVE the two-column grid, so the figure is pulled
   back up by the H2's height (52) + its margin (40) + the 65px offset: −157px. */
.case-v2__situation .case-v2__h2 {
  /* Capped to the text column: the globe is pulled up into this row (see `-bare` below),
     so a longer heading must wrap rather than run under it. */
  max-width: 618px;
  margin-top: 65px;
}

.case-v2__situation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.case-v2__situation.-with-visual .case-v2__situation-grid {
  grid-template-columns: 618px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.case-v2__situation-visual {
  position: relative;
  margin: 0;
  padding: 32px;
  background: var(--va-forest);
  border-radius: 36px;
  overflow: hidden;
}

.case-v2__situation-visual img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

/* The comp shows the globe bare on the sand — no panel, no bloom, no caption. */
.case-v2__situation-visual.-bare {
  margin-top: -157px;
  padding: 32px;
  background: none;
  border-radius: 0;
  overflow: visible;
}

.case-v2__situation-visual figcaption {
  position: relative;
  margin-top: 20px;
  font-size: 14px;
  line-height: 24px;
  color: var(--va-ink-soft);
}

/* The comp's serif 24 lede — the first paragraph in Gloock. */
.case-v2__situation .case-v2__prose p:first-child {
  margin-bottom: 28px;
  font-family: var(--va-display);
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------- block 4 — the approach */

/* Comp: H2 box ≈96px under the section's top edge (the situation above carries the 120). */
.case-v2__approach {
  padding-top: 96px;
}

/* 2 × 642 with a 16px gap, cards 249 tall, radius 28, padding 40/36, no shadow, no hover. */
.case-v2__phases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: va-phase;
}

/* The comp's signature device: a Gloock 144px watermark numeral, #E8D8BE, at
   top −36 / right 40, clipped by the card. */
.case-v2__phase {
  position: relative;
  min-height: 249px;
  padding: 40px 36px 36px;
  background: var(--va-cream);
  border-radius: 28px;
  overflow: hidden;
  counter-increment: va-phase;
}

.case-v2__phase::before {
  content: counter(va-phase);
  position: absolute;
  top: -36px;
  right: 40px;
  font-family: var(--va-display);
  font-size: 144px;
  line-height: 1;
  color: var(--va-watermark);
  pointer-events: none;
}

.case-v2__phase-period {
  position: relative;
  margin: 0 0 18px;
  color: var(--va-ink-soft);
}

.case-v2__phase-title {
  position: relative;
  margin: 0 0 12px;
  font-family: var(--va-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--va-ink);
}

.case-v2__phase-body {
  position: relative;
  max-width: 570px;
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--va-ink);
}

/* The two obligations and the closing note — HIDDEN in the comp and omitted from this
   page's data (DIFWEB-227, 2026-09-17). Styled anyway so re-adding them renders the
   brand version rather than browser defaults. */
.case-v2__callout {
  max-width: 900px;
  margin: 24px 0 0;
  padding: 40px 44px;
  border-radius: 28px;
}

.case-v2__callout--tradeoff {
  background: var(--va-forest);
}

.case-v2__callout--pushback {
  background: var(--va-cream);
  border-left: 3px solid var(--va-lime);
}

.case-v2__callout-label {
  margin: 0 0 16px;
}

.case-v2__callout--tradeoff .case-v2__callout-label {
  color: var(--va-lime);
}

.case-v2__callout--pushback .case-v2__callout-label {
  color: var(--va-ink-soft);
}

.case-v2__callout-body {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
}

.case-v2__callout--tradeoff .case-v2__callout-body {
  color: var(--va-cream);
}

.case-v2__callout--pushback .case-v2__callout-body {
  color: var(--va-ink);
}

.case-v2__callout-cost {
  margin: 22px 0 0;
  padding-top: 22px;
  font-size: 16px;
  line-height: 26px;
  border-top: 1px solid rgba(145, 189, 145, 0.22);
  color: var(--va-sage);
}

.case-v2__callout-cost span {
  font-family: var(--va-sans);
  font-weight: 700;
  color: var(--va-lime);
}

.case-v2__callout-quote {
  margin: 22px 0 0;
  padding-left: 20px;
  border-left: 2px solid rgba(26, 18, 8, 0.15);
}

.case-v2__callout-quote p {
  margin: 0 0 10px;
  font-family: var(--va-display);
  font-size: 18px;
  line-height: 30px;
  color: var(--va-ink);
}

.case-v2__callout-quote cite {
  font-family: var(--va-sans);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--va-ink-soft);
}

.case-v2__approach-note {
  max-width: 900px;
  margin-top: 32px;
  padding: 28px 32px;
  background: var(--va-sand-deep);
  border-radius: 24px;
}

.case-v2__approach-note p {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--va-ink);
}

/* --------------------------------------------- block 5 — what we built, centred */

/* Comp: portrait strip 773×240 at +40, centred H2 80px under it, then 7 rule-divided
   items in 2 × 622 with a 56px gutter, 40px between rows. */
.case-v2__built {
  padding: 40px 0 120px;
}

.case-v2__built-image {
  display: flex;
  justify-content: center;
  margin: 0 0 80px;
}

.case-v2__built-image img {
  display: block;
  width: 773px;
  max-width: 100%;
  height: auto;
}

.case-v2__built .case-v2__h2 {
  margin-bottom: 63px;
}

.case-v2__built-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__built-list li {
  padding-top: 32px;
  border-top: 1px solid var(--va-rule);
}

.case-v2__built-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 0 24px;
}

.case-v2__built-capability {
  margin: 0 0 12px;
  font-family: var(--va-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--va-ink);
}

.case-v2__built-why {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--va-ink);
}

/* Screenshot panels — none on this page since the comp drops the money-flow diagram;
   styled so a future `screenshots` entry renders on brand. */
.case-v2__shots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 64px;
}

.case-v2__shot {
  margin: 0;
  padding: 40px;
  background: var(--va-cream);
  border-radius: 28px;
}

.case-v2__shot img {
  display: block;
  width: 100%;
  height: auto;
}

.case-v2__shot figcaption {
  max-width: 70ch;
  margin: 26px auto 0;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: var(--va-ink-soft);
}

/* ------------------------------- block 6 — architecture, the navy movement */

/* Full-bleed navy band, #07122A → #050D1F with a soft radial highlight top-centre
   (pixel-sampled from the comp — the fill spec was not extractable). 160 top / 134 bottom. */
.case-v2__arch {
  position: relative;
  padding: 160px 0 134px;
  background: linear-gradient(180deg, var(--va-navy) 0%, var(--va-navy-deep) 100%);
  color: var(--va-cream);
}

.case-v2__arch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 40% at 50% 0%,
    rgba(36, 72, 132, 0.45) 0%,
    rgba(12, 27, 61, 0.2) 55%,
    transparent 80%
  );
  pointer-events: none;
}

.case-v2__arch > .wrap-v4 {
  position: relative;
  z-index: 1;
}

.case-v2__arch .case-v2__eyebrow {
  color: var(--va-on-navy-mute);
}

.case-v2__arch .case-v2__h2 {
  margin-bottom: 38px;
  color: var(--va-cream);
}

.case-v2__arch .case-v2__prose {
  margin-bottom: 47px;
}

.case-v2__arch .case-v2__prose p {
  color: var(--va-on-navy);
}

/* The glass panel: 1300 wide, radius 28, rgba(255,255,255,.03) + 4px blur + a sage hairline. */
.case-v2__diagram {
  max-width: none;
  margin: 0 0 83px;
  padding: 48px 36px 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(145, 189, 145, 0.15);
  border-radius: 28px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.case-v2__diagram img {
  display: block;
  width: 100%;
  max-width: 1050px;
  height: auto;
  margin: 0 auto;
}

/* Mobile-only affordance for the scroll box; see the <768px rule. */
.case-v2__diagram-hint {
  display: none;
}

.case-v2__diagram figcaption {
  max-width: 900px;
  margin: 28px auto 0;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: var(--va-on-navy);
}

/* The stack table: 940 centred; rows = 56px mark · 40 gap · 260px label column ·
   description (comp: mark at 0, label at 96, description at 356 — no gap after the label
   column), 24px vertical padding, hairline rules above every row and below the last. */
.case-v2__stack {
  max-width: 940px;
  margin: 0 auto;
}

.case-v2__stack-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding: 24px 0;
  border-top: 1px solid var(--va-rule-light);
}

.case-v2__stack.-with-icons .case-v2__stack-row {
  grid-template-columns: 356px 1fr;
  gap: 0;
}

.case-v2__stack-row:last-child {
  border-bottom: 1px solid var(--va-rule-light);
}

.case-v2__stack-row dt {
  font-family: var(--va-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--va-cream);
}

.case-v2__stack.-with-icons .case-v2__stack-row dt {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.case-v2__stack-icon {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.case-v2__stack-term {
  display: block;
  width: 260px;
  padding: 4px 16px 0 0;
}

.case-v2__stack-label {
  display: block;
  margin-bottom: 8px;
  color: var(--va-on-navy-mute);
}

.case-v2__stack-row dd {
  margin: 0;
  padding-top: 4px;
  font-size: 16px;
  line-height: 24px;
  color: var(--va-on-navy);
}

.case-v2__keep-revisit {
  max-width: 74ch;
  margin: 36px auto 0;
  padding-left: 22px;
  font-size: 16px;
  line-height: 26px;
  color: var(--va-cream);
  border-left: 2px solid var(--va-lime);
}

/* ----------------------------------------------------- block 7 — the results */

/* H2 left, then 8 cards 313×300 in 4 × 2 with a 16px gap; the review block follows 44px
   below, so this section's bottom padding is that gap and the review carries the 120. */
.case-v2__results {
  padding-bottom: 44px;
}

.case-v2__results-preamble {
  max-width: 68ch;
  margin-bottom: 40px !important;
}

.case-v2__result-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Card: 24px icon → 24 gap → Gloock 24/32 title, caption pinned to the bottom under a
   faint rule. Radius 24, padding 34/30/35, no shadow, no hover. */
.case-v2__result-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 34px 30px 35px;
  background: var(--va-cream);
  border-radius: 24px;
}

.case-v2__result-card-icon {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 0 24px;
}

.case-v2__result-card-title {
  margin: 0 0 24px;
  font-family: var(--va-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.01em;
  color: var(--va-ink);
}

.case-v2__result-card-caption {
  margin: auto 0 0;
  padding-top: 12px;
  font-size: 12px;
  line-height: 18px;
  color: var(--va-ink-soft);
  border-top: 1px solid var(--va-rule-faint);
}

/* Metric tiles — not used by this page (the comp has no numerals); brand version kept. */
.case-v2__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__metric {
  padding: 34px 30px;
  background: var(--va-cream);
  border-radius: 24px;
}

.case-v2__metric-value {
  margin: 0 0 12px;
  font-family: var(--va-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--va-ink);
}

.case-v2__metric-label {
  margin: 0;
  font-family: var(--va-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  color: var(--va-ink);
}

.case-v2__metric-measured {
  margin: 10px 0 0;
  padding-top: 10px;
  font-size: 12px;
  line-height: 18px;
  color: var(--va-ink-soft);
  border-top: 1px solid var(--va-rule-faint);
}

.case-v2__results-consequence {
  max-width: 74ch;
  margin-top: 44px !important;
  padding: 30px 34px;
  background: var(--va-forest);
  border-radius: 28px;
  color: var(--va-cream) !important;
}

/* --------------------------------------------- block 8 — the testimonial block */

/* Comp: a 1300×870 #011703 block, radius 28, padding 80 top / 140 sides; Figtree 600
   32/1.3 cream quote, name 16 + role eyebrow at 64%; the two-figure raster (1020 wide)
   at x 140, flush to the bottom edge. Author row ends 410px above the bottom — that is
   the padding, as a percentage of the 1300 wrap so it scales with the block. */
.case-v2__review {
  padding: 0 0 120px;
}

.case-v2__review-card {
  max-width: 900px;
  margin: 0;
  padding: 48px 52px;
  background: var(--va-cream);
  border-radius: 28px;
}

.case-v2__review-card.-dark {
  position: relative;
  max-width: none;
  padding: 80px 140px 31.5%;
  overflow: hidden;
  background: var(--va-forest);
  border-radius: 28px;
}

.case-v2__review-card blockquote {
  margin: 0 0 45px;
}

.case-v2__review-card blockquote p {
  margin: 0;
  font-family: var(--va-sans);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--va-cream);
}

.case-v2__review-card:not(.-dark) blockquote p {
  font-family: var(--va-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.4;
  color: var(--va-ink);
}

.case-v2__review-author {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Racquel's photo as a 48px round avatar — added to the comp's author row on Vadim's
   request (7 Sep). */
.case-v2__review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 100%;
  object-fit: cover;
}

/* Inter Regular — the only Inter weight the comp uses (and the site ships 400/600/700, so
   a 500 here would only fall back). */
.case-v2__review-author strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--va-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: var(--va-cream);
}

.case-v2__review-author em {
  display: block;
  font-family: var(--va-sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--va-on-forest-mute);
}

.case-v2__review-card:not(.-dark) .case-v2__review-author strong {
  color: var(--va-ink);
}

.case-v2__review-card:not(.-dark) .case-v2__review-author em {
  color: var(--va-ink-soft);
}

/* 1020 of 1300 = 78.46% wide, 140 of 1300 = 10.77% in from the left. */
.case-v2__review-visual {
  position: absolute;
  left: 10.77%;
  bottom: 0;
  width: 78.46%;
  pointer-events: none;
}

.case-v2__review-visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------- related cases — on the sand ground */

/* `RelatedCasesSection` is site chrome (DIFWEB-90) and stays for its internal links. Under
   this skin it sits on the sand that `.middle` now paints, aligned to the 1300 grid and
   inked like the article, so it no longer reads as an unskinned band between the results
   and the form.

   Since DIFWEB-302 the block is a card grid that paints itself from
   `--case-related-{ink,line,hover}`, so this skin maps its own brand tokens onto those
   three rather than restating colours per element — the display face and the grid are the
   only things left that are genuinely VA's. */
.page.-case-va .related-cases {
  --case-related-ink: var(--va-ink);
  --case-related-line: var(--va-rule);
  --case-related-hover: var(--va-forest-soft);

  /* `.wrap` sets a fixed 1160px `width` from 1280px up; override width, not just max. */
  width: 100%;
  max-width: 1380px;
  padding: 72px 40px 120px;
}

.page.-case-va .related-cases > h2 {
  font-family: var(--va-display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.01em;
}

/* The one place VA keeps a second hover colour: the card frame stays the brand lime it
   used to underline links with, while the ink goes forest (lime measures ~1.7:1 on sand,
   so it can carry a frame but never the text). */
.page.-case-va .related-cases .related-cases__card:hover,
.page.-case-va .related-cases .related-cases__card:focus-visible {
  border-color: var(--va-lime);
  box-shadow: inset 0 0 0 1px var(--va-lime);
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1279px) {
  /* Below the comp's width the content shrinks under 1300: the copy column gives way
     and the phone hugs the right edge. */
  .case-v2__hero.-mockup-tilt .case-v2__hero-grid {
    grid-template-columns: minmax(0, 1fr) 380px;
  }

  .case-v2__hero-visual.-mockup-tilt img {
    top: -10px;
    right: 40px;
    width: 270px;
  }

  .case-v2__hero.-with-visual:not(.-mockup-tilt) .case-v2__hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .case-v2__hero-title {
    font-size: 48px;
  }

  .case-v2__glance-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .case-v2__glance-item:nth-child(3n) { border-right: 1px solid rgba(26, 18, 8, 0.08); }
  .case-v2__glance-item:nth-child(2n) { border-right: 0; }
  .case-v2__glance-item:nth-last-child(-n + 3) { border-bottom: 1px solid rgba(26, 18, 8, 0.08); }
  .case-v2__glance-item:nth-last-child(-n + 2) { border-bottom: 0; }

  .case-v2__situation.-with-visual .case-v2__situation-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 32px;
  }

  .case-v2__situation-visual.-bare {
    margin-top: -120px;
    padding: 0;
  }

  .case-v2__result-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-v2__review-card.-dark {
    padding-left: 80px;
    padding-right: 80px;
  }

  .case-v2__stack.-with-icons .case-v2__stack-row {
    grid-template-columns: 300px 1fr;
  }

  .case-v2__stack.-with-icons .case-v2__stack-row dt {
    gap: 24px;
  }

  .case-v2__stack-term {
    width: 220px;
  }
}

@media (max-width: 1023px) {
  .case-v2__section {
    padding: 88px 0;
  }

  .case-v2__hero {
    padding: 150px 0 120px;
  }

  .case-v2__hero.-mockup-tilt .case-v2__hero-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .case-v2__hero-visual.-mockup-tilt img {
    right: 24px;
    width: 230px;
  }

  .case-v2__h2 {
    font-size: 40px;
  }

  .case-v2__arch {
    padding: 110px 0 96px;
  }

  .case-v2__diagram {
    padding: 28px 24px;
  }

  .case-v2__review-card.-dark blockquote p {
    font-size: 26px;
  }
}

@media (max-width: 767px) {
  .case-v2__section {
    padding: 64px 0;
  }

  /* Single column; the phone drops below the copy, still tilted, and is sized so its
     rotated bounding box (≈ 1.13 × width) stays inside the 345px column. */
  .case-v2__hero {
    padding: 132px 0 64px;
  }

  .case-v2__hero.-with-visual .case-v2__hero-grid,
  .case-v2__hero.-mockup-tilt .case-v2__hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .case-v2__hero-visual.-mockup-tilt {
    display: flex;
    justify-content: center;
    padding: 56px 0 24px;
  }

  .case-v2__hero-visual.-mockup-tilt img {
    position: static;
    width: 210px;
  }

  .case-v2__hero-logo {
    margin-bottom: 40px;
  }

  .case-v2__hero-logo img {
    max-width: 148px;
    max-height: 80px;
  }

  .case-v2__hero-title {
    margin-bottom: 24px;
    font-size: 38px;
  }

  .case-v2__hero-sub {
    font-size: 17px;
    line-height: 27px;
  }

  .case-v2__h2 {
    margin-bottom: 28px;
    font-size: 32px;
  }

  .case-v2__glance {
    margin-top: -72px;
  }

  .case-v2__glance-grid {
    grid-template-columns: 1fr;
    padding: 10px;
    border-radius: 28px;
  }
  .case-v2__glance-item {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(26, 18, 8, 0.08) !important;
    padding: 18px 20px;
  }
  .case-v2__glance-item:last-child { border-bottom: 0 !important; }

  .case-v2__situation .case-v2__h2 {
    margin-top: 0;
  }

  .case-v2__situation.-with-visual .case-v2__situation-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .case-v2__situation-visual {
    padding: 18px;
    border-radius: 28px;
  }

  .case-v2__situation-visual.-bare {
    margin-top: 0;
    padding: 0;
  }

  .case-v2__situation .case-v2__prose p:first-child {
    font-size: 21px;
  }

  .case-v2__phases,
  .case-v2__built-list {
    grid-template-columns: 1fr;
  }

  .case-v2__phase {
    min-height: 0;
    padding: 32px 24px 28px;
  }

  .case-v2__phase::before {
    top: -26px;
    right: 20px;
    font-size: 110px;
  }

  .case-v2__callout {
    padding: 28px 24px;
    border-radius: 24px;
  }

  .case-v2__built {
    padding-top: 24px;
  }

  .case-v2__built-image {
    margin-bottom: 40px;
  }

  .case-v2__built .case-v2__h2 {
    margin-bottom: 36px;
  }

  .case-v2__built-list {
    gap: 28px;
  }

  .case-v2__built-list li {
    padding-top: 24px;
  }

  .case-v2__built-icon {
    margin-bottom: 18px;
  }

  .case-v2__arch {
    padding: 72px 0 64px;
  }

  .case-v2__arch .case-v2__prose {
    margin-bottom: 36px;
  }

  .case-v2__shot,
  .case-v2__diagram {
    padding: 18px;
    border-radius: 24px;
  }

  .case-v2__diagram {
    margin-bottom: 48px;
  }

  .case-v2__shot figcaption,
  .case-v2__diagram figcaption {
    text-align: left;
  }

  /* The architecture diagram is authored around 1000px wide. Squeezed into a 345px phone
     its labels land at about 4px and the diagram is decoration rather than information.
     Floor the image and scroll it sideways instead — the repo-wide rule for wide content.
     `ArchitectureStack` wraps the image in `.case-v2__diagram-scroll`, so the inner box
     scrolls and the caption stays in flow. */
  .case-v2__diagram-scroll,
  .case-v2__shot {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* The mask is fixed to the box, not the content, so the right edge stays soft while
     the image scrolls under it — the cue that there is more to the side. */
  .case-v2__diagram-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  }

  .case-v2__diagram-scroll img,
  .case-v2__shot img {
    min-width: 680px;
  }

  .case-v2__diagram-hint {
    display: block;
    margin: 10px 0 0;
    font-family: var(--va-sans);
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.04em;
    color: var(--va-sage);
  }

  /* The stack table collapses: mark + label row, then the description underneath. */
  .case-v2__stack-row,
  .case-v2__stack.-with-icons .case-v2__stack-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 0;
  }

  .case-v2__stack.-with-icons .case-v2__stack-row dt {
    align-items: center;
    gap: 16px;
  }

  .case-v2__stack-icon {
    width: 40px;
    height: 40px;
  }

  .case-v2__stack-term,
  .case-v2__stack-row dd {
    width: auto;
    padding-top: 0;
  }

  .case-v2__results {
    padding-bottom: 24px;
  }

  .case-v2__result-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .case-v2__result-card {
    min-height: 0;
    padding: 26px 22px 24px;
  }

  .case-v2__result-card-title {
    margin-bottom: 20px;
    font-size: 22px;
    line-height: 28px;
  }

  .case-v2__results-consequence {
    padding: 24px 22px;
  }

  .case-v2__review {
    padding-bottom: 64px;
  }

  .case-v2__review-card {
    padding: 30px 24px;
    border-radius: 24px;
  }

  /* Image spans the block minus 24px gutters; its top 14% is empty ground, so a bottom
     padding of ~44% of the wrap leaves the author row clear of the figures. */
  .case-v2__review-card.-dark {
    padding: 44px 24px 44%;
    border-radius: 24px;
  }

  .case-v2__review-card blockquote {
    margin-bottom: 28px;
  }

  .case-v2__review-card blockquote p,
  .case-v2__review-card.-dark blockquote p {
    font-size: 22px;
  }

  .case-v2__review-visual {
    left: 24px;
    width: calc(100% - 48px);
  }

  .page.-case-va .related-cases {
    padding: 48px 15px 64px;
  }

  .page.-case-va .related-cases > h2 {
    font-size: 26px;
  }
}

@media (min-width: 560px) and (max-width: 767px) {
  .case-v2__result-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}