/* GENERATED by scripts/build-squarespace.py — do not edit.
   Source: assets/stir.css + squarespace/src/host-layer.css */
/* ════════════════════════════════════════════════════════════════════
   STIR — signature interface system
   Built against the 1 Nov 2026 brief and STIR-Interface-Specimen.html.

   Tokens are organised once, at the top, and nothing below re-declares
   them. The previous stylesheet had grown four layers of overrides
   (a cobalt hero, a paper re-skin, a broadcast pass, then corrections
   to the corrections); it is kept as stir-legacy.css for reference and
   is not loaded.
   ════════════════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────────────────
   The brief's first choice is Alte Haas Grotesk with Kraftwerk
   Radioactive for utility lettering, and Degular as the named
   alternative. None of the three is in this repository and none has a
   supplied licence, so none is loaded — and another site's hosted font
   files are not a substitute. What ships is Founders Grotesk, which is
   already licensed here and on disk, with IBM Plex Mono as the utility
   voice the brief itself names as the functional fallback. The serif
   is dropped: one resolved sans, one utility, as specified. */
/* Metric-matched fallback. Measured, not guessed: "ATTENTION" at
   112px is 582px in Founders Grotesk and 629px in Arial, a ratio of
   92.5%. Without this, font-display: swap paints a headline 17% too
   wide on every cold cache, and it runs into the artwork. */
@font-face {
  font-family: "Founders Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 92.5%;
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face { font-family: "Founders Grotesk"; src: url("https://stirnyc.netlify.app/assets/fonts/founders-grotesk-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Founders Grotesk"; src: url("https://stirnyc.netlify.app/assets/fonts/founders-grotesk-light-italic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Founders Grotesk"; src: url("https://stirnyc.netlify.app/assets/fonts/founders-grotesk-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Founders Grotesk"; src: url("https://stirnyc.netlify.app/assets/fonts/founders-grotesk-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Founders Grotesk"; src: url("https://stirnyc.netlify.app/assets/fonts/founders-grotesk-bold-italic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap; }

.stir {
  /* Palette — the five the brief fixes, and nothing else. */
  --cobalt: #0451AB;
  --ivory:  #FAF2E6;
  --ink:    #161310;
  --action: #C4120D;        /* deep red: the only red that carries ivory type */
  --signal: #F21B16;        /* signal red: graphic accent, never small type */

  --cobalt-lift: #0A5CBC;   /* one step up, for a pressed cobalt surface */
  --ivory-70: rgba(250, 242, 230, 0.70);
  --ivory-40: rgba(250, 242, 230, 0.40);
  --ivory-25: rgba(250, 242, 230, 0.25);
  --ink-70:   rgba(22, 19, 16, 0.70);
  --ink-35:   rgba(22, 19, 16, 0.35);

  --sans: "Founders Grotesk", "Founders Fallback", "Helvetica Neue", Arial, sans-serif;
  --utility: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  /* Spacing — base 4, the scale the brief lists and nothing between. */
  --s8: 8px;   --s12: 12px; --s16: 16px; --s20: 20px; --s24: 24px;
  --s32: 32px; --s48: 48px; --s64: 64px; --s96: 96px;

  --wrap: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --nav-h: 76px;

  /* Type scale, from the brief's exact figures. */
  /* The brief specifies clamp(48px, 7.8vw, 112px). That assumes a
     wider measure than the 42% hero column: at 112px "ATTENTION" is
     582px of text in a 537px box. 6.9vw/99px is the measured fit. */
  --t-h1:      clamp(44px, 6.9vw, 99px);
  --t-h2:      clamp(34px, 4vw, 60px);
  --t-h3:      clamp(24px, 2.2vw, 32px);
  --t-body:    20px;
  --t-utility: 14px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 160ms;
  --t-step: 180ms;
}

/* ── Reset ───────────────────────────────────────────────────────── */
.stir *, .stir *::before, .stir *::after { box-sizing: border-box; }
.stir * { margin: 0; padding: 0; }
.stir-never-matches { overflow-x: clip; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .stir-never-matches { scroll-behavior: auto; } }
.stir {
  background: var(--cobalt);
  color: var(--ivory);
  font: 300 var(--t-body)/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.stir img, .stir video, .stir svg { display: block; max-width: 100%; }
.stir button, .stir input, .stir textarea, .stir select { font: inherit; color: inherit; }
.stir button { cursor: pointer; background: none; border: 0; }
.stir a { color: inherit; }
.stir ul { list-style: none; }

/* Focus is visible against every surface it can land on. */
.stir a:focus-visible, .stir button:focus-visible, .stir input:focus-visible, .stir textarea:focus-visible, .stir select:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 4px;
}
.stir .on-ivory a:focus-visible, .stir .on-ivory button:focus-visible, .stir .on-ivory input:focus-visible, .stir .on-ivory textarea:focus-visible, .stir .on-ivory select:focus-visible { outline-color: var(--cobalt); }

.stir .skip {
  position: absolute; left: var(--s20); top: -200px; z-index: 99;
  background: var(--ivory); color: var(--ink); padding: var(--s12) var(--s16);
  font: 500 var(--t-utility)/1 var(--utility); text-transform: uppercase;
  text-decoration: none;
}
.stir .skip:focus { top: var(--s12); }

.stir .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.stir .utility {
  font: 400 var(--t-utility)/1.3 var(--utility);
  letter-spacing: .02em; text-transform: uppercase;
}
.stir .on-ivory { background: var(--ivory); color: var(--ink); }

.stir h1, .stir h2, .stir h3 { font-weight: 700; letter-spacing: -.035em; line-height: .96; }
/* Every page needs one h1. Outside the hero it is a section-scale
   title, not a display one. */
.stir h1, .stir h2 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -.025em; }
.stir h3, .stir h2.sub { font-size: var(--t-h3); line-height: 1.08; letter-spacing: -.025em; font-weight: 500; }
/* A real second level that wants the third level's scale — so the
   document outline stays h1 -> h2 without the type jumping. */
.stir p { max-width: 60ch; }
.stir strong, .stir b { font-weight: 500; }

/* ════════ C01 — Header compartments ════════════════════════════════
   Static at launch. A ruled, segmented row: brand cell at the left,
   destinations right-aligned, the commercial action in deep red. */
.stir .strip {
  border-bottom: 1px solid var(--ivory-25);
  padding: var(--s12) 0;
}
.stir .strip .wrap { display: flex; justify-content: space-between; gap: var(--s16); }

.stir .site-head { border-bottom: 1px solid var(--ivory-25); }
.stir .nav { display: flex; align-items: stretch; min-height: var(--nav-h); }

/* The brand cell is the header's half of the shared sign construction:
   a stepped ivory board, cobalt wordmark, two square mounting details —
   the same object as the sign on the building and in the footer. */
.stir .brand {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-width: 160px; margin: var(--s12) var(--s24) var(--s12) 0;
  padding: 6px 30px;
  background: var(--ivory);
  text-decoration: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px, 8px 8px);
}
.stir .brand img { height: 22px; width: auto; }
.stir .brand::before, .stir .brand::after {
  content: ''; position: absolute; top: 50%; margin-top: -2px;
  width: 4px; height: 4px; background: var(--cobalt);
}
.stir .brand::before { left: 10px; }
.stir .brand::after { right: 10px; }
/* A clip-path cuts the focus ring off, so the ring goes on the
   unclipped state and the steps stand down while it is shown. */
.stir .brand:focus-visible { clip-path: none; }

.stir .nav-links { margin-left: auto; display: flex; }
.stir .nav-links a {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s16) var(--s24);
  border-left: 1px solid var(--ivory-25);
  text-decoration: none;
  font: 400 var(--t-utility)/1 var(--utility);
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  transition: background-color var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.stir .nav-links a:hover, .stir .nav-links a:focus-visible { background: var(--ivory); color: var(--cobalt); }
.stir .nav-links .nav-start { background: var(--action); color: var(--ivory); }
.stir .nav-links .nav-start:hover, .stir .nav-links .nav-start:focus-visible {
  background: var(--action); color: var(--ivory);
  box-shadow: inset 0 0 0 2px var(--ivory);
}
/* Current destination is marked, not merely coloured. */
.stir .nav-links a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ivory); }
.stir .nav-links .nav-start[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--ivory); }

.stir .nav-menu {
  display: none; margin-left: auto; align-items: center;
  padding: var(--s16) 0 var(--s16) var(--s24);
  border-left: 1px solid var(--ivory-25);
  font: 400 var(--t-utility)/1 var(--utility);
  letter-spacing: .02em; text-transform: uppercase;
}
.stir .nav-panel { padding: var(--s12) 0 var(--s24); }
.stir .nav-panel[hidden] { display: none; }
.stir .nav-panel a {
  display: block; padding: var(--s12) 0;
  border-bottom: 1px solid var(--ivory-25);
  text-decoration: none; font-size: 18px;
}

/* ════════ C02 — Stepped action ═════════════════════════════════════
   Two 4px steps forming an 8px contour at opposing corners, a 2px
   ivory contour, a separate arrow compartment, and a 3px hard ink
   offset edge. Built from layered geometry: a border on a clipped
   rectangle loses the edges the clip removes. */
.stir .action {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: stretch; min-height: 56px;
  color: var(--ivory); text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink);
  margin: 0 3px 3px 0;
}
.stir .action::before, .stir .action::after {
  content: ''; position: absolute; z-index: -1;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px),
    calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 0 100%,
    0 8px, 4px 8px, 4px 4px, 8px 4px);
}
.stir .action::before { inset: 0; background: var(--ivory); }
.stir .action::after { inset: 2px; background: var(--action); }
.stir .action-label { display: flex; align-items: center; padding: 14px var(--s20); font-weight: 500; font-size: 17px; }
.stir .action-arrow {
  width: 52px; display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--ivory-40);
}
.stir .action:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.stir .action:disabled, .stir .action[aria-busy="true"] { opacity: .85; cursor: default; }
.stir .action:disabled:active, .stir .action[aria-busy="true"]:active {
  transform: none; box-shadow: 3px 3px 0 var(--ink);
}

/* One reusable arrow: 2px strokes, square caps, one right-angle point. */
.stir .arr {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter;
  transition: transform var(--t-step) steps(2, end);
}
.stir .action:hover .arr, .stir .action:focus-visible .arr { transform: translateX(4px); }

.stir .action-2 {
  display: inline-flex; align-items: center; gap: var(--s20);
  min-height: 56px; padding: 14px var(--s20);
  background: var(--ivory); color: var(--ink);
  border: 1px solid var(--ivory); text-decoration: none; font-size: 17px;
  transition: background-color var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.stir .action-2:hover, .stir .action-2:focus-visible { background: var(--cobalt); color: var(--ivory); }
.stir .action-3 {
  font-size: 17px; text-decoration: underline;
  text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: text-underline-offset var(--t-fast) ease-out,
              text-decoration-thickness var(--t-fast) ease-out;
}
.stir .action-3:hover, .stir .action-3:focus-visible { text-decoration-thickness: 2px; text-underline-offset: 7px; }
.stir .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s20); }

/* ════════ C03 — Three-way audience strip ═══════════════════════════ */
.stir .ways { position: relative; border: 2px solid var(--ivory); display: grid; grid-template-columns: repeat(3, 1fr); }
.stir .ways > a {
  display: flex; flex-direction: column; min-height: 280px;
  padding: 28px; text-decoration: none;
  transition: background-color var(--t-step) ease-out, color var(--t-step) ease-out;
}
.stir .ways > a + a { border-left: 1px solid var(--ivory); }
.stir .ways > a:hover, .stir .ways > a:focus-visible { background: var(--ivory); color: var(--ink); }
.stir .ways > a:focus-visible { outline-offset: -8px; outline-color: var(--cobalt); }
.stir .ways h3 { margin-bottom: var(--s16); }
.stir .ways p { font-size: 18px; max-width: 28ch; margin-bottom: 28px; }
.stir .ways .arr { margin-top: auto; margin-left: auto; }
.stir .ways > a:hover .arr, .stir .ways > a:focus-visible .arr { transform: translateX(4px); }
/* One mounting square, the same detail the sign carries. */
.stir .ways::before {
  content: ''; position: absolute; left: 12px; top: -5px;
  width: 8px; height: 8px; background: var(--ivory); pointer-events: none;
}
.stir .pixicon {
  width: 48px; height: 48px; margin-bottom: 28px;
  fill: currentColor; shape-rendering: crispEdges;
}

/* ════════ C04 — Evidence frame and information rail ════════════════ */
.stir .evidence { position: relative; border: 2px solid var(--ink); margin: 0; background: var(--ivory); }
.stir .evidence > img, .stir .evidence > video { width: 100%; height: auto; }
/* Stepped architectural joints at two opposing corners — one frame
   per screen, not a decoration applied to every section. */
.stir .evidence::before, .stir .evidence::after {
  content: ''; position: absolute; width: 12px; height: 12px;
  background: var(--ivory); box-shadow: 4px 4px 0 var(--ink); pointer-events: none;
}
.stir .evidence::before { left: -2px; top: -2px; }
.stir .evidence::after { right: -2px; bottom: -2px; transform: rotate(180deg); }
.stir .evidence figcaption {
  display: flex; justify-content: space-between; gap: var(--s16);
  padding: var(--s16); border-top: 2px solid var(--ink);
  font-size: 16px; color: var(--ink);
}
.stir .rail { border-top: 1px solid currentColor; margin-top: 28px; }
.stir .rail > div {
  display: flex; justify-content: space-between; gap: var(--s24);
  padding: 14px 0; border-bottom: 1px solid currentColor; font-size: 16px;
}
.stir .rail b { font-weight: 500; }

/* ════════ C05 — Reading spreads, dividers, links ═══════════════════ */
.stir .band { padding-block: clamp(56px, 8vw, 96px); }
.stir .band + .band { border-top: 1px solid var(--ivory-25); }
.stir .band--tight { border-top: 0; }
.stir .on-ivory + .on-ivory { border-top-color: var(--ink-35); }
.stir .band-head { display: flex; justify-content: space-between; gap: var(--s20); align-items: baseline; }
.stir .band h2 { margin: var(--s20) 0 var(--s32); max-width: 24ch; }
.stir .band > .wrap > .utility, .stir .band > .utility { display: block; }
.stir .lede { font-size: 22px; max-width: 54ch; }
.stir .two { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s64); align-items: start; }
.stir .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s48); }
.stir .three h3 { margin-bottom: var(--s12); }
.stir .three p { font-size: 18px; }
.stir a.inline { text-decoration: underline; text-underline-offset: 4px; }
.stir a.inline:hover { text-decoration-thickness: 2px; }

.stir .metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s32); margin-top: var(--s32); }
.stir .metric b { display: block; font-size: clamp(40px, 5vw, 72px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.stir .metric span { display: block; margin-top: var(--s12); font-size: 16px; max-width: 32ch; }

/* ════════ C06 — Inquiry controls ═══════════════════════════════════ */
.stir .field-row { margin-bottom: var(--s24); }
.stir .field-label { display: block; font-size: 16px; margin-bottom: var(--s8); }
.stir .field-note { font-size: 15px; margin-top: 6px; color: currentColor; opacity: .75; }
.stir .field {
  width: 100%; min-height: 52px; padding: var(--s16);
  background: var(--ivory); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 0; font-size: 18px;
}
.stir .field:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.stir .field[aria-invalid="true"] { border-width: 2px; border-color: var(--action); }
.stir .field-error { font-size: 16px; color: var(--action); margin-top: var(--s8); font-weight: 500; }
.stir .field-error[hidden] { display: none; }
.stir textarea.field { min-height: 120px; resize: vertical; }

/* A segmented group with a non-colour selected marker. */
.stir .seg { display: flex; flex-wrap: wrap; border: 1px solid var(--ink); }
.stir .seg label { position: relative; flex: 1 1 auto; }
.stir .seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.stir .seg span {
  display: flex; align-items: center; gap: var(--s8);
  min-height: 52px; padding: var(--s12) var(--s16); font-size: 17px;
  border-left: 1px solid var(--ink); white-space: nowrap;
}
.stir .seg label:first-child span { border-left: 0; }
.stir .seg span::before {
  content: ''; width: 12px; height: 12px; border: 1px solid var(--ink); flex: none;
}
.stir .seg input:checked + span { background: var(--cobalt); color: var(--ivory); }
.stir .seg input:checked + span::before { background: var(--ivory); border-color: var(--ivory); }
.stir .seg input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: -4px; }
.stir .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.stir .form-status { font-size: 16px; min-height: 24px; max-width: 65ch; margin-top: var(--s20); font-weight: 500; }

/* ════════ Hero ═════════════════════════════════════════════════════ */
.stir .hero { padding-block: clamp(40px, 6vw, 72px) 0; }
/* The band that follows the hero owns the whole gap, so the two
   paddings cannot compound. 48 desktop, 32 phone. */
.stir .band--tight { padding-top: 48px; }
/* The eyebrow is an h2 (it is genuinely the section heading), so it
   was picking up .band h2's 20px top margin and pushing the gap to 68. */
.stir .band--tight > .utility { display: block; margin: 0 0 16px; }
.stir .hero-grid { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: clamp(24px, 3.2vw, 56px); align-items: center; }
.stir .hero h1 { font-size: var(--t-h1); }
.stir .hero h1 span { display: block; }
.stir .hero .lede { margin-top: var(--s24); }
.stir .hero .actions { margin-top: var(--s32); }

.stir .stage {
  --stage-ar: 1.3226;                 /* 820 / 620, the render's aspect */
  position: relative; width: 100%; line-height: 0;
  max-width: min(100%, max(360px, calc((100svh - 300px) * var(--stage-ar))));
  margin-inline-start: auto;
}
/* The scene is one art pixel per CSS pixel and must scale by whole
   numbers; smooth resampling averages the palette snap, the ink
   contour and the dithered rim back into gradients. */
.stir .stage-still, .stir .stage-loop { image-rendering: pixelated; }
.stir .stage-still { width: 100%; height: auto; }
.stir .stage-loop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 600ms linear;
}
.stir .stage-loop.is-on { opacity: 1; }
.stir .stage-motion {
  position: absolute; right: 8px; bottom: 8px; display: none;
  font: 400 var(--t-utility)/1 var(--utility);
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--ivory); background: var(--ink); padding: 9px var(--s12);
  transition: background-color var(--t-fast) ease-out;
}
.stir .stage.has-loop .stage-motion { display: block; }
.stir .stage-motion:hover { background: var(--action); }

/* ════════ Footer ═══════════════════════════════════════════════════ */
.stir .site-foot { border-top: 1px solid var(--ivory-25); padding-block: var(--s48) var(--s64); }
.stir .foot-sign {
  position: relative; display: inline-flex; align-items: center;
  background: var(--ivory); padding: var(--s16) var(--s48); margin: 28px 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px, 8px 8px);
}
.stir .foot-sign img { height: clamp(40px, 6vw, 68px); width: auto; }
.stir .foot-sign::before, .stir .foot-sign::after {
  content: ''; position: absolute; top: 50%; margin-top: -4px;
  width: 8px; height: 8px; background: var(--cobalt);
}
.stir .foot-sign::before { left: 16px; }
.stir .foot-sign::after { right: 16px; }
.stir .foot-links { display: flex; flex-wrap: wrap; gap: var(--s24); font-size: 16px; }
.stir .foot-links a { text-decoration: underline; text-underline-offset: 4px; }

/* ════════ Motion score ═════════════════════════════════════════════
   Content is visible by default. The headline rises once; section
   titles rise once; nothing else moves on entry. */
@media (prefers-reduced-motion: no-preference) {
  .stir .reveal-h1 span { animation: rise 480ms var(--ease) both; }
  .stir .reveal-h1 span:nth-child(2) { animation-delay: 60ms; }
  .stir .reveal-h1 span:nth-child(3) { animation-delay: 120ms; }
  @keyframes rise { from { opacity: .8; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .stir h2[data-rise] { opacity: .85; transform: translateY(8px); transition: opacity 360ms var(--ease), transform 360ms var(--ease); }
  .stir h2[data-rise].is-in { opacity: 1; transform: none; }
}

/* ════════ Responsive ═══════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .stir { --t-body: 19px; }
  .stir .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s32); align-items: start; }
  .stir .band--tight { padding-top: 32px; }
  .stir .stage { --stage-ar: 1.1818; max-width: min(100%, 560px); margin-inline: auto 0; }
  .stir .two { grid-template-columns: 1fr; gap: var(--s32); }
  .stir .three { grid-template-columns: 1fr; gap: var(--s32); }
  .stir .ways > a { min-height: 240px; padding: var(--s24); }
}
@media (max-width: 767px) {
  .stir { --t-body: 18px; --nav-h: 64px; }
  .stir .nav-links { display: none; }
  .stir .nav-menu { display: flex; }
  /* Two utility lines will not share a phone row without wrapping the
     first one to three lines. The location stays; the descriptor is
     already the first thing the page says. */
  .stir .strip .wrap > :last-child { display: none; }
  .stir .brand { min-width: 132px; margin-right: var(--s16); padding: 5px 24px; }
  .stir .brand img { height: 19px; }
  .stir .ways { grid-template-columns: 1fr; }
  .stir .ways > a { min-height: 0; }
  .stir .ways > a + a { border-left: 0; border-top: 1px solid var(--ivory); }
  .stir .ways p { max-width: 32ch; }
  .stir .action, .stir .action-2 { min-height: 52px; }
  .stir .metrics { grid-template-columns: 1fr; gap: var(--s24); }
  .stir .band-head { flex-direction: column; gap: var(--s8); align-items: flex-start; }
  .stir .evidence figcaption { flex-direction: column; gap: var(--s8); }
  .stir .seg { display: block; }
  .stir .seg span { border-left: 0; border-top: 1px solid var(--ink); }
  .stir .seg label:first-child span { border-top: 0; }
  .stir .stage { margin-inline: 0; max-width: 100%; }
}
@media (max-width: 374px) {
  .stir { --gutter: 16px; }
  .stir .action-label { padding-inline: var(--s16); }
}
@media (prefers-reduced-motion: reduce) {
  .stir *, .stir *::before, .stir *::after { animation: none !important; transition: none !important; }
  .stir .action:hover .arr, .stir .action:focus-visible .arr, .stir .ways > a:hover .arr, .stir .ways > a:focus-visible .arr { transform: none; }
  .stir .action:active { transform: none; box-shadow: 3px 3px 0 var(--ink); }
  .stir .reveal-h1 span { opacity: 1; transform: none; }
  .stir h2[data-rise] { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   WORK — the evidence system
   The site's whole argument is that attention should pay, so the work
   has to be on it. These are the frames that hold it: the same stepped
   joints, 1px divisions and caption rails as the rest of the system,
   applied to real clips and real coverage.
   ════════════════════════════════════════════════════════════════════ */

/* A wall of framed outputs. Shared edges are drawn once: the outer
   frame is 2px, the divisions between tiles are 1px, and no tile
   carries its own box. */
.stir .wall {
  display: grid;
  grid-template-columns: repeat(var(--wall-cols, 3), 1fr);
  border: 2px solid currentColor;
}
.stir .tile { position: relative; display: flex; flex-direction: column; min-width: 0; }
.stir .tile + .tile { border-left: 1px solid currentColor; }
.stir .tile-frame {
  position: relative; display: block; width: 100%;
  /* The sources are 9:16, but a 9:16 tile three-up on a 1440 page is
     783px tall and the wall becomes a wall. 4:5 crops to the subject
     and keeps a row of three inspectable in one screen; the Watch link
     goes to the clip uncropped. */
  aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--ink); border: 0; padding: 0;
}
.stir .tile-frame img, .stir .tile-frame video {
  width: 100%; height: 100%; object-fit: cover;
}
.stir .tile-frame video { position: absolute; inset: 0; }
/* C04: an explicit Play label in a 48px control. No hover playback,
   no autoplay, and the poster is a real frame of the clip. */
.stir .tile-play {
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: center; gap: var(--s8);
  min-height: 48px; padding: 0 var(--s16);
  background: var(--ink); color: var(--ivory);
  font: 500 var(--t-utility)/1 var(--utility);
  letter-spacing: .02em; text-transform: uppercase;
  transition: background-color var(--t-fast) ease-out;
}
.stir .tile-play::before { content: ''; width: 8px; height: 8px; background: var(--signal); }
.stir .tile-frame:hover .tile-play, .stir .tile-frame:focus-visible .tile-play { background: var(--action); }
.stir .tile-frame[data-playing="true"] .tile-play::before { background: var(--ivory); }
.stir .tile-cap { padding: var(--s16); border-top: 1px solid currentColor; }
.stir .tile-cap b { display: block; font-weight: 500; font-size: 17px; }
.stir .tile-cap span { display: block; font: 400 var(--t-utility)/1.4 var(--utility); margin-top: 6px; opacity: .8; }
.stir .tile-cap a { display: inline-block; margin-top: var(--s8); font-size: 15px;
  text-decoration: underline; text-underline-offset: 4px; }
/* Stepped joints at two opposing corners of the wall — once per wall,
   not once per tile. */
.stir .wall { position: relative; }
.stir .wall::before, .stir .wall::after {
  content: ''; position: absolute; width: 12px; height: 12px;
  background: currentColor; pointer-events: none;
}
.stir .wall::before { left: -2px; top: -2px; }
.stir .wall::after { right: -2px; bottom: -2px; }
.stir .on-ivory .wall::before, .stir .on-ivory .wall::after { box-shadow: 4px 4px 0 var(--ivory); }

/* Press — rows, not cards. A publication, what it actually said, and
   where. The external arrow is reserved for real external links. */
.stir .press { border-top: 1px solid currentColor; }
.stir .press a {
  display: grid; grid-template-columns: minmax(0, 15ch) minmax(0, 1fr) auto auto;
  gap: var(--s24); align-items: baseline;
  padding: var(--s20) 0; border-bottom: 1px solid currentColor;
  text-decoration: none;
  transition: background-color var(--t-fast) ease-out, padding-inline var(--t-fast) ease-out;
}
.stir .press a:hover, .stir .press a:focus-visible { background: var(--ivory); color: var(--ink); padding-inline: var(--s16); }
.stir .on-ivory .press a:hover, .stir .on-ivory .press a:focus-visible { background: var(--cobalt); color: var(--ivory); }
.stir .press b { font-weight: 500; font-size: 18px; }
.stir .press .said { font-size: 17px; }
.stir .press .where { font: 400 var(--t-utility)/1.3 var(--utility); opacity: .75; text-align: right; }
.stir .press .go { font-size: 15px; }

/* Partnerships — two accounts, each named, with the relationship
   stated once underneath rather than implied by a logo. */
.stir .accounts { display: grid; grid-template-columns: repeat(2, 1fr); border: 2px solid currentColor; }
.stir .accounts > div { padding: var(--s24); }
.stir .accounts > div + div { border-left: 1px solid currentColor; }
.stir .accounts h3 { font-size: clamp(22px, 2vw, 30px); }
.stir .accounts span { display: block; margin-top: var(--s8); font: 400 var(--t-utility)/1.3 var(--utility); opacity: .8; }

/* One big line, alone, to break the band rhythm. */
.stir .statement { font-size: clamp(32px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -.03em;
  font-weight: 500; max-width: 20ch; }

/* An ink band: a third temperature, so the page is not only an
   alternation of cobalt and cream strips of equal weight. */
.stir .on-ink { background: var(--ink); color: var(--ivory); }
.stir .on-ink .press a:hover, .stir .on-ink .press a:focus-visible { background: var(--ivory); color: var(--ink); }

/* ── The headline's signage rule ───────────────────────────────
   The one looping thing in the interface, and it is the sign's own
   vocabulary rather than an invented effect: a mounting rule, two
   square fixings, blocks that advance in discrete steps, and a mark at
   the end of the track. Attention travelling toward the thing that
   pays.

   Louder than the first pass: the rule runs the width of the copy
   column instead of 34ch, the blocks are 12px instead of 8, there are
   two of them in convoy -- the brief's own "passing signal" is two
   squares advancing -- the cadence is 3.6s over eight positions
   instead of 5.6s over six, and the mark at the end answers when the
   lead block lands on it -- the track's last position is exactly the
   end mark's 12px, so the block covers it rather than needing a
   separate colour animation to announce the arrival. Still
   steps(1,end): no easing, no glow, no bounce, and the whole thing
   holds still under reduced motion. */
.stir .sign-rule {
  position: relative; height: 14px; margin-top: var(--s24);
  border-top: 2px solid var(--ivory-40);
}
.stir .sign-rule i { position: absolute; display: block; }
/* One fixing at the head of the track; the red mark is the one at
   the other end, so a second ivory square there was dead markup. */
.stir .sign-mount { top: -4px; left: 0; width: 6px; height: 6px; background: var(--ivory); }
.stir .sign-end { top: -6px; right: 0; width: 12px; height: 12px; background: var(--signal); }
.stir .sign-tick { top: -6px; left: 0; width: 12px; height: 12px; background: var(--ivory); }
.stir .sign-tick.trail { opacity: .5; }

@media (prefers-reduced-motion: no-preference) {
  .stir .sign-tick { animation: tick 3.6s steps(1, end) infinite; }
  /* One step behind the leader: the cycle is eight steps of 450ms, so
     a negative delay of seven of them trails by exactly one. */
  .stir .sign-tick.trail { animation-delay: -3.15s; }

  @keyframes tick {
    0%          { left: 0; }
    12.5%       { left: 13%; }
    25%         { left: 26%; }
    37.5%       { left: 39%; }
    50%         { left: 52%; }
    62.5%       { left: 65%; }
    75%         { left: 78%; }
    87.5%, 100% { left: calc(100% - 12px); }
  }
}

@media (max-width: 1023px) {
  .stir .wall { --wall-cols: 2; }
  .stir .press a { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s8); }
  .stir .press .said { grid-column: 1 / -1; }
  .stir .press .where { text-align: left; grid-column: 1; }
}
@media (max-width: 767px) {
  .stir .wall { --wall-cols: 1; }
  .stir .tile + .tile { border-left: 0; border-top: 1px solid currentColor; }
  .stir .tile-frame { aspect-ratio: 1 / 1; }
  .stir .accounts { grid-template-columns: 1fr; }
  .stir .accounts > div + div { border-left: 0; border-top: 1px solid currentColor; }
  .stir .sign-rule { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   THE STUDIO WORKBENCH
   One stepped outer frame, three adjacent compartments, shared edges
   drawn once. The same signage construction as the building's sign and
   the header cell, applied to the method.
   ════════════════════════════════════════════════════════════════════ */
.stir .bench {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px solid var(--ivory);
  margin-top: var(--s24);
}
.stir .bench-cell {
  display: flex; flex-direction: column;
  padding: clamp(28px, 2.2vw, 32px);
}
.stir .bench-cell + .bench-cell { border-left: 1px solid var(--ivory); }
/* The step, lifted out of two opposing corners of the whole frame —
   once, like the sign, not once per compartment. */
.stir .bench::before, .stir .bench::after {
  content: ''; position: absolute; width: 10px; height: 10px;
  background: var(--cobalt); pointer-events: none;
}
.stir .bench::before { left: -2px; top: -2px; }
.stir .bench::after { right: -2px; bottom: -2px; }

/* Aligned regions: illustration, heading, body, outcome — so the three
   read as one workbench rather than three cards. */
.stir .bench-slot { height: 96px; margin-bottom: var(--s24); }
.stir .bench-art { width: 96px; height: 96px; color: var(--ivory); shape-rendering: crispEdges; }
.stir .bench h3 { display: flex; gap: var(--s12); align-items: baseline; margin-bottom: var(--s12); }
.stir .bench h3 i { font-style: normal; color: var(--signal); font-size: var(--t-utility); font-family: var(--utility); }
.stir .bench p { font-size: 18px; max-width: 34ch; }
.stir .bench-out { margin-top: auto; padding-top: var(--s20); }
.stir .bench-out span {
  display: inline-block; border-top: 1px solid var(--ivory-40); padding-top: var(--s12);
  font-weight: 500; color: var(--ivory);
}

/* ── The three actions, each once on entry ───────────────────────────
   Decorative, so they are aria-hidden and nothing informational waits
   on them. Reduced motion gets the completed state. */
.stir .bench-pick { opacity: 0; }
.stir .bench-finder { transform-origin: 24px 24px; transform: scale(1.9); opacity: 0; }
.stir .bench-piece { transform-origin: 24px 24px; }
.stir .bench-pieces { shape-rendering: crispEdges; }
.stir .bench-piece.p1 { transform: translateX(-14px); }
.stir .bench-piece.p3 { transform: translateX(14px); }
.stir .bench-mounts, .stir .bench-steps { opacity: 0; }
.stir .bench-sheet .s2, .stir .bench-sheet .s3 { transform-origin: 22px 22px; transform: scaleX(0); }

@media (prefers-reduced-motion: no-preference) {
  /* Read the room — the finder steps in and the square is taken. */
  .stir .is-in[data-bench="read"] .bench-finder {
    animation: finder 240ms steps(2, end) forwards;
  }
  .stir .is-in[data-bench="read"] .bench-pick {
    animation: pick 1ms linear 240ms forwards;
  }
  @keyframes finder { to { transform: scale(1); opacity: 1; } }
  @keyframes pick   { to { opacity: 1; } }

  /* Set the scene — three pieces close up, then the fixings land. */
  .stir .is-in[data-bench="set"] .bench-piece {
    animation: assemble 320ms steps(3, end) forwards;
  }
  .stir .is-in[data-bench="set"] .bench-mounts, .stir .is-in[data-bench="set"] .bench-steps {
    animation: pick 1ms linear 320ms forwards;
  }
  @keyframes assemble { to { transform: translateX(0); } }

  /* Make it travel — the sheet extends in three discrete reaches. */
  .stir .is-in[data-bench="travel"] .bench-sheet .s2 {
    animation: reach 200ms steps(2, end) forwards;
  }
  .stir .is-in[data-bench="travel"] .bench-sheet .s3 {
    animation: reach 200ms steps(2, end) 200ms forwards;
  }
  @keyframes reach { to { transform: scaleX(1); } }
}
/* Completed state wherever the animation does not run: reduced motion,
   no JavaScript, or an observer that never fires. */
@media (prefers-reduced-motion: reduce) {
  .stir .bench-pick, .stir .bench-finder, .stir .bench-mounts, .stir .bench-steps { opacity: 1; }
  .stir .bench-finder { transform: scale(1); }
  .stir .bench-piece { transform: none; }
  .stir .bench-sheet .s2, .stir .bench-sheet .s3 { transform: scaleX(1); }
}
.stir html:not(.js) .bench-pick, .stir html:not(.js) .bench-finder, .stir html:not(.js) .bench-mounts, .stir html:not(.js) .bench-steps { opacity: 1; }
.stir html:not(.js) .bench-finder { transform: scale(1); }
.stir html:not(.js) .bench-piece { transform: none; }
.stir html:not(.js) .bench-sheet .s2, .stir html:not(.js) .bench-sheet .s3 { transform: scaleX(1); }

@media (max-width: 767px) {
  .stir .bench { grid-template-columns: 1fr; }
  .stir .bench-cell { padding: var(--s24); }
  .stir .bench-cell + .bench-cell { border-left: 0; border-top: 1px solid var(--ivory); }
  .stir .bench-slot { height: 72px; margin-bottom: var(--s20); }
  .stir .bench-art { width: 72px; height: 72px; }
  .stir .bench p { max-width: none; }
}

/* ════════════════════════════════════════════════════════════════════
   THE INTERIOR SCENES
   Two quieter views of the same building: the working room beside the
   founder introduction, the open seat beside the closing invitation.
   Both are stills. The hero stays the largest and the only one that
   moves — a second animation beside a call to action competes with it.
   ════════════════════════════════════════════════════════════════════ */
/* The track is written out rather than carried in a custom property:
   minmax(0, var(--art)) invalidates the whole declaration, and the
   grid silently collapses to a single column with the art at full
   width. Explicit percentages cannot do that. */
.stir .scene-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34%;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}
/* The working room sits beside a longer introduction, so it takes a
   little less of the row than the open seat does. */
.stir .scene-pair--seat { grid-template-columns: minmax(0, 1fr) 38%; }

.stir .scene-art { margin: 0; line-height: 0; position: relative; }
/* One art pixel per CSS pixel, scaled only by whole numbers — the same
   rule the hero needs, for the same reason. */
.stir .scene-art img, .stir .scene-loop { image-rendering: pixelated; }
.stir .scene-art img { width: 100%; height: auto; }
/* The loop lies over its own poster. The still underneath is what sets
   the height, so nothing reflows when the video arrives or is dropped. */
.stir .scene-loop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 600ms linear;
}
.stir .scene-loop.is-on { opacity: 1; }
/* The interiors' motion control, the same object as the hero's and
   gated on the same class, so a dropped loop takes its control with
   it rather than leaving a button that pauses nothing. */
.stir .scene-art.has-loop .stage-motion { display: block; }

@media (max-width: 1023px) {
  /* Text and its actions stay together and come first; the scene
     follows. The grid is single-column, so source order carries it. */
  .stir .scene-pair, .stir .scene-pair--seat { grid-template-columns: minmax(0, 1fr); row-gap: var(--s32); align-items: start; }
  .stir .scene-art { max-width: 520px; }
}

/* ════════════════════════════════════════════════════════════════════
   HOST LAYER — what Squarespace needs that Netlify does not.

   Appended after the scoped stylesheet. Everything here exists because
   the page is a Code Block inside somebody else's document, not
   because the design wants it.
   ════════════════════════════════════════════════════════════════════ */

/* 1 · Let the block out of its wrappers.
   Squarespace nests a page wrapper, a section, a row, a column and a
   block, each with its own padding and max-width. The design is
   full-bleed, so the block is pulled back to the viewport. */
.stir {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: none;
}
/* The ancestors still clip and pad. These are the wrappers Squarespace
   actually ships; the list is deliberately narrow so the rest of the
   site keeps its own layout. */
body:has(.stir) #sections,
body:has(.stir) .page-section,
body:has(.stir) .content-wrapper,
body:has(.stir) .sqs-layout,
body:has(.stir) .sqs-row,
body:has(.stir) .sqs-block,
body:has(.stir) .sqs-block-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  overflow: visible !important;
}
body:has(.stir) { overflow-x: hidden; background: #0451AB; }

/* 2 · Hide the host's own chrome on STIR pages.
   The design ships its own header and footer. Two of them on one page
   is the single most template-looking failure available. */
body:has(.stir) #header,
body:has(.stir) .header,
body:has(.stir) #footer-sections,
body:has(.stir) .sqs-announcement-bar-dropzone { display: none !important; }

/* 3 · Defensive reset.
   Squarespace styles elements directly — `h1 { font-family: ... }`,
   `a { color: ... }`, `ul { list-style: disc }` — and element
   selectors in their sheet beat our inherited values. Everything the
   design relies on is restated inside the scope. */
.stir, .stir *, .stir *::before, .stir *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
/* Colour, for everything, in one rule.
   Colour is inherited, and inheritance loses to ANY direct rule on the
   element — so a single `span { color: ... }` in the host's theme
   repaints text that never had a colour of its own in our stylesheet.
   Naming the elements one at a time does not work: the hero headline
   is built from <span>s, so defending h1 left the headline untouched
   and it rendered off-colour on cobalt anyway.
   `.stir *` is one class and beats a bare element selector. Every
   colour our own design sets is on a class inside .stir, which is
   more specific than this, so this restores normal inheritance
   without overriding anything we meant. */
.stir * { color: inherit; }
.stir h1, .stir h2, .stir h3, .stir h4, .stir p, .stir ul, .stir li,
.stir figure, .stir figcaption, .stir form, .stir fieldset, .stir blockquote {
  margin: 0; padding: 0; border: 0; background: none;
  font-family: inherit; letter-spacing: inherit; text-transform: none;
  /* Colour is inherited, and inheritance loses to ANY direct rule on
     the element. The host's theme sets a heading colour, so our ivory
     reached every heading on the standalone site and none of them
     here: the hero headline rendered near-black on cobalt. Restating
     it as `inherit` puts the cascade back the way the design assumes. */
  color: inherit;
}
.stir ul, .stir ol { list-style: none; }
.stir a { color: inherit; text-decoration: none; background: none; }
.stir a:hover { color: inherit; }
.stir img, .stir video, .stir svg { max-width: 100%; display: block; border: 0; }
.stir button, .stir input, .stir textarea, .stir select {
  font: inherit; color: inherit; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.stir button { background: none; border: 0; }
.stir strong, .stir b { font-weight: 500; color: inherit; }
.stir svg { fill: currentColor; stroke: currentColor; }

/* 4 · The header is fixed, not in flow.
   On Netlify the header is the first thing in the document. Here the
   document belongs to Squarespace, so the bar is pinned instead. */
.stir .site-head { position: sticky; top: 0; z-index: 40; background: var(--cobalt); }
.stir .strip { position: relative; z-index: 41; background: var(--cobalt); }