/* ===========================================================================
   Native case study template
   ---------------------------------------------------------------------------
   One stylesheet for every native (non-Framer) case page. Pages are built by
   stacking the modules below as semantic HTML; there is no per-case stylesheet
   and no per-case JS.

   Every page loads the Portfolio UI Kit before this stylesheet. The UI Kit owns
   the light/dark semantic tokens; this file only adds case-content geometry and
   project-specific presentation roles.

   MODULES
     shell          page reset, .case-page, .case-inner, .case-inner-wide
     case-hero      kicker, h1, subtitle, client line; preserve-subtitle modifier
     case-background  short "Introduction" column
     case-meta      project detail row (6 -> 3 -> 2 columns); five-up/row modifier
     case-media     full-width, natural-height figures; hero/lead/compact-gallery modifiers
     case-achievements  accent panel, numbered rows, portrait
     case-tabs      tablist over the editorial divider
     case-section   section rhythm; split/sub and long-form evidence modifiers
     feedback-case  numbered editorial feedback row with full-width evidence
     decision-grid  card grid on the elevated surface; four-up/stacked/copy modifiers
     insight-list   numbered research rows
     status-model   labelled pill sequence
     case-at-a-glance   condensed second panel
     motion         reveal hooks consumed by case-study.js

   ADDING A CASE
   Stack the modules and declare a theme. If a case needs a variant, add a
   modifier class to the existing module (.case-section--split is the pattern)
   rather than a new per-case stylesheet or a rule scoped to one route. Never
   bind layout to a data-motion-id: those are motion hooks only.
   =========================================================================== */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/_assets/fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSg.woff2") format("woff2");
}

/* Montserrat is used only for the numerals in the achievement and research
   discs, matching the published pages. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_assets/fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2") format("woff2");
}

/* Case-content layout and project-specific presentation roles. */
:root {
  --case-page-pad: var(--space-11);
  --case-content: 1000px;
  --case-wide: 1280px;
  /* Semantic spacing follows the 4px base scale. Use these modifiers when
     content belongs to one artifact group rather than as route-specific fixes. */
  --case-space-attached-media: var(--space-7);
  --case-space-caption-followup: var(--space-8);
  --case-space-group-break: var(--space-10);
  --case-space-subsection: var(--space-11);
  /* A tab changes the reading view, not the page rhythm. Both panels begin
     after the same editorial break regardless of their section modifiers. */
  --case-panel-opening-space: var(--space-12);
  --case-color-project-link: var(--foundation-color-action-light);
  --case-color-accent-panel: #ebf2ff;
  --case-shadow-decision-card: 0 2px 14px rgba(0, 0, 0, .10);
  --case-shadow-decision-card-hover: 0 2px 4px rgba(0, 0, 0, .10);
  font-synthesis: none;
}

body[data-case-theme="dark"] {
  --case-color-accent-panel: rgba(9, 67, 143, .3);
}

/* ---------------------------------------------------------------------------
   Module: shell
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { background: var(--color-page); scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: clip; background: var(--color-page); color: var(--color-text-primary); font-family: var(--font-brand); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

.case-page {
  position: relative;
  z-index: 2;
  overflow: clip;
  padding: 160px var(--case-page-pad) 240px;
  background: var(--color-page);
  color: var(--color-text-primary);
}
.case-inner { width: min(100%, var(--case-content)); margin: 0 auto; }
.case-inner-wide { width: min(100%, var(--case-wide)); margin: 0 auto; }

@media (max-width: 767.98px) {
  :root {
    --case-page-pad: var(--space-4);
    --case-space-attached-media: var(--space-6);
    --case-space-caption-followup: var(--space-7);
    --case-space-group-break: var(--space-9);
    --case-space-subsection: var(--space-10);
  }
  .case-page { padding-top: 120px; padding-bottom: 160px; }
}

@media (min-width: 768px) and (max-width: 1439.98px) {
  :root { --case-page-pad: var(--space-10); }
}

/* ---------------------------------------------------------------------------
   Module: case-hero
   --------------------------------------------------------------------------- */
.case-hero { display: grid; gap: 10px; }
.case-kicker, .case-client { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.4; }
.case-kicker { color: var(--color-text-primary); }
.case-client { color: var(--color-text-secondary-muted); }
.case-hero h1 { max-width: 100%; margin: 0; font-size: 64px; font-weight: 500; line-height: 1.2; }
.case-subtitle { max-width: none; margin: 0; font-size: 24px; font-weight: 700; line-height: 1.4; color: var(--color-text-secondary-strong); }

@media (min-width: 768px) and (max-width: 1439.98px) {
  .case-hero { max-width: 100%; }
  .case-hero h1 { font-size: 52px; }
  .case-hero--preserve-subtitle :is(.case-kicker, .case-client) { font-size: 22px; }
}

@media (max-width: 767.98px) {
  .case-hero { gap: 6px; }
  .case-hero h1 { font-size: 32px; }
  .case-kicker, .case-client, .case-subtitle { font-size: 18px; }
  .case-hero.case-hero--preserve-subtitle { gap: 10px; }
  .case-hero--preserve-subtitle :is(.case-kicker, .case-client) { font-size: 20px; }
  .case-hero--preserve-subtitle .case-subtitle { font-size: 24px; }
}

/* ---------------------------------------------------------------------------
   Module: case-background
   --------------------------------------------------------------------------- */
.case-background { width: min(100%, 500px); margin-top: 70px; }
.case-background h2, .case-section h2, .case-section h3, .case-section h4 { margin: 0; }
.case-background h2 { width: fit-content; margin-bottom: 14px; color: var(--color-action); font-size: 18px; line-height: 1.4; }
.case-background p, .case-section p, .case-list {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-secondary-strong);
}

@media (min-width: 768px) and (max-width: 1439.98px) {
  .case-background { width: 320px; margin-top: 61px; }
}

/* Long-form framing retains the full published lead-in rather than the
   condensed tablet gap used by shorter case introductions. */
@media (min-width: 768px) {
  .case-background.case-background--full-gap { margin-top: 71px; }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
  .case-background { width: 50%; margin-top: 70px; }
}

@media (max-width: 767.98px) {
  .case-background { display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 70px; }
  .case-background h2 { margin-bottom: 0; }
  .case-background p, .case-section p, .case-list { font-size: 16px; }
}

/* ---------------------------------------------------------------------------
   Module: case-meta
   Desktop is a single spread row; it stacks to 3 then 2 columns below.
   --------------------------------------------------------------------------- */
.case-meta-wrap {
  width: min(calc(100vw - 160px), 1280px);
  margin-top: var(--space-12);
  margin-left: 50%;
  translate: -50% 0;
}
.case-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: start;
  justify-content: space-around;
  gap: 24px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.case-meta > div { min-width: 0; }
.case-meta dt { margin: 0 0 9px; font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--color-text-secondary-strong); }
.case-meta dd { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--color-text-primary); }
.case-meta-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--case-color-project-link);
}
.case-meta-link__icon {
  flex: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.case-meta-item--with-link dd { display: grid; gap: 8px; }

/* Some cases combine Platform and its project link as one fifth metadata item.
   Keep the semantic dl shape while preserving the compact five-item row. */
.case-meta.case-meta--five-up { display: flex; }

@media (min-width: 1440px) {
  .case-meta--five-up > .case-meta-item--with-link { translate: -10px 0; }
}

@media (min-width: 768px) and (max-width: 1439.98px) {
  .case-meta-wrap { width: 100%; margin-top: 105px; margin-left: 0; translate: none; }
  .case-meta.case-meta--five-up {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    gap: 0;
  }
  .case-meta--five-up > div { flex: 0 1 auto; }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
  .case-meta-wrap { margin-top: var(--space-12); }
  .case-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; row-gap: 36px; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .case-meta-wrap { margin-top: 105px; }
  .case-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 36px; }
  /* Row metadata closes the transition before the following media. */
  .case-meta-wrap.case-meta-wrap--rows { margin-top: 100px; }
  .case-media.case-hero-media.case-media--after-row-meta { margin-top: 75px; }
}

@media (max-width: 767.98px) {
  .case-meta-wrap { width: 100%; margin-top: var(--space-11); margin-left: 0; translate: none; }
  .case-meta-wrap.case-meta-wrap--rows { margin-top: 82px; }
  .case-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 15px; row-gap: 18px; }
  .case-meta.case-meta--rows {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .case-meta--rows > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .case-meta--rows > div:not(:last-child) { padding-bottom: 9px; }
  .case-meta--rows dt { margin: 0; }
  .case-meta--rows .case-meta-item--with-link { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-meta--rows .case-meta-item--with-link dd { display: contents; }
  .case-meta--rows .case-meta-item--with-link .case-meta-link {
    justify-self: start;
    width: min-content;
  }
}

/* ---------------------------------------------------------------------------
   Module: case-media
   .case-hero-media is a modifier of .case-media, so it is written as a
   compound selector to stay ahead of the responsive .case-media rules.
   --------------------------------------------------------------------------- */
.case-media { margin: 130px auto 0; overflow: hidden; border-radius: 10px; }
.case-media img {
  width: 100%;
  height: auto;
  /* Natural aspect ratio is the shared default. `contain` is an additional
     guard against a future fixed-height override cropping product content. */
  object-fit: contain;
}
.case-media figcaption {
  margin-top: 12px;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.case-media-gallery {
  display: grid;
  gap: 48px;
  margin-top: 50px;
}
.case-media-gallery .case-media { margin: 0; }
.case-media-gallery.case-media-gallery--compact { gap: 20px; }
.case-section .case-media.case-media--section-lead { margin-top: var(--case-space-attached-media); }
.case-section .case-media-gallery.case-media-gallery--attached { margin-top: var(--case-space-attached-media); }
.case-section .case-media-gallery.case-media-gallery--attached.case-media-gallery--compact { margin-top: 20px; }

/* The hero figure fills the wide column and hugs the image's own height:
   no fixed aspect ratio, so any future real image renders uncropped. */
@media (min-width: 900px) {
  .case-media.case-hero-media { height: auto; margin-top: var(--space-12); }
  .case-media.case-hero-media img { width: 100%; height: auto; }
}

@media (min-width: 768px) and (max-width: 899.98px) {
  .case-media.case-hero-media { margin-top: var(--space-11); }
}

@media (min-width: 768px) and (max-width: 1439.98px) {
  .case-media { margin-top: 40px; }
}

@media (max-width: 767.98px) {
  .case-media { margin-top: 80px; }
  .case-media.case-hero-media { margin-top: 70px; }
  /* Row-style metadata keeps the external-link label inside the viewport. Its
     measured line box is shorter than the frozen inline wrapper, so its paired
     hero modifier restores the same editorial separation without changing the
     link's responsive geometry. */
  .case-media.case-hero-media.case-media--after-row-meta { margin-top: 96px; }
  .case-media-gallery { gap: 40px; margin-top: 40px; }
}

/* ---------------------------------------------------------------------------
   Module: case-achievements
   Accent panel with numbered rows and a circular portrait. The right padding
   reserves the portrait's column so copy can never run under it.
   --------------------------------------------------------------------------- */
.case-achievements {
  position: relative;
  display: grid;
  /* minmax(0,...) keeps the wider intro line from stretching the track the
     achievement rows measure against. */
  grid-template-columns: minmax(0, 1fr);
  /* Hold the panel's height but keep the rows at their natural size. */
  align-content: start;
  gap: 28px;
  width: calc(100% - 160px);
  max-width: 800px;
  min-height: 418.188px;
  margin: 100px auto 0;
  padding: 32px 286px 32px 40px;
  border-radius: 10px;
  background: var(--case-color-accent-panel);
  color: var(--color-text-primary);
}
.case-achievements > p, .case-achievements .achievement-list { grid-column: 1; }
.case-achievements > p { width: 506px; max-width: none; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; }
.achievement-list { display: grid; gap: 38px; padding: 0; margin: 20px 0 0; list-style: none; }
.achievement-list li {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-primary);
}
.achievement-portrait {
  position: absolute;
  right: 40px;
  bottom: 48px;
  width: 206px;
  height: 206px;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
}

/* A solid action disc with a centred contrast numeral, shared by the
   achievement and research rows. */
.achievement-list b, .insight-list b {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--color-action);
  color: var(--color-action-contrast);
  font-family: "Montserrat", "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

/* The wider tablet range comes first: the narrower ranges below intentionally
   override it, and these selectors share a specificity. */
@media (min-width: 768px) and (max-width: 1439.98px) {
  .case-achievements { width: calc(100% - 128px); }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
  .case-achievements { width: min(100%, 800px); }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .case-achievements { width: min(100%, 640px); padding: 32px 236px 32px 40px; }
  .case-achievements > p { width: auto; }
  .achievement-portrait { bottom: 40px; width: 156px; height: 156px; }
}

@media (max-width: 767.98px) {
  .case-achievements { width: calc(100% - 32px); min-height: 0; margin-top: 70px; padding: 32px 16px 200px; }
  .case-achievements > p { width: auto; }
  .achievement-portrait { right: auto; bottom: 32px; left: 50%; width: 156px; height: 156px; translate: -50% 0; }
}

/* ---------------------------------------------------------------------------
   Module: case-tabs
   --------------------------------------------------------------------------- */
.case-tabs {
  display: flex;
  gap: 20px;
  justify-content: center;
  width: min(100%, var(--case-content));
  margin: 70px auto 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}
.case-tabs button {
  padding: 10px 20px;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  line-height: 1.4;
  cursor: pointer;
}
.case-tabs button[aria-selected="true"] { color: var(--color-action); }
[data-case-panel][hidden] { display: none !important; }

/* The rule spans the full content width, but the two labels keep the wide
   published spacing so the cluster stays centred on the same pixels. */
@media (min-width: 1440px) {
  .case-tabs { gap: 100px; }
}

@media (max-width: 767.98px) {
  .case-tabs { gap: 32px; margin-top: 48px; font-size: 16px; }
  .case-tabs button { padding: 6px 8px; }
}

/* ---------------------------------------------------------------------------
   Module: case-section
   --split puts the heading in a fixed label column beside the content.
   --sub marks a section whose heading is an h3 acting as a subsection label.
   --------------------------------------------------------------------------- */
.case-section { margin-top: 110px; }
.case-section > h2 { margin-bottom: 48px; font-size: 32px; font-weight: 700; line-height: 1.4; }
/* Rhythm (matches the published APP case): a heading sits 50 from the previous
   group and 20 above its own content. Margins are single-direction (top on
   headings, top on content) so grid columns and normal flow agree — grid items
   never collapse margins. */
.case-section > h3 { margin: 50px 0 0; font-size: 24px; font-weight: 700; line-height: 1.4; }
.case-section > h3.case-subsection-heading { margin-top: var(--case-space-subsection); }
.case-section.case-section--sub > h3 { margin: 0 0 20px; font-size: 18px; font-weight: 700; line-height: 1.4; }
.case-section > * + p,
.case-section > * + blockquote,
.case-section > * + ol,
.case-section > * + ul { margin-top: 20px; }
.case-section .case-media { margin-top: 50px; }
.case-section .case-media-gallery > .case-media { margin-top: 0; }
.case-section > p.case-caption-followup { margin-top: var(--case-space-caption-followup); }
.case-section > p.case-group-intro { margin-top: var(--case-space-group-break); }

/* Supporting note under a research block: the 50% secondary role. Matches
   `.case-section p` in specificity terms by scoping to the section. */
.case-section p.research-note { color: var(--color-text-secondary); }

.case-quote {
  max-width: none;
  margin: 0;
  padding-left: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-secondary-strong);
}
.case-quote::before { content: "“"; }
.case-quote::after { content: "”"; }

.case-list { display: grid; gap: 12px; padding-left: 22px; }
.case-list li { padding-left: 4px; }

@media (min-width: 1440px) {
  .case-section { margin-top: 100px; }
  .case-section--split {
    display: grid;
    grid-template-columns: 313.335px minmax(0, 1fr);
    column-gap: 60px;
    align-items: start;
  }
  .case-section--split > h2 {
    grid-column: 1;
    /* Span more implicit rows than any section has children, so a two-line
       h2 never sizes row 1 — the first content row is sized by its own
       element and the 20px heading rhythm holds in the right column. */
    grid-row: 1 / span 30;
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
  }
  .case-section--split > :not(h2):not(figure) { grid-column: 2; }
  /* The first content element top-aligns with the h2 label column. */
  .case-section--split > h2 + :not(figure) { margin-top: 0; }
  .case-section--split > figure { grid-column: 1 / -1; }
}

@media (min-width: 768px) and (max-width: 1439.98px) {
  .case-section > h2 { font-size: 26px; line-height: 1.4; }
}

@media (max-width: 767.98px) {
  .case-section { margin-top: 80px; }
  .case-section > h2 { margin-bottom: 32px; font-size: 22px; }
  .case-section > h3 { font-size: 20px; }
  .case-quote { font-size: 16px; }
}

/* Long-form evidence sequence. These modifiers describe reusable editorial
   relationships; adjacency carries the rhythm without route-specific rules.
   The first section after tabs is deliberately owned by the shared tab rule
   below, so --opening never creates a second panel-specific lead-in. */
.case-section.case-section--evidence-run { margin-top: 70px; }
.case-section--evidence-run > .case-media.case-media--section-lead { margin-top: 70px; }
.case-section--evidence-run + .case-section--evidence-tail { margin-top: 170px; }
.case-section--evidence-tail > .case-media.case-media--section-lead { margin-top: 70px; }
.case-section--evidence-tail + .case-section--evidence-tail { margin-top: 70px; }
.case-section--evidence-tail + .case-section--decisions { margin-top: 70px; }
.case-section--decisions > h2 { margin-bottom: 30px; }
.case-section--decisions + .case-section--evidence-tail { margin-top: var(--space-11); }
.case-section--evidence-tail + .case-section--outcome { margin-top: 190px; }
.case-section--outcome + .case-section--closing { margin-top: 120px; }

@media (min-width: 1024px) and (max-width: 1439.98px) {
  .case-section.case-section--evidence-run { margin-top: 20px; }
  .case-section--evidence-run > .case-media.case-media--section-lead { margin-top: 40px; }
  .case-section--evidence-run + .case-section--evidence-tail { margin-top: 150px; }
  .case-section--evidence-tail > .case-media.case-media--section-lead { margin-top: 20px; }
  .case-section--evidence-tail + .case-section--evidence-tail { margin-top: 50px; }
  .case-section--evidence-tail + .case-section--decisions { margin-top: 50px; }
  .case-section--decisions > h2 { margin-bottom: 20px; }
  .case-section--decisions + .case-section--evidence-tail { margin-top: 70px; }
  .case-section--evidence-tail + .case-section--outcome { margin-top: 170px; }
  .case-section--outcome + .case-section--closing { margin-top: 90px; }
  .decision-grid.decision-grid--four-up article { min-height: 0; padding: 40px 30px 36px; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .case-section.case-section--evidence-run { margin-top: 20px; }
  .case-section--evidence-run > .case-media.case-media--section-lead { margin-top: 40px; }
  .case-section--evidence-run + .case-section--evidence-tail { margin-top: 150px; }
  .case-section--evidence-tail > .case-media.case-media--section-lead { margin-top: 20px; }
  .case-section--evidence-tail + .case-section--evidence-tail { margin-top: 50px; }
  .case-section--evidence-tail + .case-section--decisions { margin-top: 50px; }
  .case-section--decisions > h2 { margin-bottom: 20px; }
  .case-section--decisions + .case-section--evidence-tail { margin-top: 70px; }
  .case-section--evidence-tail + .case-section--outcome { margin-top: 170px; }
  .case-section--outcome + .case-section--closing { margin-top: 90px; }
  .decision-grid.decision-grid--four-up article { min-height: 0; padding: 40px 30px 36px; }
}

@media (max-width: 767.98px) {
  .case-section.case-section--evidence-run { margin-top: 40px; }
  .case-section--evidence-run > .case-media.case-media--section-lead { margin-top: 64px; }
  .case-section--evidence-run + .case-section--evidence-tail { margin-top: 150px; }
  .case-section--evidence-tail > .case-media.case-media--section-lead { margin-top: 40px; }
  .case-section--evidence-tail + .case-section--evidence-tail { margin-top: var(--space-9); }
  .case-section--evidence-tail + .case-section--decisions { margin-top: var(--space-9); }
  .case-section--decisions > h2 { margin-bottom: 20px; }
  .case-section--decisions + .case-section--evidence-tail { margin-top: 70px; }
  .case-section--evidence-tail + .case-section--outcome { margin-top: 170px; }
  .case-section--outcome + .case-section--closing { margin-top: 110px; }
  .decision-grid.decision-grid--four-up article { min-height: 0; padding: 40px 30px 36px; }
}

/* ---------------------------------------------------------------------------
   Module: feedback-case
   Each entry keeps its evidence image full-width and at its natural height.
   The five-track desktop row is useful when a short title and longer response
   need separate editorial columns; smaller screens return to reading order.
   --------------------------------------------------------------------------- */
.feedback-case {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-top: 50px;
}
.feedback-case > :is(h3, blockquote, p, figure),
.feedback-case-copy > :is(blockquote, p) { margin: 0; }
.feedback-case > h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-primary);
}
.feedback-case-copy { display: grid; gap: 20px; }
.feedback-case > .case-media { width: 100%; margin-top: 30px; }
.feedback-case-index {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--color-action);
  color: var(--color-action-contrast);
  font-family: "Montserrat", "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

@media (min-width: 1440px) {
  .case-section.case-section--split > .case-media-gallery--full {
    grid-column: 1 / -1;
    width: 100%;
  }
  .case-section.case-section--split > .feedback-case {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 35px 12px 266px 60px minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
  }
  .feedback-case-index { grid-column: 1; grid-row: 1; }
  .feedback-case > h3 { grid-column: 3; grid-row: 1; margin-top: 4px; translate: 40px 0; }
  .feedback-case-copy { grid-column: 5; grid-row: 1; }
  .feedback-case > .case-media { grid-column: 1 / -1; margin-top: 30px; }
}

/* ---------------------------------------------------------------------------
   Module: decision-grid
   --------------------------------------------------------------------------- */
.decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.decision-grid article {
  padding: 30px;
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--case-shadow-decision-card);
  transition: box-shadow var(--motion-ui) var(--ease-signature);
}
.decision-grid h3 { margin-bottom: 14px; font-size: 24px; font-weight: 700; line-height: 1.4; color: var(--color-text-primary); }
.decision-grid--compact-title h3 { font-size: 18px; }
.decision-grid p { color: var(--color-text-secondary); }
.decision-grid--strong-copy p { color: var(--color-text-secondary-strong); }
.decision-grid.decision-grid--four-up { grid-template-columns: 1fr; }

@media (hover: hover) {
  .decision-grid article:hover { box-shadow: var(--case-shadow-decision-card-hover); }
}

@media (min-width: 1440px) {
  .decision-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .decision-grid article { min-height: 260px; }
  .decision-grid.decision-grid--four-up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .decision-grid--four-up article { min-height: 390px; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .decision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .decision-grid { grid-template-columns: 1fr; }
  .decision-grid h3 { font-size: 20px; }
  .decision-grid.decision-grid--compact-title h3 { font-size: 18px; }
}

.decision-grid.decision-grid--stacked { grid-template-columns: 1fr; }
.decision-grid.decision-grid--stacked article {
  min-height: 0;
  padding: 40px 30px 36px;
}

/* ---------------------------------------------------------------------------
   Module: insight-list
   --------------------------------------------------------------------------- */
.insight-list { display: grid; gap: 70px; padding: 0; margin: 0; list-style: none; }
.insight-list li { display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 20px; }
.insight-list p { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--color-text-secondary-strong); }
.insight-list a { color: var(--color-action); }

@media (max-width: 767.98px) {
  .insight-list { gap: 48px; }
}

/* ---------------------------------------------------------------------------
   Module: status-model
   A labelled sequence, not a second card system.
   --------------------------------------------------------------------------- */
.status-model {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 20px 0 0;
  list-style: none;
  counter-reset: status;
}
.status-model li {
  padding: 8px 16px;
  border: 1px solid var(--color-divider);
  border-radius: 64px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}
.status-model li::before {
  display: inline-block;
  margin-right: 8px;
  content: counter(status, decimal-leading-zero);
  counter-increment: status;
  color: var(--color-action);
}

@media (max-width: 767.98px) {
  .status-model li { font-size: 14px; }
}

/* ---------------------------------------------------------------------------
   Module: case-at-a-glance
   The condensed panel splits one breakpoint earlier than the main panel.
   --------------------------------------------------------------------------- */
.case-at-a-glance > .case-inner > .case-media { margin-top: 70px; }
.case-at-a-glance .case-media + .case-section { margin-top: 40px; }
.case-at-a-glance .case-section--evidence-stack > .case-media + .case-media { margin-top: 70px; }
.case-at-a-glance .case-section--evidence-stack + .case-section { margin-top: 70px; }
.case-at-a-glance .case-section.case-section--major-break { margin-top: 100px; }

@media (min-width: 1440px) {
  .case-at-a-glance .case-section { margin-top: 70px; }
  .case-at-a-glance .case-section--evidence-stack > .case-media:first-of-type { margin-top: var(--space-10); }
  .case-at-a-glance .case-section.case-section--final-break { margin-top: 100px; }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
  .case-at-a-glance .case-section--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 60px;
    align-items: start;
    margin-top: 50px;
  }
  .case-at-a-glance .case-section--split > h2 {
    grid-column: 1;
    margin: 0;
    font-size: 26px;
    line-height: 1.4;
  }
  .case-at-a-glance .case-section--split > :not(h2):not(figure) { grid-column: 2; margin-top: 0; }
  .case-at-a-glance .case-section--split > * + :not(h2):not(figure) { margin-top: 20px; }
  .case-at-a-glance .case-section--split > figure { grid-column: 1 / -1; }
  .case-at-a-glance .case-list { display: block; margin-top: 20px; padding-left: 20.032px; }
  .case-at-a-glance .case-list li { padding-left: 0; }
  .case-at-a-glance .case-list li + li { margin-top: 20px; }
  .case-at-a-glance .case-section--evidence-stack > .case-media:first-of-type { margin-top: 20px; }
  .case-at-a-glance .case-section--compact-heading > .decision-grid { margin-top: 0; }
  .case-at-a-glance .case-section.case-section--final-break { margin-top: 80px; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .case-at-a-glance .case-section { margin-top: 40px; }
  .case-at-a-glance .case-section--evidence-stack > .case-media:first-of-type { margin-top: var(--space-8); }
  .case-at-a-glance .case-section--compact-heading > h2 { margin-bottom: 20px; }
  .case-at-a-glance .case-section.case-section--final-break { margin-top: 70px; }
}

@media (max-width: 767.98px) {
  .case-at-a-glance .case-section { margin-top: 60px; }
  .case-at-a-glance .case-section--compact-heading > h2 { margin-bottom: 20px; }
  .case-at-a-glance .case-section.case-section--final-break { margin-top: 80px; }
}

/* Shared tab-panel contract. This follows the case section rhythm (100px on
   larger screens, 80px on mobile) and intentionally appears after the
   condensed At a Glance rules so neither panel can override it by accident. */
.case-tabs ~ [data-case-panel] > .case-inner > .case-section:first-child {
  margin-top: var(--case-panel-opening-space);
}

@media (max-width: 767.98px) {
  :root { --case-panel-opening-space: var(--space-11); }
}

.case-at-a-glance .case-section.case-section--compact-heading > h2 { font-size: 24px; }

@media (min-width: 768px) and (max-width: 1439.98px) {
  .case-at-a-glance .case-section.case-section--compact-heading > h2 { font-size: 22px; }
}

@media (max-width: 767.98px) {
  .case-at-a-glance .case-section.case-section--compact-heading > h2 { font-size: 20px; }
}

/* ---------------------------------------------------------------------------
   Module: motion
   Hooks consumed by case-study.js. Layout must never depend on data-motion-id.
   --------------------------------------------------------------------------- */
.js-case-motion [data-motion-profile] { opacity: 0; }
.js-case-motion [data-motion-profile="hero-x"] { transform: translate3d(30px, 0px, 0px); }
.js-case-motion [data-motion-profile="background-x"] { transform: translate3d(20px, 0px, 0px); }
.js-case-motion [data-motion-profile="meta-x"] { transform: perspective(1200px) translate3d(20px, 0px, 0px); }
.js-case-motion [data-motion-profile="reveal-y"] { transform: translate3d(0px, 30px, 0px); }
.js-case-motion [data-motion-profile].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .decision-grid article { transition: none; }
  .js-case-motion [data-motion-profile] { transform: none; }
}