/* 2.4.6 — literal sweep: a literal whose value IS a token became it; the rest is a value this
   file paints by hand and is counted in the report. The names are global-2026.css's own aliases (2.4.2); a value only the system holds is written --pui-*. */
/* =========================================================================
   PAGE: GATED CASE STUDY (public/cases/case.blade.php) — page-specific CSS.
   Linked from the view's @section('css'). All rules scoped under .page-case-study.
   Dark "one-pager" header card, two-column body (report intro + thumbnail
   detail on the left, lead-capture form on the right), plus tablet + mobile
   overrides. The form reuses the shared library (.ui-form / .field /
   .checkbox / .btn.btn--dark / .form-success-msg in global-2026.css) — not forked.

   Breakpoints (project-wide):
     mobile  : width < 768
     tablet  : 768 .. 1023
     desktop : width >= 1024  (Figma artboard 1512, content 1296)
   ========================================================================= */

/* ---------- Anti-cascade overrides (defeat layout.min.css + bootstrap.min.css) ---------- */
/* 2.4.2 — guard: the page's anti-cascade resets (`button`, `a:link…`) outrank a one-class component (0,1,1 / 0,2,1 over
   0,1,0); they now skip any element carrying a pui- class (inside :where(), so their specificity is unchanged — D60) and the package paints its own. */
.page-case-study a:where(:not([class*="pui-"]):not(.pui-typography *)):link,
.page-case-study a:where(:not([class*="pui-"]):not(.pui-typography *)):visited,
.page-case-study a:where(:not([class*="pui-"]):not(.pui-typography *)):hover,
.page-case-study a:where(:not([class*="pui-"]):not(.pui-typography *)):focus,
.page-case-study a:where(:not([class*="pui-"]):not(.pui-typography *)):active { color: inherit; text-decoration: none; }

.page-case-study button:where(:not([class*="pui-"])) {
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.page-case-study img { display: block; max-width: 100%; }

.page-case-study .container {
  width: 1320px;
  max-width: 1320px;
  padding-left: var(--pui-space-12);
  padding-right: var(--pui-space-12);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}


/* ---------- Sticky footer ---------- */
.page-case-study {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-case-study .case-study-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: var(--page-top);   /* the eyebrow's line — --page-top in global-2026.css (132 / 116 / 96), no per-breakpoint line */
  padding-bottom: 0;
}
.page-case-study .case-study-main > div.container:first-of-type {
  margin-bottom: var(--pui-space-64);
}
/* The footer comes from @include('blocks.footer-2026') (a .footer-2026 wrapper),
   not the prototype's old .footer-wrap. margin-top:auto pushes it to the bottom. */
.page-case-study .case-study-main > .footer-2026 {
  margin-top: auto;
}

/* ===========================================================
   HEADER ONE-PAGER — dark card: photo collage + gradient,
   brand icon + name on top, GEO/Platform meta on the bottom
   =========================================================== */
.page-case-study .cs-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pui-space-24);
  min-height: 290px;
  padding: var(--pui-space-32);
  border-radius: var(--pui-radius-32);          /* 32px */
  background: var(--pui-color-neutral-900);          /* #141414 base behind the photo */
  margin-bottom: var(--pui-space-32);
}
.page-case-study .cs-header__bg { position: absolute; inset: 0; z-index: 0; }
.page-case-study .cs-header__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.page-case-study .cs-header__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* neutral/800 design-system token (#231b1b) — same banner component as the
     MobuppsX case-study block; was a raw #141414 (Sep 2 2026). */
  background: linear-gradient(to right, var(--pui-color-neutral-800) 33%, color-mix(in srgb, var(--pui-color-neutral-1000) 0%, transparent) 100%);
}
.page-case-study .cs-header__top,
.page-case-study .cs-header__meta { position: relative; z-index: 1; }
.page-case-study .cs-header__photo { display: none; }   /* mobile-only middle photo */

.page-case-study .cs-header__top {
  display: flex;
  align-items: center;
  gap: var(--pui-space-24);
}
.page-case-study .cs-header__icon {
  flex: 0 0 93px;
  width: 93px;
  height: 93px;
  border-radius: var(--pui-radius-16);          /* 16px */
  overflow: hidden;
}
.page-case-study .cs-header__icon img { width: 100%; height: 100%; object-fit: cover; }
/* Optional stroke — toggled per case study (brand_icon_stroke). Keeps a dark/black
   icon from blending into the dark header. Drawn as an OVERLAY ring (pseudo-element)
   so the box AND the image stay exactly 93×93 whether the stroke is on or off — a
   real border would shrink the image by 4px. border-radius:inherit follows the icon
   radius (16px desktop / 8px mobile). */
.page-case-study .cs-header__icon--stroke { position: relative; }
.page-case-study .cs-header__icon--stroke::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--pui-color-neutral-200);
  border-radius: inherit;
  pointer-events: none;
}
.page-case-study .cs-header__brand { display: flex; flex-direction: column; min-width: 0; }
.page-case-study .cs-header__eyebrow {
  margin: 0;
  font-family: var(--pui-font-family-poppins);
  font-weight: var(--pui-font-weight-400);
  font-size: var(--pui-type-body-medium-font-size);         /* 18 / 16 */
  line-height: var(--pui-font-line-height-relaxed);
  color: rgba(212, 212, 212, 0.6);
}
.page-case-study .cs-header__title {
  margin: 0;
  font-family: var(--pui-font-family-poppins);
  font-weight: var(--pui-font-weight-500);
  font-size: var(--pui-type-headline-medium-font-size);     /* 45 desktop */
  line-height: var(--pui-font-line-height-tight);
  letter-spacing: var(--pui-font-letter-spacing-tight);
  color: #cccccc;
}

.page-case-study .cs-header__meta {
  display: flex;
  align-items: flex-start;
  gap: var(--pui-space-40);
}
.page-case-study .cs-meta { display: flex; flex-direction: column; gap: var(--pui-space-4); }
.page-case-study .cs-meta__label {
  margin: 0;
  font-family: var(--pui-font-family-poppins);
  font-weight: var(--pui-font-weight-400);
  font-size: var(--pui-type-body-medium-font-size);         /* 18 / 16 */
  line-height: var(--pui-font-line-height-normal);
  color: rgba(212, 212, 212, 0.6);
}
.page-case-study .cs-meta__value {
  margin: 0;
  font-family: var(--pui-font-family-poppins);
  font-weight: var(--pui-font-weight-400);
  font-size: var(--pui-type-body-large-font-size);          /* 22 / 18 */
  line-height: var(--pui-font-line-height-normal);
  color: #c1c1c1;
}

/* ===========================================================
   BODY — left column (report intro + thumbnail detail) | form
   =========================================================== */
.page-case-study .cs-body {
  display: flex;
  align-items: flex-start;
  gap: 85px;
}
.page-case-study .cs-body__left {
  flex: 0 0 746px;
  display: flex;
  flex-direction: column;
  gap: var(--pui-space-24);
}

/* Report intro */
.page-case-study .cs-intro { display: flex; flex-direction: column; gap: var(--pui-space-12); }
.page-case-study :where(.cs-intro) > .pui-text--title-small {
  margin: 0;
  color: var(--pui-text-default);
}
.page-case-study :where(.cs-intro) > .pui-text--body-medium {
  margin: 0;
  color: var(--pui-text-default);
}

/* Rich body (gated case study — Laraberg HTML; may contain pasted images).
   Only the /case-study/{slug} view uses .cs-richtext; the legacy :where(.cs-intro) > .pui-text--body-medium
   above is untouched. Paragraphs match Body-Medium; images get a 16px radius and
   scale down to fit (full width on mobile). */
.page-case-study .cs-richtext { display: flex; flex-direction: column; gap: var(--pui-space-12); }
.page-case-study .cs-richtext p,
.page-case-study .cs-richtext li {
  margin: 0;
  font-family: var(--pui-font-family-poppins);
  font-weight: var(--pui-font-weight-400);
  font-size: var(--pui-type-body-medium-font-size);         /* 18 desktop / 16 tablet+mobile (pinned below) */
  line-height: var(--pui-font-line-height-relaxed);
  color: var(--pui-text-default);
}
.page-case-study .cs-richtext figure { margin: 0; }
/* Images render at the width the manager set in the editor (the <img> width
   attribute) on EVERY breakpoint. max-width:100% only takes over when an image
   is WIDER than the available column — so on mobile a big picture shrinks to
   full width while a small logo keeps its set size. No forced width:100%. */
.page-case-study .cs-richtext img {
  display: block;
  max-width: 100%;
  height: auto !important;                   /* beat the editor's inline height so aspect stays correct when max-width shrinks it */
  border-radius: var(--pui-radius-16);                       /* requested — rounded body images */
}

/* Lead-capture form card (grey → success message uses default white slot) */
.page-case-study .cs-body > .form-card {
  flex: 0 0 465px;
  /* F — the card is the form's own (blocks/form-2026: .form-card.pui-card.form-card--raised — the tint, the radius, the inset and the shadow are the component's); the page keeps its width in the row */
}
/* F — the form's title is the one form's (.ui-form__title — the Card's title, 22 web / 18 mobile; the page's own 20 on the headline face went with its class, 2026-09-28) */

/* =========================================================================
   TABLET — 768 .. 1023  (two equal columns, stacked thumbnail/desc)
   ========================================================================= */
@media (max-width: 1023px) {
  .page-case-study .container {
    width: 100%;
    max-width: 100%;
    padding-left: var(--pui-space-32);
    padding-right: var(--pui-space-32);
  }

  .page-case-study .case-study-main > div.container:first-of-type { margin-bottom: var(--pui-space-48); }

  .page-case-study .cs-header { margin-bottom: var(--pui-space-24); }

  .page-case-study .cs-body { gap: var(--pui-space-20); }
  .page-case-study .cs-body__left { flex: 1 1 0; min-width: 0; }
  .page-case-study .cs-body > .form-card { flex: 1 1 0; min-width: 0; }

  /* Title-Small / Body-Medium pinned to their tablet sizes — the global tokens
     only drop at <768, but the design calls for 25 / 16 from tablet down. */
  .page-case-study .cs-richtext p,
  .page-case-study .cs-richtext li  { font-size: var(--pui-font-size-16); }
  .page-case-study :where(.cs-intro) > .pui-text--body-medium { font-size: var(--pui-font-size-16); }   /* the size pin stays (request 61) — restored 2026-10-05 */
}

/* =========================================================================
   MOBILE — <768  (single column; form moves between intro and detail)
   ========================================================================= */
@media (max-width: 767px) {
  .page-case-study .container { padding-left: var(--pui-space-16); padding-right: var(--pui-space-16); }

  .page-case-study .case-study-main > div.container:first-of-type { margin-bottom: var(--pui-space-32); }

  /* Header becomes a solid-dark card with the photo as a separate middle band. */
  .page-case-study .cs-header {
    justify-content: flex-start;
    gap: var(--pui-space-12);
    padding: var(--pui-space-16);
    border-radius: var(--pui-radius-16);          /* 16px */
    background: var(--pui-color-neutral-1000);
    margin-bottom: var(--pui-space-40);
  }
  .page-case-study .cs-header__bg { display: none; }
  .page-case-study .cs-header__photo {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 376 / 300;
    border-radius: var(--pui-radius-8);          /* 8px */
    overflow: hidden;
  }
  .page-case-study .cs-header__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 98% center; }
  .page-case-study .cs-header__icon { flex-basis: 64px; width: 64px; height: 64px; border-radius: var(--pui-radius-8); }
  .page-case-study .cs-header__title { font-size: var(--pui-type-title-medium-font-size); }   /* 28 */
  .page-case-study .cs-header__meta { gap: var(--pui-space-24); }

  /* Stack the body; the form sits below the intro. */
  .page-case-study .cs-body { flex-direction: column; gap: var(--pui-space-40); }
  .page-case-study .cs-body__left { display: contents; }
  .page-case-study .cs-intro,
  .page-case-study .cs-body > .form-card { flex: 0 0 auto; width: 100%; }
  .page-case-study .cs-intro { order: 1; }
  .page-case-study .cs-body > .form-card { order: 2; }   /* tighter card padding on mobile */
}

/* F — the form (.ui-form, the spam trap, the file control) is stated once, in global-2026.css § FORM; this page's copy went (2026-09-28). The form itself is blocks/form-2026; the paint is the kit's. */

/* =========================================================================
   LEGACY CASE STUDY BODY (the 5 case_articles only) — restores the real
   {!! $case->article !!} body, styled like the BLOG ARTICLE body. No form,
   no subscribe, no social. Body wrapper matches the blog article body width
   (856px), centered (no sidebar); full width on tablet/mobile.
   ========================================================================= */
/* Two-column: body (left, 856px) + related sidebar (right, desktop-only) —
   same layout as the blog article. */
.page-case-study .cs-layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pui-space-32);
}
.page-case-study .cs-article {
  flex: 0 0 856px;
  max-width: 856px;
  min-width: 0;
}
.page-case-study .cs-aside {
  flex: 0 0 296px;
  display: flex;
  flex-direction: column;
  gap: var(--pui-space-24);
}
.page-case-study :where(.cs-aside) > .pui-text--body-large {
  margin: 0;
  width: 100%;
  color: var(--pui-text-default);
}
.page-case-study .cs-related {
  display: flex;
  flex-direction: column;
  gap: var(--pui-space-16);
  width: 100%;
}
@media (max-width: 1023px) {
  .page-case-study .cs-layout { display: block; }
  .page-case-study .cs-article { flex: none; width: 100%; max-width: 100%; }
  .page-case-study .cs-aside { display: none; }   /* sidebar is desktop-only, like the blog */
}

/* ===========================================================
   ARTICLE BODY (legacy case studies) — same rules as the blog
   article body, re-scoped to .page-case-study. Styles the real
   {!! $case->article !!} Gutenberg HTML. (5 legacy cases only.)
   =========================================================== */
.page-case-study .pui-typography {
  display: flow-root;
  max-width: none;   /* D — the body is .pui-typography (typography.css quotes this file as its source): the family, body/medium, Regular, the 1.6 line and the ink are the kit's (text/default, #0b0202 for #000 — D50); the kit's 720 measure is lifted — the contract states the site's 856 column */
  /* Long unbroken URLs used as link text (e.g. https://…/chatwithchase/) must
     wrap, or they overflow the column on narrow screens. */
  overflow-wrap: break-word;
  word-break: break-word;
}
/* D — the kit's first-child rule zeroes the first block's top margin */
/* D — the paragraph gap is the kit's 16 under each paragraph (was 1em = 18 — for the veto pass) */
/* R — the link-underline guard went: the page reset no longer reaches the block (request 25) */
/* R — request 17 shipped: the kit's strong is font/weight/600 (his Semibold); the D2 guard went */
.page-case-study .pui-typography em { font-style: italic; }
.page-case-study .pui-typography ul { list-style: disc; }
.page-case-study .pui-typography ol { list-style: decimal; }
/* D — the items sit at the kit's gap 4 (was 6 between — for the veto pass) */
/* D — the marker is the kit's text/muted (the same #544d4d) */
.page-case-study .article-body__figure { margin: var(--pui-space-32) 0; }   /* D — the figure element is the kit's (32 around, a column with the caption 8 under); the __figure class is the site's own, by name */
.page-case-study .pui-typography figure.aligncenter { text-align: center; }
.page-case-study .pui-typography img,
.page-case-study .article-body__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--pui-radius-16);      /* 16 */
}
.page-case-study .article-body__figure + h2 { margin-top: var(--pui-space-8); }   /* D — by name */
.page-case-study .pui-typography iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: var(--pui-space-32) 0;   /* D — by name; an embedded video is the site's own block (the kit's figure holds an Aspect ratio) */
  border: 0;
  border-radius: var(--pui-radius-16);
}
.page-case-study .pui-typography figure.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.page-case-study .pui-typography .aligncenter { text-align: center; }
.page-case-study .pui-typography .wp-block-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pui-space-16);
  margin: var(--pui-space-24) 0;   /* D — by name; the CMS blocks from here down are the site's own (the kit's Typography has no WordPress blocks — request 25) */
}
.page-case-study .pui-typography .wp-block-file a { text-decoration: underline; }
.page-case-study .pui-typography .wp-block-file .wp-block-file__button {
  display: inline-block;
  padding: var(--pui-space-8) 18px;   /* D — space/8 by name; a CMS button cannot carry the Button class — its 18 stays, stated */
  background: var(--pui-action-primary-bg);
  color: var(--pui-action-primary-fg);
  border-radius: var(--pui-radius-8);
  text-decoration: none;
}
.page-case-study .pui-typography figure.alignleft {
  float: left; max-width: 45%; margin: 6px 28px 18px 0;   /* D — the floats' margins are the editor's own — stated */
}
.page-case-study .pui-typography figure.alignright {
  float: right; max-width: 45%; margin: 6px 0 18px 28px;
}
.page-case-study .pui-typography figure.alignleft img,
.page-case-study .pui-typography figure.alignright img { width: 100%; }
.page-case-study .pui-typography figure.is-resized { display: inline-block; max-width: 100%; }
.page-case-study .pui-typography figure.is-resized img { width: 100%; height: auto; }
.page-case-study .pui-typography figure.aligncenter.is-resized { display: block; }
.page-case-study .pui-typography .flbox {
  display: flex;
  align-items: center;
  gap: var(--pui-space-32);
  margin: 36px 0;   /* D — space/32 by name; 36 is the block's own — stated */
}
.page-case-study .pui-typography .flbox-pic {
  flex: 0 0 280px;
  width: 280px;
  max-width: 280px;
}
.page-case-study .pui-typography .flbox-pic figure { margin: 0; }
.page-case-study .pui-typography .flbox-pic img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;        /* round portrait, like the live article */
}
.page-case-study .pui-typography .flbox > div:last-child { flex: 1 1 0; min-width: 0; }
.page-case-study .pui-typography .wp-block-columns {
  display: flex;
  gap: var(--pui-space-32);
  align-items: flex-start;
  margin: var(--pui-space-24) 0;   /* D — by name */
}
.page-case-study .pui-typography .wp-block-column { flex: 1 1 0; min-width: 0; }
.page-case-study .pui-typography .wp-block-column > *:first-child { margin-top: 0; }
.page-case-study .pui-typography .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pui-space-12);
  margin: var(--pui-space-24) 0;   /* D — by name */
  list-style: none;
  padding: 0;
}
.page-case-study .pui-typography .wp-block-button__link,
.page-case-study .pui-typography .wp-block-button a {
  display: inline-block;
  padding: var(--pui-space-12) var(--pui-space-24);   /* D — by name; a CMS button cannot carry the Button class — stated */
  background: var(--pui-action-primary-bg);
  color: var(--pui-action-primary-fg);
  border-radius: var(--pui-radius-8);
  font-weight: var(--pui-font-weight-500);   /* D — by name */
  text-decoration: none;
}
.page-case-study .pui-typography .wp-block-button__link:hover,
.page-case-study .pui-typography .wp-block-button a:hover { background: var(--pui-action-primary-bg-hover); }
.page-case-study .pui-typography .wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pui-space-12);
  margin: var(--pui-space-24) 0;   /* D — by name */
  list-style: none;
  padding: 0;
}
.page-case-study .pui-typography .wp-block-gallery figure { flex: 1 1 220px; margin: 0; }
.page-case-study .pui-typography .wp-block-cover { margin: var(--pui-space-24) 0; border-radius: var(--pui-radius-16); overflow: hidden; }   /* D — by name */
.page-case-study .pui-typography .wp-block-group { margin: var(--pui-space-24) 0; }   /* D — by name */
.page-case-study .pui-typography .wp-block-separator {
  margin: var(--pui-space-32) auto;   /* D — by name; the 100 measure is the editor's — stated */
  border: 0;
  border-top: 1px solid var(--pui-color-neutral-200);
  max-width: 100px;
}
@media (max-width: 767px) {
  .page-case-study .article-body__figure { margin: var(--pui-space-24) 0; }   /* D — by name */
  .page-case-study .pui-typography .flbox { flex-direction: column; align-items: flex-start; gap: var(--pui-space-16); }   /* D — by name */
  .page-case-study .pui-typography .flbox-pic { flex: 0 0 auto; width: 160px; max-width: 160px; }
  .page-case-study .pui-typography .wp-block-columns { flex-direction: column; gap: var(--pui-space-16); }   /* D — by name */
  .page-case-study .pui-typography figure.alignleft,
    .page-case-study .pui-typography figure.alignright { float: none; max-width: 100%; margin: var(--pui-space-16) 0; }   /* D — by name */
}
/* Related-case cards — the cases-hub .case-card look (image · brand logo · title
   · circular arrow), re-scoped for the sidebar on the detail page. */
.page-case-study :where(.cs-latest__grid, .cs-related) .pui-card {
  justify-content: space-between;   /* when a row grows (a title wraps), the extra
                                       height opens between image and logo+text */
  /* the inset is the block's (preview-card, global-2026.css) — 2026-10-05 */
  /* B — the white box, the 1 px border/default line and radius 16 are .pui-card--border (the blog card's mapping); `padding: 20px 20px 0` stays — the grid is built on 20 (stated); the card's own gap (12) now separates image and foot */
}

.page-case-study .pui-card__media {
  width: 100%;
  aspect-ratio: 376 / 300;
  /* B — the 8 radius and the crop are .pui-card__media; the site's 376/300 aspect stays */
}


/* =========================================================================
   OUR LATEST CASE STUDIES (gated /case-study/{slug} only) — a 3-up grid of
   the .case-card component, revealed a few seconds AFTER a successful form
   submit (JS adds .is-revealed + scrolls here). Hidden on load so it only
   appears once the visitor has converted. Grid columns mirror the cases hub
   (3 desktop → 2 tablet → 1 mobile). scroll-margin-top clears the fixed nav
   so the title isn't hidden under it when we scroll to the block.
   ========================================================================= */
.page-case-study .cs-latest {
  display: none;                 /* revealed on successful form submit */
  flex-direction: column;
  gap: var(--pui-space-32);
  margin-top: var(--pui-space-80);
  scroll-margin-top: 115px;      /* clears the fixed nav when the page scrolls to this block */
  /* Fade + slide target. The reveal is a TWO-STEP handoff (see the JS): the
     block is first put into layout still invisible (.is-revealed), then one
     frame later .is-visible triggers this transition — a smooth fade-in
     instead of a sharp display:block pop. */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-case-study .cs-latest.is-revealed { display: flex; }   /* step 1: in layout, still invisible */
.page-case-study .cs-latest.is-visible { opacity: 1; transform: translateY(0); }   /* step 2: fade + slide in */
.page-case-study .pui-text--headline-small { margin: 0; }
.page-case-study .cs-latest__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pui-space-24);
}

@media (prefers-reduced-motion: reduce) {
  .page-case-study .cs-latest { transition: none; transform: none; }
}

@media (max-width: 1023px) {
  .page-case-study .cs-latest { margin-top: var(--pui-space-64); scroll-margin-top: 96px; gap: var(--pui-space-24); }
  .page-case-study .cs-latest__grid { grid-template-columns: repeat(2, 1fr); gap: var(--pui-space-20); }
}

@media (max-width: 767px) {
  .page-case-study .cs-latest { margin-top: var(--pui-space-48); scroll-margin-top: 80px; }
  .page-case-study .cs-latest__grid { grid-template-columns: repeat(1, 1fr); }
}

/* STEP 12 (2026-09-28) — a design-system part carries the design system's classes only; this page reaches a part through the block that holds it
   and states only what is the page's (a width in a row, a place in a grid, a picture's ratio). */
/* STEP 12 · TOKENS — the site's alias names became the design system's; a typed value that equals a token is the token */