/* Interaktive narrative pass
   One idea, one dominant visual and one motivated interaction per section. */

:root {
  --story-radius: clamp(20px, 2.2vw, 34px);
  --story-gap: clamp(10px, 1vw, 16px);
  --story-blue: #3457d5;
  --section-display-size: var(--type-h2, clamp(40px, 3.8vw, 56px));
  --section-display-size-contained: clamp(34px, 3.2vw, 48px);
  --section-display-leading: .94;
  --section-display-tracking: -.045em;
  --section-space: clamp(64px, 5.5vw, 88px);
}

html[data-skin="kage"] {
  --story-panel: #f3eee5;
  --story-soft: #eee7dc;
}

html[data-skin="nocturne"] {
  --story-panel: #050a14;
  --story-soft: #0a101c;
}

/* Quiet the generic component language. */
.eyebrow::before { border-radius: 1px; box-shadow: none; }
.section-shader { opacity: .42; }
.section > .container { position: relative; z-index: 2; }
.section:not(#faq) { background-color: var(--paper); }

/* A single post-hero editorial type system. The hero intentionally stays independent. */
#work .work-head-title h2,
#process .pipeline-heading h2,
#partnership .partnership h2,
#packs .packs-head h2 {
  font-size: var(--section-display-size);
  line-height: var(--section-display-leading);
  letter-spacing: var(--section-display-tracking);
  text-wrap: balance;
}

#clients .client-proof-head h2,
#faq .faq-lab-main h2 {
  font-size: var(--section-display-size-contained);
  line-height: .97;
  letter-spacing: -.04em;
  text-wrap: balance;
}

/* 01. Proof: image-led, compact, and free of pill labels. */
#work.section {
  padding-block: var(--section-space) clamp(64px, 6vw, 90px);
  overflow: clip;
}

#work .work-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: clamp(28px, 5vw, 76px);
  row-gap: 24px;
  padding-top: 0;
  margin-bottom: clamp(30px, 3.5vw, 48px);
}

#work .work-head-title h2 {
  max-width: 13ch;
  margin-top: 16px;
}

#work .filter-bar {
  gap: 8px;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#work .filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  height: 42px;
  max-height: 42px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  color: var(--muted);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: none;
  touch-action: manipulation;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

#work .filter-button:hover {
  border-color: color-mix(in srgb, var(--action) 54%, transparent);
  background: color-mix(in srgb, var(--action) 8%, var(--surface));
  color: var(--ink);
}

#work .filter-button:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}

#work .filter-button[aria-pressed="true"] {
  border-color: var(--action);
  background: var(--action);
  color: var(--action-ink);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--action) 20%, transparent);
}

html[data-skin="nocturne"] #work .filter-button {
  border-color: color-mix(in srgb, var(--dark-ink) 20%, transparent);
  background: color-mix(in srgb, var(--dark-ink) 5%, transparent);
  color: color-mix(in srgb, var(--dark-ink) 72%, transparent);
}

html[data-skin="nocturne"] #work .filter-button:hover {
  border-color: color-mix(in srgb, var(--action) 60%, transparent);
  background: color-mix(in srgb, var(--action) 16%, transparent);
  color: var(--dark-ink);
}

html[data-skin="nocturne"] #work .filter-button[aria-pressed="true"] {
  border-color: var(--action);
  background: var(--action);
  color: var(--action-ink);
}

#work .work-stage-wrap {
  max-height: none;
  overflow: visible;
  padding-bottom: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

#work .work-mosaic {
  gap: var(--story-gap);
}

#work .work-col { gap: var(--story-gap); }
#work .work-row--2,
#work .work-row--3 { transform: none; }

#work .work-tile {
  border: 0;
  border-radius: clamp(12px, 1.4vw, 20px);
  box-shadow: none;
  transform: none;
}

#work .work-tile:hover { transform: none; box-shadow: none; }
#work .work-tile-media::after {
  position: absolute;
  inset: auto 0 0;
  height: 35%;
  background: linear-gradient(transparent, rgba(5, 10, 24, .68));
  content: "";
  pointer-events: none;
}

#work .tile-caption { display: none; }
#work .work-tile .placeholder-label {
  top: auto;
  right: 16px;
  bottom: 14px;
  left: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: .58rem;
  letter-spacing: .12em;
  backdrop-filter: none;
}

#work .work-tile:hover .placeholder-label { background: transparent; color: #fff; }
#work .work-tile {
  width: auto;
  padding: 0;
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#work .work-tile:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 4px;
}

#work .work-tile-media { display: block; }
#work .work-tile-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.03);
  transform: scale(1.002);
  transition: filter 400ms ease, transform 700ms var(--ease-out), opacity 260ms ease;
  pointer-events: none;
}

#work .work-tile:hover .work-tile-video,
#work .work-tile:focus-visible .work-tile-video,
#work .work-tile.is-playing .work-tile-video {
  filter: saturate(1.02) contrast(1.06);
  transform: scale(1.035);
}

#work .work-motion-mark {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(5, 10, 24, .54);
  color: #fff;
  font-family: var(--mono);
  font-size: .5rem;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

html.work-modal-open { overflow: hidden; }
.work-modal {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.5vw, 32px);
}

.work-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(4, 8, 18, .76);
  backdrop-filter: blur(18px);
  cursor: default;
}

.work-modal-card {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(1180px, 96vw);
  max-height: 94dvh;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: clamp(16px, 2vw, 26px);
  background: var(--paper);
  box-shadow: 0 42px 120px rgba(2, 7, 18, .42);
}

.work-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(18px, 2.2vw, 28px);
  border-bottom: 1px solid var(--line);
}

.work-modal-head .eyebrow { margin: 0 0 4px; }
.work-modal-head h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1;
}

.work-modal-close,
.work-modal-controls button {
  /* 44px: this is the only way out of a full-screen modal on a phone. */
  min-height: 44px;
  min-width: 44px;
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  color: var(--ink);
  font: 600 .72rem/1 var(--body);
  cursor: pointer;
}

.work-modal-stage {
  position: relative;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050914;
}

.work-modal-video,
.work-modal-interactive,
.work-modal-interactive iframe,
.work-modal-interactive img {
  display: block;
  width: 100%;
  height: 100%;
}

.work-modal-video { object-fit: contain; cursor: pointer; }
.work-modal-controls {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 8px;
}

.work-modal-controls button {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(5, 10, 24, .7);
  color: #fff;
  backdrop-filter: blur(12px);
}

.work-modal-interactive { position: relative; }
.work-modal-interactive iframe { border: 0; background: #f5f3ed; }
.work-modal-interactive img { object-fit: cover; opacity: .72; }
.work-modal-interactive::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 50%, rgba(4, 8, 18, .62));
  content: "";
  pointer-events: none;
}

.work-modal-interactive iframe:not([hidden]) + img + [data-work-modal-launch] { opacity: .72; }
.work-modal-interactive [data-work-modal-launch] {
  position: absolute !important;
  z-index: 3;
  right: 18px;
  bottom: 18px;
}

@media (max-width: 700px) {
  /* A phone was getting the project full-bleed, edge to edge with square
     corners — which reads as having left the site rather than having opened
     something on it. It stays a card: inset from all four edges, same rounded
     corner as everywhere else, with the page visible around it. */
  .work-modal { padding: 16px; }
  .work-modal-card {
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 32px);
    border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
    border-radius: 20px;
  }
  .work-modal-stage {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 0;
  }
  .work-modal-head { padding: 14px 16px; }
  /* Without a floor the frame collapses once the card stops filling the screen,
     since an iframe has no intrinsic height to flex from. */
  .work-modal-interactive { min-height: 58dvh; }
  .work-modal-interactive iframe { min-height: 58dvh; }
}

@media (prefers-reduced-motion: reduce) {
  #work .work-tile-video { transform: none !important; }
}

#work .work-note {
  max-width: 58ch;
  margin-top: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}

/* Catalogue use cases: show the operating system, not another stack of cards. */
#catalogue.section {
  padding-block: clamp(74px, 8vw, 122px);
  overflow: clip;
}

#catalogue .catalogue-cases-shell {
  display: grid;
  gap: clamp(28px, 3.2vw, 46px);
}

#catalogue .catalogue-cases-head {
  display: grid;
  gap: 18px;
  padding-bottom: clamp(8px, 1vw, 16px);
}

#catalogue .catalogue-cases-head > div {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .55fr);
  gap: clamp(28px, 7vw, 112px);
  align-items: end;
}

#catalogue .catalogue-cases-head h2 {
  max-width: 12.5ch;
  margin: 0;
  font-size: var(--section-display-size);
  line-height: var(--section-display-leading);
  letter-spacing: var(--section-display-tracking);
  text-wrap: balance;
}

#catalogue .catalogue-cases-head > div > p {
  max-width: 40ch;
  margin: 0;
  padding-bottom: .35em;
  color: var(--muted);
  font-size: var(--type-body);
  line-height: 1.85;
}

#catalogue .catalogue-case {
  --case-bg: #eee6da;
  --case-ink: #0d1734;
  --case-muted: #626978;
  --case-line: rgba(13, 23, 52, .15);
  --case-surface: rgba(255, 255, 255, .54);
  --case-accent: #4a61ff;
  position: relative;
  padding: clamp(24px, 3vw, 46px);
  overflow: hidden;
  border: 1px solid var(--case-line);
  border-radius: clamp(24px, 2.6vw, 38px);
  background:
    radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--case-accent) 14%, transparent), transparent 28%),
    var(--case-bg);
  color: var(--case-ink);
  box-shadow: 0 24px 70px rgba(12, 20, 42, .08);
}

#catalogue .catalogue-case--industrial {
  --case-bg: #0c1835;
  --case-ink: #f3eee5;
  --case-muted: rgba(243, 238, 229, .68);
  --case-line: rgba(166, 183, 255, .2);
  --case-surface: rgba(255, 255, 255, .055);
  --case-accent: #6e83ff;
  background:
    radial-gradient(circle at 20% 70%, rgba(62, 90, 230, .22), transparent 32%),
    linear-gradient(145deg, #0f2048, var(--case-bg) 58%);
  box-shadow: 0 28px 80px rgba(6, 13, 32, .18);
}

html[data-skin="nocturne"] #catalogue .catalogue-case--consumer {
  --case-bg: #111f42;
  --case-ink: #f3eee5;
  --case-muted: rgba(243, 238, 229, .68);
  --case-line: rgba(166, 183, 255, .18);
  --case-surface: rgba(255, 255, 255, .055);
  --case-accent: #7890ff;
  background:
    radial-gradient(circle at 78% 24%, rgba(69, 96, 238, .2), transparent 31%),
    var(--case-bg);
}

#catalogue .catalogue-case-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .58fr);
  gap: clamp(28px, 7vw, 108px);
  align-items: end;
  margin-bottom: clamp(28px, 3vw, 44px);
}

#catalogue .catalogue-case-index,
#catalogue .catalogue-stage-label,
#catalogue .catalogue-system-kicker,
#catalogue .catalogue-output figcaption {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .67rem;
  line-height: 1.4;
  letter-spacing: .105em;
  text-transform: uppercase;
}

#catalogue .catalogue-case-index {
  margin: 0 0 14px;
  color: var(--case-accent);
}

#catalogue .catalogue-case-head h3 {
  max-width: 13ch;
  margin: 0;
  color: var(--case-ink);
  font-size: clamp(2.15rem, 4vw, 4.5rem);
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: balance;
}

#catalogue .catalogue-case-head > p {
  max-width: 42ch;
  margin: 0;
  color: var(--case-muted);
  line-height: 1.58;
}

#catalogue .catalogue-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, .84fr) minmax(150px, .45fr) minmax(440px, 1.42fr);
  gap: clamp(20px, 2.4vw, 38px);
  align-items: center;
  min-height: clamp(470px, 39vw, 580px);
  margin: 0;
  padding: clamp(20px, 2.5vw, 36px);
  overflow: hidden;
  border: 1px solid var(--case-line);
  border-radius: clamp(20px, 2vw, 30px);
  background:
    linear-gradient(var(--case-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--case-line) 1px, transparent 1px),
    color-mix(in srgb, var(--case-surface) 74%, transparent);
  background-size: 64px 64px;
  isolation: isolate;
}

#catalogue .catalogue-flow::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 8%;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--case-accent) 15%, var(--case-accent) 85%, transparent);
  content: "";
  opacity: .44;
}

#catalogue .catalogue-case--industrial .catalogue-flow {
  grid-template-columns: minmax(440px, 1.42fr) minmax(150px, .45fr) minmax(240px, .84fr);
}

#catalogue .catalogue-case--industrial .catalogue-source { grid-column: 3; grid-row: 1; }
#catalogue .catalogue-case--industrial .catalogue-system { grid-column: 2; grid-row: 1; }
#catalogue .catalogue-case--industrial .catalogue-outputs { grid-column: 1; grid-row: 1; }

#catalogue .catalogue-source,
#catalogue .catalogue-outputs,
#catalogue .catalogue-system {
  position: relative;
  z-index: 2;
  min-width: 0;
}

#catalogue .catalogue-stage-label {
  display: block;
  margin-bottom: 12px;
  color: var(--case-muted);
}

#catalogue .catalogue-source-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--case-line);
  border-radius: 22px;
  background: var(--case-surface);
  box-shadow: 0 18px 42px rgba(5, 12, 32, .13);
}

#catalogue .catalogue-source-media::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,.2), transparent 45%);
  content: "";
  pointer-events: none;
}

#catalogue .catalogue-source-media img,
#catalogue .catalogue-output img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#catalogue .catalogue-source-copy {
  display: grid;
  gap: 5px;
  margin-top: 16px;
}

#catalogue .catalogue-source-copy strong {
  color: var(--case-ink);
  font-size: 1.05rem;
}

#catalogue .catalogue-source-copy span {
  color: var(--case-muted);
  font-size: .85rem;
  line-height: 1.45;
}

#catalogue .catalogue-system {
  display: grid;
  place-items: center;
  align-content: center;
  aspect-ratio: 1;
  padding: 24px;
  text-align: center;
}

#catalogue .catalogue-system::before,
#catalogue .catalogue-system::after,
#catalogue .catalogue-system-orbit {
  position: absolute;
  inset: 6%;
  border: 1px solid color-mix(in srgb, var(--case-accent) 54%, transparent);
  border-radius: 50%;
  content: "";
}

#catalogue .catalogue-system::after {
  inset: 16%;
  border-color: color-mix(in srgb, var(--case-accent) 24%, transparent);
}

#catalogue .catalogue-system-orbit {
  inset: 0;
  border-style: dashed;
  opacity: .48;
}

#catalogue .catalogue-system-kicker {
  position: relative;
  color: var(--case-accent);
}

#catalogue .catalogue-system strong {
  position: relative;
  margin-top: 12px;
  color: var(--case-ink);
  font-size: clamp(1.2rem, 1.65vw, 1.72rem);
  line-height: 1.06;
  letter-spacing: -.035em;
}

#catalogue .catalogue-system-note {
  position: relative;
  max-width: 18ch;
  margin-top: 14px;
  color: var(--case-muted);
  font-size: .73rem;
  line-height: 1.42;
}

#catalogue .catalogue-output-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  height: clamp(330px, 29vw, 430px);
}

#catalogue .catalogue-output {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--case-line);
  border-radius: 16px;
  background: var(--case-surface);
  box-shadow: 0 14px 32px rgba(5, 12, 32, .12);
}

#catalogue .catalogue-output::after {
  position: absolute;
  inset: 48% 0 0;
  background: linear-gradient(transparent, rgba(4, 9, 24, .75));
  content: "";
  pointer-events: none;
}

#catalogue .catalogue-output--portrait { grid-column: 1 / span 4; grid-row: 1 / span 2; }
#catalogue .catalogue-output--wide { grid-column: 5 / span 8; grid-row: 1; }
#catalogue .catalogue-output--square { grid-column: 5 / span 3; grid-row: 2; }
#catalogue .catalogue-output--banner { grid-column: 8 / span 5; grid-row: 2; }

#catalogue .catalogue-case--industrial .catalogue-output--wide { grid-column: 1 / span 8; }
#catalogue .catalogue-case--industrial .catalogue-output--portrait { grid-column: 9 / span 4; }
#catalogue .catalogue-case--industrial .catalogue-output--banner { grid-column: 1 / span 5; }
#catalogue .catalogue-case--industrial .catalogue-output--square { grid-column: 6 / span 3; }

#catalogue .catalogue-output:nth-child(2) img { object-position: 63% 48%; }
#catalogue .catalogue-output:nth-child(3) img { object-position: 28% 55%; }
#catalogue .catalogue-output:nth-child(4) img { object-position: 74% 42%; }

#catalogue .catalogue-output figcaption {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 11px;
  left: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: #fff;
  letter-spacing: .07em;
}

#catalogue .catalogue-output figcaption span { color: color-mix(in srgb, var(--case-accent) 78%, #fff); }

#catalogue .catalogue-scan {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: -16%;
  width: 14%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--case-accent) 25%, transparent), transparent);
  filter: blur(1px);
  opacity: 0;
  pointer-events: none;
}

#catalogue .catalogue-case-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(22px, 2.4vw, 34px);
  padding-top: clamp(18px, 2vw, 28px);
  border-top: 1px solid var(--case-line);
  color: var(--case-muted);
  font-size: .82rem;
  line-height: 1.45;
}

#catalogue .catalogue-case-proof span + span { padding-left: 18px; border-left: 1px solid var(--case-line); }
#catalogue .catalogue-case-proof strong { color: var(--case-ink); }

html.catalogue-enhanced #catalogue [data-catalogue-case] .catalogue-source,
html.catalogue-enhanced #catalogue [data-catalogue-case] .catalogue-system,
html.catalogue-enhanced #catalogue [data-catalogue-case] .catalogue-output,
html.catalogue-enhanced #catalogue [data-catalogue-case] .catalogue-case-proof {
  opacity: 0;
  transform: translateY(18px);
}

html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-source,
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-system,
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-output,
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-case-proof {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 640ms ease, transform 720ms cubic-bezier(.2,.75,.2,1);
}

html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-system { transition-delay: 120ms; }
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-output:nth-child(1) { transition-delay: 220ms; }
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-output:nth-child(2) { transition-delay: 300ms; }
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-output:nth-child(3) { transition-delay: 380ms; }
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-output:nth-child(4) { transition-delay: 460ms; }
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-case-proof { transition-delay: 520ms; }

html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-scan {
  animation: catalogue-scan 1850ms 260ms cubic-bezier(.24,.7,.2,1) both;
}

html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-system-orbit {
  animation: catalogue-orbit 20s linear infinite;
}

@keyframes catalogue-scan {
  0% { left: -16%; opacity: 0; }
  18% { opacity: .72; }
  82% { opacity: .5; }
  100% { left: 102%; opacity: 0; }
}

@keyframes catalogue-orbit { to { transform: rotate(360deg); } }

/* 02. Outcomes: sticky stack — empty intro, one card, longer holds. */
.outcome-tour { height: 420svh; }
.outcome-shell {
  gap: clamp(8px, 1.2vh, 14px);
  padding-block: clamp(10px, 1.6vh, 18px) clamp(10px, 1.6vh, 16px);
}
.outcome-head {
  display: grid;
  justify-items: center;
  gap: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  border: 0;
}

.outcome-head .eyebrow { display: none; }
.outcome-head h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(1.85rem, 3.8vw, 3.15rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.outcome-head > p { display: none; }

.outcome-progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  border: 0;
}
.outcome-jump,
.outcome-jump:first-child {
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--dark-ink) 40%, transparent);
}

.outcome-jump span { font-size: .72rem; }
.outcome-jump strong { font-size: 1.05rem; font-weight: 650; }

.outcome-jump[aria-current="step"] {
  background: transparent;
  color: var(--dark-ink);
}

.outcome-jump[aria-current="step"]::after { display: none; content: none; }
.outcome-jump[aria-current="step"] strong {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.outcome-deck {
  max-width: min(1120px, 100%);
  perspective: 1600px;
}
.outcome-card {
  width: min(100%, 1080px);
  height: min(66vh, 560px);
  min-height: 360px;
  border-color: color-mix(in srgb, var(--dark-ink) 18%, transparent);
  border-radius: var(--story-radius);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--dark-ink) 8%, transparent) 0%, transparent 46%),
    color-mix(in srgb, var(--dark) 52%, transparent);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .outcome-card {
    -webkit-backdrop-filter: blur(12px) saturate(1.12);
    backdrop-filter: blur(12px) saturate(1.12);
  }
}

.outcome-card[data-active="true"]::before { display: none; }
.outcome-card-body {
  opacity: 1;
  visibility: visible;
  max-width: min(52ch, 100%);
}
.outcome-card-label {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
}
.outcome-card-body p { display: block; }
.outcome-card-body ul {
  display: grid;
  gap: 10px;
  margin: clamp(8px, 1.6vh, 18px) 0 0;
  padding: 0;
  list-style: none;
}
.outcome-card-body li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0 0 0 1.15em;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: color-mix(in srgb, var(--dark-ink) 78%, transparent);
}
.outcome-card-body li::before {
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 1px;
  background: var(--accent);
  content: "";
}

@media (max-width: 900px) {
  .outcome-head h2 { white-space: normal; max-width: 16ch; }
}

@media (pointer: coarse) {
  .outcome-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

body { overflow-x: clip; }
.outcome-tour,
.outcome-sticky,
.outcome-shell,
.outcome-experience,
.outcome-deck { min-width: 0; max-width: 100%; }
.outcome-tour,
.outcome-sticky { overflow-x: clip; }

/* 03. Process: one-row flow with clear SVG steps. */
#process.section { padding-block: var(--section-space); }
#process .pipeline-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .5fr);
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: 12px;
  padding-top: 0;
  border: 0;
  margin-bottom: clamp(36px, 4vw, 56px);
}

#process .pipeline-heading .eyebrow { grid-column: 1 / -1; }
#process .pipeline-heading h2 {
  max-width: 16ch;
  margin-top: 0;
}

#process .pipeline-intro {
  align-self: end;
  max-width: 40ch;
  margin: 0;
  padding-bottom: .3em;
  color: color-mix(in srgb, var(--dark-ink) 68%, transparent);
  font-size: clamp(.94rem, 1.05vw, 1.05rem);
  line-height: 1.5;
}

#process .process-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

#process .process-flow-step {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: start;
  min-width: 0;
  margin: 0;
  padding: 0 10px 0 0;
}

#process .process-flow-step:not(:last-child)::after {
  position: absolute;
  top: 26px;
  left: calc(52px + 8px);
  right: 4px;
  height: 1px;
  background: color-mix(in srgb, var(--dark-ink) 22%, transparent);
  content: "";
}

#process .process-flow-step--approve:not(:last-child)::after {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent, #478aff) 18%, transparent),
    color-mix(in srgb, var(--accent, #478aff) 72%, transparent),
    color-mix(in srgb, var(--accent, #478aff) 18%, transparent)
  );
}

#process .process-flow-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid color-mix(in srgb, var(--dark-ink) 18%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--dark) 88%, #0a1224);
  color: color-mix(in srgb, var(--accent, #478aff) 88%, var(--dark-ink));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dark-ink) 10%, transparent);
}

#process .process-flow-icon svg {
  width: 28px;
  height: 28px;
}

#process .process-flow-num {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  color: color-mix(in srgb, var(--dark-ink) 42%, transparent);
}

#process .process-flow-label {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--dark-ink);
}

#process .process-flow-step p {
  max-width: 18ch;
  margin: 0;
  color: color-mix(in srgb, var(--dark-ink) 62%, transparent);
  font-size: .82rem;
  line-height: 1.4;
}

#process .process-flow-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 2px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--accent, #478aff) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #478aff) 14%, transparent);
  color: color-mix(in srgb, var(--accent, #478aff) 92%, var(--dark-ink));
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#process .process-flow-step--approve .process-flow-icon {
  border-color: color-mix(in srgb, var(--accent, #478aff) 48%, transparent);
  background: color-mix(in srgb, var(--accent, #478aff) 12%, transparent);
}

@media (max-width: 1100px) {
  #process .process-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 18px;
  }

  #process .process-flow-step:not(:last-child)::after { display: none; }
}

@media (max-width: 720px) {
  #process .pipeline-heading {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #process .process-flow {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  #process .process-flow { grid-template-columns: 1fr; }
}

/* 04. Monthly partnership: an editorial output board, not a SaaS dashboard. */
#partnership.section { padding-block: var(--section-space); overflow: clip; }
#partnership .partnership {
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(44px, 7vw, 120px);
  padding-block: 0;
  border: 0;
}

#partnership .partnership-copy { align-self: center; }
#partnership .partnership h2 { max-width: 10ch; }
#partnership .partnership-visual { min-height: clamp(480px, 55vw, 660px); }
#partnership .partnership-month--back,
#partnership .partnership-month--middle { display: none; }

#partnership .partnership-month--front {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#partnership .partnership-month--front > header {
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}

#partnership .partnership-track {
  padding: 14px 0 0;
  color: var(--muted);
}

#partnership .partnership-track::after { right: 0; left: 0; }
#partnership .partnership-weeks {
  position: relative;
  display: block;
  height: calc(100% - 98px);
  padding: 0;
}

#partnership .week-label { display: none; }
#partnership .calendar-piece {
  position: absolute;
  overflow: hidden;
  border: 0;
  border-radius: clamp(16px, 2vw, 26px);
  box-shadow: 0 26px 70px color-mix(in srgb, var(--ink) 18%, transparent);
  transition: transform 600ms var(--motion-ease);
}

#partnership .calendar-piece--square { top: 12%; left: 1%; width: 34%; height: 54%; transform: rotate(-2deg); }
#partnership .calendar-piece--portrait { top: 2%; left: 38%; width: 22%; height: 48%; transform: rotate(1.6deg); }
#partnership .calendar-piece--landscape { top: 23%; right: 0; width: 43%; height: 40%; transform: rotate(1deg); }
#partnership .calendar-piece--product { right: 16%; bottom: 0; width: 40%; height: 34%; transform: rotate(-1deg); }
#partnership .partnership-visual:hover .calendar-piece--square { transform: translateY(-5px) rotate(-2deg); }
#partnership .partnership-visual:hover .calendar-piece--portrait { transform: translateY(-8px) rotate(1.6deg); }
#partnership .partnership-visual:hover .calendar-piece--landscape { transform: translateY(-4px) rotate(1deg); }
#partnership .partnership-visual:hover .calendar-piece--product { transform: translateY(-7px) rotate(-1deg); }
#partnership .partnership-metrics { right: 0; bottom: -42px; }

/* 05. Packs: one comparison plane with aligned decisions. */
#packs.section:not(.packs-outcomes) { padding-block: var(--section-space); }
#packs .packs-head { padding-top: 0; border: 0; }
#packs .packs-head h2 { max-width: none; margin-top: 0; }
#packs:not(.packs-outcomes) .pack-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--story-radius);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}

#packs:not(.packs-outcomes) .pack {
  display: grid;
  grid-template-rows: auto auto minmax(4.2em, auto) auto auto;
  padding: clamp(22px, 2.3vw, 34px);
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

#packs .pack:last-child { border-right: 0; }
#packs:not(.packs-outcomes) .pack:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); transform: none; }
#packs .pack h3 { min-height: 0; }
#packs .pack-summary { min-height: 0; }
#packs .pack-price { align-self: end; }
#packs .pack .button {
  min-height: 46px;
  align-self: end;
  justify-content: center;
  border-radius: 999px;
  text-align: center;
}

#packs .pack-details { align-self: start; }
#packs .pack-policy { padding: 18px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; }

#packs .catalogue-program {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-top: clamp(28px, 3vw, 42px);
  padding: clamp(24px, 3vw, 42px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

#packs .catalogue-program h3 {
  margin: 10px 0 0;
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  line-height: .98;
  letter-spacing: -.045em;
}

#packs .catalogue-program > div > p:not(.pack-label),
#packs .catalogue-program-scope > p {
  max-width: 55ch;
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

#packs .catalogue-program-scope {
  display: grid;
  gap: 20px;
  justify-items: start;
}

#packs .catalogue-program-scope .button {
  min-height: 46px;
  white-space: nowrap;
}

/* Compare: rebuilt in compare-taste.css — keep section spacing only. */
#compare.section {
  padding-block: var(--section-space);
  padding-top: var(--section-heading-top);
}

/* 06. Client proof: one focused quote, not another card grid. */
#clients.section { padding-block: var(--section-space); }
#clients .client-review-showcase {
  min-height: min(70svh, 680px);
  overflow: hidden;
  border: 0;
  border-radius: var(--story-radius);
  background: linear-gradient(135deg, var(--proof-surface), var(--proof-bg));
  color: var(--proof-ink);
  box-shadow: none;
}

#clients .client-review-showcase::before { opacity: .55; }
#clients .client-proof-copy { align-self: center; }
#clients .client-proof-head h2 {
  max-width: 12ch;
  margin-top: 12px;
  color: var(--proof-ink);
}
#clients .client-proof-head > p:last-child,
#clients .client-review footer,
#clients .client-review-status {
  color: color-mix(in srgb, var(--proof-ink) 66%, transparent);
}
#clients .client-review blockquote,
#clients .client-review strong { color: var(--proof-ink); }

/* Reduced-transparency mode must treat the masthead as one surface. The
   previous rule painted only the desktop link row, creating a white block. */
@media (prefers-reduced-transparency: reduce) {
  .site-header .site-nav { background: transparent; }
  .site-header .site-nav.is-open { background: var(--paper); }
  .site-header.is-scrolled::before {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html.is-over-dark .site-header.is-scrolled::before { background: var(--dark); }
}

/* 07. FAQ and footer: quiet final decisions. */
#faq.section.studio-panel-tour { padding-block: 0; }
#faq.section:not(.studio-panel-tour) { padding-block: var(--section-space); }
#faq .faq-lab-layout { min-height: 560px; }
#faq .faq-lab-main h2 { max-width: 12ch; margin-top: 16px; }
#faq .faq-index button { border-radius: 0; }
/* Selected state lives in site.css (#faq dark band) — do not force
   accent-on-cream ink that fights the navy FAQ band. */

/* Theme changes colour, not the spacing system. */
html[data-skin="nocturne"] #packs.section,
html[data-skin="nocturne"] #process.section,
html[data-skin="nocturne"] #process-radial.section,
html[data-skin="nocturne"] #partnership.section,
html[data-skin="nocturne"] #clients.section {
  padding-top: var(--section-space);
}
html[data-skin="nocturne"] #faq.section:not(.studio-panel-tour) {
  padding-top: var(--section-space);
}

.site-footer { padding-top: 0; }
.footer-shell { max-width: 1480px; margin-inline: auto; }

@media (max-width: 1100px) {
  #packs .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #packs .pack:nth-child(2n) { border-right: 0; }
  #packs .pack:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 860px) {
  :root {
    --section-display-size: 40px;
    --section-display-size-contained: 34px;
    --section-space: clamp(58px, 10vw, 76px);
  }

  #work .work-head { grid-template-columns: 1fr; align-items: start; }
  #work .work-stage-wrap { max-height: none; -webkit-mask-image: none; mask-image: none; }
  #work .work-row--2,
  #work .work-row--3 { transform: none; }

  #catalogue .catalogue-cases-head > div,
  #catalogue .catalogue-case-head { grid-template-columns: 1fr; }
  #catalogue .catalogue-case-head > p { max-width: 56ch; }
  #catalogue .catalogue-flow,
  #catalogue .catalogue-case--industrial .catalogue-flow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    background-size: 52px 52px;
  }
  #catalogue .catalogue-flow::before {
    top: 12%;
    right: auto;
    bottom: 12%;
    left: 50%;
    width: 1px;
    height: auto;
    background: linear-gradient(transparent, var(--case-accent) 15%, var(--case-accent) 85%, transparent);
  }
  #catalogue .catalogue-case--industrial .catalogue-source,
  #catalogue .catalogue-case--industrial .catalogue-system,
  #catalogue .catalogue-case--industrial .catalogue-outputs { grid-column: auto; grid-row: auto; }
  #catalogue .catalogue-source,
  #catalogue .catalogue-outputs { width: 100%; }
  #catalogue .catalogue-source-media { aspect-ratio: 16 / 10; }
  #catalogue .catalogue-system { width: min(42vw, 230px); margin: 6px auto; }
  #catalogue .catalogue-output-grid { height: 410px; }

  .outcome-tour { height: auto; padding-block: 80px; }
  .outcome-head { justify-items: start; text-align: left; }
  .outcome-head > p { padding: 0; }

  #process .pipeline-heading { grid-template-columns: 1fr; row-gap: 14px; }
  #process .pipeline-heading .eyebrow { grid-column: auto; }
  #process .pipeline-intro { margin-top: 8px; padding: 0; }

  #partnership .partnership { grid-template-columns: 1fr; }
  #partnership .partnership-visual { min-height: 560px; }
  #partnership .partnership-metrics { bottom: -54px; }

  #packs .catalogue-program { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 640px) {
  #work .work-head-side { width: 100%; overflow-x: auto; }
  #work .filter-bar { width: max-content; gap: 7px; }
  #work .filter-button { height: 42px; min-height: 42px; max-height: 42px; padding: 0 14px; }

  #catalogue.section { padding-block: 64px; }
  #catalogue .catalogue-cases-head > div { grid-template-columns: 1fr; }
  #catalogue .catalogue-cases-head h2 { max-width: 11ch; }
  #catalogue .catalogue-case { padding: 20px; border-radius: 24px; }
  #catalogue .catalogue-case-head { margin-bottom: 24px; }
  #catalogue .catalogue-case-head h3 { max-width: 14ch; font-size: clamp(2.15rem, 11vw, 3.2rem); }
  #catalogue .catalogue-flow,
  #catalogue .catalogue-case--industrial .catalogue-flow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 16px;
    background-size: 44px 44px;
  }
  #catalogue .catalogue-flow::before {
    top: 12%;
    right: auto;
    bottom: 12%;
    left: 50%;
    width: 1px;
    height: auto;
    background: linear-gradient(transparent, var(--case-accent) 15%, var(--case-accent) 85%, transparent);
  }
  #catalogue .catalogue-case--industrial .catalogue-source,
  #catalogue .catalogue-case--industrial .catalogue-system,
  #catalogue .catalogue-case--industrial .catalogue-outputs { grid-column: auto; grid-row: auto; }
  #catalogue .catalogue-source,
  #catalogue .catalogue-outputs { width: 100%; }
  #catalogue .catalogue-source-media { aspect-ratio: 16 / 10; }
  #catalogue .catalogue-system { width: min(52vw, 210px); margin: 6px auto; }
  #catalogue .catalogue-output-grid { height: 390px; }
  #catalogue .catalogue-case-proof { grid-template-columns: 1fr; gap: 12px; }
  #catalogue .catalogue-case-proof span + span { padding: 12px 0 0; border-top: 1px solid var(--case-line); border-left: 0; }

  #partnership .partnership-visual { min-height: 470px; }
  #partnership .calendar-piece--square { width: 46%; height: 48%; }
  #partnership .calendar-piece--portrait { left: 49%; width: 30%; height: 42%; }
  #partnership .calendar-piece--landscape { top: 38%; width: 58%; height: 34%; }
  #partnership .calendar-piece--product { right: 25%; width: 50%; height: 30%; }

  #packs .pack-grid { grid-template-columns: 1fr; }
  #packs .pack,
  #packs .pack:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  #packs .pack:last-child { border-bottom: 0; }
  #packs .pack { grid-template-rows: auto; }
  #packs .pack-summary { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #partnership .calendar-piece,
  #partnership .partnership-visual:hover .calendar-piece,
  #work .work-tile-media img { transition: none; transform: none; }
  #work .work-tile:hover .work-tile-media img { transform: none; }
  #catalogue .catalogue-source,
  #catalogue .catalogue-system,
  #catalogue .catalogue-output,
  #catalogue .catalogue-case-proof {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  #catalogue .catalogue-scan,
  #catalogue .catalogue-system-orbit { animation: none !important; }
}

/* Compact homepage sampler: three equal-height rows with staggered tile widths. */
#work .work-stage-wrap {
  overflow: visible;
  padding: 0;
}

#work .work-stage-wrap::before,
#work .work-stage-wrap::after { display: none; }

/* ---- work mosaic: flat-edged bento masonry ---------------------------
   Was a 12-column, 3-row bento pinned to a fixed viewport height with a
   grid-column span hand-written per tile position. A tile spanning 3-6 of 12
   columns inside a third of a fixed height is a landscape box, and the fixed
   height is what cropped cards to fit the section instead of sizing the
   section to the cards.

   This is a row-unit grid: columns are equal width, rows are a small fixed
   unit, and each tile spans a number of those units. Two things fall out of
   that, and they are the two things a plain masonry cannot do at once:

   - Card heights vary freely, because a span is just a number.
   - Every column can be made to sum to the SAME number of units, which puts
     the bottom edge of the last card in every column on one line. The top
     edge is already shared. So the block is flat on both sides while staying
     uneven inside.

   app.js assigns the spans, because the sums have to be recomputed whenever
   the tile count changes — which a filter does on every click. Without JS the
   default span below gives a plain even grid, which is a correct if duller
   layout rather than a broken one. */
#work .work-mosaic {
  --work-cols: 5;
  --work-gutter: clamp(10px, 1.1vw, 16px);
  /* The quantum every card height is a multiple of. Small enough that spans
     can differ by a visible amount without jumping a whole card size. */
  --work-row: clamp(22px, 2.6vh, 34px);
  display: grid;
  width: 100%;
  height: auto;
  grid-template-columns: repeat(var(--work-shown, var(--work-cols)), minmax(0, 1fr));
  grid-auto-rows: var(--work-row);
  gap: var(--work-gutter);
  align-items: stretch;
  perspective: none;
  /* No bottom fade any more. It existed to disguise ragged column ends, and
     the columns are level now — a fade over a flat edge just looks like the
     section is dissolving. */
  -webkit-mask-image: none;
  mask-image: none;
}

/* The wrappers survive only as markup: their children are the grid items. */
#work .work-row,
#work .work-col { display: contents; }

#work .work-tile,
#work .work-row .work-tile {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  /* The span is the height. An aspect-ratio here would fight it and win,
     since site.css sets one from --ar at higher specificity. */
  aspect-ratio: auto;
  grid-row: span 8;
  overflow: hidden;
  transform: none;
}

/* ---- layout placeholders --------------------------------------------
   Visibly empty on purpose. They are holding three rows open until there is
   real work to put in them, and nothing about them should read as a project:
   no media, no hover, no pointer. */
#work .work-tile--placeholder {
  border: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

#work .work-tile--placeholder .work-tile-media {
  display: grid;
  place-content: center;
  gap: 8px;
  height: 100%;
  background: none;
}

#work .work-placeholder-mark {
  font-family: var(--mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--ink) 34%, transparent);
  text-align: center;
}

#work .work-tile--placeholder .placeholder-label {
  position: static;
  padding: 0;
  background: none;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  text-align: center;
}

#work article.work-tile { cursor: default; }
#work button.work-tile { cursor: pointer; }
#work .work-tile-media { height: 100%; }

#work .work-row .work-tile.spotlight-surface:hover {
  z-index: 1;
  transform: none;
}

#work .work-open-mark { display: none !important; }

@media (max-width: 900px) {
  /* Same masonry, fewer columns. The full-bleed span-2 accents are gone: a
     card that crosses both columns is a horizontal card, which is the shape
     this section is deliberately no longer using. Unevenness now comes from
     the three portrait ratios instead. */
  #work .work-mosaic {
    --work-cols: 2;
    --work-gutter: 12px;
  }
}

@media (max-width: 640px) {
  #work .work-mosaic {
    --work-cols: 2;
    --work-gutter: 10px;
  }
}

/* Shared section-header system: Work, Catalogue, Compare and Outcomes use one edge and scale. */
:root {
  --section-heading-size: clamp(3.25rem, 4.1vw, 4.75rem);
  --section-heading-gap: clamp(40px, 6vw, 88px);
  --section-heading-copy-size: clamp(.96rem, 1vw, 1.05rem);
  --section-heading-top: clamp(64px, 5.5vw, 88px);
}

/* The headline—not a decorative eyebrow—sets the start of each major section. */
#work.section,
#compare.section {
  padding-top: var(--section-heading-top);
}

.outcome-shell {
  padding-top: clamp(10px, 1.6vh, 18px);
}

#work .work-head-title h2 {
  max-width: 15ch;
  margin-top: 0;
  font-size: var(--section-heading-size);
  line-height: .95;
  letter-spacing: -.045em;
  text-wrap: balance;
}

#compare.compare-story .compare-head {
  margin: 0 0 clamp(20px, 2.4vw, 32px);
}

#compare .compare-head > p {
  width: auto;
  max-width: 46ch;
  margin: 14px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: var(--section-heading-copy-size);
  line-height: 1.5;
}

#work .work-head { margin-bottom: clamp(30px, 2.6vw, 38px); }

.outcome-head h2 {
  max-width: none;
  margin-top: 0;
  font-size: clamp(1.85rem, 3.8vw, 3.15rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.outcome-head {
  width: 100%;
  max-width: none;
  display: grid;
  justify-items: center;
  grid-template-columns: none;
  align-items: start;
  gap: 0;
  margin-inline: 0;
  margin-bottom: 0;
  text-align: center;
}

.outcome-head > p {
  width: auto;
  max-width: 42ch;
  margin: 0;
  padding: 0;
  color: color-mix(in srgb, var(--dark-ink) 62%, transparent);
  font-size: clamp(.9rem, 1.1vw, 1.02rem);
  line-height: 1.45;
}

@media (max-width: 860px) {
  :root {
    --section-heading-size: clamp(2.5rem, 10.5vw, 3.5rem);
    --section-heading-top: clamp(58px, 10vw, 72px);
  }

  .outcome-tour { padding-top: 0; }

  .outcome-head {
    justify-items: start;
    text-align: left;
    gap: 12px;
  }

  #compare .compare-head > p,
  .outcome-head > p {
    max-width: 56ch;
    padding: 0;
  }
}

/* Catalogue strip removed — folded into Interactive card */
#packs .catalogue-program { display: none !important; }

/* Works interactive: spinning 3D badge (top-right) */
#work .work-tile-media {
  position: relative;
}
#work .work-3d-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px 7px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 12, 22, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  color: #fff;
  pointer-events: none;
  line-height: 1;
}
#work .work-3d-badge__scene {
  width: 16px;
  height: 16px;
  perspective: 48px;
  display: grid;
  place-items: center;
}
#work .work-3d-badge__cube {
  position: relative;
  width: 10px;
  height: 10px;
  transform-style: preserve-3d;
  animation: work-3d-spin 5.2s linear infinite;
}
#work .work-3d-badge__face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 1px;
  backface-visibility: hidden;
}
#work .work-3d-badge__face--front  { background: rgba(210, 225, 255, 0.92); transform: translateZ(5px); }
#work .work-3d-badge__face--back   { background: rgba(120, 150, 220, 0.85); transform: rotateY(180deg) translateZ(5px); }
#work .work-3d-badge__face--right  { background: rgba(150, 180, 245, 0.9);  transform: rotateY(90deg) translateZ(5px); }
#work .work-3d-badge__face--left   { background: rgba(95, 125, 200, 0.88);  transform: rotateY(-90deg) translateZ(5px); }
#work .work-3d-badge__face--top    { background: rgba(255, 255, 255, 0.95); transform: rotateX(90deg) translateZ(5px); }
#work .work-3d-badge__face--bottom { background: rgba(70, 95, 160, 0.9);    transform: rotateX(-90deg) translateZ(5px); }
#work .work-3d-badge__label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.92;
}
@keyframes work-3d-spin {
  from { transform: rotateX(-18deg) rotateY(0deg); }
  to   { transform: rotateX(-18deg) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  #work .work-3d-badge__cube { animation: none; transform: rotateX(-18deg) rotateY(-28deg); }
}

/* Product stills that need inset so subject stays inside rounded card */
#work .work-tile--still-pad .work-tile-media {
  background: #ececec;
  overflow: hidden;
}
#work .work-tile--still-pad .work-tile-media > img {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
}

/* Interactive: full-bleed media, no hover zoom.
   Do NOT force aspect-ratio — grid row-span owns height; 1/1 !important
   made filtered Interactive cards huge with empty top bands. */
#work .work-tile[data-work-kind="interactive"] .work-tile-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* The render's own backdrop, sampled from the top and bottom edges of the
     files, so the band left by contain reads as more studio sweep rather than
     a strip of flat page colour behind a floating picture. */
  background: linear-gradient(180deg, #c7cacd 0%, #c3c6ca 55%, #c0c3c7 100%) !important;
  overflow: hidden !important;
}
#work .work-tile[data-work-kind="interactive"] {
  position: relative;
  overflow: hidden;
}
#work .work-tile[data-work-kind="interactive"] .work-tile-media > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* Contain, not cover. These are single-object studio renders, and cover cut
     the sides off the product whenever the masonry handed the tile a shape
     other than the square the render is. */
  object-fit: contain !important;
  object-position: center !important;
  /* Both renders sit small in a lot of sweep. A 15% push in brings the product
     closer without touching the files: contain already fits the whole object,
     and the subjects reach only 79% and 78% of the frame, so the 6.5% trimmed
     from each edge is backdrop. transform, not a re-crop, so the amount stays
     one number to change. */
  transform: scale(1.3) !important;
  transform-origin: center !important;
  transition: none !important;
  padding: 0 !important;
}
/* Hover holds the same framing. This rule existed to cancel the grid's hover
   zoom, and `none` did that when the image had no transform of its own — but
   the product is pushed in now, so cancelling it made the picture shrink back
   the moment you pointed at it. It has to repeat the resting scale, not clear
   it. Both values are the same number on purpose: nothing moves on hover. */
#work .work-tile[data-work-kind="interactive"]:hover .work-tile-media > img,
#work .work-tile[data-work-kind="interactive"]:focus-visible .work-tile-media > img,
#work .work-tile[data-work-kind="interactive"]:active .work-tile-media > img {
  transform: scale(1.3) !important;
}