/* ==========================================================================
   Matmon - editorial brand system
   Brand constants: navy #0D5270 · cyan #2CA6DE · gold #F6B819 · grey #3B4951
   ========================================================================== */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 0.5rem + 6.2vw, 7rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius / motion / shadow */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow: 680px;
  --content-default: 1000px;
  /* 12 column content grid, modeled on ndstudio.gov. The container is fluid with
     a fixed side gutter and caps at 2160px outer (2080px of content). Every box is
     border box, so the cap already includes the gutters. Phone: 2 columns, 24px
     gutter. Tablet: 12 columns, 20px gutter, 1280px cap. Desktop: 12 columns,
     40px gutter, 2160px cap. Columns are separated by a 20px gap. */
  --gutter: 24px;
  --grid-cols: 2;
  --grid-gap: 16px;
  --content-wide: none;

  /* Fonts */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

:root,
[data-theme='light'] {
  --color-bg: #f7f6f3;
  --color-surface: #fdfcfa;
  --color-surface-2: #f2f0ec;
  --color-surface-offset: #eceae5;
  --color-ink-block: #0b1c28;
  --color-divider: #dedbd4;
  --color-border: #cdc9c1;

  --color-text: #131f28;
  --color-text-muted: #5c6670;
  --color-text-faint: #9aa1a8;
  --color-text-inverse: #f7f6f3;

  /* Brand palette - Matmon Style Guide */
  --color-primary: #0d5270; /* Dark Blue */
  --color-primary-hover: #0a4058;
  --color-primary-active: #072f42;
  --color-cyan: #2ca6de; /* Accent Cyan */
  --color-cyan-deep: #1c85b8;
  --color-grey: #3b4951; /* Accent Grey */
  --color-gold: #b98204;
  --color-gold-bright: #f6b819;

  --shadow-sm: 0 1px 2px rgb(11 28 40 / 0.06);
  --shadow-md: 0 6px 20px rgb(11 28 40 / 0.09);
  --shadow-lg: 0 18px 48px rgb(11 28 40 / 0.14);
}


/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  min-height: 100dvh;
  line-height: 1.65;
  font-family: var(--font-body);
  font-weight: 500; /* Montserrat Medium - style guide body weight */
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
ul[role='list'],
ol[role='list'] {
  list-style: none;
}
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: none;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
  line-height: 1.1;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}
p,
li,
figcaption {
  text-wrap: pretty;
}
p {
  max-width: 68ch;
}

a {
  color: inherit;
  text-decoration: none;
}
a,
button,
input,
textarea,
select {
  transition:
    color var(--transition-interactive),
    background var(--transition-interactive),
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive),
    opacity var(--transition-interactive);
}

::selection {
  background: color-mix(in oklab, var(--color-gold-bright) 35%, transparent);
  color: var(--color-text);
}
:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---------- layout primitives ---------- */
@media (min-width: 768px) {
  :root {
    --gutter: 20px;
    --grid-cols: 12;
    --grid-gap: 20px;
    --content-wide: 1280px;
  }
}
@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --content-wide: 2160px;
  }
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gap);
}
.shell {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--default {
  max-width: var(--content-default);
}
.shell--narrow {
  max-width: var(--content-narrow);
}

section {
  position: relative;
}
.band {
  padding-block: clamp(var(--space-16), 9vw, var(--space-32));
}
.band--tight {
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}
.band--rule {
  border-top: 1px solid var(--color-divider);
}
.band--surface {
  background: var(--color-surface-2);
}
.band--ink {
  background: var(--color-ink-block);
  color: #e6ebef;
}
.band--ink h2,
.band--ink h3 {
  color: #fff;
}
.band--ink .eyebrow {
  color: var(--color-gold-bright);
}
.band--ink p {
  color: #b7c2ca;
}

/* editorial section head: number + vertical label + title */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  margin-bottom: clamp(var(--space-8), 4vw, var(--space-16));
}
@media (min-width: 900px) {
  .sec-head {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
  }
}
/* Case study section heads with the gold eyebrow removed. The left column
   held the eyebrow, so with it gone the head collapses to one column and the
   headline starts at the left edge of the content area, in line with the
   visuals below it. Needs the duplicate inside the 900px query because the
   two-column rule there would otherwise win on source order. */
.sec-head--flush {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .sec-head--flush {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sec-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  padding-top: 0.4em;
  border-top: 2px solid var(--color-gold);
  display: inline-block;
}
.sec-title {
  font-size: var(--text-xl);
  max-width: 24ch;
}
.sec-head p {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-base);
}
/* `.sec-head p` above and `.band--ink p` earlier in this file have EQUAL specificity,
   so on a dark band the muted grey (#5c6670) won on source order and body copy dropped
   to ~3:1 contrast. Latent until the Western Foods "07 / The feed" section became the
   first place in the site to put a .sec-head on an ink band - /about/ and /what-we-do/
   were checked and do NOT nest a <p> inside a .sec-head there. Now measures 9.57:1. */
.band--ink .sec-head p {
  color: #b7c2ca;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 46ch;
}

.side-label {
  display: none;
}
@media (min-width: 1200px) {
  .side-label {
    display: block;
    position: absolute;
    left: calc(var(--gutter) * -1 + 1.1rem);
    top: 0;
    writing-mode: vertical-rl;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-text-faint);
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.85em 1.5em;
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
}
.btn svg {
  width: 1em;
  height: 1em;
  flex: none;
}
.btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}
.btn--ghost {
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn--ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--gold {
  background: var(--color-gold-bright);
  color: #1a1204;
}
.btn--gold:hover {
  background: var(--color-gold);
  color: #fff;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.link-arrow svg {
  width: 0.95em;
  height: 0.95em;
  transition: transform var(--transition-interactive);
}
.link-arrow:hover {
  border-color: currentColor;
}
.link-arrow:hover svg {
  transform: translateX(4px);
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--transition-interactive),
    background var(--transition-interactive);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-divider);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 4.75rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-text);
  flex: none;
}
.brand__logo {
  display: block;
  height: 1.5rem;
  width: auto;
}
@media (min-width: 768px) {
  .brand__logo {
    height: 1.75rem;
  }
}

/* ---------------------------------------------- animated header lockup
   The header lockup is two inline SVGs: the knot mark and a wordmark whose
   six letters are separate paths. On load the letters fly in from the right
   and settle against the mark. The wordmark stays visible while the knot
   spins on scroll, driven by --brand-spin (degrees) on the <a>. Intro
   transforms live on wrapper elements so they never fight the scroll spin. */
.brand--anim {
  --brand-h: 1.5rem;
  --brand-word: calc(var(--brand-h) * 4.96);
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .brand--anim {
    --brand-h: 1.75rem;
  }
}
.brand__lockup {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--brand-h) * 0.2);
}
.brand__markwrap {
  display: block;
  flex: none;
}
.brand--anim .brand__mark {
  display: block;
  height: var(--brand-h);
  width: var(--brand-h);
  transform: rotate(calc(var(--brand-spin, 0) * 1deg));
  transform-origin: 50% 50%;
}
.brand__stage {
  display: block;
  overflow: hidden;
  flex: none;
  width: var(--brand-word);
}
.brand--anim .brand__word {
  display: block;
  height: var(--brand-h);
  width: var(--brand-word);
  opacity: 1;
}
.brand__ltr {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
/* pre-animation state only once JS confirms it will run the intro */
.brand--anim[data-brand-intro] .brand__ltr {
  opacity: 0;
  animation: brandLetterIn 0.72s cubic-bezier(0.19, 0.86, 0.24, 1) both;
  animation-delay: calc(var(--i) * 90ms + 160ms);
}
.brand--anim[data-brand-intro] .brand__markwrap {
  animation: brandMarkIn 0.82s cubic-bezier(0.19, 0.86, 0.24, 1) both;
}
@keyframes brandLetterIn {
  from {
    opacity: 0;
    transform: translateX(calc(420px + var(--i) * 560px)) scale(0.82);
  }
  55% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes brandMarkIn {
  from {
    opacity: 0;
    transform: rotate(-160deg) scale(0.4);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand--anim .brand__mark {
    transform: none;
  }
  .brand--anim .brand__word {
    opacity: 1;
  }
  .brand__stage {
    width: var(--brand-word);
  }
}

.nav {
  margin-left: auto;
  display: none;
}
@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-4), 1.8vw, var(--space-8));
  }
}
.nav a {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  padding-block: 0.35em;
  border-bottom: 2px solid transparent;
}
.nav a:hover {
  color: var(--color-text);
}
.nav a[aria-current='page'] {
  color: var(--color-text);
  border-bottom-color: var(--color-gold-bright);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
@media (min-width: 1024px) {
  .header__actions {
    margin-left: 0;
  }
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.icon-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
.header__cta {
  display: none;
}
@media (min-width: 640px) {
  .header__cta {
    display: inline-flex;
  }
}

/* Text link with a superscript Matmon knot instead of a generic arrow. */
.nav-cta {
  align-items: center;
  gap: 0.3em;
  min-height: 2.75rem;
  padding-left: 0.25rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}
.nav-cta__label {
  position: relative;
  padding-bottom: 0.28em;
}
.nav-cta__label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--ease-out);
}
.nav-cta:hover .nav-cta__label::after,
.nav-cta:focus-visible .nav-cta__label::after {
  transform: scaleX(1);
}
.nav-cta__mark {
  position: relative;
  top: -0.4em;
  flex: none;
  display: block;
  width: 0.62em;
  height: 0.62em;
  background: currentColor;
  -webkit-mask: url('/assets/img/matmon-mark.svg') center / contain no-repeat;
  mask: url('/assets/img/matmon-mark.svg') center / contain no-repeat;
  transition:
    transform 300ms var(--ease-out),
    background-color 300ms var(--ease-out);
}
.nav-cta:hover .nav-cta__mark,
.nav-cta:focus-visible .nav-cta__mark {
  transform: rotate(45deg);
  background: var(--color-cyan);
}
.nav-cta:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .nav-cta__mark,
  .nav-cta__label::after {
    transition: none;
  }
  .nav-cta:hover .nav-cta__mark,
  .nav-cta:focus-visible .nav-cta__mark {
    transform: none;
  }
}
.nav-toggle {
  display: grid;
}
@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
  padding: var(--space-4) 0 var(--space-8);
}
/* Open, the panel fills the screen below the header so the menu reads as its
   own page rather than a short tray, and it scrolls on its own if the list runs
   taller than the phone. */
.mobile-nav.is-open {
  display: flex;
  height: calc(100svh - var(--header-h, 77px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.is-open > .shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}
.mobile-nav ul {
  list-style: none;
  display: grid;
  gap: var(--space-1);
}
body.has-mobile-nav {
  overflow: hidden;
}
.mobile-nav a {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 5.4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.mobile-nav .mobile-nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  margin-top: auto;
  border-bottom: 0;
  color: #fff;
  text-align: center;
}
/* ---------- hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(var(--space-16), 10vw, var(--space-32)) clamp(var(--space-12), 7vw, var(--space-24));
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(var(--space-10), 5vw, var(--space-20));
  }
}
.hero__rule {
  width: 4.5rem;
  height: 2px;
  background: var(--color-gold-bright);
  margin-bottom: var(--space-6);
}
.hero h1 {
  font-size: var(--text-hero);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.94;
  text-transform: uppercase;
}
.hero h1 .dot {
  color: var(--color-gold-bright);
}
.hero h1 .thin {
  display: block;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.hero__copy {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 44ch;
}
.hero__meta {
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-6);
}
.hero__meta div span {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-text);
}
.hero__meta div small {
  display: block;
  margin-top: 0.15em;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.hero__mark {
  justify-self: center;
  width: min(100%, 26rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  justify-items: center;
}
.hero__mark-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-border);
}
.hero__knot {
  width: min(62%, 14rem);
  height: auto;
  animation: knot-in 1.1s var(--ease-out) both;
}
@keyframes knot-in {
  from {
    opacity: 0;
    transform: scale(0.94) rotate(-6deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__knot {
    animation: none;
  }
}

/* ---------- knot / draw animation ---------- */
.knot path,
.knot circle,
.knot rect {
  vector-effect: non-scaling-stroke;
}
.knot--draw path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: draw 2.6s var(--ease-out) forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .knot--draw path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ---------- reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- "what we see" list ---------- */
.see-list {
  list-style: none;
  display: grid;
  gap: 0;
}
.see-list li {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-divider);
  align-items: baseline;
}
@media (min-width: 800px) {
  .see-list li {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-8);
  }
}
.see-list h3 {
  font-size: var(--text-lg);
  font-weight: 700;
}
.see-list p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin: 0;
}

/* ---------- work cards ---------- */
.work-grid {
  display: grid;
  gap: clamp(var(--space-6), 2.5vw, var(--space-10));
}
@media (min-width: 860px) {
  .work-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .work-card {
    grid-column: span 3;
  }
  .work-card--wide {
    grid-column: span 6;
  }
  .work-card--third {
    grid-column: span 2;
  }
}
.work-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    border-color var(--transition-interactive),
    transform var(--transition-interactive),
    box-shadow var(--transition-interactive);
}
.work-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.work-card--wide {
  flex-direction: column;
}
@media (min-width: 860px) {
  .work-card--wide {
    flex-direction: row;
    align-items: stretch;
  }
  .work-card--wide .work-card__figure {
    flex: 1 1 58%;
    aspect-ratio: auto;
  }
  .work-card--wide .work-card__body {
    flex: 1 1 42%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .work-card--wide .work-card__body .link-arrow {
    margin-top: var(--space-2);
  }
}
.work-card__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-divider);
}
.work-card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  aspect-ratio: 16 / 10;
  transition: transform 600ms var(--ease-out);
}
.work-card--wide .work-card__figure img {
  height: auto;
  aspect-ratio: 16 / 10;
}
.work-card:hover .work-card__figure img {
  transform: scale(1.03);
}
.work-card__kicker {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.work-card__body {
  padding: clamp(var(--space-5), 2vw, var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
}
.work-card__body h3 {
  font-size: var(--text-lg);
}
.work-card__body p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}
.work-card__body .link-arrow {
  margin-top: auto;
  padding-top: var(--space-2);
  align-self: flex-start;
}
.figcap {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  padding: var(--space-2) var(--space-3);
}

/* ---------- capability grid ---------- */
.cap-grid {
  display: grid;
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 640px) {
  .cap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .cap-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.cap {
  background: var(--color-surface);
  padding: clamp(var(--space-5), 2vw, var(--space-8));
  display: grid;
  gap: var(--space-2);
  align-content: start;
}
.cap span {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-gold);
}
.cap h3 {
  font-size: var(--text-base);
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: 0;
}
.cap p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------- two-column editorial ---------- */
.split {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: start;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .split--sticky > :first-child {
    position: sticky;
    top: 7rem;
  }
  .split--wide-right {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.prose > * + * {
  margin-top: var(--space-4);
}
.prose h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-12);
}
.prose h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-10);
}
.prose p,
.prose li {
  color: var(--color-text-muted);
}
.prose strong {
  color: var(--color-text);
}
.prose ul,
.prose ol {
  padding-left: 1.15rem;
  display: grid;
  gap: var(--space-2);
}
.prose blockquote {
  border-left: 2px solid var(--color-gold-bright);
  padding-left: var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.35;
  color: var(--color-text);
}
.prose blockquote p {
  color: inherit;
  max-width: 40ch;
}

/* checklists */
.ticks {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  padding: 0;
}
.ticks li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text-muted);
}
.ticks li::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.55em;
  border: 1.5px solid var(--color-cyan);
  border-radius: 2px;
}

/* pill list */
.pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
}
.pills li {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0.45em 0.85em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}

/* ---------- article / index cards ---------- */
.card-grid {
  display: grid;
  gap: clamp(var(--space-5), 2vw, var(--space-8));
}
@media (min-width: 700px) {
  .card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 2vw, var(--space-8));
  transition:
    border-color var(--transition-interactive),
    transform var(--transition-interactive);
}
a.card:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
}
.card h3 {
  font-size: var(--text-lg);
}
.card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.card__meta {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ---------- page hero (interior) ---------- */
.page-hero {
  padding-block: clamp(var(--space-12), 7vw, var(--space-24)) clamp(var(--space-8), 4vw, var(--space-12));
  border-bottom: 1px solid var(--color-divider);
}
.page-hero h1 {
  font-size: var(--text-2xl);
  max-width: 26ch;
}
.page-hero .lede {
  margin-top: var(--space-6);
}
.crumb {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-5);
}
.crumb a:hover {
  color: var(--color-primary);
}

/* ---------- case study spec table ---------- */
.spec {
  border-top: 1px solid var(--color-divider);
}
.spec div {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
@media (min-width: 560px) {
  .spec div {
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--space-6);
  }
}
.spec dt {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.spec dd {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.figure-block {
  margin: 0;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.figure-block img {
  width: 100%;
}
.figure-block figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-divider);
}
.insight-visual {
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
}
.insight-visual picture {
  display: block;
}

.asset-slot {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  background: var(--color-surface-2);
  display: grid;
  gap: var(--space-2);
}
.asset-slot span {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.asset-slot p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--color-ink-block);
  color: #fff;
  border-radius: 0;
}
.cta-band h2 {
  font-size: var(--text-2xl);
  color: #fff;
  max-width: 22ch;
}
.cta-band p {
  color: #aebac3;
  margin-top: var(--space-5);
  font-size: var(--text-base);
}
.cta-band .btn--ghost {
  border-color: rgb(255 255 255 / 0.35);
  color: #fff;
}
.cta-band .btn--ghost:hover {
  border-color: #fff;
  color: #fff;
}
.cta-band.has-possibility-motion {
  isolation: isolate;
  background: #0b1c28;
}
.cta-band.has-possibility-motion > .shell {
  position: relative;
  z-index: 1;
}
.cta-motion-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(90deg, transparent 26%, rgb(0 0 0 / 28%) 48%, #000 70%);
}
.cta-convergence-core {
  position: absolute;
  left: 79%;
  top: 50%;
  width: clamp(56px, 6.5vw, 94px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background: #d8bb7b;
  opacity: .72;
  -webkit-mask: url('/assets/img/matmon-mark.svg') center / contain no-repeat;
  mask: url('/assets/img/matmon-mark.svg') center / contain no-repeat;
}
.cta-connection-mark {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 26px;
  width: 26px;
  height: 16px;
}
.cta-connection-mark::before {
  content: "";
  position: absolute;
  inset: calc(50% - .5px) 2px auto;
  height: 1px;
  background: currentColor;
  opacity: .45;
}
.cta-connection-mark i {
  position: relative;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.cta-connection-mark i:nth-child(2) {
  width: 6px;
  height: 6px;
}
@media (max-width: 1100px) {
  .cta-band.has-possibility-motion {
    padding-bottom: 236px;
  }
  .cta-motion-canvas {
    mask-image: linear-gradient(180deg, transparent calc(100% - 205px), #000 calc(100% - 180px));
  }
  .cta-convergence-core {
    left: 64%;
    top: auto;
    bottom: 84px;
    width: 52px;
    transform: translateX(-50%);
  }
}
.cta-motion-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 20px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #b9c6cb;
}
.cta-motion-toggle[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .cta-motion-toggle {
    display: none;
  }
}
.cta-motion-toggle::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgb(185 198 203 / 50%);
  border-radius: inherit;
}
.cta-motion-toggle:hover {
  color: #fff;
}
.cta-motion-toggle:hover::before {
  border-color: currentColor;
}
.cta-motion-toggle:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
}
.cta-motion-toggle__icon {
  width: 9px;
  height: 10px;
  border-inline: 3px solid currentColor;
}
.cta-motion-toggle[data-paused="true"] .cta-motion-toggle__icon {
  width: 0;
  height: 0;
  margin-left: 2px;
  border: 5px solid transparent;
  border-left: 8px solid currentColor;
  border-right: 0;
}

/* ---------- contact form ---------- */
.form {
  display: grid;
  gap: var(--space-5);
}
.field {
  display: grid;
  gap: var(--space-2);
}
.field label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.field input,
.field textarea,
.field select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.8em 0.9em;
  font-size: var(--text-base);
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  border-color: var(--color-cyan);
}
.field textarea {
  min-height: 8rem;
  resize: vertical;
}
.form__note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.form-status {
  font-size: var(--text-sm);
  color: var(--color-primary);
  min-height: 1.5em;
}

.steps {
  list-style: none;
  display: grid;
  gap: var(--space-5);
  padding: 0;
}
.steps li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: 0;
  align-items: start;
}
.steps p {
  grid-column: 1;
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.steps strong {
  grid-column: 1;
  display: block;
  color: var(--color-text);
  font-size: var(--text-base);
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--color-ink-block);
  color: #9fadb7;
  padding-block: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-8);
}
.site-footer a {
  color: #cfd8de;
}
.site-footer a:hover {
  color: #fff;
}
.footer__grid {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
}
@media (min-width: 800px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  }
}
.footer__title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}
.footer__brand p {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: #8fa0ab;
  max-width: 34ch;
}
.footer__col h4 {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-4);
}
.footer__col ul {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.footer__bottom {
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
  padding-top: var(--space-6);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: #7d8d98;
}

/* ---------- hero fluid effect (homepage only) ---------- */
.hero--fx {
  background-color: #07161f;
  color: var(--color-text-inverse);
  isolation: isolate;
}
.hero__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* static fallback: shown as-is for reduced-motion or no-WebGL visitors */
  background:
    radial-gradient(85% 70% at 68% 42%, rgb(44 166 222 / 0.3) 0%, rgb(44 166 222 / 0) 60%),
    radial-gradient(70% 60% at 22% 78%, rgb(13 82 112 / 0.65) 0%, rgb(13 82 112 / 0) 65%),
    radial-gradient(55% 55% at 88% 88%, rgb(91 110 225 / 0.22) 0%, rgb(91 110 225 / 0) 60%),
    #07161f;
}
.hero__fx-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.hero__fx-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgb(6 20 28 / 0.88) 0%, rgb(6 20 28 / 0.6) 34%, rgb(6 20 28 / 0.06) 62%, rgb(6 20 28 / 0.3) 100%),
    linear-gradient(to bottom, rgb(6 20 28 / 0.4) 0%, rgb(6 20 28 / 0) 28%, rgb(6 20 28 / 0.5) 100%);
}
.hero--fx > .shell {
  position: relative;
  z-index: 1;
}
.hero--fx h1,
.hero--fx .hero__meta div span {
  color: #fff;
}
.hero--fx .eyebrow {
  color: #7fd0f2;
}
.hero--fx .hero__copy {
  color: #cddce6;
}
.hero--fx .hero__meta {
  border-top-color: rgb(255 255 255 / 0.18);
}
.hero--fx .hero__meta div small {
  color: #8ea3b1;
}
.hero--fx .hero__mark-rule {
  background: rgb(255 255 255 / 0.22);
}
.hero--fx .hero__knot {
  filter: drop-shadow(0 0 28px rgb(44 166 222 / 0.45));
}
.hero--fx .btn--ghost {
  color: #fff;
  border-color: rgb(255 255 255 / 0.45);
}
.hero--fx .btn--ghost:hover {
  background: rgb(255 255 255 / 0.1);
  border-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .hero__fx-canvas {
    display: none;
  }
}

/* ---------- galactic hero backdrop (homepage hero only) ----------
   The WebGL galaxy in assets/js/hero-galaxy.js composites at up to 0.70 alpha,
   so this panel is both the base the canvas sits on and the static fallback
   shown to reduced-motion visitors and to browsers without WebGL. */
[data-hero-galaxy].hero--fx {
  background-color: #080808;
}
/* live galaxy: near-black plate plus four very soft brand-blue orbs drifting
   behind the canvas, so large empty regions stay black rather than washing out */
[data-hero-galaxy] .hero__fx {
  /* the plate the canvas sits on, and the reduced-motion / no-WebGL stand-in:
     a faint galactic band on the same diagonal the shader draws */
  background:
    linear-gradient(163deg, rgb(9 7 25 / 0) 40%, rgb(126 158 196 / 0.1) 49%, rgb(9 7 25 / 0) 50%, rgb(126 158 196 / 0.07) 57%, rgb(9 7 25 / 0) 68%),
    #090719;
}
[data-hero-galaxy] .hero__fx::before,
[data-hero-galaxy] .hero__fx::after {
  content: '';
  position: absolute;
  inset: -12%;
  pointer-events: none;
}
[data-hero-galaxy] .hero__fx::before {
  background:
    radial-gradient(34% 40% at 8% 6%, rgb(0 173 239 / 0.07) 0%, rgb(0 173 239 / 0) 70%),
    radial-gradient(28% 34% at 96% 42%, rgb(0 173 239 / 0.05) 0%, rgb(0 173 239 / 0) 70%);
  filter: blur(40px);
  animation: heroOrbA 22s ease-in-out infinite;
}
[data-hero-galaxy] .hero__fx::after {
  background:
    radial-gradient(40% 46% at 40% 104%, rgb(0 173 239 / 0.05) 0%, rgb(0 173 239 / 0) 70%),
    radial-gradient(20% 24% at 84% 10%, rgb(71 233 255 / 0.05) 0%, rgb(71 233 255 / 0) 70%);
  filter: blur(56px);
  animation: heroOrbB 28s ease-in-out infinite;
}
@keyframes heroOrbA {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(2.5%, 2%, 0);
  }
}
@keyframes heroOrbB {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-2%, -2.5%, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-hero-galaxy] .hero__fx::before,
  [data-hero-galaxy] .hero__fx::after {
    animation: none;
  }
}
/* static galactic fallback: only when the canvas never starts (no WebGL,
   reduced motion, coarse-pointer opt-out) */
[data-hero-galaxy]:not([data-galaxy='on']) .hero__fx {
  background:
    radial-gradient(58% 52% at 66% 38%, rgb(0 173 239 / 0.26) 0%, rgb(0 173 239 / 0) 62%),
    radial-gradient(46% 44% at 82% 62%, rgb(71 233 255 / 0.12) 0%, rgb(71 233 255 / 0) 60%),
    radial-gradient(52% 50% at 30% 74%, rgb(170 88 255 / 0.16) 0%, rgb(170 88 255 / 0) 64%),
    radial-gradient(40% 40% at 14% 22%, rgb(36 227 173 / 0.08) 0%, rgb(36 227 173 / 0) 62%),
    radial-gradient(30% 30% at 92% 14%, rgb(245 31 158 / 0.07) 0%, rgb(245 31 158 / 0) 60%),
    #090719;
}
[data-hero-galaxy] .hero__fx-canvas {
  z-index: 1;
}
[data-hero-galaxy] .hero__fx-scrim {
  z-index: 2;
  background:
    linear-gradient(100deg, rgb(8 8 8 / 0.6) 0%, rgb(8 8 8 / 0.34) 34%, rgb(8 8 8 / 0) 62%, rgb(8 8 8 / 0.18) 100%),
    linear-gradient(to bottom, rgb(8 8 8 / 0.3) 0%, rgb(8 8 8 / 0) 30%, rgb(8 8 8 / 0.4) 100%);
}
[data-hero-galaxy] .hero__knot {
  filter: drop-shadow(0 0 30px rgb(0 173 239 / 0.5));
}
[data-hero-galaxy] .eyebrow {
  color: #8fdcf6;
}
/* hero copy stays light regardless of any light-theme override */
[data-hero-galaxy] h1,
[data-hero-galaxy] .hero__meta div span {
  color: #fff;
}
[data-hero-galaxy] .hero__copy {
  color: #d3dfea;
}

/* ------------------------------------------------------------ portfolio
   Cinematic depth-gallery page. The WebGL field lives in a fixed stage;
   chapter copy scrolls above it. Without JS/WebGL (or with reduced motion)
   the same real photography renders as a static editorial grid. */
.work {
  --work-bg: #f7f6f3;
  --work-ink: #131f28;
  position: relative;
  background: var(--work-bg);
  color: var(--work-ink);
  transition: background-color 0.6s linear;
}
.work__stage {
  display: none;
}
.work[data-work-fx='on'] .work__stage {
  display: block;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  z-index: 0;
  pointer-events: none;
}
.work__canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* scrim holds the opening headline legible over a light-value photograph,
   then clears as the pull-back finishes (--work-cue is hero progress 0..1) */
.work[data-work-fx='on'] .work__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(8, 12, 16, 0.74) 0%,
    rgba(8, 12, 16, 0.4) 46%,
    rgba(8, 12, 16, 0) 74%
  );
  opacity: calc(1 - var(--work-cue, 0));
}
@media (max-width: 819px) {
  .work[data-work-fx='on'] .work__stage::after {
    background: linear-gradient(
      180deg,
      rgba(8, 12, 16, 0.62) 0%,
      rgba(8, 12, 16, 0.52) 55%,
      rgba(8, 12, 16, 0.2) 100%
    );
  }
}
.work__flow {
  position: relative;
  z-index: 1;
}
.work__chapter,
.work__hero,
.work__finale {
  position: relative;
}
.work__hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-inline: var(--gutter);
  padding-block: clamp(var(--space-20), 12vw, var(--space-32));
}
.work__hero-inner {
  max-width: 60rem;
}
.work__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--work-ink);
  opacity: 0.62;
  margin-bottom: var(--space-6);
}
.work__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-8);
  color: var(--work-ink);
}
.work__lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  max-width: 44ch;
  color: var(--work-ink);
  opacity: 0.82;
}
.work__cue {
  margin-top: clamp(var(--space-10), 6vw, var(--space-20));
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--work-ink);
  opacity: 0.7;
}
.work__cue-track {
  display: block;
  width: 5.5rem;
  height: 2px;
  background: currentColor;
  opacity: 0.28;
  position: relative;
  overflow: hidden;
}
.work__cue-track::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(var(--work-cue, 0));
  transform-origin: left;
  background: currentColor;
  opacity: 1;
}
.work__chapter {
  padding-inline: var(--gutter);
  padding-block: clamp(var(--space-16), 9vw, var(--space-24));
}
.work[data-work-fx='on'] .work__chapter {
  min-height: 300vh;
  display: grid;
  align-content: space-between;
  gap: 100vh;
}
.work__panel {
  max-width: 34rem;
}
.work__panel--right {
  margin-left: auto;
}
.work__chapter-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  opacity: 0.68;
}
.work__chapter-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-5);
}
.work__panel p {
  font-size: var(--text-base);
  line-height: 1.6;
  opacity: 0.84;
  margin: 0 0 var(--space-5);
}
.work__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.work__list li {
  padding-left: var(--space-5);
  position: relative;
  opacity: 0.86;
}
.work__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
/* readable scrim so copy holds over the moving field */
.work[data-work-fx='on'] .work__panel {
  padding: clamp(var(--space-5), 2.5vw, var(--space-8));
  background: color-mix(in srgb, var(--work-bg) 74%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid color-mix(in srgb, var(--work-ink) 14%, transparent);
  will-change: filter;
}
@supports not (backdrop-filter: blur(4px)) {
  .work[data-work-fx='on'] .work__panel {
    background: color-mix(in srgb, var(--work-bg) 92%, transparent);
  }
}
/* static editorial grid - the no-JS / reduced-motion / context-loss surface */
.work__plates {
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: clamp(var(--space-4), 2vw, var(--space-8));
}
.work[data-work-fx='on'] .work__plates {
  display: none;
}
.work__plate {
  margin: 0;
}
.work__plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: color-mix(in srgb, var(--work-ink) 12%, transparent);
}
.work__plate figcaption {
  font-size: var(--text-xs);
  line-height: 1.5;
  margin-top: var(--space-3);
  opacity: 0.7;
}
.work__rail {
  display: none;
}
.work[data-work-fx='on'] .work__rail {
  display: grid;
  gap: var(--space-3);
  position: fixed;
  right: clamp(0.9rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: none;
}
.work__rail span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--work-ink);
  opacity: 0.26;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.work__rail span.is-active {
  opacity: 1;
  transform: scale(1.5);
}
.work__finale {
  padding-inline: var(--gutter);
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
  display: grid;
  align-content: center;
  text-align: center;
  justify-items: center;
}
.work[data-work-fx='on'] .work__finale {
  min-height: 160vh;
  align-content: start;
  padding-top: 0;
}
.work[data-work-fx='on'] .work__finale-line {
  position: sticky;
  top: 14vh;
}
.work__finale-line {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 40ch;
  margin: 0;
}
@media (max-width: 819px) {
  .work[data-work-fx='on'] .work__chapter {
    min-height: 190vh;
    gap: 60vh;
  }
  .work[data-work-fx='on'] .work__finale {
    min-height: 110vh;
  }
  .work__panel--right {
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .work__stage,
  .work[data-work-fx='on'] .work__stage {
    display: none;
  }
  .work,
  .work__chapter {
    transition: none;
  }
}

/* flat index of engagements below the cinematic chapters */
.work-outro {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
}
.work-index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-divider);
}
.work-index li {
  border-bottom: 1px solid var(--color-divider);
}
.work-index a {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding-block: clamp(var(--space-5), 2.2vw, var(--space-8));
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.35s ease, color 0.35s ease;
}
.work-index a:hover {
  padding-left: var(--space-4);
  color: var(--color-primary);
}
.work-index strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.work-index span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
@media (max-width: 700px) {
  .work-index a {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* print-safe hairline utility */
.hr {
  height: 1px;
  background: var(--color-divider);
  border: 0;
  margin-block: clamp(var(--space-10), 5vw, var(--space-16));
}

/* reactive headline ------------------------------------------------------- */
.rh {
  position: relative;
  --rh-ink: var(--color-ink-block);
}
/* enhanced: the real text stays in the DOM for a11y and SEO, the canvas draws it */
.rh.rh-on {
  color: transparent;
}
.rh.rh-on::selection,
.rh.rh-on ::selection {
  color: var(--color-text);
  background: rgba(44, 166, 222, 0.25);
}
.rh-canvas-wrap {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  display: block;
}
.rh-canvas {
  display: block;
}
.page-hero .rh {
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
@media (prefers-reduced-motion: reduce) {
  .rh.rh-on {
    color: var(--color-text);
  }
  .rh-canvas-wrap {
    display: none;
  }
}

/* ---------- interactive magic: particle typography (what we do) ---------- */
.pmagic {
  overflow: hidden;
}
.pmagic::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 74% at 50% 42%, rgba(13, 82, 112, 0.55), transparent 72%),
    radial-gradient(34% 46% at 82% 88%, rgba(44, 166, 222, 0.14), transparent 76%);
  pointer-events: none;
}
.pmagic > .shell {
  position: relative;
  z-index: 1;
}
.pmagic__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(210px, 27vw, 360px);
  margin-block: clamp(var(--space-4), 2vw, var(--space-8));
}
.pmagic__canvas {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.pmagic__stage--grab {
  cursor: grab;
}
.pmagic__stage--grabbing,
.pmagic__stage--grabbing * {
  cursor: grabbing;
  user-select: none;
}
.pmagic__title {
  margin: 0;
  text-align: center;
  font-size: clamp(2.5rem, 8.6vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: #fff;
}
/* when the particle field paints the words, the real heading stays in the
   document for assistive tech and search but stops painting twice */
.pmagic--on .pmagic__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.pmagic__lead {
  max-width: 62ch;
}
.pmagic__sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: #fff !important;
  text-align: center;
  margin: 0 auto;
  max-width: 34ch;
}
.pmagic__body {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
}
@media (min-width: 900px) {
  .pmagic__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}
.pmagic .pills li {
  color: #cfdae2;
  border-color: rgba(255, 255, 255, 0.22);
}
.pmagic--on .pmagic__hint {
  display: block;
}
.pmagic__cta {
  margin-top: clamp(var(--space-8), 3vw, var(--space-12));
  text-align: center;
}
.pmagic__hint {
  display: none;
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 600;
  color: rgba(207, 218, 226, 0.62);
}
@media (hover: none) {
  .pmagic--on .pmagic__hint,
  .pmagic__hint {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pmagic__canvas,
  .pmagic--on .pmagic__hint,
  .pmagic__hint {
    display: none;
  }
  .pmagic--on .pmagic__title {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }
}

/* ------------------------------------------------------- interactive strip
   A slim full-bleed panel of the homepage space field, used as a live divider
   between page sections. Reuses .hero__fx / .hero__fx-canvas: without WebGL or
   with reduced motion the same gradient backdrop stays as a static panel. */
.fxstrip {
  position: relative;
  overflow: hidden;
  min-height: clamp(150px, 17vw, 240px);
  background: #07161f;
  border-top: 1px solid rgb(255 255 255 / 0.06);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  touch-action: pan-y;
}
/* feathered top and bottom edges so the panel sits into the page */
.fxstrip::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(7 22 31 / 0.55) 0%,
    rgb(7 22 31 / 0) 26%,
    rgb(7 22 31 / 0) 74%,
    rgb(7 22 31 / 0.55) 100%
  );
}
.fxstrip__hint {
  display: none; /* only shown once the live field is actually running */
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(0.9rem, 2vw, 1.4rem);
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgb(207 218 226 / 0.42);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.fxstrip[data-fx='on'] .fxstrip__hint {
  display: block;
}
.fxstrip[data-fx='on']:hover .fxstrip__hint {
  opacity: 0;
}
@media (hover: none) {
  .fxstrip[data-fx='on'] .fxstrip__hint,
  .fxstrip__hint {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fxstrip[data-fx='on'] .fxstrip__hint,
  .fxstrip__hint {
    display: none;
  }
}

/* ---------- industries tile grid ---------- */
.ind-grid {
  display: grid;
  gap: clamp(0.75rem, 1.4vw, 1.15rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .ind-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .ind-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.ind-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #0b1c28;
  color: #fff;
  isolation: isolate;
  transition: transform var(--transition-interactive);
}
@media (min-width: 620px) {
  .ind-tile {
    aspect-ratio: 5 / 4;
  }
}
.ind-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition:
    transform 900ms var(--ease-out),
    filter 500ms var(--ease-out);
  filter: saturate(0.92);
}
.ind-tile__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgb(6 20 29 / 0.92) 0%,
      rgb(6 20 29 / 0.72) 34%,
      rgb(6 20 29 / 0.24) 66%,
      rgb(6 20 29 / 0.08) 100%
    );
  transition: opacity 400ms var(--ease-out);
}
.ind-tile__body {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: clamp(1.1rem, 2vw, 1.6rem);
}
.ind-tile__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.15;
  color: #fff;
}
.ind-tile__hook {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgb(230 235 239 / 0.82);
  max-width: 26ch;
}
.ind-tile__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-cyan);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 300ms var(--ease-out),
    transform 300ms var(--ease-out);
}
.ind-tile__more svg {
  transition: transform 300ms var(--ease-out);
}
.ind-tile:hover .ind-tile__img,
.ind-tile:focus-visible .ind-tile__img {
  transform: scale(1.09);
  filter: saturate(1.05);
}
.ind-tile:hover .ind-tile__veil,
.ind-tile:focus-visible .ind-tile__veil {
  opacity: 0.88;
}
.ind-tile:hover .ind-tile__more,
.ind-tile:focus-visible .ind-tile__more {
  opacity: 1;
  transform: translateY(0);
}
.ind-tile:hover .ind-tile__more svg {
  transform: translateX(3px);
}
.ind-tile:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
}
@media (hover: none) {
  .ind-tile__more {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ind-tile__img,
  .ind-tile__more,
  .ind-tile__more svg,
  .ind-tile__veil {
    transition: none;
  }
  .ind-tile:hover .ind-tile__img {
    transform: scale(1.02);
  }
  .ind-tile__more {
    opacity: 1;
    transform: none;
  }
}

/* ---------- photo figure ---------- */
.photo-figure {
  margin: 0;
}
.photo-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
}
.photo-figure figcaption {
  margin-top: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ---------- What We Do: capability rows link to their service page ---------- */
.area-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color var(--transition-interactive),
    border-color var(--transition-interactive);
}
.area-link:hover {
  color: var(--color-primary);
  border-color: currentColor;
}
.area-arrow {
  margin-top: 0.85rem;
}

/* ---------- gap strips: visible cursor affordance ---------- */
.fxstrip {
  --fx-mx: 50%;
  --fx-my: 50%;
  cursor: crosshair;
  transition: border-color 0.35s ease;
}
/* tracked spotlight, painted above the canvas but below the edge feather */
.fxstrip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: radial-gradient(
    220px circle at var(--fx-mx) var(--fx-my),
    rgb(44 166 222 / 0.26) 0%,
    rgb(44 166 222 / 0.1) 38%,
    rgb(44 166 222 / 0) 72%
  );
  mix-blend-mode: screen;
}
.fxstrip[data-cursor='in']::before {
  opacity: 1;
}
.fxstrip[data-cursor='in'] {
  border-top-color: rgb(44 166 222 / 0.3);
  border-bottom-color: rgb(44 166 222 / 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .fxstrip {
    cursor: auto;
  }
  .fxstrip::before {
    display: none;
  }
}

/* ---------- case-studies ruled index ---------- */
.cs-list {
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
.cs-row {
  border-top: 1px solid var(--color-divider);
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
  padding-bottom: clamp(0.5rem, 1vw, 1rem);
}
.cs-row--pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.cs-item {
  display: block;
  color: inherit;
  text-decoration: none;
}
.cs-item--wide {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.cs-item__figure {
  margin: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
}
.cs-item__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cs-item:hover .cs-item__figure img,
.cs-item:focus-visible .cs-item__figure img {
  transform: scale(1.03);
}
.cs-item--wide .cs-item__body {
  padding-top: 0.15rem;
}
.cs-item:not(.cs-item--wide) .cs-item__body {
  padding-top: clamp(1.15rem, 2vw, 1.6rem);
}
.cs-item__kicker {
  display: block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.cs-item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 0.55rem;
}
.cs-item__head h3 {
  margin: 0;
}
.cs-item__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--color-text-muted);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.35s ease;
}
.cs-item__arrow svg {
  width: 100%;
  height: 100%;
}
.cs-item:hover .cs-item__arrow,
.cs-item:focus-visible .cs-item__arrow {
  color: var(--color-primary);
  transform: translate(3px, 3px);
}
.cs-item__body p {
  margin: 0.85rem 0 0;
  max-width: 46ch;
  color: var(--color-text-muted);
}
.cs-item__body .link-arrow {
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 720px) {
  .cs-item--wide {
    grid-template-columns: 1fr;
    gap: clamp(1.15rem, 4vw, 1.6rem);
  }
  .cs-item--wide .cs-item__body {
    padding-top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cs-item__figure img,
  .cs-item__arrow {
    transition: none;
  }
  .cs-item:hover .cs-item__figure img {
    transform: none;
  }
}

/* ---------- long-form case study (cinema layout) ---------- */
.cine-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-cine-words][data-in] .cine-word {
  opacity: 1;
  transform: none;
}
[data-cine-item] {
  opacity: 1;
}
[data-cinema-on] [data-cine-item] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-cinema-on] [data-cine-item][data-in] {
  opacity: 1;
  transform: none;
}

/* hero */
.cine-hero-host {
  position: relative;
  height: 210vh; /* scrub runway: the extra 110vh is the scroll distance that
                    advances a [data-cine-video] hero's currentTime while the
                    .cine-hero below stays sticky-pinned. */
  background: var(--color-ink-block);
}

/* Autoplay/loop hero (no scrub): there is nothing for a scroll runway to
   drive, so don't pin it. Without this the hero eats ~110vh of scrolling
   while appearing frozen - the page consumes the wheel but nothing moves. */
.cine-hero-host--loop {
  height: auto;
}
.cine-hero-host--loop .cine-hero {
  position: relative;
  height: auto;
  min-height: 100vh;
}
@media (max-width: 860px) {
  .cine-hero-host--loop .cine-hero {
    min-height: 92vh;
  }
}
.cine-hero {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  background: var(--color-ink-block);
  color: #fff;
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem);
  box-sizing: border-box;
  overflow: hidden;
}
.cine-hero__bg {
  position: absolute;
  inset: 0;
  background: var(--color-ink-block) center / cover no-repeat;
}
.cine-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms ease;
}
.cine-hero__video[data-ready],
.cine-hero__video--loop {
  opacity: 1;
}
.cine-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgb(9 22 32 / 0.95) 0%, rgb(9 22 32 / 0.86) 38%, rgb(9 22 32 / 0.5) 72%, rgb(9 22 32 / 0.32) 100%),
    linear-gradient(to top, rgb(9 22 32 / 0.72) 0%, rgb(9 22 32 / 0) 45%);
}

.cine-hero__bg--counter {
  background-position: 72% 42%;
}
@media (max-width: 860px) {
  .cine-hero__bg--counter {
    background-position: 45% 46%;
  }
}
.pc-scope .cine-hero__video {
  object-position: 58% 45%;
}
@media (max-width: 860px) {
  .pc-scope .cine-hero__video {
    object-position: 34% 45%;
  }
}

/* Website-screenshot hero background. A screenshot at full bleed otherwise
   shows the client's own nav, forms and input fields behind our headline,
   which reads as a competing second UI. Blur + desaturate + scale turns it
   into brand-colored texture that still reads as "their site" without
   fighting the type. Scale prevents the blur from vignetting the edges. */
.cine-hero__bg--shot {
  background-position: center top;
  filter: saturate(0.5) contrast(0.9) blur(7px);
  transform: scale(1.08);
  transform-origin: center top;
}
.cine-hero__bg--shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgb(9 22 32 / 0.82) 0%, rgb(9 22 32 / 0.66) 45%, rgb(9 22 32 / 0.5) 100%),
    radial-gradient(120% 90% at 18% 40%, rgb(9 22 32 / 0.5) 0%, rgb(9 22 32 / 0) 70%);
}

.cine-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
}
.cine-hero__note {
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
  max-width: 46ch;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: rgb(255 255 255 / 0.5);
}
.cine-hero .crumb,
.cine-hero .crumb a,
.cine-hero .crumb span {
  color: rgb(255 255 255 / 0.62);
}
.cine-hero .crumb a:hover {
  color: #fff;
}
.cine-hero__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-top: 1.5rem;
}
.cine-hero__name {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-size: clamp(3.4rem, 13vw, 11rem);
  text-transform: uppercase;
}

/* Sentence-length headline in the cine hero. The base rule above is sized for a
   short client wordmark (up to 11rem, uppercase); these pages carry a full
   sentence as the h1, so it needs a calmer scale and normal casing. MUST stay
   after `.cine-hero__name` - equal specificity, so source order decides. */
.cine-hero__name.cine-hero__name--sentence {
  font-size: clamp(1.9rem, 4.4vw, 3.7rem);
  line-height: 1.07;
  letter-spacing: -0.015em;
  text-transform: none;
  max-width: 30ch;
  overflow-wrap: break-word;
}
.cine-hero__lead {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  max-width: 40ch;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.28;
  font-size: clamp(1.1rem, 2.1vw, 1.65rem);
  color: rgb(255 255 255 / 0.9);
}
.cine-hero__lead + p {
  margin-top: 1.1rem;
  max-width: 52ch;
  color: rgb(255 255 255 / 0.66);
}
.cine-hero__media {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid rgb(255 255 255 / 0.14);
  overflow: hidden;
  will-change: transform;
}
@media (max-width: 860px) {
  .cine-hero-host {
    height: auto;
  }
  .cine-hero {
    position: relative;
    height: auto;
    min-height: 92vh;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cine-hero-host {
    height: auto;
  }
  .cine-hero {
    position: relative;
    height: auto;
    min-height: 0;
  }
  .cine-hero__video {
    display: none;
  }
}
.cine-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* fact strip */
.cine-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  border-top: 1px solid var(--color-divider);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
}
.cine-fact dt {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.cine-fact dd {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  color: var(--color-primary);
}
.cine-fact dd a {
  color: inherit;
}

/* oversized statement */
.cine-statement {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.015em;
  font-size: clamp(2rem, 5.6vw, 4.25rem);
}
.cine-statement--wide {
  max-width: 30ch;
}
.cine-say {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .cine-say {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
  }
}
.cine-say p {
  margin: 0;
  max-width: 48ch;
  font-size: var(--text-base);
  color: var(--color-text-muted);
}
.band--ink .cine-say p {
  color: rgb(255 255 255 / 0.7);
}

/* sticky chapter */
.cine-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--color-divider);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
@media (min-width: 960px) {
  .cine-chapter {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  }
  .cine-chapter__aside {
    position: sticky;
    top: calc(var(--header-h, 78px) + 2.5rem);
    align-self: start;
  }
}
.cine-chapter__num {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.cine-chapter__aside h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.08;
}
.cine-chapter__aside p {
  margin: 1rem 0 0;
  max-width: 34ch;
  color: var(--color-text-muted);
}
.cine-chapter__body > * + * {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.cine-chapter__body p {
  margin: 0;
  max-width: 56ch;
}
.cine-figure {
  margin: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
}
.cine-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  will-change: transform;
}
.cine-figure figcaption {
  padding: 0.85rem 1rem 1rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-faint);
}
.cine-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* expo booth trio: one portrait + two landscape, native aspect, never cropped */
.cine-booth-grid {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  grid-template-columns: 1fr;
}
.cine-booth-grid img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 900px) {
  /* The right column stacks two captioned figures, the left one - so its extra
     figcaption makes a pure `fr` ratio miss by ~50px, and caption height moves
     with the viewport. Instead the portrait figure STRETCHES to the row height and
     its image fills via object-fit, so both columns bottom out exactly level at any
     width. Cost: at these aspect ratios the portrait's box is TALLER than native, so
     object-fit trims ~6% off the LEFT AND RIGHT edges (measured, not assumed) - the
     curtain and hedge either side of the booth, not the backwall or counter. Crop is
     centered; there is nothing to bias vertically. */
  .cine-booth-grid {
    grid-template-columns: 1.153fr 1fr;
    align-items: stretch;
  }
  .cine-booth-grid__tall {
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
  }
  .cine-booth-grid__tall img {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

/* Masonry photo gallery. Implemented with CSS multi-column rather than grid: the photos are a
   mix of 4:3, 16:9 and 3:4 and multicol packs varying heights with no gaps and, critically, no
   cropping - each image keeps its own ratio at height:auto. Grid would need either a fixed row
   span per item or JS measurement. Trade-off accepted: multicol reading order runs DOWN each
   column before moving across, so this is a gallery, not a sequence to be read left to right. */
.cine-masonry {
  margin-top: clamp(1.5rem, 4vw, 2.75rem);
  /* breathing room before the rule that starts the next section */
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  column-count: 1;
  column-gap: clamp(0.75rem, 2vw, 1.25rem);
}
/* Narrow widths keep the simple multi-column flow: the wrapper columns are display:contents
   so all 13 figures become direct children of the multicol box and balance automatically. */
.cine-masonry__col {
  display: contents;
}
.cine-masonry .cine-figure {
  /* keep a figure from being split across two columns */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(0.75rem, 2vw, 1.25rem);
  display: block;
}
.cine-masonry .cine-figure img {
  display: block;
  width: 100%;
  height: auto;
  /* .cine-figure img sets object-fit:cover for fixed-ratio boxes; here the box is derived from
     the image itself, so there is nothing to crop. Stated explicitly to survive future edits. */
  object-fit: fill;
}
@media (min-width: 40rem) {
  .cine-masonry {
    column-count: 2;
  }
}
/* At three columns we stop letting the browser balance and place the figures ourselves, in
   three explicit flex columns. Balancing cannot be asked to end level -- a column can only
   break between whole figures -- so the three columns are pre-sorted by aspect ratio into
   near-equal totals: col1 = 3x 4:3 + 2x 16:9 over 5 items, cols 2 and 3 = 1x 3:4 + 2x 4:3 +
   1x 16:9 over 4 items. Because heights are expressed as ratios of a shared column width,
   this holds as the page fluidly resizes.
   NOTE: these rules must stay AFTER the base .cine-masonry .cine-figure rule above -- equal
   specificity, so source order decides, and the margin reset below has to win. */
@media (min-width: 64rem) {
  .cine-masonry {
    display: flex;
    column-count: auto;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    align-items: start;
  }
  .cine-masonry__col {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    flex: 1 1 0;
    min-width: 0;
  }
  .cine-masonry .cine-figure {
    margin: 0;
  }
  /* Residual after sorting: col1 runs ~12.5px (1%) longer than cols 2 and 3. The last figure
     in col1 absorbs it, trimmed from 4:3 to 1.398:1 -- a 4.6% crop off a centered rice stream,
     the one frame here with nothing near its top or bottom edge to lose. */
  .cine-masonry__col--1 > .cine-figure:last-child img {
    aspect-ratio: 360 / 257.5;
    object-fit: cover;
    object-position: center;
  }
}

/* Brochure before/after grid. These are rendered PDF pages, not photographs, so nothing
   here may crop: each img carries its native aspect-ratio inline (8.5/11 for the letter
   pages, 1900/820 for the tri-fold spread) and the box is derived from that, so the
   inherited object-fit:cover has no overflow to trim. align-items:start keeps the three
   letter pages top-aligned when their captions run to different line counts. */
.cine-book-grid {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  grid-template-columns: 1fr;
  align-items: start;
}
.cine-book-grid img {
  display: block;
  width: 100%;
  height: auto;
}
/* Before / After labels. Deliberately borrow the .sec-num eyebrow treatment so they read as
   part of the same system. grid-column spans the row so each label owns its own line, while
   justify-self:start shrinks the box back to the text - without that the gold rule would run
   the full grid width and read as a section divider rather than a label. */
.cine-book-label {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  padding-top: 0.4em;
  border-top: 2px solid var(--color-gold);
}
.cine-book-label--after {
  margin-top: clamp(0.75rem, 2vw, 1.5rem);
}
@media (min-width: 46rem) {
  .cine-book-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* The tri-fold is a 2.3:1 spread - it earns the full row width; the point being made
     is partly that the old matrix was physically that wide. */
  .cine-book-grid__wide {
    grid-column: 1 / -1;
  }
}

/* horizontal rail driven by vertical scroll */
.cine-rail-host {
  position: relative;
  height: 240vh;
}
.cine-rail-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  padding-top: clamp(4.5rem, 8vh, 6.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.cine-rail-head {
  padding: 0 var(--gutter) clamp(1.25rem, 3vw, 2rem);
}
.cine-rail-viewport {
  overflow: hidden;
  padding-left: var(--gutter);
}
.cine-rail-track {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  width: max-content;
  will-change: transform;
}
.cine-rail-track figure {
  flex: 0 0 auto;
  width: clamp(16rem, 33vw, 30rem);
  margin: 0;
}
.cine-rail-track img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--color-divider);
}
.cine-rail-track figcaption {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-text-faint);
}
.band--ink .cine-rail-track figcaption {
  color: rgb(255 255 255 / 0.6);
}
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .cine-rail-host {
    height: auto;
  }
  .cine-rail-stage {
    position: static;
    height: auto;
  }
  .cine-rail-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-right: var(--gutter);
    padding-bottom: 0.75rem;
  }
  .cine-rail-track {
    transform: none !important;
  }
  .cine-rail-track figure {
    scroll-snap-align: start;
    width: min(72vw, 20rem);
  }
}

/* full-bleed scene */
.cine-scene {
  overflow: hidden;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.cine-scene img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  will-change: transform;
}
.cine-scene__caption {
  padding: 1rem var(--gutter) 0;
  font-size: 0.8rem;
  color: var(--color-text-faint);
}

/* phases */
.cine-phases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.cine-phase {
  border-top: 2px solid var(--color-primary);
  padding: 1.25rem clamp(1rem, 2vw, 1.75rem) 1.75rem 0;
}
.cine-phase span {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.cine-phase h3 {
  margin: 0 0 0.5rem;
  font-size: var(--text-lg);
}
.cine-phase p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

/* next project */
.cine-next {
  display: block;
  border-top: 1px solid var(--color-divider);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  text-decoration: none;
  color: inherit;
}
.cine-next__meta {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.cine-next__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 0.9rem;
}
.cine-next__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 7vw, 5rem);
  text-transform: uppercase;
  transition: color 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cine-next:hover .cine-next__name,
.cine-next:focus-visible .cine-next__name {
  color: var(--color-primary);
  transform: translateX(10px);
}
.cine-next__arrow {
  flex: 0 0 auto;
  width: clamp(2rem, 4vw, 3rem);
  color: var(--color-text-muted);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.35s ease;
}
.cine-next__arrow svg {
  width: 100%;
  height: auto;
}
.cine-next:hover .cine-next__arrow {
  color: var(--color-primary);
  transform: translateX(8px);
}
.cine-next__sub {
  margin: 1rem 0 0;
  max-width: 46ch;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .cine-word,
  .cine-next__name,
  .cine-next__arrow {
    transition: none;
  }
  .cine-hero__media,
  .cine-figure img,
  .cine-scene img,
  .cine-rail-track {
    transform: none !important;
  }
}
.cine-hero .btn--ghost {
  color: #fff;
  border-color: rgb(255 255 255 / 0.4);
}
.cine-hero .btn--ghost:hover {
  border-color: #fff;
  color: #fff;
}
.cine-rail-host.band--ink {
  padding-block: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-cinema-on] [data-cine-item],
  [data-cinema-on] .cine-word {
    opacity: 1 !important;
    transform: none !important;
  }
}

.cine-chapter__body > p + p {
  margin-top: 1.15rem;
}

/* ---------- Drawing → render pairs (Akin case study) ---------- */
.xform-list {
  display: grid;
  gap: clamp(3rem, 6vw, 5.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.xform {
  margin: 0;
}
.xform__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}
.xform__panel {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--color-divider);
  overflow: hidden;
}
.xform__panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.xform__panel--line {
  background: #fff;
  background-image: linear-gradient(rgb(13 82 112 / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(13 82 112 / 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
}
.xform__panel--line img {
  padding: clamp(1.25rem, 4vw, 3rem);
  mix-blend-mode: multiply;
}
.xform__panel--render {
  background: #f9f5f1;
  border-color: rgb(13 82 112 / 0.22);
}
.xform__tag {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 0.45rem 0.8rem;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.xform__tag--gold {
  background: var(--color-gold-bright);
  color: var(--color-ink-block);
}
.xform__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--color-divider);
  color: var(--color-primary);
  background: var(--color-surface);
}
.xform__arrow svg {
  width: 1rem;
  height: 1rem;
}
.xform__cap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(1.1rem, 2.5vw, 1.6rem);
  padding-top: clamp(1.1rem, 2.5vw, 1.6rem);
  border-top: 1px solid var(--color-divider);
}
.xform__piece {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--color-text);
}
.xform__note {
  grid-column: 2;
  max-width: 62ch;
  color: var(--color-text-muted);
}
[data-cinema-on] .xform__panel--render img[data-cine-wipe] {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
@media (max-width: 780px) {
  .xform__pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    justify-items: stretch;
  }
  .xform__arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
  .xform__cap {
    grid-template-columns: minmax(0, 1fr);
  }
  .xform__note {
    grid-column: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .xform__panel--render img[data-cine-wipe] {
    clip-path: none !important;
  }
}

/* ---------------------------------------- in-page scroll-scrubbed scene */
/* Full-bleed autoplay video band. */
.cine-scrub-host {
  position: relative;
  background: var(--color-ink-block);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.cine-scrub {
  position: relative;
  overflow: hidden;
}
.cine-scrub__frame {
  position: relative;
  background: var(--color-ink-block);
}
.cine-scrub__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .cine-scrub__video {
    /* Static poster only - respects the OS preference. */
    display: none;
  }
  .cine-scrub__frame {
    aspect-ratio: 16 / 9;
    background: var(--color-ink-block) url('/assets/video/wf-line-poster.jpg') center / cover no-repeat;
  }
}

/* ---------- "The uniform": scroll-scrubbed apparel reveal ----------
   Two clips, a polo chest and a cap front, both pulling back from the
   embroidery to the wearer, so scroll distance stands in for camera
   distance. The host is tall, the stage inside it sticks, and
   uniform-scrub.js maps one host progress onto the currentTime of both
   videos, so the two cameras retreat together.

   The left panel is the team on a coastal course in the uniform, 810x540;
   the right is the cap close-up, 560x752. On one column they share the
   562/748 box; side by side the left column is widened so the group is not
   cropped into. Both use object-fit: cover, and neither source is ever
   displayed upscaled.

   .is-static is set by the script for prefers-reduced-motion or a failed
   load: the extra scroll length collapses and the posters stand in. */
.wf-uniform-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.wf-uniform-fig {
  margin: 0;
  aspect-ratio: 562 / 748;
  background: #0d1114 center / cover no-repeat;
  overflow: hidden;
}

.wf-uniform-fig:first-of-type {
  /* Landscape source, so this panel keeps its own box on one column rather
     than being cropped into the portrait shape the cap close-up wants. */
  aspect-ratio: 3 / 2;
  background-image: url('/assets/video/wf-golf-poster.jpg');
}

.wf-uniform-fig:nth-of-type(2) {
  background-image: url('/assets/video/wf-cap-poster.jpg');
}

.wf-uniform-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reduced motion, or a panel that failed to load: drop the video element
   so the poster background on the figure stands in. */
.wf-uniform-pair.is-static .wf-uniform-video,
.wf-uniform-fig.is-dead .wf-uniform-video {
  display: none;
}

@media (min-width: 640px) {
  .wf-uniform-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The team panel is a group of five with the coast behind them, so it takes
     the wider column: at equal widths the crop cut into the people at both
     ends. The cap panel is a single close-up and reads fine narrower. */
  .wf-uniform-pair {
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  }
}

/* Proof pair. Both sources are 570px wide, so the grid caps each column
   at that width rather than stretching them across the shell. */
.wf-proofs {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2rem, 5vw, 3.25rem);
}
@media (min-width: 46rem) {
  .wf-proofs {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
    align-items: start;
  }
}
.wf-proofs .cine-figure img {
  max-width: 570px;
  margin-inline: auto;
}

/* ---------- About: editorial layout on existing components ---------- */
.about-hero .photo-figure {
  justify-self: end;
  max-width: 26rem;
}
@media (min-width: 900px) {
  .about-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.about-pull {
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
.about-scene {
  margin: 0;
}
/* dark-band variants of the spec table and section number */
.band--ink .sec-num {
  color: var(--color-gold-bright);
  border-top-color: var(--color-gold-bright);
}
.band--ink .spec,
.band--ink .spec div {
  border-color: rgb(255 255 255 / 0.16);
}
.band--ink .spec dt {
  color: rgb(255 255 255 / 0.62);
}
.band--ink .spec dd {
  color: #fff;
}
.band--ink .prose p,
.band--ink .prose li {
  color: #b7c2ca;
}
/* About: keep the four phases balanced two-up at tablet widths */
@media (min-width: 620px) and (max-width: 1023px) {
  .about-phases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------ hero audience eyebrow
   The homepage eyebrow carries a longer audience qualifier than the site's
   other eyebrows, so it tracks slightly tighter, wraps on its own line, and
   keeps a legible line-height over the star field. */
.eyebrow--audience {
  display: block;
  max-width: 30ch;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-wrap: balance;
}
.hero--fx .eyebrow--audience,
[data-hero-galaxy] .eyebrow--audience {
  color: #9ad9f5;
  text-shadow: 0 1px 12px rgb(4 12 20 / 0.55);
}

/* ------------------------------------------------------------ homepage two-beat headline
   "Uncover the value. Put it to work." is a longer H1 than the site's other
   heroes, so the homepage gives the copy column more room and scales the
   display type to keep each beat on a single line. */
.hero__grid--wide {
  grid-template-columns: minmax(0, 2.1fr) minmax(190px, 0.8fr);
}
.hero h1.hero__h1--beats {
  font-size: clamp(1.7rem, 3.2vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
@media (max-width: 900px) {
  .hero__grid--wide {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   Deck-to-web stage (Western Foods "The deck")
   A measured composite: the static plate carries the slide panels and a
   baked frame of the live site, so if the video never plays the section
   still reads correctly. The video is the same laptop display, pre-warped
   to the screen's perspective in the render, then clipped to the display
   quad. Box + clip are percentages of the plate, so it scales with no JS.
   Geometry solved from the source mockup: display quad
   (1197,345) (2028,264) (1933,875) (1097,878), then cropped to content
   bounds -> a 1926x1038 plate carrying a 934x618 display. The plate is
   multiplied to the page background so its margin has no visible edge.
   Values below are emitted by wf-mock/render_video.py -> geometry.json;
   re-run it rather than hand-editing them.
   ------------------------------------------------------------------ */
.wf-stage {
  position: relative;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  line-height: 0;
}

.wf-stage__plate {
  display: block;
  width: 100%;
  height: auto;
}

.wf-stage__screen {
  position: absolute;
  left: 39.310%;
  top: 4.940%;
  width: 52.828%;
  height: 74.458%;
  object-fit: fill;
  clip-path: polygon(10.921% 13.43%, 99.893% 0.324%, 89.722% 99.191%, 0.214% 99.676%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .wf-stage__screen {
    display: none;
  }
}

/* Expo blocks. The floor section is split one article per show, each with its own
   heading and media set. Shows with a single image use .wf-expo__solo, which caps at
   the source's native width via --solo-max so nothing is ever displayed upscaled. */
.wf-expo {
  margin-top: clamp(2.75rem, 7vw, 4.5rem);
}
.wf-expo:first-of-type {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.wf-expo__head {
  max-width: 68ch;
  margin-bottom: clamp(1.1rem, 3vw, 1.75rem);
}
.wf-expo__meta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 0.5rem;
}
.wf-expo__name {
  font-size: var(--text-lg);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}
.wf-expo__copy {
  margin: 0;
  color: var(--color-text-muted);
}
.wf-expo__media {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  grid-template-columns: 1fr;
}
.wf-expo__solo {
  max-width: var(--solo-max, 100%);
}
.wf-expo__solo img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  /* The right column now stacks a 3:2 exterior over a 4:3 booth against the 3:4 portrait
     on the left, so natural heights no longer bottom out level and each right figure was
     left with a ~21px white strip. Both now fill their stretched box via object-fit, which
     trims about 5% off the LEFT AND RIGHT edges (measured, not assumed): palm trunks on the
     exterior, curtain edge on the booth. Both subjects are centered, so nothing is lost. */
  .wf-expo .cine-booth-grid > .cine-figure:not(.cine-booth-grid__tall) {
    display: flex;
    flex-direction: column;
  }
  .wf-expo .cine-booth-grid > .cine-figure:not(.cine-booth-grid__tall) img {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

/* Two-image expo rows. Column widths are set per block via --pair-cols so both figures
   reach the same height at their NATIVE aspect ratios: no object-fit, no cropping. The
   ratio is just the two aspect ratios divided (3:2 beside 4:3 gives 1.124fr 1fr; two 4:3
   images give the 1fr 1fr default). Gap does not affect it, so it holds at any width. */
.wf-expo__pair {
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .wf-expo__pair {
    grid-template-columns: var(--pair-cols, 1fr 1fr);
    align-items: start;
  }
}
.wf-expo__pair img {
  display: block;
  width: 100%;
  height: auto;
}

/* Expo intros reuse the cine-chapter two-column pattern. The chapter's own border-top
   and top padding now separate one expo from the next, so .wf-expo drops its margin,
   and the chapter's bottom padding is tightened so each intro stays visually attached
   to its own photographs rather than floating between two blocks. */
.wf-expo,
.wf-expo:first-of-type {
  margin-top: 0;
}
.wf-expo:first-of-type .cine-chapter {
  border-top: 0;
}
.wf-expo .cine-chapter {
  padding-bottom: clamp(1.4rem, 3.5vw, 2.25rem);
}
.wf-expo .cine-chapter__aside h3 {
  margin: 0.9rem 0 0;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.08;
}

/* IFT leads with an establishing shot of the show floor above its two booth
   photographs. The venue figure spans both pair columns so the booths keep the
   1fr 1fr ratio that bottoms them out level at their native aspect. */
.wf-expo__span {
  grid-column: 1 / -1;
}

/* Photography rails carrying more frames than the 3 to 5 the base
   .cine-rail-host height was tuned for need proportionally more scroll to pan
   across. Used by Western Foods (13 frames) and Akin (10 frames); the other
   case studies keep 240vh. */
.cine-rail-host--long {
  height: 400vh;
}
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .cine-rail-host--long {
    height: auto;
  }
}

/* Western Foods "The site": the live homepage scrolling inside a desk
   photograph, desktop in the tablet and mobile in the phone, from one shot
   that happened to have both screens blank.

   Each screen window is the exact quad measured off the photograph, and the
   plane behind it carries the exact four-point homography of that quad, so all
   four corners land dead on and the page's parallel lines converge the way the
   screen's own edges do. This replaced a least-squares affine, which could not
   be right in principle: an affine preserves parallelism, so on a screen in
   three-quarter perspective it left an 8.9px corner residual on the tablet and,
   worse, drove the page at the quad's apparent aspect rather than the device's
   true one, stretching the layout about 10% wide on the tablet and 14% on the
   phone. The source rectangles are now the real screen shapes and the page
   foreshortens with the glass.

   The quads are not eyeballed. Each screen is blank in the photograph, so the
   bright region is isolated, its holes filled, and a robust line is fitted to
   each of the four edges away from the rounded corners, with the corners taken
   as the intersections of those lines. Every edge fits to 0.30px RMS.

   The screen aspects were then recovered from the quads themselves by
   single-view rectification. The tablet returns 1.3301 and the phone 0.4515,
   which are 4:3 and 20:9 to within 0.3%, and the two solves agree on a focal
   length of 4336px and 4187px, so one camera explains both devices. They are
   pinned to exactly 4:3 and 20:9. An earlier pass measured these corners by
   hand and got the phone's top edge slope wrong by 5 degrees, which sheared the
   page visibly out of the screen plane, so the fit is worth the trouble.

   The phone's rect is 390x866.67, not the capture's 390x844: the capture is a
   continuous strip, so a 20:9 window simply shows a little more of it rather
   than distorting it. Source rects are inset 0.35% before mapping, which makes
   the content overfill its clip by a hair so no seam can open at an edge.

   The cost is one small script: a homography's perspective terms are in units
   of 1/px, so the overlay has to live in a fixed 1512px reference box that is
   scaled to the rendered width on resize.

   Scroll travel differs per device because the captures are different lengths,
   so the end position is a per-element custom property rather than a constant
   in the keyframes. Both images are paused while the figure is off screen by a
   page-local observer. */
.wf-monitor {
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
.wf-monitor__frame {
  position: relative;
  aspect-ratio: 1512 / 1080;
  overflow: hidden;
  background: #24190f;
}
.wf-monitor .wf-monitor__plate {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: auto;
}
/* Fixed reference box. The screen quads were measured on the 1512x1080 plate
   and a projective transform cannot be expressed in percentages, so the whole
   overlay is laid out at plate scale and scaled down to the rendered width by
   the page-local script. Hidden until that script has run, rather than risk
   drawing the screens at the wrong scale. */
.wf-monitor__ref {
  position: absolute;
  top: 0;
  left: 0;
  width: 1512px;
  height: 1080px;
  transform: scale(var(--wf-s, 1));
  transform-origin: 0 0;
}
.wf-monitor:not(.is-fitted) .wf-monitor__ref {
  visibility: hidden;
}
.wf-screen,
.wf-screen__glass {
  position: absolute;
  inset: 0;
}
.wf-screen {
  overflow: hidden;
}
.wf-screen__glass {
  pointer-events: none;
}
/* Measured screen quads. Tablet leans away to the left, so its left edge is
   longer than its right; the phone is nearly frontal with a slight roll. */
.wf-screen--desktop,
.wf-screen--desktop + .wf-screen__glass {
  clip-path: polygon(41.1620% 27.8398%, 83.2606% 27.0324%, 79.9729% 68.7204%, 35.6852% 67.6602%);
}
.wf-screen--mobile,
.wf-screen--mobile + .wf-screen__glass {
  /* Rounded to match the phone. The screen's corner radius was measured by
     rectifying the photograph into the screen's own 390x866.67 space, where all
     four corners agree on 65.82px to within 0.8px. The arcs are sampled in that
     space and each point pushed through the same homography, so the rounding
     foreshortens with the screen instead of staying circular on the page. */
  clip-path: polygon(260.56px 433.92px, 260.56px 430.13px, 261.00px 426.40px, 261.86px 422.79px, 263.15px 419.35px, 264.84px 416.13px, 266.90px 413.18px, 269.31px 410.53px, 272.02px 408.23px, 275.00px 406.32px, 278.20px 404.81px, 281.58px 403.73px, 285.09px 403.10px, 288.67px 402.92px, 402.93px 404.49px, 406.44px 404.77px, 409.92px 405.48px, 413.33px 406.64px, 416.61px 408.20px, 419.72px 410.17px, 422.61px 412.50px, 425.24px 415.16px, 427.58px 418.11px, 429.58px 421.31px, 431.22px 424.72px, 432.49px 428.28px, 433.34px 431.94px, 433.79px 435.65px, 455.64px 780.43px, 455.67px 784.23px, 455.28px 787.99px, 454.46px 791.65px, 453.24px 795.17px, 451.62px 798.49px, 449.64px 801.56px, 447.33px 804.34px, 444.70px 806.79px, 441.81px 808.87px, 438.69px 810.55px, 435.39px 811.81px, 431.96px 812.62px, 428.44px 812.98px, 313.03px 817.12px, 309.38px 817.01px, 305.76px 816.44px, 302.21px 815.41px, 298.79px 813.94px, 295.55px 812.04px, 292.53px 809.74px, 289.79px 807.09px, 287.35px 804.11px, 285.27px 800.85px, 283.56px 797.36px, 282.25px 793.68px, 281.37px 789.89px, 280.93px 786.02px);
}
/* Light falls from the upper left in the photograph, so the sheen runs the
   same way across both panels and is stronger on the tablet, which is the
   larger and more angled surface. */
.wf-screen--desktop + .wf-screen__glass {
  background: linear-gradient(101deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0.05) 66%, rgba(0, 0, 0, 0.17) 100%);
}
.wf-screen--mobile + .wf-screen__glass {
  background: linear-gradient(99deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0.04) 72%, rgba(0, 0, 0, 0.12) 100%);
}
/* Each plane is the true screen rectangle at capture resolution, mapped onto
   its measured quad by an exact four-point homography. A homography, not an
   affine: the tablet's left edge is 445px long against its right edge's 448px
   and its top edge rises while its bottom falls, so the screen's edges
   converge and parallel lines in the page must converge with them. The source
   rectangles are the real screen shapes, 4:3 for the tablet and 390x844 for
   the phone, so the page foreshortens by the same amount the device does.
   overflow:hidden clips the tall page in the plane's own space, before the
   projection, which also keeps it clear of the horizon line. */
.wf-screen__plane {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform-origin: 0 0;
}
.wf-screen--desktop .wf-screen__plane {
  width: 1200px;
  height: 900px;
  transform: matrix3d(0.4881008,-0.0179598,0,-0.000036460, -0.1244083,0.4380101,0,-0.000058900, 0,0,1,0, 620.50109,299.26387,0,1);
}
.wf-screen--mobile .wf-screen__plane {
  width: 390px;
  height: 866.667px;
  transform: matrix3d(0.4704596,0.0281530,0,0.000054354, 0.0236369,0.4705683,0,-0.000015239, 0,0,1,0, 258.03336,401.05544,0,1);
}
.wf-monitor .wf-screen__page {
  display: block;
  width: 100%;
  height: auto;
  animation: wf-screen-scroll var(--wf-dur, 34s) ease-in-out infinite;
}
/* The phone holds one view of the rice flour page rather than scrolling, so
   its page image is a still and takes no animation. */
.wf-monitor .wf-screen__page--still {
  animation: none;
}
.wf-screen--mobile .wf-screen__page {
  --wf-scroll-end: -91.8988%;
  --wf-dur: 44s;
}
.wf-monitor--idle .wf-screen__page {
  animation-play-state: paused;
}

/* The tablet holds the top of the about page, header in view and no scroll.
   The rotating word in the headline is the site's own animation, reproduced to
   the live page's own numbers: Elementor's animated headline widget is set to
   drop-in with a 2000ms iteration delay, the in and out transforms are 0.8s
   ease along Z against a 300px perspective, and the wrapper re-centers the rest
   of the line over a 0.5s width transition. Four words gives an 8s loop. The
   word images are the four states captured from the live page, so the type is
   the real face rather than a substitute. Line two never changes and is baked
   into the frame. Positions are in the plane's own 1200x900 space, which the
   homography then foreshortens. */
.wf-about {
  position: absolute;
  inset: 0;
}
.wf-about__bg {
  display: block;
  width: 100%;
  height: 100%;
}
.wf-about__line {
  position: absolute;
  top: 338px;
  left: 0;
  width: 1200px;
  height: 80px;
}
/* The word and remainder layers are 2x bitmaps placed at their own CSS size,
   so their widths are pinned inline and height is fixed here. Without that a
   wider figure image rule stretches them to the full width of the plane. */
.wf-about__rest,
.wf-about__word {
  position: absolute;
  top: 0;
  display: block;
  height: 80px;
  max-width: none;
}
/* "IN AMERICA'S" does not change, it only slides as the word ahead of it
   changes width. That is the wrapper's 0.5s width transition, which is 6.25%
   of the 8s loop. */
.wf-about__rest {
  left: 538px;
  animation: wf-about-rest 8s ease infinite;
}
.wf-about__word {
  opacity: 0;
  transform-origin: 50% 50%;
  animation: wf-about-word 8s ease infinite;
  animation-delay: calc(var(--i) * 2s);
}
.wf-monitor--idle .wf-about__rest,
.wf-monitor--idle .wf-about__word {
  animation-play-state: paused;
}
/* translateZ(100px) against a 300px perspective is a 1.5x scale, and
   translateZ(-100px) is 0.75x. Written as a flat scale here because the plane
   already carries its own 3D matrix and a nested perspective compounds with it. */
@keyframes wf-about-word {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }
  10%,
  25% {
    opacity: 1;
    transform: scale(1);
  }
  35% {
    opacity: 0;
    transform: scale(0.75);
  }
  36%,
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes wf-about-rest {
  0% {
    transform: translateX(15.5px);
  }
  6.25%,
  25% {
    transform: translateX(0);
  }
  31.25%,
  50% {
    transform: translateX(-37px);
  }
  56.25%,
  75% {
    transform: translateX(-9.5px);
  }
  81.25%,
  100% {
    transform: translateX(15.5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-monitor .wf-screen__page {
    animation: none;
  }
  .wf-about__rest,
  .wf-about__word {
    animation: none;
  }
  .wf-about__word[style*="--i:0"] {
    opacity: 1;
  }
}


/* Western Foods "The book": a flat spread reader in place of the earlier
   page-turn video, built to the Issuu idiom the client pointed at. Charcoal
   stage, cover alone, then two-page spreads, crossfade between views. The stage
   holds a fixed aspect so advancing a view never shifts the page below it:
   widescreen once two pages sit side by side, portrait on one-page mobile.
   Page rules are scoped two-deep because .cine-book-grid img and .cine-figure
   img are both (0,1,1) and would otherwise win. */
.wf-reader {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
}
.wf-reader .wf-reader__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  padding: clamp(0.75rem, 2.5vw, 1.75rem);
  /* Soft studio light rather than a flat field, so the paper has an environment
     to sit in and the shadows below it read as contact rather than as a border. */
  background: radial-gradient(115% 85% at 50% 8%, #f4f3f0 0%, #e7e5e0 52%, #d9d6d0 100%);
  perspective: 2400px;
}
.wf-reader .wf-reader__spread {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 100%;
  max-width: 100%;
  transform-style: preserve-3d;
  transition: opacity 0.18s ease;
}
/* Paper, not a flat image. The page shadow is split in two: a tight contact
   shadow that keeps the sheet attached to the surface, and a wide diffuse one
   that gives it height. filter: drop-shadow cannot be used on the spread here
   because a filter flattens the 3D context the open-book angles depend on. */
.wf-reader .wf-reader__page {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  box-shadow:
    0 1px 2px rgba(28, 24, 18, 0.16),
    0 18px 34px rgba(28, 24, 18, 0.24);
}
/* A single sheet is the cover or the back cover, so the rest of the booklet
   sits behind it: stacked sheet edges down the outer side give it thickness. */
.wf-reader .wf-reader__spread:not(.is-spread) .wf-reader__page {
  box-shadow:
    3px 3px 0 -1px #fbfaf8,
    4px 4px 0 -1px rgba(28, 24, 18, 0.13),
    7px 7px 0 -2px #fbfaf8,
    8px 8px 0 -2px rgba(28, 24, 18, 0.11),
    11px 11px 0 -3px #fbfaf8,
    12px 12px 0 -3px rgba(28, 24, 18, 0.09),
    0 2px 3px rgba(28, 24, 18, 0.14),
    0 20px 38px rgba(28, 24, 18, 0.24);
}
/* Open spread: each page angles up out of the gutter. Kept to two degrees, so
   the paper reads as bent without the type on these dense pages going soft. */
.wf-reader .wf-reader__spread.is-spread .wf-reader__page.is-left {
  transform: rotateY(3deg);
  transform-origin: 100% 50%;
  box-shadow:
    -3px 2px 0 -1px #fbfaf8,
    -4px 3px 0 -1px rgba(28, 24, 18, 0.12),
    -7px 5px 0 -2px #fbfaf8,
    -8px 6px 0 -2px rgba(28, 24, 18, 0.10),
    0 2px 3px rgba(28, 24, 18, 0.15),
    0 20px 38px rgba(28, 24, 18, 0.24);
}
.wf-reader .wf-reader__spread.is-spread .wf-reader__page.is-right {
  transform: rotateY(-3deg);
  transform-origin: 0 50%;
  box-shadow:
    3px 2px 0 -1px #fbfaf8,
    4px 3px 0 -1px rgba(28, 24, 18, 0.12),
    7px 5px 0 -2px #fbfaf8,
    8px 6px 0 -2px rgba(28, 24, 18, 0.10),
    0 2px 3px rgba(28, 24, 18, 0.15),
    0 20px 38px rgba(28, 24, 18, 0.24);
}
/* Overlay: top light across the sheet, and in the open state the gutter, where
   two page curves meet at the stitch. Sits above the paper, never catches a
   pointer, and is clipped to the paper because the spread is exactly its size. */
.wf-reader .wf-reader__spread::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 22%);
}
.wf-reader .wf-reader__spread.is-spread::before {
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0.04) 38%,
      rgba(0, 0, 0, 0.13) 45%,
      rgba(0, 0, 0, 0.34) 49.4%,
      rgba(0, 0, 0, 0.44) 49.9%,
      rgba(0, 0, 0, 0.20) 50%,
      rgba(0, 0, 0, 0.44) 50.1%,
      rgba(0, 0, 0, 0.34) 50.6%,
      rgba(0, 0, 0, 0.13) 55%,
      rgba(0, 0, 0, 0.04) 62%,
      rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 20%);
}
.wf-reader .wf-reader__page:not(.is-on) {
  display: none;
}
/* Chevrons. Kept off the paper itself so they never sit over artwork. */
.wf-reader .wf-reader__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.wf-reader .wf-reader__nav svg {
  width: 1.5rem;
  height: 1.5rem;
}
.wf-reader .wf-reader__nav--prev { left: clamp(0.25rem, 1.5vw, 0.9rem); }
.wf-reader .wf-reader__nav--next { right: clamp(0.25rem, 1.5vw, 0.9rem); }
.wf-reader .wf-reader__nav:hover { background: rgba(0, 0, 0, 0.55); }
.wf-reader .wf-reader__nav:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.wf-reader .wf-reader__nav[disabled] {
  opacity: 0.25;
  cursor: default;
}
.wf-reader .wf-reader__bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem clamp(0.75rem, 2.5vw, 1.75rem);
  background: #2b2b2b;
}
.wf-reader .wf-reader__count {
  flex: none;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}
.wf-reader .wf-reader__track {
  flex: 1 1 auto;
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
}
.wf-reader .wf-reader__fill {
  display: block;
  height: 100%;
  width: 0;
  background: rgba(255, 255, 255, 0.7);
  transition: width 0.18s ease;
}
@media (min-width: 46rem) {
  /* Two pages abreast, so the stage goes widescreen. */
  .wf-reader .wf-reader__stage { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-reader .wf-reader__spread,
  .wf-reader .wf-reader__fill { transition: none; }
}

/* Scroll-driven turns. The reader pins inside a host several viewports tall and
   the view index is read off how far that host has been scrolled, so the spread
   holds still while the pages turn under you. Height and offset are measured in
   JavaScript because they depend on the view count, which itself depends on
   whether two pages fit abreast, so neither can be expressed as a media query.
   Both are applied only under .is-pinned, which JavaScript adds, so without it
   the reader stays a plain click-through and nothing is left half-built. */
.wf-reader-host {
  grid-column: 1 / -1;
  width: 100%;
}
.wf-reader-host.is-pinned {
  position: relative;
}
.wf-reader-host.is-pinned > .wf-reader {
  position: sticky;
}
@media (prefers-reduced-motion: reduce) {
  /* No pinning when motion is unwelcome: height reverts to the content and the
     chevrons drive it directly. */
  .wf-reader-host.is-pinned { height: auto !important; }
  .wf-reader-host.is-pinned > .wf-reader { position: static; }
}

/* ==========================================================================
   Western Foods work reel. A full-bleed showcase that drifts on its own and
   is also a native horizontal scroller, so trackpad, touch, drag and arrow
   keys all work. The track is duplicated in JS and scrollLeft wraps at the
   halfway point, which is what makes the loop seamless. Clones replace their
   <video> with the poster still so nothing downloads twice.
   ========================================================================== */
.wf-reel-band {
  overflow: hidden;
}
.wf-reel__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.wf-reel__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 26ch;
  margin: 0;
}
.wf-reel__note {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin: 0;
  max-width: 58ch;
}

.wf-reel {
  position: relative;
}
.wf-reel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  /* The document sets scroll-behavior:smooth, which would fight the
     per-frame scrollLeft writes below. Opt this one container out. */
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.wf-reel__viewport::-webkit-scrollbar {
  display: none;
}
.wf-reel__viewport.is-dragging {
  cursor: grabbing;
}
.wf-reel__viewport:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}
.wf-reel__track {
  display: flex;
  gap: clamp(10px, 1.1vw, 18px);
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
}

/* One height for every tile; each type derives its width from its real
   aspect ratio so nothing is squeezed. */
.wf-reel__item {
  --h: clamp(200px, 23vw, 310px);
  flex: 0 0 auto;
  height: var(--h);
}
.wf-reel__item--w16 { width: calc(var(--h) * 16 / 9); }
.wf-reel__item--w43 { width: calc(var(--h) * 4 / 3); }
.wf-reel__item--w32 { width: calc(var(--h) * 1.512); }
.wf-reel__item--w34 { width: calc(var(--h) * 3 / 4); }
.wf-reel__item--stat { width: calc(var(--h) * 0.86); }
.wf-reel__item--w11 { width: calc(var(--h) * 1); }


.wf-tile {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
}
.wf-reel .wf-tile img,
.wf-reel .wf-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border: 0;
  border-radius: 0;
}
/* Slides are documents, not pictures: show the whole frame. */
.wf-tile--slide img {
  object-fit: contain;
  background: #fff;
}

.wf-tile__cap {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 2.4rem 0.85rem 0.7rem;
  background: linear-gradient(
    to top,
    rgba(7, 18, 26, 0.88),
    rgba(7, 18, 26, 0.5) 42%,
    rgba(7, 18, 26, 0) 100%
  );
}
.wf-tile__kind {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
}
.wf-tile__what {
  font-size: 0.78rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.93);
}

/* Scope tiles. These are counts of what was produced, deliberately not
   performance numbers; see the claims section further down the page. */
.wf-tile--stat {
  background: var(--color-ink-block);
  border-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem 0.95rem 0.95rem;
  gap: 0.4rem;
}
.wf-tile--stat::before {
  content: "";
  position: absolute;
  top: 0.95rem;
  left: 0.95rem;
  width: 2rem;
  height: 2px;
  background: var(--color-gold);
}
.wf-stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: #fff;
}
.wf-stat__label {
  font-size: 0.76rem;
  line-height: 1.32;
  color: rgba(255, 255, 255, 0.7);
}

/* Edge fades, so tiles enter and leave instead of being chopped off. */
.wf-reel__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(56px, 9vw, 150px);
  pointer-events: none;
  z-index: 2;
}
.wf-reel__fade--l {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), rgba(247, 246, 243, 0));
}
.wf-reel__fade--r {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), rgba(247, 246, 243, 0));
}

@media (prefers-reduced-motion: reduce) {
  /* No drift. It stays a plain scroller, so the content is still reachable. */
  .wf-reel__viewport {
    scroll-snap-type: x proximity;
  }
  .wf-reel__item {
    scroll-snap-align: center;
  }
}

/* ---------------------------------------------------------------------------
   Western Foods: reel hint + "why breadth matters" system section
   --------------------------------------------------------------------------- */

.wf-reel__hint {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* detailed copy (kept below the visuals, for readers and for indexing) ----- */

.wf-detail {
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 19ch) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4.5rem);
  row-gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: start;
}

.wf-detail > h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-ink-block);
  text-wrap: balance;
}

.wf-detail > p {
  margin: 0;
  max-width: 74ch;
  font-size: 1rem;
  line-height: 1.78;
  color: #4a5560;
}

.wf-detail > p + h3 {
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid var(--color-divider);
}

.wf-detail > h3 + p {
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid transparent;
}

.wf-detail > h3:first-child + p {
  padding-top: 0;
}

.wf-detail a {
  color: var(--color-ink-block);
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.wf-detail a:hover,
.wf-detail a:focus-visible {
  color: var(--color-gold);
}

/* short leads used at the top of restructured sections -------------------- */

.wf-lead {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.6;
  color: #3d4750;
  text-wrap: pretty;
}

/* per-section "why it matters" strip -------------------------------------- */

.wf-why {
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.wf-why li {
  margin: 0;
  padding: 0.4375rem 0.8125rem;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #55606b;
}

.wf-why li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 0.5625rem;
  border-radius: 50%;
  background: var(--color-gold);
  vertical-align: 0.14em;
}

.band--ink .wf-why li,
.band--dark .wf-why li {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 760px) {
  .wf-detail {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .wf-detail > h3 {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-divider);
  }

  .wf-detail > h3:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .wf-detail > p {
    margin-top: 0.75rem;
  }

  .wf-detail > p + h3,
  .wf-detail > h3 + p {
    padding-top: 1.5rem;
  }

  .wf-detail > h3 + p {
    padding-top: 0;
    border-top: 0;
  }
}

.wf-detail--flow {
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(1.125rem, 2vw, 1.5rem);
}

.wf-detail--flow > p {
  max-width: 78ch;
  padding-top: 0;
  border-top: 0;
}

/* moved support copy: sits below the visuals. Originally indented into a
   second column to line up with the old eyebrow layout; with the gold
   eyebrows gone and the headlines pulled flush left, the support copy is
   single column so it starts at the same left edge as everything else. */

.wf-support {
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.wf-support > * {
  grid-column: 1;
}

.wf-support .wf-lead {
  margin: 0;
  max-width: 68ch;
}

.wf-support .wf-why {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.wf-support + .shell .wf-detail,
.wf-support ~ .wf-detail {
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 760px) {
  .wf-support {
    grid-template-columns: 1fr;
  }
  .wf-support > * {
    grid-column: 1;
  }
}

/* -- The work wall -------------------------------------------------------
   Replaces the horizontal reel. Full-bleed, one viewport tall, with the
   work grouped into labeled rows that drift in alternating directions.
   The label rides inside its own track, so every row says what it is
   twice per loop rather than needing a static legend that would fight
   the rotation. */

.wf-wall-band {
  padding-block: 0;
}

.wf-wall {
  position: relative;
  margin-top: 0;
  width: 100%;
  height: 150vh;
  height: 150svh;
  overflow: hidden;
  background: var(--color-ink-block);
}

.wf-wall__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210%;
  display: grid;
  gap: clamp(0.5rem, 1vw, 0.9rem);
  transform: translate(-50%, -50%) rotate(-9deg);
}

.wf-wall__row {
  overflow: hidden;
}

.wf-wall__track {
  display: flex;
  align-items: stretch;
  gap: clamp(0.5rem, 1vw, 0.9rem);
  width: max-content;
  animation: wf-wall-scroll var(--dur, 90s) linear infinite;
  will-change: transform;
}

.wf-wall__track--rev {
  animation-direction: reverse;
}

.wf-wall__track img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: clamp(130px, 23vh, 360px);
  background: #fff;
  box-shadow: 0 14px 34px rgba(6, 12, 18, 0.45);
}

.wf-wall__label {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 1.1vw, 0.95rem);
  height: clamp(130px, 23vh, 360px);
  padding-inline: clamp(1rem, 2vw, 2rem);
  background: var(--color-ink-block);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 1.1vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wf-wall__label .wf-wall__label-mark {
  display: block;
  flex: 0 0 auto;
  width: clamp(26px, 2.6vw, 46px);
  height: auto;
  background: none;
  box-shadow: none;
}


@keyframes wf-wall-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - (clamp(0.5rem, 1vw, 0.9rem) / 2)), 0, 0); }
}

/* Motion here is decorative, so it stops rather than degrading. */
@media (prefers-reduced-motion: reduce) {
  .wf-wall__track { animation: none; }
}

@media (max-width: 700px) {
  .wf-wall__stage {
    width: 260%;
    transform: translate(-50%, -50%) rotate(-11deg);
  }
  .wf-wall__track img,
  .wf-wall__label {
    height: clamp(128px, 23vh, 260px);
  }
}

/* -- Hero facts -----------------------------------------------------------
   The facts used to sit in their own light band under the hero. They now
   ride inside the hero itself, directly under the lead, so the opening
   frame answers who/where/what without costing a second scroll. */

.cine-hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  align-items: start;
  row-gap: clamp(1.1rem, 2vw, 1.6rem);
  column-gap: clamp(1.75rem, 3.4vw, 3.5rem);
  margin: clamp(1.1rem, 2.2vw, 1.7rem) 0 0;
  padding-top: clamp(0.9rem, 1.7vw, 1.25rem);
  border-top: 1px solid rgb(255 255 255 / 0.18);
  max-width: 68rem;
}
@media (min-width: 900px) {
  .cine-hero__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cine-hero__facts dt {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.58);
}
.cine-hero__facts dd {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.34;
  font-size: clamp(0.78rem, 0.82vw, 0.875rem);
  color: #fff;
}
.cine-hero__facts a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.35);
}
.cine-hero__facts a:hover {
  border-bottom-color: var(--color-gold-bright);
  color: var(--color-gold-bright);
}
@media (max-width: 560px) {
  .cine-hero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wf-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgb(7 18 26 / 0.74) 0%, rgb(7 18 26 / 0.44) 52%, rgb(7 18 26 / 0.16) 100%);
}

.wf-wall__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
  padding-inline: var(--gutter);
  pointer-events: none;
}

.wf-wall__sub {
  margin: 0;
  max-width: 42ch;
  text-align: center;
  color: rgb(255 255 255 / 0.86);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.4;
  font-size: clamp(1rem, 1.9vw, 1.45rem);
  text-shadow: 0 8px 30px rgb(5 12 18 / 0.6);
  text-wrap: balance;
}

.wf-wall__title {
  margin: 0;
  text-align: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 6.4vw, 5.6rem);
  text-wrap: balance;
  text-shadow: 0 10px 44px rgb(5 12 18 / 0.55);
}

/* When the facts ride inside the hero, the wordmark gives back a little scale
   so the opening frame still resolves inside one viewport. */
.cine-hero__content:has(.cine-hero__facts) .cine-hero__name {
  font-size: clamp(3rem, 10.4vw, 8.6rem);
}
.cine-hero__content:has(.cine-hero__facts) .cine-hero__lead {
  margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
}
/* Five facts in the hero instead of the four column default. */
.cine-hero__facts--5 {
  max-width: none;
}
@media (min-width: 900px) {
  .cine-hero__facts--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* The rule above is sized for a short wordmark. A sentence headline carries the
   shared hero title scale, facts row or not. */
.cine-hero__content:has(.cine-hero__facts) .cine-hero__name--sentence {
  font-size: clamp(2.1rem, 6.4vw, 5.6rem);
  line-height: 1.04;
}

/* -- Client goal band ----------------------------------------------------
   Sits between the hero and the work wall and states what Western Foods
   came in to accomplish. Eyebrow + headline + lead + three numbered cards. */

.wf-goal-band {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}

.wf-goal-band__inner {
  display: grid;
  gap: clamp(1.4rem, 2.6vw, 2rem);
}

.wf-goal-band__eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.wf-goal-band__title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ink-block);
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  text-wrap: balance;
}

.wf-goal-band__lead {
  margin: 0;
  max-width: 60ch;
  color: #3d4750;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.55;
}

.wf-goal-band__grid {
  margin-top: clamp(1rem, 2vw, 1.75rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 1.6vw, 1.35rem);
}
@media (min-width: 900px) {
  .wf-goal-band__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.wf-goal-card {
  position: relative;
  padding: clamp(1.5rem, 2.2vw, 2rem);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-top: 3px solid var(--color-gold);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.7rem;
}

.wf-goal-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-ink-block);
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
}

.wf-goal-card__body {
  margin: 0;
  color: #4a5560;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* -- Social section: the client's own post creative shown on a device, with a
   link out to the live company page underneath. ---------------------------- */

.wf-social__device {
  margin: 0;
  width: 100%;
}
.wf-social__device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.wf-social__device figcaption {
  padding: 0.85rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-faint);
}
/* The link out sits under the device, flush with the left edge of the image. */
.wf-social__link {
  margin: 1rem 0 0;
  text-align: left;
}
.wf-social__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-ink-block);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.wf-social__cta:hover,
.wf-social__cta:focus-visible {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}
.wf-social__icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  fill: #0a66c2;
}

/* -- Touchpoint index -------------------------------------------------- */
.wf-index__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.7rem, 1.6vw, 1.35rem);
}
.wf-index__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.wf-index__shot {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
}
.wf-index .wf-index__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: none;
  box-shadow: none;
  transition: transform 0.55s ease;
}
.wf-index__link:hover .wf-index__shot img,
.wf-index__link:focus-visible .wf-index__shot img { transform: scale(1.05); }
.wf-index__label {
  display: block;
  margin-top: 0.72rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #3d4750;
  transition: color 0.25s ease;
}
.wf-index__link:hover .wf-index__label,
.wf-index__link:focus-visible .wf-index__label { color: var(--color-gold); }
@media (max-width: 900px) {
  .wf-index__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .wf-index__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Brand proof pair in the branding section. Two mockup stills side by side.
   Both frames use a 3/2 box with object-fit: cover so the 4:3 book shot and
   the wider apparel shot sit at the same height without letterboxing. */
.wf-brand-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.wf-brand-fig {
  margin: 0;
}

.wf-brand-pair .wf-brand-fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.wf-brand-fig figcaption {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6c7680;
}

@media (min-width: 640px) {
  .wf-brand-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Printed pages shown flat and straight on, at their real proportions. No
   perspective, no skew: the artwork is the subject, so nothing is faked. */
.wf-pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.6vw, 1.15rem);
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
}

.wf-page {
  margin: 0;
  min-width: 0;
}

.wf-page img,
.wf-bookshot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1100 / 1424;
  object-fit: cover;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(11, 28, 40, 0.06), 0 10px 24px rgba(11, 28, 40, 0.07);
}

@media (min-width: 46rem) {
  .wf-pages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .wf-pages {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}


/* Printed collateral: the brochure shown the same way the rest of the page
   shows work. One wide lead frame, then a two-up of interior spreads. All
   three plates share a 3/2 box so they line up at matching heights. */
.wf-print {
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.wf-print__lead,
.wf-print__fig {
  margin: 0;
}

.wf-print__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.wf-print img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 640px) {
  .wf-print__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Section kicker on the case study heads, matching the label that sits above
   the photography rail headline. Display face, gold, uppercase, sitting
   directly on top of the h2 in the single-column flush head. */
.sec-kicker {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.band--ink .sec-kicker {
  color: var(--color-gold-bright);
}

/* Section title above the touchpoint anchor grid. Carries the same display
   scale as the goal band headline so the two statements on the page read at
   one weight. */
.wf-index__title {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ink-block);
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  text-wrap: balance;
}

/* ------------------------------------------------- photography, masonry gallery */
/* A column masonry flush along its top AND bottom edge. The layout is solved rather
   than guessed: each column's width is inversely proportional to the sum of its
   figures' aspect ratios, and each figure takes a fixed percentage of the column
   height. Every column therefore ends level and nothing is cropped, because those
   percentages ARE the figures' own aspect ratios at the solved column width. The
   gaps are percentages, so the block stays self-similar at every width and the
   bottom edge stays level rather than drifting as the page resizes. */
.wf-gallery-band {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.wf-gallery {
  display: grid;
  column-gap: 1.2%;
  row-gap: 0;
  aspect-ratio: 1.6233;
  grid-template-columns: 30.0762fr 21.3934fr 18.7540fr 29.7764fr;
}
.wf-gallery__col {
  display: flex;
  flex-direction: column;
  row-gap: 1.9480%;
  min-width: 0;
}
.wf-gallery__fig {
  margin: 0;
  height: var(--h4);
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface);
}
.wf-gallery__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Narrow screens run the same solve over two columns instead of four. CSS grid
   cannot express a masonry that stays flush on both edges once the figures
   regroup, so each one is placed at its solved position inside a container of the
   solved aspect ratio. The result is the same flush block, and it needs no second
   copy of the images in the markup. */
@media (max-width: 60rem) {
  .wf-gallery {
    display: block;
    position: relative;
    aspect-ratio: 0.3851;
  }
  .wf-gallery__col {
    display: contents;
  }
  .wf-gallery__fig {
    position: absolute;
    left: var(--x2);
    top: var(--y2);
    width: var(--w2);
    height: var(--h2);
  }
}

/* ---------------------------------------------- trade shows, one show per view */
/* The three shows used to stack as scroll-pinned cards. They now sit on a
   horizontal snap track: one show fills the view, and the arrows or a sideways
   swipe move to the next. */
.wf-expo-band {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.expo-slider {
  position: relative;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
.expo-slider__track {
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.expo-slider__track::-webkit-scrollbar {
  display: none;
}
.expo-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.expo-slider__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
}
.expo-slider__btn {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink-block);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.expo-slider__btn svg {
  width: 1.15rem;
  height: 1.15rem;
}
.expo-slider__btn:hover:not(:disabled) {
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.expo-slider__btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.expo-slider__count {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
}
/* Inside a single view the photographs are capped by height rather than width, so
   a whole show fits one screen instead of running past it. */
/* On a wide screen a show reads as a spread: the written introduction on the left,
   its photographs on the right, so the whole show fits the view instead of running
   past the fold and defeating the point of one per view. */
@media (min-width: 61rem) {
  .expo-slide__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }
  .expo-slide .cine-chapter {
    border-top: 0;
    padding-top: 0;
    display: block;
  }
  .expo-slide .cine-chapter__aside {
    position: static;
  }
  .expo-slide .cine-chapter__body {
    margin-top: clamp(1rem, 2vw, 1.5rem);
  }
  .expo-slide .wf-expo__media {
    margin-top: 0;
  }
  .expo-slide .wf-expo__pair img {
    max-height: 38vh;
    object-fit: cover;
  }
  .expo-slide .wf-expo__span img {
    max-height: 20vh;
  }
}

/* ------------------------------------------------------- full-view sections */
/* Every band on the Western Foods page is a screen tall and centers its content
   under the header. The page scrolls freely: there is no scroll snapping, so a
   reader can stop anywhere in a band. The growth wall and the photography pair
   keep their natural height instead. */
.wf-snap main > section,
.wf-snap main > .cine-scrub-host {
  min-height: calc(100vh - var(--header-h, 77px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wf-snap main > #the-work,
.wf-snap main > #photography,
.wf-snap main > #photography-rail {
  min-height: 0;
  display: block;
}
.wf-snap main > .cine-hero-host {
  display: block;
  min-height: 0;
}
/* Text-only bands keep their natural height. A screen-tall band around a
   heading and a paragraph read as dead space. */
.wf-snap main > .wf-goal-band,
.wf-snap main > #touchpoints,
.wf-snap main > #timeline,
.wf-snap main > #claims,
.wf-snap main > #start,
.wf-snap main > #next-case,
.wf-snap main > .cta-band {
  min-height: 0;
  display: block;
}
@media (min-width: 61rem) {
  .wf-snap main > .wf-goal-band,
  .wf-snap main > #touchpoints,
  .wf-snap main > #timeline,
  .wf-snap main > #claims {
    padding-block: clamp(3.5rem, 7vw, 7rem);
  }
}
@media (max-width: 60rem) {
  /* Phones have their own address bar movement and a much taller stack of content
     per band; forcing a screen height there only creates dead space. */
  .wf-snap main > section,
  .wf-snap main > .cine-scrub-host {
    min-height: 0;
    display: block;
  }
}
/* Anchor jumps land flush under the sticky header rather than 6rem below it. */
.wf-snap {
  scroll-padding-top: var(--header-h, 77px);
}

/* ------------------------------------------------- full-view split sections
   Every touchpoint band has to fit one screen so the page can snap section to
   section. Below 61rem the bands stay stacked and scroll normally; at desktop
   width the written half moves to the left column and the work to the right,
   and the work is capped by viewport height rather than by column width, so
   nothing runs past the fold on a short laptop screen. */
@media (min-width: 61rem) {
  /* Band padding is measured against the screen, not the page width, for every
     section that has to fit one view. The default 9vw padding took 230px out of a
     1280px-wide window, which is a third of a short laptop screen. */
  .wf-snap main > section {
    padding-block: clamp(1.5rem, 5vh, 4.5rem);
  }
  .wf-split__shell {
    display: grid;
    /* The written column takes a fixed measure and the work takes the rest, so a
       wider screen grows the photographs rather than the line length. */
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
  .wf-split__copy .sec-head {
    margin-bottom: 0;
  }
  .wf-split__copy .sec-title {
    max-width: 22ch;
  }
  .wf-split__copy .wf-support {
    margin-top: clamp(1.25rem, 2.5vh, 2rem);
  }
  .wf-split__media {
    display: grid;
    gap: clamp(0.75rem, 1.5vh, 1.25rem);
    align-content: center;
    min-width: 0;
  }
  .wf-split__media > * {
    margin-top: 0;
    min-width: 0;
  }
  .wf-split__media img,
  .wf-split__media video {
    max-width: 100%;
  }

  /* Apparel panels and the brand books are cropped frames already, so they take a
     height in vh and keep filling their box. 40vh + 20vh leaves the band padding
     and the heading room inside one screen. */
  .wf-split .wf-uniform-fig {
    aspect-ratio: auto;
    height: clamp(170px, 40vh, 420px);
  }
  .wf-split .wf-brand-pair {
    margin-top: 0;
  }
  .wf-split .wf-brand-pair .wf-brand-fig img {
    aspect-ratio: auto;
    height: clamp(105px, 20vh, 220px);
    object-fit: cover;
  }

  /* The brochure: one wide lead plate over a two-up of interior spreads. Sizing
     for it is set further down, where the block is measured as a whole. */
  .wf-split__copy .pills {
    margin-top: clamp(1rem, 2vh, 1.5rem) !important;
  }

  /* Plates that must stay whole: the desk, the laptop and the phone are single
     photographs, so they scale down inside the column instead of being cropped. */
  .wf-split .wf-monitor,
  .wf-split .wf-stage {
    margin-top: 0;
    width: 100%;
  }

  /* The laptop in the presentations band carries a recording of the live
     presentation's own navigation, so its display has to stay large enough for
     the nav labels to read. The written column gives up a few rem to it. */
  .wf-split--deck .wf-split__shell {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: 2.5rem;
    padding-inline: 2.5rem;
  }
  /* The device is sized to the room left under the header, and the width that
     height implies is shared with the link below so the two edges line up. */
  .wf-social.wf-split {
    --wf-social-w: min(100%, calc((100vh - var(--header-h, 77px) - 13rem) * 1168 / 1056));
  }
  .wf-split .wf-social__device img,
  .wf-split .wf-social__link {
    width: var(--wf-social-w);
    margin-inline: auto;
  }
  .wf-split .wf-social__device img {
    max-height: calc(100vh - var(--header-h, 77px) - 13rem);
  }
}

/* The trade show band takes the same split. Its right column is now photographs
   only: the written introduction for each show moved into the left column, where
   it cross-fades as the shows flip. */
@media (min-width: 61rem) {
  .wf-split--expo .expo-slide .wf-expo__media {
    margin-top: 0;
  }
  .wf-split--expo .expo-slider__nav {
    margin-top: clamp(0.75rem, 1.5vh, 1.25rem);
  }
}

/* The brochure section carries a long list of what changed. In the split it sits
   under the plates in two tighter columns, which keeps the written column to a
   readable measure and the whole band inside one screen. */
@media (min-width: 61rem) {
  .wf-split__media > .pills {
    margin-top: clamp(0.75rem, 1.5vh, 1.25rem) !important;
    columns: 2;
    column-gap: clamp(1rem, 2vw, 1.75rem);
  }
  .wf-split__media > .pills li {
    font-size: 0.72rem;
    break-inside: avoid;
  }
}

/* A split band is the width of the screen it fills, so the work column can use
   the height the band already reserves. The written column keeps its measure, so
   only the photographs grow. */
@media (min-width: 61rem) {
  .wf-split__shell {
    max-width: min(96vw, 1680px);
  }
  /* The brochure block is set as a column of fixed width so its three plates line
     up on all four sides: the lead spans the full width, the two interior spreads
     split it with one gap between them, and every plate carries the same 3/2 box
     the files were exported at, so nothing is cropped and no edge is ragged. The
     width is measured against viewport height, because height is what limits the
     block inside a band that has to fit one screen. */
  .wf-split .wf-print {
    --wf-print-gap: clamp(0.75rem, 1.6vh, 1.25rem);
    width: min(100%, 72vh);
    margin-inline: auto;
  }
  .wf-split .wf-print__lead img {
    width: 100%;
    height: auto;
    max-height: none;
    margin-inline: 0;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
  .wf-split .wf-print__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wf-print-gap);
    margin-top: var(--wf-print-gap);
  }
  .wf-split .wf-print__fig img {
    width: 100%;
    height: auto;
    max-height: none;
    margin-inline: 0;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
}

/* The scrolling box for this page is the root element, not the body, so the
   scroll padding has to live on <html>. The page does not snap: scrolling is
   free from top to bottom. `.wf-snap-root` is set on the <html> tag of the case
   study itself, and the `:has()` form is kept as a fallback for any copy of the
   page that does not carry the root class. */
.wf-snap-root,
html:has(body.wf-snap) {
  scroll-padding-top: var(--header-h, 77px);
}

/* On a short screen the brochure list is the last thing that has to give. */
@media (min-width: 61rem) and (max-height: 800px) {
  .wf-split__media > .pills li {
    font-size: 0.66rem;
    padding-block: 0.3rem;
  }
  .wf-split__copy .wf-why li,
  .wf-split__copy .pills li {
    font-size: 0.68rem;
  }
}

/* Two height tiers for the bands whose content is closest to the screen edge.
   A laptop at 900px tall only needs the photographs trimmed; at 800px and under
   the written introduction inside a slide has to come down a step as well. */
@media (min-width: 61rem) and (max-height: 1000px) {
}
@media (min-width: 61rem) and (max-height: 800px) {
  .wf-split .wf-print {
    width: min(100%, 66vh);
  }
}

/* The shortest desktop screens in common use are around 720px of viewport. */
@media (min-width: 61rem) and (max-height: 760px) {
}

/* ------------------------------------------- trade shows, flipped by the scroll */
/* The three shows no longer wait for an arrow. The section is three screens tall,
   the visible stage sticks under the header for all three, and each screen of
   scrolling swaps the photographs and the written introduction beside them. The
   three empty step blocks below the stage are what gives the section its height,
   so each show gets a screen of scrolling to itself.
   Everything here is desktop only. On a phone the pin is dropped and the track
   goes back to being swiped sideways. */
@media (min-width: 61rem) {
  .wf-snap main > section.wf-expo-scroll {
    padding-block: 0;
    position: relative;
  }
  .wf-expo-scroll__stage {
    position: sticky;
    top: var(--header-h, 77px);
    height: calc(100vh - var(--header-h, 77px));
    display: grid;
    align-items: center;
    padding-block: clamp(1.25rem, 4vh, 3.5rem);
    box-sizing: border-box;
    z-index: 1;
  }
  .wf-expo-scroll__steps {
    margin-top: calc((100vh - var(--header-h, 77px)) * -1);
    pointer-events: none;
  }
  .wf-expo-step {
    height: calc(100vh - var(--header-h, 77px));
  }
  /* On the stage the track is moved by transform rather than by its own scrollbar,
     so the gap has to go: one slide is exactly one column width. */
  .wf-expo-scroll .expo-slider {
    margin-top: 0;
    overflow: hidden;
  }
  /* The clipping has to happen on the wrapper, not on the track: a transform
     moves an element's own overflow box with it, which would carry the window
     off the screen along with the slides. */
  .wf-expo-scroll .expo-slider__track {
    overflow: visible;
    gap: 0;
    scroll-snap-type: none;
    padding-bottom: 0;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  .wf-expo-scroll .expo-slide {
    opacity: 0.25;
    transition: opacity 0.45s ease;
  }
  .wf-expo-scroll .expo-slide.is-active {
    opacity: 1;
  }
  .wf-expo-scroll .wf-expo__pair img {
    max-height: 42vh;
    object-fit: cover;
  }
  .wf-expo-scroll .wf-expo__span img {
    max-height: 21vh;
  }
}
@media (min-width: 61rem) and (max-height: 800px) {
  .wf-expo-scroll .wf-expo__pair img {
    max-height: 38vh;
  }
  .wf-expo-scroll .wf-expo__span img {
    max-height: 18vh;
  }
}

/* The written introduction for each show sits in the left column and cross-fades.
   All three are stacked in one grid cell so the column never changes height as
   the shows flip. */
.expo-copy {
  display: grid;
  margin-top: clamp(1.25rem, 3vh, 2rem);
}
.expo-copy__item {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.expo-copy__item.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.expo-copy__where {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.expo-copy__name {
  margin: 0.35rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.2;
  color: var(--color-ink-block);
}
.expo-copy__item p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4a5560;
}

/* Dots replace the arrows. They still work as buttons for anyone who would rather
   jump than scroll, and they double as the position indicator. */
.expo-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.expo-dot {
  display: block;
  width: 2rem;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-divider);
  cursor: pointer;
  transition: background 0.3s ease;
}
.expo-dot.is-active {
  background: var(--color-gold);
}
.expo-dot:hover {
  background: var(--color-gold-bright);
}

/* Phone and small tablet: no pin, no transform, swipe the track as before. */
@media (max-width: 60rem) {
  .wf-expo-scroll__steps {
    display: none;
  }
  .wf-expo-scroll .expo-slide {
    scroll-snap-align: start;
  }
}

/* The trade show stage carries no copy in the right column, so the photographs
   get the extra width the written introduction used to take. */
@media (min-width: 61rem) {
  .wf-expo-scroll .wf-split__shell {
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
  }
}

/* Given the width, two photographs side by side only reach about a third of the
   stage on their own. They take a set height and crop instead, so a show fills
   the view rather than floating in the middle of it. */
@media (min-width: 61rem) {
  .wf-expo-scroll .wf-expo__pair img {
    height: clamp(210px, 34vh, 420px);
    max-height: none;
    object-fit: cover;
  }
  .wf-expo-scroll .wf-expo__span img {
    height: clamp(120px, 19vh, 240px);
    max-height: none;
    object-fit: cover;
  }
}
@media (min-width: 61rem) and (max-height: 800px) {
  .wf-expo-scroll .wf-expo__pair img {
    height: 30vh;
  }
  .wf-expo-scroll .wf-expo__span img {
    height: 16vh;
  }
}

/* ---------- what-we-do rebuild (wwd-*) ---------- */
.wwd-hero {
  position: relative;
  padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
}
.wwd-hero__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 62rem;
}
.wwd-hero h1 {
  margin: 1rem 0 0;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.wwd-hero__lede {
  max-width: 44rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.55;
}
.wwd-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  margin-top: 0.75rem;
}

/* Section anchor offset for sticky header */
#growth-plans,
#wwd-process,
#wwd-ecosystem,
#wwd-outcomes,
#wwd-cases,
#wwd-capabilities {
  scroll-margin-top: calc(var(--header-h, 77px) + 1rem);
}

/* Outcomes cards */
.wwd-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.wwd-outcome {
  border: 1px solid var(--color-divider);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--color-surface, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.wwd-outcome h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.15;
}
.wwd-outcome p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

/* Growth Plans emphasis block */
.wwd-plans {
  background: var(--color-ink, #0d0f14);
  color: var(--color-on-ink, #f7f5ee);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.wwd-plans .eyebrow {
  color: var(--color-gold-bright, #d4a24c);
}
.wwd-plans h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 26ch;
}
.wwd-plans__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.wwd-plans__lede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--color-on-ink, #f7f5ee);
  opacity: 0.9;
  margin: 0 0 1.2rem;
}
.wwd-plans__body p {
  color: var(--color-on-ink, #f7f5ee);
  opacity: 0.78;
  margin: 0 0 1rem;
  line-height: 1.6;
}
.wwd-plans__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.9rem;
}
.wwd-plans__list li {
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.5;
  color: var(--color-on-ink, #f7f5ee);
  opacity: 0.92;
}
.wwd-plans__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-gold-bright, #d4a24c);
}
.wwd-plans__cta {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (max-width: 820px) {
  .wwd-plans__grid { grid-template-columns: 1fr; }
}

/* Process: six steps */
.wwd-process__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.wwd-step {
  border: 1px solid var(--color-divider);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--color-surface, transparent);
}
.wwd-step h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.2;
}
.wwd-step p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.98rem;
  line-height: 1.5;
}
.wwd-step .pills {
  margin: 0.25rem 0 0;
}

/* Ecosystem: simpler static visual */
.wwd-eco {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.wwd-eco__intro {
  max-width: 44rem;
  color: var(--color-text-muted);
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  margin: 0.75rem 0 0;
}
.wwd-eco__diagram {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 56rem;
  display: block;
  width: 100%;
  height: auto;
}
.wwd-eco__diagram .eco-line {
  stroke: var(--color-divider, #d8d3c6);
  stroke-width: 1.25;
  fill: none;
  transition: stroke 0.25s ease, stroke-width 0.25s ease;
}
.wwd-eco__diagram .eco-node {
  cursor: default;
}
.wwd-eco__diagram .eco-node rect {
  fill: var(--color-surface, #f7f5ee);
  stroke: var(--color-divider, #d8d3c6);
  stroke-width: 1.25;
  transition: stroke 0.25s ease, transform 0.25s ease;
}
.wwd-eco__diagram .eco-node text {
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-size: 15px;
  font-weight: 600;
  fill: var(--color-text, #17171a);
  text-anchor: middle;
  dominant-baseline: middle;
}
.wwd-eco__diagram .eco-center rect {
  fill: var(--color-ink, #0d0f14);
  stroke: var(--color-ink, #0d0f14);
}
.wwd-eco__diagram .eco-center text {
  fill: var(--color-on-ink, #f7f5ee);
  font-weight: 700;
  font-size: 17px;
}
.wwd-eco__diagram .eco-node:hover rect,
.wwd-eco__diagram .eco-node:focus-visible rect {
  stroke: var(--color-gold-bright, #d4a24c);
  stroke-width: 2;
}
.wwd-eco__diagram .eco-node:hover ~ .eco-lines .eco-line[data-target],
.wwd-eco__diagram .eco-node[data-active] ~ .eco-lines .eco-line {
  stroke: var(--color-gold-bright, #d4a24c);
}
.wwd-eco__stack {
  display: none;
  list-style: none;
  padding: 0;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  display: grid;
  gap: 0.75rem;
}
.wwd-eco__stack li {
  border: 1px solid var(--color-divider);
  padding: 1rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface, transparent);
}
.wwd-eco__stack li.wwd-eco__center {
  background: var(--color-ink, #0d0f14);
  color: var(--color-on-ink, #f7f5ee);
  border-color: var(--color-ink, #0d0f14);
}
@media (min-width: 721px) {
  .wwd-eco__stack { display: none; }
}
@media (max-width: 720px) {
  .wwd-eco__diagram { display: none; }
  .wwd-eco__stack { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .wwd-eco__diagram .eco-line,
  .wwd-eco__diagram .eco-node rect { transition: none; }
}

/* Capabilities: compact linked grid */
.wwd-caps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.85rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.wwd-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--color-divider);
  padding: 1.05rem 1.15rem;
  color: inherit;
  text-decoration: none;
  background: var(--color-surface, transparent);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.wwd-cap:hover,
.wwd-cap:focus-visible {
  border-color: var(--color-gold-bright, #d4a24c);
}
.wwd-cap__name {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  font-size: 0.98rem;
}
.wwd-cap__arrow {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-text-muted);
  transition: color 0.25s ease, transform 0.25s ease;
}
.wwd-cap:hover .wwd-cap__arrow,
.wwd-cap:focus-visible .wwd-cap__arrow {
  color: var(--color-gold-bright, #d4a24c);
  transform: translate(2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
  .wwd-cap, .wwd-cap__arrow { transition: none; }
}

/* what-we-do wall (reuses .wf-wall with hero-height override and word chips) */
.wwd-wall-band {
  padding-block: 0;
  background: var(--color-ink-block, #060c14);
}
.wwd-wall-band .wf-wall {
  /* Tighter than the WF case-study wall (150vh); a proper hero */
  height: 92vh;
  height: 92svh;
  min-height: 620px;
  max-height: 960px;
}
.wwd-wall-band .wf-wall__overlay {
  padding-block: clamp(2rem, 5vw, 4rem);
}
.wwd-wall-band .wf-wall__title {
  max-width: 22ch;
}
.wwd-wall-band .wf-wall__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  margin-top: 0.25rem;
}
.wwd-wall-band .wwd-wall__jump {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.wwd-wall-band .wwd-wall__jump svg {
  width: 0.95rem;
  height: 0.95rem;
}
.wwd-wall-band .wwd-wall__jump:hover,
.wwd-wall-band .wwd-wall__jump:focus-visible {
  color: var(--color-gold-bright, #d4a24c);
  border-bottom-color: var(--color-gold-bright, #d4a24c);
}
/* Word chips (like category labels, but without the mark icon) */
.wwd-wall__word {
  background: transparent;
  border-color: rgba(255,255,255,0.32);
  color: rgba(255,255,255,0.92);
}
.wwd-wall__word .wf-wall__label-txt {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* Hero got much taller; give the following outcomes section more breathing room */
.wwd-wall-band + #wwd-outcomes {
  padding-top: clamp(4rem, 7vw, 6rem);
}

/* what-we-do sticky lockup, sits directly under site header */
/* Breadcrumb bar under header on every page except the homepage */
.wwd-crumb {
  background: var(--color-bg, #f7f6f3);
  border-bottom: 1px solid rgba(6, 12, 20, 0.08);
  color: var(--color-ink-block, #060c14);
}
.wwd-crumb__inner {
  padding-block: 0.7rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.wwd-crumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.wwd-crumb__item a {
  color: rgba(6, 12, 20, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}
.wwd-crumb__item a:hover,
.wwd-crumb__item a:focus-visible {
  color: var(--color-ink-block, #060c14);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wwd-crumb__item--current {
  color: var(--color-ink-block, #060c14);
  font-weight: 700;
}
.wwd-crumb__sep {
  display: inline-flex;
  align-items: center;
  color: rgba(6, 12, 20, 0.35);
}
.wwd-crumb__sep svg {
  width: 0.75rem;
  height: 0.75rem;
}
@media (max-width: 640px) {
  .wwd-crumb__inner {
    padding-block: 0.55rem;
  }
  .wwd-crumb__list {
    font-size: 0.82rem;
    gap: 0.5rem;
  }
}

/* anchor scroll padding clears header + breadcrumb */
.wwd-crumb ~ main [id] {
  scroll-margin-top: calc(var(--header-h, 77px) + 50px);
}

/* Designed for Growth lockup graphic (styled after Let's Make You Awesome lettering) */
.wwd-lockup-graphic {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  color: #fff;
  line-height: 1;
  text-shadow: 0 4px 30px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
  /* Slight rotation to feel hand-drawn */
  transform: rotate(-2deg);
}
.wwd-lockup-graphic__script {
  font-family: 'Kaushan Script', 'Pacifico', cursive;
  font-weight: 400;
  font-size: clamp(2.6rem, 7.4vw, 6.4rem);
  line-height: 1.02;
  text-align: center;
  margin-right: 0.25em; /* shift for the swash tail */
  padding-right: 0.1em;
}
.wwd-lockup-graphic__swash {
  display: block;
  width: clamp(180px, 34vw, 480px);
  height: clamp(14px, 2vw, 22px);
  margin-top: -0.3em;
  color: #fff;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35));
}
.wwd-lockup-graphic__caps {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 9vw, 8rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 0.1em;
  color: #fff;
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
}
.wwd-lockup-graphic__caps--sm {
  font-size: clamp(2rem, 6vw, 5.2rem);
  margin-top: 0.15em;
}
.wwd-lockup-graphic__for {
  font-family: 'Kaushan Script', 'Pacifico', cursive;
  font-weight: 400;
  font-size: 0.55em;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.92);
  position: relative;
  top: -0.15em;
}
/* Overlay tweak so the lockup sits high-center over the marquee */
.wwd-wall__overlay--graphic {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  justify-content: center;
  align-items: center;
  gap: 0;
}


/* ---------- Vertical wall: fixed lockup + many rows scrolling by ---------- */
/* The band is EXPLICITLY tall (long scroll distance). Rows fill the band from top to bottom in
   the normal flow. The sticky lockup pins to the viewport top for the whole band and paints ON
   TOP of the rows (z-index). */
.wwd-wall-band {
  position: relative;
  background: var(--color-ink-block, #060c14);
  color: #fff;
  min-height: 3500px; /* desktop scroll length, sized for 16 tightly packed rows */
}
@media (max-width: 900px) {
  .wwd-wall-band { min-height: 2600px; }
}
@media (max-width: 640px) {
  .wwd-wall-band { min-height: 1800px; }
}
/* Clipping wrapper: the rotated stage must be clipped, but the BAND itself cannot have
   overflow:hidden or it becomes the sticky lockup's scrollport and the pin breaks. */
.wf-vwall__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}
/* Sticky lockup: sits first in DOM, sticks to viewport top. margin-bottom pulls the next
   sibling (.wf-vwall__rows) up to overlap the sticky's space, so rows fill the entire band. */
.wf-vwall__sticky {
  position: sticky;
  top: var(--header-h, 77px);
  /* Shorter than a full viewport on purpose. The lockup is centered in this box, so the
     box height sets how much empty room trails below NEEDS when the pin releases at the
     end of the band. Keep it tight so the tagline and the copy below read together. */
  height: max(380px, calc(100vh - var(--header-h, 77px) - 280px));
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.wf-vwall__sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(6, 12, 20, 0.5) 0%, rgba(6, 12, 20, 0.22) 45%, rgba(6, 12, 20, 0) 78%);
  pointer-events: none;
}
.wf-vwall__lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  /* Sits lower in the pinned box so it clears the top of the band and reads
     nearer the middle of the screen while the wall scrolls behind it. */
  transform: translateY(clamp(2rem, 9vh, 6.5rem)) rotate(-2deg);
  color: #fff;
  text-shadow: 0 6px 24px rgba(6, 12, 20, 0.6), 0 2px 6px rgba(6, 12, 20, 0.55);
  position: relative;
  z-index: 1;
}
/* Slanted stage, matching the original wall's -9deg tilt. Oversized so the rotated
   rectangle still covers the band's full width after rotation. */
.wf-vwall__rows {
  position: absolute;
  top: -6%;
  left: 50%;
  width: 210%;
  transform: translateX(-50%) rotate(-9deg);
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1vw, 0.9rem);
}
/* Rows sit right on top of each other, height driven by the images themselves. */
.wf-vwall__row {
  overflow: hidden;
  width: 100%;
}
.wf-vwall__track {
  display: flex;
  align-items: stretch;
  gap: clamp(0.5rem, 1vw, 0.9rem);
  width: max-content;
  animation: wf-vwall-scroll var(--dur, 90s) linear infinite;
  will-change: transform;
}
.wf-vwall__track--rev {
  animation-direction: reverse;
}
.wf-vwall__track img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: clamp(140px, 22vh, 320px);
  background: #fff;
  box-shadow: 0 12px 30px rgba(6, 12, 18, 0.5);
  border-radius: 2px;
}
.wf-vwall__label {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 0.9vw, 0.8rem);
  height: clamp(140px, 22vh, 320px);
  padding-inline: clamp(1rem, 2vw, 2rem);
  background: var(--color-ink-block);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wf-vwall__word {
  background: transparent;
  border-color: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.9);
}
.wf-vwall__label-mark {
  display: block;
  flex: 0 0 auto;
  width: clamp(24px, 2.4vw, 42px);
  height: auto;
  background: none;
  box-shadow: none;
}
@keyframes wf-vwall-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50%), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-vwall__track { animation: none; }
}
@media (max-width: 640px) {
  .wf-vwall__rows {
    gap: 0.5rem;
  }
  .wf-vwall__track img,
  .wf-vwall__label {
    height: clamp(110px, 15vh, 200px);
  }
}


@media (max-width: 640px) {
  .wwd-lockup-graphic {
    transform: rotate(-1.5deg);
  }
  .wwd-lockup-graphic__script {
    font-size: clamp(1.9rem, 9.6vw, 3.2rem);
  }
  .wwd-lockup-graphic__caps {
    font-size: clamp(2.4rem, 12vw, 3.8rem);
  }
  .wwd-lockup-graphic__caps--sm {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
  }
  .wwd-lockup-graphic__swash {
    width: clamp(140px, 50vw, 240px);
  }
}

/* ------------------------------------------------- case studies index
   One featured study whose industry framing sits inside the card rather than
   floating above it, then a compact list of the rest. Previews are zoomed-out
   tilted walls of each client's own work, not screenshots of their home page. */
.page-hero--tight {
  padding-bottom: clamp(1rem, 2vw, 1.75rem);
}
.page-hero--tight h1 {
  margin-top: 0;
}

/* tilted wall preview: the client's own work, turned and scaled down so the
   whole composition reads at a glance. The wall is laid out larger than its
   frame so the tilt reaches past every corner. */
.cs-wall {
  position: absolute;
  inset: -15% -17%;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 0.4rem;
  background: var(--color-ink-block);
}
.cs-wall__row {
  display: flex;
  gap: 0.4rem;
  min-height: 0;
  transform: rotate(-9deg);
  transform-origin: center;
}
.cs-wall__row img {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 100%;
  object-fit: cover;
  background: var(--color-surface-2);
}

/* case study rows: the client's work at the left, the name set large at the
   right with the industry, what we did, and the link to the study beneath it. */
.cs-lanes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sec-head + .cs-lanes {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.cs-lane {
  display: grid;
  grid-template-columns: clamp(11rem, 24vw, 20rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: center;
  padding: clamp(1.4rem, 2.6vw, 2.2rem) 0;
  border-top: 1px solid var(--color-divider);
  color: inherit;
  text-decoration: none;
}
.cs-lanes li:last-child .cs-lane {
  border-bottom: 1px solid var(--color-divider);
}
.cs-lane__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  background: var(--color-surface-2);
}
.cs-lane__figure > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-lane__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.9vw, 3.3rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  transition: color 0.35s ease;
}
.cs-lane__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem 0.9rem;
  margin-top: clamp(0.8rem, 1.6vw, 1.15rem);
}
.cs-lane__industry {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.cs-lane__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.cs-lane__tag {
  display: inline-block;
  padding: 0.34rem 0.8rem;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: var(--color-surface-2);
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.cs-lane__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
}
.cs-lane__link svg {
  width: 0.95rem;
  height: 0.95rem;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cs-lane:hover .cs-lane__title,
.cs-lane:focus-visible .cs-lane__title {
  color: var(--color-primary);
}
.cs-lane:hover .cs-lane__link svg,
.cs-lane:focus-visible .cs-lane__link svg {
  transform: translateX(3px);
}
.cs-lanes__industries {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.cs-lanes__industries a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.cs-lanes__industries a:hover {
  color: var(--color-primary-hover);
}
/* Agency history below the case-study index, before the closing invitation. */
.band.cs-history {
  padding-block: clamp(var(--space-12), 7vw, var(--space-24));
}
.cs-history__heading h2 {
  max-width: 19ch;
  font-size: clamp(2.125rem, 3.3vw, 4.8rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.cs-history__copy {
  max-width: 60ch;
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  line-height: 1.6;
}
.cs-history__copy > p + p {
  margin-top: var(--space-6);
}
@media (max-width: 60rem) {
  .cs-lane {
    grid-template-columns: clamp(8rem, 30vw, 13rem) minmax(0, 1fr);
    align-items: start;
  }
  .cs-lane__meta {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .cs-lane__link {
    margin-left: 0;
  }
}
@media (max-width: 40rem) {
  .cs-lane {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
  }
}

/* -------------------------------------------------- case studies page header
   A compact version of the drifting wall used on What We Do. The band is a
   fixed header height rather than a long scroll stage, the tiles are smaller,
   and one row is seeded per client so the header itself is the proof. */
.cs-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-ink-block, #0b1c28);
  color: #fff;
  min-height: 0;
  height: calc(100vh - var(--header-h, 77px));
  height: calc(100svh - var(--header-h, 77px));
  display: grid;
  place-items: center;
}
.cs-hero__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
/* Slanted stage, oversized so the rotated rectangle still covers every corner. */
.cs-hero__rows {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190%;
  /* Nine rows on purpose: the stack is taller than the band, so the tilt still
     has image under every corner. The extra spills out and is clipped. */
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(-9deg);
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 0.8vw, 0.7rem);
}
.cs-hero__row {
  overflow: hidden;
  width: 100%;
}
.cs-hero__track {
  display: flex;
  align-items: stretch;
  gap: clamp(0.4rem, 0.8vw, 0.7rem);
  width: max-content;
  animation: cs-hero-drift var(--dur, 96s) linear infinite;
  will-change: transform;
}
.cs-hero__track--rev {
  animation-direction: reverse;
}
.cs-hero__track img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: clamp(96px, 12.5vh, 160px);
  background: #fff;
  box-shadow: 0 8px 22px rgba(6, 12, 18, 0.45);
  border-radius: 2px;
}
.cs-hero__chip {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.55rem;
  height: clamp(96px, 12.5vh, 160px);
  padding-inline: clamp(0.85rem, 1.6vw, 1.5rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 0.85vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
}
.cs-hero__chip .cs-hero__chip-mark {
  display: block;
  flex: 0 0 auto;
  width: clamp(18px, 1.8vw, 30px);
  height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
/* Three copies of each sequence, so a short row still spans a wide screen and
   the loop resets a third of the way along. */
@keyframes cs-hero-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-33.3333%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-hero__track { animation: none; }
}
/* Centered lockup, painted over the wall with a soft scrim for legibility. */
.cs-hero__lockup {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: clamp(1.5rem, 3.5vw, 2.5rem) 1.25rem;
  max-width: min(100%, 78rem);
}
/* Broken-up lockup, the same script-into-heavy-caps treatment as the What We
   Do hero, scaled down to sit inside a fixed-height header. No swash rule. */

@media (max-width: 640px) {
  .cs-hero {
    min-height: 0;
  }
  .cs-hero__rows {
    gap: 0.35rem;
    width: 260%;
  }
  .cs-hero__track img,
  .cs-hero__chip {
    height: clamp(74px, 10vh, 112px);
  }
  .cs-hero__lockup {
    padding-inline: 1.75rem;
  }
}
/* The wall already reads as the top of the page, so the first band below it
   does not need a rule or a full section's worth of breathing room. */
.cs-hero + .cs-lanes-band {
  border-top: 0;
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- Home: the What We Do wall as one full-height band under the hero ---------- */
/* Same drifting rows as /what-we-do/, held to a single viewport with the growth line
   centered over it the way the Western Foods wall used to read. The band carries its own
   overflow because there is no sticky lockup here to break. */
.home-wall-band {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--color-ink-block, #060c14);
  color: #fff;
}
@supports (height: 100svh) {
  .home-wall-band { height: 100svh; }
}
/* Center the tilted stage in the band so the corners stay covered whatever the row count. */
.home-wall-band .wf-vwall__rows {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-9deg);
}
.home-wall-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgb(7 18 26 / 0.74) 0%, rgb(7 18 26 / 0.44) 52%, rgb(7 18 26 / 0.16) 100%);
}
.home-wall__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
  padding-inline: var(--gutter);
  pointer-events: none;
}

/* ---------- Homepage opportunity: supplied concept art, live typography ---------- */
.band.home-opportunity,
.band.home-proof {
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}
.home-opportunity__inner {
  display: grid;
  align-items: center;
  gap: clamp(var(--space-6), 3vw, var(--space-12));
}
.home-opportunity__copy::before,
.home-proof__copy::before {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-full);
  background: var(--color-gold-bright);
}
.home-opportunity__copy h2,
.home-proof__copy h2 {
  font-size: clamp(2.125rem, 3.3vw, 4.8rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.home-opportunity__copy > p,
.home-proof__copy > p {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  line-height: 1.5;
  max-width: 38ch;
}
.home-proof__head {
  margin-bottom: clamp(var(--space-12), 5vw, var(--space-20));
}
.home-proof__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(var(--space-8), 7vw, 7rem);
  row-gap: var(--space-6);
  align-items: start;
}
.home-proof__copy::before {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.home-proof__copy > p {
  margin-top: 0;
  max-width: 46ch;
}
.home-proof__head + .cs-lanes {
  margin-top: 0;
}
@media (min-width: 900px) {
  .home-proof__copy {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.home-opportunity__accent {
  background: linear-gradient(100deg, #007db3 0%, #7462b9 46%, #bd5379 76%, #c56e36 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-opportunity__figure {
  margin: 0;
  min-width: 0;
}
.home-opportunity__art {
  position: relative;
}
.home-opportunity__image {
  display: block;
  width: 100%;
  height: auto;
}
.home-opportunity__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.home-opportunity__art[data-motion="active"] .home-opportunity__canvas {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .home-opportunity__canvas {
    display: none;
  }
}
.home-opportunity__figure figcaption {
  text-align: center;
  margin-top: var(--space-3);
}
.home-opportunity__signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-inline: auto;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  font-weight: 600;
  color: var(--color-ink-block);
}
.home-opportunity__signature::before,
.home-opportunity__signature::after {
  content: '';
  flex: 1;
  max-width: 7rem;
  height: 1px;
  background: var(--color-divider);
}
.home-opportunity__mobile-labels {
  display: none;
}
@media (min-width: 1024px) {
  .home-opportunity__inner {
    grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr);
    gap: var(--space-6);
  }
}
@media (max-width: 1023px) {
  .home-opportunity__copy h2,
  .home-proof__copy h2 {
    font-size: clamp(2.125rem, 5.6vw, 3.5rem);
  }
}
@media (max-width: 600px) {
  .home-opportunity__mobile-labels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: var(--space-5);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* ============================================================
   UAMS Partners Card case study, program dressing.
   Colors and the striped awning motif are sampled from the
   Partners Card artwork so the page reads like the campaign.
   Scoped to .pc-* and used only on that case study.
   ============================================================ */
.pc-scope {
  --pc-teal: #08818c;
  --pc-purple: #8e348c;
  --pc-crimson: #9d2235;
  --pc-stripe: #c8202f;
}
.pc-awning {
  height: 26px;
  border: 1px solid rgba(19, 31, 40, 0.16);
  border-radius: 3px;
  background-color: #fff;
  background-image: repeating-linear-gradient(
    90deg,
    var(--pc-stripe) 0 24px,
    #fff 24px 48px
  );
  box-shadow: 0 3px 10px rgba(19, 31, 40, 0.1);
}
.pc-awning + .pc-numbers {
  margin-top: 0.45rem;
}
.pc-numbers {
  display: grid;
  gap: 1rem;
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .pc-numbers {
    grid-template-columns: repeat(3, 1fr);
  }
}
.pc-num {
  padding: clamp(1.2rem, 2.4vw, 1.75rem);
  border-radius: var(--radius-lg);
  color: #fff;
}
.pc-num--teal { background: var(--pc-teal); }
.pc-num--purple { background: var(--pc-purple); }
.pc-num--crimson { background: var(--pc-crimson); }
.pc-num b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.pc-num span {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}
.pc-line {
  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--pc-purple);
}
.pc-split {
  display: grid;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--pc-purple);
}
@media (min-width: 61rem) {
  .pc-split {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: stretch;
  }
}
.pc-split__media {
  min-height: 260px;
}
.pc-split__media img,
.pc-split__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.pc-split__say {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
  color: #fff;
}
.pc-split__say p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.pc-split__say small {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.pc-steps {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .pc-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
.pc-step {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--pc-teal);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.pc-step:nth-child(2) { border-top-color: var(--pc-purple); }
.pc-step:nth-child(3) { border-top-color: var(--pc-crimson); }
.pc-step b {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}
.pc-step span {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.pc-step i {
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 800;
  color: #fff;
  background: var(--pc-teal);
}
.pc-step:nth-child(2) i { background: var(--pc-purple); }
.pc-step:nth-child(3) i { background: var(--pc-crimson); }
.pc-shots {
  display: grid;
  gap: 1rem;
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
}
@media (min-width: 48rem) {
  .pc-shots {
    grid-template-columns: 1fr 1fr;
  }
}
.pc-shots img,
.pc-shots video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Site screenshots read better whole, so this variant skips the 3 by 2 crop. */
.pc-shots--site img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--color-surface);
}

/* Five facts on the Partners Card hero, one more than the four column default. */
.pc-scope .cine-hero__facts {
  max-width: none;
}
@media (min-width: 900px) {
  .pc-scope .cine-hero__facts {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Six boxes read better as two rows of three than a four column row with two
   empty cells showing the divider color through. */
@media (min-width: 1000px) {
  .cap-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Chapters that put their copy under the heading in the left column and a
   single piece of media alone on the right. The left column needs the wider
   measure and the body color, and it cannot stay sticky once it holds
   paragraphs. */
.pc-scope .pc-grow .cine-chapter__aside p {
  max-width: 48ch;
  color: var(--color-text);
}
@media (min-width: 960px) {
  .pc-scope .pc-grow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  }
  .pc-scope .pc-grow .cine-chapter__aside {
    position: static;
    top: auto;
  }
}
.pc-scope .pc-grow .cine-chapter__body img,
.pc-scope .pc-grow .cine-chapter__body video.pc-loop {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Case-study chapters that keep the heading and its copy together in the left
   column and give the photography the right column. Copy in the left column
   needs the wider measure and the body text color, and the column cannot stay
   sticky once it holds paragraphs. */
.cine-chapter--split .cine-chapter__aside p {
  max-width: 48ch;
  color: var(--color-text);
}
.cine-chapter--split .cine-chapter__aside > * + * {
  margin-top: clamp(0.85rem, 1.6vw, 1.25rem);
}
@media (min-width: 960px) {
  .cine-chapter--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  }
  .cine-chapter--split .cine-chapter__aside {
    position: static;
    top: auto;
  }
  .cine-chapter--solo {
    grid-template-columns: minmax(0, 1fr);
  }
  .cine-chapter--solo .cine-chapter__aside p {
    max-width: 62ch;
  }
}
.cine-chapter--split .cine-chapter__body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Card grids on an ink band. Light dividers and light type so the grid reads on
   the dark background instead of punching light boxes into it. */
.cap-grid--ink {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.cap-grid--ink .cap {
  background: var(--color-ink-block);
}
.wwd-plans .cap-grid--ink .cap {
  background: var(--color-ink, #0d0f14);
}
.cap-grid--ink .cap h3 {
  color: #fff;
}
.cap-grid--ink .cap p {
  color: rgba(255, 255, 255, 0.74);
}

/* Card grids inside a text column, where the viewport is wide but the container
   is not. Two columns is the most that column can hold. */
@media (min-width: 1000px) {
  .cap-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* On the about page the note that used to sit beside the fit list now sits
   under the grid, so it needs its own measure. */
.about-fit-note {
  margin-top: var(--space-6);
  max-width: 62ch;
}

/* Five cards in a three column grid leave one cell empty, where the divider
   color would otherwise show through as a block. */
.cap--filler {
  display: none;
}
@media (min-width: 640px) {
  .cap--filler {
    display: block;
  }
}

/* ---------- /what-we-do/ hero: one screen tall ----------
   The wall used to be an explicitly tall band (3500px) so the lockup could pin
   for a long scroll. It now fills a single screen under the header, and the
   lockup simply centers in it. The rows still drift on their own. */
.wwd-wall-band {
  min-height: 0;
  height: calc(100vh - var(--header-h, 77px));
  height: calc(100svh - var(--header-h, 77px));
}
@media (max-width: 900px) {
  .wwd-wall-band { min-height: 0; }
}
@media (max-width: 640px) {
  .wwd-wall-band { min-height: 0; }
}
/* The growth line rides centered over the wall, the same way the home wall reads.
   The band carries its own darkening because there is no pinned lockup box to
   supply it, and ::after cannot break the sticky rules the band used to depend on. */
.wwd-wall-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgb(7 18 26 / 0.74) 0%, rgb(7 18 26 / 0.44) 52%, rgb(7 18 26 / 0.16) 100%);
}
.wwd-wall-band .home-wall__overlay {
  z-index: 4;
}

/* The invitation now rides inside the wall band under the headline. The overlay
   itself stays click-through so the marquee reads as one surface, so the button
   takes its pointer events back. */
.wwd-wall-band .wwd-wall-cta-row {
  display: flex;
  justify-content: center;
  pointer-events: auto;
}
.wwd-wall-cta {
  max-width: 44ch;
  text-align: center;
  align-items: center;
  justify-content: center;
  white-space: normal;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  padding: clamp(1rem, 1.6vw, 1.35rem) clamp(1.5rem, 2.6vw, 2.5rem);
  border-radius: clamp(1.5rem, 3vw, 2.75rem);
}
.wwd-wall-cta svg {
  width: 1.1em;
  height: 1.1em;
}
@media (max-width: 480px) {
  .wwd-wall-cta { border-radius: 1.25rem; }
}

/* ---------- Industries tiles: the image is a quiet looping clip ----------
   Each tile holds a still and a muted looping clip of the same frame. The clip sits
   over the still and under the veil, so the still is what shows while the clip loads,
   if the clip fails, or when someone asks for reduced motion. The clips are cut
   forward then backward, so the loop has no visible seam. The hover zoom applies to
   whichever layer is on top. */
.ind-tile__motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition:
    transform 900ms var(--ease-out),
    filter 500ms var(--ease-out);
  filter: saturate(0.92);
  pointer-events: none;
}
.ind-tile:hover .ind-tile__motion,
.ind-tile:focus-visible .ind-tile__motion {
  transform: scale(1.09);
  filter: saturate(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .ind-tile__motion {
    display: none;
  }
}

/* ---------- Case studies hero: same headline treatment as What We Do ----------
   The script and caps lockup is retired. The headline now uses .wf-wall__title, held
   to the same measure as the What We Do hero so the two pages read as one family. */
.cs-hero .wf-wall__title {
  max-width: 22ch;
}
/* The darkening behind the headline is the full band radial used on the What We Do
   hero, not an ellipse sized to the copy. Sized to the copy it reached transparent
   inside the band, so its edge was visible over the drifting wall. */
.cs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgb(7 18 26 / 0.74) 0%, rgb(7 18 26 / 0.44) 52%, rgb(7 18 26 / 0.16) 100%);
}
.cs-hero__lockup {
  display: grid;
  justify-items: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
}

/* ---------- Industries hero: a collage of client photography, one viewport tall ---------- */
.ind-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-ink-block, #0b1c28);
  color: #fff;
  height: calc(100vh - var(--header-h, 77px));
  height: calc(100svh - var(--header-h, 77px));
  display: grid;
  place-items: center;
}
/* Ten photographs, five across and two down, one pair from each industry. */
.ind-hero__collage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.ind-hero__collage img {
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgb(11 28 40);
}
.ind-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgb(7 18 26 / 0.88) 0%,
    rgb(7 18 26 / 0.7) 52%,
    rgb(7 18 26 / 0.45) 100%
  );
}
.ind-hero__lockup {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
  text-align: center;
  padding: clamp(1.5rem, 3.5vw, 2.5rem) 1.25rem;
  max-width: min(100%, 78rem);
}
.ind-hero__lockup .eyebrow {
  color: var(--color-gold);
}
/* The collage already reads as the top of the page, so the tiles below it do not
   need a rule or a full section of space above them. */
.ind-hero + .band {
  border-top: 0;
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 860px) {
  .ind-hero__collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: 3px;
  }
}

/* ---------- One size for every hero title ---------- */
/* Page heroes all carry the wall-title scale, so the opening line reads the same
   whether it sits over a collage, a video, or the plain background. */
.hero h1.hero__h1--beats,
.page-hero h1,
.cine-hero__name.cine-hero__name--sentence,
.work__title {
  font-size: clamp(2.1rem, 6.4vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.page-hero h1,
.cine-hero__name.cine-hero__name--sentence {
  max-width: 24ch;
}

/* ---------- Industry cards: five across on the ink card treatment ----------
   Same gradient, gold glow, and centered lockup as the homepage "what we see"
   deck, laid out five across on desktop and stepping down to three, two, then
   one as the viewport narrows. Each card is a link, so it also carries a hover
   lift and an Explore affordance. */
.ind-deck {
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
@media (min-width: 48rem) {
  .ind-deck {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .ind-deck {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 26rem) {
  .ind-deck {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ind-card-item {
  margin: 0;
  display: flex;
}
.ind-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: clamp(1.5rem, 2.2vw, 2.1rem) clamp(1.1rem, 1.6vw, 1.5rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(158deg, #143047 0%, var(--color-ink-block) 64%);
  border: 1px solid rgb(255 255 255 / 0.1);
  box-shadow:
    0 4px 12px rgb(11 28 40 / 0.2),
    inset 0 1px 0 rgb(255 255 255 / 0.08);
  color: #fff;
  text-decoration: none;
  transition:
    transform 260ms var(--ease-out),
    box-shadow 260ms var(--ease-out),
    border-color 260ms var(--ease-out);
}
.ind-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 90% at 92% 4%, rgb(246 184 25 / 0.16) 0%, rgb(246 184 25 / 0) 58%);
}
.ind-card:hover,
.ind-card:focus-visible {
  transform: translate3d(0, -4px, 0);
  border-color: rgb(255 255 255 / 0.2);
  box-shadow:
    0 14px 30px rgb(11 28 40 / 0.28),
    inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.ind-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  font-weight: 800;
  line-height: 1.22;
  color: #fff;
  min-height: 2.44em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ind-card__body {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: #c3ced7;
}
.ind-card__more {
  margin-top: auto;
  padding-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
}
.ind-card__more svg {
  width: 1rem;
  height: 1rem;
  transition: transform 260ms var(--ease-out);
}
.ind-card:hover .ind-card__more svg,
.ind-card:focus-visible .ind-card__more svg {
  transform: translate3d(3px, 0, 0);
}
.ind-deck.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.ind-card-item {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition:
    opacity 320ms var(--ease-out),
    transform 560ms var(--ease-out);
  transition-delay: calc(var(--i) * 70ms);
}
.ind-deck.is-in .ind-card-item {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .ind-card-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Industries dropdown in the primary nav ----------
   The Industries link keeps working as a link to the overview page and grows a
   panel listing the five industry pages. Opens on hover and on keyboard focus
   anywhere inside the group, so no script is needed. */
.nav__group {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav .nav__group > a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.nav__chev {
  width: 0.7rem;
  height: 0.7rem;
  transition: transform 200ms var(--ease-out);
}
.nav__group:hover .nav__chev,
.nav__group:focus-within .nav__chev {
  transform: rotate(180deg);
}
.nav__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 60;
  margin: 0;
  padding: var(--space-2);
  min-width: 15rem;
  list-style: none;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  box-shadow: 0 18px 38px rgb(11 28 40 / 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, -0.35rem, 0);
  transition:
    opacity 180ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 200ms;
}
.nav__group::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.85rem;
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0.55rem, 0);
}
.nav .nav__menu a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm, 0.375rem);
  border-bottom: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.nav .nav__menu a:hover,
.nav .nav__menu a:focus-visible {
  color: var(--color-text);
  background: var(--color-bg);
}
@media (prefers-reduced-motion: reduce) {
  .nav__menu,
  .nav__chev {
    transition: none;
  }
}

/* Phones and tablets: the five industries sit indented under Industries in the
   slide-down menu, always visible so nothing needs to be tapped twice. */
.mobile-nav__sub {
  list-style: none;
  margin: var(--space-2) 0 var(--space-3);
  padding: 0 0 0 var(--space-4);
  border-left: 2px solid var(--color-divider);
  display: grid;
  gap: var(--space-1);
}
.mobile-nav .mobile-nav__sub a {
  font-size: clamp(1.05rem, 4.2vw, 1.3rem);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* ---------- About hero on a photograph ----------
   The opening section carries the room photo full bleed with a dark scrim, so
   the headline sits on the image instead of beside a second picture. */
.page-hero--photo {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* The About page carries a breadcrumb bar under the header, so both are
     subtracted and the photo lands exactly at the fold. */
  min-height: calc(100svh - var(--header-h, 77px) - 47px);
  overflow: hidden;
  border-bottom: 0;
  color: #fff;
  /* Even padding top and bottom, so the copy sits on the true center line. */
  padding-block: clamp(var(--space-8), 4vw, var(--space-12));
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.page-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      rgb(8 20 29 / 0.72) 0%,
      rgb(8 20 29 / 0.42) 52%,
      rgb(8 20 29 / 0.05) 100%
    ),
    linear-gradient(
      180deg,
      rgb(8 20 29 / 0.32) 0%,
      rgb(8 20 29 / 0.5) 44%,
      rgb(8 20 29 / 0.82) 100%
    );
}
.page-hero--photo > .shell {
  width: 100%;
}
.page-hero__copy {
  max-width: 46rem;
}
.page-hero--photo h1,
.page-hero--photo .lede {
  color: #fff;
}
.page-hero--photo .lede {
  color: rgb(255 255 255 / 0.88);
}
.page-hero--photo .eyebrow {
  color: var(--color-gold-bright);
}
.page-hero--photo .btn--ghost {
  color: #fff;
  border-color: rgb(255 255 255 / 0.42);
}
.page-hero--photo .btn--ghost:hover {
  color: #fff;
  border-color: #fff;
}

/* Industry pages reuse the photo hero, so the small inline breadcrumb inside it
   needs to read on the darkened photo. */
.page-hero--photo .crumb,
.page-hero--photo .crumb a {
  color: rgb(255 255 255 / 0.74);
}
.page-hero--photo .crumb a:hover,
.page-hero--photo .crumb a:focus-visible {
  color: #fff;
}

/* The industry headlines are long questions, so inside a full height photo hero
   they step down a size to keep the whole lockup above the fold. Scoped by the
   inline breadcrumb, which only the industry heroes carry. */
.page-hero--photo:has(.crumb) h1 {
  font-size: clamp(1.95rem, 4.3vw, 3.9rem);
  line-height: 1.06;
  max-width: 21ch;
}
.page-hero--photo:has(.crumb) .lede {
  max-width: 44ch;
}

/* The drilling rig photo is a sunset silhouette, so it carries a lighter scrim
   than the daylight industry photos or the sky goes flat. */
.page-hero--photo.page-hero--photo-dusk::before {
  background:
    linear-gradient(
      100deg,
      rgb(8 20 29 / 0.6) 0%,
      rgb(8 20 29 / 0.3) 52%,
      rgb(8 20 29 / 0.02) 100%
    ),
    linear-gradient(
      180deg,
      rgb(8 20 29 / 0.16) 0%,
      rgb(8 20 29 / 0.28) 44%,
      rgb(8 20 29 / 0.58) 100%
    );
}

/* The overhead harvest photo puts the combine right behind the headline, so the
   copy side of that hero carries a deeper wash. */
.page-hero--photo.page-hero--photo-shade::before {
  background:
    linear-gradient(
      100deg,
      rgb(8 20 29 / 0.86) 0%,
      rgb(8 20 29 / 0.62) 46%,
      rgb(8 20 29 / 0.12) 100%
    ),
    linear-gradient(
      180deg,
      rgb(8 20 29 / 0.3) 0%,
      rgb(8 20 29 / 0.44) 44%,
      rgb(8 20 29 / 0.74) 100%
    );
}

/* ---------- Contact steps on the ink card treatment ----------
   Same gradient, gold glow, and centered lockup as the industry deck, with a
   numbered badge in place of the Explore affordance. */
.step-deck {
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
}
@media (max-width: 30rem) {
  .step-deck {
    grid-template-columns: minmax(0, 1fr);
  }
}
.step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  margin: 0;
  padding: clamp(1.5rem, 2.2vw, 2.1rem) clamp(1.1rem, 1.6vw, 1.5rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(158deg, #143047 0%, var(--color-ink-block) 64%);
  border: 1px solid rgb(255 255 255 / 0.1);
  box-shadow:
    0 4px 12px rgb(11 28 40 / 0.2),
    inset 0 1px 0 rgb(255 255 255 / 0.08);
  color: #fff;
}
.step-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 90% at 92% 4%, rgb(246 184 25 / 0.16) 0%, rgb(246 184 25 / 0) 58%);
}
.step-card__num {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-gold-bright);
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgb(246 184 25 / 0.45);
}
.step-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  font-weight: 800;
  line-height: 1.22;
  color: #fff;
}
.step-card__body {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: #c3ced7;
}

/* the contact columns run to a shared height, so the step cards absorb the
   difference instead of leaving a gap beside the form */
@media (min-width: 900px) {
  .split--match {
    align-items: stretch;
  }
  .split--match > * {
    display: flex;
    flex-direction: column;
  }
  .split--match .step-deck {
    flex: 1;
  }
  .split--match .step-card {
    justify-content: center;
  }
}

/* ---------- Intro band above a full height hero ----------
   The supporting sentence sits on the page background above the photo, set in
   the right half of the measure so the headline below carries the frame alone. */
.hero-intro {
  background: var(--color-bg);
  padding-block: clamp(var(--space-10), 6vw, var(--space-16));
}
.hero-intro__text {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
@media (max-width: 48rem) {
  .hero-intro__text {
    font-size: clamp(1.5rem, 6.2vw, 2.5rem);
  }
}
.hero-intro > .shell {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gap);
}
.hero-intro__text {
  grid-column: 1 / -1;
}
@media (min-width: 1024px) {
  .hero-intro__text {
    grid-column: 7 / -1;
  }
}

/* Homepage loading screen. A large knot sits above the rising lowercase wordmark. */
.ls-wrap {
  --ls-knot-gap: clamp(24px, 4dvh, 48px);
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  z-index: 2147483647;
  pointer-events: auto;
  isolation: isolate;
  transform: translateZ(0);
}
.ls-screen {
  position: absolute;
  inset: 0;
  background: #0b1c28;
  z-index: 1;
  transition: transform 0.8s ease-in-out;
}
.ls-screen.ls-screen--out { transform: translateY(100dvh); }
.ls-knot {
  position: absolute;
  left: 50%;
  bottom: calc(20px + 15.7vw + var(--ls-knot-gap));
  width: min(42vw, calc(100dvh - 15.7vw - var(--ls-knot-gap) - 52px));
  height: auto;
  aspect-ratio: 1;
  z-index: 2;
  opacity: 0;
  transform: translate(-50%, 24px) scale(0.96);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease-out;
  pointer-events: none;
}
.ls-knot.ls-settle { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ls-knot.ls-down {
  transform: translate(-50%, 100dvh) scale(1);
  transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
}
@media (max-width: 599px) {
  .ls-knot { width: min(76vw, calc(100dvh - 15.7vw - var(--ls-knot-gap) - 52px)); }
}
.ls-word {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  line-height: 0;
  z-index: 2;
}
.ls-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(10vw);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease-out;
}
.ls-letter.ls-settle { opacity: 1; transform: translateY(-2vw); }
.ls-letter.ls-down {
  transform: translateY(100dvh);
  transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
}
.ls-letter svg {
  display: block;
  height: 13.7vw;
  width: auto;
  fill: #ffffff;
}
.ls-sweep {
  position: absolute;
  top: -100dvh;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: var(--color-bg);
  z-index: 3;
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.8s ease-in-out, opacity 1s ease-out 1s;
}
.ls-sweep.ls-sweep--out { transform: translateY(200dvh); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ls-wrap { display: none; }
}

/* The white wordmark stays inside the dark footer, never in the knot reveal. */
.footer-wordmark {
  flex: none;
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
}
.footer-wordmark img {
  display: block;
  width: 92.45vw;
  height: auto;
  margin-inline: auto;
}

/* ---------- Hero lockups sit on the left content edge ----------
   The wall and collage heroes on Case Studies, What We Do, and Industries used
   to center their headline and button. They now line up with the 12 column
   grid's left edge, the same as every other hero on the site. */
.cs-hero,
.ind-hero {
  justify-items: stretch;
}
.cs-hero__lockup,
.ind-hero__lockup {
  justify-self: stretch;
  justify-items: start;
  text-align: left;
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}
.cs-hero__lockup .wf-wall__title,
.ind-hero__lockup .wf-wall__title,
.ind-hero__lockup .wf-wall__sub,
.wwd-wall-band .home-wall__overlay .wf-wall__title {
  text-align: left;
}
.wwd-wall-band .home-wall__overlay {
  justify-items: start;
}
.wwd-wall-band .wwd-wall-cta-row {
  justify-content: flex-start;
}
.wwd-wall-band .wwd-wall-cta {
  text-align: left;
  justify-content: flex-start;
}
@media (min-width: 1024px) {
  .wwd-wall-band .home-wall__overlay {
    padding-inline: max(var(--gutter), calc((100% - var(--content-wide)) / 2 + var(--gutter)));
  }
}

/* ---------- Footer reveal: the flat knot docks to the footer ----------
   The page uncovers the mark. Once the footer reaches its lower edge, the
   mark rides up with it. The reveal shares the footer's ink background and
   the knot is always gold, with its light network running behind it. */
.footer-reveal {
  position: relative;
  height: 100vh;
  height: 100svh;
  background: var(--color-ink-block);
  clip-path: inset(0);
  /* Overlap the section above by a pixel so no light seam shows between dark bands. */
  margin-top: -1px;
}
.footer-reveal::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 30px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.25), rgb(0 0 0 / 0));
}
.footer-reveal__pin {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: var(--header-h, 77px) var(--gutter) 0;
  box-sizing: border-box;
  pointer-events: none;
  transform: translateY(var(--dock-y, 0px));
}
.footer-reveal__knot {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 0;
  /* The artwork occupies 80% of the transparent canvas: this renders the
     visible mark at one-third of the viewport width on desktop. */
  width: 41.666667vw;
  max-width: calc((100svh - var(--header-h, 77px) - 4rem) / 0.8);
  aspect-ratio: 1;
  transform: perspective(1100px) rotateX(24deg) scale(0.7);
  transform-origin: 50% 50%;
}
.footer-reveal__flat,
.footer-reveal__gold {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask: url('/assets/img/matmon-mark.svg') center / 80% 80% no-repeat;
  mask: url('/assets/img/matmon-mark.svg') center / 80% 80% no-repeat;
  transition: opacity 240ms ease-out;
}
.footer-reveal__flat {
  background: rgb(11, 28, 40);
  opacity: 1;
}
/* Use the contact header's flat gold knot, never a beveled image. */
.footer-reveal__gold {
  position: absolute;
  inset: 0;
  background: #d8bb7b;
}
.footer-reveal__network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767px) {
  .footer-reveal__knot {
    width: 75vw;
  }
}
/* The footer remains its own sliding layer beneath the docked mark. */
.footer-reveal + .site-footer {
  position: relative;
}
/* at the very bottom of the page the footer fills the whole screen */
.site-footer {
  box-sizing: border-box;
  min-height: calc(100vh - var(--header-h, 77px));
  min-height: calc(100svh - var(--header-h, 77px));
  display: flex;
  flex-direction: column;
}
.site-footer > .shell {
  flex: 1 0 auto;
}
@media (prefers-reduced-motion: reduce) {
  .footer-reveal__knot {
    transform: none;
  }
  .footer-reveal__flat,
  .footer-reveal__gold,
  .footer-reveal__network {
    transition: none;
  }
}

/* The homepage reel sits outside the content shell so the full frame is edge to edge. */
.home-sizzle {
  width: 100%;
  margin: 0;
  padding: 0;
  background: rgb(11, 28, 40);
}
.home-sizzle__video {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.home-sizzle__video:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: -3px;
}

/* Homepage lead. The sizzle video runs clean across the first screen, and the
   headline, the line under it, the short intro and the four facts sit below it
   on the page background before the angled wall of work. */
.hero--bare .rv-scrim {
  display: none;
}
.home-lead {
  background: var(--color-bg);
  padding-block: clamp(var(--space-12), 7vw, var(--space-24));
}
.home-lead__title {
  margin: 0;
  font-size: clamp(2.1rem, 6.4vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.home-lead__sub {
  margin: 0.35em 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-gold);
}
.home-lead__text {
  margin: clamp(var(--space-6), 2.4vw, var(--space-8)) 0 0;
  max-width: 44ch;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.5;
  color: var(--color-text-muted, var(--color-text));
}

/* Roomier rhythm. Sections get generous air above and below so pages read as
   a calm sequence of blocks rather than one run of content. */
.band {
  padding-block: clamp(6.5rem, 15vw, 14rem);
}
.band--tight {
  padding-block: clamp(5rem, 10vw, 9.5rem);
}
/* the full-bleed image walls stay edge to edge */
.wf-wall-band,
.wwd-wall-band {
  padding-block: 0;
}
.hero-intro {
  padding-block: clamp(4.5rem, 10vw, 8.5rem);
}
/* The case-study index keeps its moving wall and uses larger project previews.
   These refinements are scoped so other case-study lists stay unchanged. */
.hero-intro.cs-intro {
  padding-block: clamp(var(--space-12), 6vw, var(--space-24));
}
.cs-intro > .shell {
  row-gap: var(--space-6);
}
.cs-intro__lead {
  color: var(--color-primary);
  font-weight: 600;
}
.cs-intro__jump {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 44px;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.cs-showcase {
  scroll-margin-top: calc(var(--header-h, 77px) + var(--space-4));
}
.cs-showcase .cs-lane {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(var(--space-8), 5vw, var(--space-20));
  padding-block: clamp(var(--space-8), 4vw, var(--space-16));
}
.cs-showcase .cs-lane__body {
  min-width: 0;
}
.cs-showcase .cs-lane__figure {
  aspect-ratio: 8 / 5;
}
.cs-showcase .cs-lane__title {
  font-size: clamp(1.75rem, 0.9rem + 2.7vw, 3.75rem);
  text-wrap: initial;
}
.cs-showcase .cs-lane__summary {
  max-width: 44ch;
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1.5;
}
.cs-showcase .cs-lane__meta {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.cs-showcase .cs-lane__industry {
  font-size: var(--text-xs);
  color: var(--color-primary);
  letter-spacing: 0.1em;
}
.cs-showcase .cs-lane__tags {
  gap: var(--space-2);
}
.cs-showcase .cs-lane__tag {
  font-size: var(--text-xs);
  white-space: normal;
}
.cs-showcase .cs-lane__link {
  min-height: 44px;
  margin-left: 0;
  font-size: var(--text-xs);
}
.cs-showcase .cs-lane:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: var(--space-2);
}
@media (min-width: 1024px) {
  .cs-intro__jump {
    grid-column: 7 / -1;
  }
}
@media (max-width: 60rem) {
  .cs-showcase .cs-lane {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .cs-showcase .cs-lane__summary {
    font-size: var(--text-base);
  }
}
@media (max-width: 40rem) {
  .cs-showcase .cs-lane {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-6);
  }
}
/* What We Do opens with a full-width heading rather than supporting copy. */
.hero-intro.wwd-growth {
  padding-block: clamp(3rem, 5vw, 6rem);
}
.wwd-growth .wwd-growth__title {
  grid-column: 1 / -1;
  max-width: 22ch;
  font-size: clamp(3rem, 7.8vw, 9rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.home-lead {
  padding-block: clamp(6rem, 12vw, 11rem);
}
.page-hero:not(.page-hero--photo) {
  padding-block: clamp(5rem, 11vw, 10rem) clamp(4rem, 8vw, 7rem);
}
.wwd-plans {
  padding-block: clamp(6.5rem, 15vw, 14rem);
}
.wwd-plans.wwd-plans--simple {
  padding-block: clamp(4rem, 7vw, 7rem);
}
.wwd-plans--simple .wwd-plans__grid {
  margin-top: 0;
  align-items: center;
}
.wwd-plans--simple .wwd-plans__body {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}
.wwd-plans--simple .wwd-plans__body p:last-child {
  margin-bottom: 0;
}
.cs-hero + .cs-lanes-band,
.ind-hero + .band {
  padding-top: clamp(4.5rem, 9vw, 8rem);
}
.work__chapter {
  padding-block: clamp(6.5rem, 15vw, 12rem);
}
.wf-goal-band {
  padding-block: clamp(6rem, 12vw, 11rem);
}
.wf-gallery-band,
.wf-expo-band {
  padding-block: clamp(5rem, 10vw, 9rem);
}
/* Western Foods snaps one section per screen, so its sections grow by the
   screen height instead */
@media (min-width: 61rem) {
  .wf-snap main > section {
    padding-block: clamp(3rem, 9vh, 7rem);
  }
  .wf-snap main > section.wf-wall-band {
    padding-block: clamp(1.5rem, 5vh, 4.5rem);
  }
}

/* About. The page opens on its name, set large and tight on the plain
   background at the content edge, with the photo inset to the same margins
   directly below. */
.about-title {
  background: var(--color-bg);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 2.4vw, 2.25rem);
}
.about-title__h {
  margin: 0;
  max-width: none;
  font-size: clamp(3rem, 11.4vw, 13rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--color-text);
  text-wrap: nowrap;
}
@media (max-width: 767px) {
  .about-title__h {
    font-size: clamp(2.6rem, 14.5vw, 4.5rem);
    text-wrap: balance;
  }
}
.page-hero--inset {
  margin-inline: var(--gutter);
}
/* the title runs on the same left edge as the inset photo at every width,
   including wide screens where the standard content column is capped */
.about-title > .shell {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--gutter);
}
.page-hero--photo .page-hero__title {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(2.1rem, 6.4vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
}

/* Homepage intro. The shorter line gets a slightly wider measure so it sets
   in four even lines without a lone last word, and a lighter band of space
   above and below so it sits close to the video. */
.hero-intro:has(+ .hero--bare) {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.hero-intro:has(+ .hero--bare) .hero-intro__text {
  text-wrap: pretty;
}
@media (min-width: 1024px) {
  .hero-intro:has(+ .hero--bare) .hero-intro__text {
    grid-column: 6 / -1;
  }
}
/* Value, Designed is sized from the page width so it runs edge to edge on
   one line, matching the photo below it, and never past it. */
@media (min-width: 768px) {
  .about-title__h {
    font-size: min(calc((100vw - 2 * var(--gutter) - 20px) / 8.7), 15rem);
  }
}
/* spacing matched to the reference: a generous open space above the title
   and a tighter gap between the title and the photo */
.about-title {
  padding-block: clamp(2.5rem, 4.9vw, 4.4rem) clamp(1.5rem, 2.8vw, 2.6rem);
}
.about-title__h {
  line-height: 1.08;
}

/* the line under About Matmon on the photo */
.page-hero--photo .page-hero__sub {
  margin: clamp(0.75rem, 1.4vw, 1.25rem) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.6vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: rgb(255 255 255 / 0.9);
}
.page-hero--photo .page-hero__sub + .btn-row {
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
}

/* The partnership heading sits beside its copy at a section-level scale,
   distinct from the oversized page title above. */
.about-built {
  max-width: none;
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  color: var(--color-text);
}
/* Give the About case-study introduction the same section-heading scale
   and keep its supporting sentence connected to the work below. */
.about-work-intro {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.about-work-intro .sec-title {
  max-width: 22ch;
  font-size: clamp(2rem, 4.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.about-work-intro p {
  max-width: 48ch;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.5;
}
.about-work-intro + .cs-lanes {
  margin-top: 0;
}
/* keep Senior people. / Close to the work. on two lines over the photo */
@media (min-width: 768px) {
  .page-hero--inset .page-hero__copy {
    max-width: none;
  }
  .page-hero--inset .page-hero__title {
    max-width: none;
    white-space: nowrap;
  }
}

/* AI marketing: a focused doorway on What We Do and its service hub. */
.pmagic--ai {
  padding-block-start: clamp(2rem, 4vw, 4rem);
}
.pmagic--ai .pmagic__stage {
  margin-block-start: 0;
}
.pmagic--ai .pmagic__sub {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.75rem);
  font-weight: 800;
  line-height: 1.06;
  max-width: 24ch;
  text-wrap: balance;
}
.pmagic--ai .pmagic__sub > span {
  color: var(--color-gold-bright);
}
.pmagic--ai .pmagic__body {
  margin-top: clamp(var(--space-12), 6vw, var(--space-20));
  align-items: start;
}
.pmagic--ai .pmagic__body .prose {
  opacity: 1;
  transform: none;
}
.pmagic--ai .prose p {
  font-size: var(--text-lg);
  line-height: 1.6;
}
.pmagic--ai .prose strong {
  color: var(--color-text-inverse);
}
.pmagic--ai .prose .pmagic__lead {
  margin-bottom: var(--space-8);
}
.pmagic--ai .prose .ai-keyphrase {
  display: block;
  font-size: clamp(1.6rem, 1rem + 1.7vw, 2.5rem);
  line-height: 1.2;
  font-weight: 800;
}
.pmagic--ai .prose .ai-keyphrase:first-child {
  color: var(--color-gold-bright);
  margin-bottom: var(--space-3);
}
.pmagic--ai .prose .ai-result {
  margin: var(--space-8) 0 var(--space-2);
}
.pmagic--ai .ai-result > strong {
  display: block;
  color: var(--color-gold-bright);
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: 1;
}
.pmagic--ai .ai-result > span {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  color: var(--color-text-inverse);
}
.pmagic--ai .ai-result--capability > strong {
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3.4rem);
  line-height: 1.12;
}
.pmagic--ai .prose .ai-result__note {
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
}
.ai-result__note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.pmagic--ai .is-in .ai-keyphrase {
  animation: ai-word-focus 650ms var(--ease-out) both;
}
.pmagic--ai .is-in .ai-keyphrase + .ai-keyphrase {
  animation-delay: 100ms;
}
@keyframes ai-word-focus {
  from { opacity: 0.3; filter: blur(3px); }
  to { opacity: 1; filter: blur(0); }
}
.ai-service-links {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ai-service-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 60px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text-inverse);
  text-decoration: none;
  transition: background var(--transition-interactive), color var(--transition-interactive), border-color var(--transition-interactive);
}
.ai-service-links a > span {
  flex: 0 0 auto;
  font-size: var(--text-lg);
  color: var(--color-gold-bright);
}
.ai-service-links a:hover,
.ai-service-links a:focus-visible {
  color: var(--color-text);
  background: var(--color-gold-bright);
  border-color: var(--color-gold-bright);
}
.ai-service-links a:hover > span,
.ai-service-links a:focus-visible > span {
  color: inherit;
}
.ai-service-links a:active {
  background: var(--color-text-inverse);
}
.ai-service-links a:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 4px;
}
.ai-page {
  --ai-section-gap: clamp(var(--space-16), 8vw, var(--space-32));
  --ai-column-gap: clamp(var(--space-8), 7vw, var(--space-24));
}
.ai-page .wwd-crumb__list {
  flex-wrap: wrap;
}
.ai-hero {
  background: var(--color-ink-block);
  color: var(--color-text-inverse);
  min-height: calc(100svh - var(--header-h, 77px) - 60px);
  display: flex;
  align-items: center;
  padding-block: clamp(var(--space-16), 8vw, var(--space-32));
}
.ai-hero h1 {
  max-width: 19ch;
  font-size: var(--text-hero);
  line-height: 1.04;
  font-weight: 800;
  margin: 0;
}
.ai-hero h1 > span {
  color: var(--color-gold-bright);
}
.ai-hero h1 > small {
  display: block;
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.4;
  margin-top: var(--space-6);
}
.ai-hero__bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: clamp(var(--space-12), 6vw, var(--space-24));
}
.ai-hero__bottom p {
  max-width: 54ch;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-inverse);
}
.ai-hero__bottom .btn {
  flex-shrink: 0;
}
.ai-section {
  padding-block: var(--ai-section-gap);
}
.ai-split,
.ai-solution {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--ai-column-gap);
  align-items: start;
}
.ai-section h2 {
  font-size: var(--text-2xl);
  line-height: 1.1;
  font-weight: 800;
  text-wrap: balance;
}
.ai-section p {
  font-size: var(--text-base);
  line-height: 1.75;
}
.ai-copy {
  max-width: 66ch;
}
.ai-copy p + p {
  margin-top: var(--space-5);
}
.ai-copy a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.ai-connection {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.ai-connection a {
  color: inherit;
}
.ai-email-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--space-8) var(--ai-column-gap);
  margin-top: var(--space-12);
  padding-block: var(--space-10);
  border-block: 1px solid rgb(255 255 255 / 0.3);
  scroll-margin-top: var(--space-4);
}
.ai-email-proof h3 {
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}
.ai-email-proof__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.ai-email-proof__metrics dt {
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
}
.ai-email-proof__metrics dd {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-gold-bright);
  line-height: 1;
}
.ai-section .ai-email-proof__note {
  grid-column: 1 / -1;
  max-width: 105ch;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.ai-email-proof__note a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.ai-connection__path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: var(--space-16) 0 0;
  padding: 0;
  border-top: 1px solid rgb(255 255 255 / 0.3);
}
.ai-connection__path li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) 0 0;
  font-size: var(--text-base);
  font-weight: 700;
}
.ai-connection__path li:not(:last-child)::after {
  content: '→';
  color: var(--color-gold-bright);
}
.ai-solutions {
  padding-bottom: 0;
}
.ai-solutions__intro > p {
  max-width: 53ch;
  font-size: var(--text-lg);
  line-height: 1.6;
}
.ai-jumpnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block: var(--space-10) var(--space-16);
}
.ai-jumpnav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-interactive), color var(--transition-interactive);
}
.ai-jumpnav a:hover,
.ai-jumpnav a:focus-visible {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.ai-jumpnav a:active {
  background: var(--color-primary-active);
}
.ai-page :is(section[id], article[id], aside[id]) {
  scroll-margin-top: var(--space-4);
}
.ai-solution {
  padding-block: clamp(var(--space-12), 6vw, var(--space-24));
  border-top: 1px solid var(--color-border);
}
.ai-solution h2 {
  max-width: 24ch;
  font-size: var(--text-xl);
  line-height: 1.22;
}
.ai-solution .ai-solution__promise {
  max-width: 36ch;
  margin-top: var(--space-5);
  color: var(--color-primary);
  font-size: var(--text-lg);
  line-height: 1.4;
  font-weight: 600;
}
.ai-solution__handoff {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.ai-solution__handoff strong {
  color: var(--color-text);
}
.ai-method {
  background: var(--color-surface-offset);
}
.ai-method__rows {
  margin-top: var(--space-12);
}
.ai-method__rows > div {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--ai-column-gap);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.ai-method__rows h3 {
  font-size: var(--text-lg);
  font-weight: 700;
}
.ai-text-link {
  display: inline-flex;
  gap: var(--space-4);
  padding-block: var(--space-3);
  margin-top: var(--space-5);
  font-weight: 700;
}
@media (max-width: 820px) {
  .ai-split,
  .ai-solution,
  .ai-email-proof,
  .ai-method__rows > div {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .ai-hero__bottom {
    flex-direction: column;
    align-items: start;
  }
  .ai-connection__path {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-top: var(--space-10);
  }
}
@media (max-width: 480px) {
  .pmagic--ai .pmagic__sub {
    font-size: var(--text-2xl);
  }
  .ai-hero h1 {
    font-size: clamp(2.25rem, 0.7rem + 8.3vw, 3.5rem);
  }
  .ai-connection__path {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ai-connection__path li {
    padding: var(--space-5) 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.2);
  }
  .ai-connection__path li:not(:last-child)::after {
    content: '↓';
  }
}
@media (prefers-reduced-motion: reduce) {
  .pmagic--ai .is-in .ai-keyphrase {
    animation: none;
  }
}

/* About: a client-led history, with the origin as an opening chapter. */
.about-origin .cine-say,
.about-evolution .cine-say {
  align-items: start;
}
.about-origin a,
.about-evolution a,
.about-stories a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.about-origin {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.about-stories {
  padding-top: clamp(2rem, 4vw, 3rem);
}
#about-stories-title,
#omnimarket,
#acxiom,
#about-people-title,
#about-change-title,
#ai-arkansas,
#ai-community {
  scroll-margin-top: 6rem;
}
.about-stories > .shell > .sec-head .sec-title {
  max-width: 20ch;
  font-size: clamp(2rem, 4.4vw, 4rem);
  line-height: 1.08;
}
.about-search-story {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-block: 1px solid var(--color-divider);
}
.about-search-story + .about-search-story {
  border-top: 0;
}
.about-story__label {
  margin: 0 0 0.85rem;
  font-size: 0.75rem;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.about-search-story h3 {
  max-width: 15ch;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.about-story__copy p,
.about-story > p:last-child,
.about-people__note {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.65;
}
.about-story__copy p + p {
  margin-top: 1rem;
}
.about-story-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.about-story h3 {
  margin-bottom: 1rem;
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.about-people__note {
  max-width: 65ch;
  margin-top: 2rem;
}
/* Real portraits, official marks, and published project artwork. */
.about-commerce {
  grid-column: 1 / -1;
  display: grid;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: #102d3e;
  color: #fff;
}
.about-commerce__eyebrow {
  margin-bottom: 2rem;
  color: #bfd2dc;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.about-commerce__name {
  font-size: clamp(2.1rem, 6vw, 5.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.055em;
}
.about-commerce__line {
  margin-top: 0.75rem;
  color: #d0dee6;
  font-size: clamp(0.95rem, 1.7vw, 1.25rem);
}
.about-commerce__details {
  align-self: end;
  padding-top: 1.5rem;
  border-top: 1px solid #54707f;
  font-size: 0.9rem;
}
.about-commerce__details > p {
  font-size: 1.2rem;
  line-height: 1.45;
  font-weight: 500;
}
.about-commerce__details ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  padding: 0;
  margin-block: 1.5rem;
  list-style: none;
  color: #d0dee6;
  font-size: 0.8rem;
}
.about-commerce a {
  color: #fff;
}
.about-feature-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 62px;
  margin-bottom: 1.75rem;
}
.about-feature-logo--acxiom {
  width: 210px;
}
.about-acxiom-proof {
  grid-column: 1 / -1;
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: #e6ecee;
}
.about-acxiom-proof strong {
  display: block;
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.045em;
}
.about-acxiom-proof span {
  display: block;
  margin-top: 0.75rem;
  max-width: 25ch;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #405260;
}
.about-acxiom-proof__sequence {
  padding-top: 1.25rem;
  border-top: 1px solid #b7c5cc;
  font-size: clamp(1rem, 1.65vw, 1.35rem);
  line-height: 1.5;
  font-weight: 600;
}
.about-privacy-work {
  margin: 2rem 0 0;
}
.about-privacy-work > img {
  display: block;
  width: 100%;
  height: auto;
}
.about-story-art {
  margin: 0 0 1.75rem;
}
.about-story-art__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: #fff;
}
.about-story-art__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-story-art__brand {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1rem;
  background: #fff;
}
.about-story-art__brand img {
  display: block;
  width: auto;
  max-width: 180px;
  height: auto;
  max-height: 48px;
  object-fit: contain;
}
.about-story-art__frame--nitelite {
  flex-direction: column;
  gap: 1.5rem;
  background: #ece7de;
  text-align: center;
}
.about-story-art__frame--nitelite > img {
  width: 200px;
  height: 104px;
  max-width: 60%;
  object-fit: contain;
}
.about-story-art__frame--nitelite > p {
  color: #353b35;
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.about-story-art__frame--sushi .about-story-art__brand {
  background: #18181b;
}
.about-story-art__frame--sushi .about-story-art__brand img {
  max-width: 220px;
}
.about-story-art__work {
  width: 88%;
  height: 76%;
  margin-top: 10%;
  object-fit: contain;
}
.about-story-art__frame--leafscape {
  background: #e9eee6;
}
.about-story-art__frame--leafscape .about-story-art__brand,
.about-story-art__frame--lawns .about-story-art__brand {
  bottom: auto;
  top: 1rem;
  left: 1.25rem;
  padding: 0;
  background: none;
}
.about-story-art__frame--leafscape .about-story-art__brand img {
  max-width: 160px;
  max-height: 40px;
}
.about-story-art__frame--lawns .about-story-art__brand img {
  max-width: 132px;
  max-height: 66px;
}
.about-story-art__frame--hounds .about-story-art__photo {
  object-fit: cover;
  object-position: center;
}
.about-story-art__frame--hounds .about-story-art__brand img {
  max-height: 78px;
}
.about-story-art__frame--uams .about-story-art__photo {
  object-fit: contain;
  object-position: center;
}
.about-story-art figcaption,
.about-privacy-work figcaption {
  margin-top: 0.65rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}
.about-team-section {
  border-top: 1px solid var(--color-divider);
}
/* A continuous thread in its own margin, from the first website to full stack. */
.about-journey {
  --story-lane: clamp(5rem, 9vw, 10rem);
  position: relative;
}
.about-journey > section > .shell {
  padding-left: calc(var(--gutter) + var(--story-lane));
}
.about-journey > .page-hero--inset {
  margin-left: calc(var(--gutter) + var(--story-lane));
}
.about-journey > .page-hero--inset > .shell {
  padding-left: var(--gutter);
}
.about-journey__line {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
}
.about-journey.is-ready .about-journey__line {
  visibility: visible;
}
.about-journey__track,
.about-journey__progress {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about-journey__track {
  stroke: #d2c39c;
  stroke-width: 2;
}
.about-journey__progress {
  stroke: #947020;
  stroke-width: 3;
}
.about-journey__stop {
  fill: var(--color-bg);
  stroke: #a58a47;
  stroke-width: 2;
}
.about-journey__stop.is-passed {
  fill: #947020;
  stroke: #947020;
}
.about-journey__end-ring {
  fill: none;
  stroke: #a58a47;
  stroke-width: 1;
}
.about-journey__cursor {
  fill: #0b1c28;
  stroke: var(--color-bg);
  stroke-width: 2;
}
.about-journey.is-reduced .about-journey__cursor {
  display: none;
}
.about-person__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.65rem;
}
.about-person__name h3 {
  margin-bottom: 0;
}
.about-person__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  color: #0a66c2;
  border-radius: 3px;
  transition: color 180ms ease, background-color 180ms ease;
}
.about-person__linkedin svg {
  width: 22px;
  height: 25px;
}
.about-person__linkedin:hover {
  color: #fff;
  background: #0a66c2;
}
.about-person__linkedin:focus-visible {
  outline: 2px solid #0a66c2;
  outline-offset: 2px;
}
@media (max-width: 767px) {
  .about-journey {
    --story-lane: 2rem;
  }
  .about-journey .about-title__h {
    font-size: clamp(2.6rem, 12.5vw, 4.5rem);
  }
  .about-journey .about-commerce__name {
    font-size: clamp(2rem, 8.5vw, 4rem);
  }
}
.about-change__layout {
  grid-template-areas: "title" "art" "copy";
  align-items: center;
}
.about-change__layout > h2 {
  grid-area: title;
}
.about-change__art {
  grid-area: art;
  width: 100%;
  max-width: 36rem;
  margin: 0;
  justify-self: center;
}
.about-change__art img {
  display: block;
  width: 100%;
  height: auto;
}
.about-change__art figcaption {
  margin-top: 1rem;
  color: var(--color-text-muted);
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.6;
}
.about-change__art figcaption span {
  display: block;
}
.about-change__copy {
  grid-area: copy;
}
@media (min-width: 900px) {
  .about-change__layout {
    grid-template-areas: "art title" "art copy";
    row-gap: 1.75rem;
    align-items: center;
  }
  .about-change__layout > h2 {
    align-self: end;
  }
  .about-change__copy {
    align-self: start;
  }
}
.about-team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1rem;
  margin-block: clamp(2rem, 4vw, 3.5rem);
}
.about-person {
  min-width: 0;
  margin: 0;
}
.about-person__photo {
  overflow: hidden;
  background: #f0f0ee;
  aspect-ratio: 4 / 5;
}
.about-person__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.about-person figcaption {
  padding-top: 1.15rem;
}
.about-person h3 {
  margin: 0 0 0.35rem;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.about-person figcaption p {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}
@media (max-width: 479px) {
  .about-story-art__frame--nitelite { gap: 0.75rem; }
  .about-story-art__frame--nitelite > img { width: 160px; height: 84px; }
  .about-story-art__brand { bottom: 0.75rem; left: 0.75rem; padding: 0.65rem 0.75rem; }
  .about-story-art__brand img { max-width: 145px; max-height: 36px; }
  .about-story-art__frame--hounds .about-story-art__brand img { max-height: 58px; }
}
@media (min-width: 800px) {
  .about-search-story {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
  .about-story-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-commerce {
    grid-template-columns: 1.45fr 1fr;
    gap: 3rem;
  }
  .about-commerce__details {
    padding: 0 0 0 2.5rem;
    border-top: 0;
    border-left: 1px solid #54707f;
  }
  .about-acxiom-proof {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 2rem;
  }
  .about-acxiom-proof__sequence {
    padding: 0 0 0 2rem;
    border-top: 0;
    border-left: 1px solid #b7c5cc;
  }
  .about-team {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 2rem);
  }
}
/* The actual magazine cover supplies this chapter's color and character.
   The cover is presented as artwork, not as a simulated photograph. */
.about-magazine {
  background: #f8eee5;
  color: #2b173b;
  padding-block: clamp(3.5rem, 7vw, 7rem);
}
.about-magazine__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.about-magazine .about-story__label {
  color: #664159;
}
.about-magazine h2 {
  margin: 0;
  font-size: clamp(2.7rem, 5.5vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 800;
}
.about-magazine h2 span {
  color: #bd431b;
}
.about-magazine__copy > p:not(.about-story__label) {
  max-width: 39ch;
  font-size: var(--text-base);
  line-height: 1.6;
}
.about-magazine__copy > p.about-magazine__intro {
  margin-top: 1.65rem;
  margin-bottom: 0.8rem;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-weight: 700;
}
.about-magazine__link {
  margin-top: 1.5rem;
  color: #fff;
  background: #2b173b;
  border-color: #2b173b;
  gap: 2rem;
}
.about-magazine__link:hover {
  color: #fff;
  background: #6b2451;
  border-color: #6b2451;
}
.about-magazine__copy > p.about-magazine__credits {
  margin-top: 1.5rem;
  font-size: 0.74rem;
  line-height: 1.65;
  color: #674e60;
}
.about-magazine__art {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: 2rem clamp(0.9rem, 2vw, 2rem) 0;
}
.about-magazine__sun {
  position: absolute;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f6ac59;
  top: 9%;
  left: 0;
}
.about-magazine__cover {
  display: block;
  width: 84%;
  margin: 0 auto;
  transform: rotate(5deg);
  box-shadow: 1rem 1.5rem 2.5rem rgb(49 16 43 / 0.25);
  transition: transform 500ms ease, box-shadow 500ms ease;
}
.about-magazine__cover img {
  display: block;
  width: 100%;
  height: auto;
}
.about-magazine__cover:hover,
.about-magazine__cover:focus-visible {
  transform: rotate(1deg) translateY(-0.5rem);
  box-shadow: 0.7rem 2rem 3rem rgb(49 16 43 / 0.27);
}
.about-magazine__art figcaption {
  margin-top: 2.5rem;
  padding-left: 8%;
  color: #674e60;
  line-height: 1.5;
  font-size: 0.72rem;
}
.about-magazine__print-row {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(3.5rem, 8vw, 7rem);
}
.about-magazine__print {
  margin: 0;
}
.about-magazine__print img {
  display: block;
  width: 100%;
  height: auto;
}
.about-magazine__print figcaption {
  margin-top: 0.7rem;
  color: #674e60;
  font-size: 0.75rem;
}
.about-magazine__quote blockquote p {
  margin: 0;
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.about-magazine__quote > p {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #674e60;
}
.about-magazine__quote .about-magazine__bridge {
  margin-top: 1.7rem;
  font-size: var(--text-base);
  max-width: 40ch;
}
.about-magazine__copy > p a,
.about-magazine__quote a,
.about-community__intro p a,
.about-community__photo figcaption a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.about-community {
  padding-block: clamp(3.5rem, 7vw, 7rem) clamp(2rem, 4vw, 4rem);
  background: #0b1e30;
  color: #fff;
}
.about-community__intro {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.about-community__brand {
  display: block;
  width: clamp(150px, 18vw, 250px);
}
.about-community__brand img {
  display: block;
  width: 100%;
  height: auto;
}
.about-community .about-story__label {
  color: #b5c6d7;
}
.about-community h2 {
  margin: 0 0 1rem;
  font-weight: 800;
  font-size: clamp(2.8rem, 5.3vw, 5rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}
.about-community__intro > div > p:last-child {
  max-width: 48ch;
  color: #c4d1dc;
  line-height: 1.6;
  font-size: var(--text-base);
}
.about-community__photo {
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
}
.about-community__photo img {
  display: block;
  width: 100%;
  height: auto;
}
.about-community__photo figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 0.9rem;
  color: #bbcbd8;
  font-size: 0.72rem;
}
.about-community__footer {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgb(255 255 255 / 0.2);
}
.about-community__footer p {
  max-width: 47ch;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #c4d1dc;
}
.about-community__footer .btn {
  margin-top: 1.3rem;
  color: #fff;
  border-color: rgb(255 255 255 / 0.45);
  gap: 2rem;
}
.about-community__footer .btn:hover {
  border-color: #fff;
}
.about-community__next strong {
  color: #fff;
}
@media (min-width: 800px) {
  .about-magazine__grid,
  .about-magazine__print-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-community__intro {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  }
  .about-community__footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 799px) {
  .about-magazine__art {
    width: min(100%, 31rem);
    justify-self: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-magazine__cover,
  .about-magazine__cover:hover,
  .about-magazine__cover:focus-visible {
    transform: none;
    transition: none;
  }
}
/* The closing particle headline follows the dark community band, so it starts
   close to that section instead of adding a second full band of space. */
.pmagic--about {
  padding-block-start: clamp(0.5rem, 2vw, 2rem);
}
.pmagic--about .pmagic__stage {
  margin-block-start: 0;
}

/* Snell case study: real patient stories, original campaign work, client voice. */
.snell-case .snell-label {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.snell-case .band--ink .snell-label {
  color: var(--color-cyan);
}
.snell-case .snell-section-title,
.snell-intro h2 {
  margin: 0;
  max-width: 25ch;
  font-size: clamp(1.9rem, 3.7vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.snell-prose > p + p {
  margin-top: 1.1rem;
}
.snell-prose p {
  max-width: 57ch;
}
.snell-hero-link {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.45);
  color: #fff;
  font-weight: 600;
}
.snell-hero-link:hover {
  color: var(--color-cyan);
}
.snell-client-logo {
  width: min(100%, 18rem);
  height: auto;
  margin-bottom: 2rem;
}
.snell-intro__grid,
.snell-testimonial__grid,
.snell-film-story,
.snell-website {
  display: grid;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.snell-case #frank-snell {
  scroll-margin-top: 1rem;
}
.snell-testimonial__grid {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.snell-film,
.snell-photo,
.snell-work {
  margin: 0;
  min-width: 0;
}
.snell-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0b1c28;
  border: 1px solid rgb(255 255 255 / 0.18);
}
.snell-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.snell-film figcaption,
.snell-photo figcaption {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.snell-film figcaption a {
  display: inline-block;
  margin-left: 0.65rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.band--ink .snell-film figcaption,
.band--ink .snell-film figcaption a {
  color: #c9d3da;
}
.snell-testimonial blockquote {
  margin: 0;
  padding: 0;
}
.snell-testimonial blockquote p {
  margin: 0;
  color: #fff;
  font-size: clamp(1.3rem, 1.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.43;
}
.snell-testimonial blockquote strong {
  color: var(--color-gold-bright);
  font-weight: 700;
}
.snell-testimonial .snell-attribution {
  margin: 1.5rem 0 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}
.snell-attribution span {
  display: block;
  margin-top: 0.25rem;
  color: #c9d3da;
  font-size: 0.85rem;
  font-weight: 400;
}
.snell-testimonial .snell-result-note {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #b7c2ca;
}
.snell-people {
  display: grid;
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.snell-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.snell-people__story .snell-prose {
  margin-block: 1.5rem 2rem;
}
.snell-case .snell-film-story h2 {
  margin-bottom: 1.5rem;
}
.snell-section-lead {
  max-width: 67ch;
  margin-top: 1.5rem;
}
.snell-work-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: 3rem;
}
.snell-work img {
  display: block;
  width: 100%;
  height: auto;
  background: #f0f0f0;
}
.snell-work h3,
.snell-website h3 {
  margin: 1.4rem 0 0.7rem;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.25;
}
.snell-work figcaption p {
  max-width: 56ch;
}
.snell-website {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--color-divider);
}
.snell-text-link {
  display: inline-block;
  margin-top: 1.4rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.snell-impact__grid {
  display: grid;
  gap: 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.snell-impact__grid > div {
  padding-top: 1.4rem;
  border-top: 1px solid rgb(255 255 255 / 0.24);
}
.snell-impact__grid h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  line-height: 1.3;
}
.snell-impact .snell-project-history {
  margin: 3rem 0 0;
  font-size: 0.8rem;
  line-height: 1.7;
}
.snell-project-history a {
  color: #c9d3da;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media (min-width: 800px) {
  .snell-intro__grid,
  .snell-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .snell-people {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  }
  .snell-impact__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .snell-testimonial__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
  .snell-film-story,
  .snell-website {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  }
}
@media (max-width: 799px) {
  .snell-people__portrait {
    order: 2;
  }
}

/* ---------- deliverables list (case studies) ----------
   Long, non-interactive items read as a ruled list, not as buttons. */
.deliverables {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.deliverables__label {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.deliverables__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  column-gap: clamp(var(--space-6), 4vw, var(--space-12));
  counter-reset: deliverable;
}
.deliverables__list li {
  counter-increment: deliverable;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: baseline;
  padding-block: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-divider, var(--color-border));
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.55;
}
.deliverables__list li::before {
  content: counter(deliverable, decimal-leading-zero);
  color: #b88616;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
}
.deliverables--compact .deliverables__list {
  grid-template-columns: minmax(0, 1fr);
}
.deliverables--compact { margin-top: var(--space-6); }
.deliverables--compact .deliverables__list li::before {
  content: "";
  align-self: start;
  width: 1rem;
  height: 2px;
  margin-top: .8em;
  background: #b88616;
}
.hodge-live-link { margin-top: var(--space-5); }
.hodge-live-link a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }

/* ---------- case-study list headers and tighter section joins ---------- */
.cs-list-head {
  margin-bottom: clamp(var(--space-8), 4vw, var(--space-12));
}
.cs-list-head .sec-title { margin: 0; }
.cs-list-head p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  max-width: 60ch;
}
.cs-list-head__link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.discovery-results + .cs-list-head {
  margin-top: clamp(var(--space-12), 6vw, var(--space-20));
}
/* Results flow straight into the project list on /case-studies/. */
.band.discovery-results-band {
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}
.discovery-results-band + .cs-lanes-band {
  padding-top: clamp(3rem, 6vw, 5.5rem);
}

/* ---------- older case studies: match the refreshed pages' section rhythm ----------
   Full .band padding (up to 14rem each side) left 430px+ of empty space
   between sections. CTA and next-case bands keep their own spacing. */
.cs-compact .band:not(.cta-band):not(.band--tight) {
  padding-block: clamp(3.5rem, 7vw, 7rem);
}