/* SAY Design portfolio shell. Values taken from Figma: SAY - Sales Deck › Playground Artifact › Section 1. */
/* Brand display face (as on saydesign.pro). Worldwise Sans Heavy is included as a fallback cut. */
@font-face { font-family: "Wise Sans"; src: url("../assets/fonts/WiseSans-Heavy.otf") format("opentype"); font-weight: 800 900; font-display: swap; }
@font-face { font-family: "Worldwise Sans"; src: url("../assets/fonts/WorldwiseSans-Heavy.otf") format("opentype"); font-weight: 800 900; font-display: swap; }

:root {
  --brand-display: "Wise Sans", "Worldwise Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
  /* brand */
  --accent: #ea3d01;
  --accent-logo: #ff5316;
  /* neutrals */
  --page: #fcfcfc;
  --tray: #f7f7f7;
  --white: #ffffff;
  --chip: #ededed;
  --line: #e5e5e5;
  --dot: #dbdbdb;
  --ink: #333333;
  --black: #000000;

  /* tokens the scene styles read */
  --bg: var(--white); --surface: #f7f7f7; --surface-2: #ededed; --card: #ffffff;
  --body: rgba(19,20,21,.78); --muted: #6b6b6b; --faint: #a1a1a1; --ok: #52bd94;
  --dark: #131415; --on-dark: #fff; --on-dark-muted: rgba(255,255,255,.62); --hatch: rgba(19,20,21,.05);
  --accent-soft: #fdebe4;

  --display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --shell-w: 1200px;
  --bar-h: 48px;
  color-scheme: light;
}
/* The stage tokens use --ink for headings; keep it near-black there */
.stage { --ink: #131415; }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

.page {
  height: 100%;
  max-width: var(--shell-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* header top, badge anchored to bottom, shell centred between */
  gap: clamp(16px, 3vh, 40px);
  padding-block: max(30px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-bottom, 0px));
}

/* ---------- header ---------- */
.site-header { width: 100%; max-width: 1188px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; }
.logo { display: flex; align-items: center; gap: 11.6px; text-decoration: none; }
.logo__mark { width: 28px; height: 28px; border-radius: 7.18px; background: var(--accent-logo); display: grid; place-items: center; }
.logo__word { height: 23.3px; width: auto; }
.cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 9999px; background: var(--accent);
  color: var(--white); text-decoration: none; text-transform: uppercase;
  font: 700 16px/16px var(--text);
  filter: drop-shadow(0 1.5px .75px rgba(0,0,0,.06));
  transition: filter .15s;
}
.cta:hover { filter: drop-shadow(0 1.5px .75px rgba(0,0,0,.06)) brightness(1.06); }

/* ---------- shell (tray) ---------- */
.shell {
  width: 100%;
  flex: 0 1 945px; /* 945px tall (936 + the progress bar row) when there is room (viewport +20%: ~682 -> ~818), shrinks when there isn't */
  min-height: 0;
  display: flex; flex-direction: column;
  background: var(--tray);
  border: 1px solid #e6e6e6;
  border-radius: 20px;
  padding: 4px;
  overflow: hidden;
  box-shadow: 0 2px 0 .4px rgba(0,0,0,.08); /* presentation viewer lift (Figma 307:1785) */
}

/* strip: tabs or breadcrumb */
.shell__strip { display: flex; align-items: stretch; flex: none; height: 48px; overflow-x: auto; scrollbar-width: none; }
.shell__strip::-webkit-scrollbar { display: none; }
.shell__strip--center { justify-content: center; }
.tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px; padding: 12px 16px; white-space: nowrap;
  font: 400 18px/1.34 var(--text); color: var(--ink);
}
.tab__label { opacity: .5; transition: opacity .3s ease; }
.tab:hover .tab__label { opacity: .8; }
.tab[aria-current="page"] { font-weight: 400; } /* weight stays fixed so labels do not jump; colour carries the state */
.tab[aria-current="page"] .tab__label { opacity: 1; }
.kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 4px; background: var(--chip);
  font: 500 13px/1 var(--mono); letter-spacing: -.195px; color: rgba(51,51,51,.4);
}
.sep { display: flex; align-items: center; padding-block: 8px; flex: none; }
.sep::before { content: ""; width: 1px; height: 100%; background: var(--line); }
.crumb { display: flex; align-items: center; gap: 0; }
.crumb a, .crumb span { padding: 12px 16px; font: 400 18px/1.34 var(--text); color: var(--ink); text-decoration: none; white-space: nowrap; }
.crumb a { opacity: .5; cursor: pointer; }
.crumb a:hover { opacity: .8; }
.crumb span { font-weight: 500; }

/* body: white viewport (or carousel track) */
.shell__body { position: relative; flex: 1 1 auto; min-height: 0; }
.viewport {
  position: absolute; inset: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.stage { position: absolute; left: 0; top: 0; width: 1600px; height: 934px; transform-origin: 0 0; }
.scene { position: absolute; inset: 0; animation: scene-in .32s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
@keyframes scene-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* dot slider */
.dots { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding-bottom: 20px; z-index: 2; }
.dots__track { display: flex; gap: 4px; align-items: center; padding: 8px; border-radius: 999px; background: var(--tray); }
.dots__dot { appearance: none; border: 0; padding: 0; cursor: pointer; width: 4px; height: 4px; border-radius: 4px; background: var(--dot); transition: width .2s, background .2s; }
.dots__dot[aria-current="true"] { width: 10px; background: var(--accent); }

/* case carousel */
.carousel { position: absolute; inset: 0; overflow: hidden; }
.carousel__track { display: flex; gap: 4px; height: 100%; will-change: transform; transition: transform .38s cubic-bezier(.22,.61,.36,1); }   /* same timing as every other slide move */
.case-card {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  flex: none; height: 100%; width: var(--w, 512px);
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  opacity: .25; transition: opacity .35s ease;
}
.case-card[aria-current="true"] { opacity: 1; }
.case-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* card content (real px, not scaled) */
.cc { position: absolute; inset: 0; padding: 20px 20px 52px; display: flex; flex-direction: column; gap: 14px; width: 880px; max-width: 100%; }
.cc__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 30px; }
.cc__name { font: 800 20px/1 var(--display); letter-spacing: -.01em; color: #131415; }
.cc__ix { font: 500 13px/1 var(--mono); color: var(--faint); }
.cc__title { font: 700 40px/1.08 var(--display); letter-spacing: -.025em; color: #131415; margin: 0; max-width: 620px; text-wrap: balance; }
.cc__desc { font: 400 18px/1.5 var(--text); color: var(--body); margin: 0; max-width: 600px; }
.cc__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.cc__visual { flex: 1; min-height: 120px; border-radius: 10px; border: 1px solid var(--line);
  background: repeating-linear-gradient(-45deg, var(--hatch) 0 10px, transparent 10px 20px), var(--tray);
  display: grid; place-items: center; font: 500 13px/1.4 var(--mono); color: var(--muted); }
.cc__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cc__backers { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: 500 12px/1 var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

/* bottom bar */
.shell__bar { display: flex; align-items: stretch; flex: none; height: var(--bar-h); }
.bar-btn {
  appearance: none; border: 0; background: none; cursor: pointer;
  flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 12px;
  font: 500 18px/1.34 var(--text); letter-spacing: -.27px; color: var(--ink); white-space: nowrap;
  transition: flex-grow .42s cubic-bezier(.22,.61,.36,1), opacity .25s ease, padding .42s cubic-bezier(.22,.61,.36,1), color .2s ease;
}
/* collapsed slot: shrinks to nothing, then fades */
.bar-btn.is-hidden { flex-grow: 0 !important; padding-inline: 0; opacity: 0; pointer-events: none; }
/* confirmation ("Press again to …"): orange and wider (grow 3 vs 1 = 75%) */
.bar-btn.is-confirm { color: var(--accent); }
.bar-btn.is-confirm .icon-tile { background: color-mix(in srgb, var(--accent) 14%, #fff); }
.bar-btn.is-confirm .icon-tile img { filter: invert(33%) sepia(98%) saturate(2400%) hue-rotate(4deg) brightness(95%); opacity: 1; }
.bar-btn.is-confirm:hover .icon-tile { background: color-mix(in srgb, var(--accent) 22%, #fff); }
.bar-btn.is-confirm.bar-btn--end { justify-content: flex-end; }
.shell__bar .sep { transition: opacity .25s ease, padding .42s ease; }
.shell__bar .sep.is-hidden { opacity: 0; width: 0; padding: 0; overflow: hidden; }
.shell__bar .sep.is-hidden::before { width: 0; }
.bar-btn--center { justify-content: center; padding-inline: 16px; }
.bar-btn--end { justify-content: flex-end; padding-inline: 16px; }
.bar-btn--solo { flex: none; margin-inline: auto; }
.bar-btn:disabled:not(.is-hidden) { cursor: default; opacity: .35; }
.bar-btn:not(:disabled):hover .icon-tile { background: #e2e2e2; }
.icon-tile { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--chip); flex: none; transition: background .15s; }
.icon-tile img { width: 16px; height: 16px; }
.icon-tile--back img { transform: scaleX(-1); }

.tab:focus-visible, .bar-btn:focus-visible, .crumb a:focus-visible, .dots__dot:focus-visible, .cta:focus-visible, .logo:focus-visible, .clutch:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px;
}

/* ---------- clutch badge ---------- */
.clutch {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 6px 12px;
  border-radius: 999px; background: #f9f9f9; border: 2px solid #f5f5f5;
  font: 500 16px/24px var(--text); color: var(--black); text-decoration: none;
}
.clutch span + span { margin-left: 2px; }
.clutch b { font-weight: 600; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .scene, .carousel__track, .case-card, .dots__dot { animation: none; transition: none; }
}
@media (max-width: 480px) {
  .cta { font-size: 13px; padding: 9px 14px; }
  .tab, .crumb a, .crumb span { font-size: 15px; padding: 12px 12px; }
  .bar-btn { font-size: 15px; }
  .clutch { font-size: 13px; }
  .cc__title { font-size: 28px; }
}

/* ---------- testimonials: one founder per slide ---------- */
.tcar { position: absolute; inset: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.tslide { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 5%, 64px);
  padding: clamp(20px, 3.4%, 40px) clamp(20px, 3.4%, 40px) clamp(56px, 9%, 64px); animation: scene-in .4s ease; }
.tcard { position: relative; height: 100%; aspect-ratio: 536 / 750; border-radius: 18px; overflow: hidden; background: #1b1b1b; color: #fff; }
.tcard__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.tcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(0,0,0,.78) 100%); }
.tcard__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 clamp(16px, 6%, 28px) clamp(16px, 5%, 26px); }
.tcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.2); }
.tcard__name { font: 500 17px/1.4 var(--text); }
.tcard__role { font: 400 15px/1.4 var(--text); color: rgba(255,255,255,.65); }
.tcard__logo { display: block; height: 24px; width: auto; max-width: 45%; object-fit: contain; object-position: right center; }

.tslide__text { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-block: 8px; }
.stars { display: flex; gap: 3px; color: #ffa928; font-size: 22px; line-height: 1; }
.tslide__quote { margin: 0; font: 500 clamp(20px, 2.4vw, 32px)/1.35 var(--text); letter-spacing: -.02em; color: #131415; text-wrap: pretty; max-width: 34ch; }
.tslide__svc { display: flex; flex-direction: column; gap: 12px; }
.tslide__label { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--tray); border: 1px solid var(--line);
  font: 500 14px/1 var(--text); color: var(--ink); white-space: nowrap; }
.tslide__end { margin-top: auto; display: flex; justify-content: flex-end; min-height: 40px; }
.tslide__case { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 16px; border-radius: 999px; background: #131415; color: #fff;
  font: 500 15px/1 var(--text); text-decoration: none; }
.tslide__case .icon-tile { background: rgba(255,255,255,.14); }
.tslide__case .icon-tile img { filter: invert(1); opacity: .9; }
.tslide__case:hover { background: #000; }
.tslide__case:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) {
  .tslide { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .tcard { height: 100%; width: auto; justify-self: center; }
}

/* ---------- service badges (one style everywhere; colours/icons from js/services.js) ---------- */
.svc-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-badge { --svc: #333; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--svc) 7%, #fff); border: 1px solid color-mix(in srgb, var(--svc) 18%, #fff);
  font: 500 14px/1 var(--text); color: #1f2023; white-space: nowrap; }
.svc-badge__icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--svc); background: color-mix(in srgb, var(--svc) 14%, #fff); flex: none; }
.svc-badge--lg { height: 40px; font-size: 18px; padding: 0 16px 0 8px; gap: 9px; }
.svc-badge--lg .svc-badge__icon { width: 26px; height: 26px; }
.svc-badge--lg .svc-badge__icon svg { width: 16px; height: 16px; }
.svc-chip { display: inline-flex; align-items: center; gap: 8px; padding-left: 8px !important; }
.svc-chip[aria-pressed="true"] { border-color: var(--svc); background: color-mix(in srgb, var(--svc) 7%, #fff); color: #1f2023; }
.svc-badge__icon { position: relative; overflow: hidden; }
.svc-badge__glyph, .svc-badge__arrow { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .22s ease, opacity .22s ease; }
.svc-badge__arrow { opacity: 0; transform: translateX(-60%); }
button.svc-badge { appearance: none; cursor: pointer; font: inherit; font: 500 14px/1 var(--text); transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
button.svc-badge.svc-badge--lg { font-size: 18px; }
.svc-badge--link:hover, .svc-badge--link:focus-visible { background: color-mix(in srgb, var(--svc) 12%, #fff); border-color: color-mix(in srgb, var(--svc) 32%, #fff); }
.svc-badge--link:hover .svc-badge__glyph, .svc-badge--link:focus-visible .svc-badge__glyph { opacity: 0; transform: translateX(60%); }
.svc-badge--link:hover .svc-badge__arrow, .svc-badge--link:focus-visible .svc-badge__arrow { opacity: 1; transform: none; }
.svc-badge--link:focus-visible { outline: 2px solid var(--svc); outline-offset: 2px; }
/* icon-only service badge (label repeated nearby, e.g. Services category title) */
.svc-badge--icon { padding: 0; width: 40px; height: 40px; justify-content: center; }
.svc-badge--icon .svc-badge__icon { width: 28px; height: 28px; background: transparent; }
.svc-badge--icon .svc-badge__icon svg { width: 18px; height: 18px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* carousel intro: what this page is (360px, before the first card) */
.carousel__intro { flex: none; width: 360px; height: 100%; padding: 40px 32px 72px 20px; display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; }
.carousel__title { margin: 0; font: 700 34px/1.1 var(--display); letter-spacing: -.025em; color: #131415; }
.carousel__desc { margin: 0; font: 400 17px/1.5 var(--text); color: var(--muted); }

/* case card logo: one height for every client */
.cc__logo { height: 26px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; }
.cc__logo--dark { filter: brightness(0); opacity: .9; }
.cc__wordmark { font: 800 21px/26px var(--display); letter-spacing: -.02em; color: #131415; }
.cc__top .cc__backers { justify-content: flex-end; }
.cc__visual { min-height: 160px; }

/* bottom bar: label swaps slide/fade in; slot widths, colours and separators already transition */
.bar-btn__inner { display: inline-flex; align-items: center; gap: 8px; min-width: 0; animation: bar-label-in .32s cubic-bezier(.22,.61,.36,1); }
.bar-btn--center .bar-btn__inner { justify-content: center; }
.bar-btn--end .bar-btn__inner { justify-content: flex-end; }
@keyframes bar-label-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bar-btn .icon-tile { transition: background .2s ease, transform .2s ease; }
.bar-btn:not(:disabled):active .icon-tile { transform: scale(.92); }
@media (prefers-reduced-motion: reduce) { .bar-btn, .bar-btn__inner, .shell__bar .sep { transition: none; animation: none; } }

/* case + category cards: full-bleed cover on top, content below, client row at the bottom */
.cc { padding: 0; gap: 0; }
.cc__visual { flex: 1 1 auto; min-height: 140px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.cc__body { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 52px; }
.cc__bottom { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }

/* service badges sit on the bottom of the cover, inset from the edges */
.cc__visual { position: relative; }
.cc__overlay { position: absolute; left: 16px; right: 16px; bottom: 16px; }
.cc__overlay .svc-badge { background: color-mix(in srgb, var(--svc) 8%, #fff); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.cc__body { padding-bottom: 24px; }
/* investor / partner logos at one height */
.cc__backers { gap: 14px; }
.backer-logo { height: 20px; width: auto; max-width: 120px; object-fit: contain; display: block; }
.backer-logo--yc { display: inline-flex; align-items: center; gap: 6px; height: 20px; font: 600 14px/1 var(--text); letter-spacing: -.01em; color: #131415; text-transform: none; }
.backer-logo--yc img { height: 20px; width: 20px; }
.backer-logo--text { height: auto; font: 700 13px/20px var(--text); letter-spacing: .02em; color: #131415; text-transform: none; }

/* ---------- background texture: hairline guides that trace the layout (Figma 307:1765) ---------- */
.guides { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.guides i { position: absolute; display: block; background: #f0f0f0; animation: guide-h 9s cubic-bezier(.45,.1,.3,1) var(--d, 0s) infinite both; }
.guides .h { height: 1px; transform: scaleY(.72); transform-origin: 0 0; }
.guides .v { width: 1px; transform: scaleX(.72); transform-origin: 0 0; animation-name: guide-v; }
.page { position: relative; z-index: 1; }
.cc__head { display: flex; align-items: center; gap: 12px; }
.cc { width: 100%; }
.cc__desc { max-width: 640px; } /* description wrap on case + Services cards */
/* active tab marker: 4x4 orange dot leading the label */
.tab::before { content: ""; width: 0; height: 4px; border-radius: 50%; background: var(--accent); margin-right: -8px; opacity: 0; transition: width .3s cubic-bezier(.22,.61,.36,1), margin .3s cubic-bezier(.22,.61,.36,1), opacity .3s ease; flex: none; }
.tab[aria-current="page"]::before { width: 4px; margin-right: 0; opacity: 1; }

/* Headings in Wise Sans Heavy, uppercase: Home + How we work slides, and the Case studies / Playground intro */
.stage .h-display, .stage .h1, .carousel__title {
  font-family: var(--brand-display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em;
}
.stage .h-display { font-size: 80px; line-height: 1.02; }
.stage .h1 { font-size: 54px; line-height: 1.06; }
.carousel__title { font-size: 34px; line-height: 1.05; }

/* section wash: a soft wipe that sweeps across the content area.
   It blurs and tints whatever is underneath (white cards or the grey tray), so it reads the same on both. */
.shell__body { position: relative; }
.wash { position: absolute; inset: -1px; z-index: 5; pointer-events: none; border-radius: 12px;
  background: linear-gradient(90deg, rgba(250,250,250,0) 0%, rgba(250,250,250,.96) 18%, rgba(250,250,250,.96) 82%, rgba(250,250,250,0) 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); opacity: 0;
  transition: opacity .3s ease, background-position .3s cubic-bezier(.4,0,.2,1), backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease; }
.wash.is-on { opacity: 1; background-position: 50% 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.shell { gap: 6px; } /* breathing room: tabs <> content <> bottom bar */
/* active tab: heavier weight without layout shift. Each label reserves the width of its bold version
   with an invisible bold copy, so switching weight never nudges the other tabs. */
.tab[aria-current="page"] { font-weight: 600; }
.tab__label { display: inline-flex; flex-direction: column; align-items: flex-start; }
.tab__label::after { content: attr(data-text); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; user-select: none; pointer-events: none; }
/* the active dot sits in the tab's left padding, so it takes no width either */
.tab { position: relative; }
.tab::before { position: absolute; left: 7px; top: 50%; width: 4px !important; height: 4px; margin: -2px 0 0 0 !important; transform: scale(0); transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s ease; }
.tab[aria-current="page"]::before { transform: scale(1); }

/* margin notes: notebook-style hints, pen weight, very subtle */
.notes { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.note { position: absolute; display: flex; flex-direction: column; gap: 2px; color: #a3a3a3; font: 400 19px/1.05 "Caveat", "Segoe Print", "Bradley Hand", cursive; }
.note--left { align-items: flex-end; text-align: right; transform: rotate(-2.5deg); }
.note--left svg { margin-right: -8px; }
.note--right { align-items: flex-start; text-align: left; transform: rotate(2deg); }
@media (max-width: 1100px) { .notes { display: none; } }
/* tab labels: mono, uppercase, one weight (active = full opacity + orange dot) */
.tab, .crumb a, .crumb span { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.tab[aria-current="page"] { font-weight: 500; }
.tab__label::after { font-weight: 500; }
.crumb span { font-weight: 500; }

/* pen swirl behind the Clutch badge: a quick hand-drawn loop, as if circled to highlight it */
.clutch-wrap { position: relative; flex: none; display: inline-flex; }
.clutch-wrap .clutch { position: relative; z-index: 1; }
.swirl { position: absolute; left: -30px; right: -30px; top: -13px; bottom: -13px; width: calc(100% + 60px); height: calc(100% + 26px); overflow: visible; pointer-events: none; z-index: 0; }
.swirl path { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; opacity: .55; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: swirl-draw 1.4s .5s cubic-bezier(.45,.1,.3,1) forwards; }
.swirl .swirl__echo { stroke-width: .7; opacity: .3; transform: translate(1px, .8px); }
@keyframes swirl-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .swirl path { animation: none; stroke-dashoffset: 0; } }
.notes { z-index: 3; }
.note--top { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 4px; transform: rotate(-1.5deg); white-space: nowrap; }
.note--top span { margin-top: -2px; }
.note--top svg { margin-top: 10px; transform: scaleX(1); }
.note--top { white-space: normal; }
.note--top span { margin-top: 0; line-height: 1; }
.note--top svg { margin-top: 18px; }
/* swirl: wider than the badge so it reads around it, same grey ink as the margin notes */
.swirl { left: -58px; right: -58px; top: -15px; bottom: -15px; width: calc(100% + 116px); height: calc(100% + 30px); }
.swirl path { stroke: #a3a3a3; opacity: .9; }
.swirl .swirl__echo { opacity: .45; }
.tab::before { left: auto; right: 6px; } /* active dot at the end of the tab, in its right padding */
/* active dot: an in-flow slot that every tab reserves (after the number), so nothing moves when it switches on */
.tab::before { position: static; order: 3; left: auto; right: auto; top: auto; width: 4px !important; height: 4px; margin: 0 !important; flex: none; transform: scale(0); opacity: 0; }
.tab[aria-current="page"]::before { transform: scale(1); opacity: 1; }
.tab__label { order: 1; } .tab .kbd { order: 2; }
.note--ctx { display: flex; flex-direction: row; align-items: flex-start; gap: 4px; white-space: nowrap; transform: rotate(-1.5deg); animation: note-in .35s ease; }
.note--ctx span { margin-top: 14px; }
@keyframes note-in { from { opacity: 0; transform: rotate(-1.5deg) translateY(4px); } to { opacity: 1; transform: rotate(-1.5deg); } }
/* swirl uses the exact pen of the margin-note arrows: 1.1px main pass + 0.6px offset echo at 55%, same grey, no fade */
.swirl path { stroke: #a3a3a3; stroke-width: 1.1; opacity: 1; }
.swirl .swirl__echo { stroke-width: .6; opacity: .55; transform: translate(.6px, .4px); }
.swirl path { stroke: #c6c6c6; } /* lighter ink for the badge swirl */
.note--ctx span { margin-top: 10px; }
/* room for the context note between the viewer and the Clutch badge */
.clutch-wrap { margin-top: 18px; }
.note--ctx { transform: translateX(-50%) rotate(-1.5deg); animation: note-in-c .35s ease; }
@keyframes note-in-c { from { opacity: 0; transform: translateX(-50%) rotate(-1.5deg) translateY(4px); } to { opacity: 1; transform: translateX(-50%) rotate(-1.5deg); } }

/* Playground category: 2-column masonry wall */
.wall { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 20px; scrollbar-width: thin; }
.wall__cols { display: flex; gap: 16px; align-items: flex-start; }
.wall__col { flex: 1 1 0; min-width: 0; }
.wall__item { break-inside: avoid; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; animation: wall-rise .55s cubic-bezier(.22,.61,.36,1) both; }
.wall__item:nth-child(2) { animation-delay: .04s; } .wall__item:nth-child(3) { animation-delay: .08s; } .wall__item:nth-child(4) { animation-delay: .12s; }
.wall__item:nth-child(n+5) { animation-delay: .16s; }
.wall__ph { width: 100%; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; text-align: center; padding: 12px;
  background: repeating-linear-gradient(-45deg, var(--hatch) 0 10px, transparent 10px 20px), var(--tray); font: 500 13px/1.4 var(--mono); color: var(--muted); }
.wall__item figcaption { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 0 2px; }
.wall__t { font: 500 15px/1.35 var(--text); color: #131415; }
.wall__m { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.wall__item figcaption { display: block; }
/* real work: natural aspect ratio, full column width, tile height hugs the image */
.wall__crop { position: relative; display: block; width: 100%; margin: 0; padding: 0; appearance: none; font: inherit; text-align: inherit; cursor: zoom-in;
  background-repeat: no-repeat; background-size: 100% auto; background-position: top center; isolation: isolate; overflow: hidden; min-height: 160px; max-height: 800px; border-radius: 10px; border: 1px solid var(--line); background-color: var(--tray); }
.wall__crop:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wall__img { display: block; width: 100%; height: auto; min-height: 160px; object-fit: cover; transform-origin: center; opacity: 0; transition: opacity .5s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.wall__img.is-in { opacity: 1; }
/* hover: the piece zooms a little inside its frame (the frame clips it) and a dark veil with a magnifier appears */
/* phone screens carry their own rounded device corners: the tile needs a radius at least as large, or its corners cut into the screen */
.wall--phones .wall__crop { border-radius: 19px; background-color: #fff; }
.wall__zoom { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(10,11,13,.34); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.wall__zoom svg { width: 16px; height: 16px; display: block; }
.wall__crop:hover .wall__img, .wall__crop:focus-visible .wall__img { transform: scale(1.06); }
.wall__crop:hover .wall__zoom, .wall__crop:focus-visible .wall__zoom { opacity: 1; }
/* tiles taller than the cap: a gradual blur plus a soft fade into the wall background, hinting the piece continues */
.wall__blur { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 1; pointer-events: none; }
.wall__crop.is-clipped .wall__blur { display: block; }
.wall__blur i { position: absolute; inset: 0; }
.wall__blur i:nth-child(1) { -webkit-backdrop-filter: blur(.5px); backdrop-filter: blur(.5px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12.5%, #000 37.5%, transparent 50%); mask-image: linear-gradient(to bottom, transparent 0%, #000 12.5%, #000 37.5%, transparent 50%); }
.wall__blur i:nth-child(2) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(to bottom, transparent 12.5%, #000 37.5%, #000 62.5%, transparent 75%); mask-image: linear-gradient(to bottom, transparent 12.5%, #000 37.5%, #000 62.5%, transparent 75%); }
.wall__blur i:nth-child(3) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to bottom, transparent 37.5%, #000 62.5%, #000 87.5%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 37.5%, #000 62.5%, #000 87.5%, transparent 100%); }
.wall__blur i:nth-child(4) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(to bottom, transparent 62.5%, #000 87.5%, #000 100%); mask-image: linear-gradient(to bottom, transparent 62.5%, #000 87.5%, #000 100%); }
.wall__crop.is-clipped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white) 96%); }
@media (prefers-reduced-motion: reduce) { .wall__img, .wall__zoom { transition: none; } .wall__crop:hover .wall__img { transform: none; } }

/* image viewer: the piece on a blurred dark overlay; click outside it to close */
.viewer { position: fixed; inset: 0; z-index: 1000; display: flex; padding: 4vh 4vw; overflow: hidden; overscroll-behavior: contain; cursor: zoom-out; outline: none;
  background: rgba(10,11,13,.74); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; transition: opacity .2s ease; }
.viewer.is-open { opacity: 1; }
/* every piece, however tall, is shown whole: it scales down to fit within 80% of the screen height (and 92% of the width) */
.viewer__img { display: block; margin: auto; flex: none; max-width: 92vw; max-height: 80vh; width: auto; height: auto; border-radius: 10px; cursor: default;
  box-shadow: 0 24px 80px rgba(0,0,0,.45); opacity: 0; transform: scale(.97); transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.viewer__img.is-in { opacity: 1; }
.viewer.is-open .viewer__img { transform: none; }
/* previous / next arrows, pinned to the screen edges */
.viewer__nav { position: fixed; top: 50%; z-index: 1; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  color: #fff; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; transition: background .2s ease, opacity .2s ease; }
.viewer__nav--prev { left: max(16px, 2vw); } .viewer__nav--next { right: max(16px, 2vw); }
.viewer__nav:hover:not(:disabled) { background: rgba(255,255,255,.26); }
.viewer__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.viewer__nav:disabled { opacity: .25; cursor: default; }
.wall__item figcaption .wall__m { display: block; margin-top: 5px; }

/* carousel intro: its own full-width slide, centred, no box */
.carousel__intro { flex: none; height: 100%; padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; }
.carousel__title { font-size: 56px; line-height: 1; }
.carousel__desc { max-width: 520px; font-size: 19px; }
/* cards: smaller titles, larger client logos */
.cc__title { font-size: 32px; line-height: 1.1; }
.cc__logo { height: 34px; max-width: 220px; }
.cc__wordmark { font-size: 26px; line-height: 34px; }
.cc__top { min-height: 38px; }
/* case cards: logo row separated from the content; title back to 40px; service badges stacked at the cover's top right */
.cc__body > .cc__top { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.cc__title { font-size: 40px; line-height: 1.08; }
.cc__overlay { left: auto; right: 16px; top: 16px; bottom: auto; }
.cc__overlay .svc-badges { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; gap: 6px; }

/* focus rings: none for mouse/touch clicks; for Tab keyboard users keep a ring drawn inside the element so it never gets clipped */
html.pointer-nav :focus, html.pointer-nav :focus-visible { outline: none !important; }
.tab:focus-visible, .bar-btn:focus-visible, .case-card:focus-visible, .crumb a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 10px; }

/* ---------- tab strip → breadcrumb (horizontal only) ----------
   1. tabs that aren't in the breadcrumb fade out (they keep their place, nothing reflows)
   2. the active tab's title slides sideways to its resting spot and dims to the "parent" colour
   3. chevron + page title slide in from the right at the same time */
.shell__strip { position: relative; }
.shell__strip .tab { transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
.shell__strip .sep { transition: opacity .25s ease; }
.is-crumb .tab:not([aria-current="page"]), .is-crumb .sep { opacity: 0; pointer-events: none; }
.is-crumb .tab[aria-current="page"] .kbd, .is-crumb .tab[aria-current="page"]::before { opacity: 0; transition: opacity .2s ease; }
.is-crumb .tab[aria-current="page"] .tab__label { opacity: .5; }
.is-crumb .tab[aria-current="page"]:hover .tab__label { opacity: .8; }
.crumb-tail { position: absolute; top: 0; left: 0; height: 48px; display: flex; align-items: center; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(28px); transition: opacity .3s ease, transform .5s cubic-bezier(.4,0,.2,1); }
.is-crumb .crumb-tail { opacity: 1; transform: none; transition: opacity .35s ease .08s, transform .5s cubic-bezier(.4,0,.2,1); }
.crumb-tail img { flex: none; }
.crumb-tail__name { padding: 0 16px 0 2px; font: 500 14px/1.34 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
@media (min-width: 481px) { .shell__strip { overflow: hidden; } }


/* Playground category thumbnail: staggered masonry columns, tilted as a group, clipped by the card's visual area */
.cc__visual--thumb { position: relative; overflow: hidden; padding: 0; background: var(--tray); }
.pgt { position: absolute; left: 50%; top: 50%; width: 128%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; align-items: start;
  transform: translate(-50%, -50%) rotate(-7deg); transform-origin: center; pointer-events: none; }
.pgt__col { display: flex; flex-direction: column; gap: 9px; }
.pgt__col:nth-child(odd) { margin-top: -38px; } .pgt__col:nth-child(even) { margin-top: 26px; } .pgt__col:nth-child(3n) { margin-top: -8px; }
.pgt__img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .5s ease; border-radius: 6px; border: 1px solid var(--line); background-color: var(--tray); background-repeat: no-repeat; background-size: 100% auto; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.pgt__img.is-in { opacity: 1; }

/* case cover images */
.cc__visual--img { background-color: var(--tray); background-size: cover; background-repeat: no-repeat; }

/* full-page designs: show the top (hero) of each, cropped to a short window */
.pgt__img--top { aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }

/* Website previews: the page sits inside a framed viewport that scrolls, at a readable width, instead of being shrunk to fit */
.viewer__frame { display: contents; outline: none; }
.viewer--scroll .viewer__frame { display: block; flex: none; margin: auto; width: min(92vw, var(--vw, 1000px)); height: 80vh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(120,120,120,.5) transparent; border-radius: 10px; background: #fff; cursor: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.45); transform: scale(.97); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.viewer--scroll.is-open .viewer__frame { transform: none; }
.viewer--scroll .viewer__img { width: 100%; max-width: none; max-height: none; height: auto; margin: 0; border-radius: 0; box-shadow: none; transform: none; }

/* Opaque backing for artwork on the wall: if an image has transparent corners or gaps, show white (the wall colour), never the blurred preview behind it.
   (Not used in the preview overlay: there, transparent rounded corners must stay transparent over the dark blur.)
   On the category thumbnails the blurred preview is dropped altogether once the real image has loaded. */
.wall__img { background-color: #fff; }
.pgt__img.is-in { background: #fff; }

/* viewer loading: soft placeholder (the wall image) under a spinner until the full image arrives */
.viewer__img { transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .3s ease, filter .4s ease; }
.viewer__img.is-lq { filter: blur(7px); }
.viewer__spin { display: none; position: fixed; left: 50%; top: 50%; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none;
  border: 2.5px solid rgba(255,255,255,.28); border-top-color: #fff; border-radius: 50%; animation: viewer-spin .8s linear infinite, viewer-spin-in .2s ease .25s backwards; }
.viewer.is-loading .viewer__spin { display: block; }
@keyframes viewer-spin { to { transform: rotate(360deg); } }
@keyframes viewer-spin-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .viewer__spin { animation: none; } .viewer__img { transition: none; } }

/* "Scroll to see more": a small white hint under the frame for pieces that scroll; it fades once the visitor starts scrolling */
.viewer__hint { position: fixed; left: 50%; bottom: max(12px, 3vh); z-index: 2; display: flex; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none;
  color: #fff; font: 500 12px/1 var(--text); letter-spacing: .02em; white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,.5); opacity: 0; transition: opacity .35s ease; }
.viewer--scroll.is-open:not(.is-scrolled):not(.is-loading) .viewer__hint { opacity: .92; }
.viewer__mouse { display: block; flex: none; }
.viewer__wheel { animation: viewer-wheel 1.6s ease-in-out infinite; }
@keyframes viewer-wheel { 0% { transform: translateY(0); opacity: 1; } 65% { transform: translateY(5px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .viewer__wheel { animation: none; } }

/* Wall tiles rise into place from the bottom (the shared scene-in animation slides sideways, so the wall has its own).
   Each tile gets a small stagger from its position, set inline in js/app.js. */
@keyframes wall-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wall__item { animation: none; } }

/* No layout shift while a preview loads: the box is sized from the artwork's own width and height (--fw / --fh, set in js/app.js), so it is exactly the same
   size for the blurred placeholder (the smaller wall image) and for the full image that replaces it. It still never exceeds 92% of the screen width,
   80% of the screen height, or the artwork's own pixel size. */
.viewer:not(.viewer--scroll) .viewer__img { width: min(calc(var(--fw) * 1px), 92vw, calc(80vh * var(--fw) / var(--fh))); height: auto; aspect-ratio: var(--fw) / var(--fh); max-width: none; max-height: none; }
/* the placeholder's blur must not bleed past the box and then snap back in */
.viewer:not(.viewer--scroll) .viewer__img.is-lq { clip-path: inset(0 round 10px); }
.viewer--scroll .viewer__img.is-lq { clip-path: inset(0); }

/* slim segmented progress bar (between the content and the bottom bar) */
.shell__progress { display: flex; gap: 4px; flex: none; height: 7px; padding: 0 2px; }
.shell__progress > span { flex: 1 1 0; min-width: 0; border-radius: 4px; background: #e2e2e2; transition: background-color .3s ease; }
.shell__progress > span.is-on { background: var(--accent); }
.shell__progress.is-empty { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .shell__progress > span { transition: none; } }

/* the carousel intro slide is clickable: a click anywhere on it moves on to the first card */
.carousel__intro { cursor: pointer; }


/* ================= Case study page: one vertically scrolling page ================= */
.casepage { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--white); border: 1px solid var(--line); border-radius: 12px; scrollbar-width: thin; container-type: inline-size; }
.casepage__in { padding: 36px 40px 64px; display: flex; flex-direction: column; gap: 30px; }
/* top: who the client is, who backs them, then the title and intro */
.cp-head { display: flex; flex-direction: column; gap: 18px; }
.cp-company { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 30px; margin-bottom: 22px; } /* extra air between the logo row and the title (18px gap + 22px = 40px) */
.cp-logo .cc__logo { height: 36px; max-width: 240px; }
.cp-logo .cc__wordmark { font-size: 26px; line-height: 36px; }
.cp-backed { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-left: 30px; border-left: 1px solid var(--line); }
.cp-title { margin: 0; font-family: var(--brand-display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(26px, 4.4cqw, 44px); line-height: 1.06; color: #131415; text-wrap: balance; }
.cp-intro { margin: 0; font: 400 17px/1.6 var(--text); color: var(--body); max-width: 74ch; }
/* body: main column + sticky sidebar */
/* the cards sit in the right column from the very top, level with the logo, title and intro; the story continues under the title */
.cp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "head aside" "main aside"; column-gap: 40px; row-gap: 52px; align-items: start; }
.cp-head { grid-area: head; padding-bottom: 40px; border-bottom: 1px solid var(--line); }   /* separator under title + intro */
.cp-main { grid-area: main; }
.cp-aside { grid-area: aside; }
.cp-main { display: flex; flex-direction: column; gap: 76px; min-width: 0; }   /* more air between the sections of a case study */
.cp-aside { display: flex; flex-direction: column; gap: 16px; }
.cp-card { border: 1px solid var(--line); border-radius: 16px; padding: 8px 20px; background: var(--white); }
.cp-card .svc-badges { padding: 6px 0 14px; }
.cp-card__title { display: block; padding: 14px 0 10px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cp-fact { padding: 13px 0; border-top: 1px dashed var(--line); font: 400 14px/1.45 var(--text); }
.cp-fact:first-child { border-top: 0; }
.cp-fact__k { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.cp-fact__v { color: #131415; font-weight: 500; }
.cp-accent { color: var(--accent); font-weight: 700; }
@container (max-width: 820px) {
  .casepage__in { padding: 28px 22px 56px; }
  .cp-cols { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "aside" "main"; }
  .cp-aside { position: static; }
  .cp-backed { padding-left: 0; border-left: 0; }
}
/* sections */
/* the cover sits at the very top of the page, edge to edge */
.cp-hero { aspect-ratio: 21 / 9; border-bottom: 1px solid var(--line); background-color: var(--tray); background-size: cover; background-repeat: no-repeat; }
.cp-sec { display: flex; flex-direction: column; gap: 12px; }
.cp-label { font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.cp-h2 { margin: 0; font: 700 25px/1.22 var(--display); letter-spacing: -.02em; color: #131415; text-wrap: balance; max-width: 34ch; }
.cp-p { margin: 0; font: 400 16px/1.65 var(--text); color: var(--body); max-width: 68ch; }
.cp-link { align-self: flex-start; font: 500 14px/1 var(--text); color: #131415; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.cp-link:hover { border-color: #131415; }
.cp-list { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cp-list li { position: relative; padding-left: 22px; font: 400 15px/1.55 var(--text); color: var(--body); max-width: 66ch; }
.cp-list li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.cp-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.cp-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; font: 500 14px/1.4 var(--text); color: #131415; }
.cp-steps__n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 600 12px/1 var(--mono); }
/* the work: groups of pieces, each a horizontal strip */
.cp-work { display: flex; flex-direction: column; gap: 34px; }
.cp-series__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cp-count { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.series { position: relative; display: flex; flex-direction: column; gap: 14px; }
.series__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 2px; scrollbar-width: none; }
.series__track::-webkit-scrollbar { display: none; }
.series__item { flex: none; margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
.series .wall__crop { height: 480px; min-height: 0; max-height: none; }
.series .wall__img { height: 100%; min-height: 0; object-position: top center; }
.series .wall__img--contain { object-fit: contain; object-position: center; }
.series__item figcaption { display: block; padding: 0 2px; }
.series__item figcaption .wall__m { display: block; margin-top: 5px; }
.series__bar { display: flex; align-items: center; gap: 12px; }
.series__arrows { display: flex; gap: 8px; }
.series__arrow { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: #131415; cursor: pointer; transition: background .2s ease, border-color .2s ease, opacity .2s ease; }
.series__arrow:hover:not(:disabled) { background: var(--tray); border-color: #131415; }
.series__arrow:disabled { opacity: .3; cursor: default; }
.series__arrow svg { width: 18px; height: 18px; display: block; }
/* outcome */
.cp-outcome__row { display: flex; flex-direction: column; gap: 20px; }
.cp-metric { font-family: var(--brand-display); font-weight: 900; text-transform: uppercase; font-size: clamp(44px, 7.5cqw, 76px); line-height: 1; color: #131415; margin-bottom: 10px; }
.cp-quote { margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--tray); display: flex; flex-direction: column; gap: 16px; }
.cp-quote blockquote { margin: 0; font: 400 16px/1.6 var(--text); color: #131415; }
.cp-quote figcaption { display: flex; flex-direction: column; gap: 3px; font: 400 13px/1.35 var(--text); color: var(--muted); }
.cp-quote figcaption b { font-weight: 600; color: #131415; font-size: 14px; }
.cp-quote__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .series__track { scroll-behavior: auto; } }

/* sidebar badges: small, compact and wrapped, one consistent size */
.cp-card .svc-badges { gap: 6px; padding: 2px 0 16px; }
.cp-card .svc-badge { height: 26px; padding: 0 10px 0 4px; gap: 6px; font: 500 12px/1 var(--text); }
.cp-card .svc-badge__icon { width: 18px; height: 18px; }
.cp-card .svc-badge__icon svg { width: 11px; height: 11px; }
/* the website link lives in the facts card */
.cp-fact__v .cp-link { display: inline; align-self: auto; font: 500 14px/1.45 var(--text); }
/* the grid of the remaining work at the bottom of a case study page */
.cp-stack { display: flex; flex-direction: column; gap: 28px; }
.cp-stack .wall__crop { max-height: 720px; }

/* Case study cover cards (the carousel): the title is in the primary face (same as the title inside a case study), the title and the description each on one line.
   Scoped to .case-card so the Services cards keep their look. The shared title size is set by fitCoverTitles() in js/app.js. */
.case-card .cc__title { font-family: var(--brand-display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; line-height: 1.06; max-width: none; white-space: nowrap; text-wrap: nowrap; }
.case-card .cc__desc { max-width: none; white-space: nowrap; }

/* ---------- case study / category chrome: previous and next in the top strip, scroll hint at the bottom ---------- */
.strip-nav { position: absolute; top: 0; height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 0; background: none; cursor: pointer;
  font: 500 18px/1.34 var(--text); letter-spacing: -.27px; color: var(--ink); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 2; }
.strip-nav--prev { left: 4px; }
.strip-nav--next { right: 4px; }
.is-crumb .strip-nav { opacity: 1; pointer-events: auto; transition: opacity .35s ease .15s; }
.is-crumb .strip-nav:disabled { opacity: .35; cursor: default; pointer-events: none; }
.strip-nav:not(:disabled):hover .icon-tile { background: #e2e2e2; }
.strip-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 10px; }
.strip-nav__label { max-width: clamp(80px, 20vw, 260px); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .strip-nav__label { display: none; } }
/* inside a case / category: previous and next hold the corners, the scroll hint sits dead centre */
.is-item .bar-btn--start, .is-item .bar-btn--end { flex: 1 1 0 !important; min-width: 0; }
.is-item .bar-btn--center { flex: 0 0 auto !important; }
.is-item .sep { display: none; }
.is-item .bar-btn--start .bar-btn__inner, .is-item .bar-btn--end .bar-btn__inner { max-width: 100%; overflow: hidden; white-space: nowrap; }
.bar-btn.is-hint:disabled:not(.is-hidden) { opacity: 1; cursor: default; color: var(--muted); }
.icon-tile--hint { color: var(--ink); }
.icon-tile--hint svg { opacity: .5; }
/* swipe: horizontal drags are ours, vertical scrolling stays native, no text selection while dragging */
.shell__body { touch-action: pan-y; }
.casepage, .wall { touch-action: pan-y; }
.series__track { touch-action: pan-x pan-y; }
/* neighbour slide that peeks in while dragging */
.peek { position: absolute; inset: 0; z-index: 1; pointer-events: none; will-change: transform; }
html.is-swiping, html.is-swiping * { user-select: none !important; cursor: grabbing !important; }
.shell__body img { -webkit-user-drag: none; }

/* ---------- cursor: circle with an arrow near the edges, pill with the action in the middle ---------- */
.cur { position: fixed; left: 0; top: 0; z-index: 900; pointer-events: none; opacity: 0; transition: opacity .16s ease; will-change: transform; }
.cur.is-on { opacity: 1; }
.cur__in { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 999px; background: #131415; color: #fff; overflow: hidden; display: block;
  box-shadow: 0 6px 20px rgba(0,0,0,.22); transform: translate(-50%, -50%) scale(.6);
  transition: width .3s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1); }
.cur.is-on .cur__in { transform: translate(-50%, -50%) scale(1); }
.cur__arrow { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .15s ease; }
.cur__arrow svg { display: block; transition: transform .2s ease; }
.cur.is-left .cur__arrow svg { transform: scaleX(-1); }
.cur__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; font: 500 15px/1 var(--text); letter-spacing: -.01em; opacity: 0; transition: opacity .18s ease; }
.cur.is-pill .cur__label { opacity: 1; }
.cur.is-pill .cur__arrow { opacity: 0; }
html.cur-on, html.cur-on * { cursor: none !important; }   /* only while the custom cursor is showing, i.e. never over a link or button */
@media (prefers-reduced-motion: reduce) { .cur, .cur__in, .cur__arrow svg, .cur__label { transition: none; } }

/* Key outcome in the facts card: the description sits under the label instead of beside it (only this fact) */
.cp-fact--stack .cp-fact__k { display: block; margin: 0 0 8px; }
.cp-fact--stack .cp-fact__v { display: block; }

/* intro slides: the first progress segment is a 5 s loader */
.shell__progress > span { position: relative; overflow: hidden; }
.shell__progress > span.is-timer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: left center; transform: scaleX(0); animation: seg-fill var(--intro-ms, 5s) linear forwards; }
.shell__progress.is-paused > span.is-timer::after { animation-play-state: paused; }
@keyframes seg-fill { to { transform: scaleX(1); } }

/* work strips: no header row; the arrows float over the strip's sides and show only when the strip overflows */
.series__arrow { position: absolute; top: 216px; z-index: 3; opacity: 0; pointer-events: none; background: var(--white); box-shadow: 0 4px 16px rgba(0,0,0,.14); }
.series__arrow--prev { left: 10px; }
.series__arrow--next { right: 10px; }
.series.has-overflow .series__arrow:not(:disabled) { opacity: 1; pointer-events: auto; }
.series__arrow:disabled { opacity: 0; }

/* images from the live site's case studies, under the section they illustrate: one image full width, two side by side, three as one large and two small */
.cp-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: -10px; }
.cp-figs--lead .cp-fig:first-child { grid-column: 1 / -1; }
.cp-fig { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cp-fig img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--tray); }
.cp-fig figcaption { padding: 0 2px; font: 400 13px/1.45 var(--text); color: var(--muted); }
@container (max-width: 640px) { .cp-figs { grid-template-columns: minmax(0, 1fr); } }

/* work strips fade out on the side that has more to scroll, instead of being cut off hard */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.series__track { --fade-l: 0px; --fade-r: 0px; transition: --fade-l .25s ease, --fade-r .25s ease;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); }
.series.can-right .series__track { --fade-r: 96px; }
.series.can-left .series__track { --fade-l: 96px; }

/* testimonial in the side column, under "Our services" (the separate Outcome section is gone: the key outcome is in the facts card) */
.cp-quote--aside { padding: 20px; gap: 14px; }
.cp-quote--aside blockquote { font-size: 15px; line-height: 1.6; }

/* "How the engagement grew": vertically stacked steps joined by lines and arrowheads, like a flowchart */
.cp-flow { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: stretch; width: min(100%, 480px); }
.cp-flow__node { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 20px 12px 12px; margin-bottom: 30px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.cp-flow__node:last-child { margin-bottom: 0; }
.cp-flow__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 11%, #fff); }
.cp-flow__icon svg { width: 20px; height: 20px; display: block; }
.cp-flow__txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cp-flow__k { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cp-flow__t { font: 500 16px/1.3 var(--text); letter-spacing: -.01em; color: #131415; }
/* connector: a line from the icon down to the next step, ending in an arrowhead */
.cp-flow__node:not(:last-child)::after { content: ""; position: absolute; left: 32px; top: 100%; width: 2px; height: 30px; background: #d4d4d4; }
.cp-flow__node:not(:last-child)::before { content: ""; position: absolute; left: 28px; top: calc(100% + 20px); width: 9px; height: 9px; border-right: 2px solid #d4d4d4; border-bottom: 2px solid #d4d4d4; transform: rotate(45deg); z-index: 1; }

/* the gap between sections grew (46px -> 76px); the images and work strips that belong to a section keep their old, closer distance to it */
.cp-figs { margin-top: -40px; }
.cp-sec:has(> .series) { margin-top: -30px; }

.cp-fig { cursor: zoom-in; }
.cp-fig:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 12px; }
.cp-fig img { transition: filter .15s; }
.cp-fig:hover img { filter: brightness(.96); }
.shell__body.is-ribbon > :not(.ribbon):not(.wash) { visibility: hidden; }
.ribbon__frame--wide { right: auto; width: max-content; }
.ribbon { position: absolute; z-index: 2; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.ribbon__frame { position: absolute; top: 0; bottom: 0; }
.ribbon *, .ribbon *::before, .ribbon *::after { animation: none !important; transition: none !important; }
.shell { position: relative; }
/* while cards travel, the deck container (not the carousel's own box) is the clip */
html.is-swiping .carousel, .shell__body.is-carousel-moving .carousel { overflow: visible; }
/* intro slides: a white card like every other slide */
.carousel__intro { box-sizing: border-box; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }

/* ---------- stageshow pass: calmer, overlapping arrivals; one focus language; balanced type ----------
   Additive only. Slide content rises in a short stagger after the scene fades in (arrivals overlap, nothing waits).
   Services pitch deck / wall styles are untouched. */
@keyframes ss-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.scene .fs3c > *, .scene .fs7c > *, .scene .grid > *, .scene .tags > * {
  animation: ss-rise .5s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--i, 0) * 60ms + 90ms);
}
.scene .fs3c > :nth-child(2), .scene .fs7c > :nth-child(2), .scene .logorow > :nth-child(2), .scene .grid > :nth-child(2) { --i: 1; }
.scene .fs3c > :nth-child(3), .scene .fs7c > :nth-child(3), .scene .logorow > :nth-child(3), .scene .grid > :nth-child(3) { --i: 2; }
.scene .fs3c > :nth-child(4), .scene .fs7c > :nth-child(4), .scene .logorow > :nth-child(4), .scene .grid > :nth-child(4) { --i: 3; }
.scene .fs7c > :nth-child(n+5), .scene .logorow > :nth-child(n+5), .scene .grid > :nth-child(n+5) { --i: 4; }

/* cards lift with a soft shadow, and settle back on the same curve */
.card, .logochip { transition: border-color .2s ease, transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, background .2s ease; }
.card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.07); }
.card:active { transform: translateY(0); }

/* one focus language across the stage */
.logochip:focus-visible, .chipbtn:focus-visible, .card:focus-visible, .tslide button:focus-visible, .series__arrow:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* type: balanced headings, tabular figures for stats */
.stage .h1, .stage .h2, .stage .fs__h, .stage .h-display { text-wrap: balance; }
.stage .quote, .stage .lead, .stage .fs__body { text-wrap: pretty; }
.stage .num, .stage .num--stat { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .scene .fs3c > *, .scene .fs7c > *, .scene .logorow > *, .scene .grid > *, .scene .tags > * { animation: none; }
  .card, .logochip { transition: none; }
}

/* One title size across slides: stage-based .h1 titles match the fluid slides' .fs__h (72 / 1920 of the width ≈ 60px on the 1600 stage), same brand face and case. */
.stage .h1 { font-family: var(--brand-display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; font-size: 60px; line-height: 1.08; }

/* Rotating word in the "team that ships" title: stacked in one grid cell (width = widest word), each shown for 1/n of the cycle */
.swap { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.swap > span { grid-area: 1 / 1; opacity: 0; transform: translateY(60%); animation: swap-word calc(var(--n) * 2.4s) cubic-bezier(.22,.61,.36,1) infinite; animation-delay: calc(var(--k) * 2.4s - var(--phase, 0s)); }
@keyframes swap-word {
  0% { opacity: 0; transform: translateY(60%); }
  4%, 14.5% { opacity: 1; transform: none; }
  18.5%, 100% { opacity: 0; transform: translateY(-60%); }
}
@media (prefers-reduced-motion: reduce) { .swap > span { animation: none; } .swap > span:first-child { opacity: 1; transform: none; } }

/* Home outcomes line: inside the deck, anchored to the bottom of the viewport, metric in the accent colour. */
.outcomes { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; margin: 0; padding: 0 16px; text-align: center; pointer-events: none; font: 500 13px/1.4 var(--mono); letter-spacing: .02em; color: var(--muted); }
.outcomes b { font-weight: 600; color: var(--accent); }
.outcomes__line { display: inline-block; transition: opacity .35s ease, transform .35s ease; }
.outcomes__line.is-out { opacity: 0; transform: translateY(4px); }
.outcomes.is-off { display: none; }
@media (prefers-reduced-motion: reduce) { .outcomes__line { transition: none; } }

/* No focus rings anywhere. */
*:focus, *:focus-visible, .fs10__r:focus-visible ~ .fs10__tabs { outline: none !important; }
/* The deck is driven by clicks, taps and swipes: no text selection, no double-tap zoom, no tap highlight. */
.page, .shell, .shell * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.shell, .shell * { touch-action: manipulation; }
.shell__body, .casepage, .wall { touch-action: pan-y; }
.series__track { touch-action: pan-x pan-y; }

/* Progress: the current segment is full strength, segments already visited sit at 60%. */
.shell__progress > span.is-seen { opacity: .6; }
.shell__progress > span { transition: background-color .3s ease, opacity .3s ease; }

/* "use arrow keys" hint: orange and looping on the first slide, grey otherwise. */
.note--right { transition: color .4s ease; }
.note--right.is-hot { color: var(--accent); }
.note--right.is-hot svg path:nth-child(-n+2) { stroke-dasharray: 1; animation: hint-grow 2.2s ease-in-out infinite; }
.note--right.is-hot svg path:nth-child(3) { animation: hint-head 2.2s ease-in-out infinite; }
.note--right.is-hot svg { animation: hint-fade 2.2s ease-in-out infinite; }
@keyframes hint-grow { 0% { stroke-dashoffset: 1; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes hint-head { 0%, 55% { opacity: 0; } 65%, 100% { opacity: 1; } }
@keyframes hint-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .note--right.is-hot svg, .note--right.is-hot svg path { animation: none !important; } }
/* the text wiggles a little at the start of each loop so the hint catches the eye */
.note--right.is-hot span { display: inline-block; transform-origin: 20% 60%; animation: hint-wiggle 2.2s ease-in-out infinite; }
@keyframes hint-wiggle { 0%, 40%, 100% { transform: none; } 6% { transform: translateX(-3px) rotate(-2.5deg); } 12% { transform: translateX(3px) rotate(2.5deg); } 18% { transform: translateX(-2.5px) rotate(-2deg); } 24% { transform: translateX(2px) rotate(1.5deg); } 30% { transform: translateX(-1px) rotate(-.8deg); } 36% { transform: translateX(.5px) rotate(.3deg); } }
@media (prefers-reduced-motion: reduce) { .note--right.is-hot span { animation: none !important; } }

/* The responsive (phone) rules live at the end of stage.css so they load after the slide styles. */

/* No text selection anywhere (and so no text cursor); form fields stay editable */
html, body, body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }

/* Zoom-out travel: every slide is the rounded inner container, so its corner radius is kept at 12px ON SCREEN while the ribbon is scaled down (animated from js) */
@property --rr { syntax: "<length>"; inherits: true; initial-value: 12px; }
.ribbon .viewport, .ribbon .tcar, .ribbon .casepage, .ribbon .wall, .ribbon .case-card, .ribbon .carousel__intro { border-radius: var(--rr); }

/* background guides draw themselves, hold, fade out and draw again (same feel as the Clutch swirl) */
@keyframes guide-h { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 20%, 74% { clip-path: inset(0 0 0 0); opacity: 1; } 92%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes guide-v { 0% { clip-path: inset(0 0 100% 0); opacity: 1; } 20%, 74% { clip-path: inset(0 0 0 0); opacity: 1; } 92%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .guides i { animation: none; } }

/* side bar buttons on narrow screens: icon only (label hidden, still announced via aria-label) */
.bar-btn.is-icon .bar-btn__inner { font-size: 0; gap: 0; }
.bar-btn.is-icon { padding-inline: 12px; }

/* bottom-bar label change: out (fade + lift) then in (rise) */
.bar-btn__inner.is-out { animation: bar-label-out .15s cubic-bezier(.4,0,1,1) forwards; }
@keyframes bar-label-out { to { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .bar-btn__inner.is-out { animation: none; opacity: 0; } }

/* section tab icons: text height, muted; the active tab's icon is darker */
.tab__icon { flex: none; width: 1em; height: 1em; margin-right: 2px; color: var(--ink); opacity: .5; transition: opacity .3s ease; }
.tab:hover .tab__icon { opacity: .8; }
.tab[aria-current="page"] .tab__icon { opacity: 1; }

/* the arrow cursor: light card with a hairline border, muted icon and the viewer frame's hard (0-blur) shadow */
.cur.is-arrow .cur__in { background: #fff; border: 1px solid #e6e6e6; box-shadow: 0 2px 0 .4px rgba(0,0,0,.08); box-sizing: border-box; }
.cur.is-arrow .cur__arrow svg { stroke: #8f8f8f; }
.cur__in { transition: width .3s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1), background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }

/* outcomes line: a white pill with a hairline border, 16px above the bottom of the viewer */
.outcomes { bottom: 16px; padding: 0 16px; display: flex; justify-content: center; }
.outcomes__line { display: block; max-width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; }

.outcomes { bottom: 24px; }

/* laser pointer: canvas over the deck, no system cursor over non-interactive deck content while it is active */
.laser { position: fixed; z-index: 850; pointer-events: none; }
html.laser-on .shell__body, html.laser-on .shell__body * { cursor: none; }

/* outcomes pill: at the top of the viewer */
.outcomes { top: 24px; bottom: auto; }

/* while drawing with the laser, the arrow / pill cursor stays out of the way */
html.laser-drag .cur { display: none; }
html.laser-drag, html.laser-drag * { cursor: none !important; }

/* content arrival: blocks rise in one after another (slower and softer than before), whichever section */
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.rise-i { animation: rise-in .6s cubic-bezier(.22,.61,.36,1) both !important; animation-delay: calc(30ms + var(--ri, 0) * 55ms - var(--rs, 0ms)) !important; }
@media (prefers-reduced-motion: reduce) { .rise-i { animation: none !important; } }
/* while the section ribbon is travelling, the real content waits (paused) and then rises in once it is in focus */
.shell__body.is-ribbon .rise-i, .shell__body.is-ribbon .scene { animation-play-state: paused !important; }
.ribbon .rise-i { animation: none !important; }

/* the target frame of the section ribbon shows no content yet: it rises in after landing (a slide-to-slide peek animates while it slides in and the real content continues from there) */
.ribbon__blank .rise-i { animation: none !important; opacity: 0; }

/* intro slides (first slide of a section): content simply appears */
.shell__body.is-intro-slide > :not(.peek) .scene { animation: none !important; }   /* (the incoming peek keeps animating while an intro slide slides away) */

/* the older per-card stagger (ss-rise) is replaced by the block rise-in above; and a slide that has already arrived shows instantly */
.scene .fs3c > *:not(.rise-i), .scene .fs7c > *:not(.rise-i), .scene .logorow > *:not(.rise-i), .scene .grid > *:not(.rise-i), .scene .tags > *:not(.rise-i), .scene .fs9__rows > *:not(.rise-i) { animation: none !important; }
.shell__body.slide-seen > :not(.peek) .scene { animation: none !important; }
.casepage.is-seen .wall__item, .casepage.is-seen * { animation: none !important; }
.wall.is-seen .wall__item { animation: none !important; }
.peek .scene { animation: none !important; }
.peek .tslide, .shell__body.slide-seen > :not(.peek) .tslide, .shell__body.is-intro-slide > :not(.peek) .tslide { animation: none !important; }

/* Services category page: a header that says which category you are looking at */
.wall__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 20px 28px; margin: 0 0 24px; border-bottom: 1px solid var(--line); }
.wall__crumb { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.wall__title { margin: 0; font-family: var(--brand-display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.06; color: #131415; text-wrap: balance; }
.wall__desc { margin: 0; max-width: 62ch; font: 400 17px/1.55 var(--text); color: var(--body); }
.wall__count { font: 500 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* outcomes pill: the client's favicon leads the line */
.outcomes__line { display: inline-flex; align-items: center; gap: 10px; }
.outcomes__fav { flex: none; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; border-radius: 4px; }
.outcomes__fav--unbound { background-size: auto 100%; background-position: left center; width: calc(18px * 96 / 128); border-radius: 0; }   /* exactly the shield: the logo's first 96 of 128 columns, before the "u" starts */   /* the shield, cropped from the wordmark */

/* black-themed progress bar and Book a call button (the orange stays for accents inside the slides) */
.shell__progress > span.is-on { background: #131415; }
.shell__progress > span.is-timer::after { background: #131415; }
.cta { background: #131415; }
.cta:hover { filter: drop-shadow(0 1.5px .75px rgba(0,0,0,.06)) brightness(1.5); }

/* service icons set inline inside running text: level with the text, 6px before the word they belong to */
.lead .svc-badge--icon { display: inline-flex; vertical-align: middle; font-size: inherit; width: 1.45em; height: 1.45em; margin: -.2em 6px -.2em .1em; flex: none; }   /* em = the surrounding text, so the icon scales with it */
.lead .svc-badge--icon .svc-badge__icon { width: 100%; height: 100%; }
.lead .svc-badge--icon .svc-badge__icon svg { width: .8em; height: .8em; }

/* progress bar tones (dark ink laid over the unvisited grey): visited 25%, current 50% */
.shell__progress > span { background: #e2e2e2; }
.shell__progress > span.is-on { background: linear-gradient(rgba(19,20,21,.25), rgba(19,20,21,.25)), #e2e2e2; opacity: 1; }
.shell__progress > span.is-on.is-cur { background: linear-gradient(rgba(19,20,21,.5), rgba(19,20,21,.5)), #e2e2e2; }
.shell__progress > span.is-seen { opacity: 1; }
.shell__progress > span.is-timer::after { background: rgba(19,20,21,.5); }

/* filled inline icons in running text: no container, centred on the text, 6px of space on each side */
.ig { display: inline-block; white-space: nowrap; margin: 0 0 0 6px; }
.ig .inl { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.17em; margin-right: 6px; flex: none; }

/* a new section's progress segments ease in (rise + fade) and then fill, one after another, once the slide is in focus */
.shell__progress.is-swapping > span { animation: seg-swap .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes seg-swap { from { opacity: 0; transform: scaleY(.3) scaleX(.85); } to { opacity: 1; transform: none; } }

/* Services cards: the category row (icon, name, description) sits on top with a separator under it, the preview below. The open page's header uses the same row, so the two line up when a card opens. */
.cc--head-top .cc__body { order: -1; padding: 20px 20px 24px; border-bottom: 1px solid var(--line); }
.cc--head-top .cc__visual { border-bottom: 0; }

/* the open Services page: header laid out exactly like the card header it grows from (icon + name row, description, separator) */
.wall__head { gap: 12px; padding: 20px 20px 24px; margin: 0 0 24px; }
.wall__row { display: flex; align-items: center; gap: 12px; width: 100%; }
.wall__row .wall__count { margin-left: auto; }
.wall__desc { max-width: 640px; font-size: 18px; line-height: 1.5; }

/* the What clients say intro fills the testimonial frame like the other intro slides */
.tcar .howintro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tcar .howintro .carousel__intro { width: 100%; height: 100%; }

/* hand-written "/portfolio" beside the wordmark: Caveat with a different weight, tilt and baseline on every letter, plus a slight ink wobble */
.logo__hand { display: inline-flex; align-items: baseline; font: 500 42px/1 "Caveat", "Segoe Print", "Bradley Hand", cursive; color: #8a8a8a; transform: rotate(-3deg) translateY(2px); margin-left: 0; letter-spacing: .01em; white-space: nowrap; filter: url(#ink); }
.logo__hand i { font-style: normal; display: inline-block; }
@media (max-width: 480px) { .logo__hand { font-size: 32px; } }

/* "/portfolio": word centred on the slash (its glyph runs from -4.5 to 31 px around the baseline, the word body sits ~4.5px lower), and a tight gap to the wordmark */
.logo__hand { margin-left: -8px; }
.logo__hand-word { display: inline-flex; align-items: baseline; font-weight: inherit; transform: translateY(-4.5px); }

/* header actions: ghost "Go to website" beside the filled "Book a call" */
.site-header__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.cta--ghost { background: transparent; color: var(--ink); border: 1.5px solid currentColor; padding: 8.5px 18.5px; filter: none; opacity: .85; transition: opacity .15s, background .15s; }
.cta--ghost:hover { filter: none; opacity: 1; background: rgba(0,0,0,.05); }


/* the two header buttons: identical height and padding; the ghost one has a 0.6px outline (the filled one carries an invisible border of the same width) */
.site-header__actions .cta { box-sizing: border-box; height: 42px; padding: 0 20px; border: .6px solid transparent; }
.site-header__actions .cta--ghost { border-color: currentColor; }

/* "/portfolio" v2: tighter to the wordmark, and the word lifted so its body sits on the middle of the slash */
.logo__hand { margin-left: -12px; }
.logo__hand-word { transform: translateY(-6px); margin-left: -1px; }

/* "Go to website": globe icon in front, one weight lighter than the filled button (700 -> 600) */
.site-header__actions .cta--ghost { font-weight: 600; gap: 8px; }
.cta__globe { flex: none; display: block; }

.note--tabs { flex-direction: column; align-items: flex-end; text-align: right; }
.note--tabs svg { margin-right: -2px; }

/* with the Clutch badge inside the deck, the deck is the only thing under the header: centre it in the space that is left (it used to sit at the bottom) */
.page > .shell { margin-block: auto; }

/* "Book a call" icon: only shown on phones, where the button becomes a round icon button */
.cta__cal { display: none; }


/* Services page header: no count; the divider runs edge to edge of the page */
.wall__head { margin: -20px -20px 24px; padding: 40px 20px 24px; }
.wall__count { display: none; }
/* "+N" chip for badges that fold away */
.svc-badge.svc-more { padding: 0 12px; height: 32px; display: inline-flex; align-items: center; font: 600 14px/1 var(--text); background: #fff; border: 1px solid var(--line); color: var(--ink); }
/* the progress strip takes no height when there is nothing to show (inside a case / service page) */
.shell__progress.is-empty { display: none; }

.howintro .carousel__intro, .tcar .carousel__intro { border: 0; box-shadow: none; }

/* Phones: navigation is by touch (swipe a slide, tap a card), so the bottom bar goes and the deck gets its height back */
@media (max-width: 480px) { .shell__bar { display: none; } }

/* First-visit swipe guide (phones): the bottom 40% of the screen fades to dark and carries the message; the slide above it keeps nudging sideways (a spring) to show there is more. */
.guide { position: fixed; left: 0; right: 0; bottom: 0; height: 60vh; z-index: 2000; display: flex; align-items: flex-end; justify-content: center; padding: 0 24px calc(48px + env(safe-area-inset-bottom, 0px)); pointer-events: none;
  background: linear-gradient(to top, rgba(18,20,23,.98) 0%, rgba(18,20,23,.96) 38%, rgba(18,20,23,.9) 50%, rgba(18,20,23,.76) 62%, rgba(18,20,23,.55) 73%, rgba(18,20,23,.32) 83%, rgba(18,20,23,.14) 92%, rgba(18,20,23,.04) 97%, rgba(18,20,23,0) 100%); opacity: 0; transition: opacity .35s ease; }
.guide[hidden] { display: none; }
.guide.is-on { opacity: 1; }
.guide__card { width: min(320px, 100%); text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.guide__icon { width: 44px; height: 44px; margin-bottom: 4px; background: #fff; -webkit-mask: url("../assets/icons/hand-swipe-left.svg") center / contain no-repeat; mask: url("../assets/icons/hand-swipe-left.svg") center / contain no-repeat; }
.guide__t { margin: 0; font: 600 20px/1.25 var(--display, "Geist", sans-serif); letter-spacing: -.01em; }
.guide__p { margin: 0 0 10px; font: 400 15px/1.45 var(--text, "Geist", sans-serif); color: rgba(255,255,255,.72); text-wrap: balance; }
.guide__btn { appearance: none; border: 0; cursor: pointer; pointer-events: auto; height: 44px; padding: 0 28px; border-radius: 999px; background: #fff; color: #131415; font: 600 16px/1 var(--text, "Geist", sans-serif); }
.guide__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }


/* ---------- phones: the app bar (brand + hamburger) and the sections menu ---------- */
.m-brand, .m-menu, .mmenu { display: none; }
@media (max-width: 480px) {
  .site-header { display: none; }
  .page { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  /* the tab labels live in the menu now */
  .shell__strip > .tab, .shell__strip > .sep, .shell__strip > .tabsel { display: none !important; }
  .shell__strip:not(.is-crumb) { align-items: center; justify-content: space-between; overflow: visible; }
  .m-brand { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 10px 0 12px; text-decoration: none; min-width: 0; }
  .m-brand .logo__mark { width: 28px; height: 28px; flex: none; }
  .m-brand .logo__hand { font-size: 32px; margin-left: -4px; }
  .m-menu { display: grid; place-items: center; position: static; width: 44px; height: 44px; margin-right: 4px; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; flex: none; }
  .m-menu__bars { position: relative; width: 20px; height: 14px; display: block; }
  .m-menu__bars i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s ease, top .3s cubic-bezier(.22,.61,.36,1); }
  .m-menu__bars i:nth-child(1) { top: 0; } .m-menu__bars i:nth-child(2) { top: 6px; } .m-menu__bars i:nth-child(3) { top: 12px; }
  .m-menu.is-open .m-menu__bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .m-menu.is-open .m-menu__bars i:nth-child(2) { opacity: 0; }
  .m-menu.is-open .m-menu__bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
  .shell__strip.is-crumb .m-brand, .shell__strip.is-crumb .m-menu { display: none; }

  .mmenu { position: fixed; inset: 0; z-index: 1500; display: block; background: rgba(12,14,17,0); transition: background .3s ease; }
  .mmenu[hidden] { display: none; }
  .mmenu.is-open { background: rgba(12,14,17,.55); }
  .mmenu__panel { position: absolute; left: 12px; right: 12px; top: 64px; padding: 8px; border-radius: 18px; background: var(--tray); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.35);
    transform: translateY(-12px) scale(.97); transform-origin: 100% 0; opacity: 0; transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .25s ease; }
  .mmenu.is-open .mmenu__panel { transform: none; opacity: 1; }
  .mmenu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .mmenu__item { appearance: none; border: 0; width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 14px; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; text-align: left;
    font: 500 15px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translateY(-6px); transition: opacity .28s ease, transform .3s cubic-bezier(.22,.61,.36,1), background .15s ease; }
  .mmenu.is-open .mmenu__item { opacity: 1; transform: none; transition-delay: calc(var(--i) * 40ms + 60ms), calc(var(--i) * 40ms + 60ms), 0s; }
  .mmenu__item .tab__icon { width: 20px; height: 20px; flex: none; opacity: .8; }
  .mmenu__label { flex: 1; }
  .mmenu__item:active { background: var(--chip); }
  .mmenu__item[aria-current] { background: var(--chip); }
  .mmenu__item[aria-current]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
}

/* ---- header at narrower widths: first the website button goes icon-only, then the logo drops its wordmark, then (phones) the app bar + menu ---- */
.cta__ext { display: inline; }
@media (max-width: 780px) {
  .site-header__actions .cta--ghost { width: 42px; padding: 0; justify-content: center; gap: 0; }
  .site-header__actions .cta--ghost .cta__text, .site-header__actions .cta--ghost .cta__ext { display: none; }
}
@media (max-width: 600px) { .logo__word { display: none; } .logo__hand { margin-left: 0; } }

/* ---- phones: no container, the deck uses the whole screen ---- */
@media (max-width: 480px) {
  body { padding-left: 0 !important; padding-right: 0 !important; }
  .page { max-width: none; gap: 0 !important; padding-top: max(0px, env(safe-area-inset-top, 0px)) !important; padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important; }
  .shell { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; gap: 0 !important; }
  .shell__strip { height: 56px; padding: 0 4px; }
  .m-brand { height: 56px; }
  .shell__body .viewport, .shell__body .wall, .shell__body .casepage, .shell__body .tcar, .shell__body .case-card, .shell__body .carousel__intro { border: 0 !important; border-radius: 16px !important; }
  .ribbon .viewport, .ribbon .wall, .ribbon .casepage, .ribbon .tcar, .ribbon .case-card { border: 0 !important; }   /* the travelling copies keep their animated radius */
  .shell__progress { padding: 6px 12px 8px; height: auto; }
  .shell__progress > span { height: 4px; }
  .mmenu__close { display: grid; }
}
/* the close button over the menu: a filled circle in the list's colour */
.mmenu__close { display: none; position: fixed; z-index: 2; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--tray); color: var(--ink); cursor: pointer; padding: 0; opacity: 0; transition: opacity .2s ease; }
.mmenu.is-open .mmenu__close { opacity: 1; }
.mmenu__close .m-menu__bars { position: relative; width: 20px; height: 14px; display: block; }
.mmenu__close .m-menu__bars i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s ease, top .3s cubic-bezier(.22,.61,.36,1); }
.mmenu__close .m-menu__bars i:nth-child(1) { top: 0; } .mmenu__close .m-menu__bars i:nth-child(2) { top: 6px; } .mmenu__close .m-menu__bars i:nth-child(3) { top: 12px; }
.mmenu.is-open .mmenu__close .m-menu__bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.mmenu.is-open .mmenu__close .m-menu__bars i:nth-child(2) { opacity: 0; }
.mmenu.is-open .mmenu__close .m-menu__bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.m-menu.is-open { visibility: hidden; }
@media (max-width: 480px) { .mmenu__close { display: grid; } }

/* ---- phones: frames are 94vw wide, centred, so it is clear there are slides on both sides ---- */
@media (max-width: 480px) {
  /* the same 94vw for the slide that is sliding in (.peek), so nothing snaps when a swipe settles */
  .shell__body > .viewport, .shell__body > .tcar, .peek > .viewport, .peek > .tcar { left: 3vw; right: 3vw; }   /* (ribbon frames are 94% wide and centred themselves) */
  .shell__body::before, .shell__body::after { content: ""; position: absolute; top: 0; bottom: 0; width: calc(3vw - 4px); background: #fff; opacity: .5; display: none; pointer-events: none; z-index: 0; }
  .shell__body.sliver-prev::before { display: block; left: 0; border-radius: 0 14px 14px 0; }
  .shell__body.sliver-next::after { display: block; right: 0; border-radius: 14px 0 0 14px; }
}

/* ---- phones: inside pages (a case study, a service) use the full width, no rounded corners, no progress bar, and a soft blur at the bottom while there is more to scroll ---- */
@media (max-width: 480px) {
  .shell__body.in-item::before, .shell__body.in-item::after { display: none !important; }
  .shell__body.in-item .wall, .shell__body.in-item .casepage, .peek > .wall, .peek > .casepage { left: 0; right: 0; border-radius: 0 !important; }
  .shell__body.in-item::after { content: ""; display: block !important; position: absolute; left: 0; right: 0; right: 0; bottom: 0; top: auto; width: auto; height: 64px; border-radius: 0; opacity: 1; pointer-events: none; z-index: 5;
    background: linear-gradient(to top, rgba(255,255,255,.92), rgba(255,255,255,0)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(to top, #000 25%, transparent); mask-image: linear-gradient(to top, #000 25%, transparent); transition: opacity .25s ease; }
  .shell__body.in-item.at-end::after { opacity: 0; }
}

/* ---- phones: card <-> detail page is a grow / shrink, not a swap ---- */
@media (max-width: 480px) {
  /* the page starts clipped to the card's 94% rounded shape and opens up to the full width; coming back, the cards settle in from slightly larger */
  .shell__body.is-expanding > .wall, .shell__body.is-expanding > .casepage { animation: item-expand .42s cubic-bezier(.22,.61,.36,1) both; }
  .shell__body.is-collapsing > .carousel { animation: carousel-return .42s cubic-bezier(.22,.61,.36,1) both; }
  .shell__progress { height: 18px; overflow: hidden; transition: height .38s cubic-bezier(.22,.61,.36,1), padding .38s cubic-bezier(.22,.61,.36,1), opacity .25s ease; }
  .shell__progress.is-empty { display: block !important; height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; visibility: visible; }
}
@keyframes item-expand { from { clip-path: inset(0 3vw round 16px); } to { clip-path: inset(0 0 round 0); } }
@keyframes carousel-return { from { transform: scale(1.06); opacity: .5; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shell__body.is-expanding > *, .shell__body.is-collapsing > * { animation: none !important; } }

/* the outcomes pill keeps its frame while the line changes: only the content fades, and the width eases to the new text */
.outcomes__line.is-out { opacity: 1 !important; transform: none !important; }
.outcomes__line { transition: width .32s cubic-bezier(.22,.61,.36,1); }
.outcomes__fav, .outcomes__clip { transition: opacity .3s ease, transform .3s ease; }
.outcomes__line.is-out .outcomes__fav, .outcomes__line.is-out .outcomes__clip { opacity: 0; transform: translateY(4px); }

/* phones: the cover mosaic on a Services card is zoomed in so the narrow card is filled with artwork, not empty space */
@media (max-width: 720px) { .pgt { width: 260%; gap: 12px; } .pgt__col { gap: 12px; } }

/* ---- phones: resting neighbour slides (real content just off each edge) ---- */
.rest-peek { z-index: 0 !important; }
@media (max-width: 480px) {
  .rest-peek > .viewport, .rest-peek > .tcar { left: 3vw; right: 3vw; }
  html.is-swiping .rest-peek, .shell__body.is-sliding > .rest-peek, .shell__body.is-ribbon > .rest-peek { visibility: hidden; }   /* the moving copies take over while a slide moves; none during a section jump */
  .shell__body.is-ribbon::before, .shell__body.is-ribbon::after { display: none !important; }
}
/* ---- phones: testimonials and anything else that scrolls inside a slide only claim vertical pans, so sideways swipes always reach the deck ---- */
.shell__body .tslide, .shell__body .tcar, .shell__body .viewport { touch-action: pan-y; }
.shell__body .tslide { overflow-x: hidden; }

/* testimonial "Read case study" link: only on phones, where the bottom bar (which carries it elsewhere) is gone */
.tslide__case { display: none; }
@media (max-width: 480px) { .tslide__case { display: inline-flex; align-self: flex-start; margin-top: 4px; } }

/* in-between widths (481-860px): inactive tabs show just their icon, the current one its name, so the strip fits without being cut off */
@media (min-width: 481px) and (max-width: 860px) {
  .shell__strip > .tab:not([aria-current]) .tab__label, .shell__strip > .tab .kbd { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .shell__strip > .tab:not([aria-current]) { padding-inline: 14px; }
}

/* phones: inside a case or service page the menu stays available; Close sits just left of it */
@media (max-width: 480px) {
  .shell__strip.is-crumb .m-menu { display: grid !important; position: absolute; right: 4px; top: 6px; }
  .shell__strip.is-crumb .m-close { right: 54px !important; }
  .shell__strip.is-crumb .crumb-tail { max-width: calc(100% - 160px) !important; }
}

/* service badges on a card cover are labels only: taps and clicks go straight through to the card / the next-previous navigation (inside a case page they stay clickable) */
.cc__overlay, .cc__overlay * { pointer-events: none !important; cursor: inherit; }

/* phones, inside a page: breadcrumb, Close and the menu button share one centre line in the 56px bar */
@media (max-width: 480px) {
  .shell__strip.is-crumb .crumb-tail { height: 100% !important; align-self: stretch; }
  .shell__strip.is-crumb .m-close, .shell__strip.is-crumb .m-menu { top: 50% !important; transform: translateY(-50%); }
  .shell__strip.is-crumb .m-close { height: 36px; right: 60px !important; }   /* 8px clear of the menu button */
  .shell__strip.is-crumb .m-menu { right: 8px !important; }
}

/* phones, inside a page: Close moves to the far left ("x Close"), the breadcrumb follows it, the menu button stays at the far right */
@media (max-width: 480px) {
  .shell__strip.is-crumb .m-close { left: 12px; right: auto !important; flex-direction: row-reverse; padding: 0 14px 0 12px; }
  .shell__strip.is-crumb .crumb-tail { margin-left: 102px; padding-left: 0 !important; max-width: calc(100% - 102px - 60px) !important; }   /* 12px after Close */
}

/* the inside-page "back" button: a round icon button with a left arrow on phones; the text "Close x" elsewhere */
.m-close__back { display: none; }
@media (max-width: 480px) {
  .shell__strip.is-crumb .m-close { width: 40px; height: 40px !important; padding: 0 !important; justify-content: center; border-radius: 50%; left: 8px; }
  .shell__strip.is-crumb .m-close .m-close__label { display: none; }
  .shell__strip.is-crumb .m-close .m-close__back { display: block; }
  /* breadcrumb: 16px clear of the back button and of the menu button; it truncates rather than touch them */
  .shell__strip.is-crumb .crumb-tail { margin-left: 60px !important; max-width: calc(100% - 60px - 72px) !important; }   /* (+4px strip padding = 16px after the back button; ends 16px before the menu) */
}

/* one rule for the whole deck: the slide in focus is bright, its neighbours are dimmed (as the idle cards in a carousel always were) */
.carousel__intro { transition: opacity .35s ease; }
.carousel__intro.is-idle { opacity: .25; }
@media (max-width: 480px) {
  .shell__body > .peek { opacity: .25; transition: opacity .38s ease; }
  .shell__body > .peek.is-entering { opacity: 1; }
  .shell__body > .is-leaving { opacity: .25; transition: opacity .38s ease; }
  .peek .case-card, .peek .carousel__intro { opacity: 1 !important; }   /* the neighbour is dimmed as a whole, not twice */
}