/* Chick Digital website
   Layout: an ink header and hero, then each page reads as a clean record:
   a narrow label column on the left, content on the right, single rules between.
   Alasar is always upper case. Yellow is kept for the logo shape, buttons and matched data. */

@font-face {
  font-family: "Alasar";
  src: url("../fonts/Alasar.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Arial scaled to Alasar's width and height, so headings keep their size while Alasar loads (no layout shift) */
@font-face {
  font-family: "Alasar Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 68.65%;
  ascent-override: 109.25%;
  descent-override: 36.42%;
  line-gap-override: 0%;
}
/* Roboto and Roboto Mono, self-hosted (SIL Open Font License, see assets/fonts/OFL-*.txt) */
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-latin-ext.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-latin.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; 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: "Roboto Mono"; src: url("../fonts/roboto-mono-latin-ext.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Mono"; src: url("../fonts/roboto-mono-latin.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; 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; }

:root {
  --ink: #2F4858;
  --ink-deep: #263B49;
  --snow: #F4F6F8;
  --white: #FFFFFF;
  --yellow: #FAEA27;
  --yellow-soft: #FFF3A0;
  --coral: #DB5461;
  /* Coral as a button: white text on it needs 4.5:1, which plain coral (3.85:1) misses */
  --coral-dark: #C94658;
  --coral-darker: #B23B4C;
  --slate: #4A5D6B;
  --mist: #C9D3DE;
  --mist-2: #DCE3EA;
  --mist-3: #AEBDCC;
  --mist-deep: #7F96A8;
  /* Rules share the mist greys: --rule for lines on light grounds, --rule-soft for the fainter ones */
  --rule: var(--mist);
  --rule-soft: var(--mist-2);
  /* Device screenshots float on the page with a soft three-layer shadow */
  --shadow-device: drop-shadow(0 24px 28px rgba(38, 59, 73, 0.22)) drop-shadow(0 8px 10px rgba(38, 59, 73, 0.14)) drop-shadow(0 1px 2px rgba(38, 59, 73, 0.20));
  /* Display type below section titles comes in three sizes only */
  --type-l: clamp(26px, 2.6vw, 34px);
  --type-m: 24px;
  --type-s: 18px;
  --font-display: "Alasar", "Alasar Fallback", "Roboto", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --container: 1240px;
  --gutter: 24px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--ink-deep);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
}
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
/* Text links: a yellow underline on hover, the same as the top nav */
p a:not(.btn):hover, li a:not(.btn):hover, dd a:hover, dt a:hover, figcaption a:hover, .u-link:hover, .details__value:hover, .text-link:hover, .site-footer a:hover { box-shadow: inset 0 -2px 0 var(--yellow); }
.text-link:hover, .u-link:hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus, var(--yellow)); outline-offset: 3px; }
/* The hidden attribute always wins, even over a component's own display rule */
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: -9999px; top: 16px; z-index: 100; /* above the sticky header (50) and section bar (40) */
  background: var(--yellow); color: var(--ink); padding: 12px 18px; font-weight: 500;
}
.skip-link:focus { left: 16px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 480px) { :root { --gutter: 16px; } }

/* Grounds */
.bg-ink { background: var(--ink); color: var(--snow); }
.bg-snow { background: var(--snow); color: var(--ink); --focus: var(--ink); }
.bg-white { background: var(--white); color: var(--ink); --focus: var(--ink); }

.section { padding-block: 96px; }
.section--md { padding-block: 96px; }
@media (max-width: 700px) {
  .section, .section--md { padding-block: 64px; }
}
.section__inner { display: flex; flex-direction: column; gap: 48px; }
.section__inner--tight { gap: 36px; }
.section__inner--loose { gap: 72px; }

/* Type */
.lockup {
  display: flex; align-items: center;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  line-height: 1.05; letter-spacing: 0.02em;
}
.lockup .shape { flex: none; display: block; width: 1.58em; height: 2.1em; margin-right: -0.26em; }
.lockup span { padding-top: 0.08em; text-wrap: balance; }
.lockup--h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1.02; letter-spacing: 0.01em; }
.lockup--h2 { font-size: clamp(30px, 3.4vw, 46px); }
.lockup--xl { font-size: clamp(48px, 7vw, 104px); line-height: 1; letter-spacing: 0.01em; }

.lead { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.5; }
.lead--xl { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.35; max-width: 24em; text-wrap: pretty; }
.headline { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; max-width: 30em; }
.text { font-size: 18px; line-height: 1.6; font-weight: 400; }
.text--lg { font-size: 19px; }
.text-sm { font-size: 15px; line-height: 1.55; font-weight: 400; }
.muted { color: var(--slate); }
.measure { max-width: 36em; }
.measure--narrow { max-width: 30em; }
/* A plain column: its children stacked with a small gap */
.stack-col { display: flex; flex-direction: column; gap: 14px; }
.stack-col--tight { gap: 12px; }
.u-link { text-decoration: underline; text-underline-offset: 0.15em; }
.strong { font-weight: 500; }
.hl { color: var(--coral); font-weight: 400; }
/* Small labels: one style everywhere. Slate on light backgrounds; the dark-background ones override the colour. */
.case__kicker, .reel__label, .findings__label, .poc__label, .note__label, .journey__chapter, .tiles-fig__label, .case-hero__crumb, .case-pager__label, .case-pager__title, .side-index__label, .case-card__tag, .result__client, .service-item__n, .pillar__eg-label { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }  /* a highlighted phrase; use on light backgrounds only */
.tbc {
  background: var(--yellow-soft); color: var(--ink);
  border: 1px dashed var(--ink); padding: 1px 6px; font-weight: 500;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 24px; border: 0; border-radius: 4px;
  font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.2;
  cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(0.96); }
/* Button roles: yellow is the main action on dark backgrounds, coral the main action on light ones,
   ink (or a text link) the secondary action. Ghost is the secondary action on dark. */
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--snow); }
.btn--coral { background: var(--coral-dark); color: var(--white); }
.btn--coral:hover { filter: none; background: var(--coral-darker); }
.btn--ghost { background: transparent; color: var(--snow); border: 1px solid rgba(244, 246, 248, 0.5); font-weight: 400; }
.btn--lg { min-height: 52px; padding: 16px 28px; font-size: 17px; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.btn-row--tight { gap: 12px; }
.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 17px; text-decoration: underline; text-underline-offset: 0.2em;
}

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--snow); transition: box-shadow 0.3s ease; }
.site-header.is-stuck { box-shadow: 0 1px 0 rgba(244, 246, 248, 0.12), 0 10px 30px rgba(38, 59, 73, 0.35); }
.site-header.is-stuck .site-header__inner { padding-block: 12px; }
.site-header__inner { transition: padding 0.3s ease; }
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px; padding-block: 20px;
}
.site-logo { display: flex; }
.site-logo svg { display: block; width: 80px; height: 40px; color: var(--snow); }
.site-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; font-size: 15px; font-weight: 400; }
.site-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--yellow); padding-block: 6px; }
.site-nav .btn { min-height: 44px; padding: 12px 20px; font-size: 15px; }
.site-nav a:not(.btn) { padding-block: 6px; }
.site-nav a:not(.btn):hover, .site-nav a:not(.btn):focus-visible { text-decoration: none; box-shadow: inset 0 -2px 0 var(--yellow); }
.menu-toggle { display: none; }
@media (max-width: 960px) {
  .js .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin-right: -10px;
    background: transparent; color: var(--snow); border: 0; cursor: pointer;
  }
  .js .menu-toggle:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }
  .menu-toggle__bars { position: relative; display: block; width: 24px; height: 18px; }
  .menu-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; }
  .menu-toggle__bars span:nth-child(1) { top: 0; }
  .menu-toggle__bars span:nth-child(2) { top: 8px; }
  .menu-toggle__bars span:nth-child(3) { top: 16px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .js .site-nav { display: none; flex-basis: 100%; }
  .js .site-nav.is-open { display: block; }
  /* With the menu open, the header scrolls within the screen, so every item can be reached on a phone held sideways */
  .js .site-header.is-menu-open { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  .js .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 8px; }
  .js .site-nav li a:not(.btn) { display: block; padding-block: 14px; border-top: 1px solid rgba(244, 246, 248, 0.15); font-size: 17px; }
  .js .site-nav a[aria-current], .js .site-nav a:not(.btn):hover { box-shadow: none; color: var(--yellow); }
  .js .site-nav__cta { padding-top: 12px; }
}

/* Home hero: text on the left, the five-scene journey figure on the right */
.home-hero__inner { display: flex; flex-wrap: wrap; gap: 56px 64px; align-items: center; padding-block: 72px 96px; }
.home-hero__text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.home-hero h1 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(28px, 3vw, 42px); line-height: 1.16; letter-spacing: 0.01em;
}
.home-hero h1 em { font-style: normal; color: var(--yellow); }
.home-hero__lead { font-size: 20px; line-height: 1.55; color: var(--mist); max-width: 34em; }
@media (max-width: 700px) { .home-hero__inner { padding-block: 48px 64px; } }

/* Home hero figure: 72 record tiles that move between five arrangements.
   site.js positions the tiles; the SVG scales with its box. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.journey { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.journey__head { min-height: 84px; display: flex; flex-direction: column; gap: 8px; transition: opacity 0.3s ease; }
.journey__head.is-swapping { opacity: 0; }
.journey__word { font-family: var(--font-display); text-transform: uppercase; font-size: var(--type-m); line-height: 1.1; color: var(--yellow); }
.journey__line { font-size: 16px; line-height: 1.5; color: var(--mist); max-width: 34em; text-wrap: pretty; }
.journey__stage { position: relative; }
.field { display: block; width: 100%; height: auto; }
.field text { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; fill: var(--mist-3); text-anchor: middle; }
.field .ex { opacity: 0; transition: opacity 0.5s ease; }
.field[data-state="silos"] .ex--silos, .field[data-state="one"] .ex--one, .field[data-state="insight"] .ex--insight,
.field[data-state="plan"] .ex--plan { opacity: 1; transition-delay: 0.9s; }
.ex__frame { fill: none; stroke: var(--yellow); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s linear 0.5s; }
.field[data-state="one"] .ex__frame { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s ease-out 1s; }
.ex__base { stroke: rgba(244, 246, 248, 0.45); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s linear 0.5s; }
.field[data-state="insight"] .ex__base { stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s ease-out 0.9s; }
.field .ex__left { text-anchor: start; }
.field__records rect {
  fill: var(--snow);
  transition: transform 1.1s cubic-bezier(0.3, 0.8, 0.2, 1), fill 0.6s ease, opacity 0.6s ease;
}
.field__records { transition: opacity 0.22s ease; }
.field__records.is-hiding { opacity: 0; }
.field__records.is-live rect { transition: none; }
.field.is-instant[data-state] .ex, .field.is-instant[data-state] .ex__frame, .field.is-instant[data-state] .ex__base { transition: none; }
@media (max-width: 480px) { .field text { font-size: 15px; } .journey__word { font-size: 22px; } .journey__line { font-size: 15px; } }

/* Chapter bar */
.journey__bar { display: flex; gap: 8px; }
.journey__chapter {
  flex: 1 1 0; min-width: 0; background: none; border: 0; padding: 4px 0 0; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  color: var(--mist-3);
}
.journey__chapter:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 2px; }
.journey__chapter.is-current { color: var(--snow); }
.journey__bar-line { display: block; width: 100%; height: 3px; border-radius: 2px; background: rgba(201, 211, 222, 0.25); position: relative; overflow: hidden; }
.journey__bar-line::after { content: ""; position: absolute; inset: 0; background: var(--yellow); transform: scaleX(0); transform-origin: left; }
.journey__chapter.is-done .journey__bar-line::after { transform: scaleX(1); background: var(--mist-3); }
.journey__chapter.is-current .journey__bar-line::after { animation: chick-fill var(--dur, 3s) linear both; }
.journey__chapter.is-current.is-held .journey__bar-line::after { animation: none; transform: scaleX(1); }
.journey.is-paused .journey__bar-line::after { animation-play-state: paused; }
@keyframes chick-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Too narrow for the chapter names: hide them from view, but keep them as the buttons' names */
@media (max-width: 479px) { .journey__chapter-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .field__records, .field__records rect, .field .ex, .field[data-state] .ex__frame, .field[data-state] .ex__base, .journey__head { transition: none; }
  .journey__chapter.is-current .journey__bar-line::after { animation: none; transform: scaleX(1); }
  svg.is-armed :is(circle, rect) { opacity: 1; animation: none; }
}

/* Inner page hero */
.page-hero__inner { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-end; padding-block: 64px 88px; }
.page-hero__main { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.page-hero__aside { flex: 1 1 320px; min-width: 0; }
.page-hero .lead { color: var(--mist-2); max-width: 30em; }
.page-hero__sub { font-size: 18px; line-height: 1.6; color: var(--mist); max-width: 34em; }
.page-hero__strap { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; }
@media (max-width: 700px) { .page-hero__inner { padding-block: 40px 64px; } }

/* Record layout */
.cols { display: flex; flex-wrap: wrap; gap: 24px 48px; }
.cols--end { align-items: flex-end; }
.cols--ruled { border-top: 1px solid var(--ink); padding-top: 32px; }
.cols__label { flex: 1 1 220px; min-width: 0; }
.cols__main { flex: 3 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.cols__main--tight { gap: 20px; }
.record { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.record--closed { border-bottom: 1px solid var(--rule); }
.record__row { display: flex; flex-wrap: wrap; gap: 8px 48px; padding-block: 24px; }
.record__row + .record__row { border-top: 1px solid var(--rule); }
.record__row--lead { padding-block: 28px; }
.record__label { flex: 1 1 220px; min-width: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.7; font-weight: 500; color: var(--slate); }
.record__label--display { flex: 1 1 300px; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--type-m); line-height: 1.2; color: var(--ink); }
.record__label--client { font-size: var(--type-l); line-height: 1.1; }
.record__body { flex: 3 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.record__body--wide { flex: 2 1 520px; }

.split { display: flex; flex-wrap: wrap; gap: 40px 64px; border-top: 2px solid var(--ink); padding-top: 40px; }
.split__aside { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.split__main { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.rule-list { border-top: 1px solid var(--rule); }
.rule-list li { padding-block: 16px; border-bottom: 1px solid var(--rule); font-size: 17px; line-height: 1.6; }

.figures li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; padding-block: 14px; border-bottom: 1px solid var(--rule-soft); }
.figures li:first-child { padding-top: 0; }
.figures li:last-child { padding-bottom: 0; border-bottom: 0; }
.figures__num { flex: 0 0 160px; font-family: var(--font-display); text-transform: uppercase; font-size: var(--type-l); line-height: 1.05; font-variant-numeric: tabular-nums; }
.figures__mark { flex: 0 0 160px; }
.figures__mark svg { display: block; width: 15px; height: 20px; }
.figures__text { flex: 1 1 260px; min-width: 0; font-size: 17px; line-height: 1.55; font-weight: 400; }

.bullets { display: flex; flex-direction: column; gap: 10px; font-size: 18px; line-height: 1.55; font-weight: 400; }
.bullets li { display: flex; gap: 14px; align-items: baseline; }
.bullets svg { flex: none; width: 11px; height: 14px; }
.quote { font-family: var(--font-display); text-transform: uppercase; font-size: var(--type-l); line-height: 1.2; letter-spacing: 0.01em; color: var(--coral); }
.price-time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 32px; font-size: 18px; font-weight: 400; }
.price-time strong { font-family: var(--font-display); text-transform: uppercase; font-size: var(--type-l); line-height: 1; font-weight: 400; }

/* Record card */
.record-card { color: var(--ink); display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.record-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.record-card__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--type-s); line-height: 1.25; }
.record-card__mark { flex: none; width: 15px; height: 20px; margin-top: 2px; }
.record-card dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 10px; border-top: 1px solid var(--rule-soft); }
.record-card dt { font-size: 15px; font-weight: 400; color: var(--slate); }
.record-card dd { font-size: 17px; font-weight: 500; text-align: right; }
.record-card dd.num { font-family: var(--font-display); text-transform: uppercase; font-size: var(--type-m); font-weight: 400; line-height: 1; }

/* Home: Caterforce figure, services */
.file-fig { display: flex; flex-wrap: wrap; gap: 24px 48px; border-top: 1px solid var(--ink); padding-top: 32px; }
.file-fig figcaption { flex: 1 1 220px; min-width: 0; }
.file-fig__body { flex: 3 1 600px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 0; }
.file-fig__dots { flex: none; display: block; width: 260px; height: auto; }
/* Chart cells (the 190 dots, 300 squares and 95-in-100 grid) appear one after another
   when the chart scrolls into view. site.js adds is-armed, then is-playing. --step is the gap between cells. */
@keyframes chick-dot-in { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
.file-fig__dots { --step: 9ms; }
.chart--squares { --step: 6ms; }
.chart--sampled { --step: 4ms; }
.chart--waffle { --step: 14ms; }
.chart--ways { --step: 60ms; }
svg.is-armed :is(circle, rect) { opacity: 0; transform-box: fill-box; transform-origin: center; }
svg.is-playing :is(circle, rect) { animation: chick-dot-in 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * var(--step, 9ms)) both; }
/* Home Big data card: a scattered sample of stores (.sample, first in the markup), then a beat later every other store */
svg.chart--sampled.is-playing rect { animation-delay: calc(1700ms + var(--i) * var(--step)); }
svg.chart--sampled.is-playing rect.sample { animation-delay: calc(var(--i) * 45ms); }
.file-fig__line { flex: 1 1 56px; min-width: 56px; height: 1px; background: var(--ink); margin-inline: 20px; }
.file-fig .record-card { flex: 1 1 300px; min-width: 0; }
.chart { display: block; height: auto; }
.chart--squares { width: 246px; }
.chart--waffle { width: 216px; }
.chart-cap { font-size: 15px; line-height: 1.55; color: var(--slate); font-weight: 400; max-width: 22em; }

/* Questions on ink */
.qa { border-top: 1px solid rgba(244, 246, 248, 0.4); }
.qa__row { display: flex; flex-wrap: wrap; gap: 12px 48px; padding-block: 32px; border-bottom: 1px solid rgba(244, 246, 248, 0.18); }
.qa__q { flex: 1 1 320px; min-width: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--type-m); line-height: 1.25; }
.qa__a { flex: 1.5 1 440px; min-width: 0; font-size: 18px; line-height: 1.6; color: var(--mist-2); }

/* Call to action */
.cta .section__inner { gap: 28px; }
.cta__line { font-size: 22px; line-height: 1.5; max-width: 26em; }
.bg-ink .cta__line { color: var(--mist-2); }

/* About */
.person { display: flex; flex-wrap: wrap; gap: 40px 64px; border-top: 2px solid var(--ink); padding-top: 40px; }
.duo { display: flex; flex-wrap: wrap; gap: 56px 64px; }
.duo > * { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.duo > :first-child { flex: 3 1 560px; }
.duo > :last-child { flex: 2 1 320px; }
.ruled-top { border-top: 2px solid var(--ink); padding-top: 24px; }
.community-logo { display: block; width: 240px; max-width: 100%; height: auto; }
address { font-style: normal; }

/* Contact: the ways to reach us (and, once it is connected, the form) on the left; a photo and the address on the right */
.contact { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.contact__main { flex: 3 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.contact__direct, .form { border-top: 2px solid var(--ink); padding-top: 28px; display: flex; flex-direction: column; gap: 22px; }
.contact__direct h2, .form h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--type-m); line-height: 1.2; }
.contact__ways > div { display: flex; flex-direction: column; gap: 8px; padding-block: 20px; border-top: 1px solid var(--rule); }
.contact__ways > div:last-child { border-bottom: 1px solid var(--rule); }
.contact__ways h3 { font-size: 15px; line-height: 1.6; font-weight: 500; color: var(--slate); }
.contact__value { align-self: flex-start; font-size: var(--type-m); line-height: 1.35; font-weight: 400; overflow-wrap: anywhere; }
.contact__value:hover { box-shadow: inset 0 -2px 0 var(--yellow); }
.form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 22px 24px; }
.form__field { display: flex; flex-direction: column; gap: 8px; }
.form__field label { font-size: 15px; font-weight: 500; }
.form__optional { font-weight: 400; color: var(--slate); }
.form__field input, .form__field textarea {
  width: 100%; font: inherit; font-weight: 400; font-size: 17px; color: var(--ink);
  padding: 12px 14px; min-height: 48px; border: 1px solid var(--slate); border-radius: 4px; background: var(--white);
}
.form__field textarea { min-height: 150px; resize: vertical; }
.form__field input:focus-visible, .form__field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.form__status { font-size: 16px; line-height: 1.55; font-weight: 400; background: var(--white); border-radius: 4px; padding: 14px 16px; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.form__note { color: var(--slate); }
.form__note a { text-decoration: underline; text-underline-offset: 0.15em; }
.details { flex: 2 1 340px; min-width: 0; display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.details > div { display: flex; flex-direction: column; gap: 8px; padding-block: 24px; border-bottom: 1px solid var(--rule); }
.details h2 { font-size: 15px; line-height: 1.6; font-weight: 500; color: var(--slate); }
.details__value { font-size: 20px; line-height: 1.5; font-weight: 400; overflow-wrap: anywhere; }
.details .photo { max-width: 240px; }

/* Policy pages: one readable column of headings, paragraphs and lists under a single rule */
.prose { max-width: 46em; display: flex; flex-direction: column; gap: 16px; border-top: 2px solid var(--ink); padding-top: 32px; }
.prose h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--type-m); line-height: 1.2; margin-top: 24px; padding-top: 28px; border-top: 1px solid var(--rule); }
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 19px; line-height: 1.4; font-weight: 500; margin-top: 12px; }
.prose h4 { font-size: 17px; line-height: 1.5; font-weight: 500; margin-top: 4px; }
.prose ul { list-style: disc; padding-left: 1.25em; display: flex; flex-direction: column; gap: 6px; }
.prose li { font-size: 18px; line-height: 1.6; font-weight: 400; }
.prose a { text-decoration: underline; text-underline-offset: 0.15em; overflow-wrap: anywhere; }

/* Footer */
.site-footer { background: var(--ink-deep); color: var(--mist); }
.site-footer__inner { display: flex; flex-direction: column; gap: 48px; padding-block: 64px 40px; }
.site-footer__cols { display: flex; flex-wrap: wrap; gap: 40px 64px; justify-content: space-between; }
.site-footer__brand { flex: 1 1 240px; display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.6; }
.site-footer__brand svg { display: block; width: 96px; height: 48px; color: var(--snow); }
.site-footer__col { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.7; }
.site-footer__col--nav { flex-basis: 160px; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px; border-top: 1px solid rgba(244, 246, 248, 0.14); padding-top: 20px; font-size: 14px; color: var(--mist-3); }
/* The policy links: one small row beside the copyright line */
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-footer__legal a { display: inline-block; padding-block: 2px; }
.site-footer__company { flex: 1 1 100%; margin: 0; font-size: 12px; line-height: 1.6; color: var(--mist-3); }
/* Pause animations (added by site.js): a quiet switch beside the policy links */
.motion-toggle { margin-left: auto; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.motion-toggle:hover { color: var(--snow); }
.motion-toggle[aria-pressed="true"] { color: var(--yellow); }
.motion-toggle[aria-pressed="true"]::before { content: "\2713\00A0"; }
/* While paused: the logo rows and the quote timer stand still */
.motion-paused .marquee__track { animation-play-state: paused; }
.motion-paused .testimonials__bar.is-active span::after { animation: none; transform: scaleX(1); }

/* Scroll effects: reveal on entry, and a faint numeral that drifts behind each product heading.
   site.js adds .reveal / .is-in and moves [data-parallax]; both are skipped for reduced motion. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--rd, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .lockup.reveal { opacity: 1; transform: none; }
.js .lockup.reveal .shape { clip-path: inset(0 100% 0 0); transition: clip-path 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd, 0s); }
.js .lockup.reveal span { opacity: 0; transform: translateX(-12px); transition: opacity 0.6s ease calc(var(--rd, 0s) + 0.25s), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--rd, 0s) + 0.25s); }
.js .lockup.reveal.is-in .shape { clip-path: inset(0 0 0 0); }
.js .lockup.reveal.is-in span { opacity: 1; transform: none; }
.has-ghost { position: relative; overflow: hidden; }
.has-ghost .section__inner { position: relative; }
.ghost {
  position: absolute; right: 0; top: -0.12em; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-size: clamp(140px, 22vw, 300px); line-height: 1; color: var(--ink); opacity: 0.06;
  will-change: transform;
}
.has-ghost .section__inner > :not(.ghost) { position: relative; z-index: 1; }
[data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .lockup.reveal .shape, .js .lockup.reveal span { opacity: 1; transform: none; clip-path: none; transition: none; }
  .site-header, .site-header__inner { transition: none; }
}

/* Photos and the Writing section */
.portrait { display: block; flex: 0 1 300px; min-width: 0; max-width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait--sm { max-width: 240px; }
.photo { display: block; overflow: hidden; border-radius: 4px; }
.photo img { display: block; width: 100%; height: auto; }
.photo--wide img { aspect-ratio: 2 / 1; object-fit: cover; }
.photo figcaption { font-size: 14px; line-height: 1.5; color: var(--slate); padding: 10px 2px 0; }
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px 32px; border-top: 2px solid var(--ink); padding-top: 32px; }
.post { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.post__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--snow); }
.post__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.post:hover .post__thumb img { transform: scale(1.03); }
.post__date { font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--slate); }
.post__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.post__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--type-m); line-height: 1.2; text-wrap: balance; }
.post__title a { color: inherit; text-decoration: none; box-shadow: inset 0 -2px 0 var(--yellow); }
.post__title a:hover { box-shadow: inset 0 -0.6em 0 var(--yellow); }
.post__excerpt { font-size: 16px; line-height: 1.55; }

/* Client logo row. Items with --text are wordmarks standing in until a logo file arrives. */
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; list-style: none; margin: 0; padding: 0; }
.logos__item { display: flex; align-items: center; height: 30px; color: var(--ink); }
.logos__item--tall { height: 50px; }
.logos__item img { display: block; height: 100%; width: auto; max-width: 180px; object-fit: contain; }
@media (max-width: 700px) { .logos { gap: 16px 32px; } .logos__item { height: 30px; } }

/* Homepage service cards, matching the Writing grid */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px 32px; border-top: 2px solid var(--ink); padding-top: 32px; }
.card { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: inherit; }
.card:hover { text-decoration: none; }
.card:hover .card__name { box-shadow: inset 0 -3px 0 var(--yellow); }
.card__fig { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--snow); border-radius: 4px; overflow: hidden; }
.card__fig svg { position: absolute; top: 24px; left: 24px; width: calc(100% - 48px); height: calc(100% - 48px); }
.card__name { align-self: flex-start; margin-top: 4px; font-family: var(--font-display); text-transform: uppercase; font-size: var(--type-m); line-height: 1.15; }
.card__line { font-size: 16px; line-height: 1.55; }
.card__cap { font-size: 13px; line-height: 1.5; color: var(--slate); }

/* Homepage featured case study: photo with the data card over it, story beside */
.case { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: center; }
.case__visual { flex: 1 1 420px; min-width: 0; position: relative; padding-bottom: 48px; }
.case__photo { display: block; overflow: hidden; border-radius: 4px; margin-right: 40px; }
.case__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.case__visual .record-card { position: absolute; right: 0; bottom: 0; width: min(300px, 72%); padding: 16px 18px; gap: 8px; background: var(--white); border-radius: 4px; box-shadow: 0 16px 40px rgba(38, 59, 73, 0.18); }
.case__visual .record-card dd { white-space: nowrap; }
.case__visual .record-card__title { font-size: var(--type-s); }
.case__visual .record-card dl div { padding-block: 7px; }
.case__body { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

.case__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--type-l); line-height: 1.15; text-wrap: balance; }
@media (max-width: 560px) {
  .case__visual { padding-bottom: 0; }
  .case__photo { margin-right: 0; }
  .case__visual .record-card { position: static; width: auto; margin-top: 16px; box-shadow: none; }
}

/* Client logos scroll continuously; the second track is a copy so the loop is seamless.
   --marquee-gap sets the space between logos, and between the end of one track and the start of the next. */
.marquee { --marquee-gap: 56px; display: flex; overflow: hidden; gap: var(--marquee-gap); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { flex: none; flex-wrap: nowrap; gap: var(--marquee-gap); animation: chick-marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes chick-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--marquee-gap))); } }
/* A shorter, faster row beside the consultancy copy, and a longer row that moves at the homepage row's speed */
.marquee--sm { --marquee-gap: 36px; }
.marquee--sm .marquee__track { animation-duration: 20s; }
.marquee--sm .logos__item { height: 30px; }
.marquee--sm .logos__item--tall { height: 44px; }
.marquee--slow .marquee__track { animation-duration: 56s; }
/* Reduced motion: every row (whatever its modifier) stands still and wraps onto more lines, without the copy */
@media (prefers-reduced-motion: reduce) {
  .marquee { flex-wrap: wrap; mask-image: none; -webkit-mask-image: none; }
  .marquee .marquee__track { animation: none; flex: 1 1 100%; min-width: 0; flex-wrap: wrap; row-gap: 20px; }
  .marquee .marquee__track[aria-hidden="true"] { display: none; }
}

/* Your questions: photo beside the stacked questions */
.qa-wrap { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; }
.qa-wrap__photo { flex: 1 1 300px; min-width: 0; max-width: 420px; display: block; overflow: hidden; border-radius: 4px; order: 2; }
@media (max-width: 900px) { .qa-wrap__photo { order: 0; } }
.qa-wrap__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.qa-wrap .qa { flex: 2 1 520px; min-width: 0; }
.qa-wrap .qa__row { flex-direction: column; gap: 8px; }
.qa-wrap .qa__q, .qa-wrap .qa__a { flex: 0 0 auto; max-width: 36em; }
.qa-cta { order: 3; flex: 1 1 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.qa-cta__text { font-size: 19px; line-height: 1.5; color: var(--mist-2); max-width: 26em; }
/* Wide screens: the call to action sits under the photo, beside the answers */
@media (min-width: 901px) {
  .qa-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 36px; }
  .qa-wrap .qa { grid-column: 1; grid-row: 1 / span 2; }
  .qa-wrap__photo { grid-column: 2; grid-row: 1; max-width: none; }
  .qa-wrap .qa-cta { grid-column: 2; grid-row: 2; }
}

/* A plain label and logo row, used beside the consultancy copy */
.poc { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }

/* Secondary nav: the page's sections, pinned under the header. On phones the list folds into a dropdown,
   but only once site.js has run (.js); without it the links are listed in full. */
.subnav { position: sticky; top: 68px; z-index: 40; background: var(--ink); color: var(--snow); border-top: 1px solid rgba(244, 246, 248, 0.35); box-shadow: 0 12px 32px rgba(38, 59, 73, 0); transition: box-shadow 0.25s ease; }
.subnav.is-pinned { box-shadow: 0 12px 32px rgba(38, 59, 73, 0.3); }
.subnav__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0 40px; }
.subnav__list { display: flex; flex-wrap: wrap; gap: 0 40px; }
.subnav__toggle { display: none; }
.subnav a { display: inline-block; padding: 16px 0 13px; font-family: var(--font-display); text-transform: uppercase; font-size: var(--type-s); line-height: 1; letter-spacing: 0.02em; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow 0.2s ease; }
.subnav a:hover, .subnav a:focus-visible, .subnav a.is-active { text-decoration: none; box-shadow: inset 0 -2px 0 var(--yellow); }
.js .subnav a { animation: chick-drop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js .subnav a:nth-child(2) { animation-delay: 0.08s; }
.js .subnav a:nth-child(3) { animation-delay: 0.16s; }
@keyframes chick-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .js .subnav__toggle {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 44px; padding: 0;
    background: none; border: 0; color: inherit; cursor: pointer; font: inherit; text-align: left;
  }
  .subnav__current { font-family: var(--font-display); text-transform: uppercase; font-size: var(--type-s); line-height: 1; letter-spacing: 0.02em; box-shadow: inset 0 -2px 0 var(--yellow); padding-bottom: 3px; }
  /* a chevron, so the section picker reads as a dropdown rather than a second menu */
  .subnav__burger { position: relative; width: 10px; height: 10px; flex: none; margin-top: -4px; }
  .subnav__burger span { display: none; }
  .subnav__burger::before { content: ""; position: absolute; inset: 0; border-right: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow); transform: rotate(45deg); transition: transform 0.25s ease; }
  .subnav.is-open .subnav__burger::before { transform: translateY(5px) rotate(-135deg); }
  .subnav__list { flex-direction: column; flex-basis: 100%; gap: 0; padding-bottom: 8px; }
  .js .subnav__list { display: none; }
  .js .subnav.is-open .subnav__list { display: flex; }
  .subnav a { padding: 14px 0; font-size: var(--type-s); border-top: 1px solid rgba(244, 246, 248, 0.15); box-shadow: none; }
  .subnav a:hover, .subnav a.is-active { box-shadow: none; color: var(--yellow); }
  .js .subnav a { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .js .subnav a { animation: none; } }
/* Without JavaScript the bar is not measured against the header, so it scrolls with the page instead of pinning */
html:not(.js) .subnav { position: static; }

/* A quiet note with a small thumbnail, for a talk or mention */
.note { display: flex; align-items: center; gap: 16px; padding-top: 8px; }
.note picture { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 4px; }
.note img { display: block; width: 100%; height: 100%; object-fit: cover; }
.note__text { font-size: 15px; line-height: 1.5; color: var(--slate); max-width: 34em; }
.note__label { display: block; margin-bottom: 2px; }

/* Social links as logos with a small label */
.social { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.social__link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--ink); }
.social__link svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.social__link:hover, .social__link:focus-visible { text-decoration: none; }
.social__link:hover span, .social__link:focus-visible span { box-shadow: inset 0 -2px 0 var(--yellow); }

/* Call to action at the end of a section */
.cta-row { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; padding-top: 24px; border-top: 2px solid var(--ink); }
.cta-row__lead { font-size: 18px; line-height: 1.5; font-weight: 400; max-width: 36em; }

/* Work page: cover cards for the case study index */
/* Six case studies: one row of six on wide screens, two rows of three in between, three rows of two on phones */
.case-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
@media (min-width: 1180px) { .case-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.case-card { display: flex; flex-direction: column; gap: 10px; color: inherit; min-width: 0; }
.case-card:hover, .case-card:focus-visible { text-decoration: none; }
.case-card__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--ink); }
.case-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.case-card:hover .case-card__img img { transform: scale(1.04); }
.case-card__name { align-self: flex-start; margin-top: 4px; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--type-m); line-height: 1.15; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow 0.2s ease; }
.case-card:hover .case-card__name, .case-card:focus-visible .case-card__name { box-shadow: inset 0 -2px 0 var(--yellow); }
.case-card__line { font-size: 14px; line-height: 1.45; color: var(--slate); }
@media (max-width: 520px) { .case-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } .case-card__name { font-size: var(--type-s); } }

/* Work page: a wide picture of the work under each case study heading */
.case-feature { display: block; }
.case-feature img { display: block; width: 100%; height: auto; }
/* Screenshots of the work float on the page with the shared device shadow (the token is at the top of the file) */
.case-feature img, .agency-work__fig img { filter: var(--shadow-device); }

/* Work page: a scrolling reel of screens at the end of each case study */
.reel { display: flex; flex-direction: column; gap: 14px; }
.reel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.reel__controls { display: flex; gap: 8px; }
.reel__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease; }
.reel__btn svg { width: 20px; height: 20px; }
.reel__btn:hover:not([aria-disabled="true"]), .reel__btn:focus-visible { background: var(--ink); color: var(--snow); }
.reel__btn[aria-disabled="true"] { opacity: 0.25; cursor: default; }
.reel__btn[aria-disabled="true"]:focus-visible { opacity: 0.6; } /* still faded, but with a focus ring that can be seen */
html:not(.js) .reel__controls { display: none; } /* the arrows need site.js; the track still scrolls without it */
.reel__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 40px; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.reel__track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.reel__item { flex: none; margin: 0; height: clamp(300px, 34vw, 460px); scroll-snap-align: start; }
.reel__item img { display: block; height: 100%; width: auto; filter: drop-shadow(0 24px 28px rgba(38, 59, 73, 0.22)) drop-shadow(0 8px 10px rgba(38, 59, 73, 0.14)) drop-shadow(0 1px 2px rgba(38, 59, 73, 0.20)); }
.agency-work__fig { margin: 8px 0 0; max-width: 720px; }
.agency-work__fig img { display: block; width: 100%; height: auto; }
@media (max-width: 520px) { .reel__controls { display: none; } }

/* Inner page heroes: tiles that move between a few arrangements, in the homepage's style (site.js builds the tiles) */
.page-hero__aside--fig { align-self: center; }
.tiles-fig { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.tiles-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.tiles-fig rect { fill: var(--snow); transition: transform 1.1s cubic-bezier(0.3, 0.8, 0.2, 1), fill 0.6s ease, opacity 0.6s ease; }
.tiles-fig__tiles.is-live rect { transition: fill 0.6s ease, opacity 0.6s ease; }
/* Labels hold two lines, so a long "Name · descriptor" can wrap without moving the figure */
.tiles-fig__label { color: var(--mist-3); line-height: 1.5; min-height: 3em; text-wrap: balance; transition: opacity 0.25s ease; }
.tiles-fig__label span { display: inline-block; }
.tiles-fig__label.is-swapping { opacity: 0; }
@media (max-width: 700px) { .page-hero__aside--fig { display: none; } }
@media (prefers-reduced-motion: reduce) { .tiles-fig rect, .tiles-fig__label { transition: none; } }

/* Case study pages: the banner overlaps the bottom of the hero, and the page ends with previous and next links */
.case-hero .page-hero__inner { padding-bottom: 168px; }
.case-hero__crumb { color: var(--mist-3); }
.case-hero__crumb a { color: inherit; }
/* The crumb is a breadcrumb nav with a list inside; the list stays on one line, as plain text would */
.case-hero__crumb ol, .case-hero__crumb li { display: inline; margin: 0; padding: 0; }
.case-hero__crumb a:hover { text-decoration: none; box-shadow: inset 0 -2px 0 var(--yellow); }
.case-body { padding-top: 0; }
.case-body .case-feature { position: relative; z-index: 2; margin-top: -120px; }
.case-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; border-top: 2px solid var(--ink); margin-top: 24px; }
.case-pager__head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 0 24px; }
.case-pager__title { margin: 0; }
.case-pager__link { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 24px; color: inherit; }
.case-pager__link:hover, .case-pager__link:focus-visible { text-decoration: none; }
.case-pager__link--next { grid-template-columns: minmax(0, 1fr) 168px; text-align: right; }
.case-pager__link--next .case-pager__img { order: 2; }
.case-pager__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--ink); }
.case-pager__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.case-pager__link:hover .case-pager__img img { transform: scale(1.04); }
.case-pager__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.case-pager__link--next .case-pager__text { align-items: flex-end; }
.case-pager__name { align-self: flex-start; font-family: var(--font-display); text-transform: uppercase; font-size: var(--type-l); line-height: 1.1; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow 0.2s ease; }
.case-pager__link--next .case-pager__name { align-self: flex-end; }
.case-pager__link:hover .case-pager__name, .case-pager__link:focus-visible .case-pager__name { box-shadow: inset 0 -3px 0 var(--yellow); }
.case-pager__line { max-width: 34ch; font-size: 14px; line-height: 1.45; color: var(--slate); }
@media (max-width: 700px) {
  .case-hero .page-hero__inner { padding-bottom: 96px; }
  .case-body .case-feature { margin-top: -64px; }
}
/* Below 900px two links side by side leave too narrow a text column, so they stack */
@media (max-width: 900px) {
  .case-pager { grid-template-columns: 1fr; row-gap: 24px; }
  .case-pager__head { padding-bottom: 0; }
  .case-pager__link, .case-pager__link--next { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; text-align: left; }
  .case-pager__link--next .case-pager__img { order: 0; }
  .case-pager__link--next .case-pager__text, .case-pager__link--next .case-pager__name { align-items: flex-start; align-self: flex-start; }
  .case-pager__name { font-size: var(--type-m); }
}

/* Side index (desktop): the page's sections listed in a column that stays in view, with a bar that fills as
   each section is read. site.js builds it from the section bar, which it replaces on wide screens, and puts it
   just before <main> so it comes after the header in the tab order. Out of range it fades out but stays
   focusable: tabbing into it shows it, and site.js brings the first section up beside it. */
.side-index { display: none; }
@media (min-width: 1100px) {
  .js .has-side-index .subnav { display: none; }
  .js .has-side-index main > section.is-indexed > .container { padding-left: calc(var(--gutter) + 232px); }
  .side-index {
    display: flex; flex-direction: column; gap: 4px; position: fixed; z-index: 30; width: 196px;
    left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); top: 120px;
    opacity: 0; pointer-events: none; transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
    color: var(--ink); --focus: var(--ink);
  }
  .side-index.is-shown, .side-index:focus-within { opacity: 1; pointer-events: auto; transform: none; }
  .side-index__label { margin-bottom: 10px; color: var(--slate); }
  .side-index.is-dark .side-index__label { color: var(--mist-3); }
  .side-index a { display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: 14px; padding-block: 8px; color: inherit; opacity: 0.8; transition: opacity 0.2s ease; }
  .side-index a:hover, .side-index a.is-active, .side-index a:focus-visible { opacity: 1; text-decoration: none; }
  .side-index.is-dark { color: var(--snow); --focus: var(--yellow); }
  .side-index__bar { position: relative; display: block; border-radius: 2px; background: currentColor; opacity: 0.25; }
  .side-index a.is-active .side-index__bar, .side-index a:hover .side-index__bar { opacity: 1; background: rgba(127, 150, 168, 0.35); }
  .side-index__fill { position: absolute; inset: 0; border-radius: 2px; background: var(--yellow); transform-origin: top; transform: scaleY(var(--read, 0)); }
  .side-index__name { font-family: var(--font-display); text-transform: uppercase; font-size: var(--type-s); line-height: 1.15; }
}
@media (prefers-reduced-motion: reduce) { .side-index, .side-index.is-shown { transition: none; transform: none; } }

/* Work index: sector and service tag on each case card, and a row of headline results */
.case-card__tag { margin-top: 4px; }
.case-card__tag + .case-card__name { margin-top: 0; }
.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 2px solid var(--ink); padding-top: 28px; }
@media (max-width: 859px) { .results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .results { grid-template-columns: minmax(0, 1fr); } }
.result { display: flex; flex-direction: column; gap: 10px; color: inherit; }
.result:hover { text-decoration: none; }
.result__num { font-family: var(--font-display); text-transform: uppercase; font-size: var(--type-l); line-height: 1.05; }
.result__text { font-size: 16px; line-height: 1.5; }
.result__client { align-self: flex-start; margin-top: auto; padding-top: 6px; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow 0.2s ease; }
.result:hover .result__client, .result:focus-visible .result__client { box-shadow: inset 0 -2px 0 var(--yellow); }

/* For agencies: the service list and the three ways of working */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 40px; border-top: 2px solid var(--ink); }
.service-item { display: flex; flex-direction: column; gap: 8px; padding: 24px 0 28px; border-bottom: 1px solid var(--rule); }
.service-item__name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--type-m); line-height: 1.15; }
.service-item__text { font-size: 16px; line-height: 1.55; }
.models { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 40px; border-top: 2px solid var(--ink); padding-top: 32px; }
.model { display: flex; flex-direction: column; gap: 12px; }
.model__mark { display: block; width: 22px; height: 30px; }
.model__name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--type-l); line-height: 1.1; }
.model__text { font-size: 17px; line-height: 1.55; max-width: 26em; }

/* For agencies: the three areas of expertise, each with a linked example */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px 40px; }
.pillar { display: flex; flex-direction: column; gap: 14px; border-top: 2px solid var(--ink); padding-top: 24px; }
.pillar__name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--type-l); line-height: 1.1; }
.pillar__text { font-size: 17px; line-height: 1.55; }
.pillar__eg { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); color: inherit; }
.pillar__eg:hover { text-decoration: none; }
.pillar__eg-text { font-size: 15px; line-height: 1.5; font-weight: 400; align-self: flex-start; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow 0.2s ease; }
.pillar__eg:hover .pillar__eg-text, .pillar__eg:focus-visible .pillar__eg-text { box-shadow: inset 0 -2px 0 var(--yellow); }
.reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; }
.reason { display: flex; flex-direction: column; gap: 14px; border-top: 2px solid var(--yellow); padding-top: 20px; }
.reason__n { margin: 0; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--yellow); }
.reason__name { margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--type-m); line-height: 1.15; text-wrap: balance; }
@media (min-width: 560px) { .reason__name { min-height: 2.3em; } }  /* titles take two lines so the four bodies start level */
.reason__text { margin: 0; font-size: 17px; line-height: 1.6; color: var(--mist-2); }
.testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px 64px; border-top: 1px solid rgba(244, 246, 248, 0.18); padding-top: 32px; }
.testimonial { margin: 0; padding-left: 28px; display: flex; flex-direction: column; gap: 18px; }
.testimonial blockquote { margin: 0; }
.testimonial p { position: relative; margin: 0; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.4; font-weight: 300; text-wrap: pretty; }
.testimonial p::before { content: "\201C"; position: absolute; left: -30px; top: -0.08em; font-family: var(--font-body); font-weight: 500; font-size: 2em; line-height: 1; color: var(--yellow); }
.testimonial p::after { content: "\201D"; }
.testimonial figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.5; }
.testimonial__name { font-weight: 500; }
.testimonial__role { color: var(--mist-3); }
.testimonial--light p::before { color: var(--coral); }
.testimonial--light .testimonial__role { color: var(--slate); }
/* Home quotes: one at a time once site.js has set them up; stacked in one grid cell so the height never jumps */
.testimonials.is-carousel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 32px; }
.testimonials.is-carousel .testimonials__stage { grid-column: 1 / -1; }
.testimonials.is-carousel .testimonial { gap: 10px; }
.testimonials.is-carousel figcaption { flex-direction: row; flex-wrap: wrap; gap: 0 10px; }
.testimonials.is-carousel .testimonial__role::before { content: "\00B7"; margin-right: 10px; color: var(--mist-3); }
@media (max-width: 600px) { .testimonials.is-carousel { grid-template-columns: 1fr; } .testimonials.is-carousel figcaption { flex-direction: column; } .testimonials.is-carousel .testimonial__role::before { content: none; } }
.testimonials__stage { display: grid; }
.testimonials__stage > .testimonial { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s; }
.testimonials__stage > .testimonial.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.6s ease 0.2s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
.testimonials.is-carousel .testimonial p { font-size: clamp(21px, 2vw, 28px); line-height: 1.35; max-width: 34em; }
.testimonials__nav { display: flex; gap: 10px; padding-left: 28px; }
.testimonials__bar { display: block; width: 56px; padding: 8px 0; background: none; border: 0; cursor: pointer; }
.testimonials__bar:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 2px; }
.testimonials__bar span { display: block; height: 3px; border-radius: 2px; background: rgba(201, 211, 222, 0.25); position: relative; overflow: hidden; }
.testimonials__bar span::after { content: ""; position: absolute; inset: 0; background: var(--yellow); transform: scaleX(0); transform-origin: left; }
.testimonials__bar.is-active span::after { animation: chick-fill var(--dur, 7s) linear both; }
.testimonials.is-held .testimonials__bar.is-active span::after, .testimonials.is-still .testimonials__bar.is-active span::after { animation: none; transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .testimonials__stage > .testimonial { transition: none; transform: none; } }

/* A logo that is not available as a file yet, set as a wordmark */
.logos__item--text { font-family: var(--font-display); text-transform: uppercase; font-size: var(--type-m); line-height: 1; letter-spacing: 0.02em; white-space: nowrap; }

/* Case study findings: charts redrawn from the client's own figures, in place of a reel of screens.
   Ink carries the data, yellow the headline share, coral what needed attention. Each chart has a
   visually hidden table with the same figures for screen readers. */
.findings { display: flex; flex-direction: column; gap: 14px; }
.findings__label { min-height: 44px; display: flex; align-items: center; }
.findings__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.finding { min-width: 0; display: flex; flex-direction: column; gap: 28px; padding: 28px 28px 32px; background: var(--snow); border-radius: 4px; }
.finding figcaption { display: flex; flex-direction: column; gap: 8px; }
.finding__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--type-m); line-height: 1.15; }
.finding__text { font-size: 15px; line-height: 1.55; font-weight: 400; color: var(--slate); max-width: 34em; }
.finding__chart { margin-top: auto; }
@media (max-width: 860px) { .findings__grid { grid-template-columns: minmax(0, 1fr); } }
/* Charts side by side start level: each card's caption and chart sit on rows shared with its neighbour */
@supports (grid-template-rows: subgrid) {
  .finding { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 28px; }
  .finding__chart { margin-top: 0; }
}
@media (max-width: 480px) { .finding { padding: 22px 18px 26px; gap: 24px; } }

/* Columns on a 1-10 scale, with a marker between 5 and 6 */
.colchart { --h: 184px; }
.colchart__plot { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: end; height: var(--h); border-bottom: 1px solid var(--mist-3); }
.colchart__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.colchart__bar { display: block; width: min(24px, 62%); height: max(2px, calc(var(--v) * (var(--h) - 26px))); background: var(--ink); border-radius: 4px 4px 0 0; }
.colchart__col--alert .colchart__bar { background: var(--coral); }
.colchart__val { font-family: var(--font-mono); font-size: 12px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.colchart__axis { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); padding-top: 8px; text-align: center; font-family: var(--font-mono); font-size: 12px; line-height: 1; color: var(--slate); }
.colchart__mark { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--slate); }
.colchart__mlabel, .colchart__note { position: absolute; font-family: var(--font-mono); font-size: 12px; line-height: 1.35; letter-spacing: 0.04em; color: var(--slate); }
.colchart__mlabel { top: 0; left: calc(50% + 10px); right: 0; max-width: 20em; }
.colchart__note { left: 65%; bottom: 26px; right: 0; padding: 0 0 2px 8px; border-left: 1px solid var(--coral); max-width: 12em; color: var(--ink); }

/* The 100-square grid beside its headline share and key */
.waffle { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 28px; }
.waffle .chart--waffle { flex: none; width: clamp(150px, 40%, 216px); }
.waffle__side { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.waffle__num { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(56px, 5.4vw, 76px); line-height: 0.95; }
.waffle__lead { font-size: 15px; line-height: 1.5; font-weight: 400; }
.key { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.key li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.key__swatch { width: 12px; height: 12px; }
.key__swatch--yellow { background: var(--yellow); }
.key__swatch--mist { background: var(--mist); }
.key__swatch--deep { background: var(--mist-deep); }
.key__val { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .waffle .chart--waffle { width: min(216px, 100%); } }

/* Horizontal bars on a track that stands for the whole scale; --mid adds a notch at the halfway point,
   drawn behind the fill so a bar that passes it stays one solid mark */
.bars { display: flex; flex-direction: column; gap: 16px; }
.bars__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; }
.bars__label { font-family: var(--font-mono); font-size: 12px; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); overflow-wrap: anywhere; }
.bars__val { font-family: var(--font-display); font-size: var(--type-s); line-height: 1; color: var(--ink); }
.bars__track { grid-column: 1 / -1; position: relative; display: block; height: 12px; background: var(--mist-2); border-radius: 0 4px 4px 0; }
.bars__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); background: var(--ink); border-radius: 0 4px 4px 0; }
.bars--mid .bars__track::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--snow); }
/* Three labels: start, exact middle, end */
.bars__axis { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); margin-top: -6px; font-family: var(--font-mono); font-size: 12px; line-height: 1; color: var(--slate); }
.bars__axis > :first-child { justify-self: start; }
.bars__axis > :last-child { justify-self: end; }

/* Print (and save as PDF): every section prints in full, whether or not it has scrolled into view, as black
   text on white with no navigation, animated figures or moving logo rows. Charts print fully drawn. */
@media print {
  @page { margin: 16mm 14mm; }
  html { scroll-padding-top: 0; }
  *, *::before, *::after { transition: none !important; }
  body, .bg-ink, .bg-snow, .bg-white, .site-header, .site-footer, .finding { background: #fff !important; color: #000; }
  .bg-ink *, .site-header *, .site-footer * { color: #000 !important; }
  .muted, .chart-cap, .finding__text, .case-card__line, .case-pager__line, .post__date, .photo figcaption { color: #333; }
  .skip-link, .menu-toggle, .site-nav, .subnav, .side-index, .journey, .page-hero__aside--fig,
  .marquee__track[aria-hidden="true"], .reel__controls, .testimonials__nav, .ghost { display: none !important; }
  .site-header { position: static; box-shadow: none; }
  .site-header__inner { padding-block: 0 12px; }
  .section, .section--md, .page-hero__inner, .home-hero__inner { padding-block: 28px; }
  .case-hero .page-hero__inner { padding-bottom: 28px; }
  .case-body .case-feature { margin-top: 0; }
  /* Scroll reveals and chart cells: shown as they are once played */
  .js .reveal, .js .lockup.reveal span, .js .subnav a { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .js .lockup.reveal .shape { clip-path: none !important; transition: none !important; }
  svg.is-armed :is(circle, rect) { opacity: 1 !important; transform: none !important; animation: none !important; }
  /* Logo rows stand still and wrap; the copy made for the seamless loop is hidden above */
  .marquee { flex-wrap: wrap; mask-image: none; -webkit-mask-image: none; }
  .marquee .marquee__track { animation: none; flex: 1 1 100%; min-width: 0; flex-wrap: wrap; row-gap: 20px; }
  /* Reels: every screen, smaller, wrapping onto the page */
  .reel__track { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
  .reel__item { height: 160px; }
  /* Quotes: all of them, one after another */
  .testimonials__stage { display: flex; flex-direction: column; gap: 24px; }
  .testimonials__stage > .testimonial { opacity: 1; visibility: visible; transform: none; }
  /* Buttons print as outlined labels, as their fills are dropped with the other backgrounds */
  .btn { background: none !important; color: #000 !important; border: 1px solid #000; min-height: 0; padding: 6px 12px; }
  h1, h2, h3, .record__label { break-after: avoid; }
  .record__row, .case-card, .post, .result, .finding, figure, .qa__row, .reason, .service-item, .model, .pillar { break-inside: avoid; }
}