/* Shared case-study layout. Tokens mirror the homepage styles.css. */
:root {
  --paper:#fcfcfa;
  --ink:#232426;
  --muted:#70716f;
  --text-lead:#45484e;
  --text-body:#5c6066;
  --blue:#2855e8;
  --ice:#edf2ff;
  --lime:#ddf38b;
  --line:#e5e7e7;
  --display:'Bricolage Grotesque',sans-serif;
  --body:'DM Sans',sans-serif;
  --accent:#e9e5f5;
  --nav-w:280px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:40px; }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
h1,h2,h3,p,figure,blockquote,dl,dd { margin:0; }
h1,h2,h3 { font-family:var(--display); font-weight:600; }
::selection { background:var(--lime); color:var(--ink); }
a:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--blue); outline-offset:4px; border-radius:4px; }
.skip-link { position:fixed; top:-80px; left:20px; z-index:99; background:var(--ink); color:#fff; padding:15px; border-radius:8px; }
.skip-link:focus { top:20px; }

/* ---------- Layout ---------- */
.case { display:grid; grid-template-columns:var(--nav-w) minmax(0,1fr); }

/* ---------- Sidebar ---------- */
.case-nav {
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:28px 26px 24px 32px;
  border-right:1px solid var(--line);
  overflow-y:auto;
  scrollbar-width:none;
}
.case-nav::-webkit-scrollbar { display:none; }
.case-back {
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  border:1px solid #d8d9d8;
  border-radius:99px;
  padding:11px 18px 11px 15px;
  transition:background .2s,color .2s,border-color .2s;
}
.case-back span { transition:transform .25s var(--ease); }
.case-back:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.case-back:hover span { transform:translateX(-3px); }
.case-cube {
  width:100%;
  max-width:168px;
  aspect-ratio:1;
  margin:0 auto;
  flex:0 0 auto;
  cursor:grab;
  touch-action:pan-y;
}
.case-cube:active { cursor:grabbing; }
.case-cube canvas { display:block; width:100%; height:100%; }
.case-cube-status {
  margin:-14px auto 0;
  font-family:var(--display);
  font-style:italic;
  font-size:13px;
  color:#797e87;
  text-align:center;
  font-variant-numeric:tabular-nums;
  transition:color .3s;
}
.case-cube-status.is-solved { color:var(--blue); }
.case-index-label { display:block; font-size:12px; color:#737780; margin-bottom:12px; }
.case-index ol { list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.case-index a {
  display:block;
  position:relative;
  padding:5.5px 0 5.5px 16px;
  font-size:13px;
  line-height:1.35;
  color:var(--muted);
  transition:color .2s;
}
.case-index a::before {
  content:'';
  position:absolute;
  left:-1px;
  top:5px;
  bottom:5px;
  width:2px;
  border-radius:2px;
  background:var(--blue);
  transform:scaleY(0);
  transition:transform .25s var(--ease);
}
.case-index a:hover { color:var(--ink); }
.case-index a[aria-current=true] { color:var(--ink); font-weight:550; }
.case-index a[aria-current=true]::before { transform:scaleY(1); }
.case-cta { display:flex; flex-direction:column; gap:10px; margin-top:auto; padding-top:8px; }
.case-cta[hidden] { display:none; }
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 18px;
  border-radius:99px;
  font-size:13.5px;
  font-weight:550;
  transition:transform .2s,background .2s;
}
.button:hover { transform:translateY(-2px); }
.button-blue { background:var(--blue); color:#fff; box-shadow:0 4px 0 #2147c4; }
.button-blue:hover { background:#1d46cf; }
.button-outline { border:1px solid #d8d9d8; }
.button-outline:hover { background:var(--lime); border-color:var(--lime); }

/* ---------- Main column ---------- */
.case-main { min-width:0; padding:0 clamp(28px,6vw,96px); }
.case-main > * { max-width:880px; margin-inline:auto; }
.section-label { display:block; margin-bottom:17px; color:#737780; font-size:13px; }
.case-hero { padding-top:88px; }
.case-brand { display:block; font-size:24px; font-weight:800; letter-spacing:-.06em; color:var(--brand,#51446b); }
.case-brand span { color:var(--blue); }
.case-hero h1 {
  font-size:clamp(46px,6vw,88px);
  line-height:.99;
  letter-spacing:-.045em;
  color:var(--blue);
  margin:18px 0 26px;
}
.case-lede { font-size:19px; line-height:1.6; color:var(--text-lead); max-width:580px; text-wrap:pretty; }
.case-cover {
  margin-top:52px;
  background:var(--accent);
  border-radius:26px;
  padding:clamp(28px,6vw,72px) clamp(20px,5vw,64px) 0;
  overflow:hidden;
}
.case-cover .device { transform:rotate(-2.5deg) translateY(14px); transition:transform .55s var(--ease); }
.case-cover:hover .device { transform:rotate(-1deg) translateY(4px); }
.device {
  border:6px solid #25262b;
  border-radius:14px;
  overflow:hidden;
  background:#0b0b0c;
  box-shadow:10px 22px 35px #24202c22;
}

.case-section { padding-top:112px; }
.case-section h2 { font-size:clamp(34px,3.8vw,52px); line-height:1.04; letter-spacing:-.045em; margin-bottom:26px; }
.case-section h3 { font-size:21px; letter-spacing:-.02em; margin-bottom:14px; }
.case-subhead { margin-top:44px; }
.case-body { font-size:16px; line-height:1.8; color:var(--text-body); max-width:640px; }
.case-body + .case-body { margin-top:18px; }
.case-body + * { margin-top:32px; }

.case-list { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px; max-width:660px; }
.case-list li { position:relative; padding-left:28px; font-size:16px; line-height:1.75; color:var(--text-body); }
.case-list li::before { content:''; position:absolute; left:0; top:6.5px; width:14px; height:14px; background:var(--blue); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3.5v17M3.5 12h17M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3.5v17M3.5 12h17M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
.case-split { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:12px; }
.case-split .case-list { margin-top:0; }

.case-statement {
  margin-top:40px;
  background:var(--ice);
  border-radius:22px;
  padding:30px 34px;
  font-family:var(--display);
  font-size:clamp(20px,2vw,25px);
  line-height:1.35;
  letter-spacing:-.02em;
  color:#284790;
}
.case-statement span { display:block; font-family:var(--body); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:#5573a6; margin-bottom:12px; }

.case-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-block:1px solid var(--line); margin-top:36px; }
.case-facts > div { padding:22px 20px 22px 0; }
.case-facts > div + div { padding-left:20px; border-left:1px solid var(--line); }
.case-facts dt { font-size:12px; color:#737780; margin-bottom:8px; }
.case-facts dd { font-size:15px; line-height:1.5; font-weight:550; }
.case-facts dd span { font-weight:400; color:var(--muted); font-size:13px; }

/* Tables */
.case-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:18px; background:#fff; }
.case-table { width:100%; border-collapse:collapse; font-size:14px; line-height:1.55; }
.case-table th,.case-table td { text-align:left; vertical-align:top; padding:15px 18px; }
.case-table thead th { font-size:12px; font-weight:600; color:#737780; background:#f6f6f3; border-bottom:1px solid var(--line); white-space:nowrap; }
.case-table tbody tr + tr > * { border-top:1px solid var(--line); }
.case-table tbody td:first-child { color:var(--ink); font-weight:500; }
.case-table tbody td:last-child { color:#4c4f55; }
.case-table.journey { min-width:900px; font-size:13px; }
.case-table.journey tbody th { font-family:var(--display); font-weight:600; font-size:14px; white-space:nowrap; }
.case-table.journey tbody td:first-child { font-weight:400; color:#4c4f55; }
.case-table.journey tbody td:last-child { color:#284790; font-weight:500; }
.mood { display:inline-block; padding:4px 10px; border-radius:20px; background:#fdf1d9; color:#8a5a00; font-size:12px; font-weight:600; white-space:nowrap; }

/* Empathy map */
.empathy { position:relative; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:22px; background:#fff; overflow:hidden; }
.empathy-cell { padding:30px 32px 32px; }
.empathy-cell:nth-child(odd) { border-right:1px solid var(--line); }
.empathy-cell:nth-child(-n+2) { border-bottom:1px solid var(--line); }
.empathy-cell h3 { font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:14px; font-family:var(--body); font-weight:700; }
.empathy-cell ul { margin:0; padding-left:18px; display:grid; gap:9px; font-size:14px; line-height:1.55; color:#4c4f55; }
.empathy-center { position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; display:grid; place-items:center; border-radius:50%; background:var(--lime); font-size:26px; transform:rotate(12deg); }

/* JTBD */
.case-quotes { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; counter-reset:q; }
.case-quotes li {
  counter-increment:q;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px 24px 24px;
  font-family:var(--display);
  font-size:18px;
  line-height:1.35;
  letter-spacing:-.015em;
  transition:transform .35s var(--ease),box-shadow .35s;
}
.case-quotes li::before { content:counter(q,decimal-leading-zero); display:block; font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--blue); margin-bottom:12px; }
.case-quotes li:hover { transform:translateY(-4px) rotate(-.6deg); box-shadow:0 14px 26px #243b5b12; }
.case-quotes li:last-child:nth-child(odd) { grid-column:1/-1; }

/* Problem framing canvas */
.canvas { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:22px; overflow:hidden; background:#fff; }
.canvas > div { padding:26px 24px 28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.canvas > div:nth-child(3n) { border-right:0; }
.canvas > div:nth-child(n+4) { border-bottom:0; }
.canvas dt { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#737780; margin-bottom:12px; }
.canvas dd { font-family:var(--display); font-size:18px; line-height:1.35; letter-spacing:-.015em; }
.canvas .canvas-outcome { background:var(--lime); }
.canvas .canvas-outcome dt { color:#4f5a22; }

/* Figures */
.case-figure { border-radius:22px; overflow:hidden; }
.case-figure.dark { background:#0b0b0c; padding:clamp(12px,3vw,32px); }

/* Testing tasks */
.case-tasks { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; counter-reset:t; }
.case-tasks li { counter-increment:t; display:inline-flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; border:1px solid var(--line); border-radius:99px; background:#fff; font-size:14px; }
.case-tasks li::before { content:counter(t); display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--ice); color:var(--blue); font-size:12px; font-weight:700; }

/* Before / after */
.compare { display:grid; gap:12px; }
.compare-row { display:grid; grid-template-columns:190px 1fr 1fr; gap:12px; align-items:stretch; }
.compare-row h3 { font-size:18px; margin:0; padding:20px 0; align-self:center; }
.compare-row p { position:relative; padding:40px 22px 22px; border-radius:18px; font-size:14px; line-height:1.6; }
.compare-row p::before { position:absolute; top:16px; left:22px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.compare .before { background:#f3f3f0; color:#5e6166; }
.compare .before::before { content:'Before'; color:#8b8e93; }
.compare .after { background:var(--ice); color:#253c76; }
.compare .after::before { content:'After Bubbles'; color:var(--blue); }

.case-pull {
  margin-top:48px;
  font-family:var(--display);
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.1;
  letter-spacing:-.04em;
  color:var(--blue);
  max-width:720px;
}

/* Galleries */
.gallery { display:grid; grid-template-columns:1fr 1fr; gap:36px 24px; }
.gallery figure { min-width:0; }
.gallery .wide { grid-column:1/-1; }
.gallery .tall .device { max-width:620px; margin-inline:auto; }
.gallery .device { transition:transform .45s var(--ease),box-shadow .45s; }
.gallery figure:hover .device { transform:translateY(-5px); box-shadow:14px 28px 40px #24202c2a; }
.gallery figcaption { margin-top:14px; font-family:var(--display); font-style:italic; font-size:14px; color:#6e7479; }

/* Footer */
.case-footer { padding-top:120px; }
.case-next { display:block; padding:40px 0; border-top:1px solid var(--line); }
.case-next .section-label { margin-bottom:10px; }
.case-next strong { display:block; font-family:var(--display); font-weight:600; font-size:clamp(40px,5vw,68px); letter-spacing:-.05em; line-height:1; transition:color .2s; }
.case-next strong span { font-size:.55em; color:var(--blue); vertical-align:.35em; display:inline-block; transition:transform .3s var(--ease); }
.case-next > span:last-child { display:block; margin-top:12px; color:var(--muted); font-size:14px; }
.case-next:hover strong { color:var(--blue); }
.case-next:hover strong span { transform:rotate(45deg); }
.case-footer-bottom { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:24px 0 32px; border-top:1px solid var(--line); font-size:12px; color:#747975; }
.case-footer-bottom a:hover { color:var(--blue); }

/* Entrance */
.case-hero > * { animation:case-in .8s both; }
.case-hero > :nth-child(2) { animation-delay:.05s; }
.case-hero > :nth-child(3) { animation-delay:.12s; }
.case-hero > :nth-child(4) { animation-delay:.22s; }
.case-hero > :nth-child(5) { animation-delay:.3s; }
@keyframes case-in { from { opacity:0; translate:0 20px; } to { opacity:1; translate:0 0; } }

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
  :root { --nav-w:236px; }
  .case-nav { padding-inline:24px 20px; }
  .compare-row { grid-template-columns:1fr 1fr; }
  .compare-row h3 { grid-column:1/-1; padding:14px 0 0; }
}
/* ---------- Phone menu (hidden on desktop, where the sidebar shows the index) ---------- */
.case-menu, .case-drawer, .case-scrim { display:none; }
.case-menu {
  flex:0 0 auto;
  place-items:center;
  width:58px;
  height:42px;
  border:1px solid #d8d9d8;
  border-radius:99px;
  background:transparent;
  color:#6d7379;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.case-menu svg, .case-drawer-close svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.case-menu svg circle { fill:currentColor; stroke:none; }
.case-menu:hover, .case-menu[aria-expanded=true] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.case-menu:focus-visible, .case-drawer-close:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }

@media (max-width:900px) {
  .case { display:block; }
  /* Header: back on the left, the menu button on the right, nothing else. */
  .case-nav {
    position:sticky;
    z-index:20;
    height:auto;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 16px;
    border-right:0;
    border-bottom:1px solid var(--line);
    background:#fcfcfaf7;
    overflow:visible;
  }
  .case-back { flex:0 0 auto; }
  .case-cube, .case-cube-status, .case-index { display:none; }
  .case-menu { display:inline-grid; }
  /* The CTAs stay pinned to the bottom of the page. */
  .case-cta { position:fixed; left:16px; right:16px; bottom:16px; margin:0; padding:0; flex-direction:row; z-index:20; }
  .case-cta .button { flex:1; justify-content:center; }
  .case-cta .button-outline { background:#fff; }
  body:has(.case-cta:not([hidden])) .case-main { padding-bottom:80px; }
  html { scroll-padding-top:80px; }
  html.menu-open { overflow:hidden; }

  /* The menu: a panel from the right over a soft scrim, with the index and the CTAs. */
  .case-scrim {
    display:block;
    position:fixed;
    inset:0;
    z-index:55;
    background:#1b224033;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s, visibility 0s .3s;
  }
  .case-scrim.is-open { opacity:1; visibility:visible; transition:opacity .3s; }
  .case-drawer {
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:60;
    width:min(86vw, 380px);
    padding:14px 16px calc(18px + env(safe-area-inset-bottom));
    background:var(--paper);
    border-left:1px solid var(--line);
    box-shadow:-24px 0 60px #1b24401f;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .38s var(--ease), visibility 0s .38s;
  }
  .case-drawer.is-open { transform:none; visibility:visible; transition:transform .38s var(--ease); }
  .case-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:0 0 12px 8px; border-bottom:1px solid var(--line); }
  .case-drawer-title { font-size:13px; color:#737780; }
  .case-drawer-close { display:grid; place-items:center; width:42px; height:42px; border:1px solid #d8d9d8; border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; transition:background .2s,border-color .2s; }
  .case-drawer-close:hover { background:var(--lime); border-color:var(--lime); }
  .case-drawer nav { flex:1; min-height:0; overflow-y:auto; margin:10px -4px; padding:0 4px; overscroll-behavior:contain; }
  .case-drawer-list { list-style:none; margin:0; padding:0; counter-reset:item; }
  .case-drawer-list li { counter-increment:item; }
  .case-drawer-list a {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    padding:12px 12px;
    border-radius:14px;
    font-size:16px;
    line-height:1.35;
    color:#4c4f55;
    transition:background .2s,color .2s;
  }
  .case-drawer-list a::after { content:counter(item, decimal-leading-zero); font-size:11px; font-weight:600; letter-spacing:.08em; color:#a3a8b3; }
  .case-drawer-list a:hover { background:#f2f3f0; color:var(--ink); }
  .case-drawer-list a[aria-current=true] { background:var(--ice); color:#284790; font-weight:550; }
  .case-drawer-list a[aria-current=true]::after { color:var(--blue); }
  .case-drawer-cta { display:flex; flex-direction:column; gap:10px; padding-top:14px; border-top:1px solid var(--line); }
  .case-drawer-cta[hidden] { display:none; }
  .case-drawer-cta .button { justify-content:space-between; }
}
@media (max-width:760px) {
  .case-main { padding:0 16px; }
  .case-hero { padding-top:48px; }
  .case-section { padding-top:80px; }
  .case-split,.case-quotes,.gallery { grid-template-columns:1fr; }
  .case-quotes li:last-child:nth-child(odd) { grid-column:auto; }
  .case-facts { grid-template-columns:1fr; }
  .case-facts > div + div { padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .empathy { grid-template-columns:1fr; }
  .empathy-cell:nth-child(odd) { border-right:0; }
  .empathy-cell:not(:nth-child(4)) { border-bottom:1px solid var(--line); }
  .empathy-center { display:none; }
  .canvas { grid-template-columns:1fr; }
  .canvas > div { border-right:0; border-bottom:1px solid var(--line); }
  .canvas > div:last-child { border-bottom:0; }
  .compare-row { grid-template-columns:1fr; }
  .case-statement { padding:24px; }
  .device { border-width:4px; border-radius:10px; }
  .case-cover { border-radius:20px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}

/* ---------- Shared blocks used by later case studies ---------- */
.case-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.case-cards.three { grid-template-columns:repeat(3,1fr); }
.case-card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px 24px 26px; transition:transform .35s var(--ease),box-shadow .35s; }
.case-card:hover { transform:translateY(-4px); box-shadow:0 14px 26px #243b5b10; }
.case-card-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--ice); color:var(--blue); font-size:19px; margin-bottom:18px; }
.case-card h3 { font-size:19px; margin-bottom:12px; }
.case-card > p { font-size:14px; line-height:1.65; color:var(--muted); }
.case-card ul { margin:12px 0 0; padding-left:18px; display:grid; gap:8px; font-size:14px; line-height:1.55; color:#4c4f55; }
.case-stat { display:flex; align-items:center; gap:28px; margin-top:36px; padding:28px 32px; border-radius:22px; background:var(--lime); }
.case-stat strong { font-family:var(--display); font-weight:600; font-size:clamp(52px,6vw,78px); line-height:.9; letter-spacing:-.05em; }
.case-stat p { font-size:16px; line-height:1.5; max-width:340px; color:#3c4322; }
.case-flow { background:#0b0b0c; border-radius:22px; padding:clamp(18px,4vw,40px); display:grid; place-items:center; }
/* Width comes from the image's own proportions (--flow-w / --flow-h, set on the img), so its space is
   reserved before it loads and the page doesn't jump while scrolling. */
.case-flow img { width:100%; height:auto; max-width:min(100%, calc(var(--flow-max, 760px) * var(--flow-w, 1) / var(--flow-h, 1))); }
.case-steps { list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:10px; counter-reset:s; }
.case-steps li { counter-increment:s; position:relative; padding:18px 18px 20px; border-radius:18px; background:#fff; border:1px solid var(--line); font-size:14px; line-height:1.5; color:#4c4f55; }
.case-steps li::before { content:counter(s,decimal-leading-zero); display:block; font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--blue); margin-bottom:10px; }
.case-steps li strong { display:block; font-family:var(--display); font-weight:600; font-size:17px; color:var(--ink); margin-bottom:4px; letter-spacing:-.01em; }
.case-phase { display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; padding:6px 12px 6px 8px; border-radius:99px; background:var(--ice); color:#284790; font-size:12px; font-weight:600; }
.case-phase b { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--blue); color:#fff; font-size:11px; }
.case-block + .case-block { margin-top:56px; }
.case-block > .case-list { margin-top:0; }
.case-block .gallery, .case-block > figure { margin-top:24px; }
.case-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
@media (max-width:1100px) {
  .case-steps { grid-auto-flow:row; grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .case-cards,.case-cards.three,.case-steps { grid-template-columns:1fr; }
  .case-stat { flex-direction:column; align-items:flex-start; gap:12px; padding:24px; }
  .case-flow img { --flow-max:560px; }
}
@media (prefers-reduced-motion:reduce) {
  .case-card { transition:none; }
}
.case-list + .gallery, .case-body + .gallery { margin-top:36px; }
.case-statement + .case-list { margin-top:24px; }
/* Short laptop screens: shrink the sidebar so the CTAs stay visible. */
@media (min-width:901px) and (max-height:820px) {
  .case-nav { gap:14px; padding-block:22px 20px; }
  .case-cube { max-width:118px; }
  .case-cube-status { margin-top:-10px; font-size:12px; }
  .case-index a { padding-block:4px; font-size:12.5px; }
  .case-index-label { margin-bottom:8px; }
  .case-cta .button { padding-block:11px; }
}
@media (min-width:901px) and (max-height:660px) {
  .case-cube,.case-cube-status { display:none; }
}

/* Inline SVG icons that stand in for ↗ ↘ ✳, which iOS draws as emoji. */
.glyph { width:1em; height:1em; vertical-align:-.125em; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }

/* Body type scale on phones: lede 17 > body 15.5, cards and tables stay at 14. */
@media (max-width:760px) {
  .case-lede { font-size:17px; }
  .case-body, .case-list li { font-size:15.5px; }
}