@font-face{font-family:"Outfit Extra Bold";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/outfit-variable.woff2) format("woff2")}
@font-face{font-family:"Outfit Bold";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/outfit-variable.woff2) format("woff2")}
@font-face{font-family:"Outfit Semi Bold";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/outfit-variable.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/open-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Open Sans";font-style:italic;font-weight:300 800;font-display:swap;src:url(../fonts/open-sans-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/open-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Open Sans";font-style:italic;font-weight:300 800;font-display:swap;src:url(../fonts/open-sans-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Design tokens, measured on the live Framer site (konradf.tech, 2026-11-10).
   Breakpoints follow Framer's: xl >= 1800, d 1200-1799, t 810-1199, m < 810. */

:root {
  /* Colour */
  --c-ink: #404040;
  --c-yellow: #ffc526;
  --c-white: #fff;
  --c-black: #000;
  --c-line: rgba(0, 0, 0, 0.1);
  --c-muted: rgba(64, 64, 64, 0.6);   /* secondary text */
  --c-warn: rgb(217, 39, 45);         /* same red as the red tile tint */
  --c-line-inverse: rgba(255, 255, 255, 0.1);
  --c-glass: rgba(255, 255, 255, 0.25);
  --c-glass-dark: rgba(0, 0, 0, 0.25);
  --c-overlay: rgba(0, 0, 0, 0.1);
  --c-tint-blue: #f3f7fa;   /* solid = 10% tint over white, so tiles hide the grid lines */
  --c-tint-green: #eaf9e9;
  --c-tint-red: #fbe9ea;
  --c-tint-grey: #e6e6e6;
  /* the home approach tiles are glass: the same tints, see-through, so the shapes behind them blur through */
  --c-glass-blue: rgba(130, 172, 207, 0.1);
  --c-glass-green: rgba(41, 194, 33, 0.1);
  --c-glass-red: rgba(217, 39, 45, 0.1);

  /* Type families: headings one family per weight, Open Sans for text. */
  --f-display-xb: "Outfit Extra Bold", sans-serif;
  --f-display-b: "Outfit Bold", sans-serif;
  --f-display-sb: "Outfit Semi Bold", sans-serif;
  --f-display-fallback-weight: 700;
  --f-body: "Open Sans", sans-serif;
  --f-label: "Inter", sans-serif;

  /* Type scale (desktop 1200-1799) */
  --t-h1: 68px;          /* line-height 1.2; was 88 on live, ~23% smaller with Outfit */
  --t-h2: 56px;          /* line-height 1 */
  --t-h3: 24px;          /* line-height 1.4 */
  --t-card-title: 32px;  /* see-next card, line-height 1.4 */
  --t-body: 16px;        /* weight 500, line-height 1.68 */
  --t-lead: 20px;        /* see-next card text */
  --t-pill: 14px;        /* line-height 24px */
  --w-button: 500;       /* button and pill labels; live used 400 */
  --t-footer: 16px;      /* line-height 2 */
  --t-tag: 10px;         /* weight 600, line-height 1 */
  --t-stat: 56px;        /* weight 700, line-height 1.2 */
  --t-see-next: 16px;

  /* Layout */
  --frame: 85vw;         /* the grid-line frame */
  --gutter: 16px;        /* frame edge -> content */
  --hero-gutter: 16px;
  --lines: 7;
  --measure: 0.6605;     /* body text width as a share of the content width */
  --radius-media: 20px;
  --radius-tile: 16px;
  --radius-icon: 15px;
  --radius-pill: 100px;
  --blur: blur(40px);

  /* Motion */
  --ease-appear: cubic-bezier(0.12, 0.23, 0.5, 1);
  --dur-appear: 0.75s;
  /* Hover: quick in, softer out */
  --dur-hover-in: 0.3s;
  --ease-hover-in: cubic-bezier(0.61, 1, 0.88, 1);      /* soft ease-out */
  --dur-hover-out: 0.5s;
  --ease-hover-out: cubic-bezier(0.37, 0, 0.63, 1);     /* soft ease-in-out */
  --dur-nudge: 0.35s;     /* arrow nudge */
  --dur-press-in: 0.1s;   /* button squeeze on press */
  --dur-press-out: 0.35s; /* spring back */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);     /* small overshoot */
  --dur-header: 0.3s;     /* header buttons switching between light and dark */
  --dur-hint: 0.8s;       /* "SCROLL FOR MORE" fading out */
  --dur-card-zoom-in: 0.55s; /* See next card lift + image zoom on hover */
  --dur-card-zoom-out: 0.85s;
  --card-rest-drop: 48px;    /* See next card sits this much lower until hovered */
  --appear-distance: 150px;
  /* Cover text focus-in */
  --dur-focus: 1.2s;
  --ease-focus: cubic-bezier(0.16, 1, 0.3, 1);
  --focus-stagger: 100ms;
  --focus-rise: 24px;
  --focus-blur: 8px;
  --breathe-scale: 1.04; /* cover image breathing: how far it zooms at the peak */
}

@media (min-width: 1800px) {
  :root {
    --t-h1: 80px;  /* was 104 */
    --t-h2: 88px;
    --t-h3: 32px;
    --t-body: 20px;
    --t-pill: 16px;
    --t-footer: 20px;
    --t-tag: 12px;
    --t-see-next: 20px;
  }
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  :root {
    --t-h2: 64px;
    --lines: 5;
    --measure: 1;
  }
}

@media (max-width: 809.98px) {
  :root {
    --t-h1: 38px;  /* was 48 */
    --t-h2: 40px;
    --t-h3: 18px;
    --t-body: 14px;
    --t-pill: 12px;
    --t-footer: 14px;
    --t-tag: 8px;
    --t-stat: 40px;
    --frame: 95vw;
    --gutter: 8px;
    --hero-gutter: 16px;
    --lines: 5;
    --measure: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-appear: 0s;
    --dur-hover-in: 0s;
    --dur-hover-out: 0s;
    --dur-nudge: 0s;
    --dur-press-in: 0s;
    --dur-press-out: 0s;
    --dur-header: 0s;
    --dur-hint: 0s;
    --dur-card-zoom-in: 0s;
    --dur-card-zoom-out: 0s;
    --appear-distance: 0px;
    --dur-focus: 0s;
    --focus-stagger: 0ms;
    --focus-rise: 0px;
    --focus-blur: 0px;
  }
}

/* konradf.tech. Values come from the live site measurements, see tokens.css. */

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

html { -webkit-text-size-adjust: 100%; } /* in-page link scrolling is handled by site.js */

body {
  margin: 0;
  cursor: default; /* no text cursor over copy; links and buttons still get the pointer */
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-weight: var(--f-display-fallback-weight); }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; cursor: pointer; }
code { font: inherit; }
strong, em { font-weight: 400; }

:focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.page { position: relative; overflow: hidden; overflow: clip; } /* clip, not hidden, so the approach stage can stay sticky */

/* The content column: 85vw frame + 16px gutter (95vw + 8px on mobile) */
.wrap {
  width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Grid lines ---------- */
.lines {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: var(--frame);
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  padding-inline: 2px;
  pointer-events: none;
}
.lines span { width: 1px; background: var(--c-line); }
.lines--inverse { position: absolute; }

/* Interactive version (strings.js): one canvas draws every line, the CSS lines become layout guides */
.strings { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.has-strings .lines span { visibility: hidden; }
.lines--inverse span { background: var(--c-line-inverse); }
@media (max-width: 1199.98px) {
  .lines span:nth-child(n + 6) { display: none; }
}

/* ---------- Icons ---------- */
.icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.icon--24 { width: 24px; height: 24px; }

/* ---------- Buttons ----------
   Shared by pills, header icon buttons and the case study nav pills:
   - yellow fill that fades in on hover and slowly fades out
   - label and icon turn dark on the yellow
   - arrow nudges in its direction with a small overshoot
   - press squeezes to 97% and springs back
   - magnetic pull towards the cursor (translate set by site.js) */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition:
    background-color var(--dur-header) var(--ease-hover-out),
    color var(--dur-hover-out) var(--ease-hover-out),
    scale var(--dur-press-out) var(--ease-spring);
}
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--c-yellow);
  opacity: 0;
  transition: opacity var(--dur-hover-out) var(--ease-hover-out);
  pointer-events: none;
}
.btn:hover::before {
  opacity: 1;
  transition-duration: var(--dur-hover-in);
  transition-timing-function: var(--ease-hover-in);
}
.btn:hover {
  color: var(--c-ink);
  transition:
    background-color var(--dur-header) var(--ease-hover-out),
    color var(--dur-hover-in) var(--ease-hover-in),
    scale var(--dur-press-out) var(--ease-spring);
}
.btn:active {
  scale: 0.97;
  transition:
    background-color var(--dur-header) var(--ease-hover-out),
    color var(--dur-hover-in) var(--ease-hover-in),
    scale var(--dur-press-in) var(--ease-hover-in);
}
/* Label/icon follow the magnet a little further (--lx/--ly from site.js); arrows add their nudge on top */
.btn-label,
.icon-button svg,
.btn .icon {
  display: inline-block;
  translate: var(--lx, 0px) var(--ly, 0px);
}
.btn .icon { transition: transform var(--dur-nudge) var(--ease-spring); }
.btn:hover .icon--arrow-right { transform: translateX(3px); }
.btn:hover .icon--arrow-left { transform: translateX(-3px); }
.btn:hover .icon--arrow-down { transform: translateY(3px); }

/* Pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  color: var(--c-white);
  font-size: var(--t-pill);
  font-weight: var(--w-button);
  line-height: 24px;
  white-space: nowrap;
}
.pill--solid { background: var(--c-ink); }
.pill--glass { background: var(--c-glass-dark); }

/* Header icon buttons */
.icon-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-icon);
  background: var(--c-glass);
  color: var(--c-ink);
}
.icon-button svg { width: 24px; height: 24px; }

/* Headers adapt to what's behind them: light glass + dark icons over white,
   dark glass + white icons over the dark cards, image band and footer (class set by site.js). */
.on-dark .icon-button,
.on-dark .nav-pill { background: var(--c-glass-dark); color: var(--c-white); }
.on-dark .btn:hover { color: var(--c-ink); }

.site-footer a:hover {
  transition-duration: var(--dur-hover-in);
  transition-timing-function: var(--ease-hover-in);
}

/* ---------- Site header (home) ---------- */
.site-header {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 10;
  width: var(--frame);
  transform: translateX(-50%);
  padding-inline: var(--hero-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.site-header__social { display: flex; gap: 16px; }

/* ---------- Case study header ---------- */
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  font-size: var(--t-pill);
  font-weight: var(--w-button);
  line-height: 24px;
  background: var(--c-glass);
  color: var(--c-ink);
}

/* ---------- Home hero ---------- */
.hero {
  height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 160px;
}
.hero .wrap { padding-inline: var(--hero-gutter); }

/* Text always sits above the grid lines (canvas at z-index 1); dark backgrounds stay under them */
.hero .wrap,
.approach .wrap,
.about .wrap,
.site-footer__row,
.page > main.wrap { position: relative; z-index: 2; }
.hero__inner { padding-right: 16px; }
.hero__title {
  font-family: var(--f-display-xb);
  font-size: var(--t-h1);
  line-height: 1.2;
  color: var(--c-yellow);
}
.hero__text { width: 66%; margin-top: 24px; font-size: max(var(--t-body), 16px); }
.hero .pill { margin-top: 40px; }

/* "SCROLL FOR MORE" hint, fixed bottom right */
.scroll-hint {
  position: fixed;
  bottom: 16px;
  left: 50%;
  z-index: 5;
  width: var(--frame);
  transform: translateX(-50%);
  padding-inline: var(--hero-gutter);
  text-align: right;
  color: rgba(64, 64, 64, 0.8);
  transition: opacity var(--dur-hint) var(--ease-hover-out), color var(--dur-header) var(--ease-hover-out);
  font-size: var(--t-tag);
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}
/* Same adaptive colour as the header; fades out for good once the visitor has scrolled (site.js) */
.scroll-hint.on-dark { color: rgba(255, 255, 255, 0.8); }
.scroll-hint.is-gone { opacity: 0; }

/* ---------- Home case study cards ---------- */
.card {
  position: relative;
  height: 120vh;
  overflow: hidden;
  background: var(--c-black);
  color: var(--c-white);
  display: flex;
  align-items: center;
}
.card__media {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Breathing drift: a very slow zoom and drift on top of the scroll pan (values per card from build.mjs) */
.card__media picture,
.card__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.card__media img {
  transform-origin: var(--breathe-origin, 50% 50%);
  animation: breathe var(--breathe-dur, 28s) var(--breathe-delay, 0s) ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes breathe {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(var(--breathe-scale)) translate(var(--breathe-x, 0), var(--breathe-y, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .card__media img { animation: none; }
}
.card--pan-left .card__media { right: auto; width: 120%; }
.card--pan-right .card__media { left: auto; right: 0; width: 120%; }
.card__body { position: relative; z-index: 2; }
.card__title {
  font-family: var(--f-display-b);
  font-size: var(--t-h2);
  line-height: 1;
  /* room for descenders below the tight line box: while the focus-in blur runs, the browser only draws inside
     the box, so a "j" or "g" got cut off until the animation ended. The negative margin keeps the layout. */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
  color: var(--c-yellow);
  white-space: nowrap;
}
.card__text { width: 82.6%; margin-top: 24px; }
.card__cta { display: flex; margin-top: 24px; }

/* Cover text "comes into focus": each piece fades in, rises a little and sharpens, one after another.
   site.js adds .is-in when the cover arrives and removes it once it's fully gone, so it replays.
   While scrolling away, site.js also fades/softens the whole block (--exit-*). */
.card__body {
  opacity: var(--exit-opacity, 1);
  filter: blur(var(--exit-blur, 0px));
  transform: translateY(var(--exit-shift, 0px));
}
.js .card__body > * {
  opacity: 0;
  transform: translateY(var(--focus-rise));
  filter: blur(var(--focus-blur));
  transition:
    opacity var(--dur-focus) var(--ease-focus) calc(var(--i, 0) * var(--focus-stagger)),
    transform calc(var(--dur-focus) * 1.15) var(--ease-focus) calc(var(--i, 0) * var(--focus-stagger)),
    filter var(--dur-focus) var(--ease-focus) calc(var(--i, 0) * var(--focus-stagger));
}
.js .card__body.is-in > * { opacity: 1; transform: none; filter: blur(0); }
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-tag);
  font-weight: 600;
  line-height: 1;
}

/* ---------- My approach ---------- */
.approach { padding-top: 160px; }
.section-title {
  font-family: var(--f-display-xb);
  font-size: var(--t-h1);
  line-height: 1.2;
  color: var(--c-ink);
}
.section-title span { display: block; }
.tiles { margin-top: 160px; display: grid; gap: 280px; }
.tile-wrap { position: relative; width: 66%; }
.tile-wrap:nth-child(2) { margin-left: calc((var(--frame) - 4px) / 6); }
.tile {
  position: relative;
  z-index: 3;
  min-height: 400px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--radius-tile);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.tile--blue { background: var(--c-glass-blue); }
.tile--green { background: var(--c-glass-green); }
.tile--red { background: var(--c-glass-red); }
.tile__title {
  font-family: var(--f-display-sb);
  font-size: var(--t-h3);
  line-height: 1.4;
}
.tile__text { margin-top: 40px; }

.shape { position: absolute; z-index: 2; pointer-events: none; }

/* Gel object (approach.js): one shape pinned on screen while the cards scroll past, one screen per card.
   Only applies once WebGL is running (.has-gel); otherwise the static shapes and spacing above stay.
   The stage is background: the grid lines run over it, the glass cards sit above both and blur it. */
.approach__scroller { position: relative; }
.approach__stage { display: none; }
.has-gel .approach__stage { display: block; position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; overflow: hidden; pointer-events: none; }
.approach__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.has-gel .approach__cards { margin-top: -100vh; margin-top: -100svh; }
.has-gel .shape { display: none; }
.has-gel .tiles { margin-top: 0; gap: 0; }
.has-gel .tile-wrap,
.has-gel .tile-wrap:nth-child(n) { width: 100%; margin-left: 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.has-gel .tile { width: 66%; } /* the live card width, all on the left so the object has the right */
@media (min-width: 1800px) { .has-gel .tile { width: 50%; } }
/* tablet and phone: the object sits in the upper part, the cards rise from below */
@media (max-width: 1199.98px) {
  .has-gel .tile-wrap,
  .has-gel .tile-wrap:nth-child(n) { align-items: flex-end; padding-bottom: 8vh; }
  .has-gel .tile { width: 100%; }
}
.shape svg { width: 100%; height: 100%; }
/* Four blue circles in a plus, centred on the tile's top right corner */
.shape--flower { width: 350px; height: 350px; top: -171px; right: -175px; }
.shape--flower i {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(50% 50%, #6886e1 0%, #9aaeeb 100%);
}
.shape--flower i:nth-child(1) { left: 0; top: 95px; }
.shape--flower i:nth-child(2) { left: 95px; top: 0; }
.shape--flower i:nth-child(3) { left: 95px; top: 190px; }
.shape--flower i:nth-child(4) { left: 190px; top: 95px; }
.shape--ring { width: 400px; height: 400px; top: -120px; left: -105px; }
.shape--split { width: 358px; height: 380px; top: -120px; right: -179px; }

/* ---------- About ---------- */
.about { padding: 280px 0 80px; }
.about__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.about__copy { width: 64.7%; }
.about__text { margin-top: 24px; }
.about__photo {
  flex: none;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 1000px;
  overflow: hidden;
  background: #d9d9d9;
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; /* no z-index: the lines run over the background, the row above sits over the lines */
  height: 160px;
  background: var(--c-ink);
  color: var(--c-white);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.site-footer .lines { top: 0; bottom: auto; height: 100%; }
.site-footer__row { display: flex; justify-content: space-between; align-items: center; }
.site-footer__links { display: flex; gap: 40px; }
.site-footer a {
  display: grid;
  place-items: center;
  min-width: 107px;
  height: 40px;
  white-space: nowrap;
  font-size: var(--t-footer);
  line-height: 2;
  transition: color var(--dur-hover-out) var(--ease-hover-out);
}
.site-footer a:hover { color: var(--c-yellow); }

/* ---------- Case study ---------- */
.cs-header {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 10;
  width: var(--frame);
  transform: translateX(-50%);
  padding-inline: var(--gutter);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.cs-header > * { pointer-events: auto; }
.cs-band {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: var(--c-ink);
}
.cs-band__media {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--hero-offset, -200px);
  height: 900px;
  transform-origin: 50% 50%;
  will-change: transform;
}
.cs-band__media img { width: 100%; height: 100%; object-fit: cover; }

.cs-body { position: relative; z-index: 2; }

/* Block spacing: rules come from layout-rules.mjs (generated into rhythm.css);
   per-block overrides arrive as --g-xl/--g-d/--g-t/--g-m custom properties. */
.b { --w: var(--w-d, var(--rule-w, 1)); --dx: var(--dx-d, 0px); margin-top: var(--g-d, var(--rule-d, 0px)); }
@media (min-width: 1800px) {
  .b { --w: var(--w-xl, var(--rule-w, 1)); --dx: var(--dx-xl, 0px); margin-top: var(--g-xl, var(--rule-xl, 0px)); }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .b { --w: var(--w-t, var(--rule-w, 1)); --dx: var(--dx-t, 0px); margin-top: var(--g-t, var(--rule-t, 0px)); }
}
@media (max-width: 809.98px) {
  .b { --w: var(--w-m, var(--rule-w, 1)); --dx: var(--dx-m, 0px); margin-top: var(--g-m, var(--rule-m, 0px)); }
}
.b { width: calc(var(--w) * 100%); margin-left: var(--dx); }
.b-p, .b-list { --rule-w: var(--measure); }

.b-h1 {
  font-family: var(--f-display-xb);
  font-size: var(--t-h1);
  line-height: 1.2;
  color: var(--c-yellow);
}
.b-h2 {
  font-family: var(--f-display-b);
  font-size: var(--t-h2);
  line-height: 1;
}
.b-h3 {
  font-family: var(--f-display-sb);
  font-size: var(--t-h3);
  line-height: 1.4;
}
/* Lists: yellow dot or Outfit numeral in a hanging column, a little air between items */
.b-list { --li-indent: 32px; list-style: none; padding-left: 0; display: grid; gap: 12px; counter-reset: li; }
.b-list > li { position: relative; padding-left: var(--li-indent); }
ul.b-list > li::before {
  content: ""; position: absolute; left: 6px; top: calc(0.84em - 4px);
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-yellow);
}
ol.b-list > li { counter-increment: li; }
ol.b-list > li::before {
  content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-family: var(--f-display-sb); font-weight: var(--f-display-fallback-weight); font-variant-numeric: tabular-nums;
  color: var(--c-yellow);
}
.li-lead { font-weight: 700; } /* body text is 500 */

.b-img img,
.b-img video,
.b-video video,
.media-placeholder {
  width: 100%;
  height: auto;
  border-radius: var(--radius-media);
}
.b-video video { background: var(--c-ink); object-fit: cover; aspect-ratio: var(--ratio, 16 / 9); }
.media-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 16 / 9);
  background: #d9d9d9;
  color: #8a8a8a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Team / Role / Time */
.b-meta { display: grid; gap: 8px; }
.meta-row { display: grid; grid-template-columns: 32px 72px 1fr; align-items: start; }
.meta-row .icon { margin-top: 2px; color: var(--c-ink); }
.meta-row dt { margin-top: 3px; font-family: var(--f-label); font-weight: 700; font-size: var(--t-body); line-height: 20px; }
.meta-row dd { margin: 0; }
/* On the live site the Stack value runs on one line past the column on desktop */
@media (min-width: 1200px) { .meta-row--stack dd { white-space: nowrap; } }

/* Client logos */
.b-logos { display: grid; grid-template-columns: repeat(3, 1fr); }
.b-logos img { width: 100%; height: auto; aspect-ratio: 400 / 220; border-radius: var(--radius-media); }

/* Impact stat tiles */
.b-stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 16px; }
.stat {
  padding: 24px;
  border-radius: var(--radius-media);
  text-align: center;
}
.stat:nth-child(4n + 1) { background: var(--c-tint-blue); }
.stat:nth-child(4n + 2) { background: var(--c-tint-green); }
.stat:nth-child(4n + 3) { background: var(--c-tint-red); }
.stat:nth-child(4n + 4) { background: var(--c-tint-grey); }
.stat__value { font-size: var(--t-stat); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat__label { margin-top: 8px; }

/* ======================================================================
   Case study modules (impact tiles, token demo, acceptance flow)
   Every module reads only these variables, mapped once onto the site's tokens.
   ====================================================================== */
.cs-mod {
  --cs-accent: var(--c-yellow);
  --cs-on-accent: var(--c-ink);
  --cs-ink: var(--c-ink);
  --cs-muted: var(--c-muted);
  --cs-line: var(--c-line);
  --cs-panel: var(--c-tint-blue);
  --cs-track: rgba(64, 64, 64, 0.12);
  --cs-surface: var(--c-white);
  --cs-warn: var(--c-warn);
  --cs-radius: var(--radius-media);
  --cs-font-body: var(--f-body);
  --cs-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --cs-ease: var(--ease-focus);
}
/* Small uppercase labels, like the site's "SCROLL FOR MORE" and tags, a touch larger to read in tiles */
.cs-label {
  margin: 0;
  font-family: var(--f-body);
  font-size: calc(var(--t-tag) + 2px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cs-muted);
}

/* ---- Impact tiles: the site's stat tiles (tints, radius, padding, grid) with animated visuals ---- */
.b-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; }
.cs-kpi {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 24px;
  min-width: 0;
  padding: 24px;
  border-radius: var(--cs-radius);
}
.cs-kpi:nth-child(4n + 1) { background: var(--c-tint-blue); }
.cs-kpi:nth-child(4n + 2) { background: var(--c-tint-green); }
.cs-kpi:nth-child(4n + 3) { background: var(--c-tint-red); }
.cs-kpi:nth-child(4n + 4) { background: var(--c-tint-grey); }
.cs-kpi p { align-self: end; color: var(--cs-ink); }
.cs-viz { display: grid; gap: 12px; align-content: start; min-height: 132px; }

/* big numbers: the site's stat number style */
.cs-n {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--t-stat);
  font-weight: 700;
  line-height: 1.2;
  color: var(--cs-ink);
  font-variant-numeric: tabular-nums;
}

/* timeframe: cells fill left to right */
.cs-months { display: grid; grid-template-columns: repeat(var(--cells, 12), 1fr); gap: 3px; }
.cs-months i { height: 22px; border-radius: 4px; background: var(--cs-track); position: relative; overflow: hidden; }
.cs-months i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cs-accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--cs-ease) calc(var(--i, 0) * 90ms);
}
.cs-kpi.in .cs-months i::after { transform: scaleY(1); }
.cs-months i[style]::after { right: calc((1 - var(--f, 1)) * 100%); } /* part-filled last cell, e.g. 4.6 of 5 */
.cs-months i.off::after { display: none; }
.cs-axis { display: flex; justify-content: space-between; }

/* reductions: a bar shrinks from 100% to what's left */
.cs-bars { gap: 16px; }
.cs-bar { display: grid; gap: 8px; }
.cs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cs-row b { font-size: 20px; font-weight: 700; color: var(--cs-ink); font-variant-numeric: tabular-nums; }
.cs-track { height: 12px; border-radius: 99px; background: var(--cs-track); position: relative; overflow: hidden; }
.cs-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: inherit;
  background: var(--cs-accent);
  transition: width 1.8s var(--cs-ease) 0.35s;
}
.cs-kpi.in .cs-track i { width: var(--to); }
/* signed change: the bar starts at the old value; on increases a tick stays where it started */
.cs-delta i { width: var(--from); }
.cs-delta b { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--cs-ink); opacity: 0.35; }

/* "thousands": dots fill in, row by row */
.cs-crowd { display: grid; grid-template-columns: repeat(16, 1fr); gap: 6px; max-width: 320px; }
.cs-crowd i { aspect-ratio: 1; border-radius: 50%; background: var(--cs-track); position: relative; overflow: hidden; }
.cs-crowd i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--cs-accent);
  transform: scale(0);
  transition: transform 0.5s var(--cs-ease) calc(var(--i, 0) * 20ms);
}
.cs-kpi.in .cs-crowd i::after { transform: scale(1); }

/* five tiles: the last one spans the row */
@media (min-width: 810px) { .cs-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* pipeline + check, and the down arrow */
.cs-pipe { display: flex; align-items: center; height: 44px; }
.cs-pipe span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--cs-accent); flex: none; transition: background-color 0.4s var(--cs-ease); }
.cs-pipe em { flex: 1; height: 2px; background: var(--cs-track); position: relative; overflow: hidden; }
.cs-pipe em::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cs-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--cs-ease);
}
.cs-kpi.in .cs-pipe span { background: var(--cs-accent); }
.cs-kpi.in .cs-pipe em::after { transform: scaleX(1); }
.cs-pipe span:nth-of-type(2) { transition-delay: 0.6s; }
.cs-pipe em:nth-of-type(2)::after { transition-delay: 0.8s; }
.cs-pipe span:nth-of-type(3) { transition-delay: 1.4s; }
.cs-pipe svg { margin-left: 12px; width: 30px; height: 30px; flex: none; }
.cs-pipe svg path {
  fill: none;
  stroke: var(--cs-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset 0.6s var(--cs-ease) 1.6s;
}
.cs-pipe.cs-arrow svg { margin-left: 0; width: 40px; height: 40px; }
.cs-pipe.cs-arrow svg path { stroke-dasharray: 40; stroke-dashoffset: 40; transition-delay: 0.3s; }
.cs-kpi.in .cs-pipe svg path { stroke-dashoffset: 0; }

/* ---- Figures: token demo and acceptance flow ---- */
.cs-fig {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: clamp(16px, 2.2vw, 28px);
  border-radius: var(--cs-radius);
  background: var(--cs-panel);
}

/* palette switch, styled like the site's pills */
.cs-seg {
  display: inline-flex;
  justify-self: start;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
}
.cs-seg button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cs-ink);
  font: var(--w-button) var(--t-pill) / 24px var(--cs-font-body);
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-hover-out) var(--ease-hover-out);
}
.cs-seg button:hover { background: rgba(255, 197, 38, 0.25); transition-duration: var(--dur-hover-in); transition-timing-function: var(--ease-hover-in); }
.cs-seg button[aria-pressed="true"] { background: var(--cs-accent); color: var(--cs-on-accent); }

.cs-ds-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; }
.cs-ds-l { display: grid; gap: 10px; align-content: start; }
.cs-label--gap { margin-top: 8px; }
.cs-ramp { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; }
.cs-ramp i { aspect-ratio: 1 / 1.4; border-radius: 4px; transition: background-color 0.5s var(--cs-ease); }
.cs-sem { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; }
.cs-sem li { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; font: 12.5px/1.3 var(--cs-font-mono); color: var(--cs-ink); }
.cs-sem li i { width: 16px; height: 16px; border-radius: 4px; transition: background-color 0.5s var(--cs-ease); }
.cs-sem li span:last-child { color: var(--cs-muted); }

/* mock product UI: its semantic tokens resolve to the active base ramp */
.cs-ui {
  --action: var(--b-600);
  --action-hover: var(--b-700);
  --subtle: var(--b-100);
  --focus: var(--b-400);
  --link: var(--b-700);
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--cs-line);
  border-radius: var(--radius-tile);
  background: var(--cs-surface);
  font-family: var(--cs-font-body);
  font-size: 14px;
  color: var(--cs-ink);
}
.cs-row-ui { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font: 600 14px/1 var(--cs-font-body);
  cursor: pointer;
  transition: background-color 0.5s var(--cs-ease), color 0.5s var(--cs-ease);
}
.cs-btn.pri { background: var(--action); color: #fff; }
.cs-btn.pri:hover { background: var(--action-hover); }
.cs-btn.out { background: var(--cs-surface); color: var(--cs-ink); border-color: var(--cs-line); }
.cs-btn.txt { background: none; color: var(--link); padding-inline: 4px; }
.cs-fld { display: grid; gap: 6px; cursor: text; }
.cs-fld > span { font-size: 12.5px; font-weight: 600; color: var(--cs-muted); }
.cs-inp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--cs-line);
  border-radius: 10px;
  transition: border-color 0.5s var(--cs-ease), box-shadow 0.5s var(--cs-ease);
}
.cs-inp:focus-within,
.cs-inp.focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--subtle); }
.cs-inp input { all: unset; flex: 1; min-width: 0; font-size: 14px; }
.cs-inp button { appearance: none; border: 0; background: none; color: var(--link); font: 600 12.5px var(--cs-font-body); cursor: pointer; transition: color 0.5s var(--cs-ease); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chips span { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--subtle); color: var(--link); font-size: 12px; font-weight: 600; transition: background-color 0.5s var(--cs-ease), color 0.5s var(--cs-ease); }
.cs-tw { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cs-sw { position: relative; flex: none; width: 38px; height: 22px; border-radius: var(--radius-pill); background: var(--action); transition: background-color 0.5s var(--cs-ease); }
.cs-sw::after { content: ""; position: absolute; top: 3px; left: 19px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }

/* process paths: the acceptance flow's look on any route; modules.js sizes and places everything */
.cs-path-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.cs-path { position: relative; min-height: 120px; min-width: var(--minw, 0); }
.cs-path canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-pst { position: absolute; text-align: center; transform: translateX(-50%); }
.cs-pst[data-lp="l"] { text-align: right; transform: translate(-100%, -50%); }
.cs-pst[data-lp="r"] { text-align: left; transform: translateY(-50%); }
.cs-path.vert .cs-pst { text-align: left; transform: none; }
.cs-path.dense .cs-pst { font-size: var(--t-tag); }
/* edge labels (yes / no …) sit on the line and mask it */
.cs-elab { position: absolute; width: max-content; max-width: 200px; transform: translate(-50%, -50%); padding: 1px 6px; background: var(--cs-panel); font-size: var(--t-tag); text-align: center; }
.cs-elab:empty { display: none; }
.cs-path.vert .cs-elab { transform: translateY(-50%); max-width: calc(100% - 60px); padding-inline: 4px; text-align: left; }
/* route scenes: all stacked in one cell so the panel keeps the tallest route's height; the picked one fades in */
.cs-scenes .cs-seg { flex-wrap: wrap; justify-self: start; border-radius: 22px; }
.cs-scene-stack { display: grid; }
.cs-scene { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.6s var(--cs-ease), visibility 0s 0.6s; }
.cs-scene.on { opacity: 1; visibility: visible; transition: opacity 0.8s var(--cs-ease) 0.15s, visibility 0s; }

/* caption under an interactive figure: what you can do with it */
.cs-cap { margin: 0; font-size: 13px; line-height: 1.5; color: var(--c-muted); text-align: center; }
.cs-fig:has(> .cs-cap) { gap: 14px; } /* caption sits close under its frame */

/* ---- Chooose airline SAF embed (live recreation). One frame: the dark widget is the panel. ----
   Colours sampled off the original screenshot. --clear (0..1, set by JS) lifts the fog off the forest. */
.cs-saf { padding: 0; background: none; }
.saf {
  --saf-bg: #2b2b2b;
  --saf-card: #353535;
  --saf-card-hover: #3d3d3d;
  --saf-ink: #ececec;
  --saf-muted: #b4b4b4;
  --saf-line: rgba(255, 255, 255, 0.1);
  --saf-blue: #2f74ef;
  --clear: 0.6;
  container-type: inline-size;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--saf-bg);
  color: var(--saf-ink);
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* the embed's face, not the site's */
  -webkit-font-smoothing: antialiased;
}
.saf__photo { position: relative; aspect-ratio: 3 / 1; overflow: hidden; }
.saf__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1.06 - var(--clear) * 0.04));
  filter: saturate(calc(0.4 + var(--clear) * 0.7)) brightness(calc(0.8 + var(--clear) * 0.2)) contrast(calc(0.9 + var(--clear) * 0.12)); /* tops out near the photo as shot */
  transition: filter 1.1s var(--cs-ease), transform 1.4s var(--cs-ease);
}
/* the mist, thinning as the pick grows */
.saf__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(150, 150, 150, 0.55), rgba(120, 125, 125, 0.25) 60%, rgba(43, 43, 43, 0.6));
  opacity: calc(1 - var(--clear) * 0.75);
  transition: opacity 1.1s var(--cs-ease);
}
.saf__body { display: grid; gap: 22px; padding: clamp(20px, 3.4cqi, 40px); }
.saf__title { margin: 0; font-size: clamp(22px, 4.2cqi, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.saf__intro, .saf__perk { margin: 0; font-size: 14px; line-height: 1.6; color: var(--saf-muted); max-width: 62ch; }
.saf__intro { margin-top: -10px; }
.saf__perk b { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 600; color: var(--saf-ink); }
.saf__pick { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 12px; }
.saf__pick legend { padding: 0; margin-bottom: 12px; font-size: 16px; font-weight: 600; }
.saf__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.saf input { position: absolute; opacity: 0; pointer-events: none; }
.saf__opt {
  position: relative;
  display: grid; align-content: start; gap: 6px;
  padding: 18px 18px 20px;
  border-radius: 12px;
  background: var(--saf-card);
  cursor: pointer;
  transition: background-color var(--dur-hover-out) var(--ease-hover-out), transform 0.5s var(--cs-ease), box-shadow 0.5s var(--cs-ease);
}
.saf__opt:hover { background: var(--saf-card-hover); transition-duration: var(--dur-hover-in), 0.5s, 0.5s; }
.saf__opt:has(input:checked) { background: var(--saf-blue); transform: translateY(-3px); box-shadow: 0 14px 34px -10px rgba(47, 116, 239, 0.7); }
.saf__radio {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 1.5px solid currentColor;
  display: grid; place-items: center;
  transition: background-color 0.3s var(--cs-ease), border-color 0.3s var(--cs-ease);
}
.saf__radio::after { /* the tick, drawn in on pick */
  content: ""; width: 7px; height: 4px; margin-top: -2px;
  border: solid var(--saf-blue); border-width: 0 0 2px 2px;
  transform: rotate(-45deg) scale(0); transition: transform 0.35s var(--cs-ease);
}
.saf__opt .saf__radio { margin-bottom: 14px; }
.saf__opt:has(input:checked) .saf__radio { background: #fff; border-color: #fff; }
.saf__opt:has(input:checked) .saf__radio::after { transform: rotate(-45deg) scale(1); }
.saf__pct { font-size: clamp(17px, 2.6cqi, 21px); font-weight: 700; line-height: 1.2; }
.saf__price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.saf__lbs { margin-top: 14px; font-size: 12.5px; color: var(--saf-muted); }
.saf__opt:has(input:checked) .saf__lbs { color: rgba(255, 255, 255, 0.82); }
.saf__lbs sub { font-size: 0.75em; }
.saf__no {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 12px;
  background: var(--saf-card); font-size: 14px; font-weight: 600; color: var(--saf-muted); cursor: pointer;
  transition: background-color var(--dur-hover-out) var(--ease-hover-out), color 0.3s;
}
.saf__no:hover { background: var(--saf-card-hover); }
.saf__no:has(input:checked) { color: var(--saf-ink); }
.saf__no:has(input:checked) .saf__radio { background: var(--saf-ink); border-color: var(--saf-ink); }
.saf__no:has(input:checked) .saf__radio::after { border-color: var(--saf-bg); transform: rotate(-45deg) scale(1); }
.saf label:has(input:focus-visible) { outline: 2px solid var(--c-yellow); outline-offset: 3px; }
.saf__sum {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 16px;
  margin: 2px 0 0; padding-top: 18px; border-top: 1px solid var(--saf-line);
  font-size: 14px; color: var(--saf-muted);
}
.saf__sum-v { font-size: 20px; font-weight: 700; color: var(--saf-ink); font-variant-numeric: tabular-nums; }
.saf__sum-co { grid-column: 1 / -1; justify-self: end; font-size: 12.5px; }
/* narrow card: the options become rows */
@container (max-width: 560px) {
  .saf__opts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .saf__opt { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 12px; row-gap: 2px; padding: 14px 16px; }
  .saf__opt .saf__radio { margin: 0; grid-row: span 2; }
  .saf__pct { font-size: 17px; }
  .saf__price { justify-self: end; }
  .saf__lbs { grid-column: 2 / -1; margin: 0; }
  .saf__opt:has(input:checked) { transform: none; }
}

/* ---- Aster screens (live recreations of the product UI). One frame: the product card is the panel. ---- */
.cs-aster { --ast-ink: #1d1d1d; --ast-muted: #6b6b6b; --ast-pill: rgba(0, 0, 0, 0.06); --ast-grid: #e3e3e3; --ast-link: #3b7be0; --ast-mono: var(--cs-font-mono); padding: 0; background: none; }
.ast {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* long pill rows scroll instead of widening the card */
  gap: 14px;
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid var(--cs-line);
  border-radius: var(--radius-tile);
  overflow: hidden;
  background: var(--cs-surface);
  color: var(--ast-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* the product's face, not the site's */
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
/* Aster's soft grey cloud behind the glassy charts, measured off the screenshot: darkest low left, fading up and right */
.ast--compare,
.ast__view--tl {
  background:
    radial-gradient(52% 64% at 32% 92%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.015) 75%, transparent),
    radial-gradient(30% 30% at 64% 66%, rgba(0, 0, 0, 0.03), transparent),
    var(--cs-surface);
}
.ast svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:where(.ast) button { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; padding: 0; cursor: pointer; } /* zero specificity: never outranks a component */
.ast__top { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; }
.ast__sp { flex: 1; }
.ast__btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ast-pill); }
button.ast__btn { transition: background-color var(--dur-hover-out) var(--ease-hover-out); }
button.ast__btn:hover { background: rgba(255, 197, 38, 0.35); transition-duration: var(--dur-hover-in); transition-timing-function: var(--ease-hover-in); }
.ast__title { margin: 6px 0 0; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -0.01em; }
.ast__tabs, .ast__bar, .ast__seg, .ast__date, .ast__compare, .ast__pills { display: flex; align-items: center; gap: 6px; }
.ast__tabs { margin-top: -6px; color: var(--ast-muted); }
.ast__tabs span, .ast__seg span, .ast__pills > * { padding: 3px 10px; border-radius: var(--radius-pill); color: var(--ast-ink); white-space: nowrap; }
.ast__tabs .on, .ast__seg .on { background: var(--ast-pill); }
.ast__bar { justify-content: flex-end; flex-wrap: wrap; gap: 6px 22px; }
.ast__compare { padding: 3px 10px; border-radius: var(--radius-pill); }
button.ast__compare, .ast__pills button { transition: background-color var(--dur-hover-out) var(--ease-hover-out); }
button.ast__compare:hover, .ast__pills button:hover { background: rgba(255, 197, 38, 0.25); transition-duration: var(--dur-hover-in); transition-timing-function: var(--ease-hover-in); }
.ast__pills button[aria-pressed="true"] { background: var(--ast-pill); } /* Compare stays plain when on, as in the product */
.ast__pills { overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; }
.ast .ast__pills > svg { padding: 0; margin-right: 2px; color: var(--ast-muted); }
.ast__date { font-size: 13px; }
.ast__date .off { opacity: 0.3; }
kbd { font: 600 0.95em var(--ast-mono); }

/* month charts */
.ast__chart { position: relative; height: clamp(220px, 30vw, 420px); margin-top: 4px; border: 1px solid var(--ast-grid); outline: none; cursor: crosshair; }
.ast__chart:focus-visible, .ast__bubbles:focus-visible { box-shadow: 0 0 0 2px var(--cs-accent); }
.ast .ast__svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke-width: 2; overflow: visible; }
.ast__svg .grid { stroke: var(--ast-grid); stroke-width: 1; }
.ast__svg .line { stroke-width: 2.5; }
.ast__svg .line.draw { transition: stroke-dashoffset 1.8s var(--cs-ease); }
.ast__svg g { transition: opacity 0.6s var(--cs-ease); }
.ast__svg .gap { stroke-width: 2.5; stroke-dasharray: 2 6; opacity: 0.45; }
.ast__svg .pt { fill: #fff; stroke: #9a9a9a; stroke-width: 1; }
.ast__svg .guide { stroke: rgba(0, 0, 0, 0.18); stroke-width: 1; transition: opacity 0.3s var(--cs-ease); }
.ast__svg .ring { fill: #fff; stroke: #7a7a7a; stroke-width: 3; transition: opacity 0.3s var(--cs-ease); }
.ast__svg .off { opacity: 0; }
.ast__chips { position: absolute; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.ast__chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.05); pointer-events: auto; transition: opacity 0.5s var(--cs-ease), translate 0.5s var(--cs-ease); }
.ast__chip i { width: 18px; height: 18px; border-radius: 50%; background: repeating-linear-gradient(-45deg, var(--c) 0 2px, transparent 2px 4px); }
.ast__chip--cmp.off { opacity: 0; translate: -6px 0; pointer-events: none; }
.ast__x { display: grid; margin-left: 2px; }
.ast__x svg { width: 16px; height: 16px; }
.ast__tip {
  position: absolute; top: 0; left: 0; z-index: 3; min-width: 168px; padding: 12px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  pointer-events: none; font-size: 13px; opacity: 0;
  transition: opacity 0.4s var(--cs-ease), transform 0.5s var(--cs-ease);
}
.ast__tip.on { opacity: 1; }
.ast__tip b { display: block; margin-bottom: 8px; font-weight: 700; }
.ast__tip p { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; white-space: nowrap; }
.ast__tip p i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.ast__tip p span.na { color: var(--ast-muted); }
.ast__months { position: relative; height: 18px; margin-top: -4px; color: var(--ast-muted); font-size: 12px; }
.ast__months span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ast__months span:first-child { transform: none; }
.ast__months span:last-child { transform: translateX(-100%); }
.ast__crumbs { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0 0; font-size: 12.5px; }
.ast__crumbs > svg { width: 16px; height: 16px; color: var(--ast-muted); }
.ast__crumbs i { font-style: normal; color: var(--ast-muted); margin-left: 6px; }
.ast__crumbs b { font-family: var(--ast-mono); font-weight: 700; }
.ast__crumbx { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.ast__crumbx svg { width: 15px; height: 15px; }

/* organisation: map and timeline share one stage and cross-fade */
.ast__views { display: grid; grid-template-columns: minmax(0, 1fr); margin-inline: calc(-1 * clamp(14px, 2vw, 24px)); margin-top: -14px; }
.ast__view { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; min-width: 0; padding: 0 clamp(14px, 2vw, 24px); opacity: 0; visibility: hidden; transition: opacity 0.6s var(--cs-ease), visibility 0s 0.6s; }
.ast__view.on { opacity: 1; visibility: visible; transition: opacity 0.8s var(--cs-ease) 0.1s, visibility 0s; }
.ast__view--map { position: relative; aspect-ratio: 16 / 9; }
/* the map's green glow covers the whole card (sampled off the product: greenest low in the middle) and fades with the view */
.ast--org::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(62% 72% at 50% 78%, #e6f3cb, #f0f8e0 45%, rgba(246, 251, 238, 0.6) 70%, transparent 92%); transition: opacity 0.8s var(--cs-ease); }
.ast--org[data-view="timeline"]::before { opacity: 0; }
.ast__view--tl { padding-top: 14px; }
.ast__view--tl .ast__chart { flex: 1; height: auto; min-height: 200px; }
.ast__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.ast__head { position: relative; z-index: 1; display: grid; gap: 8px; justify-items: start; padding-top: 14px; }
.ast__stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.ast__stats li, .ast__link, .ast__city small { display: inline-flex; align-items: center; gap: 6px; }
.ast__stats svg, .ast__link svg, .ast__city svg { width: 15px; height: 15px; color: var(--ast-muted); }
.ast .ast__link { color: var(--ast-link); padding: 2px 6px 2px 0; border-radius: 6px; }
.ast__link svg { color: currentColor; }
.ast__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ast__city { position: absolute; z-index: 1; margin: 0; display: grid; gap: 2px; justify-items: start; text-align: left; pointer-events: none; transition: translate 0.6s var(--cs-ease), opacity 0.5s var(--cs-ease); }
button.ast__city { pointer-events: auto; border-radius: 8px; }
button.ast__city:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 4px; }
/* zoomed into a city: its departments take over the labels */
.ast__dept { opacity: 0; }
.ast__dept span { font-size: clamp(15px, 1.5vw, 22px); }
.ast--org[data-level="city"] button.ast__city { opacity: 0; pointer-events: none; }
.ast--org .ast__dept.on { opacity: 1; transition-delay: 0.35s; }
.ast--org[data-level="city"] .ast__link { visibility: hidden; }
.ast__upbtn:disabled { cursor: default; }
.ast__city span { font-size: clamp(17px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -0.01em; }
.ast__city small { font-size: 12.5px; }
.ast__city .ast__ppl { opacity: 0; translate: 0 -4px; transition: opacity 0.5s var(--cs-ease), translate 0.5s var(--cs-ease); }
.ast__city.hot { translate: 0 -2px; }
.ast__city.hot .ast__ppl { opacity: 1; translate: 0 0; }
.ast--org .ast__back, .ast--org[data-view="timeline"] .ast__upbtn { display: none; }
.ast--org[data-view="timeline"] .ast__back { display: grid; }

/* team score bubbles */
.ast__titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.ast__titlebar .ast__title { margin: 0; }
.ast__bubbles {
  position: relative; height: clamp(240px, 30vw, 400px); outline: none; cursor: crosshair;
  background: radial-gradient(45% 70% at 50% 45%, rgba(0, 0, 0, 0.06), transparent 75%);
}
.ast__bubbles .bub .stem { stroke: rgba(0, 0, 0, 0.14); stroke-width: 1; }
.ast__bubbles .bub .date { font-size: 10px; fill: var(--ast-muted); stroke: none; }
.ast__bubbles .bub .val { fill: var(--ast-ink); stroke: none; text-anchor: middle; dominant-baseline: central; transition: opacity 0.3s; }
.ast__bubbles .bub circle { stroke: none; transition: filter 0.4s var(--cs-ease); }
.ast__bubbles .bub.hot circle { filter: brightness(0.94) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.12)); }

/* search over the blurred map */
.ast--search { min-height: clamp(380px, 42vw, 560px); grid-template-rows: auto 1fr auto; }
.ast__blur {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(9% 12% at 14% 16%, rgba(0, 0, 0, 0.12), transparent),
    radial-gradient(9% 12% at 54% 21%, rgba(0, 0, 0, 0.1), transparent),
    radial-gradient(10% 12% at 36% 66%, rgba(0, 0, 0, 0.06), transparent),
    radial-gradient(70% 80% at 50% 70%, rgba(196, 228, 140, 0.5), rgba(225, 242, 200, 0.3) 55%, transparent 85%);
  filter: blur(6px);
}
.ast__hint { color: var(--ast-muted); font-size: 13px; }
.ast__find { position: relative; z-index: 1; align-self: center; justify-self: center; width: min(100%, 760px); display: grid; gap: 14px; padding-block: 12px; }
.ast__ask { font-size: clamp(16px, 1.6vw, 22px); }
.ast__q {
  width: 100%; border: 0; border-bottom: 1px solid var(--ast-ink); border-radius: 0; background: transparent;
  padding: 8px 6px; font: 400 clamp(26px, 3vw, 40px) / 1.2 var(--cs-font-body); color: var(--ast-ink); outline: none; cursor: text;
}
.ast__q:focus-visible { border-bottom-color: var(--cs-accent); box-shadow: 0 2px 0 var(--cs-accent); }
.ast__results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; justify-items: start; min-height: 96px; }
.ast__results li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-pill); font-size: 14px; cursor: pointer; transition: background-color 0.3s var(--cs-ease); }
.ast__results li[aria-selected="true"] { background: rgba(0, 0, 0, 0.14); }
.ast__results li i { font-style: normal; color: var(--ast-muted); }
.ast__results b { font-family: var(--ast-mono); font-weight: 700; }
.ast__results .mono { font-family: var(--ast-mono); font-size: 0.92em; }
.ast__foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 22px; }
.ast__go { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 10px 14px !important; border-radius: var(--radius-pill); background: var(--ast-pill) !important; font-size: 16px !important; transition: background-color var(--dur-hover-out) var(--ease-hover-out); }
.ast__go:hover, .ast--search.done .ast__go { background: rgba(255, 197, 38, 0.45) !important; }

@media (max-width: 809.98px) {
  .ast__months span:nth-child(even) { visibility: hidden; }
  .ast__date { display: none; }
  .ast__bar { justify-content: flex-start; }
  .ast__view--map { aspect-ratio: 2 / 3; }
  .ast__view--tl .ast__chart { min-height: 240px; }
  .ast .ast__seg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ast__view, .ast__city, .ast__city .ast__ppl { transition: none; }
}

/* acceptance flow */
.cs-flow { position: relative; height: clamp(200px, 20vw, 260px); }
.cs-flow canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-st { position: absolute; top: 0; width: 26%; transform: translateX(-50%); text-align: center; }

@media (min-width: 1800px), (max-width: 1199.98px) {
  .cs-kpi { padding: 40px; }
}
@media (max-width: 809.98px) {
  .b-kpis { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .cs-ds-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-kpi *,
  .cs-kpi *::after,
  .cs-mod * { transition: none !important; }
}

/* See next + footer. The see-next layer has no height; its top edge is the footer's top edge. */
.cs-end { position: relative; }
.see-next {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: var(--frame);
  transform: translateX(-50%);
  padding-inline: var(--gutter);
}
.see-next__label {
  position: absolute;
  right: calc(var(--gutter) + 690px + 32px);
  top: -37px;
  font-size: var(--t-see-next);
}
.see-next__cards { position: absolute; right: var(--gutter); top: -170px; display: flex; gap: 17px; }
.next-card {
  position: relative;
  display: block;
  width: 690px;
  height: 500px;
  border-radius: var(--radius-media);
  overflow: hidden;
  color: var(--c-white);
}
.next-card picture, .next-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* See next card: slides up with the scroll (--emerge 0..1 from site.js), text comes into focus,
   image breathes like the home covers and eases in a little on hover */
.next-card {
  opacity: var(--emerge-opacity, 1);
  transform: translateY(var(--emerge-shift, 0px));
  /* rests a little low and lifts on hover (separate from the scroll rise above, so they combine) */
  translate: 0 var(--card-rest-drop);
  transition: translate var(--dur-card-zoom-out) var(--ease-hover-out);
}
.next-card:hover,
.next-card:focus-visible {
  translate: 0 0;
  transition: translate var(--dur-card-zoom-in) var(--ease-hover-in);
}
.next-card__media {
  position: absolute;
  inset: 0;
  transition: scale var(--dur-card-zoom-out) var(--ease-hover-out);
}
.next-card:hover .next-card__media {
  scale: 1.03;
  transition: scale var(--dur-card-zoom-in) var(--ease-hover-in);
}
.next-card__media img {
  transform-origin: 55% 45%;
  animation: breathe 30s -9s ease-in-out infinite alternate;
  --breathe-x: -0.8%;
  --breathe-y: 0.5%;
}
.js .next-card__title,
.js .next-card__text {
  opacity: 0;
  transform: translateY(var(--focus-rise));
  filter: blur(var(--focus-blur));
  transition:
    opacity var(--dur-focus) var(--ease-focus) calc(var(--i, 0) * var(--focus-stagger)),
    transform calc(var(--dur-focus) * 1.15) var(--ease-focus) calc(var(--i, 0) * var(--focus-stagger)),
    filter var(--dur-focus) var(--ease-focus) calc(var(--i, 0) * var(--focus-stagger));
}
.js .next-card.is-in .next-card__title,
.js .next-card.is-in .next-card__text { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .next-card__media img { animation: none; }
}
.next-card__body { position: absolute; inset: 0; padding: 64px 40px 40px; background: var(--c-overlay); }
.next-card__title { display: block; font-family: var(--f-display-sb); font-weight: var(--f-display-fallback-weight); font-size: var(--t-card-title); line-height: 1.4; }
.next-card__text { display: block; margin-top: 10px; font-size: var(--t-lead); line-height: 1.68; }
.see-next--narrow .next-card { width: 674px; }
.see-next--narrow .see-next__label { right: calc(var(--gutter) + 674px + 32px); top: -43px; font-size: 20px; }
.next-card--xl { display: none; }

/* Case study body: 240px under the band, the same space above See next + footer on every page
   (live varied it per page, down to 0 on phones) */
.cs-body { padding-top: 240px; padding-bottom: 480px; }
@media (min-width: 810px) and (max-width: 1199.98px) { .cs-body { padding-bottom: 400px; } }
@media (max-width: 809.98px) { .cs-body { padding-bottom: 80px; } }

/* ---------- Appear animations ---------- */
.js [data-appear] {
  opacity: 0.001;
  transform: translateY(var(--appear-distance));
  transition: opacity var(--dur-appear) var(--ease-appear), transform var(--dur-appear) var(--ease-appear);
}
.js [data-appear="down"] { transform: translateY(calc(var(--appear-distance) * -1)); }
.js [data-appear="fade"] { transform: none; }
.js [data-appear="pop"] { transform: scale(0.5) rotate(var(--appear-rotate, 0deg)); }
.js [data-appear].is-in { opacity: 1; transform: none; }

/* ======================================================================
   Breakpoints
   ====================================================================== */

/* >= 1800 */
@media (min-width: 1800px) {
  .hero { padding-bottom: 245px; }
  .hero__text { width: 50%; }
  .card__text { width: 65%; }
  .approach { padding-top: 320px; }
  .tiles { margin-top: 200px; gap: 320px; }
  .tile-wrap:nth-child(1) { width: 49%; }
  .tile-wrap:nth-child(2) { width: 50%; margin-left: 25%; }
  .tile-wrap:nth-child(3) { width: 49.5%; margin-left: 16.5%; }
  .shape--ring { left: -200px; }
  .about { padding: 440px 0 160px; }
  .about__copy { width: 65%; }
  .about__photo { width: 400px; }
  .see-next__label { right: calc(var(--gutter) + 463px * 2 + 17px + 32px); top: -43px; }
  .see-next .next-card { display: none; }
  .see-next .next-card--xl { display: block; width: 463px; }
  .see-next--narrow .see-next__label { right: calc(var(--gutter) + 463px * 2 + 17px + 32px); }
}

/* 810 - 1199 */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .hero { padding-bottom: 120px; }
  .hero__text { width: 100%; }
  .card { height: 100vh; }
  .card__text { width: 81.4%; }
  .tiles { margin-top: 200px; gap: 320px; }
  .tile-wrap,
  .tile-wrap:nth-child(2) { width: 100%; margin-left: 0; }
  .tile__text { margin-top: 24px; }
  .shape--flower { top: -172px; left: calc(50% - 175px); right: auto; }
  .shape--ring { top: -120px; left: calc(50% - 200px); }
  .shape--split { width: 500px; height: 508px; top: -184px; left: calc(50% - 250px); right: auto; }
  .about { padding: 245px 0 81px; }
  .about__inner { flex-direction: column-reverse; align-items: stretch; gap: 45px; }
  .about__copy { width: 100%; padding-right: 16px; }
  .about__photo { width: 50%; align-self: center; }
  .site-footer { height: 120px; }
  .cs-end .site-footer { height: 160px; }
  .cs-band { height: 135px; }
  .see-next__label { display: none; }
  .see-next__cards { top: -190px; }
  .next-card,
  .see-next--narrow .next-card { width: 433px; }
}

/* < 810 */
@media (max-width: 809.98px) {
  .hero { padding-bottom: 80px; }
  .hero__text { width: 100%; margin-top: 16px; }
  .hero .pill { margin-top: 32px; }
  .card { height: 100vh; align-items: flex-end; padding-bottom: 80px; }
  .card__text { width: calc(100% - 16px); margin-top: 16px; }
  .card__cta { margin-top: 16px; }
  .card__tags { margin-top: 16px; }
  .approach { padding-top: 80px; }
  .tiles { gap: 280px; }
  .tile-wrap,
  .tile-wrap:nth-child(2) { width: 100%; margin-left: 0; }
  .tile__text { margin-top: 16px; }
  .shape--flower { top: -172px; left: calc(50% - 175px); right: auto; }
  .shape--ring { width: 240px; height: 240px; top: -120px; left: calc(50% - 120px); }
  .shape--split { width: 328px; height: 328px; top: -162px; left: calc(50% - 164px); right: auto; }
  .about { padding: 120px 0 80px; }
  .about__inner { flex-direction: column-reverse; align-items: stretch; gap: 23px; }
  .about__copy { width: 100%; padding-right: 16px; }
  .about__photo { width: 100%; }
  .site-footer { height: 88px; }
  .site-footer__links { gap: 0; }
  .site-footer__top { width: 117px !important; }
  .cs-header { padding-inline: var(--hero-gutter); }
  .cs-band { height: 90px; }
  .b-logos { grid-template-columns: repeat(2, 1fr); }
  .b-list { --li-indent: 28px; gap: 10px; }
  .b-stats { grid-template-columns: 1fr; row-gap: 8px; }
  .see-next { display: none; }
}

/* Stat tile padding per breakpoint */
@media (min-width: 1800px), (max-width: 1199.98px) {
  .stat { padding: 40px; }
}

/* Generated from scripts/layout-rules.mjs */
.b-h1 + .b-p { --rule-xl: 40px; --rule-d: 40px; --rule-t: 24px; --rule-m: 24px; }
.b-h2 + .b-p,
.b-h2 + .b-list,
.b-h2 + .b-h3,
.b-h2 + .b-stats { --rule-xl: 40px; --rule-d: 40px; --rule-t: 40px; --rule-m: 40px; }
.b-h3 + .b-p,
.b-h3 + .b-list { --rule-xl: 16px; --rule-d: 16px; --rule-t: 16px; --rule-m: 16px; }
.b-p + .b-h3,
.b-list + .b-h3,
.b-stats + .b-h3 { --rule-xl: 40px; --rule-d: 40px; --rule-t: 40px; --rule-m: 40px; }
.b-p + .b-p,
.b-p + .b-list,
.b-list + .b-p,
.b-list + .b-list { --rule-xl: 20px; --rule-d: 20px; --rule-t: 20px; --rule-m: 20px; }
.b-p + .b-stats { --rule-xl: 40px; --rule-d: 40px; --rule-t: 40px; --rule-m: 40px; }
.b-p + .b-h2,
.b-list + .b-h2,
.b-meta + .b-h2 { --rule-xl: 160px; --rule-d: 160px; --rule-t: 96px; --rule-m: 88px; }
.b-stats + .b-h2 { --rule-xl: 160px; --rule-d: 160px; --rule-t: 160px; --rule-m: 160px; }
.b-p + .b-img,
.b-p + .b-video,
.b-list + .b-img,
.b-list + .b-video { --rule-xl: 80px; --rule-d: 80px; --rule-t: 80px; --rule-m: 56px; }
.b-stats + .b-img,
.b-stats + .b-video { --rule-xl: 80px; --rule-d: 80px; --rule-t: 80px; --rule-m: 56px; }
.b-img + .b-h3,
.b-video + .b-h3 { --rule-xl: 80px; --rule-d: 80px; --rule-t: 80px; --rule-m: 56px; }
.b-img + .b-img,
.b-img + .b-video,
.b-video + .b-img,
.b-video + .b-video { --rule-xl: 80px; --rule-d: 80px; --rule-t: 80px; --rule-m: 56px; }
.b-img + .b-h2 { --rule-xl: 280px; --rule-d: 280px; --rule-t: 136px; --rule-m: 104px; }
.b-p + .b-logos,
.b-p + .b-meta { --rule-xl: 40px; --rule-d: 40px; --rule-t: 24px; --rule-m: 24px; }
.b-p + .b-logos { --rule-xl: 80px; --rule-d: 80px; --rule-t: 64px; --rule-m: 40px; }
.b-img + .b-meta,
.b-video + .b-meta,
.b-logos + .b-meta,
.b-fig + .b-meta { --rule-xl: 80px; --rule-d: 80px; --rule-t: 64px; --rule-m: 40px; }
.b-h2 + .b-kpis { --rule-xl: 40px; --rule-d: 40px; --rule-t: 40px; --rule-m: 40px; }
.b-kpis + .b-h2 { --rule-xl: 160px; --rule-d: 160px; --rule-t: 96px; --rule-m: 88px; }
.b-p + .b-kpis { --rule-xl: 40px; --rule-d: 40px; --rule-t: 40px; --rule-m: 40px; }
.b-kpis + .b-h3 { --rule-xl: 80px; --rule-d: 80px; --rule-t: 80px; --rule-m: 56px; }
.b-p + .b-fig,
.b-list + .b-fig { --rule-xl: 80px; --rule-d: 80px; --rule-t: 80px; --rule-m: 56px; }
.b-fig + .b-h3,
.b-fig + .b-p,
.b-fig + .b-list { --rule-xl: 80px; --rule-d: 80px; --rule-t: 80px; --rule-m: 56px; }
.b-fig + .b-h2 { --rule-xl: 280px; --rule-d: 280px; --rule-t: 136px; --rule-m: 104px; }
.b-img + .b-img,
.b-img + .b-video,
.b-img + .b-fig,
.b-video + .b-img,
.b-video + .b-video,
.b-video + .b-fig,
.b-fig + .b-img,
.b-fig + .b-video,
.b-fig + .b-fig { --rule-xl: 80px; --rule-d: 80px; --rule-t: 80px; --rule-m: 56px; }