/* ============================================================================
   Authority PR. One continuous world, built from the agency's own reel.
   Type is the client's own face (DM Sans), at two weights: 300 for prose,
   500 for display, tracked tight as it grows. Ground and ink follow their
   black-and-white identity; one red accent, taken from their reel.
   ========================================================================== */

:root {
  --sc-canvas:     #0A0A0B;
  --sc-surface:    #141416;
  --sc-ink:        #F4F3F1;
  --sc-ink-soft:   #A3A2A6;
  --sc-accent:     #E5483A;
  --sc-accent-ink: #0A0A0B;

  --sc-font-display: "DM Sans", system-ui, sans-serif;
  --sc-font-text:    "DM Sans", system-ui, sans-serif;

  /* the printed margin the file lives in */
  --margin-rail: 232px;
}

/* ---------------------------------------------------------------- ground -- */
html, body { background: var(--sc-canvas); }
body { overflow-x: clip; }

@media (min-width: 1100px) {
  :root { --sc-gutter: clamp(2rem, 4.2vw, 4.5rem); }
}

/* ------------------------------------------------------------------ chrome */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sc-5);
  padding: clamp(1rem, 2.2vh, 1.75rem) var(--sc-gutter);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }

/* the chrome sits on whatever the flight is showing, so it carries its own
   density band at the top edge rather than trusting the photograph */
.bar::before {
  content: ""; position: fixed; inset: 0 0 auto 0;
  height: clamp(88px, 17vh, 168px);
  z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 82%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 46%, transparent) 46%,
    transparent 100%);
}
/* on the document pages the bar scrolls over content, so there it is solid */
body:has(.page) .bar::before { display: none; }
body:has(.page) .bar {
  background: var(--sc-canvas);
  border-bottom: 1px solid var(--sc-hairline);
}

.bar__mark {
  display: block; line-height: 0;
  transition: opacity var(--sc-d-fast) var(--sc-ease-out);
}
.bar__mark img {
  /* the client's own lockup, which is black on transparent */
  width: auto; height: clamp(38px, 4.4vh, 50px);
  filter: invert(1) opacity(0.9);
}
.bar__mark:hover { opacity: 0.72; }

.bar__nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
/* every menu target is at least 44px tall, so a thumb can hit it */
.bar__nav a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-ink-soft) 86%, var(--sc-canvas));
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--sc-d-fast) var(--sc-ease-out), opacity 100ms var(--sc-ease-out);
}
.bar__mark { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; -webkit-tap-highlight-color: transparent; }
.bar__nav a:active, .bar__mark:active { opacity: 0.6; }

/* One mark for "you are here", the same one the home page's progress strip
   uses: the label goes full white and a short red bar sits under it. Every
   other link stays dimmed, so the current page is the only lit word. */
.bar__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 2px;
  background: var(--sc-accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.bar__nav a[aria-current] { color: var(--sc-ink); }
.bar__nav a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .bar__nav a:hover { color: var(--sc-ink); }
  .bar__nav a:not([aria-current]):hover::after { transform: scaleX(0.35); }
}

/* The CTA is an action, not a place, so it gets a different shape: a thin
   outlined box, the same ghost button the home page closes on. That keeps the
   red bar meaning one thing only, "you are here". On the contact page the box
   itself turns red. */
.bar__cta {
  color: var(--sc-ink) !important;
  padding: 0 0.95rem;
  min-height: 40px !important;
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong);
  transition: box-shadow var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), opacity 100ms var(--sc-ease-out);
}
.bar__cta::after { display: none; }
@media (pointer: coarse) { .bar__cta { min-height: 44px !important; } }
@media (hover: hover) and (pointer: fine) {
  .bar__cta:hover { box-shadow: inset 0 0 0 1px var(--sc-accent); }
}
.bar__cta[aria-current] { color: var(--sc-accent) !important; box-shadow: inset 0 0 0 1px var(--sc-accent); }
.bar__nav a { white-space: nowrap; }
@media (max-width: 420px) {
  .bar__nav { gap: 0.7rem; }
  .bar__cta { padding: 0 0.55rem; }
  .bar__nav a { letter-spacing: 0.06em; }
}
/* small phones (360px class): the CTA keeps one line by tightening, not by
   wrapping or renaming */
@media (max-width: 380px) {
  .bar { padding-inline: 1rem; }
  .bar__nav { gap: 0.7rem; }
  .bar__nav a { font-size: 0.68rem; letter-spacing: 0.03em; }
}
@media (max-width: 340px) {
  .bar { padding-inline: 0.75rem; }
  .bar__nav { gap: 0.5rem; }
  .bar__nav a { font-size: 0.6rem; letter-spacing: 0.01em; }
  .bar__cta { padding: 0 0.45rem; }
  .bar__mark img { height: 34px; }
}
.bar__cta:hover { color: var(--sc-accent) !important; }

/* ================================================================== THE FILE
   The signature move: the margin writes itself as the flight descends.
   A hairline rule fills, each room stamps in, the current room takes the
   accent. Buttons are the map: they fly the page to a room.               -- */
.file {
  position: fixed; z-index: var(--sc-z-chrome);
  left: var(--sc-gutter); top: 50%; transform: translateY(-50%);
  width: 196px;
  display: block;
}
.file__rule {
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--sc-hairline-strong);
}
.file__fill {
  position: absolute; left: 0; top: 0; width: 1px; height: 100%;
  background: var(--sc-accent);
  transform: scaleY(0); transform-origin: 0 0;
  will-change: transform;
}
.file__now { display: none; }

.file__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.95rem; }

.file__item {
  display: block; width: 100%;
  appearance: none; background: none; border: 0; margin: 0;
  padding: 0 0 0 18px;
  text-align: left; cursor: pointer;
  color: var(--sc-ink-soft);
  position: relative;
  opacity: 0.5;
  transition: opacity var(--sc-d-base) var(--sc-ease-out), color var(--sc-d-base) var(--sc-ease-out);
}
.file__item::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 7px; height: 1px;
  background: currentColor;
  transition: width var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base) var(--sc-ease-out);
}
.file__item[data-seen="1"] { opacity: 0.86; }
.file__item:hover { opacity: 1; color: var(--sc-ink); }
.file__item[aria-current="true"] { opacity: 1; color: var(--sc-accent); }
.file__item[aria-current="true"]::before { width: 15px; background: var(--sc-accent); }
.file__item:focus-visible { outline-offset: 4px; }

.file__k {
  display: block;
  font-size: 0.7rem; line-height: 1.4;
  letter-spacing: 0.15em; text-transform: uppercase;
}
.file__v {
  display: block; margin-top: 2px;
  font-size: 0.76rem; line-height: 1.4;
  letter-spacing: 0;
  color: var(--sc-ink-soft);
}
.file__item[aria-current="true"] .file__v { color: var(--sc-ink); opacity: 0.85; }

/* phones and narrow windows: the margin turns into a rule across the top */
@media (max-width: 1099px) {
  /* the strip starts BELOW the menu bar. It used to start at the top with a
     padded list, which laid an invisible box over the menu and ate every tap. */
  .file {
    left: 0; right: 0; top: 5.3rem; width: auto; transform: none;
    padding: 0 var(--sc-gutter);
    pointer-events: none;
  }
  .file__item { pointer-events: auto; }
  .file__rule, .file__fill {
    left: var(--sc-gutter); right: var(--sc-gutter); width: auto;
    height: 1px; bottom: auto;
  }
  .file__rule { top: 0; }
  .file__fill { top: 0; height: 1px; transform: scaleX(0); transform-origin: 0 50%; }
  .file__list { display: flex; gap: 0; padding-top: 0; }
  .file__list li { flex: 1; }
  .file__item { padding: 0.1rem 0 0.55rem; min-height: 44px; }
  .file__item::before {
    top: 0; left: 0; width: 100%; height: 1px;
    background: color-mix(in oklab, var(--sc-ink) 20%, transparent);
  }
  .file__item[aria-current="true"]::before { width: 100%; height: 2px; background: var(--sc-accent); }
  .file__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .file__v { display: none; }
  .file__now {
    display: block; margin: 0; padding-top: 0.4rem;
    font-size: 0.64rem; letter-spacing: 0.17em; text-transform: uppercase;
    color: var(--sc-accent);
  }
}

/* ================================================================ THE WORLD */
[data-sc-mode="worldflight"] { background: var(--sc-canvas); }

/* a poster can carry a portrait crop for phones, so it may sit in a <picture> */
.sc-world__seg > picture { position: absolute; inset: 0; display: block; }
.sc-world__seg > picture > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* No global scrim. Each shot carries its own shade, shaped to where its text
   sits, and fades with the shot (driven from index.html), so the footage keeps
   its light everywhere the words are not. --d = desktop only, --m = phone only. */
.shade {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; opacity: 0;
  will-change: opacity;
}
@media (max-width: 1099px) { .shade--d { display: none; } }
@media (min-width: 1100px) { .shade--m { display: none; } }

/* copy at the top-left, the subject below it */
.sh-top {
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 52%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 14%, transparent) 52%,
    transparent 64%);
}
.sh-topleft {
  background:
    linear-gradient(to bottom,
      color-mix(in oklab, var(--sc-canvas) 50%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 26%, transparent) 40%,
      transparent 62%),
    linear-gradient(to right,
      color-mix(in oklab, var(--sc-canvas) 62%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 38%, transparent) 36%,
      transparent 58%);
}
/* copy along the bottom: a short band, the upper frame untouched */
.sh-bottom {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 64%, transparent) 22%,
    color-mix(in oklab, var(--sc-canvas) 20%, transparent) 40%,
    transparent 52%);
}
/* copy in the middle-left column over bright footage */
.sh-col {
  background: linear-gradient(to right,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 82%, transparent) 38%,
    color-mix(in oklab, var(--sc-canvas) 40%, transparent) 56%,
    transparent 70%);
}
.sh-col-m {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 84%, transparent) 42%,
    color-mix(in oklab, var(--sc-canvas) 26%, transparent) 64%,
    transparent 78%);
}
/* bright shots only: the lectern wall, the dawn horizon, the lit lobby, the
   overcast sky above the city on phones */
.sh-bottom-strong {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 95%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 86%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 46%, transparent) 48%,
    transparent 62%);
}
.sh-deep {
  background: linear-gradient(to right,
    color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 40%,
    color-mix(in oklab, var(--sc-canvas) 54%, transparent) 58%,
    transparent 74%);
}
.sh-top-strong {
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 80%, transparent) 34%,
    color-mix(in oklab, var(--sc-canvas) 26%, transparent) 50%,
    transparent 60%);
}
/* the record lays real photographs over the footage */
.sh-veil { background: color-mix(in oklab, var(--sc-canvas) 82%, transparent); }
/* ------------------------------------------------------------------- copy */
.copy {
  position: absolute;
  inset-inline: var(--sc-gutter);
  bottom: clamp(2.5rem, 10vh, 6.5rem);
  max-width: min(50rem, 70vw);
  z-index: 2;
}
@media (min-width: 1100px) {
  .copy { left: calc(var(--sc-gutter) + var(--margin-rail)); }
}
/* the hero sits above the subject so the phone stays in view below it */
.copy--top { bottom: auto; top: clamp(6.5rem, 16vh, 10rem); }
@media (max-width: 1099px) { .copy--top, .copy--top-m { bottom: auto; top: 8.6rem; } }
/* services hold the middle of the frame, the way a caption card would */
.copy--mid { bottom: auto; top: 50%; translate: 0 -50%; max-width: 36rem; }
@media (max-width: 1099px) {
  .copy { max-width: none; }
  .copy--mid { top: auto; translate: none; bottom: clamp(2.5rem, 9vh, 5rem); }
}

.eyebrow-w {
  display: block; margin: 0 0 1.1rem;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sc-accent);
}

/* hero: the one word their own homepage opens on, at poster scale */
.h-rapid {
  font-size: clamp(5.5rem, 16.5vw, 16rem);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.065em;
  margin: 0 0 0 -0.05em;
}
.h1-hero { margin: 0; font: inherit; }
.h1-hero .h-rapid { display: block; }
.lede {
  margin: clamp(1.2rem, 2.6vh, 2rem) 0 0;
  font-size: clamp(1.45rem, 2.3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: 22ch;
  text-wrap: balance;
}
.sub {
  margin-top: clamp(0.9rem, 2vh, 1.4rem);
  font-size: clamp(1rem, 1.08vw, 1.18rem);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.002em;
  color: var(--sc-ink);
  max-width: 46ch;
  text-wrap: pretty;
}
.sub--soft { color: var(--sc-ink-soft); }

.h-peak {
  font-size: clamp(2.6rem, 5.6vw, 5.4rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-wrap: balance;
  max-width: 13ch;
  margin: 0;
}
.h-svc {
  font-size: clamp(2.3rem, 4.4vw, 4.3rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
  margin: 0;
}

/* the peak: one real number per medium, landing on its own footage */
.num {
  display: block;
  font-size: clamp(6.5rem, 21vw, 21rem);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.07em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 0 -0.06em;
}
.num small { font-size: 0.42em; font-weight: 300; letter-spacing: -0.03em; margin-left: 0.04em; color: var(--sc-accent); }
.num-label {
  display: block; margin-top: clamp(0.9rem, 2vh, 1.4rem);
  font-size: clamp(0.78rem, 0.9vw, 0.95rem); font-weight: 400;
  letter-spacing: 0.17em; text-transform: uppercase;
}

/* the record: real photographs, framed, over the receded reel */
.record {
  position: absolute; z-index: 2;
  inset: clamp(5.5rem, 13vh, 8rem) var(--sc-gutter) clamp(2rem, 6vh, 4rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 4vw, 4.5rem); align-items: center;
}
@media (min-width: 1100px) { .record { left: calc(var(--sc-gutter) + var(--margin-rail)); } }
.record__quote {
  font-size: clamp(2rem, 3.5vw, 3.4rem); font-weight: 500;
  line-height: 1.02; letter-spacing: -0.035em; margin: 0; text-wrap: balance;
}
.record__who { margin: 1rem 0 0; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sc-ink-soft); }
.record__case {
  margin: clamp(1.6rem, 3.5vh, 2.6rem) 0 0; padding-top: clamp(1.2rem, 2.6vh, 1.8rem);
  border-top: 1px solid var(--sc-hairline-strong);
  font-size: clamp(0.95rem, 1vw, 1.08rem); font-weight: 300; line-height: 1.6;
  color: var(--sc-ink-soft); max-width: 44ch;
}
.record__case strong { color: var(--sc-ink); font-weight: 500; }
.prints {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: clamp(0.7rem, 1.2vw, 1.1rem); margin: 0;
  height: min(60vh, 560px); min-width: 0;
}
.prints figure { margin: 0; min-height: 0; display: flex; flex-direction: column; }
.prints img {
  flex: 1 1 auto; min-height: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  box-shadow: var(--sc-e3);
}
.prints .p-tall { grid-row: span 2; }
.prints figcaption {
  margin-top: 0.5rem; font-size: 0.68rem; line-height: 1.4;
  letter-spacing: 0.06em; color: var(--sc-ink-soft);
}
.marks-w {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 2.4vw, 2.6rem);
  margin: 0; padding: clamp(1rem, 2.4vh, 1.6rem) 0 0;
  border-top: 1px solid var(--sc-hairline);
  list-style: none;
}
.marks-w img { height: clamp(22px, 2.6vw, 34px); width: auto; opacity: 0.78; }

@media (max-width: 1099px) {
  .record {
    inset: auto var(--sc-gutter) clamp(2rem, 6vh, 3.5rem);
    grid-template-columns: 1fr; gap: 1.2rem;
  }
  .prints { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; order: -1; height: 22vh; }
  .prints .p-tall { grid-row: auto; }
  .prints figcaption { display: none; }
  .record__case { margin-top: 1rem; padding-top: 1rem; }
  .marks-w { display: none; }
}

.actions { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center; margin-top: clamp(1.5rem, 3.2vh, 2.4rem); }
.btn {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 0 1.5rem;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  background: var(--sc-ink); color: var(--sc-accent-ink);
  transition: background var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.btn:hover { background: var(--sc-accent); color: var(--sc-ink); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); }
.btn--ghost:hover { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-accent); }

/* kept for the document pages */
.quote { font-size: clamp(1.35rem, 2.35vw, 2.15rem); line-height: 1.24; letter-spacing: -0.02em; text-wrap: balance; margin: 0; max-width: 30ch; }
.attrib { margin: 1.15rem 0 0; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); }

/* ------------------------------------------------------------------- CTA */
.cta {
  display: inline-block;
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
  font-family: var(--sc-font-text);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  letter-spacing: 0.02em;
  color: var(--sc-ink);
  text-decoration: none;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--sc-accent);
  transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.cta::after { content: " \2192"; color: var(--sc-accent); }
.cta:hover { color: var(--sc-accent); border-color: var(--sc-ink); }

.contact-line {
  margin: clamp(1.4rem, 3vh, 2rem) 0 0;
  font-size: 0.8rem; letter-spacing: 0.08em;
  color: var(--sc-ink-soft);
}
.contact-line a { color: var(--sc-ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
.contact-line a:hover { color: var(--sc-ink); border-color: var(--sc-hairline-strong); }

/* ========================================================== EDITORIAL PAGES
   work.html and contact.html: ordinary documents on the same ground.        */
.page { padding: clamp(7rem, 16vh, 11rem) 0 0; }
.page__head { max-width: 44rem; }
.page__head h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 1.02;
}
.page__head .sub { max-width: 40ch; }
.page__section { padding-block: clamp(3.5rem, 9vw, 7.5rem); }
.page__section + .page__section { border-top: 1px solid var(--sc-hairline); }
.rule { height: 1px; background: var(--sc-hairline); border: 0; margin: 0; }

.eyebrow {
  font-size: 0.68rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--sc-accent);
  margin: 0 0 1.5rem;
}

.cols { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 860px) { .cols--2 { grid-template-columns: 1fr 1fr; } }

.prose p { max-width: 62ch; color: var(--sc-ink-soft); }
.prose p + p { margin-top: 1.1rem; }
.prose strong { color: var(--sc-ink); font-weight: 500; }

.svc { list-style: none; margin: 0; padding: 0; }
.svc li {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--sc-hairline);
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}
.svc li span { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }

.tst { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.tst blockquote {
  margin: 0; font-family: var(--sc-font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1.75vw, 1.6rem); line-height: 1.42;
  letter-spacing: -0.01em; max-width: 46ch; text-wrap: pretty;
}
.tst figcaption {
  margin-top: 1rem; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sc-ink-soft);
}

/* the client marks live on paper, in their own colours */
.band-paper {
  --sc-ink: #14100E; --sc-ink-soft: #5B534B;
  color: var(--sc-ink);
  background: #EFE9E1;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.band-paper .eyebrow { color: #9B2B20; }
.marks {
  display: grid; gap: clamp(1.5rem, 3.5vw, 3rem);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-items: center;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.marks figure { margin: 0; display: grid; place-items: center; min-height: 74px; }
/* most of the supplied marks are JPGs on white, so multiply drops the box and
   leaves the cream ground showing through. Black marks and colour are kept. */
.marks img {
  max-width: 100%; max-height: 68px; width: auto; height: auto;
  object-fit: contain; mix-blend-mode: multiply;
}
.marks figure > span {
  font-size: 0.72rem; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--sc-ink-soft); text-align: center;
}

/* ------------------------------------------------------------------- form */
.form { display: grid; gap: 1.1rem; max-width: 34rem; margin-top: 2.5rem; }
.form label { display: block; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 0.5rem; }
.form input, .form textarea {
  width: 100%; background: transparent;
  border: 0; border-bottom: 1px solid var(--sc-hairline-strong);
  padding: 0.55rem 0 0.7rem;
  font-size: 1rem; color: var(--sc-ink);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
.form input:hover, .form textarea:hover { border-color: color-mix(in oklab, var(--sc-ink) 42%, transparent); }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--sc-accent); }
.form textarea { resize: vertical; min-height: 7rem; }
.form button {
  justify-self: start; margin-top: 0.6rem;
  appearance: none; cursor: pointer;
  background: var(--sc-ink); color: var(--sc-accent-ink);
  border: 0; padding: 0.95rem 1.6rem;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.form button:hover { background: var(--sc-accent); }
.form button:active { transform: translateY(1px); }
.form__note { font-size: 0.78rem; color: var(--sc-ink-soft); margin: 0; }

.field {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.6rem, 1.2vw, 1rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}
.field img { width: 100%; height: clamp(220px, 32vw, 460px); object-fit: cover; box-shadow: var(--sc-e2); }
@media (max-width: 700px) { .field { grid-template-columns: 1fr 1fr; } .field img { height: 52vw; } }

/* --------------------------------------------------------------- insights */
.posts { list-style: none; margin: clamp(3rem, 7vw, 5rem) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.posts li { border-bottom: 1px solid var(--sc-hairline); }
.posts a {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.4rem 2.5rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0; text-decoration: none;
}
.posts time { grid-row: span 2; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: 0.45rem; }
.posts h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 500; line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.posts p { margin: 0; max-width: 70ch; color: var(--sc-ink-soft); font-weight: 300; }
.posts a:hover h2 { color: var(--sc-accent); }
@media (max-width: 700px) { .posts a { grid-template-columns: 1fr; } .posts time { grid-row: auto; padding: 0; } }

.article { max-width: 46rem; padding-bottom: clamp(3rem, 7vw, 5rem); }
.article .eyebrow a { color: inherit; text-decoration: none; }
.article h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.article__by { margin: 1.4rem 0 0; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--sc-ink-soft); }
.article__body { margin-top: clamp(2.5rem, 5vw, 3.5rem); font-size: clamp(1.05rem, 1.15vw, 1.16rem); font-weight: 300; line-height: 1.72; }
.article__body p, .article__body li { max-width: 66ch; color: color-mix(in oklab, var(--sc-ink) 88%, transparent); }
.article__body p + p { margin-top: 1.15em; }
.article__body h2 { margin: 2.6em 0 0.8em; font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.article__body h3 { margin: 2em 0 0.6em; font-size: 1.15rem; font-weight: 500; }
.article__body ul, .article__body ol { padding-left: 1.2em; margin: 1.1em 0; }
.article__body li + li { margin-top: 0.5em; }
.article__body strong { font-weight: 500; color: var(--sc-ink); }
.article__cta { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--sc-hairline); }
.article__cta p { margin: 0; font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 400; letter-spacing: -0.015em; }
.article__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: clamp(3rem, 6vw, 4rem); }
.article__nav a { text-decoration: none; font-size: 0.95rem; line-height: 1.35; }
.article__nav a:last-child { text-align: right; }
.article__nav span { display: block; margin-bottom: 0.4rem; font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sc-accent); }
.article__nav a:hover { color: var(--sc-accent); }

/* ----------------------------------------------------------------- footer */
.foot {
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--sc-hairline);
  display: flex; flex-wrap: wrap; gap: 1.5rem 3rem;
  justify-content: space-between; align-items: flex-end;
}
.foot p { margin: 0; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--sc-ink-soft); }
.foot a { color: var(--sc-ink-soft); }
.foot a:hover { color: var(--sc-ink); }
.foot nav { display: flex; gap: 1.5rem; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--sc-ink); color: var(--sc-accent-ink);
  padding: 0.7rem 1rem; z-index: 999;
}
.skip:focus { left: 1rem; top: 1rem; }

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

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .file__fill { transition: none; }
  html { scroll-behavior: auto; }
}