/* =========================================================================
   Case study — Phase 5.1, the template the other three pages reuse
   -------------------------------------------------------------------------
   Measured off the Wix original at 1440 / 900 / 375. Everything here is
   layout: the type, colour and shadow all come from tokens.

   Three things are worth knowing before you change anything.

   1. A case study runs on TWO grids, not one. Copy sits on the 10% gutter
      (.container); full-width media sits on a 6.25% one (.container--wide).
      Inside a two-column row the copy follows the site-wide text rule —
      60% of its half-width column, centred in it, capped at 500.

   2. Type DOES scale here, unlike Home. The page title drops 56 -> 36 and
      section headings 36 -> 24 below 751px, measured. That is why this file
      carries .case-title / .case-h2 / .case-h3 instead of reusing .t-*.

   3. The vertical rhythm is 192 above a section and 96 below it at desktop,
      halved on mobile, with two exceptions that are called out where they
      are set. Wix hand-placed these; they are transcribed, not derived.
   ========================================================================= */

.case {
  /* Section rhythm, measured. --gap-section is the space above a new topic,
     --gap-block the space between two rows of one topic, --gap-inner the
     space between a paragraph and the figure that belongs to it. */
  --gap-section: 192px;
  --gap-block:    96px;
  --gap-inner:    48px;
  --gap-head:     32px;   /* heading to its first paragraph */
  --gap-note:     16px;   /* paragraph to the italic footnote under it */
  --gap-meta:     20px;   /* between two rows of the meta block */
  --gap-lede:     48px;   /* between the blocks of the intro column */

  /* The hero artwork, from each page's own Wix size panel. --intro-h-m is
     its RENDERED height on mobile, where the band is 72vw tall at every
     phone width and the artwork is height-constrained inside it. */
  --intro-w:      80%;
  --intro-max:    700px;
  --intro-h-m:    62.67vw;

  /* The floor under the intro band. Measured at a 900px-tall viewport, where
     three of the five originals come out at exactly 976 with three different
     amounts of copy — Blink, Simple Trade and Point of Sale — so it is a
     minimum rather than a content height. The two that are taller (Amazon
     Business 1018, Design Management 991) are their own copy. Without it a
     short intro collapses onto its content: Point of Sale lost 53px there,
     Blink 76 and Simple Trade 25. */
  --intro-min:    976px;
}
@media (max-width: 750px) {
  .case {
    --gap-section: 96px;
    --gap-block:   48px;
    --gap-inner:   24px;
    --gap-head:    24px;
    --gap-lede:    32px;
  }
}

/* =========================================================================
   Type
   ========================================================================= */
.case-title {
  font-size: var(--step-title);
  line-height: var(--step-title-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-title);
}
.case-h2 {
  font-size: var(--step-section);
  line-height: var(--step-section-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-section);
}
/* A numbered subhead inside a row. 24/1.2, dropping to 20 on mobile. */
.case-h4 {
  font-size: var(--step-sub);
  line-height: var(--step-sub-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}
/* Its paragraph sits closer than the 32px a section heading gets. */
.case-h4 + p { margin-top: var(--space-sm); }

/* 16px bold on the body line-height — a label, not a heading size. */
.case-h3 {
  font-size: var(--step-body);
  line-height: 1.75;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}
@media (max-width: 750px) {
  .case-title {
    font-size: var(--step-section);
    line-height: var(--step-section-lh);
    letter-spacing: var(--tracking-section);
  }
  .case-h2 {
    font-size: var(--step-sub);
    line-height: var(--step-sub-lh);
    letter-spacing: var(--tracking-tight);
  }
  .case-h4 {
    font-size: var(--step-minor);
    line-height: var(--step-minor-lh);
  }
}

/* The one inline link in the body copy. Measured #0064D6 with NO hover
   change — the same "no hover" the footer links have. */
.case-link { color: var(--link-accent); }

/* Per-project intro fill. Each case study opens on its own colour, the same
   one its tile carries on Home. */
.case--business {
  --case-fill: var(--tile-business);
  --rule-accent: var(--rule-business);
  --art-ratio: 0.8752;            /* AB_Intro 1x.png, 1788 / 2043 */
}
.case--design {
  --case-fill: var(--tile-design);
  --fade-to: var(--tile-design);
  --rule-accent: var(--rule-design);
  --art-ratio: 1.0375;            /* Management_Intro 3x.png, 1161 / 1119 */
  --intro-w:   60%;               /* Martin's panel: 60%, max 500 */
  --intro-max: 500px;
  --intro-h-m: 57.84vw;
}
.case--trade {
  --case-fill: var(--panel-trade);
  --rule-accent: var(--rule-trade);
  --art-ratio: 0.7325;            /* Simple Trade_Intro Pic 1x.jpg, 1580 / 2157 */
  --intro-w:   70%;               /* Martin's panel: 70%, max 700 */
  --intro-max: 700px;
  --intro-h-m: 67.2vw;           /* 252px at 375, measured */
}
.case--blink {
  --case-fill: var(--tile-blink);
  --rule-accent: var(--rule-blink);
  --art-ratio: 0.5442;            /* Blink_Intro 1x.png, 892 / 1639 */
  --intro-w:   50%;               /* Martin's panel: 50%, max 500 */
  --intro-max: 500px;
  --intro-h-m: 60vw;
}
.case--pos {
  --case-fill: var(--tile-pos);
  --rule-accent: var(--rule-pos);
  --art-ratio: 1.7998;            /* POS_Intro 0.5x.png, 1834 / 1019 */
  --intro-w:   70%;               /* Martin's panel: 70%, max 700 */
  --intro-max: 700px;
  --intro-h-m: 38.91vw;           /* 145.9px at 375; the artwork holds 70vw
                                     of width at every phone size */
}

/* =========================================================================
   Intro — the one full-bleed section, and the exception to the 1600 cap
   -------------------------------------------------------------------------
   Desktop: a coloured half-panel on the left with the hero screenshot inside
   it, the copy on the right.

   The panel is a full viewport tall and STICKY. Martin's spec, 2026-09-21:
   when the window is shorter than the copy, the artwork holds still while the
   copy scrolls past it, and once the copy runs out the whole section scrolls
   away together. `position: sticky` in a grid needs `align-self: start`, or
   the item is stretched to the row height and has nothing to move within.

   The original is a plain 1018px band with no sticky behaviour — the height
   and the stick are both Martin's change. Appendix B entry 18.
   ========================================================================= */
.case-intro { position: relative; }

.case-intro__panel { background: var(--case-fill, var(--surface-alt)); }

/* ---- mobile: the panel is a band above the copy ------------------------ */
@media (max-width: 750px) {
  /* The band is 72vw tall — 270px at 375, measured on both case studies —
     with the artwork centred in it and sized by its HEIGHT, which is what
     the original's contain box works out to on each page. */
  .case-intro__panel {
    min-height: 72vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* The gutter cap goes on the flex CONTAINER, not the image. On the image
     it resolves against the shrink-wrapped <picture> around it, so it took
     the gutter off the artwork's own width instead of off the panel. */
  .case-intro__art {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-inline: var(--gutter);
  }
  .case-intro__art picture { display: block; }
  .case-intro__art img {
    height: var(--intro-h-m);
    width: auto;
    max-width: 100%;
  }
  .case-intro__body { padding-inline: var(--gutter); padding-top: 48px; }
}

/* The 500px cap is the half of the site text rule that does nothing at 375
   and everything on a wide phone or a narrow window: without it the copy ran
   to 652px at a 700px viewport. Same idiom Home uses. Both boxes centre in
   what is left, which is what the rule asks for on mobile. */
@media (max-width: 750px) {
  .case-intro__box,
  .case-row__text {
    max-width: 500px;
    margin-inline: auto;
  }
}

/* ---- tablet and desktop ------------------------------------------------ */
@media (min-width: 751px) {
  .case-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Martin's viewport-tall band, but never shorter than the original's own
       floor — see --intro-min. */
    min-height: max(100vh, var(--intro-min));
    max-width: var(--container-max);
    margin-inline: auto;
  }

  .case-intro__panel {
    /* The fill runs to the viewport edge past the 1600 cap. The negative
       margin only reaches into the gutter that the cap leaves empty, so it
       never overflows the viewport or adds a horizontal scrollbar.

       No matching padding: the artwork is 80% of the WHOLE panel and centred
       in it, bleed included. Compensating for the bleed here instead made
       the artwork 80% of the 1600-grid half — 640px rather than 700 at a
       2000px viewport — and pushed it off centre to the right. */
    --bleed: max(0px, calc((100vw - var(--container-max)) / 2));
    margin-left: calc(-1 * var(--bleed));

    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 40px;
  }

  /* Wix has this image at width 80%, height auto, max-width 700 — read off
     Martin's editor, so the box follows the artwork's own ratio rather than
     a measured one.

     The height cap is ours and is a last resort: the artwork is pinned
     inside a viewport-tall panel, so on a short window something has to
     give. It is expressed as a max-WIDTH derived from the artwork's ratio
     rather than as a max-height, for two reasons: the width stays the one
     thing that sizes the box, and the ratio is preserved without asking the
     browser to reconcile a clamped height against a percentage width.

     The <img> must be width:100%, not width:auto. A replaced element with
     auto width takes its intrinsic width from the `sizes` attribute once
     srcset is in play, so `sizes` silently becomes the layout — which is
     exactly what pinned this image at 640px past the 1600 cap. */
  .case-intro__art {
    width: var(--intro-w);
    /* Pages set --art-ratio to their hero artwork's width / height. The
       default is large enough to disable the clamp rather than guess. */
    max-width: min(var(--intro-max), calc((100vh - 80px) * var(--art-ratio, 10)));
  }
  .case-intro__art picture { display: block; }
  .case-intro__art img { width: 100%; height: auto; }

  .case-intro__body {
    padding-top: 200px;          /* measured, both bands */
  }
  .case-intro__box {
    width: 60%;                  /* the site text rule, against the column */
    max-width: 500px;
    margin-inline: auto;
  }
}

.case-intro__box > * + * { margin-top: var(--gap-lede); }
/* Wix writes a paragraph break inside its rich text as a double <br>, so the
   gap is exactly one blank line. Two real paragraphs, spaced to match. */
.case-prose > p + p { margin-top: var(--step-body-lh); }
.case-intro__box > .case-note { margin-top: var(--gap-note); }

/* --- meta block: Product & Platform / Timeline / Impact -----------------
   A 4px rule in the accent blue, 18px of air, then label-over-value rows on
   the body line-height with 20px between rows. */
.case-meta {
  position: relative;
  padding-left: 22px;              /* 4px rule + 18px of air, measured */
  display: grid;
  row-gap: var(--gap-meta);
}
/* A pseudo-element rather than a border-left, because the rule has ROUND
   ends and a border cannot be capped. The radius is half the width, which
   makes each end a semicircle. */
.case-meta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--rule-accent, var(--rule-business));
}
.case-meta__row { margin: 0; }
/* The same block on a wider row gap — Simple Trade's project-scope list. It
   keeps the rule and the 22px indent, so it lines up with the meta in the
   intro. 28px between rows, not the 32 this was first built with: measured
   row-top to row-top at all three widths and ours came out 4px long on every
   gap. */
.case-meta--loose { --gap-meta: 28px; }
/* Point of Sale's "5 Steps to Serve a Customer": the same round-capped rule
   on a numbered list, one bold line per step. The original is a real <ol>
   with an <h3> in each item, so the markers need more room than the meta
   block's 22px — it measures 50 / 42 / 45 at 1440 / 900 / 375, hand-placed
   in Wix rather than derived, and 45 is the one value closest to all three.
   28px between the steps, which in the original is a trailing <br>.

   Block rather than the grid the meta block uses: a grid item's ::marker is
   not reliably drawn, and the gap here is a real blank line anyway. */
.case-meta--steps {
  display: block;
  margin: 0;                       /* the UA's 1em on <ol>, which on mobile
                                      lands on top of the row gap */
  padding-left: 45px;
  list-style: decimal;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}
.case-meta--steps > li { margin: 0; }
.case-meta--steps > li + li { margin-top: var(--step-body-lh); }
.case-meta__label {
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}
.case-meta__value {
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

/* =========================================================================
   Sections
   ========================================================================= */
.case-section {
  padding-top: var(--gap-section);
  padding-bottom: 0;
}

/* A tinted band carries its own air, and sits --gap-block clear of whatever
   is above it. Content-to-content that reads as 192 above and 288 below at
   1440, which is what the original measures. */
.case-section--tint {
  margin-top: var(--gap-block);
  padding-block: var(--gap-block);
  background: var(--band, var(--surface-alt));
}
/* Simple Trade's ideation board is the figure that belongs to the paragraph
   above it, not a new topic, so its band sits --gap-inner clear rather than
   --gap-block. Measured 48px at both 1440 and 900; the band's own 96px of
   padding is unchanged and already matched. */
.case--trade .case-section--deep { margin-top: var(--gap-inner); }

.case-section--grey { --band: var(--surface-alt); }
.case-section--blue { --band: var(--surface-tint); }
.case-section--mint { --band: var(--surface-mint); }
.case-section--deep { --band: var(--surface-deep); }

/* A section whose background fades from the page white into the project's own
   colour, top to bottom. Martin added this to Design Management's Solutions
   section after the Phase 0 capture, so it is his design rather than a
   measurement — see Appendix B. It carries its own bottom padding so the
   gradient has somewhere to finish; the section below it drops back to the
   ordinary 192 so the gap between the two still totals the measured 288. */
.case-section--fade {
  background: linear-gradient(180deg,
              var(--surface) 0%,
              var(--fade-to, var(--surface)) 100%);
  padding-bottom: var(--gap-block);
}

/* The second row of a two-row topic: closer to the row above it. Also the
   section that follows a tint band whose band adds NO extra air — Blink's
   grey band reads 288 to the section below it, Point of Sale's reads 192,
   which is this value on top of the band's own 96 of padding. */
.case-section--runon { padding-top: var(--gap-block); }

/* ...and the section AFTER such a pair sits a full block further down again.
   288px at 1440 and 900, but only 96 on mobile, where the two rows have
   already stacked — measured, not a halving. */
.case-section--after-pair { padding-top: calc(var(--gap-section) + var(--gap-block)); }
@media (max-width: 750px) {
  .case-section--after-pair { padding-top: var(--gap-section); }
}

/* The next-projects grid closes the page and needs air underneath it too. */
.case-section--closing { padding-bottom: var(--gap-block); }
@media (max-width: 750px) {
  /* Half the desktop 192, same as every other section gap on mobile. An
     earlier 119px here was derived from Amazon Business before its last
     image went to its own ratio; with the rule both pages land within 5px. */
  .case-section--closing { padding-top: var(--gap-section); }
}

/* =========================================================================
   Blocks
   ========================================================================= */

/* A centred heading with its paragraph under it. The heading centres from
   751px up and returns to the left on mobile; the paragraph is left-aligned
   throughout. Both measured. */
.case-lead { text-align: left; }
.case-lead > .case-h2 { margin-bottom: var(--gap-head); }
@media (min-width: 751px) {
  .case-lead > .case-h2,
  .case-lead > .case-h4 { text-align: center; }
}

/* Everything after a section's first block is spaced by one of these two.
   The first block carries no class, so it sits on the section padding. */
.case-block { margin-top: var(--gap-inner); }
/* A paragraph that follows a figure gets the full block gap instead:
   96px at 1440 and 900, 48 on mobile. */
.case-block--apart { margin-top: var(--gap-block); }
/* ...and a figure stacked directly under its sibling gets 24, measured on
   Blink's three customer reviews. */
.case-block--tight { margin-top: var(--space-md); }
/* Point of Sale is the one page where --gap-block does NOT halve on mobile.
   Its layout grid sits 96 below its heading at 1440 and 900, but the four
   images stack into one column on a phone and take the ordinary --gap-inner
   there, like every other figure under a heading. Measured 96 / 96 / 24. */
@media (max-width: 750px) {
  .case--pos .case-block--apart { margin-top: var(--gap-inner); }
}

/* The centred text box is 50% of the SECTION, not of the padded container —
   600px at 1440 and 450 at 900 — so its wrapper is full-bleed and only adds
   the gutter on mobile. */
.case-centre { padding-inline: 0; }
@media (max-width: 750px) {
  .case-centre { padding-inline: var(--gutter); }
}

/* --- two-column row: media one side, copy the other ---------------------
   The row is full-bleed — its two halves are halves of the VIEWPORT, which
   is what puts the figure's inner edge on the centre line — but it still
   stops growing at 1600 so the copy stays on the page grid past that.
   The copy is written FIRST in the markup, because that is the order it is
   read in on a phone. Desktop reorders it. */
.case-row { display: grid; }
.case-row__text > * + * { margin-top: var(--gap-head); }

@media (max-width: 750px) {
  .case-row { padding-inline: var(--gutter); }
  .case-row__media { margin-top: var(--gap-inner); }
  /* Simple Trade's project-scope row is the only one whose second column is
     copy rather than a figure, so it fell through the rule above and stacked
     flush. Measured 24px, the same gap the media column gets. */
  .case-row__text + .case-row__text { margin-top: var(--gap-inner); }
  /* The tall phone screenshot is the one image on the page that bleeds past
     the mobile gutter — 342px wide at 375, where everything else is 327.
     Measured; every other breakpoint keeps it inside the column. */
  .case-figure--narrow { width: calc(100% + 15px); margin-inline: -7.5px; }
}
@media (min-width: 751px) {
  .case-row {
    padding-inline: max(0px, calc((100% - var(--container-max)) / 2));
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .case-row__text {
    width: 60%;
    max-width: 500px;
    margin-inline: auto;
  }
  /* Media hugs the centre line and leaves the outer 15% of its column empty,
     mirrored on the reversed row. Every figure on the page is placed against
     that inner edge; only its width changes. */
  .case-row__media { order: 1; }
  .case-row__text  { order: 2; }
  .case-row--reverse .case-row__media { order: 2; }
  .case-row--reverse .case-row__text  { order: 1; }

  /* Simple Trade's three concept rows top-align instead of centring: the
     copy sits level with the first of the two stacked screenshots. */
  .case-row--top { align-items: start; }
}

/* Figure widths, read off Martin's Wix editor rather than measured — he sent
   the size panel for every image on 2026-09-21, and every one of them is
   "H Auto", so no image on this page is cropped. Shares are of the
   half-width column the figure sits in. Order matters below: the modifiers
   restate the margin they change, and each one is written after the rule it
   overrides. */
@media (min-width: 751px) {
  .case-figure { margin-left: auto; margin-right: 0; }
  .case-row--reverse .case-figure { margin-left: 0; margin-right: auto; }

  .case-figure--wide { width: 85%; max-width: 700px; }
  /* Right edge still on the 85% line; the tall phone screenshot is narrower,
     so it carries the difference as a right margin. */
  .case-figure--narrow { width: 55.9%; }
  .case-row .case-figure--narrow { margin-right: 15%; }
  .case-row--reverse .case-figure--narrow { margin-left: 15%; margin-right: auto; }
}

/* The roles map is the one figure with a mobile cap of its own: Martin has it
   at 100% / max 500 there, against 85% / max 700 above the breakpoint. */
@media (max-width: 750px) {
  .case-figure--roles { max-width: 500px; margin-inline: auto; }
}

/* --- a slot whose artwork is still a placeholder ------------------------
   Reserves the box the design asks for, so the layout is already right when
   the real asset lands. Simple Trade's persona photo is one of the four Wix
   stock images that must be replaced before launch (Appendix C 4), and the
   only copy we have is a 147x105 thumbnail — a twentieth of the area it is
   laid out at. Without the reserved box the section collapses by 210px. */
.case-figure--slot { aspect-ratio: var(--slot-ratio, 1); }
.case-figure--slot picture { display: block; width: 100%; height: 100%; }
.case-figure--slot img { width: 100%; height: 100%; object-fit: cover; }
/* Two ratios, because the original crops this one per breakpoint rather than
   scaling it: a 612x821 portrait on desktop and tablet, a 327x214 landscape on
   mobile. Measured on all three. Running the portrait box down to 375 made the
   section 225px too tall — the single biggest error in the page's first diff. */
.case-slot--persona { --slot-ratio: 327 / 214; }
@media (min-width: 751px) {
  .case-slot--persona { --slot-ratio: 612 / 821; }
}

/* --- a pulled-out quotation ---------------------------------------------
   Indented 5% of whatever box it sits in, which is the measured 21px in a
   432 column and 30px in the 600 centred box. */
.case-quote {
  position: relative;
  padding-left: 5%;
  font-style: italic;
}
/* Same 4px round-capped rule as the meta block, in the project's accent, and
   for the same reason a border will not do. It spans the full height of the
   quote: measured 4x224 on the three research quotes and 4x112 on the closing
   one, both flush with the block's left edge. */
.case-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--rule-accent, var(--rule-business));
}
/* A quote inside a `.case-row__text` already gets its 32px from that block's
   `* + *`. One inside a centred `.case-lead` got nothing and sat flush against
   the paragraph above it — measured at 32px in the original at both 1440 and
   900, so state it here rather than adding a blanket rule to `.case-lead`. */
.case-lead > * + .case-quote { margin-top: var(--gap-head); }

/* --- two images stacked in one media column ----------------------------- */
.case-stack-media > * + * { margin-top: var(--space-md); }

/* --- video player -------------------------------------------------------
   The page's own ratio comes from the file, so the element only needs a
   width. No autoplay: three of these on one page, and content that moves on
   its own needs a way to stop it. */
.case-player {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ink);
  box-shadow: var(--shadow-player);
}

/* --- a bulleted list inside a text box ----------------------------------
   29px of indent at every width, measured, which is where the text starts;
   the disc sits in that space. It runs straight on from the sentence that
   introduces it, with no gap. */
.case-list {
  margin: 0;
  padding-left: 29px;
  list-style: disc;
}
.case-list p { margin: 0; }

/* --- a list of points, each with its own 28px icon ----------------------
   The icon is out of the flow so the heading and its paragraph both align
   on the same 44px indent (28 of icon plus 16 of gap), measured identically
   at 1440, 900 and 375. */
.case-iconlist { list-style: none; margin: 0; padding: 0; }
.case-iconlist > li {
  position: relative;
  padding-left: 44px;
}
.case-iconlist > li + li { margin-top: var(--space-sm); }
/* Point of Sale introduces both of its icon lists with a sentence rather than
   putting them straight under the heading, and the list then sits on the same
   --gap-head the heading gives its own paragraph. Measured 32 / 32 / 24. */
.case-lead > p + .case-iconlist { margin-top: var(--gap-head); }
.case-iconlist__icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
}

/* --- two screenshots side by side inside one media column ---------------
   Equal columns with a fixed 24px gutter, which reproduces the measured
   294 / 179 / 152 at 1440 / 900 / 375 without a percentage per band. */
.case-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.case-pair figure { margin: 0; }

/* --- a 2x2 grid of full-width media -------------------------------------
   Point of Sale's four layout studies. Two equal columns on the wide gutter
   with the same 24px column gutter .case-pair uses, but a full --gap-block
   between the ROWS: these float on the big shadow and the original leaves
   them 96px of air. One column below 751px, on --gap-inner. */
.case-grid2 { display: grid; gap: var(--gap-inner); }
@media (min-width: 751px) {
  .case-grid2 {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-md);
    row-gap: var(--gap-block);
  }
}
.case-grid2 figure { margin: 0; }

/* --- an image narrower than the text box it sits in ---------------------- */
.case-inset {
  width: var(--inset-w, 70%);
  margin-inline: auto;
}
@media (max-width: 750px) {
  .case-inset { width: var(--inset-w-m, 90%); }
}

/* --- the two store badges ------------------------------------------------
   Fixed 120x40 at every width, measured, so they stay legible rather than
   scaling with the column. They sit flush under the artwork above them. */
.case-badges {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: 0;
}
.case-badges a { display: block; }
.case-badges img { width: 120px; height: auto; }

/* --- the floating screenshot treatment ---------------------------------- */
.case-float { box-shadow: var(--shadow-float); }
.case-float--flat { box-shadow: var(--shadow-hairline); }

/* --- rounded screenshot corners -----------------------------------------
   Measured at 1440 and cross-checked against Martin's editor at 1280.
   `overflow: hidden` clips the artwork to the radius; a box-shadow on the
   same element is drawn outside the border box, so the two do not fight.
   The split pair rounds only the edge it is the end of: the two halves of
   one tall screen read as a single phone. */
.case-round        { border-radius: var(--radius-float); overflow: hidden; }
.case-round-top    { border-radius: var(--radius-float) var(--radius-float) 0 0; overflow: hidden; }
.case-round-bottom { border-radius: 0 0 var(--radius-float) var(--radius-float); overflow: hidden; }
.case-round-soft   { border-radius: var(--radius-media); overflow: hidden; }

/* --- a card-shaped image, e.g. the ADPList testimonial ------------------- */
.case-card {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-float);
  box-shadow: var(--shadow-float);
}

/* =========================================================================
   Before / after pair — the FAQ comparison
   -------------------------------------------------------------------------
   Two unequal columns, 40.3% and 54.0% with the rest as the gap, and the
   right one holds a desktop and a mobile screenshot side by side at
   74.6% / 21.6%. Every one of those is measured at both 1440 and 900.
   ========================================================================= */
.case-compare { display: grid; row-gap: var(--gap-inner); }
@media (min-width: 751px) {
  .case-compare {
    grid-template-columns: 40.284% 54.028%;
    justify-content: space-between;
    align-items: start;
  }
}

/* 18px under a label at desktop, 4 on mobile. Measured on both the FAQ
   comparison and Blink's mounting caption; the mobile label sits almost on
   top of the screenshot it names.

   A label also drops to 14px on mobile, where a .case-h3 used as a
   SUBHEADING — the ones in Design Management's icon lists — stays at 16.
   They share a size at desktop and part company below 751px. */
.case-label,
.case-compare__label { margin-bottom: 18px; }
@media (max-width: 750px) {
  .case-label,
  .case-compare__label { margin-bottom: 4px; font-size: var(--step-small); }
}

.case-compare__pair {
  display: grid;
  /* 21.93 rather than the measured 21.71 for the same reason as below: the
     two crops are the same height in the source, so they end level only if
     each one's width tracks its own ratio. */
  grid-template-columns: 75.84% 21.93%;
  justify-content: space-between;
  align-items: start;
}
@media (min-width: 751px) {
  /* 21.637 rather than the measured 21.49 so the two screenshots — which are
     crops of the same page at the same height — end level once each keeps
     its own ratio. One pixel wider than the original, and square at the
     bottom, which the original is not. */
  .case-compare__pair { grid-template-columns: 74.561% 21.637%; }
}

/* =========================================================================
   Next projects — the four cross-links that close every case study
   -------------------------------------------------------------------------
   Same tiles as Home, at a quarter of the size: a ratio-locked fill with the
   artwork placed inside it and a label near the bottom. The ratio changes per
   band because the labels wrap differently — at 900 "Amazon Blink Mobile App"
   takes two lines and every tile grows to match.
   ========================================================================= */
.next-grid {
  display: grid;
  /* 24px between columns at every band, but 48px between the stacked rows
     on mobile. Measured. */
  column-gap: var(--space-md);
  row-gap: 48px;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 751px) {
  .next-grid { grid-template-columns: repeat(4, 1fr); row-gap: var(--space-md); }
}

.next-tile {
  position: relative;
  display: block;
  overflow: hidden;                  /* the Blink artwork overruns the top */
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-tile);
  background: var(--tile, var(--surface-alt));
  aspect-ratio: 327 / 221;
}
@media (min-width: 751px) {
  .next-tile { aspect-ratio: 179 / 246; }
}
@media (min-width: 1001px) {
  .next-tile { aspect-ratio: 297 / 394; }
}

.next-tile--business { --tile: var(--tile-business); }
.next-tile--blink { --tile: var(--tile-blink); }
.next-tile--design { --tile: var(--tile-design); }
.next-tile--trade { --tile: var(--tile-trade); }
.next-tile--pos   { --tile: var(--tile-pos); }

/* Artwork: centred horizontally, hand-placed vertically, and sized as a share
   of the tile — the same per-card treatment Home's big tiles need, because
   Wix positions each one individually rather than on a grid. */
.next-tile__art {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}
.next-tile--business .next-tile__art { width: 57.5%; top: 0; }
.next-tile--blink  .next-tile__art { width: 57.5%;  top: -7.24%; }
.next-tile--design .next-tile__art { width: 57.5%;  top: 0; }
.next-tile--trade  .next-tile__art { width: 50.15%; top: 0; }
.next-tile--pos    .next-tile__art { width: 57.5%;  top: 0; }
@media (min-width: 751px) {
  .next-tile--business .next-tile__art { width: 70.03%; top: 22.59%; }
  .next-tile--blink  .next-tile__art { width: 84.85%; top: 7.61%; }
  .next-tile--design .next-tile__art { width: 70.03%; top: 22.59%; }
  .next-tile--trade  .next-tile__art { width: 70.03%; top: 19.04%; }
  .next-tile--pos    .next-tile__art { width: 70.03%; top: 22.59%; }
}

/* Anchored to the bottom, so a label that wraps grows upwards. */
.next-tile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7.36%;
  text-align: center;
  font-size: var(--step-lead);
  line-height: var(--step-lead-lh);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

/* The tile is the link. Matching Home: the artwork grows 2% on hover, the
   container never moves, and it clips. */
.next-tile img { transition: transform 0.2s ease-in-out; }
.next-tile:hover img,
.next-tile:focus-visible img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .next-tile img { transition: none; }
  .next-tile:hover img,
  .next-tile:focus-visible img { transform: none; }
}