/* SKALA 01 — Operator Movement · components
   Surfaces: black header · acid/black hero · black strip · paper work ·
   black/acid campaign · paper approach · black tool · paper notes ·
   black about · acid contact · black footer. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
h1, h2, h3, p, ul, ol { margin: 0; }
[hidden] { display: none !important; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Focus: black on acid/paper, acid on black */
:focus-visible { outline: var(--focus-ring) solid var(--focus-color); outline-offset: var(--focus-offset); }
.section--ink, .site-header, .site-footer, .strip, .tool, .nav-panel, .poster, .campaign__media { --focus-color: var(--color-acid); }
.section--acid, .section--paper, .campaign__panel, .workboard, .draft { --focus-color: var(--color-ink); }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  padding: var(--space-3) var(--space-4); background: var(--color-acid); color: var(--color-ink);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--paper { background: var(--color-paper); color: var(--color-ink); }
.section--ink { background: var(--color-ink); color: var(--color-white); }
.section--acid { background: var(--color-acid); color: var(--color-ink); }

/* ---------- Type ---------- */
.brush { font-family: var(--font-brush); font-weight: 400; letter-spacing: 0; }
.eyebrow {
  font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: uppercase; margin-bottom: var(--space-4);
}
.eyebrow--acid { color: var(--color-acid); }
.section-title {
  font-size: var(--text-section); font-weight: 800; line-height: 1.02; letter-spacing: var(--tracking-tight);
  max-width: 16ch; text-wrap: balance;
}
.section-intro { margin-top: var(--space-5); max-width: 58ch; }
.section--ink .section-intro { color: var(--color-muted-light); }
.section--paper .section-intro, .section--paper .step__text { color: var(--color-muted-dark); }
.campaign-heading--contact { font-size: calc(var(--text-closing) * 1.25); }
.campaign-heading {
  font-size: var(--text-closing); font-weight: 900; line-height: 0.98; letter-spacing: var(--tracking-hero);
  max-width: 12ch; text-wrap: balance;
}
.arrow { display: inline-block; margin-left: 0.35em; transition: transform 180ms var(--ease-out); }
a:hover .arrow, button:hover .arrow { transform: translateX(3px); }

/* ---------- Controls ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 52px; padding: var(--space-3) var(--space-5);
  font-size: var(--text-ui); font-weight: 700; letter-spacing: 0.01em; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--radius-control); cursor: pointer;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
.button--acid { background: var(--button-fill); color: var(--button-text); border-color: var(--button-fill); }
.button--acid:hover { background: var(--color-white); border-color: var(--color-white); }
.button--ink { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); }
.button--ink:hover { background: #222; border-color: #222; }
.button--ghost { background: transparent; color: var(--color-white); border-color: var(--color-white); }
.button--ghost:hover { background: var(--color-white); color: var(--color-ink); }
.button--ghost-ink { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.button--ghost-ink:hover { background: var(--color-ink); color: var(--color-white); }
.button--small { min-height: 44px; padding-block: var(--space-2); }
.text-link, .text-button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  font-size: var(--text-ui); font-weight: 700; text-decoration: none;
  background: none; border: 0; cursor: pointer;
  box-shadow: inset 0 -2px 0 currentColor;
}
.text-link:hover, .text-button:hover { box-shadow: inset 0 -3px 0 currentColor; }

/* ---------- Wordmark ---------- */
.wordmark { display: inline-flex; align-items: center; flex: none; white-space: nowrap; text-decoration: none; color: var(--color-acid); line-height: 1; }
.wordmark__text { font-family: var(--font-wordmark); font-size: var(--wordmark-header); letter-spacing: -0.11em; transform: rotate(-2deg); display: inline-block; }
.wordmark__svg { display: none; width: 8.25em; height: 2.6em; font-size: 1rem; }
.no-brush .wordmark__text { display: none; }
.no-brush .wordmark__svg { display: block; }
/* A, L and the final A each tuck in under the letter before them (Oracle Brush sets them a touch wide). */
.wordmark__tuck { display: inline-block; margin-left: var(--tuck, -0.14em); }
.wordmark__tuck--l { margin-left: -0.08em; }
.wordmark__peaks { width: 0.9em; height: 0.54em; font-size: var(--wordmark-header); margin-left: 0.2em; flex: none; align-self: center; }
.site-footer .wordmark__peaks { display: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--header-h);
  background: var(--color-ink); color: var(--color-white);
  border-bottom: 1px solid transparent; transition: border-color 200ms;
}
.site-header.is-scrolled { border-bottom-color: rgba(255, 255, 255, 0.14); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.site-nav { display: flex; align-items: center; height: 100%; }
.nav-list { display: flex; align-items: center; gap: var(--space-6); }
.nav-link {
  display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-ui); font-weight: 600; text-decoration: none;
  box-shadow: inset 0 0 0 transparent; transition: box-shadow 150ms;
}
.nav-link:hover { box-shadow: inset 0 -2px 0 var(--color-acid); }
.nav-list__cta .button { min-height: 44px; padding-block: var(--space-2); }
.nav-toggle {
  display: none; align-items: center; gap: var(--space-2); min-width: 44px; min-height: 44px; padding: 0 var(--space-2);
  background: none; border: 0; cursor: pointer; font-weight: 700; font-size: var(--text-ui);
}
.nav-toggle__bars { display: inline-flex; flex-direction: column; gap: 5px; width: 24px; }
.nav-toggle__bars i { display: block; height: 3px; background: var(--color-acid); transition: transform 200ms var(--ease-out), opacity 200ms; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .nav-panel {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 40;
    background: var(--color-ink); padding: var(--space-7) var(--gutter);
    overflow-y: auto; display: none;
  }
  .nav-panel.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .nav-link { font-size: clamp(2rem, 1.5rem + 3vw, 2.75rem); font-weight: 800; letter-spacing: var(--tracking-tight); min-height: 56px; color: var(--color-white); }
  .nav-link:hover { color: var(--color-acid); box-shadow: none; }
  .nav-list__cta { margin-top: var(--space-5); }
  .nav-list__cta .button { min-height: 56px; font-size: 1.125rem; padding-inline: var(--space-6); }
}

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 50.3fr 49.7fr; min-height: 690px; background: var(--color-ink); }
.hero__copy {
  position: relative; background: var(--color-acid); color: var(--color-ink);
  display: flex; align-items: center;
  padding: var(--space-9) var(--space-7) var(--space-9) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
.hero__copy::after { /* paper grain, decorative, no pointer events, below content */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.09; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__copy-inner { position: relative; z-index: 1; max-width: 680px; }
.hero__title {
  font-size: var(--text-hero); font-weight: 900; line-height: var(--leading-tight); letter-spacing: var(--tracking-hero);
  margin-top: var(--space-2);
}
.hero__line { display: block; }
.hero__line--underlined { position: relative; display: inline-block; padding-bottom: 0.12em; }
.brush-underline { position: absolute; left: -0.04em; bottom: -0.08em; width: 104%; height: 0.26em; color: var(--color-ink); overflow: visible; }
.underline-stroke { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .underline-stroke { stroke-dashoffset: 1; }
.js .is-drawn .underline-stroke { stroke-dashoffset: 0; transition: stroke-dashoffset var(--duration-underline) var(--ease-out); }
.js .is-drawn .underline-stroke--2 { transition-delay: 120ms; }
.hero__lead { margin-top: var(--space-6); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); max-width: 34rem; font-weight: 500; }
.hero__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); }
.hero__note { margin-top: var(--space-5); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; }

.hero__media { position: relative; background: var(--color-ink); color: var(--color-acid); }
.media-slot { position: relative; overflow: hidden; }
.media-slot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-x, 60%) 40%; filter: grayscale(1) contrast(1.12); }
/* When a photograph is present the poster becomes a caption layer: no giant wordmark, no mark (the photos carry them). */
.media-slot__img ~ .poster { background: linear-gradient(180deg, rgba(5,5,5,0.08) 0%, rgba(5,5,5,0.18) 55%, rgba(5,5,5,0.78) 100%); }
.media-slot__img ~ .poster::after { opacity: 0.08; }
.media-slot__img ~ .poster .poster__wordmark, .media-slot__img ~ .poster .poster__peaks { display: none; }
.media-slot__img ~ .campaign__poster-copy { font-size: min(clamp(1.75rem, 0.8rem + 2.2vw, 3rem), calc(3.6vw - 6px)); max-width: 22ch; text-shadow: 0 2px 24px rgba(5,5,5,0.6); }
@media (min-width: 768px) and (max-width: 1023px) { .media-slot__img ~ .campaign__poster-copy { font-size: min(clamp(1.5rem, 0.6rem + 2.2vw, 2.25rem), calc(3.6vw - 6px)); } }   /* stays clear of the torn edge on tablets */
@media (min-width: 768px) { .media-slot__img ~ .campaign__poster-copy { max-width: none; white-space: nowrap; } }   /* one line from tablet up */
.campaign__media .media-slot__img { z-index: 0; }
.campaign__media::after { z-index: 2; }
.campaign__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,0) 45%, rgba(5,5,5,0.85) 100%); pointer-events: none; z-index: 1; }
.campaign__media:not(:has(.media-slot__img))::before { display: none; }
.poster {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: var(--space-8);
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(229, 255, 42, 0.12), transparent 60%),
    radial-gradient(90% 60% at 20% 90%, rgba(255, 255, 255, 0.06), transparent 60%);
}
.poster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}
.poster__wordmark { font-size: var(--wordmark-hero); line-height: 0.9; color: var(--color-acid); transform: rotate(-2.5deg); display: inline-block; align-self: flex-start; margin-left: -0.04em; }
.poster__peaks { width: clamp(64px, 5vw + 32px, 96px); height: auto; color: var(--color-acid); margin-top: var(--space-4); margin-left: var(--space-2); }
.poster__line { margin-top: auto; align-self: flex-end; text-align: right; color: var(--color-white); font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); line-height: 1.1; transform: rotate(-2deg); }

@media (max-width: 1023px) and (min-width: 768px) {
  .hero { grid-template-columns: 1fr 1fr; min-height: 0; }
  .hero__copy { padding: var(--space-8) var(--space-6) var(--space-8) var(--gutter); }
  .hero__title { font-size: 2.625rem; }
  .poster { padding: var(--space-6); }
  .poster__wordmark { font-size: clamp(5rem, 2rem + 6vw, 6.5rem); }
}
@media (max-width: 767px) {
  /* Board's mobile treatment: black field, white sans headline, acid button */
  .hero { grid-template-columns: 1fr; min-height: 0; background: var(--color-ink); color: var(--color-white); }
  .hero__copy { background: var(--color-ink); color: var(--color-white); padding: var(--space-7) var(--gutter) var(--space-6); --focus-color: var(--color-acid); }
  .hero__copy::after { display: none; }
  .hero__copy .eyebrow { color: var(--color-acid); }
  .brush-underline { color: var(--color-acid); }
  .hero__copy .button--ink { background: var(--color-acid); color: var(--color-ink); border-color: var(--color-acid); }
  .hero__note { color: var(--color-muted-light); }
  .hero__media { min-height: 200px; }
  .hero__media:has(.media-slot__img) { aspect-ratio: 4 / 3; min-height: 0; }
  .hero__media .media-slot__img { object-position: 50% 30%; filter: grayscale(1) contrast(1.1) brightness(0.85); }
  .poster { padding: var(--space-5) var(--gutter) calc(var(--space-5) + 34px); flex-direction: row; align-items: flex-end; justify-content: space-between; }   /* bottom clears the strip's top tear */
  .poster__wordmark { display: none; }   /* header already carries the wordmark on mobile */
  .poster__peaks { margin: 0; width: 56px; }
  .poster__line { margin: 0; font-size: 1.75rem; }
}

/* ---------- Campaign strip ---------- */
.strip { position: relative; background: var(--color-ink); color: var(--color-white); padding: var(--space-7) 0 calc(var(--space-7) + 28px); text-align: center; }
.strip__words { font-size: var(--text-campaign); line-height: 1.1; text-transform: uppercase; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 0.9em; }
.strip__note { margin-top: var(--space-4); color: var(--color-white); font-weight: 600; font-size: var(--text-ui); }
@media (max-width: 1023px) {
  .strip__words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.45em; row-gap: 0.1em; }
  .strip__words > span:nth-child(odd) { text-align: right; }
  .strip__words > span:nth-child(even) { text-align: left; }
}
@media (max-width: 479px) {
  /* Phones: "Momentum." no longer fits half the width, so the four words stack one per line. */
  .strip__words { grid-template-columns: 1fr; }
  .strip__words > span:nth-child(n) { text-align: center; }
}
.torn-edge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 28px; color: var(--color-ink); transform: scaleY(-1); z-index: 1; }
.strip + .section { position: relative; }

/* ---------- Torn paper (gated: everything here only applies under body.tears) ----------
   Each seam is an <i class="tear tear--top|bottom|hero"> inside the section that owns the sheet.
   ::before is the exposed white paper core, ::after is the sheet in --tear-color; both share
   a hand-shaped clip-path, and the parent's SVG filter (#tear-rough) roughens the cut. Remove
   the body class (or revert the commit) and the site is back to clean edges. */
.tears .tear { position: absolute; left: -1%; right: -1%; height: 52px; pointer-events: none; z-index: 5; --tear-color: var(--color-ink); filter: url(#tear-rough) drop-shadow(0 1px 2px rgba(5,5,5,0.28)); }
.tears .tear::before, .tears .tear::after { content: ""; position: absolute; inset: 0; }
.tears .tear::before { background: var(--color-white); }
.tears .tear::after { background: var(--tear-color); }
.tears .tear--bottom { bottom: -26px; }
.tears .tear--bottom::before, .tears .tear--bottom::after { clip-path: polygon(0.0% 0.0%, 100.0% 0.0%, 100.0% 60.8%, 98.5% 63.3%, 95.3% 59.5%, 93.6% 54.0%, 90.6% 57.0%, 88.9% 62.0%, 86.1% 73.4%, 85.4% 78.6%, 83.9% 87.8%, 82.7% 83.2%, 81.2% 78.6%, 78.6% 78.8%, 75.7% 80.7%, 72.3% 83.0%, 68.9% 75.4%, 67.5% 73.5%, 65.6% 72.3%, 63.2% 78.9%, 61.2% 74.5%, 58.8% 62.9%, 56.7% 62.9%, 53.8% 61.8%, 51.9% 62.4%, 50.0% 59.0%, 49.4% 59.2%, 48.1% 58.9%, 47.0% 54.0%, 46.2% 54.0%, 44.1% 57.3%, 43.5% 67.4%, 42.4% 70.7%, 40.1% 65.9%, 37.7% 62.4%, 34.4% 64.5%, 31.0% 58.3%, 30.3% 56.5%, 27.8% 57.1%, 24.9% 54.0%, 24.0% 54.0%, 22.6% 54.0%, 21.7% 54.0%, 18.9% 54.0%, 16.5% 54.0%, 14.5% 54.0%, 13.4% 54.0%, 11.1% 56.2%, 9.1% 54.0%, 7.2% 57.3%, 4.0% 54.0%, 1.9% 59.4%, 0.0% 55.8%); }
.tears .tear--bottom::before { transform: translateY(7px); }
.tears .tear--bottom.tear--alt::before, .tears .tear--bottom.tear--alt::after { clip-path: polygon(0.0% 0.0%, 100.0% 0.0%, 100.0% 92.7%, 99.1% 92.6%, 96.4% 88.7%, 94.9% 88.4%, 93.5% 86.2%, 91.9% 90.1%, 90.3% 91.9%, 87.4% 86.5%, 85.2% 79.2%, 83.9% 68.3%, 83.2% 69.1%, 82.3% 71.8%, 81.4% 72.1%, 80.2% 72.0%, 77.3% 73.0%, 75.8% 72.0%, 74.7% 71.7%, 73.6% 71.6%, 71.2% 76.5%, 69.4% 84.0%, 67.1% 82.4%, 64.5% 83.7%, 62.6% 89.6%, 61.7% 94.0%, 60.2% 94.0%, 57.8% 94.0%, 55.6% 92.9%, 54.0% 94.0%, 51.2% 94.0%, 49.6% 91.9%, 46.3% 94.0%, 44.0% 94.0%, 41.5% 92.3%, 39.3% 83.6%, 36.5% 76.3%, 35.7% 79.3%, 34.1% 75.3%, 31.5% 78.2%, 29.4% 83.2%, 27.6% 86.2%, 25.1% 87.9%, 24.2% 88.1%, 23.5% 92.1%, 21.7% 94.0%, 20.5% 94.0%, 18.6% 94.0%, 17.5% 94.0%, 16.5% 81.7%, 14.4% 73.4%, 12.6% 74.6%, 10.4% 70.9%, 9.5% 68.5%, 6.4% 64.7%, 3.2% 67.1%, 0.0% 63.5%); }
.tears .tear--top { top: -26px; }
.tears .tear--top::before, .tears .tear--top::after { clip-path: polygon(0.0% 19.4%, 2.5% 19.2%, 3.4% 12.6%, 5.7% 6.0%, 8.7% 6.0%, 11.6% 6.0%, 13.6% 7.8%, 16.0% 6.0%, 17.6% 6.0%, 19.7% 6.0%, 20.6% 6.0%, 23.1% 6.0%, 25.4% 6.0%, 26.8% 11.6%, 28.5% 6.0%, 31.1% 6.0%, 33.0% 6.2%, 36.2% 6.0%, 39.6% 6.0%, 42.5% 14.5%, 43.4% 24.9%, 44.2% 28.6%, 45.6% 29.5%, 47.2% 39.2%, 49.8% 46.0%, 52.7% 38.7%, 54.9% 35.5%, 57.3% 29.5%, 59.5% 22.6%, 60.2% 23.9%, 62.2% 33.3%, 63.4% 45.3%, 65.2% 46.0%, 65.8% 45.4%, 68.3% 46.0%, 71.4% 46.0%, 72.2% 44.8%, 74.4% 33.7%, 75.1% 27.5%, 76.7% 28.0%, 77.7% 26.0%, 80.7% 22.1%, 83.4% 25.5%, 86.5% 17.5%, 87.7% 7.6%, 90.3% 11.0%, 92.9% 7.7%, 94.9% 7.0%, 98.1% 6.0%, 100.0% 6.0%, 100.0% 100.0%, 0.0% 100.0%); }
.tears .tear--top::before { transform: translateY(-7px); }
.tears .tear--top.tear--alt::before, .tears .tear--top.tear--alt::after { clip-path: polygon(0.0% 16.0%, 2.3% 17.7%, 5.4% 24.3%, 7.3% 18.0%, 9.9% 17.2%, 13.1% 12.8%, 15.2% 6.0%, 17.8% 6.0%, 20.5% 6.0%, 23.5% 6.0%, 24.2% 10.0%, 25.2% 8.2%, 28.6% 13.4%, 31.3% 8.3%, 32.7% 10.2%, 35.3% 6.9%, 36.4% 8.8%, 38.0% 15.1%, 39.9% 16.2%, 41.1% 17.5%, 42.1% 15.6%, 44.1% 23.7%, 46.5% 28.5%, 48.0% 30.8%, 50.5% 32.5%, 53.8% 30.2%, 54.6% 32.1%, 55.9% 32.6%, 56.8% 33.6%, 59.3% 37.7%, 61.0% 37.5%, 62.9% 37.3%, 64.2% 38.5%, 66.9% 35.0%, 69.7% 28.2%, 71.5% 19.3%, 74.4% 10.3%, 75.7% 17.6%, 77.2% 19.3%, 80.5% 25.2%, 81.8% 29.2%, 82.8% 30.3%, 83.5% 31.1%, 85.9% 25.4%, 88.8% 34.3%, 89.6% 40.3%, 91.5% 39.3%, 93.2% 39.9%, 94.7% 34.3%, 96.0% 31.8%, 97.7% 32.7%, 98.7% 28.5%, 100.0% 23.6%, 100.0% 100.0%, 0.0% 100.0%); }
.tears .tear--top.tear--alt2::before, .tears .tear--top.tear--alt2::after { clip-path: polygon(0.0% 36.9%, 1.1% 32.2%, 4.0% 34.9%, 5.6% 37.6%, 8.6% 41.1%, 11.4% 42.0%, 13.6% 46.0%, 15.8% 46.0%, 16.5% 46.0%, 19.6% 43.0%, 22.5% 42.8%, 24.1% 46.0%, 24.9% 46.0%, 26.7% 46.0%, 29.2% 42.1%, 32.1% 35.5%, 33.4% 40.3%, 34.9% 38.2%, 36.2% 41.6%, 37.9% 46.0%, 39.0% 46.0%, 42.1% 46.0%, 43.3% 46.0%, 45.4% 46.0%, 46.2% 46.0%, 48.9% 46.0%, 49.8% 46.0%, 50.6% 46.0%, 52.7% 46.0%, 55.8% 42.8%, 58.2% 38.2%, 60.9% 36.4%, 62.7% 37.1%, 66.1% 28.5%, 67.3% 21.8%, 68.0% 10.9%, 70.2% 7.0%, 72.2% 10.7%, 73.4% 6.0%, 74.2% 6.0%, 76.5% 6.0%, 77.8% 6.0%, 78.8% 6.0%, 82.1% 6.0%, 85.4% 11.4%, 86.5% 16.4%, 87.1% 24.3%, 89.8% 36.5%, 91.7% 43.1%, 94.4% 46.0%, 95.1% 46.0%, 98.3% 46.0%, 100.0% 46.0%, 100.0% 100.0%, 0.0% 100.0%); }
.tears .section--acid .tear { --tear-color: var(--color-acid); filter: url(#tear-rough); }  /* no drop shadow: on acid the sheet's flat inner edge would show as a faint second line */

/* Hero: the photograph runs under the whole hero and the acid copy sheet is cut over it, its torn edge
   leaning with the typography — wide beside the headline, narrowing where the copy gets shorter. */
.hero { position: relative; }
.tears .hero__media { position: absolute; inset: 0; overflow: hidden; }
.tears .hero__copy { background: transparent; position: relative; z-index: 4; }
.tears .hero__copy::after { display: none; }   /* the grain lives on the sheet */
.tears .tear--hero { left: 0; right: auto; top: 0; bottom: 0; height: auto; width: 62%; z-index: 3; --tear-color: var(--color-acid); }
.tears .tear--hero::before, .tears .tear--hero::after { clip-path: polygon(0.0% 0.0%, 83.9% 0.0%, 84.0% 1.1%, 84.9% 2.2%, 83.1% 3.3%, 82.7% 4.4%, 83.4% 5.6%, 83.9% 6.7%, 83.8% 7.8%, 83.5% 8.9%, 83.8% 10.0%, 82.8% 11.1%, 84.4% 12.2%, 86.3% 13.3%, 85.0% 14.4%, 84.5% 15.6%, 85.5% 16.7%, 84.3% 17.8%, 84.9% 18.9%, 84.2% 20.0%, 84.6% 21.1%, 85.2% 22.2%, 85.4% 23.3%, 85.0% 24.4%, 85.3% 25.6%, 85.2% 26.7%, 85.7% 27.8%, 86.0% 28.9%, 87.0% 30.0%, 85.1% 31.1%, 86.4% 32.2%, 86.2% 33.3%, 85.7% 34.4%, 87.9% 35.6%, 86.8% 36.7%, 86.6% 37.8%, 86.3% 38.9%, 85.9% 40.0%, 86.3% 41.1%, 86.3% 42.2%, 87.4% 43.3%, 87.5% 44.4%, 86.4% 45.6%, 86.7% 46.7%, 86.4% 47.8%, 86.0% 48.9%, 85.1% 50.0%, 86.4% 51.1%, 87.0% 52.2%, 86.3% 53.3%, 86.2% 54.4%, 86.0% 55.6%, 85.9% 56.7%, 86.7% 57.8%, 86.7% 58.9%, 84.5% 60.0%, 84.8% 61.1%, 85.0% 62.2%, 83.2% 63.3%, 83.6% 64.4%, 82.1% 65.6%, 83.5% 66.7%, 83.6% 67.8%, 82.1% 68.9%, 81.2% 70.0%, 81.2% 71.1%, 81.7% 72.2%, 79.9% 73.3%, 80.2% 74.4%, 79.3% 75.6%, 79.3% 76.7%, 78.5% 77.8%, 79.6% 78.9%, 80.0% 80.0%, 77.6% 81.1%, 78.2% 82.2%, 76.2% 83.3%, 77.3% 84.4%, 77.1% 85.6%, 77.2% 86.7%, 74.9% 87.8%, 75.3% 88.9%, 76.2% 90.0%, 75.9% 91.1%, 75.8% 92.2%, 73.6% 93.3%, 74.6% 94.4%, 74.4% 95.6%, 73.5% 96.7%, 73.7% 97.8%, 71.9% 98.9%, 71.2% 100.0%, 0.0% 100.0%); }
.tears .tear--hero::before, .tears .tear--hero::after { left: -16px; top: -12px; bottom: -12px; }   /* flat edges sit outside the clipped slot, so the filter never exposes photo along them */
/* The copy panel wears a 9% multiply grain; the tear sheet carries the same grain baked into its background so the two greens match at the seam. */
.tears .tear--hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.054 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); background-color: var(--tear-color); background-blend-mode: multiply; }
.tears .tear--hero::before { transform: translateX(6px); }
@media (max-width: 1023px) and (min-width: 768px) {
  /* Two equal columns here, so the copy runs wider: the tear gives it more room. */
  .tears .tear--hero::before, .tears .tear--hero::after { clip-path: polygon(0.0% 0.0%, 88.7% 0.0%, 88.9% 1.1%, 89.7% 2.2%, 87.9% 3.3%, 87.5% 4.4%, 88.1% 5.6%, 88.6% 6.7%, 88.5% 7.8%, 88.3% 8.9%, 88.5% 10.0%, 87.4% 11.1%, 89.0% 12.2%, 91.0% 13.3%, 89.7% 14.4%, 89.1% 15.6%, 90.0% 16.7%, 88.8% 17.8%, 89.5% 18.9%, 88.7% 20.0%, 89.0% 21.1%, 89.6% 22.2%, 89.9% 23.3%, 89.4% 24.4%, 89.8% 25.6%, 89.5% 26.7%, 90.1% 27.8%, 90.4% 28.9%, 91.3% 30.0%, 89.4% 31.1%, 90.6% 32.2%, 90.6% 33.3%, 89.9% 34.4%, 92.1% 35.6%, 91.0% 36.7%, 90.8% 37.8%, 90.5% 38.9%, 90.0% 40.0%, 90.4% 41.1%, 90.4% 42.2%, 91.5% 43.3%, 91.7% 44.4%, 90.5% 45.6%, 90.7% 46.7%, 90.6% 47.8%, 90.0% 48.9%, 89.1% 50.0%, 90.3% 51.1%, 91.0% 52.2%, 90.4% 53.3%, 90.1% 54.4%, 89.9% 55.6%, 89.7% 56.7%, 90.6% 57.8%, 90.6% 58.9%, 88.5% 60.0%, 88.9% 61.1%, 89.0% 62.2%, 87.4% 63.3%, 88.0% 64.4%, 86.4% 65.6%, 87.9% 66.7%, 88.1% 67.8%, 86.7% 68.9%, 85.8% 70.0%, 85.9% 71.1%, 86.5% 72.2%, 84.8% 73.3%, 85.1% 74.4%, 84.3% 75.6%, 84.3% 76.7%, 83.8% 77.8%, 84.8% 78.9%, 85.3% 80.0%, 82.9% 81.1%, 83.6% 82.2%, 81.8% 83.3%, 82.9% 84.4%, 82.7% 85.6%, 82.8% 86.7%, 80.6% 87.8%, 81.1% 88.9%, 82.1% 90.0%, 81.8% 91.1%, 81.7% 92.2%, 79.7% 93.3%, 80.8% 94.4%, 80.5% 95.6%, 79.7% 96.7%, 80.0% 97.8%, 78.3% 98.9%, 77.7% 100.0%, 0.0% 100.0%); }
}
@media (max-width: 767px) {
  /* Stacked hero: the copy panel is ink here, so the tear becomes a horizontal rip over the top of the photo. */
  .tears .hero__media { position: relative; inset: auto; }
  .tears .hero__copy { background: var(--color-ink); }
  .tears .tear--hero { left: -1%; right: -1%; top: -1px; bottom: auto; width: auto; height: 40px; --tear-color: var(--color-ink); }
  .tears .tear--hero::before, .tears .tear--hero::after { clip-path: polygon(0.0% 0.0%, 100.0% 0.0%, 100.0% 49.2%, 98.0% 40.5%, 95.8% 36.7%, 92.7% 36.1%, 89.3% 35.0%, 87.9% 33.6%, 84.7% 36.1%, 81.4% 26.7%, 79.5% 23.9%, 76.8% 25.7%, 75.0% 21.9%, 72.9% 20.0%, 70.8% 20.0%, 67.8% 24.1%, 65.2% 27.5%, 63.0% 20.0%, 61.5% 20.2%, 58.6% 20.0%, 57.1% 20.0%, 56.2% 20.0%, 55.0% 27.1%, 54.0% 23.2%, 50.9% 20.0%, 50.3% 28.6%, 46.9% 29.1%, 44.3% 21.5%, 41.3% 28.1%, 40.5% 26.2%, 38.7% 20.0%, 37.9% 20.0%, 34.5% 21.7%, 32.4% 24.7%, 29.6% 22.4%, 27.7% 26.6%, 26.7% 28.7%, 26.1% 20.0%, 24.2% 20.1%, 21.2% 20.0%, 20.3% 21.1%, 17.8% 20.0%, 16.4% 21.4%, 13.3% 22.5%, 11.5% 20.0%, 10.5% 26.1%, 7.5% 32.9%, 6.5% 39.3%, 3.1% 37.4%, 0.8% 38.0%, 0.0% 37.1%); }
  .tears .tear--hero::before { transform: translateY(5px); }
}

/* Campaign: the photograph runs under the whole block and the acid panel is cut over it, its torn edge
   tracking the stagger of the stacked words. */
.tears .campaign { position: relative; min-height: clamp(420px, 44vw, 650px); }   /* keeps the block's height now the line is scaled to the panel */
.tears .campaign__media { position: absolute; inset: 0; padding-left: var(--gutter); }   /* photo copy sits at the page gutter, not the container edge */
.tears .campaign__panel { background: transparent; grid-column: 2; position: relative; z-index: 4; container-type: inline-size; padding-left: var(--space-5); padding-right: var(--gutter); }   /* the torn edge is the panel's visual left edge, so little padding is needed there */
.tears .campaign__media .media-slot__img { left: -18%; }   /* slide the photo left so the team, not just the leader, sits in the visible half */
.tears .tear--campaign { right: 0; left: auto; top: 0; bottom: 0; height: auto; width: 50%; z-index: 3; --tear-color: var(--color-acid); filter: url(#tear-rough); }
.tears .tear--campaign::before, .tears .tear--campaign::after { right: -16px; left: 0; top: -12px; bottom: -12px; clip-path: polygon(100.0% 0.0%, 14.1% 0.0%, 13.0% 1.1%, 13.7% 2.2%, 15.6% 3.3%, 14.8% 4.4%, 14.3% 5.6%, 14.5% 6.7%, 15.8% 7.8%, 14.4% 8.9%, 16.1% 10.0%, 15.9% 11.1%, 16.3% 12.2%, 15.3% 13.3%, 14.7% 14.4%, 14.9% 15.6%, 16.0% 16.7%, 16.0% 17.8%, 17.6% 18.9%, 17.2% 20.0%, 16.0% 21.1%, 14.9% 22.2%, 17.1% 23.3%, 15.8% 24.4%, 16.8% 25.6%, 16.8% 26.7%, 17.1% 27.8%, 17.2% 28.9%, 17.3% 30.0%, 17.7% 31.1%, 19.1% 32.2%, 18.9% 33.3%, 19.0% 34.4%, 19.4% 35.6%, 19.0% 36.7%, 18.6% 37.8%, 19.3% 38.9%, 18.2% 40.0%, 18.6% 41.1%, 18.8% 42.2%, 19.9% 43.3%, 18.9% 44.4%, 19.5% 45.6%, 19.3% 46.7%, 21.1% 47.8%, 20.3% 48.9%, 20.4% 50.0%, 19.5% 51.1%, 20.8% 52.2%, 21.8% 53.3%, 20.5% 54.4%, 21.0% 55.6%, 22.0% 56.7%, 22.4% 57.8%, 22.5% 58.9%, 21.5% 60.0%, 22.0% 61.1%, 21.4% 62.2%, 21.5% 63.3%, 22.2% 64.4%, 20.8% 65.6%, 21.8% 66.7%, 21.9% 67.8%, 21.4% 68.9%, 22.1% 70.0%, 22.4% 71.1%, 22.1% 72.2%, 21.3% 73.3%, 22.6% 74.4%, 23.0% 75.6%, 23.8% 76.7%, 22.4% 77.8%, 23.3% 78.9%, 23.3% 80.0%, 22.9% 81.1%, 22.2% 82.2%, 23.7% 83.3%, 22.6% 84.4%, 23.6% 85.6%, 25.3% 86.7%, 24.5% 87.8%, 24.7% 88.9%, 24.5% 90.0%, 24.3% 91.1%, 24.6% 92.2%, 25.4% 93.3%, 25.0% 94.4%, 24.2% 95.6%, 25.1% 96.7%, 25.1% 97.8%, 25.5% 98.9%, 26.9% 100.0%, 100.0% 100.0%); }
.tears .tear--campaign::before { transform: translateX(-6px); }
@media (max-width: 767px) {
  /* Stacked campaign: the panel sits under the photo, so the rip runs along the photo's bottom edge. */
  .tears .campaign__media { position: relative; inset: auto; }
  .tears .campaign__media .media-slot__img { left: 0; }
  .tears .campaign__panel { background: var(--color-acid); grid-column: auto; }
  .tears .tear--campaign { left: -1%; right: -1%; top: auto; bottom: -1px; width: auto; height: 40px; }
  .tears .tear--campaign::before, .tears .tear--campaign::after { right: 0; clip-path: polygon(0.0% 68.8%, 1.5% 61.9%, 4.2% 58.1%, 5.1% 55.7%, 6.5% 65.9%, 8.2% 68.5%, 11.3% 77.3%, 12.9% 80.0%, 15.1% 80.0%, 16.0% 79.8%, 17.1% 80.0%, 19.6% 80.0%, 21.8% 78.9%, 24.4% 79.5%, 26.2% 71.9%, 28.2% 77.3%, 29.4% 72.9%, 30.6% 76.4%, 31.3% 77.0%, 32.4% 80.0%, 34.3% 80.0%, 36.5% 80.0%, 39.2% 80.0%, 41.6% 80.0%, 44.5% 74.2%, 47.1% 67.0%, 47.8% 63.3%, 50.9% 66.3%, 52.9% 73.5%, 54.7% 72.2%, 55.5% 79.5%, 56.5% 80.0%, 57.3% 80.0%, 58.2% 78.6%, 61.0% 69.6%, 62.6% 64.5%, 65.4% 58.5%, 68.8% 47.5%, 71.1% 46.4%, 72.3% 44.2%, 73.3% 48.8%, 76.6% 50.2%, 78.6% 48.9%, 80.2% 48.3%, 83.4% 49.3%, 84.5% 49.3%, 87.6% 52.4%, 88.2% 48.5%, 90.0% 46.4%, 91.6% 36.2%, 94.9% 30.0%, 96.8% 30.0%, 98.9% 36.6%, 100.0% 31.5%, 100.0% 100.0%, 0.0% 100.0%); }
  .tears .tear--campaign::before { transform: translateY(-5px); }
}

/* The strip's old serrated edge gives way to the tear. */
.tears .torn-edge { display: none; }
.tears .section { position: relative; }

/* Paper stock: a whisper of grain on the paper sections, same recipe as the hero copy. */
.tears .section--paper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.07; mix-blend-mode: multiply; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print { .tears .tear, .tears .section--paper::after { display: none !important; } }

/* ---------- The work ---------- */
.work__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-8) var(--space-9); align-items: start; }
.work__intro { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
.work__focus { margin-top: var(--space-5); font-weight: 800; font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem); letter-spacing: var(--tracking-tight); line-height: 1.1; }
@media (max-width: 1023px) { .work__focus { margin-bottom: 0; } }
.service-list { border-top: 3px solid var(--color-ink); }
.service-row { border-bottom: 2px solid var(--color-ink); }
.service-row__heading { margin: 0; font: inherit; }
.service-row__toggle {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-5);
  width: 100%; min-height: 96px; padding: var(--space-5) var(--space-2); text-align: left;
  background: none; border: 0; cursor: pointer;
}
@media (hover: hover) { .service-row__toggle:hover .service-row__tag { background: var(--color-acid); color: var(--color-ink); } }
.service-row__toggle:focus-visible .service-row__tag { background: var(--color-acid); color: var(--color-ink); }
/* While the first row tugs, every other tag stays dark so the flash is the only thing lit */
.service-list.is-nudging .service-row:not(.is-nudged) .service-row__tag { background: var(--color-ink) !important; color: var(--color-acid) !important; }
.service-row__tag { transition: background-color 150ms, color 150ms; }
.service-row__tag { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; padding: 8px 6px; font-size: 1.0625rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; background: var(--color-ink); color: var(--color-acid); transform: rotate(-2deg); }
.service-row.is-open .service-row__tag { background: var(--color-acid); color: var(--color-ink); }
.service-row__body { display: flex; flex-direction: column; gap: var(--space-1); }
.service-row__name { font-size: var(--text-subhead); font-weight: 800; letter-spacing: var(--tracking-tight); }
.service-row__summary { color: var(--color-ink); font-size: var(--text-body); font-weight: 500; max-width: 60ch; text-wrap: balance; }
.service-row__icon { position: relative; width: 44px; height: 44px; flex: none; }
.service-row__icon::before, .service-row__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--color-ink); transition: transform 200ms var(--ease-out);
}
.service-row__icon::before { width: 22px; height: 3px; transform: translate(-50%, -50%); }
.service-row__icon::after { width: 3px; height: 22px; transform: translate(-50%, -50%); }
.service-row__toggle[aria-expanded="true"] .service-row__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
/* First landing on the section: the Store Operations row tugs down and yo-yos twice, a hint that rows open. */
@keyframes row-tug { 0% { transform: translateY(0); } 22% { transform: translateY(18px); } 44% { transform: translateY(0); } 62% { transform: translateY(10px); } 80% { transform: translateY(0); } 100% { transform: translateY(0); } }
@keyframes tag-flash { 0%, 100% { background: var(--color-ink); color: var(--color-acid); } 20%, 75% { background: var(--color-acid); color: var(--color-ink); } }
.service-row.is-nudged .service-row__toggle { animation: row-tug 1100ms var(--ease-out) both; }
.service-row.is-nudged .service-row__tag { animation: tag-flash 1100ms var(--ease-out) both; }
.service-row__panel { display: grid; grid-template-columns: 1fr; gap: var(--space-5) var(--space-6); padding: 0 var(--space-2) var(--space-7) calc(4.5rem + var(--space-5)); }
.service-row__col > p:not(.service-row__label) { color: var(--color-ink); }
.service-row__label { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: var(--space-3); background: var(--color-acid); display: inline-block; padding: 2px 6px; }
.service-row__list { columns: 2; column-gap: var(--space-5); font-size: 0.9375rem; line-height: 1.45; color: var(--color-ink); }
.service-row__list li { break-inside: avoid; padding: 3px 0 3px 14px; position: relative; }
.service-row__list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 7px; height: 3px; background: var(--color-ink); }
.service-row__label--quiet { background: transparent; border: 1.5px solid var(--color-ink); padding: 1px 6px; }
.service-row__note { font-size: 0.875rem; line-height: 1.5; color: var(--color-muted-dark); max-width: 56ch; }
.service-row__note + .service-row__note { margin-top: var(--space-2); }
.service-row__col { max-width: 56ch; }
.service-row__col--build { max-width: none; }
.service-row__list { max-width: 64ch; }
@media (max-width: 767px) { .service-row__list { columns: 1; } .service-row__panel { padding-bottom: var(--space-6); } }

@media (max-width: 1023px) {
  .work__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .work__intro { position: static; }
}
@media (max-width: 767px) {
  .service-row__toggle { grid-template-columns: auto 1fr auto; gap: var(--space-4); min-height: 80px; padding-inline: 0; }
  .service-row__panel { padding-left: 0; padding-right: 0; }
}

/* ---------- Campaign poster ---------- */
.campaign { display: grid; grid-template-columns: 7fr 5fr; min-height: 420px; }
.campaign__media { background: var(--color-ink); color: var(--color-white); display: flex; align-items: flex-end; padding: var(--space-8) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) var(--space-7); min-height: 420px; }
.campaign__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.campaign__poster-copy {
  position: relative; z-index: 3;
  font-family: "Inter", "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", var(--font-sans);
  font-weight: 900; font-stretch: condensed; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.9;
  font-size: clamp(2.75rem, 1.5rem + 5vw, 6rem); max-width: 10ch; color: var(--color-white);
}
.campaign__panel {
  position: relative; background: var(--color-acid); color: var(--color-ink);
  display: flex; flex-direction: column; justify-content: center; padding: var(--space-8) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) var(--space-8) var(--space-8);
}
/* Campaign line: the wordmark face, stacked one word per line and staggered like a hand-lettered poster. */
.campaign__line { font-family: var(--font-wordmark); text-transform: uppercase; letter-spacing: -0.06em; font-size: var(--campaign-mark, clamp(2.75rem, 0.6rem + 5.3vw, 5.6rem)); line-height: 0.95; transform: rotate(-2deg); display: flex; flex-direction: column; align-items: flex-start; }
/* The block sits a quarter of the panel in from its left edge; the type scales with the panel so the shifted block always fits. */
@media (min-width: 1024px) { .campaign__line { margin-left: 25%; font-size: min(var(--campaign-mark, clamp(2.75rem, 0.6rem + 5.3vw, 5.6rem)), 12.3cqi); } }
@media (min-width: 768px) and (max-width: 1023px) { .campaign__line { margin-left: 12%; font-size: min(var(--campaign-mark, clamp(2.75rem, 0.6rem + 5.3vw, 5.6rem)), 14.5cqi); } }   /* tablet panel is narrow: half the shift */
.campaign__word { display: block; white-space: nowrap; }
.campaign__word:nth-child(2) { margin-left: 0.22em; }
.campaign__word:nth-child(3) { margin-left: 0.44em; }
.campaign__word:nth-child(4) { margin-left: 0.66em; }
.campaign__word:nth-child(5) { margin-left: 0.88em; }
.campaign__word--underlined { position: relative; padding-bottom: 0.14em; }
.campaign__underline { position: absolute; left: -0.02em; bottom: -0.06em; width: 100%; height: 0.24em; overflow: visible; }
.campaign__smile { width: 84px; height: 50px; margin-top: var(--space-6); align-self: flex-end; transform: rotate(4deg); }
@media (max-width: 767px) {
  .campaign { grid-template-columns: 1fr; min-height: 0; }
  .campaign__media { min-height: 260px; padding: var(--space-6) var(--gutter); }
  .campaign__panel { padding: var(--space-7) var(--gutter); }
  .campaign__smile { width: 56px; height: 34px; }
}

/* ---------- Approach ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: var(--space-8); border-top: 3px solid var(--color-ink); counter-reset: step; }
.step { padding: var(--space-5) var(--space-5) var(--space-6) 0; border-right: 2px solid var(--color-ink); margin-right: var(--space-5); }
.step:last-child { border-right: 0; margin-right: 0; }
.step__num { display: inline-block; font-size: 1.75rem; line-height: 1; background: var(--color-ink); color: var(--color-acid); padding: 6px 12px 4px; transform: rotate(-3deg); }
.step__title { margin-top: var(--space-4); font-size: var(--text-subhead); font-weight: 800; letter-spacing: var(--tracking-tight); }
.step__text { margin-top: var(--space-2); font-size: 1rem; }
@media (max-width: 1023px) {
  .steps { grid-template-columns: 1fr; border-top: 0; margin-top: var(--space-7); }
  .step { display: grid; grid-template-columns: 56px 1fr; column-gap: var(--space-4); align-items: start; border-right: 0; border-top: 2px solid var(--color-ink); margin: 0; padding: var(--space-5) 0; }
  .step__num { grid-row: 1 / span 2; margin-top: 4px; }
  .step__title { margin-top: 0; }
  .step__text { grid-column: 2; }
  .step:last-child { border-bottom: 2px solid var(--color-ink); }
}

/* ---------- Operating tool ---------- */
.tool__intro { max-width: 720px; }
.workboard { margin-top: var(--space-8); background: var(--color-paper); color: var(--color-ink); padding: var(--space-5) var(--space-6) var(--space-6); border: 3px solid var(--color-acid); }
.workboard__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); }
.workboard__head .eyebrow { margin: 0; color: var(--color-ink); background: var(--color-acid); padding: 4px 8px; }
.workboard__reset { font: inherit; font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted-dark); background: none; border: 0; padding: 4px 0; cursor: pointer; box-shadow: inset 0 -1.5px 0 currentColor; }
.workboard__reset:hover, .workboard__reset:focus-visible { color: var(--color-ink); }
.workboard__table { width: 100%; margin-top: var(--space-5); border-collapse: collapse; font-size: 1rem; }
@media (min-width: 768px) { .workboard__table { table-layout: fixed; } .workboard__table thead th:nth-child(1) { width: 3.5rem; } .workboard__table thead th:nth-child(3) { width: 12rem; } }   /* status column stays put whatever the action text */
.workboard__table th, .workboard__table td { text-align: left; padding: var(--space-4) var(--space-3); vertical-align: middle; border-top: 2px solid var(--color-ink); }
.workboard__table thead th { font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; border-top: 0; padding-top: 0; color: var(--color-muted-dark); }
.workboard__table tbody th { font-weight: 800; }
.workboard__table tbody th { width: 3.5rem; font-size: 1.125rem; }
.workboard__table td:nth-child(2) { color: var(--color-ink); }
.status-btn {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; min-width: 128px; padding: var(--space-2) var(--space-4);
  background: var(--color-white); border: 2px solid var(--color-ink); cursor: pointer; font-weight: 700; font-size: var(--text-ui); white-space: nowrap;
}
.status-btn:hover { background: var(--color-acid); }
.status-btn__glyph { width: 14px; height: 14px; border: 2px solid var(--color-ink); border-radius: 50%; flex: none; }
.status-btn[data-status="building"] .status-btn__glyph { background: transparent; }
.status-btn[data-status="in-use"] { background: var(--color-acid); }
.status-btn[data-status="in-use"] .status-btn__glyph { background: var(--color-ink); }
.workboard__live { margin-top: var(--space-4); min-height: 1.5em; font-size: 0.9375rem; font-weight: 600; color: var(--color-muted-dark); }
.tool__caption { margin-top: var(--space-5); color: var(--color-muted-light); font-size: 0.9375rem; }
@media (max-width: 767px) {
  .workboard { padding: var(--space-4); margin-inline: 0; }
  .workboard__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .workboard__table, .workboard__table tbody, .workboard__table tr, .workboard__table th, .workboard__table td { display: block; }
  .workboard__table tr { border-top: 2px solid var(--color-ink); padding: var(--space-4) 0; }
  .workboard__table th, .workboard__table td { border: 0; padding: 4px 0; }
  .workboard__table tbody th { width: auto; }
  .workboard__table tbody th::before { content: "Step "; }
  .workboard__table td:nth-child(3) { padding-top: var(--space-3); }
}

/* ---------- Editorial figures (approach, field notes) ---------- */
.figure { position: relative; margin: 0; overflow: hidden; background: var(--color-ink); }
.figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); display: block; }
.figure--tall { aspect-ratio: 4 / 3; }
.figure--wide { aspect-ratio: 3 / 2; }
.figure--portrait { aspect-ratio: 2 / 3; }
.figure__caption { position: absolute; left: 0; bottom: 0; margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-acid); color: var(--color-ink); font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
/* How We Work mirrors What We Do, flipped: the four principle rows sit left, the copy right. */
.approach__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-8) var(--space-9); align-items: start; }
.approach__intro { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + var(--space-6)); }
.approach__intro .section-intro + .section-intro { margin-top: var(--space-4); }
.approach__close { margin-top: var(--space-5); font-weight: 800; font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem); letter-spacing: var(--tracking-tight); line-height: 1.1; max-width: 16ch; text-wrap: balance; }
.approach__principles { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--color-ink); }
.approach__principle { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-5); min-height: 96px; padding: var(--space-5) var(--space-2); border-bottom: 2px solid var(--color-ink); }
.approach__principle-num { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; padding: 8px 6px; font-size: 1.0625rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; background: transparent; border: 1px solid var(--color-ink); color: var(--color-ink); transform: rotate(-2deg); }
.approach__principle-body { display: flex; flex-direction: column; gap: var(--space-1); }
.approach__principle-title { margin: 0; font-size: var(--text-subhead); font-weight: 800; letter-spacing: var(--tracking-tight); }
.approach__principle-text { margin: 0; color: var(--color-ink); font-size: var(--text-body); font-weight: 500; max-width: 60ch; text-wrap: balance; }
@media (max-width: 1023px) { .approach__intro, .approach__principles { grid-column: auto; grid-row: auto; } .approach__intro { position: static; } }
.tool__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-8) var(--space-9); align-items: end; }
.tool__grid .figure { border: 3px solid var(--color-acid); }
/* Expansion Ready on desktop: copy beside the five SCALE tiles, board full width below, so the section fits a laptop window. */
@media (min-width: 1024px) {
  .ready .container { display: grid; grid-template-columns: 4fr 8fr; grid-template-areas: "copy ladder" "board board"; column-gap: var(--space-8); row-gap: var(--space-6); align-items: start; }
  .ready .tool__grid { display: contents; }
  .ready .tool__intro { grid-area: copy; max-width: none; }
  .ready .ladder { grid-area: ladder; margin-top: 0; align-self: start; }
  .ready .ladder__step { padding: var(--space-4) var(--space-3) var(--space-5) 0; margin-right: var(--space-3); }
  .ready .ladder__name { margin-top: var(--space-3); font-size: 1rem; }
  .ready .ladder__text { font-size: 0.875rem; line-height: 1.4; }
  .ready .ladder__step--ready:not(.is-muted), .ready .ladder__step.is-active { padding-left: var(--space-3); margin-left: calc(-1 * var(--space-3)); }
  .ready .workboard { grid-area: board; margin-top: 0; padding: var(--space-4) var(--space-5) var(--space-5); }
  .ready .workboard__table { margin-top: var(--space-4); }
  .ready .workboard__table th, .ready .workboard__table td { padding: var(--space-3) var(--space-3); }
  .ready .workboard__table thead th { padding-top: 0; }
  .ready .status-btn { min-height: 40px; }
  .ready.section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .ready .section-title { font-size: calc(var(--text-section) * 0.9); }
  .ready .workboard__foot { margin-top: var(--space-4); }
  .ready .board-stamp { margin-block: 0; }
}
.notes__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-8) var(--space-9); align-items: start; }
.notes__grid .figure img { object-position: 50% 42%; }
@media (max-width: 1023px) { .approach__grid, .tool__grid { grid-template-columns: 1fr; gap: var(--space-7); } }
/* The playbook band keeps two columns down to 900px: it fits, and the artifact frame is often narrower than the window. */
@media (max-width: 1023px) and (min-width: 900px) { .notes__grid { gap: var(--space-7) var(--space-7); } }
@media (max-width: 899px) { .notes__grid { grid-template-columns: 1fr; gap: var(--space-6); } .notes__grid .note-lines { margin-top: 0; } }

/* ---------- Expansion Ready: readiness ladder + stamp ---------- */
.ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: var(--space-8); border-top: 2px solid rgba(255,255,255,0.35); }
.ladder__step { padding: var(--space-5) var(--space-4) var(--space-6) 0; margin-right: var(--space-4); border-right: 1px solid rgba(255,255,255,0.25); }
.ladder__step:last-child { border-right: 0; margin-right: 0; }
.ladder__num { display: inline-block; font-size: 1rem; font-weight: 800; line-height: 1; min-width: 1.5em; text-align: center; letter-spacing: var(--tracking-label); border: 1.5px solid var(--color-muted-light); color: var(--color-muted-light); padding: 4px 8px; }
.ladder__name { margin-top: var(--space-4); font-size: 1.125rem; font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--color-white); }
.ladder__text { margin-top: var(--space-2); font-size: 0.9375rem; line-height: 1.45; color: var(--color-muted-light); }
.ladder__step { cursor: pointer; transition: background 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out); outline-offset: 4px; }
.ladder__step--ready:not(.is-muted), .ladder__step.is-active { background: var(--color-acid); color: var(--color-ink); padding-left: var(--space-4); margin-left: calc(-1 * var(--space-4)); transform: rotate(-1.5deg); }
.ladder__step--ready:not(.is-muted) .ladder__num, .ladder__step.is-active .ladder__num { border-color: var(--color-ink); color: var(--color-ink); background: transparent; }
.ladder__step--ready:not(.is-muted) .ladder__name, .ladder__step--ready:not(.is-muted) .ladder__text, .ladder__step.is-active .ladder__name, .ladder__step.is-active .ladder__text { color: var(--color-ink); }
/* A stage with all three steps in use is lit, whichever stage is being worked */
.ladder__step.is-complete { background: var(--color-acid); color: var(--color-ink); }
.ladder__step.is-complete .ladder__num { border-color: var(--color-ink); color: var(--color-acid); background: var(--color-ink); }
.ladder__step.is-complete .ladder__num::after { content: " \2713"; }
.ladder__step.is-complete .ladder__name, .ladder__step.is-complete .ladder__text { color: var(--color-ink); }
.ladder__step.is-complete:not(.is-active) { padding-left: var(--space-3); margin-left: 0; }
/* Phones: the board is hidden and the tiles are the checklist */
@media (max-width: 767px) {
  .ready .workboard { display: none; }
  .ready .ladder__step { cursor: pointer; }
  .ready .ladder__step.is-complete { transform: none; margin: var(--space-2) 0; padding: var(--space-4); }
}
/* Ready to scale: banner on the board once every stage is in use */
.scale-banner { display: none; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-5); background: var(--color-ink); color: var(--color-acid); font-size: 1.5rem; line-height: 1.1; transform: rotate(-1deg); transform-origin: left center; }
.workboard.is-scaled .scale-banner { display: inline-block; }
.workboard.is-scaled { border-color: var(--color-acid); box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-acid) 35%, transparent); }
/* The celebration */
.hoopla { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: var(--gutter); background: rgba(5, 5, 5, 0.88); overflow: hidden; }
.hoopla.is-open { display: grid; }
body.has-hoopla { overflow: hidden; }
.hoopla__card { position: relative; z-index: 2; max-width: 40rem; padding: var(--space-7) var(--space-7) var(--space-6); background: var(--color-acid); color: var(--color-ink); transform: rotate(-2deg); box-shadow: 14px 14px 0 var(--color-white); animation: hoopla-in 480ms var(--ease-out) both; }
.hoopla__card .eyebrow { color: var(--color-ink); }
.hoopla__title { margin-top: var(--space-4); font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5rem); line-height: 0.95; text-transform: uppercase; overflow-wrap: anywhere; }
.hoopla__line { margin-top: var(--space-5); max-width: 32rem; font-size: 1.125rem; font-weight: 500; line-height: 1.5; }
.hoopla__peaks { position: absolute; top: var(--space-5); right: var(--space-5); width: 72px; height: 43px; color: var(--color-ink); }
.hoopla__close { margin-top: var(--space-6); }
@keyframes hoopla-in { from { transform: rotate(-2deg) scale(0.6); opacity: 0; } to { transform: rotate(-2deg) scale(1); opacity: 1; } }
@media (max-width: 767px) { .hoopla__card { padding: var(--space-6) var(--space-5); box-shadow: 8px 8px 0 var(--color-white); } .hoopla__peaks { width: 50px; height: 30px; } .scale-banner { font-size: 1.25rem; } }
.workboard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-2) var(--space-3) var(--space-2) 0; }
.workboard__foot .workboard__live { margin-top: 0; }
.board-stamp { display: inline-flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) var(--space-4); margin-block: var(--space-2); background: var(--color-ink); color: var(--color-acid); transform: rotate(-2deg); width: fit-content; }   /* hugs its words; the length changes with the stage */
.board-stamp__word { font-size: 1.5rem; line-height: 1; }
.board-stamp__line { font-size: 0.875rem; font-weight: 600; color: var(--color-white); }
@media (max-width: 767px) { .board-stamp { flex-direction: column; align-items: flex-start; gap: var(--space-1); } .board-stamp__word, .board-stamp__line { white-space: nowrap; } }
/* Pending: until every row is In use the stamp sits faded, ringed by a dashed line. */
.board-stamp.is-pending { background: color-mix(in srgb, var(--color-ink) 16%, var(--color-paper)); color: rgba(255,255,255,0.85); outline: 1.5px dashed color-mix(in srgb, var(--color-ink) 70%, var(--color-paper)); outline-offset: 0; }
.board-stamp.is-pending .board-stamp__line { color: rgba(255,255,255,0.55); }
@supports not (color: color-mix(in srgb, red, blue)) { .board-stamp.is-pending { background: #c8c8c4; outline-color: #4a4a48; } }
@media (max-width: 1023px) {
  .ladder { grid-template-columns: 1fr; border-top: 0; }
  .ladder__step { display: grid; grid-template-columns: minmax(48px, auto) 1fr; column-gap: var(--space-3); border-right: 0; border-top: 1px solid rgba(255,255,255,0.25); margin: 0; padding: var(--space-4) 0; }
  .ladder__num { grid-row: 1 / span 2; margin-top: 2px; text-align: center; align-self: start; white-space: nowrap; }
  .ladder__name { margin-top: 0; }
  .ladder__text { grid-column: 2; }
  .ladder__step--ready:not(.is-muted), .ladder__step.is-active { margin: var(--space-2) 0; padding: var(--space-4); transform: rotate(-1deg); }
}

/* ---------- Field notes ---------- */
.note-list { margin-top: var(--space-8); border-top: 3px solid var(--color-ink); }
.note { position: relative; display: grid; grid-template-columns: minmax(96px, 160px) 1fr; gap: var(--space-6); padding: var(--space-7) 0; border-bottom: 2px solid var(--color-ink); align-items: start; }
.note__num { position: relative; display: inline-grid; place-items: center; width: clamp(88px, 6vw + 48px, 128px); aspect-ratio: 1; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: 1; color: var(--color-ink); transform: rotate(-3deg); }
.note__ring { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-ink); }
.notes__pull { margin-top: var(--space-6); font-size: calc(var(--text-campaign) * 0.6); line-height: 1.05; max-width: 14ch; box-sizing: content-box; padding: 0.45em 0.6em 0.6em; background: var(--color-ink); color: var(--color-acid); transform: rotate(-2deg); transform-origin: left top; }   /* black card stays put; only the words inside swap */
.note__accent { position: absolute; width: 18px; height: 18px; left: 0; top: var(--space-4); }
.note__accent--orange { background: var(--color-orange); transform: rotate(-3deg); }
.note__accent--periwinkle { background: var(--color-periwinkle); transform: rotate(2deg); }
.note__body { max-width: 62ch; }
.note__meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.note__tag { display: inline-flex; align-items: center; justify-content: center; min-width: 3.9rem; padding: 6px 8px; font-size: 0.975rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; background: var(--color-ink); color: var(--color-acid); transform: rotate(-2deg); }
.note__kind { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted-dark); }
.note__title { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.08; text-wrap: balance; }
.note__teaser { margin-top: var(--space-3); color: var(--color-muted-dark); }
.note__body .text-button { margin-top: var(--space-4); }
@media (max-width: 767px) {
  .note { grid-template-columns: 1fr; gap: var(--space-3); padding-block: var(--space-6); }
  .note__num { width: 72px; font-size: 2.5rem; }
  .note__accent { top: var(--space-6); left: auto; right: 0; }
}

/* ---------- About ---------- */
@media (min-width: 1024px) { .about, .contact { padding-top: calc(var(--section-y) + var(--space-6)); } }
.about__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-8) var(--space-9); align-items: start; }
.about__copy p + p { margin-top: var(--space-4); }
.about__copy .section-title { margin-bottom: var(--space-6); max-width: 14ch; }
.about__copy > p { color: var(--color-muted-dark); max-width: 58ch; }
.about__stats { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); max-width: 58ch; }
.about__stat { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid color-mix(in srgb, var(--color-ink) 22%, transparent); }
.about__stat-value { font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); letter-spacing: var(--tracking-tight); line-height: 1; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.about__stat-arrow { font-weight: 500; }
.about__stat-label { font-size: var(--text-ui); color: var(--color-muted-dark); }
.about__copy > .about__close { margin-top: var(--space-6); color: var(--color-ink); }
@media (max-width: 479px) { .about__stats { grid-template-columns: 1fr; gap: var(--space-4); } }
.about__aside { position: relative; }
.about__aside .figure__caption { left: auto; right: 0; }
@media (max-width: 1023px) { .about__grid { grid-template-columns: 1fr; } .about__aside { max-width: 420px; } }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-8) var(--space-9); align-items: start; }
.contact__intro { position: relative; }
@media (min-width: 1024px) { .contact__intro::after { content: ""; position: absolute; top: 0; bottom: 0; right: calc(var(--space-9) / -2); width: 1px; background: rgba(5,5,5,0.35); } }
.contact__intro .section-intro { color: var(--color-ink); font-weight: 500; }
.contact__helper { margin-top: var(--space-5); font-size: 0.8125rem; font-weight: 600; color: var(--color-muted-dark); }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: var(--text-ui); font-weight: 700; }
.field__optional { font-weight: 500; color: var(--color-muted-dark); }
.field__input {
  width: 100%; min-height: 52px; padding: var(--space-3) var(--space-4); font: inherit; font-size: 1rem; color: var(--color-ink);
  background: var(--color-white); border: 2px solid var(--color-ink); border-radius: var(--radius-control);
}
.field__input::placeholder { color: var(--color-muted-dark); opacity: 1; }
.field__input[aria-invalid="true"] { border-color: var(--color-orange); box-shadow: inset 0 0 0 1px var(--color-orange); }
/* The message field starts one line tall and grows when it takes focus, then settles back when focus leaves. */
.field__textarea { resize: none; min-height: 52px; height: 52px; line-height: 1.5; overflow: hidden; transition: height 220ms var(--ease-out); }
.field__textarea:focus { height: 160px; overflow: auto; }
.contact-form__actions { align-self: end; }
.field__error { font-size: 0.875rem; font-weight: 700; }
.field__error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 6px; background: var(--color-ink); color: var(--color-acid); font-size: 12px; }
.contact-form__actions { margin-top: var(--space-2); }
.draft { background: var(--color-ink); color: var(--color-white); padding: var(--space-6); border: 3px solid var(--color-ink); }
.draft .eyebrow { color: var(--color-acid); }
.draft__title { font-size: var(--text-subhead); font-weight: 800; letter-spacing: var(--tracking-tight); }
.draft__body { margin-top: var(--space-5); padding: var(--space-5); background: var(--color-paper); color: var(--color-ink); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.55; user-select: text; --focus-color: var(--color-acid); }
.draft__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }
.draft .button--ink { background: var(--color-acid); color: var(--color-ink); border-color: var(--color-acid); }
.draft .button--ink:hover { background: var(--color-white); border-color: var(--color-white); }
.draft .button--ghost-ink { color: var(--color-white); border-color: var(--color-white); }
.draft .button--ghost-ink:hover { background: var(--color-white); color: var(--color-ink); }
.draft__status { margin-top: var(--space-4); min-height: 1.5em; font-weight: 600; color: var(--color-acid); }
@media (max-width: 1023px) { .contact__grid { grid-template-columns: 1fr; gap: var(--space-7); } }
@media (max-width: 767px) { .contact-form { grid-template-columns: 1fr; } .draft { padding: var(--space-5); } .draft__body { padding: var(--space-4); } }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-ink); color: var(--color-white); padding-block: var(--space-8); }
.site-footer__grid { display: grid; grid-template-columns: 1fr auto; gap: var(--space-6) var(--space-8); align-items: start; }
.site-footer__brand { display: flex; align-items: center; gap: var(--space-5); }
.site-footer__tag { min-width: 0; padding-left: var(--space-5); border-left: 1px solid rgba(255,255,255,0.35); }
.site-footer__line { margin: 0; font-weight: 700; }
.site-footer__desc { margin-top: var(--space-1); color: var(--color-muted-light); font-size: 0.9375rem; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: var(--text-ui); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; }
.site-footer__nav a:hover { box-shadow: inset 0 -2px 0 var(--color-acid); }
.site-footer__nav a[href$="careers"] { color: var(--color-acid); }
.site-footer__copy { grid-column: 1 / -1; padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,0.14); color: var(--color-muted-light); font-size: 0.875rem; }
.site-footer__copy { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2) 0; text-align: center; }
.site-footer__legal { display: inline-flex; }
.site-footer__legal a { color: var(--color-muted-light); text-decoration: none; }
.site-footer__legal a:hover { color: var(--color-white); }
.site-footer__legal a::before, .site-footer__copy > span:nth-child(1) + .site-footer__legal a:first-child::before { content: "\00b7"; margin: 0 0.75em; color: var(--color-muted-light); }
/* Work with us */
.join__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-7) var(--space-9); align-items: end; }
.join__intro { max-width: 44rem; }
.join__title { font-size: clamp(2.75rem, 1.4rem + 4.2vw, 5rem); }
.join__title-line { position: relative; display: inline-block; padding-bottom: 0.12em; }
.join__title .brush-underline { color: var(--color-acid); }
.join__dek { margin-top: var(--space-5); font-size: var(--text-subhead); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.2; }
.join__intro .section-intro { margin-top: var(--space-4); }
.join__intro .section-intro strong { color: var(--color-ink); }
.join__body { grid-column: 1 / -1; max-width: 62ch; font-size: var(--text-body); line-height: var(--leading-body); }
.join__chips { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 0; margin: 0; list-style: none; }
.join__chip { display: inline-flex; align-items: center; padding: 8px 12px; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; background: var(--color-ink); color: var(--color-acid); transform: rotate(-1.5deg); }
.join__chip:nth-child(even) { transform: rotate(1.25deg); }
.join__sub { margin-top: var(--space-7); font-size: var(--text-subhead); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.15; }
.join__sub + p { margin-top: var(--space-3); }
.join__body p + p { margin-top: var(--space-4); }
.join__cta { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 2px solid var(--color-ink); }
.join__note { margin-top: var(--space-4); font-style: italic; color: var(--color-muted-dark); }
@media (max-width: 1023px) { .join__grid { grid-template-columns: 1fr; gap: var(--space-7); } .join__grid .figure { max-width: 560px; } }
/* Legal pages */
.legal__intro { max-width: 40rem; }
.legal__meta { margin-top: var(--space-4); color: var(--color-muted-dark); font-size: var(--text-ui); }
.legal__body { max-width: 68ch; margin-top: var(--space-7); }
.legal__body h2 { margin-top: var(--space-7); font-size: var(--text-subhead); font-weight: 800; letter-spacing: var(--tracking-tight); }
.legal__body h2 + p { margin-top: var(--space-3); }
.legal__body p + p { margin-top: var(--space-4); }
@media (max-width: 767px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---------- Field note dialogs ---------- */
.note-dialog { border: 0; padding: 0; margin: auto; max-width: min(880px, calc(100vw - 2 * var(--gutter))); width: 100%; max-height: min(92vh, 1040px); overflow-y: auto; background: var(--color-paper); color: var(--color-ink); border-top: 8px solid var(--color-acid); }
.note-dialog::backdrop { background: rgba(5, 5, 5, 0.82); }
.note-dialog[open] { display: block; }

/* ---------- Editorial article (dialogs + playbook page) ---------- */
.note-article { padding: var(--space-6) var(--space-8) var(--space-7); font-family: var(--font-serif); font-optical-sizing: auto; }
.note-article__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding-top: var(--space-3); border-top: 3px solid var(--color-ink); font-family: var(--font-sans); }
.note-article__top .eyebrow { margin: 0; }
.note-article__title { margin-top: var(--space-6); font-family: var(--font-serif); font-optical-sizing: auto; font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1; text-wrap: balance; max-width: 16ch; }
.note-article__stand { margin-top: var(--space-4); font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); line-height: 1.35; color: var(--color-muted-dark); max-width: 36ch; }
.note-article__byline { display: flex; flex-wrap: wrap; gap: 0 0.4em; margin-top: var(--space-5); padding: var(--space-3) 0; border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); font-family: var(--font-sans); font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted-dark); }
.note-article__author { color: var(--color-ink); font-weight: 700; }
.note-article__lane { color: var(--color-ink); }
.note-article__body { margin-top: var(--space-6); max-width: 60ch; font-family: var(--font-serif); font-optical-sizing: auto; font-size: 1.1875rem; line-height: 1.6; }
.note-article__body > * + * { margin-top: var(--space-4); }
.note-article__body p + p { margin-top: var(--space-4); }
/* Contributor note at the foot of a play */
.note-article__closer { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-ink); font-family: var(--font-serif); font-style: italic; font-size: 1.0625rem; line-height: 1.5; color: color-mix(in srgb, var(--color-ink) 78%, var(--color-paper)); max-width: 60ch; }
.note-article__closer a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
/* Byline buttons: Listen and Share, thin enough to sit in the line */
.byline-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: 0.6em; padding: 2px 9px 2px 8px; border: 1.5px solid var(--color-ink); border-radius: 999px; background: transparent; color: var(--color-ink); font: inherit; font-size: 0.6875rem; font-weight: 800; letter-spacing: inherit; text-transform: inherit; line-height: 1.4; cursor: pointer; transition: background-color 150ms, color 150ms; }
.byline-btn + .byline-btn { margin-left: 0.4em; }
.byline-btn:hover, .byline-btn:focus-visible { background: var(--color-ink); color: var(--color-acid); }
.byline-btn svg { width: 9px; height: 9px; flex: none; }
.listen svg { fill: currentColor; }
.listen[data-state="playing"] { background: var(--color-ink); color: var(--color-acid); }
.listen[data-state="paused"] { background: var(--color-acid); color: var(--color-ink); }
.listen[data-state="loading"] { opacity: 0.6; }
.listen__pause { display: none; }
.listen[data-state="playing"] .listen__play { display: none; }
.listen[data-state="playing"] .listen__pause { display: block; }
.listen__time:empty { display: none; }
.listen__time { font-weight: 600; opacity: 0.8; font-variant-numeric: tabular-nums; }
.share.is-copied { background: var(--color-acid); color: var(--color-ink); }
.share-wrap { position: relative; display: inline-flex; margin-left: 0.6em; }
.share-wrap .byline-btn { margin-left: 0; }
.share-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: flex; flex-direction: column; min-width: 9.5rem; padding: 4px; background: var(--color-white); border: 2px solid var(--color-ink); box-shadow: 0 10px 28px rgba(5, 5, 5, 0.18); font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: normal; text-transform: none; }
.share-menu[hidden] { display: none; }
.share-menu__item { display: block; width: 100%; margin: 0; padding: 8px 10px; text-align: left; font: inherit; color: var(--color-ink); background: none; border: 0; text-decoration: none; cursor: pointer; }
.share-menu__item:hover, .share-menu__item:focus-visible { background: var(--color-ink); color: var(--color-acid); outline: none; }
.speed { min-width: 3.4em; justify-content: center; font-variant-numeric: tabular-nums; }
.byline-btn[hidden] { display: none; }
.note-article__body > p:first-of-type::first-letter { float: left; font-size: 4.9em; font-weight: 500; line-height: 0.78; padding: 0.07em 0.12em 0 0; margin-top: 0.02em; color: var(--color-ink); }
/* Crossheads: a rule across the measure, then the heading in the house sans */
.note-article__sub { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 3px solid var(--color-ink); font-family: var(--font-sans); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; text-wrap: balance; }
.note-article__sub + * { margin-top: var(--space-4) !important; }
.note-article__pull { font-family: var(--font-serif); margin: var(--space-6) 0; padding: var(--space-4) 0 var(--space-4) var(--space-5); border-left: 6px solid var(--color-acid); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--color-ink); text-wrap: balance; }
.note-article__pull p { margin: 0; }
.note-article__pull p::before { content: "\201C"; }
.note-article__pull p::after { content: "\201D"; }
.note-article__week { font-family: var(--font-serif); margin-top: var(--space-7); padding: var(--space-5) var(--space-6); background: var(--color-acid); border: 2px solid var(--color-ink); box-shadow: 8px 8px 0 var(--color-ink); font-size: 1.125rem; line-height: 1.5; }
.note-article__week-label { font-family: var(--font-brush); font-size: 1.5rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1; margin-bottom: var(--space-3); }
.note-article__week p + p { margin-top: var(--space-3); }
.note-article__list { margin-top: var(--space-4); padding-left: 1.25em; list-style: square; }
.note-article__list li { padding-left: 0.25em; }
.note-article__list li + li { margin-top: var(--space-2); }
.note-article__list li::marker { color: var(--color-acid); }
.note-article__list--numbered { list-style: decimal; padding-left: 1.5em; }
.note-article__list--numbered li::marker { color: var(--color-ink); font-weight: 700; }
.note-article__facts { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border: 2px solid var(--color-ink); border-left-width: 10px; }
.note-article__facts-label, .note-article__callout-label { font-family: var(--font-sans); font-size: var(--text-label); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: var(--space-2); }
.note-article__facts .note-article__list { margin-top: 0; }
.note-article__callout { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); background: var(--color-ink); color: var(--color-paper); }
.note-article__callout-label { color: var(--color-acid); }
.note-article__callout p + p { margin-top: var(--space-3); }
.note-article__quote { margin: var(--space-5) 0; padding-left: var(--space-5); border-left: 3px solid var(--color-ink); font-style: italic; }
.note-article__pull cite { display: block; margin-top: var(--space-2); font-family: var(--font-sans); font-style: normal; font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted-dark); }
.note-article__pull cite::before { content: "\2014 "; }
.note-table__wrap { margin-top: var(--space-4); overflow-x: auto; }
.note-table { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.note-table th, .note-table td { text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-top: 1px solid var(--color-ink); vertical-align: top; }
.note-table thead th { border-top: 0; padding-top: 0; font-family: var(--font-sans); font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted-dark); }
.note-table td:last-child { white-space: nowrap; font-weight: 600; }
.note-table--wide { min-width: 560px; font-size: 1rem; }
.note-table--wide td:last-child { white-space: normal; font-weight: 400; }
.note-table--wide td:first-child { font-weight: 700; white-space: nowrap; }
.note-article__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 3px solid var(--color-ink); font-family: var(--font-sans); }
/* No showModal support: render in page with a working back link */
.note-dialog.is-inline { position: relative; max-width: none; max-height: none; margin: var(--space-6) 0 0; border-left: 8px solid var(--color-acid); border-top: 0; }
@media (max-width: 767px) {
  .note-article { padding: var(--space-5) var(--gutter) var(--space-6); }
  .note-article__body { font-size: 1.125rem; }
  .note-article__week { box-shadow: 5px 5px 0 var(--color-ink); padding: var(--space-4) var(--space-4); }
}

/* ---------- Motion ---------- */
.js .reveal { opacity: 0; transform: translateY(var(--travel-enter)); transition: opacity var(--duration-enter) var(--ease-out), transform var(--duration-enter) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .underline-stroke { stroke-dashoffset: 0; }
  .arrow { transition: none; }
}

/* ---------- Field notes: compact homepage band ---------- */
.note-lines { border-top: 3px solid var(--color-ink); margin-block: var(--space-7) var(--space-6); }
@media (max-width: 1023px) { .note-lines { margin-block: var(--space-6) var(--space-5); } }
.note-line { border-bottom: 2px solid var(--color-ink); }
.note-line__button { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-5); width: 100%; min-height: 72px; padding: var(--space-4) var(--space-2) var(--space-4) 0; text-align: left; background: none; border: 0; cursor: pointer; }
.note-line__button:hover .note__tag, .note-line__button:focus-visible .note__tag { background: var(--color-acid); color: var(--color-ink); }
.note__tag { transition: background-color 150ms, color 150ms; }
.notes__pull { display: grid; align-items: center; }   /* card is sized to the longest quote; shorter ones sit centred */
.notes__pull-item { grid-area: 1 / 1; opacity: 0; transition: opacity 160ms var(--ease-out); }
.notes__pull-item.is-active { opacity: 1; }
.note-line__text { display: flex; flex-direction: column; gap: 2px; }
.note-line__title { font-size: var(--text-subhead); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.1; }
.note-line__stand { color: var(--color-muted-dark); font-size: 0.9375rem; }
.note-line__read { margin-top: var(--space-2); font-size: var(--text-ui); font-weight: 700; color: var(--color-ink); }
.note-line__read .arrow { margin-left: 0.3em; }
.note-lines__all { padding-top: var(--space-7); padding-left: var(--space-4); }
.notes__grid .notes__intro .notes__pull { margin-top: calc(var(--space-6) + 8px); }
.notes__pull--static { max-width: 17ch; }
@media (max-width: 767px) {
  .note-line__button { gap: var(--space-3); }
  .note-line__title { font-size: 1.125rem; }
}

/* ---------- Playbook hub: hero, lane filters, one card per play ---------- */
.fn-hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-8) var(--space-9); align-items: center; }
.fn-hero .section-title { max-width: 14ch; }
.fn-hero .fn-hero__title { max-width: 20ch; font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); }
.fn-hub { padding-top: 0; }
.fn-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-5); border-bottom: 3px solid var(--color-ink); }
.fn-filter { font: inherit; font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1; padding: 10px 14px; background: none; border: 1.5px solid var(--color-ink); border-radius: 999px; color: var(--color-ink); cursor: pointer; transition: background-color 150ms, color 150ms; }
.fn-filter:hover { background: var(--color-acid); }
.fn-filter[aria-pressed="true"] { background: var(--color-ink); color: var(--color-acid); }
.fn-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-8); }
.fn-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) 0 var(--space-7); border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 22%, transparent); }
.fn-card__tag { margin: 0; font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted-dark); }
.fn-card__title { margin: 0; font-family: var(--font-serif); font-optical-sizing: auto; font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; max-width: 22ch; }
.fn-card__link { color: inherit; text-decoration: none; }
.fn-card__link::after { content: ""; position: absolute; inset: 0; }   /* the whole card opens the play */
.fn-card__link:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 4px; }
.fn-card:hover .fn-card__title, .fn-card:focus-within .fn-card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.fn-card__stand { margin: 0; color: var(--color-muted-dark); font-size: var(--text-body); line-height: 1.5; max-width: 46ch; }
.fn-card__more { margin: auto 0 0; padding-top: var(--space-2); font-size: var(--text-ui); font-weight: 700; }
.fn-card__more .arrow { margin-left: 0.3em; }
.note-lines__all { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.note-lines__all .text-link { color: var(--color-muted-dark); }
/* The homepage Articles band sits on ink between How We Work and About */
.notes.section--ink { position: relative; }
.notes.section--ink .note-lines { border-top-color: var(--color-white); }
.notes.section--ink .note-line { border-bottom-color: color-mix(in srgb, var(--color-white) 28%, transparent); }
.notes.section--ink .note-line__stand { color: var(--color-muted-light); }
.notes__intro .section-intro { max-width: 30ch; }
.notes.section--ink .note-line__read { color: var(--color-acid); }
.notes.section--ink .note__tag { background: var(--color-acid); color: var(--color-ink); }
.notes.section--ink .note-line__button:hover .note__tag, .notes.section--ink .note-line__button:focus-visible .note__tag { background: var(--color-white); color: var(--color-ink); }
.notes.section--ink .note-lines__all .text-link { color: var(--color-white); }

/* ---------- A play on its own page ---------- */
.fn-play { padding-top: var(--space-6); }
.fn-play__wrap { max-width: 1080px; }
.fn-article { padding: 0 0 var(--space-8); }
.fn-play__back { color: var(--color-muted-dark); font-size: var(--text-ui); }
.fn-play__back .arrow { margin: 0 0.35em 0 0; }
.fn-next { padding-top: var(--space-5); border-top: 3px solid var(--color-ink); }
.fn-next__link { display: grid; gap: var(--space-2); margin-top: var(--space-3); max-width: 40ch; color: inherit; text-decoration: none; }
.fn-next__lane { font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted-dark); }
.fn-next__title { font-family: var(--font-serif); font-optical-sizing: auto; font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.fn-next__more { font-size: var(--text-ui); font-weight: 700; }
.fn-next__link:hover .fn-next__title, .fn-next__link:focus-visible .fn-next__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.fn-article .note-article__top .eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); }
.fn-article .note-article__title { max-width: 18ch; }
@media (min-width: 1024px) {
  .fn-article .note-article__closer { max-width: none; }   /* the contributor note runs the full width of the two-column body */
  .fn-article .note-article__body { max-width: none; columns: 2; column-gap: var(--space-8); column-rule: 1px solid var(--color-muted-dark); orphans: 3; widows: 3; }
  .fn-article .note-article__body > * { break-inside: avoid; }
  .fn-article .note-article__body > p { break-inside: auto; }
  .fn-article .note-article__pull { column-span: all; margin: var(--space-6) auto; max-width: 30ch; padding: var(--space-4) 0; border-left: 0; border-top: 3px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); text-align: center; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.4rem); }
  .fn-article .note-article__week { column-span: all; max-width: 60ch; }
  .fn-article .note-article__facts, .fn-article .note-article__callout { break-inside: avoid; }
  .fn-article .note-article__sub, .fn-article .note-table__wrap { column-span: all; }
  .fn-article .note-article__sub { margin-top: var(--space-8); margin-bottom: var(--space-5); padding-top: var(--space-4); padding-right: 40%; font-size: 1.375rem; }
  .fn-article .note-table__wrap { margin-bottom: var(--space-5); }
  .fn-article .note-table td:first-child { width: 40%; }
  .fn-article .note-table--wide td:first-child { width: auto; }
  .fn-article .note-article__stand { max-width: 44ch; }
}
.fn-close__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-7) var(--space-9); align-items: center; }
.fn-close .section-intro { margin-top: 0; margin-bottom: var(--space-6); color: var(--color-ink); font-weight: 500; }
@media (max-width: 1023px) {
  .fn-hero__grid, .fn-close__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .fn-hero .figure { max-width: 560px; }
  .fn-article { min-width: 0; }
}
@media (max-width: 767px) { .fn-cards { grid-template-columns: minmax(0, 1fr); } .fn-card { padding: var(--space-5) 0 var(--space-6); } }

/* ---------- Print: the playbook PDF is printed from playbook.html ---------- */
/* ---------- Merch page ---------- */
.merch__intro { max-width: 40rem; }
.merch__grid { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-7); max-width: 75%; margin-inline: auto; }
.merch-card { margin: 0; }
.merch-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--color-white); border: 3px solid var(--color-ink); overflow: hidden; display: grid; place-items: center; }
.merch-card__placeholder { font-size: 1.75rem; color: var(--color-muted-dark); transform: rotate(-3deg); }
.merch-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.merch-card__name { margin: var(--space-4) 0 0; font-size: var(--text-subhead); font-weight: 900; letter-spacing: var(--tracking-tight); line-height: 1.1; }
.merch-card__price { margin: var(--space-1) 0 0; font-size: 1.125rem; font-weight: 700; }
@media (max-width: 1023px) { .merch__grid { max-width: none; } }
@media (max-width: 599px) { .merch__grid { grid-template-columns: 1fr; gap: var(--space-7); } }

@media print {
  .skip-link, .fn-filters, .fn-next, .fn-play__back, .fn-close, .site-footer__nav, .nav-panel, .nav-toggle { display: none !important; }
  .site-header { position: static; height: auto; padding: 10px 0; background: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .site-header .wordmark { color: #E5FF2A; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; }
  .fn-hero__grid { display: block; }
  .fn-hero .figure { display: none; }
  .fn-hero { border-bottom: 3px solid #000; }
  .fn-article { padding: 24px 0 12px; }
  .fn-article .note-article__body { max-width: none; }
  .note-article__week, .service-row__label, .figure__caption { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .byline-btn { display: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .site-footer { background: #fff; color: #000; padding-block: 16px; }
  .site-footer .wordmark { color: #000; }
  .site-footer__copy { border-top-color: #000; color: #000; }
  a { color: inherit; text-decoration: none; }
}

/* Strip: the first and last words carry the acid */
.strip__word--acid { color: var(--color-acid); }
/* Contact: honeypot lives off-screen; sent panel and notes */
.field--hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.draft__note { margin-top: var(--space-3); font-size: 0.9375rem; color: var(--color-muted-dark); }
.draft__note a { color: inherit; }
.contact-form.is-sending .button { opacity: 0.6; pointer-events: none; }

/* ---------- Working sessions: the hub, the row lines, the play blocks, the form chip ---------- */
.service-row__session { margin: 0; padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--color-ink) 22%, transparent); font-size: 0.9375rem; line-height: 1.5; color: var(--color-muted-dark); max-width: 56ch; }
.service-row__session .text-link { color: var(--color-ink); font-weight: 700; }
.sessions__intro { max-width: 720px; }
.session-cards { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.session-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border: 3px solid var(--color-ink); background: var(--color-white); }
.session-card__lane { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted-dark); }
.session-card__tag { display: inline-flex; align-items: center; justify-content: center; padding: 5px 6px; background: var(--color-ink); color: var(--color-acid); font-size: 0.8125rem; letter-spacing: 0.08em; line-height: 1; transform: rotate(-2deg); }
.session-card__title { margin: var(--space-2) 0 0; font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.05; text-wrap: balance; }
.session-card__text { margin: 0; color: var(--color-muted-dark); font-size: var(--text-body); line-height: 1.5; max-width: 46ch; }
.session-card .button { margin-top: var(--space-3); align-self: flex-start; }
.session-card__text { flex: 1; }
.session-card:target { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-acid) 65%, transparent); }
.sessions-close .fn-close__grid { align-items: start; }
.sessions-close .section-title { max-width: 12ch; }
.sessions-close .section-intro { margin-bottom: 0; }
.sessions-close .section-intro + .section-intro { margin-top: var(--space-3); }
.sessions-close .button { margin-top: var(--space-6); }
@media (max-width: 767px) { .session-cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } .session-card { padding: var(--space-5); } }
.note-session { margin-top: var(--space-7); padding: var(--space-5) var(--space-6) var(--space-6); border: 3px solid var(--color-ink); max-width: 60ch; }
.note-session .eyebrow { margin-bottom: var(--space-2); }
.note-session__title { margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.1; }
.note-session__text { margin: var(--space-2) 0 0; color: var(--color-muted-dark); font-size: 0.9375rem; line-height: 1.5; max-width: 56ch; }
.note-session .button { margin-top: var(--space-4); }
.contact-form__session { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); border: 2px solid var(--color-ink); }
.contact-form__session[hidden] { display: none; }
.contact-form__session-label { font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.contact-form__session-title { font-weight: 800; letter-spacing: var(--tracking-tight); font-size: 1.125rem; }

/* ==========================================================================
   Design variant: architectural — applies only under [data-design="architectural"].
   The attribute is written on <body> by tools/build-notes.py from its DESIGN
   setting (default "legacy"); see docs/design-variants.md. Nothing above this
   line changes: legacy keeps the torn paper, brush faces, grain and tilted
   stamps exactly as they were. The SKALA wordmark (.wordmark*, .poster__wordmark)
   is deliberately absent from every rule below.
   ========================================================================== */
[data-design="architectural"] {
  --hairline: 1px solid color-mix(in srgb, var(--color-ink) 24%, transparent);
}

/* Section boundaries: straight edges; a hairline only where two paper surfaces meet */
[data-design="architectural"] .torn-edge { display: none; }
[data-design="architectural"] .strip { padding-bottom: var(--space-7); }
[data-design="architectural"] .section--paper + .section--paper { border-top: var(--hairline); }

/* Flat surfaces: the paper grain and film noise overlays are off */
[data-design="architectural"] .hero__copy::after,
[data-design="architectural"] .poster::after { display: none; }

/* Diagonal image treatment: a 75° edge (15° off vertical) rising to the right, placed only where
   a photograph meets the acid panel. On the hero the acid runs over the photo's top-left corner,
   starting at its bottom-left corner; on the campaign block the acid runs under the photo's
   bottom-right corner, meeting its top-right corner. Each wedge is an absolutely positioned
   pseudo-element whose aspect ratio fixes the angle (width = height × tan 15°), so it holds at
   every height and width from 768px up; on phones the blocks stack and both photographs keep
   straight edges. Every other photograph (About, Careers, Articles hub) keeps straight edges.
   The campaign block's ::after was the film-noise overlay in legacy; here it is the wedge. */
[data-design="architectural"] .hero__media::after,
[data-design="architectural"] .campaign__media::after {
  content: ""; display: block; position: absolute; top: 0; bottom: 0; height: auto; width: auto; aspect-ratio: 0.26795 / 1;
  background: var(--color-acid); background-image: none; opacity: 1; mix-blend-mode: normal; pointer-events: none; z-index: 2;
}
/* Each wedge reaches 1px past its seam into the acid panel, so its anti-aliased edge never lands on the same
   fractional pixel column as the photograph's edge (which would conflate into a faint dark line). */
[data-design="architectural"] .hero__media, [data-design="architectural"] .campaign__media { overflow: visible; }
[data-design="architectural"] .hero__media::after { left: -1px; right: auto; clip-path: polygon(0 0, 100% 0, 0 100%); }
[data-design="architectural"] .campaign__media::after { right: -1px; left: auto; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
@media (max-width: 767px) { [data-design="architectural"] .hero__media::after, [data-design="architectural"] .campaign__media::after { display: none; } }   /* phones: no cuts, straight edges */
/* The surfaces behind the seams are acid too, so neither sub-pixel column gaps nor the wedge's anti-aliased
   clip edge can show a dark line against the panel. */
@media (min-width: 768px) { [data-design="architectural"] .hero, [data-design="architectural"] .hero__media { background: var(--color-acid); } }
[data-design="architectural"] .campaign, [data-design="architectural"] .campaign__media { background: var(--color-acid); }

/* Phones only: every homepage photograph is the hero's height (the stacked hero photo is a 4:3 frame on
   the full width, i.e. 75vw), cropping into the picture with object-fit where the frame demands it; and
   the hero photograph is cropped into by 15% from the left (7.5% top and bottom), the remaining frame
   scaled to fill so its right edge stays. Tablet and desktop frames are untouched. */
@media (max-width: 767px) {
  [data-design="architectural"] .campaign__media { min-height: 0; aspect-ratio: 4 / 3; }
  [data-design="architectural"] .about .figure { aspect-ratio: auto; height: 75vw; }
  [data-design="architectural"] .campaign__media .media-slot__img { object-position: 30% 45%; }   /* keeps the team leader at the left edge */
  [data-design="architectural"] .about .figure img { object-position: 50% 18%; }                  /* keeps the head when the portrait is cropped */
  [data-design="architectural"] .hero__media .media-slot__img { clip-path: inset(7.5% 0 7.5% 15%); transform: scale(1.17647); transform-origin: 100% 50%; }
}

/* Typography: the brush faces step back to the house sans at its heaviest weight */
[data-design="architectural"] .strip__words { font-family: var(--font-sans); font-weight: 900; letter-spacing: var(--tracking-hero); font-size: calc(var(--text-campaign) * 0.7); }
[data-design="architectural"] .campaign__panel { container-type: inline-size; }
[data-design="architectural"] .campaign__line { font-family: var(--font-sans); font-weight: 900; letter-spacing: var(--tracking-hero); transform: none; margin-left: 0; }
[data-design="architectural"] .campaign__word { margin-left: 0; }
@media (min-width: 1024px) { [data-design="architectural"] .campaign__line { font-size: min(var(--campaign-mark, clamp(2.75rem, 0.6rem + 5.3vw, 5.6rem)), 11.5cqi); } }
@media (min-width: 768px) and (max-width: 1023px) { [data-design="architectural"] .campaign__line { font-size: min(var(--campaign-mark, clamp(2.75rem, 0.6rem + 5.3vw, 5.6rem)), 12.5cqi); } }
[data-design="architectural"] .media-slot__img ~ .campaign__poster-copy { white-space: normal; max-width: 17ch; }
[data-design="architectural"] .note-article__week-label { font-family: var(--font-sans); font-size: var(--text-label); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* Hand-drawn strokes and tilts are off; the stamps, tags and chips sit square */
[data-design="architectural"] .brush-underline,
[data-design="architectural"] .campaign__underline { display: none; }
[data-design="architectural"] .hero__line--underlined,
[data-design="architectural"] .join__title-line { padding-bottom: 0; }
[data-design="architectural"] :is(.service-row__tag, .approach__principle-num, .note__tag, .session-card__tag, .join__chip, .step__num, .note__num, .notes__pull, .note__accent--orange, .note__accent--periwinkle, .merch-card__placeholder, .campaign__smile, .poster__line, .board-stamp, .scale-banner, .hoopla__card, .ladder__step--ready:not(.is-muted), .ladder__step.is-active) { transform: none; }