/* Self-hosted variable subsets of the two Google families. Serving them from
   our own origin drops the chained fonts.googleapis.com -> fonts.gstatic.com
   round trip that used to block first paint. Ukrainian needs `cyrillic`;
   `cyrillic-ext` is here only for the hryvnia sign (U+20B4) in the stat rows.
   Regenerate by re-fetching the css2 URL in git history and re-subsetting. */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/unbounded-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/unbounded-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: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-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;
}

/* Crossfade between pages instead of a white flash (Chromium; graceful fallback elsewhere) */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

:root {
  /* Surfaces. One near-black base and three raised steps off it. */
  --ink: #090909;
  --ink-1: #101012;
  --ink-2: #16161a;
  --ink-3: #1d1d22;
  --paper: #f1efe9;
  --white: #fbfaf7;

  /* Red, split by job: #a8161d on --ink is 3.5:1 — enough for large
     numerals, not for small text. Each token states where it may go. */
  --red: #a8161d;             /* button fills; white text on them is 7.3:1 */
  --red-bright: #c7222b;      /* numerals and accents at 24px+ — 3.5:1 */
  --red-on-dark: #e14a52;     /* kickers, small labels, meta — 5.0:1 */
  --red-glow: rgba(199, 34, 43, 0.35);

  --txt: #eceae6;
  --txt-dim: #a3a09b;
  --txt-faint: #726f6a;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --pos: #3fb27f;             /* percentage gains in case analytics */

  /* Ink on paper, for the proof strip — the only light surface on the site. */
  --paper-dim: #5d5a54;
  --paper-line: rgba(9, 9, 9, 0.12);

  --display: "Unbounded", system-ui, sans-serif;
  --body: "Manrope", system-ui, sans-serif;

  /* Display type. All clamp, so no per-breakpoint overrides. */
  --d-1: clamp(2.375rem, 4.6vw, 3.875rem);    /* 38-62  home h1 */
  --d-2: clamp(1.875rem, 3.6vw, 3rem);        /* 30-48  page h1 */
  --d-3: clamp(1.75rem, 3.2vw, 2.75rem);      /* 28-44  section h2 */
  --d-4: clamp(1.5rem, 2.7vw, 2.125rem);      /* 24-34  case h3 */
  --d-5: clamp(1.25rem, 2vw, 1.5rem);         /* 20-24  sub-headings */
  --d-6: 1.0625rem;                           /* 17     block headings */
  --num-lg: clamp(1.875rem, 3.6vw, 2.75rem);  /* 30-44  teaser numerals */
  --num: clamp(1.625rem, 2.6vw, 2.25rem);     /* 26-36  metric cards */
  --num-sm: clamp(1.375rem, 2.4vw, 1.875rem); /* 22-30  KPI row */

  /* Text. Nothing on the site goes below --t-xs. */
  --t-xs: 0.75rem;      /* 12  caps labels only */
  --t-sm: 0.8125rem;    /* 13  meta, captions */
  --t-md: 0.875rem;     /* 14  secondary body, card copy */
  --t-base: 0.9375rem;  /* 15  body */
  --t-lg: 1.0625rem;    /* 17  lede */
  --t-xl: clamp(1.0625rem, 1.5vw, 1.25rem);

  --measure: 62ch;
  --measure-narrow: 46ch;
  --measure-display: 22ch;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --space-3xs: 0.5rem;
  --space-2xs: 0.75rem;
  --space-xs: 1rem;
  --space-sm: 1.5rem;
  --space-md: clamp(1.75rem, 3vw, 2.5rem);
  --space-lg: clamp(2.25rem, 5vw, 4rem);
  --space-xl: clamp(2.75rem, 6vw, 5rem);
  /* Was 8rem, which crushed every section on a phone. */
  --space-section: clamp(3.5rem, 7vw, 6rem);

  --track-caps: 0.08em;

  --max: 1280px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --header-height: 76px;

  --ease: cubic-bezier(0.2, 0.72, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Matches the sticky header, so a #hash landing clears it without arithmetic. */
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--txt);
  background: var(--ink);
  font-family: var(--body);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Both, not just ul: case takeaways are an <ol> numbered by a CSS counter,
   and a native marker beside it would double the numbering. */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

::selection {
  color: var(--white);
  background: var(--red);
}

:focus-visible {
  outline: 2px solid var(--red-on-dark);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  color: var(--white);
  background: var(--red);
  transform: translateY(-160%);
  transition: transform 180ms var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ------------------------------------------------------------------ *
 * Layout
 * ------------------------------------------------------------------ */

.container {
  width: min(100%, calc(var(--max) + 2 * var(--gut)));
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sec {
  padding-block: var(--space-section);
}

/* One step up off the base, bounded by hairlines — how a dark site separates
   two stacked sections without resorting to a shadow. */
.sec--raised {
  border-block: 1px solid var(--line);
  background: var(--ink-1);
}


h1,
h2,
h3 {
  color: var(--white);
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.03em;
}

h1 em,
h2 em,
h3 em {
  color: var(--red-bright);
  font-style: normal;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--red-on-dark);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  line-height: 1.2;
  text-transform: uppercase;
}

.kicker::before {
  width: 1.375rem;
  height: 1px;
  background: currentColor;
  content: "";
}

.sec-head {
  margin-bottom: var(--space-lg);
}

.sec-head h2 {
  margin-top: 1rem;
  font-size: var(--d-3);
  line-height: 1.12;
}

/* Section subtitle. It sits directly under the h2 now, so it has to outrank
   the body copy further down the section instead of reading identically to it:
   larger, brighter, and running the full width of the title above it. */
.sec-sub {
  margin-top: 1rem;
  color: var(--txt);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: balance;
}

/* The lone inline link in a subtitle sat two steps down the scale from the
   text around it, which read as a mistake rather than a hierarchy cue. */
.sec-sub .text-link {
  font-size: inherit;
}

.sec-head-cta {
  margin-top: 1.5rem;
}

/* ------------------------------------------------------------------ *
 * Buttons, links, chips
 * ------------------------------------------------------------------ */

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.8125rem 1.375rem;
  border: 1px solid var(--red);
  border-radius: var(--r-pill);
  color: var(--white);
  background: var(--red);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease),
    box-shadow 200ms var(--ease), color 200ms var(--ease);
}

.button:hover {
  border-color: var(--red-bright);
  background: var(--red-bright);
  box-shadow: 0 8px 30px -8px var(--red-glow);
}

.button--small {
  min-height: 44px;
  padding: 0.625rem 1.125rem;
  font-size: var(--t-sm);
}

.button--ghost {
  border-color: var(--line-strong);
  color: var(--txt);
  background: transparent;
}

.button--ghost:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.5rem;
  color: var(--red-on-dark);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.3;
  transition: gap 200ms var(--ease), color 200ms var(--ease);
}

.text-link:hover {
  gap: 0.875rem;
  color: var(--white);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--txt-dim);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--t-sm);
  font-weight: 500;
}

.chip b {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-bright);
  box-shadow: 0 0 0 4px rgba(199, 34, 43, 0.18);
}

.tag {
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--txt-dim);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
}

.tag--red {
  border-color: rgba(199, 34, 43, 0.45);
  color: #e8656c;
  background: rgba(168, 22, 29, 0.12);
}

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 9, 9, 0.72);
  backdrop-filter: blur(14px);
}

/* The open menu is an opaque full-screen panel; blurring behind it costs a
   repaint on every scroll for nothing. */
.site-header.is-menu-open {
  background: var(--ink);
  backdrop-filter: none;
}

.header-inner {
  display: flex;
  height: var(--header-height);
  align-items: center;
  gap: 2rem;
}

.brand {
  position: relative;
  z-index: 102;
  flex: 0 0 auto;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--white);
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand span {
  color: var(--red-bright);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
}

.site-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding-inline: 0.875rem;
  border-radius: var(--r-pill);
  color: var(--txt-dim);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}

.site-nav a:hover {
  color: var(--txt);
  background: rgba(255, 255, 255, 0.05);
}

.site-nav a.is-active {
  color: var(--white);
  background: rgba(255, 255, 255, 0.07);
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  margin: 6px auto;
  border-radius: 2px;
  background: currentColor;
  transition: transform 200ms var(--ease);
}

.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3.75px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* ------------------------------------------------------------------ *
 * Home hero
 * ------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.875rem) clamp(3rem, 6vw, 5rem);
}

.hero::before {
  position: absolute;
  z-index: 0;
  inset: -30% -10% auto 30%;
  height: 120%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(168, 22, 29, 0.28), transparent 70%);
  filter: blur(30px);
  content: "";
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero h1 {
  max-width: var(--measure-display);
  margin-top: 1.5rem;
  font-size: var(--d-1);
  line-height: 1.08;
}

.hero-lede {
  max-width: var(--measure-narrow);
  margin-top: 1.375rem;
  color: var(--txt-dim);
  font-size: var(--t-lg);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.125rem;
}

.hero-note {
  margin-top: 1.75rem;
  color: var(--txt-faint);
  font-size: var(--t-sm);
  font-weight: 500;
}

.hero-portrait {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--ink-2);
}

/* amina-portrait.webp is a 2:3 crop, taller than this 4:5 box, so `cover`
   trims it top and bottom. The mild desaturation pulls the magenta gel
   back far enough not to fight --red beside it. */
.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.03);
}

.hero-portrait::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(9, 9, 9, 0.85));
  content: "";
}

.hero-portrait figcaption {
  position: absolute;
  z-index: 2;
  right: 1.125rem;
  bottom: 1.125rem;
  left: 1.125rem;
  display: grid;
  gap: 0.125rem;
}

.hero-portrait figcaption span {
  color: var(--txt-dim);
  font-size: var(--t-xs);
}

.hero-portrait figcaption strong {
  color: var(--white);
  font-family: var(--display);
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Proof rail */
.rail {
  border-block: 1px solid var(--line);
  background: var(--ink-1);
}

.rail-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 2.5rem;
  padding-block: 1.25rem;
  color: var(--txt-dim);
  font-size: var(--t-md);
}

.rail-inner b {
  color: var(--red-on-dark);
  font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * Metric cards
 * ------------------------------------------------------------------ */

.metrics {
  padding-block: var(--space-lg);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.875rem;
}

.metric {
  padding: 1.625rem 1.5rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
  transition: border-color 250ms var(--ease), transform 250ms var(--ease);
}

.metric:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.metric strong {
  display: block;
  color: var(--white);
  font-family: var(--display);
  font-size: var(--num);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.metric strong span {
  color: var(--red-bright);
}

.metric p {
  margin-top: 0.75rem;
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.5;
}

.metric-studio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.125rem;
  margin-top: 0.875rem;
  padding: 1.25rem 1.625rem;
  border: 1px solid rgba(199, 34, 43, 0.3);
  border-radius: var(--r);
  background: linear-gradient(90deg, rgba(168, 22, 29, 0.16), rgba(168, 22, 29, 0.03));
}

.metric-studio strong {
  color: var(--white);
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.metric-studio p {
  color: var(--txt-dim);
  font-size: var(--t-md);
}

.metric-studio .button {
  margin-left: auto;
}

/* ------------------------------------------------------------------ *
 * About
 * ------------------------------------------------------------------ */

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.about-copy {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
}

.about-copy p {
  max-width: var(--measure);
  color: var(--txt-dim);
  font-size: var(--t-base);
  line-height: 1.7;
}

.about-copy p + p {
  margin-top: 1rem;
}

.principle-list {
  display: grid;
  gap: 0.75rem;
}

.principle-list li {
  padding: 1.375rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
}

.principle-list .n {
  color: var(--red-bright);
  font-family: var(--display);
  font-size: var(--t-xs);
}

.principle-list strong {
  display: block;
  margin: 0.5rem 0 0.375rem;
  color: var(--white);
  font-size: var(--t-md);
  font-weight: 600;
}

.principle-list p {
  max-width: var(--measure-narrow);
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.55;
}

/* ------------------------------------------------------------------ *
 * Case teaser cards
 *
 * The old teaser led with the 1080x1350 cover PNGs. Every one of those covers
 * was a title card — a headline baked into an image — so they are gone and
 * the card leads with its own number instead.
 * ------------------------------------------------------------------ */

.case-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.case-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
  transition: border-color 250ms var(--ease), transform 250ms var(--ease),
    box-shadow 250ms var(--ease);
}

.case-card:hover {
  border-color: rgba(199, 34, 43, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

.case-card-top {
  padding: 1.625rem 1.5rem 1.375rem;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(120% 100% at 0% 0%, rgba(168, 22, 29, 0.22), transparent 60%);
}

.case-card-top b {
  display: block;
  margin-top: 1.25rem;
  color: var(--white);
  font-family: var(--display);
  font-size: var(--num-lg);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}

.case-card-top small {
  display: block;
  margin-top: 0.625rem;
  color: var(--txt-dim);
  font-size: var(--t-md);
}

.case-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.375rem 1.5rem 1.5rem;
}

.case-card-body h3 {
  color: var(--white);
  font-family: var(--body);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}

.case-card-body > p {
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.55;
}

.case-card-mini {
  display: flex;
  /* Three figures with their labels are a hair too wide for a 320px card, so
     the last one drops to a second row rather than being clipped. */
  flex-wrap: wrap;
  gap: 0.75rem 1.125rem;
  margin-top: auto;
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
}

.case-card-mini div span {
  display: block;
  color: var(--white);
  font-family: var(--display);
  font-size: var(--t-base);
  font-weight: 500;
}

.case-card-mini div small {
  color: var(--txt-faint);
  font-size: var(--t-xs);
}

.teaser-more {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}

/* ------------------------------------------------------------------ *
 * Page hero (every subpage)
 * ------------------------------------------------------------------ */

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2.25rem, 4vw, 3.25rem);
  border-bottom: 1px solid var(--line);
}

.page-hero::before {
  position: absolute;
  z-index: 0;
  inset: -60% 40% auto -10%;
  height: 160%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(168, 22, 29, 0.22), transparent 70%);
  filter: blur(30px);
  content: "";
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--space-md) clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}

.page-title {
  max-width: var(--measure-display);
  font-size: var(--d-2);
  line-height: 1.08;
}

.page-subhead {
  max-width: 34ch;
  margin-top: 1.125rem;
  color: var(--red-on-dark);
  font-size: var(--t-base);
  font-weight: 600;
}

.page-copy {
  max-width: var(--measure-narrow);
  padding-top: 1.125rem;
  border-top: 1px solid var(--line);
  color: var(--txt-dim);
  font-size: var(--t-base);
}

/* ------------------------------------------------------------------ *
 * Case study module
 * ------------------------------------------------------------------ */

/* Switcher and pager, stacked and centred. Also the scroll target for a page
   turn, so the foot pager lands the reader back on the controls. */
.case-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.case-nav--foot {
  margin-top: var(--space-md);
  margin-bottom: 0;
}

/* .case-nav centres its children, which would otherwise size this mount to
   max-content — the pager's own `width: 100%` would then resolve against its
   content instead of the container, so it could never be full width and the
   fit loop below would never see an overflow to collapse. */
.case-nav [data-case-pager] {
  width: 100%;
}

.case-tabs {
  display: inline-flex;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.3125rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ink-1);
}

.case-tab {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.125rem;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--txt-dim);
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}

.case-tab span {
  font-size: var(--t-base);
  font-weight: 600;
}

.case-tab small {
  font-size: var(--t-sm);
  opacity: 0.75;
}

.case-tab:hover {
  color: var(--txt);
}

.case-tab.is-active {
  color: var(--white);
  background: var(--red);
}

/* The arrows sit either side of the numbers and the group is centred, but the
   track is the full container: .case-page-list may grow to all the room left
   over, and only shrinks when the numbers exceed it. That is what main.js
   measures — scrollWidth against clientWidth is a straight "do the numbers
   still fit?", which is why `…` is a width fallback and not a fixed rule. */
.case-pager {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
}

.case-page-list {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  justify-content: center;
  gap: var(--space-3xs);
  overflow: hidden;
}

.case-page {
  display: inline-flex;
  min-width: 44px;
  height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding-inline: 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--txt-dim);
  background: var(--ink-1);
  font: inherit;
  font-size: var(--t-base);
  font-weight: 600;
  /* Digits keep the same advance width, so stepping pages does not reflow the
     strip and re-trigger the fit loop. */
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 200ms var(--ease), border-color 200ms var(--ease),
    background 200ms var(--ease);
}

.case-page:hover:not(:disabled) {
  color: var(--txt);
  border-color: var(--line-strong);
}

.case-page.is-active {
  color: var(--red-on-dark);
  border-color: var(--red);
  background: linear-gradient(180deg, rgba(199, 34, 43, 0.14), rgba(199, 34, 43, 0.05));
}

.case-page--prev,
.case-page--next {
  padding-inline: 0;
  font-size: 1.375rem;
  line-height: 1;
}

.case-page:disabled {
  opacity: 0.3;
  cursor: default;
}

.case-page-gap {
  display: inline-flex;
  min-width: 1.75rem;
  height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--txt-faint);
}

/* "Instagram 4 кейси" will not sit on one line in half of a 360px row, and a
   wrapped count leaves the two pills different heights. Stack the label over
   the count instead. */
@media (max-width: 420px) {
  .case-tab {
    flex-direction: column;
    gap: 0.0625rem;
  }
}

/* At 320px the collapsed floor — ‹ 1 2 … 6 › — is 8px wider than the track.
   Buy the room from the gaps and the ellipsis rather than from the buttons:
   a pager you cannot reliably tap is worse than a tight one. */
@media (max-width: 400px) {
  .case-pager,
  .case-page-list {
    gap: 0.375rem;
  }

  .case-page-gap {
    min-width: 1.25rem;
  }
}

.case-panel[hidden],
.case[hidden] {
  display: none;
}

.case-list {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.case {
  overflow: hidden;
  /* Anchored from the nav and the home teaser; keep the landing clear of the
     sticky header. */
  scroll-margin-top: calc(var(--header-height) + 1rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
}

.case-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 2rem;
  align-items: start;
  padding: clamp(1.625rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(80% 120% at 0% 0%, rgba(168, 22, 29, 0.16), transparent 60%);
}

.case-tagrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.case-head h3 {
  max-width: 24ch;
  margin-top: 1.25rem;
  font-size: var(--d-4);
  line-height: 1.14;
}

.case-brief {
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.03);
}

.case-brief-label {
  margin-bottom: 0.625rem;
  color: var(--red-on-dark);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.case-brief p {
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.55;
}

.case-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.kpi {
  padding: 1.625rem clamp(1.25rem, 2.5vw, 2rem);
  border-right: 1px solid var(--line);
}

.kpi:last-child {
  border-right: 0;
}

.kpi dt {
  color: var(--white);
  font-family: var(--display);
  font-size: var(--num-sm);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}

.kpi dd {
  margin-top: 0.625rem;
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.45;
}

/* Lives inside the <dd> — a <dl><div> may only hold dt/dd, so the badge
   cannot be a sibling of them. */
.delta {
  display: block;
  width: fit-content;
  margin-top: 0.625rem;
  padding: 0.1875rem 0.5625rem;
  border: 1px solid rgba(63, 178, 127, 0.28);
  border-radius: var(--r-pill);
  color: var(--pos);
  background: rgba(63, 178, 127, 0.12);
  font-size: var(--t-xs);
  font-weight: 600;
}

.delta--flat {
  border-color: var(--line-strong);
  color: var(--txt-dim);
  background: rgba(255, 255, 255, 0.05);
}

.case-body {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  padding: clamp(1.625rem, 3.5vw, 2.5rem);
}

.block-head {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}

.block-head h4 {
  color: var(--white);
  font-family: var(--display);
  font-size: var(--d-6);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.block-head i {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.block-head em {
  color: var(--txt-faint);
  font-size: var(--t-xs);
  font-style: normal;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
}

.stats > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1rem;
  align-items: baseline;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--line);
}

.stats .label {
  color: var(--txt-dim);
  font-size: var(--t-md);
}

.stats .value {
  color: var(--white);
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.stats .change {
  min-width: 5.125rem;
  color: var(--pos);
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: right;
}

.stats .change--down {
  color: var(--txt-dim);
}

.stats .change--none {
  color: var(--txt-faint);
}

/* Label, figure and percentage on one row need ~110px of label to keep clear
   of the figure, and a 320px card has a third of that: the label runs under
   the number and the percentage falls off the edge. Give the label its own
   row, and the other two keep theirs. */
@media (max-width: 400px) {
  .stats > div {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.125rem 0.75rem;
  }

  .stats .label {
    grid-column: 1 / -1;
  }
}

.src {
  max-width: var(--measure);
  margin-top: 1rem;
  color: var(--txt-faint);
  font-size: var(--t-sm);
  line-height: 1.55;
}

/* Before / after */
.ba {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.02);
}

.ba article {
  padding: 1.125rem;
  text-align: center;
}

.ba article span {
  display: block;
  color: var(--txt-faint);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ba article b {
  display: block;
  margin-top: 0.75rem;
  color: var(--txt-dim);
  font-family: var(--display);
  font-size: var(--num-lg);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.ba article small {
  display: block;
  margin-top: 0.5rem;
  color: var(--txt-faint);
  font-size: var(--t-sm);
}

.ba .after {
  border: 1px solid rgba(199, 34, 43, 0.4);
  border-radius: var(--r);
  background: rgba(168, 22, 29, 0.12);
}

.ba .after span {
  color: #e8656c;
}

.ba .after b {
  color: var(--white);
}

.ba .arrow {
  color: var(--red-bright);
  font-family: var(--display);
  font-size: 1.375rem;
}

/* Numbered takeaways */
.take {
  display: grid;
  gap: 0.75rem;
  counter-reset: take;
}

.take li {
  position: relative;
  padding: 1.25rem 1.5rem 1.25rem 3.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
  color: var(--txt-dim);
  font-size: var(--t-base);
  line-height: 1.55;
  counter-increment: take;
}

.take li::before {
  position: absolute;
  top: 1.1875rem;
  left: 1.375rem;
  color: var(--red-bright);
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 500;
  content: counter(take, decimal-leading-zero);
}

.take li b {
  color: var(--white);
  font-weight: 600;
}

/* Proof strip.
   The plan puts this on --paper, because a raw TikTok or Instagram screenshot
   is white UI and glares on near-black. But none of the slides we actually
   have is a raw screenshot: all 33 are the client's own dark-background
   carousel slides with the screenshots composed onto them. On paper they read
   as black postcards on cream. So the default panel is dark, and .proof--paper
   is kept for the raw light-UI captures item 2 of the plan's client list asks
   for — swap the class per case once they arrive. */
.proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.03);
}

.proof--paper {
  border-color: transparent;
  background: var(--paper);
}

/* Two or three screenshots must not stretch to fill four columns' worth of
   paper — the panel narrows instead, so a screenshot reads at the same size
   in every case. */
.proof--2 {
  max-width: 40rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.proof--3 {
  max-width: 58rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.proof--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.proof figure {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--ink);
  transition: transform 250ms var(--ease), border-color 250ms var(--ease);
}

.proof figure:hover {
  border-color: rgba(199, 34, 43, 0.5);
  transform: translateY(-2px);
}

.proof--paper figure {
  border-color: var(--paper-line);
  background: #fff;
}

.proof--paper figure:hover {
  border-color: var(--paper-line);
  box-shadow: 0 10px 24px -12px rgba(9, 9, 9, 0.45);
}

.proof-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

/* One frame ratio for every case, so the strip never goes ragged — but
   `contain`, not `cover`: most slides are already 4:5 and fill it exactly,
   while the nine square Kosher/Glossa slides would lose their headline to a
   side crop. Letterboxing them against --ink costs a little height and keeps
   the thumbnail a faithful miniature of the slide. */
.proof-open img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
}

.proof-open .zoom {
  position: absolute;
  top: 0.5625rem;
  right: 0.5625rem;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(9, 9, 9, 0.72);
  font-size: var(--t-sm);
  transition: background 200ms var(--ease);
}

.proof-open:hover .zoom {
  background: var(--red);
}

.proof-open:focus-visible {
  outline-offset: -3px;
}

.proof figcaption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6875rem 0.8125rem;
  border-top: 1px solid var(--line);
  color: var(--txt-dim);
  font-size: var(--t-sm);
  line-height: 1.4;
}

.proof figcaption b {
  color: var(--red-on-dark);
  font-family: var(--display);
  font-size: var(--t-xs);
}

.proof--paper figcaption {
  border-top-color: rgba(9, 9, 9, 0.1);
  color: var(--paper-dim);
}

.proof--paper figcaption b {
  color: var(--red);
}

.case-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.375rem, 3vw, 2rem) clamp(1.625rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.case-foot p {
  color: var(--txt-dim);
  font-size: var(--t-md);
}

.case-foot .button {
  margin-left: auto;
}

/* Lightbox — the proof images are 1080px+ analytics screenshots, unreadable
   at the width the strip gives them. */
/* Pinned to the viewport, not the document. A modal <dialog> left at
   `position: relative` is laid out at the document's top-left corner, so
   showModal() scrolls the whole page up to bring it into view — open a proof
   screenshot from halfway down a case and the reader loses their place.
   `inset: 0` + `margin: auto` against the UA's `height: fit-content` centres
   it, and nothing needs scrolling into view. */
.lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(100vw - 2rem, 1100px);
  max-width: none;
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--txt);
  background: var(--ink-1);
}

.lightbox::backdrop {
  background: rgba(9, 9, 9, 0.86);
}

.lightbox-figure {
  display: grid;
  max-height: calc(100vh - 2rem);
  grid-template-rows: minmax(0, 1fr) auto;
}

.lightbox-figure img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  /* Matches the slide's own background, so a portrait slide in a landscape
     window letterboxes invisibly. */
  background: var(--ink);
}

.lightbox-figure figcaption {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.875rem 1.125rem;
  border-top: 1px solid var(--line);
  color: var(--txt-dim);
  font-size: var(--t-md);
}

.lightbox-close {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--white);
  background: rgba(9, 9, 9, 0.72);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms var(--ease);
}

.lightbox-close:hover {
  background: var(--red);
}

/* The strip is the gallery, so the arrows only earn their place when there is
   a second screenshot to step to — .has-nav is set per open. */
.lightbox-nav {
  position: absolute;
  top: 50%;
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--white);
  background: rgba(9, 9, 9, 0.72);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms var(--ease);
}

.lightbox.has-nav .lightbox-nav {
  display: grid;
}

.lightbox-nav:hover {
  background: var(--red);
}

.lightbox-nav.prev {
  left: 0.625rem;
}

.lightbox-nav.next {
  right: 0.625rem;
}

/* Fixed-width digits keep the caption from twitching as the counter steps. */
.lightbox-count {
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * Back to top
 * ------------------------------------------------------------------ */

/* Below the header (100) and the mobile menu panel (101) on purpose: with the
   panel open it is the only surface on screen, and a button must not punch
   through it. */
.to-top {
  position: fixed;
  z-index: 99;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--white);
  background: rgba(16, 16, 18, 0.82);
  backdrop-filter: blur(10px);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  /* visibility stays out of the transition, so a button that is fading out is
     already untabbable — the same trick the nav panel uses. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity 200ms var(--ease),
    transform 200ms var(--ease),
    background 200ms var(--ease),
    border-color 200ms var(--ease);
}

.to-top.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.to-top:hover {
  border-color: var(--red);
  background: var(--red);
}

/* The marker the observer watches. One pixel, no paint, no hit area — and on
   a page shorter than 1.75 screens it never leaves the viewport, which is
   exactly when the button is not worth showing. */
.to-top-anchor {
  position: absolute;
  top: 75vh;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Services list
 * ------------------------------------------------------------------ */

.services-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.services-intro {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
}

.services-intro h2 {
  margin-top: 1rem;
  font-size: var(--d-3);
  line-height: 1.12;
}

.services-intro > p:not(.kicker) {
  max-width: var(--measure-narrow);
  margin-top: 1.125rem;
  color: var(--txt-dim);
  font-size: var(--t-base);
}

.services-intro .text-link {
  margin-top: 0.5rem;
}

.service-list {
  display: grid;
  gap: 0.875rem;
}

.service-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: start;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
  transition: border-color 250ms var(--ease), transform 250ms var(--ease);
}

.service-item:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.service-symbol {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(199, 34, 43, 0.45);
  border-radius: 50%;
  color: var(--red-on-dark);
  background: rgba(168, 22, 29, 0.12);
  font-family: var(--display);
  font-size: var(--t-lg);
  line-height: 1;
}

.service-meta {
  color: var(--red-on-dark);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.service-item h3 {
  margin-top: 0.5rem;
  font-size: var(--d-5);
  line-height: 1.2;
}

.service-item > div > p:last-of-type {
  max-width: var(--measure);
  margin-top: 0.625rem;
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.6;
}

.service-package-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.5rem;
  color: var(--red-on-dark);
  font-size: var(--t-md);
  font-weight: 600;
  transition: gap 200ms var(--ease), color 200ms var(--ease);
}

.service-package-link:hover {
  gap: 0.875rem;
  color: var(--white);
}

.service-cue {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--txt-dim);
  font-size: var(--t-lg);
  transition: color 200ms var(--ease), background 200ms var(--ease),
    border-color 200ms var(--ease);
}

.service-item:hover .service-cue {
  border-color: var(--red);
  color: var(--white);
  background: var(--red);
}

/* ------------------------------------------------------------------ *
 * Packages
 * ------------------------------------------------------------------ */

.package-grid {
  display: grid;
  gap: 1rem;
}

.package {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
}

.package-head {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.625rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(70% 130% at 0% 0%, rgba(168, 22, 29, 0.18), transparent 60%);
}

.package-index {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.package-index span {
  color: var(--red-bright);
  font-family: var(--display);
  font-size: var(--num-lg);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.package-index p {
  color: var(--txt-faint);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.package-title > p:first-child {
  margin-bottom: 0.625rem;
  color: var(--red-on-dark);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.package-title h3 {
  font-size: var(--d-4);
  line-height: 1.1;
}

.package-title > p:last-child {
  max-width: var(--measure);
  margin-top: 0.875rem;
  color: var(--txt-dim);
  font-size: var(--t-base);
  line-height: 1.65;
}

.package-includes {
  padding: clamp(1.625rem, 3.5vw, 2.5rem);
}

.package-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.25rem;
}

.package-list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.5rem;
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.55;
}

.package-list li::before {
  position: absolute;
  top: 0.5rem;
  left: 0;
  color: var(--red-bright);
  content: "✦";
}

.package-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
  padding: 0 clamp(1.625rem, 3.5vw, 2.5rem) clamp(1.625rem, 3.5vw, 2.5rem);
}

.package-benefits article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.125rem;
  padding: 1.375rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
}

.package-benefits article:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.package-benefits article > span {
  color: var(--red-bright);
  font-family: var(--display);
  font-size: var(--t-sm);
}

.package-benefits h4 {
  color: var(--white);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.35;
}

.package-benefits p {
  max-width: var(--measure);
  margin-top: 0.5rem;
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.6;
}

/* The odd card out spans both columns, so --measure left its copy wrapping
   short against a full-width card: there, the card edge is the measure. */
.package-benefits article:last-child:nth-child(odd) p {
  max-width: none;
}

.package-benefit--featured {
  border-color: rgba(199, 34, 43, 0.4);
  background: linear-gradient(140deg, rgba(168, 22, 29, 0.2), rgba(168, 22, 29, 0.04));
}

.package-platforms-label {
  margin-bottom: 0.5rem;
  color: #e8656c;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.package-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.375rem, 3vw, 2rem) clamp(1.625rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.package-cta p {
  color: var(--white);
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.package-cta .button {
  margin-left: auto;
}

/* ------------------------------------------------------------------ *
 * Consultations
 * ------------------------------------------------------------------ */

.consultation-fit {
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
}

.consultation-fit header {
  align-self: start;
}

.consultation-fit h3 {
  max-width: var(--measure-display);
  margin-top: 1rem;
  font-size: var(--d-4);
  line-height: 1.14;
}

.consultation-fit ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
  align-self: start;
}

.consultation-fit li {
  position: relative;
  padding: 0.8125rem 0 0.8125rem 1.5rem;
  border-bottom: 1px solid var(--line);
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.55;
}

.consultation-fit li::before {
  position: absolute;
  top: 0.8125rem;
  left: 0;
  color: var(--red-bright);
  content: "✦";
}

.consultation-formats {
  display: grid;
  gap: 1rem;
  margin-top: var(--space-md);
}

.consultation-option {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding: clamp(1.625rem, 3.5vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
}

.consultation-option-head {
  align-self: start;
}

.consultation-option-head > span {
  display: block;
  color: var(--red-bright);
  font-family: var(--display);
  font-size: var(--num-lg);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.consultation-option-head > p {
  margin-top: 1rem;
  color: var(--red-on-dark);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.consultation-option-head h3 {
  max-width: var(--measure-display);
  margin-top: 0.625rem;
  font-size: var(--d-4);
  line-height: 1.14;
}

.consultation-option-head strong {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--txt);
  font-size: var(--t-sm);
  font-weight: 600;
}

.consultation-option-lead {
  max-width: var(--measure);
  color: var(--txt);
  font-size: var(--t-xl);
  line-height: 1.5;
}

.consultation-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 1.75rem;
}

.consultation-details section,
.mini-training-columns section {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.consultation-details h4,
.mini-training-columns h4 {
  margin-bottom: 0.875rem;
  color: var(--white);
  font-family: var(--display);
  font-size: var(--d-6);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.consultation-details li,
.mini-training-columns li {
  position: relative;
  padding: 0.375rem 0 0.375rem 1.25rem;
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.6;
}

.consultation-details li::before,
.mini-training-columns li::before {
  position: absolute;
  top: 0.375rem;
  left: 0;
  color: var(--red-bright);
  content: "—";
}

.consultation-details section > p:not(.consultation-mode) {
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.65;
}

.consultation-mode {
  margin-top: 1rem;
  color: var(--red-on-dark);
  font-size: var(--t-sm);
  font-weight: 600;
}

.consultation-option-body > .button {
  margin-top: 1.75rem;
}

.mini-training {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: 1rem;
  padding: clamp(1.625rem, 3.5vw, 2.5rem);
  border: 1px solid rgba(199, 34, 43, 0.3);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(168, 22, 29, 0.14), rgba(22, 22, 26, 0.9));
}

.mini-training-head > span {
  display: block;
  color: var(--red-bright);
  font-family: var(--display);
  font-size: var(--num-lg);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.mini-training-head > p {
  margin-top: 1rem;
  color: var(--red-on-dark);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.mini-training-head h3 {
  margin-top: 0.625rem;
  font-size: var(--d-4);
  line-height: 1.14;
}

.mini-training-head strong {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--txt);
  font-size: var(--t-sm);
  font-weight: 600;
}

.mini-training-head small {
  display: block;
  margin-top: 0.75rem;
  color: var(--txt-dim);
  font-size: var(--t-sm);
}

.mini-training-lead {
  max-width: var(--measure);
  color: var(--txt);
  font-size: var(--t-xl);
  line-height: 1.5;
}

.mini-training-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 1.75rem;
}

.mini-training-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.mini-training-cta p {
  max-width: var(--measure-narrow);
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.6;
}

.mini-training-cta p strong {
  color: var(--white);
}

.mini-training-cta .button {
  margin-left: auto;
}

.consultation-help {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: 1rem;
  padding: clamp(1.625rem, 3.5vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-1);
}

.consultation-help > div > p {
  margin-bottom: 0.75rem;
  color: var(--red-on-dark);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.consultation-help h3 {
  max-width: var(--measure-display);
  font-size: var(--d-5);
  line-height: 1.18;
}

.consultation-help > p {
  max-width: var(--measure);
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.6;
}

/* ------------------------------------------------------------------ *
 * Studio
 * ------------------------------------------------------------------ */

.studio-block {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--line);
}

.studio-block-head {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
  align-self: start;
}

.studio-block-head > p {
  margin-bottom: 0.875rem;
  color: var(--red-on-dark);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.studio-block-head h3 {
  max-width: var(--measure-display);
  font-size: var(--d-4);
  line-height: 1.14;
}

.studio-prose {
  max-width: var(--measure);
}

.studio-prose > p {
  color: var(--txt-dim);
  font-size: var(--t-base);
  line-height: 1.75;
}

.studio-prose > p + p {
  margin-top: 1rem;
}

.studio-prose > .studio-lead {
  margin-bottom: 1.25rem;
  color: var(--txt);
  font-size: var(--t-xl);
  line-height: 1.5;
}

.studio-prose strong {
  color: var(--white);
  font-weight: 700;
}

.studio-collage {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 0.75rem;
  height: min(620px, 60vw);
  min-height: 420px;
}

.studio-collage figure {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
}

.studio-main-image {
  grid-row: 1 / 3;
}

.studio-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.studio-collage figure:hover img {
  transform: scale(1.03);
}

.studio-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: 0.875rem;
  padding: clamp(1.625rem, 3.5vw, 2.25rem);
  border: 1px solid rgba(199, 34, 43, 0.35);
  border-radius: var(--r-lg);
  background: linear-gradient(100deg, rgba(168, 22, 29, 0.22), rgba(168, 22, 29, 0.04));
}

.studio-offer-label {
  margin-bottom: 0.625rem;
  color: #e8656c;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.studio-offer h3 {
  max-width: var(--measure-display);
  font-size: var(--d-5);
  line-height: 1.15;
}

.studio-offer > div > p:last-child {
  max-width: var(--measure);
  margin-top: 0.75rem;
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.65;
}

.studio-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
  margin-top: 1.5rem;
}

.studio-list li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.5rem;
  border-bottom: 1px solid var(--line);
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.5;
}

.studio-list li::before {
  position: absolute;
  top: 0.75rem;
  left: 0;
  color: var(--red-bright);
  content: "✦";
}

.studio-note {
  margin-top: 1.5rem;
  padding: 1.125rem 1.375rem;
  border-left: 3px solid var(--red-bright);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(255, 255, 255, 0.03);
}

.studio-note p {
  color: var(--txt-dim);
  font-size: var(--t-md);
  line-height: 1.6;
}

.studio-note h4 {
  margin-bottom: 0.375rem;
  color: var(--white);
  font-family: var(--display);
  font-size: var(--d-6);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.studio-note strong {
  color: var(--white);
}




.studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ------------------------------------------------------------------ *
 * Contact band and contacts
 * ------------------------------------------------------------------ */

.contact-band {
  padding-block: var(--space-xl);
}

.contact-band-inner {
  display: grid;
  justify-items: center;
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(168, 22, 29, 0.2), transparent 65%),
    linear-gradient(180deg, var(--ink-2), var(--ink-1));
  text-align: center;
}

.contact-band h2 {
  font-size: var(--d-4);
  line-height: 1.14;
}

.contact-band p {
  max-width: var(--measure);
  margin-top: 0.875rem;
  color: var(--txt-dim);
  font-size: var(--t-base);
}

.contact-band .button {
  margin-top: 1.75rem;
}

.contacts-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contact-copy h2 {
  margin-top: 1rem;
  font-size: var(--d-3);
  line-height: 1.12;
}

.contact-copy > p:not(.kicker) {
  max-width: var(--measure-narrow);
  margin-top: 1.125rem;
  color: var(--txt-dim);
  font-size: var(--t-base);
}

.contact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.contact-item {
  display: flex;
  min-height: 84px;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}

/* An odd item count would otherwise leave a hole in the two-up grid. */
.contact-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.contact-item svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--red-on-dark);
}

.contact-item > span {
  display: grid;
  gap: 0.25rem;
}

.contact-label {
  color: var(--txt-faint);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact-value {
  color: var(--white);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.4;
}

a.contact-item:hover {
  border-color: rgba(199, 34, 43, 0.45);
  transform: translateY(-2px);
}

.contact-route {
  margin-top: 1.5rem;
}

.contact-media {
  overflow: hidden;
  height: 100%;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.contact-map {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  filter: grayscale(1) contrast(1.05) brightness(0.85);
  transition: filter 260ms var(--ease);
}

.contact-media:hover .contact-map {
  filter: none;
}

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */

.site-footer {
  padding-block: var(--space-sm);
  border-top: 1px solid var(--line);
  background: var(--ink-1);
}

.footer-bottom {
  color: var(--txt-faint);
  font-size: var(--t-sm);
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * Router feedback — a slow fetch must not read as a dead click.
 * ------------------------------------------------------------------ */

body.is-navigating {
  cursor: progress;
}

body.is-navigating::after {
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--red-bright);
  content: "";
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: route-progress 900ms var(--ease) infinite;
}

@keyframes route-progress {
  0% {
    transform: scaleX(0);
  }

  60% {
    transform: scaleX(0.72);
  }

  100% {
    transform: scaleX(1);
  }
}

/* Motion: one page-load entrance, on the home hero, and nothing else. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: hero-in 600ms var(--ease) backwards;
  }

  .hero-copy > :nth-child(1) {
    animation-delay: 60ms;
  }

  .hero-copy > :nth-child(2) {
    animation-delay: 140ms;
  }

  .hero-copy > :nth-child(3) {
    animation-delay: 220ms;
  }

  .hero-copy > :nth-child(4) {
    animation-delay: 300ms;
  }

  .hero-copy > :nth-child(5) {
    animation-delay: 380ms;
  }
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 1080px) {
  :root {
    --header-height: 68px;
  }

  .case-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi:nth-child(2) {
    border-right: 0;
  }

  .kpi:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .proof,
  .proof--3,
  .proof--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-teaser-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-layout,
  .consultation-fit,
  .consultation-option,
  .mini-training,
  .studio-block,
  .contacts-grid {
    grid-template-columns: 1fr;
  }

  .services-intro,
  .studio-block-head {
    position: static;
  }

  .consultation-help {
    grid-template-columns: 1fr 1fr;
  }

  .consultation-help .button {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .package-head {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .package-index {
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    gap: 0.75rem;
  }
}

@media (max-width: 960px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-grid,
  .hero-grid,
  .page-hero-inner,
  .case-head {
    grid-template-columns: 1fr;
  }

  .about-copy {
    position: static;
  }

  .hero-grid {
    gap: 2.5rem;
  }

  .hero-portrait {
    max-width: 26rem;
  }

  .hero h1,
  .page-title {
    max-width: none;
  }

  .studio-collage {
    height: auto;
    min-height: 0;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
  }

  .studio-main-image {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 16 / 9;
  }

  .studio-collage figure:not(.studio-main-image) {
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 820px) {
  /* backdrop-filter makes an element a containing block for its position:fixed
     descendants, which would size the full-screen nav panel to the 68px
     header instead of the viewport. Dropping the blur here fixes that, and a
     blur behind a sticky bar is the wrong thing to pay for on a phone anyway. */
  .site-header {
    background: rgba(9, 9, 9, 0.94);
    backdrop-filter: none;
  }

  /* Must out-stack the panel, or the close button lands underneath it. */
  .menu-toggle {
    position: relative;
    z-index: 102;
    display: block;
    margin-left: auto;
  }

  .site-nav {
    position: fixed;
    z-index: 101;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.25rem;
    margin-left: 0;
    padding: 6rem var(--gut) 2rem;
    background: var(--ink);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.75rem);
    transition: opacity 200ms var(--ease), transform 200ms var(--ease),
      visibility 200ms var(--ease);
  }

  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    /* Opening must flip visibility at once — a link inside a still-hidden
       panel cannot take focus, and the menu moves focus to the first one.
       Closing keeps the base rule, so the panel fades before it hides. */
    transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  }

  .site-nav a {
    min-height: 56px;
    padding-inline: 1rem;
    border-radius: var(--r);
    color: var(--txt);
    font-family: var(--display);
    font-size: var(--d-5);
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  .stats,
  .package-list,
  .package-benefits,
  .consultation-fit ul,
  .consultation-details,
  .mini-training-columns,
  .studio-list,
  .contact-list,
  .ba {
    grid-template-columns: 1fr;
  }

  .ba .arrow {
    text-align: center;
    transform: rotate(90deg);
  }

  .metric-studio .button,
  .package-cta .button,
  .case-foot .button,
  .mini-training-cta .button {
    margin-left: 0;
  }
}

@media (max-width: 700px) {
  .proof,
  .proof--3,
  .proof--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-teaser-grid {
    grid-template-columns: 1fr;
  }

  .case-tabs {
    display: grid;
    width: 100%; /* .case-nav centres its children, so the pill must claim the row */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-tab {
    justify-content: center;
  }

  /* Both sit the copy beside an `auto` action that never shrinks, so below
     this the text column is squeezed past any usable measure — one word per
     line, with the button landing on top of it. Stack instead. */
  .studio-offer,
  .consultation-help {
    grid-template-columns: 1fr;
  }

  .studio-offer .button {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .metrics-grid,
  .case-kpis {
    grid-template-columns: 1fr;
  }

  .kpi {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .kpi:last-child {
    border-bottom: 0;
  }

  .hero-actions .button,
  .contact-band .button,
  .sec-head-cta,
  .studio-actions .button,
  .studio-offer .button,
  .consultation-option-body > .button,
  .mini-training-cta .button,
  .consultation-help .button,
  .package-cta .button,
  .case-foot .button {
    width: 100%;
  }

  /* The rule and the source note have nowhere to go beside a heading that is
     already wrapping, so the note drops to its own line. */
  .block-head {
    flex-wrap: wrap;
    gap: 0.375rem 0.875rem;
  }

  .block-head i {
    display: none;
  }

  .block-head em {
    flex-basis: 100%;
  }

  /* The counter moves above the text: a 62px indent on a 320px screen leaves
     no measure for the sentence itself. */
  .take li {
    padding: 1.125rem;
  }

  .take li::before {
    position: static;
    display: block;
    margin-bottom: 0.5rem;
  }

  /* The caption's text is an anonymous flex item: it cannot shrink below its
     longest word, and beside the number that word overruns a two-up proof
     cell on a 360px screen. Give it the cell's full width. */
  .proof figcaption {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }

  .service-item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    padding: 1.25rem;
  }

  .service-cue {
    display: none;
  }

  .lightbox {
    width: 100vw;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .lightbox-figure {
    max-height: 100vh;
  }
}

/* A two-up proof on a 320px screen leaves ~60px of caption, and the figure
   clips what will not fit — "Оформлення" wants 70. Buy the room back from the
   panel's own chrome rather than dropping to one screenshot per row: the
   padding is decoration, the second thumbnail is content. */
@media (max-width: 400px) {
  .proof {
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .proof figcaption {
    padding: 0.625rem 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  body.is-navigating::after {
    transform: scaleX(1);
    animation: none;
  }
}