/* Studio Frix — shared styles.
   Layout: inset rounded "frames" stacked down the page (hero, dark statement stage, light panels, image footer),
   a floating pill nav. Type is one family, Archivo, used two ways (18 Oct 2026):
   short titles (a few words) in black condensed caps (.display, .punch), anything that reads
   as a sentence in medium condensed sentence case (.h2, .h3, card titles, statements). */

/* The FRIX* logo face. No longer used by page text; only the home 3D clapperboard draws with it. */
/* Archivo, self-hosted (GDPR: no Google Fonts CDN). Variable font, wdth 62–125, wght 100–900.
   Files are Google Fonts' v25 subsets; latin-ext covers anything beyond basic Latin. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "URW Form";
  src: url("../fonts/URWFormSemiCond-HeavyItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* colour */
  --ink: #0a0e17;          /* blue-biased near black */
  --ink-2: #161d2c;        /* raised dark surface */
  --paper: #f3f4f7;        /* cool off-white page */
  --panel: #e7eaf0;        /* recessed light panel */
  --white: #ffffff;
  --accent: #ff5a1f;       /* signature orange: links, highlights, buttons, the FRIX* mark */
  --accent-deep: #d9430f;
  --accent-soft: #ffe1d4;
  --spark: #2381ff;        /* FRIX blue, now the complement: the spark. Use sparingly (~10%) */
  --mist: #c8cfdb;         /* cool grey tile */
  --muted: #5b6477;
  --muted-on-ink: #8a93a6;
  --line: rgba(10, 14, 23, 0.12);
  --line-on-ink: rgba(255, 255, 255, 0.14);

  /* type */
  --sans: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: var(--sans);  /* always with font-weight 900 + font-stretch 62% (Archivo's narrowest) */

  --fs-label: 14px;
  --fs-small: 15px;
  --fs-body: 17px;
  --fs-lead: clamp(18px, 1.5vw, 21px);
  --fs-h3: clamp(22px, 2vw, 30px);
  --fs-h2: clamp(32px, 3.6vw, 58px);
  --fs-statement: clamp(30px, 3.4vw, 54px);
  --fs-display: clamp(48px, 6.6vw, 112px);

  /* shape + space */
  --gutter: clamp(16px, 2.4vw, 32px);
  --frame: clamp(8px, 0.8vw, 12px);
  --r-frame: clamp(16px, 1.8vw, 26px);
  --r-card: 18px;
  --skew: -9deg;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; font-stretch: 62%; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--white); }

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── labels, chips, buttons ───────── */
.label {
  font-family: var(--sans); font-stretch: 62%; font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-stretch: 62%; font-weight: 600; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--muted);
  justify-self: start;
}
.chip::before { content: ""; width: 8px; height: 8px; background: var(--accent); }
.on-ink .chip { color: var(--muted-on-ink); }
/* over photos and video the label needs full contrast */
:is(.hero, .page-hero--image, .quote-frame, .footer) .chip { color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 10px rgba(10, 14, 23, 0.5); }

.btn {
  display: inline-flex; align-items: stretch; gap: 4px;
  text-decoration: none;
  font-family: var(--sans); font-stretch: 62%; font-weight: 600; font-size: 18px; letter-spacing: 0.01em;
}
.btn > span {
  display: inline-flex; align-items: center;
  padding: 0 18px; min-height: 44px;
  border-radius: 10px;
  background: var(--ink); color: var(--white);
  transition: background 0.3s var(--ease);
}
.btn > i {
  display: inline-grid; place-items: center;
  width: 44px; min-height: 44px; border-radius: 10px;
  background: var(--accent); color: var(--white);
  font-style: normal; font-family: var(--sans); font-stretch: 100%; font-size: 18px;
  transition: transform 0.4s var(--ease), background 0.3s var(--ease);
}
.btn--light > span { background: var(--white); color: var(--ink); }
.btn--accent > span { background: var(--accent); }
.btn--accent > i { background: var(--ink); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-stretch: 62%; font-weight: 600; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase;
  text-decoration: none;
}
.link-arrow::after { content: "→"; font-family: var(--sans); transition: transform 0.3s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ───────── nav ───────── */
.nav {
  position: fixed; z-index: 50;
  top: calc(env(safe-area-inset-top, 0px) + var(--frame) + 10px);
  left: 0; right: 0;
  padding-inline: calc(var(--frame) + 10px);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav__logo {
  display: inline-flex; align-items: center;
  height: 44px;
  border-radius: 8px;
}
.nav__logo img {
  height: clamp(32px, 3vw, 40px); width: auto;
  filter: drop-shadow(0 1px 8px rgba(10, 14, 23, 0.25));
  transition: filter 0.35s var(--ease);
}
/* white logo by default; JS adds .nav--on-light when the logo sits over a light surface */
.nav--on-light .nav__logo img { filter: brightness(0) drop-shadow(0 0 0 transparent); }
.nav__links {
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 12px;
  box-shadow: 0 1px 0 var(--line);
}
.nav__links a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border-radius: 9px; text-decoration: none;
  font-family: var(--sans); font-stretch: 62%; font-weight: 600; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink);
  transition: background 0.25s var(--ease);
}
.nav__links a:hover { background: var(--panel); }
.nav__links a[aria-current="page"] { background: var(--accent-soft); }
.nav__links a.nav__cta { background: var(--ink); color: var(--white); }
.nav__links a.nav__cta:hover { background: var(--spark); }
.nav__toggle { display: none; }

@media (max-width: 760px) {
  .nav__links {
    position: fixed; inset: auto calc(var(--frame) + 10px) auto calc(var(--frame) + 10px);
    top: calc(env(safe-area-inset-top, 0px) + var(--frame) + 62px);
    flex-direction: column; align-items: stretch; padding: 8px;
    opacity: 0; transform: translateY(-8px); visibility: hidden;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }
  .nav__links a { min-height: 48px; font-size: 13px; }
  .nav.is-open .nav__links { opacity: 1; transform: none; visibility: visible; }
  .nav__toggle {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; border: 0; border-radius: 12px;
    background: var(--ink); color: var(--white); cursor: pointer;
  }
  .nav__toggle span, .nav__toggle span::before {
    display: block; width: 18px; height: 2px; background: currentColor; position: relative;
    transition: transform 0.3s var(--ease);
  }
  .nav__toggle span::before { content: ""; position: absolute; top: 6px; left: 0; }
  .nav__toggle span { transform: translateY(-3px); }
  .nav.is-open .nav__toggle span { transform: rotate(45deg); }
  .nav.is-open .nav__toggle span::before { transform: translateY(-6px) rotate(-90deg); }
}

/* ───────── frames ───────── */
.frame {
  margin: var(--frame);
  border-radius: var(--r-frame);
  overflow: hidden;
  overflow: clip; /* clip, not hidden: keeps position: sticky working inside frames */
  position: relative;
}
.on-ink { background: var(--ink); color: var(--white); }

/* ───────── hero (home) ───────── */
.hero {
  min-height: max(620px, 92svh);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--white);
  background: var(--ink);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img, .hero__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
  transition: opacity 1.6s ease, transform 7s linear;
}
.hero__media img.is-active, .hero__media video.is-active { opacity: 1; transform: scale(1); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,14,23,0.55) 0%, rgba(10,14,23,0) 28%),
    linear-gradient(0deg, rgba(10,14,23,0.78) 0%, rgba(10,14,23,0.18) 42%, rgba(10,14,23,0) 70%);
}
.hero__body {
  padding: clamp(110px, 14vh, 160px) clamp(16px, 2.6vw, 40px) clamp(20px, 3vw, 40px);
  display: grid; gap: clamp(28px, 4vw, 56px);
}
/* PUNCH: black condensed caps, only for titles of a few words */
.display, .punch {
  font-family: var(--display);
  font-weight: 900; font-stretch: 62%;
  line-height: 0.84;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.display { font-size: var(--fs-display); }
.display em, .punch em { font-style: normal; color: var(--accent); }
.hero .display { font-size: clamp(48px, 6.4vw, 108px); }
.hero__foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.hero__lead { max-width: 34ch; font-size: var(--fs-lead); line-height: 1.4; color: rgba(255,255,255,0.88); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero__caption {
  position: absolute; top: calc(var(--frame) + 74px); right: clamp(16px, 2.6vw, 40px);
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.75);
}
.hero__caption b { font-weight: 700; color: var(--white); }
.hero__dots { display: flex; gap: 4px; }
.hero__dots span { width: 16px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.3); transition: background 0.4s; }
.hero__dots span.is-active { background: var(--accent); }
@media (max-width: 760px) { .hero__caption { display: none; } }

/* ───────── statement stage (scroll reveal) ───────── */
.stage { position: relative; }
.stage__track { height: calc(var(--count, 3) * 100svh); }
.stage__sticky {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-rows: auto 1fr; gap: 24px;
  padding: clamp(84px, 11vh, 120px) clamp(16px, 2.6vw, 40px) clamp(24px, 5vh, 56px);
}
.stage__bar { position: absolute; left: 0; right: 0; top: clamp(128px, 15vh, 160px); height: 1px; background: var(--line-on-ink); }
.stage__bar i { display: block; height: 1px; width: calc(var(--p, 0) * 100%); background: var(--accent); }
/* 3D layer (assets/js/stage3d.js) sits behind the chip, bar and statements */
.stage__3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.stage__sticky > .chip, .stage__grid { position: relative; z-index: 1; }
.stage__bar { z-index: 1; }
.stage__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
  gap: 24px; align-items: start; padding-top: clamp(40px, 7vh, 72px);
}
.stage__count {
  justify-self: start;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-on-ink);
  color: var(--muted-on-ink); font-variant-numeric: tabular-nums;
}
.stage__count b { color: var(--white); font-weight: 700; }
.stage__texts { position: relative; min-height: 4.6em; font-size: var(--fs-statement); }
.statement {
  position: absolute; inset: 0 auto auto 0;
  font-size: var(--fs-statement); line-height: 0.98; letter-spacing: -0.01em;
  font-weight: 500; font-stretch: 62%;
  max-width: 24ch;
  opacity: 0; transition: opacity 0.12s ease;
}
.statement.is-active { opacity: 1; transition: opacity 0.3s ease 0.12s; }
.statement .w { color: rgba(255,255,255,0.22); transition: color 0.25s ease; }
.statement .w.is-lit { color: var(--white); }
.statement .w.is-accent.is-lit { color: var(--accent); }
@media (max-width: 760px) {
  .stage__grid { grid-template-columns: 1fr; }
}
/* No sticky theatre for reduced motion: every statement simply sits on the page, fully lit. */
@media (prefers-reduced-motion: reduce) {
  .stage__track { height: auto; }
  .stage__sticky { position: static; height: auto; }
  .stage__texts { min-height: 0; display: grid; gap: 40px; }
  .statement { position: static; opacity: 1; }
  .statement .w { color: var(--white); }
  .stage__count, .stage__bar { display: none; }
}

/* ───────── generic sections ───────── */
.section { padding-block: clamp(72px, 10vw, 150px); }
.section--tight { padding-block: clamp(48px, 6vw, 96px); }
.section-head { display: grid; gap: 22px; }
.h2 { font-size: var(--fs-h2); line-height: 0.96; letter-spacing: -0.01em; }
.h2--m { font-size: clamp(30px, 3vw, 48px); line-height: 0.98; }
/* a short h2 (Selected work, What we delivered) goes PUNCH */
.h2.punch { font-size: clamp(40px, 4.6vw, 76px); line-height: 0.84; letter-spacing: -0.005em; }
/* .dim was a grey second clause; it now reads as one line in one colour */
.dim { color: inherit; }
.section-head > .chip, .stage__sticky > .chip { justify-self: start; }
.h3 { font-size: var(--fs-h3); line-height: 1; letter-spacing: -0.005em; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 60ch; }
.prose { display: grid; gap: 1em; max-width: 62ch; color: var(--muted); }
.on-ink .prose { color: var(--muted-on-ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.on-ink .prose strong { color: var(--white); }

.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: clamp(24px, 4vw, 64px);
}
.split > * { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ───────── audience tiles ───────── */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile {
  min-height: clamp(380px, 38vw, 560px);
  padding: clamp(20px, 2.2vw, 32px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.tile--accent { background: var(--accent); color: var(--white); }
.tile--ink { background: var(--ink); color: var(--white); }
.tile--mist { background: var(--mist); color: var(--ink); }
.tile__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.tile__icon { width: clamp(96px, 10vw, 140px); height: auto; }
.tile__icon * { fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.tile h3 { font-size: var(--fs-h3); line-height: 1; letter-spacing: -0.005em; margin-bottom: 12px; }
.tile p { max-width: 36ch; opacity: 0.82; font-size: var(--fs-small); }
.tile ul { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tile li {
  padding: 3px 7px; border-radius: 3px; border: 1px solid currentColor;
  font-family: var(--sans); font-stretch: 62%; font-weight: 600; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.8;
}
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 320px; } }

/* ───────── proof numbers ───────── */
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.number { padding: 24px 20px 0 0; display: grid; gap: 10px; align-content: start; }
.number + .number { padding-left: 20px; border-left: 1px solid var(--line); }
.number b {
  font-family: var(--display); font-weight: 900; font-stretch: 62%;
  font-size: clamp(48px, 5.4vw, 88px); line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.number > span { color: var(--muted); font-size: var(--fs-small); max-width: 22ch; }
.on-ink .numbers { border-color: var(--line-on-ink); }
.on-ink .number + .number { border-color: var(--line-on-ink); }
.on-ink .number > span { color: var(--muted-on-ink); }
@media (max-width: 760px) {
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .number:nth-child(3) { padding-left: 0; border-left: 0; }
  .number:nth-child(n+3) { padding-top: 28px; }
}

/* ───────── marquee ───────── */
.marquee { overflow: hidden; padding-block: clamp(40px, 6vw, 90px); }
.marquee__row {
  display: flex; width: max-content;
  font-family: var(--display); font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(40px, 6vw, 104px); line-height: 1; letter-spacing: -0.01em;
  white-space: nowrap;
  animation: marquee 60s linear infinite;
}
.marquee__row span { padding-right: 0.35em; }
.marquee__row .ast { color: var(--spark); }
.marquee:hover .marquee__row { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ───────── client logos: endless row under the hero ───────── */
.logos { display: grid; gap: 18px; padding: clamp(28px, 4vw, 52px) 0 clamp(16px, 3vw, 36px); }
.logos__title { text-align: center; color: var(--muted); }
.logos__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logos__track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.logos__viewport:hover .logos__track { animation-play-state: paused; }
.logos__group { display: flex; align-items: center; gap: clamp(48px, 6vw, 104px); padding: 0 clamp(24px, 3vw, 52px); margin: 0; list-style: none; }
.logos__group li { flex: none; display: flex; align-items: center; height: 44px; color: var(--muted); opacity: 0.7; transition: opacity 0.3s var(--ease), color 0.3s var(--ease); }
.logos__group li:hover { opacity: 1; color: var(--ink); }
.logos__mark {                      /* the logo file is only a mask: every brand renders in the same colour */
  display: block; flex: none; background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
@media (max-width: 760px) { .logos__mark { zoom: 0.8; } }
@media (prefers-reduced-motion: reduce) {
  .logos__viewport { -webkit-mask-image: none; mask-image: none; }
  .logos__track { animation: none; width: auto; justify-content: center; }
  .logos__group { flex-wrap: wrap; justify-content: center; row-gap: 12px; }
  .logos__group[aria-hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__row { animation: none; flex-wrap: wrap; width: auto; white-space: normal; font-size: clamp(30px, 4.4vw, 60px); }
  .marquee__row span[aria-hidden="true"] { display: none; }
}

/* ───────── media + feature rows ───────── */
.media { border-radius: var(--r-card); overflow: hidden; background: var(--panel); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
}
.feature .media { aspect-ratio: 4 / 3; }
.feature__text { display: grid; gap: 24px; align-content: start; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cols-2 { grid-template-columns: 1fr; } }

/* ───────── work panel + cards ───────── */
.panel {
  background: var(--panel);
  border-radius: var(--r-frame);
  margin: var(--frame);
  padding-block: clamp(56px, 7vw, 110px);
}
.panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: clamp(28px, 4vw, 48px); }

.card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--r-card);
  background: var(--white);
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
}
.card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); position: relative; }
.card__media img, .card__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: scale 0.9s var(--ease), opacity 0.4s ease;
}
.card__media video { opacity: 0; }
.card.is-playing .card__media video { opacity: 1; }
.card:hover .card__media img, .card:hover .card__media video { scale: calc(var(--ps, 1) * 1.04); }
/* footage with burned-in graphics (lower thirds, end tags): show the whole 16:9 frame, no crop, zoom or drift */
.card__media--fit > img, .card__media--fit > video,
.card:hover .card__media--fit > img, .card:hover .card__media--fit > video { scale: 1 !important; translate: none !important; object-fit: cover; }
.card__body { display: grid; gap: 10px; padding: 18px 20px 64px; align-content: start; flex: 1; }
.card__meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.card__title { font-size: clamp(22px, 1.8vw, 28px); line-height: 1; letter-spacing: -0.005em; }
.card__text { color: var(--muted); font-size: var(--fs-small); }
.card--ink { background: var(--ink-2); color: var(--white); }
.card--ink .card__meta, .card--ink .card__text { color: var(--muted-on-ink); }
.card--accent { background: var(--accent); color: var(--white); }
.card--accent .card__meta, .card--accent .card__text { color: rgba(255,255,255,0.8); }

/* notched corner with arrow, cut from the panel colour behind the card */
.card__notch {
  position: absolute; right: 0; bottom: 0;
  width: 56px; height: 56px; padding: 8px 0 0 8px;
  background: var(--notch-bg, var(--panel));
  border-top-left-radius: 16px;
}
.card__notch::before, .card__notch::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  background: radial-gradient(circle at 0 0, transparent 15.5px, var(--notch-bg, var(--panel)) 16px);
}
.card__notch::before { right: 0; top: -16px; }
.card__notch::after { left: -16px; bottom: 0; }
.card__notch i {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 10px; background: var(--accent); color: var(--white);
  font-style: normal; font-size: 18px;
  transition: transform 0.4s var(--ease), background 0.3s;
}
.card--accent .card__notch i { background: var(--ink); }

.card--feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.card--feature .card__media { aspect-ratio: auto; min-height: 340px; margin: 12px; border-radius: 12px; }
.card--feature .card__body { padding: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) 80px; gap: 16px; }
.card--feature .card__title { font-size: clamp(28px, 2.8vw, 44px); line-height: 0.96; letter-spacing: -0.01em; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.grid-work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid-work .card--wide { grid-column: span 2; }
.grid-work .card--wide .card__media { aspect-ratio: 21 / 9; }
.card[hidden] { display: none; }
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .card--feature { grid-template-columns: 1fr; }
  .card--feature .card__media { min-height: 0; aspect-ratio: 16 / 10; }
  .grid-work { grid-template-columns: 1fr; }
  .grid-work .card--wide { grid-column: auto; }
  .grid-work .card--wide .card__media { aspect-ratio: 16 / 10; }
}

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.filters button {
  min-height: 40px; padding: 0 14px; border-radius: 4px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink); cursor: pointer;
  font-family: var(--sans); font-stretch: 62%; font-weight: 600; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.filters button:hover { background: var(--accent-soft); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ───────── page hero (inner pages) ───────── */
.page-hero {
  padding: clamp(130px, 18vh, 200px) clamp(16px, 2.6vw, 40px) clamp(32px, 5vw, 64px);
  display: grid; gap: clamp(28px, 4vw, 48px);
}
.page-hero .display { font-size: clamp(48px, 6.4vw, 108px); }
.page-hero__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.page-hero--image { color: var(--white); background: var(--ink); min-height: max(560px, 80svh); align-content: end; isolation: isolate; }
.page-hero--image > img, .page-hero--image > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero--image::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(10,14,23,0.88) 0%, rgba(10,14,23,0.2) 60%, rgba(10,14,23,0.45) 100%);
}

/* ───────── meta table (case study) ───────── */
.meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-on-ink); }
.meta > div { padding: 16px 16px 0 0; display: grid; gap: 6px; min-width: 0; }
.meta dt { color: var(--muted-on-ink); }
.meta dd { margin: 0; font-size: var(--fs-small); }
@media (max-width: 760px) { .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; } }

.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.gallery .media:nth-child(1) { grid-column: span 7; aspect-ratio: 16 / 10; }
.gallery .media:nth-child(2) { grid-column: span 5; aspect-ratio: auto; }
.gallery .media:nth-child(3) { grid-column: span 4; aspect-ratio: 1; }
.gallery .media:nth-child(4) { grid-column: span 8; aspect-ratio: auto; }
/* images fill their cell, so the auto-height tiles match the fixed-ratio tile in the same row */
.gallery .media { position: relative; }
.gallery .media > img { position: absolute; inset: 0; }
@media (max-width: 760px) { .gallery .media { grid-column: span 12 !important; aspect-ratio: 16 / 10 !important; } }

/* deliverables list */
.deliverables { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.deliverable { background: var(--white); border-radius: var(--r-card); padding: 24px; display: grid; gap: 16px; align-content: start; }
.deliverable ol, .deliverable ul { margin: 0; padding: 0; list-style: none; display: grid; }
.deliverable li { padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); display: flex; gap: 12px; }
.deliverable li .label { color: var(--muted); min-width: 3.2em; padding-top: 2px; }
@media (max-width: 900px) { .deliverables { grid-template-columns: 1fr; } }

.quote {
  font-family: var(--display); font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(40px, 4.8vw, 80px); line-height: 0.86; max-width: 16ch;
}
.quote-cite { margin-top: 24px; color: var(--muted-on-ink); }
/* the cite is a full sentence: read it as body text, not as a caps label */
.quote-cite.label { text-transform: none; font-stretch: 100%; font-weight: 400; font-size: var(--fs-small); letter-spacing: 0; max-width: 60ch; }
/* quote over a full-bleed still: photo fills the frame, text sits on a dark fade at the bottom */
.quote-frame { isolation: isolate; min-height: max(640px, 92svh); display: grid; align-content: end; }
.quote-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.quote-frame::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,14,23,0.1) 0%, rgba(10,14,23,0.3) 30%, rgba(10,14,23,0.82) 62%, rgba(10,14,23,0.95) 100%);
}
.quote-frame .prose { color: rgba(255,255,255,0.84); max-width: 46ch; }
.quote-frame .prose .label { color: rgba(255,255,255,0.6) !important; }
@media (max-width: 760px) { .quote-frame > img { object-position: 74% 50%; } }

/* ───────── process (numbered: real sequence) ───────── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px;
  padding-block: 28px; border-bottom: 1px solid var(--line); align-items: start;
}
.step__n { font-family: var(--display); font-weight: 900; font-stretch: 62%; font-size: 40px; line-height: 1; color: var(--accent); }
.step h3 { font-size: var(--fs-h3); line-height: 1; letter-spacing: -0.005em; }
.step p { color: var(--muted); max-width: 52ch; }
.step__roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.step__roles span { padding: 3px 7px; border-radius: 3px; background: var(--white); font-family: var(--sans); font-stretch: 62%; font-weight: 600; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; }
@media (max-width: 760px) { .step { grid-template-columns: 56px minmax(0, 1fr); } .step p { grid-column: 2; } }

/* ───────── engagement models ───────── */
.models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.model {
  border-radius: var(--r-card); padding: clamp(22px, 2.4vw, 32px);
  display: flex; flex-direction: column; gap: 22px;
  background: var(--white);
}
.model--ink { background: var(--ink); color: var(--white); }
.model--accent { background: var(--accent); color: var(--white); }
.model__name {
  font-family: var(--display); font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(40px, 4vw, 64px); line-height: 0.84;
}
.model__for { opacity: 0.75; }
.model p { font-size: var(--fs-small); opacity: 0.85; }
.model ul { margin: 0; padding: 0; list-style: none; display: grid; margin-top: auto; }
.model li { padding: 10px 0; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 18%, transparent); font-size: var(--fs-small); }
.model li::before { content: "*"; color: var(--spark); font-family: var(--display); font-weight: 900; font-stretch: 62%; margin-right: 10px; }
.model--accent li::before { color: var(--ink); }
@media (max-width: 900px) { .models { grid-template-columns: 1fr; } }

/* funnel diagram */
.funnel { display: grid; gap: 8px; }
.funnel__row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: center; }
.funnel__bar {
  border-radius: 10px; padding: 14px 16px; color: var(--white); background: var(--accent);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
}
.funnel__row:nth-child(2) .funnel__bar { background: var(--accent-deep); width: 82%; }
.funnel__row:nth-child(3) .funnel__bar { background: var(--ink-2); width: 64%; }
.funnel__row:nth-child(4) .funnel__bar { background: var(--ink); width: 46%; }
@media (max-width: 560px) { .funnel__row { grid-template-columns: 1fr; gap: 6px; } .funnel__bar { width: 100% !important; } }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 24px; align-items: center;
  padding-block: 22px; font-size: clamp(22px, 2vw, 30px); line-height: 1.05; font-weight: 500; font-stretch: 62%;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 28px; line-height: 1; transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 24px; color: var(--muted); max-width: 64ch; }

/* positioning map */
.map { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; border-radius: var(--r-card); background: var(--ink-2); }
.map svg { width: 100%; height: 100%; display: block; }

/* contact form */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label, .field legend { color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  font: inherit; color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills label { cursor: pointer; }
.pills input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; pointer-events: none; }
.pills span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink);
  font-size: var(--fs-small); transition: background 0.2s, color 0.2s;
}
.pills input:checked + span { background: var(--accent); color: var(--white); border-color: var(--accent); }
.pills input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.form__note { color: var(--muted); font-size: 13px; }
.form__status { font-size: var(--fs-small); color: var(--accent-deep); min-height: 1.5em; }
.hp { position: absolute; left: -9999px; }
.form__privacy { color: var(--muted); font-size: 13px; max-width: 60ch; }
.form__privacy a { color: var(--ink); }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.contact-card { background: var(--ink); color: var(--white); border-radius: var(--r-card); padding: clamp(22px, 2.6vw, 36px); display: grid; gap: 28px; align-content: start; }
.contact-card a { text-decoration: none; }
.contact-card .big { font-size: clamp(26px, 2.6vw, 38px); font-weight: 500; font-stretch: 62%; word-break: break-word; }
.contact-card .big:hover { color: var(--accent); }
.contact-card ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.contact-card li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; color: var(--muted-on-ink); font-size: var(--fs-small); }
.contact-card li b { font-family: var(--display); font-weight: 900; font-stretch: 62%; color: var(--accent); font-size: 26px; line-height: 1; }
.contact-card li strong { color: var(--white); font-weight: 600; display: block; }

/* ───────── footer ───────── */
.footer {
  color: var(--white); background: var(--ink);
  isolation: isolate;
  padding: clamp(110px, 16vw, 220px) clamp(16px, 2.6vw, 40px) clamp(16px, 2vw, 24px);
  display: grid; gap: clamp(48px, 8vw, 120px);
}
.footer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.footer::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,14,23,0.55) 0%, rgba(10,14,23,0.62) 45%, rgba(10,14,23,0.92) 100%);
}
.footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.footer__top > div { display: grid; gap: 22px; align-content: start; min-width: 0; }
.footer__statement { font-size: clamp(30px, 3vw, 46px); line-height: 0.96; font-weight: 500; font-stretch: 62%; letter-spacing: -0.01em; max-width: 18ch; }
.footer nav ul, .footer address { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-style: normal; }
.footer nav a, .footer address a { text-decoration: none; color: rgba(255,255,255,0.86); }
.footer nav a:hover, .footer address a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.footer .label { color: rgba(255,255,255,0.66); }
.footer__mark {
  width: 50%; aspect-ratio: 1320 / 520; /* half the footer width */
  background: var(--white);
  -webkit-mask: url("../img/frix-logo-white.png") center / contain no-repeat;
  mask: url("../img/frix-logo-white.png") center / contain no-repeat;
}
.footer__base { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; color: var(--muted-on-ink); }
.footer__legal { display: flex; gap: 20px; }
.footer__legal a { text-decoration: none; color: inherit; }
.footer__legal a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.footer__base .to-top { margin-left: auto; }
.to-top {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-on-ink); text-decoration: none; color: var(--white);
}
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__top > div:first-child { grid-column: 1 / -1; } }

/* ───────── motion helpers ───────── */
/* Content is visible at rest; JS adds .reveal-ready to <html> only when it can animate. */
.reveal-ready [data-reveal] { opacity: 0.001; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__media img, .hero__media video { transition: opacity 0.01s; transform: none !important; }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
  * { transition-duration: 0.01ms !important; }
}

/* project cards without a case study: no notch, so no reserved corner space */
article.card .card__body { padding-bottom: 24px; }

/* crew roles */
.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.role { background: var(--white); border-radius: var(--r-card); padding: 22px; display: grid; gap: 40px; align-content: space-between; min-height: 220px; }
.role h3 { font-size: clamp(24px, 2vw, 30px); line-height: 1; letter-spacing: -0.005em; }
.role p { color: var(--muted); font-size: var(--fs-small); }
.role .ast { font-family: var(--display); font-weight: 900; font-stretch: 62%; color: var(--spark); font-size: 40px; line-height: 1; }
/* freelance network band under the four leads (Studio page) */
.network {
  margin-top: 12px; padding: clamp(24px, 3vw, 44px); border-radius: var(--r-card);
  background: var(--ink); color: var(--white);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
}
.network__copy { display: grid; gap: 14px; }
.network__title { font-size: var(--fs-h3); line-height: 1; letter-spacing: -0.005em; margin-bottom: 4px; }
.network__copy p { color: var(--muted-on-ink); max-width: 56ch; }
.network__side { display: grid; gap: 14px; }
.network__where { color: var(--accent); }
.network__crafts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.network__crafts li {
  padding: 6px 10px; border-radius: 3px; border: 1px solid var(--line-on-ink);
  font-family: var(--sans); font-stretch: 62%; font-weight: 600; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--white);
}
.network__crafts li:first-child { border-color: var(--accent); color: var(--accent); }
@media (max-width: 900px) { .network { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .roles { grid-template-columns: 1fr; } .role { min-height: 0; } }

/* ───────── page transition: two-layer branded curtain ─────────
   ::before is an ink layer, ::after the accent layer carrying the white FRIX* logo.
   .pt-leave  wipes the curtain up over the current page before navigating.
   .pt-enter  is set from <head> on arrival so the new page starts covered;
   .pt-reveal then sweeps the curtain off the top. */
html::before, html::after {
  content: "";
  position: fixed; left: 0; right: 0; top: -15vh; height: 130vh;
  z-index: 9999; pointer-events: none;
  visibility: hidden;
  transform: translateY(115%) skewY(-5deg);
  will-change: transform;
}
html::before { background: var(--pt-a, var(--ink)); }
html::after {
  background: var(--pt-b, var(--accent)) url("../img/frix-logo-white.png") center / clamp(150px, 16vw, 260px) auto no-repeat;
}
html.pt-leave::before, html.pt-leave::after,
html.pt-enter::before, html.pt-enter::after { visibility: visible; }
html.pt-leave::before { animation: pt-in 0.55s cubic-bezier(0.76, 0, 0.24, 1) both; }
html.pt-leave::after  { animation: pt-in 0.55s cubic-bezier(0.76, 0, 0.24, 1) 0.08s both; }
html.pt-enter::before, html.pt-enter::after { transform: none; }
html.pt-enter.pt-reveal::after  { animation: pt-out 0.7s cubic-bezier(0.76, 0, 0.24, 1) both; }
html.pt-enter.pt-reveal::before { animation: pt-out 0.7s cubic-bezier(0.76, 0, 0.24, 1) 0.1s both; }
html.pt-leave, html.pt-leave body { cursor: progress; }
html.pt-reveal main > :first-child { animation: pt-rise 1s var(--ease) 0.25s both; }

@keyframes pt-in  { from { transform: translateY(115%) skewY(-5deg); } to { transform: translateY(0) skewY(0); } }
@keyframes pt-out { from { transform: translateY(0) skewY(0); } to { transform: translateY(-115%) skewY(5deg); } }
/* Crossing between Studio Frix and Docs+: the same curtain in black, with the FRIX* logo.
   Into Docs+, the logo nudges left and the orange Docs+ ribbon slides in beside it (body::before = the skewed
   orange box, body::after = the word), then the curtain fades into the page instead of wiping off. */
html { --pt-logo: clamp(150px, 16vw, 260px); }
html::after { transition: background-position 0.5s var(--ease); }
html.pt-docs::after { background-position: calc(50% - var(--pt-logo) * 0.255) 50%; }
html.pt-docs body::before, html.pt-docs body::after {
  position: fixed; z-index: 10000; pointer-events: none;
  left: calc(50% + var(--pt-logo) * 0.295); top: 50%;
  width: calc(var(--pt-logo) * 0.46); height: calc(var(--pt-logo) * 0.22);
}
html.pt-docs body::before { content: ""; background: var(--accent); transform: translateY(-50%) skewX(var(--skew)); }
html.pt-docs body::after {
  content: "Docs+"; display: grid; place-items: center; transform: translateY(-50%); color: var(--white);
  font-family: var(--sans); font-stretch: 62%; font-weight: 700; font-size: calc(var(--pt-logo) * 0.125); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
}
html.pt-leave.pt-docs body::before { animation: tag-wipe 0.5s cubic-bezier(0.76, 0, 0.24, 1) both; }
html.pt-leave.pt-docs body::after  { animation: tag-wipe 0.4s cubic-bezier(0.76, 0, 0.24, 1) 0.22s both; }
/* arriving through black: hold, then fade (no skewed wipe) */
html.pt-black.pt-enter.pt-reveal::before, html.pt-black.pt-enter.pt-reveal::after,
html.pt-docs.pt-enter.pt-reveal body::before, html.pt-docs.pt-enter.pt-reveal body::after { animation: pt-fade 0.8s ease both; }
@keyframes pt-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes pt-rise { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html::before, html::after { display: none; }
  html.pt-reveal main > :first-child { animation: none; }
}

/* photo fader: stacked images crossfade in place (portrait 4:5 frame) */
.feature .media.fader { aspect-ratio: 4 / 5; position: relative; max-height: 760px; }
.fader img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1s ease;
}
.fader img.is-active { opacity: 1; }

/* ───────── hover micro-interactions ─────────
   Label roll: text slides up and an identical copy rises in from below.
   Arrow slide-through: the arrow exits its box and a fresh one enters from the opposite side.
   JS (site.js) wraps the text into .roll / .arw so the markup stays plain. */
:root { --ease-io: cubic-bezier(0.65, 0, 0.35, 1); }
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.25; }
.roll__a, .roll__b { display: block; transition: transform 0.5s var(--ease-io); }
.roll__b { position: absolute; left: 0; top: 0; transform: translateY(105%); }

.arw { position: relative; display: block; overflow: hidden; width: 1.2em; height: 1.2em; line-height: 1.2em; text-align: center; }
.arw b { position: absolute; inset: 0; font-weight: inherit; transition: transform 0.5s var(--ease-io) 0.04s; }
.arw b + b { transform: translateX(-140%); }
.arw-up b + b { transform: translateY(140%); }

@media (hover: hover) {
  .btn:is(:hover, :focus-visible) .roll__a,
  .nav__links a:is(:hover, :focus-visible) .roll__a { transform: translateY(-105%); }
  .btn:is(:hover, :focus-visible) .roll__b,
  .nav__links a:is(:hover, :focus-visible) .roll__b { transform: translateY(0); }

  .btn:is(:hover, :focus-visible) .arw b:first-child,
  .card:is(:hover, :focus-visible) .arw b:first-child { transform: translateX(140%); }
  .btn:is(:hover, :focus-visible) .arw-up b:first-child { transform: translateY(-140%); }
  .btn:is(:hover, :focus-visible) .arw b + b,
  .card:is(:hover, :focus-visible) .arw b + b { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .roll__b, .arw b + b { display: none; }
}

/* Hover colour fill: the spark colour sweeps up behind the label */
.btn > span { position: relative; isolation: isolate; overflow: hidden; transition: color 0.35s var(--ease-io); }
.btn > span::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--spark);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform 0.5s var(--ease-io);
}
.btn > i, .card__notch i { transition: background 0.35s var(--ease-io), color 0.35s var(--ease-io); }
@media (hover: hover) {
  .btn:is(:hover, :focus-visible) > span { color: var(--white); }
  .btn:is(:hover, :focus-visible) > span::before { transform: scaleY(1); }
  .btn:is(:hover, :focus-visible) > i { background: var(--ink); }
  .btn--accent:is(:hover, :focus-visible) > i { background: var(--white); color: var(--ink); }
  .card:is(:hover, :focus-visible) .card__notch i { background: var(--spark); }
}

/* ───────── odometer counters (Proof numbers) ─────────
   JS turns each digit into a reel sized to its final glyph; reels clip vertically only,
   so the italic overhang still shows. A per-number SVG filter adds vertical motion blur. */
.number b.has-reels {
  display: flex; align-items: flex-start;
  transition: opacity 1.4s var(--ease), transform 1.6s var(--ease);
}
.number b.has-reels.is-waiting { opacity: 0; transform: translateY(0.22em); }
.reel {
  display: inline-block; height: 1em; line-height: 1em;
  clip-path: inset(-0.02em -0.5em);
  text-align: center;
}
.reel__strip { display: block; will-change: transform; }
.reel__strip > span { display: block; height: 1em; }
.mblur-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ───────── parallax ─────────
   JS tags images/video with [data-px] and updates --py on scroll. Uses the individual
   translate/scale properties so it never fights other transforms (hover zoom, reveals).
   --ps is a small overscan so edges never show while the image drifts inside its frame. */
[data-px] { translate: 0 var(--py, 0px); scale: var(--ps, 1); will-change: translate; }
.hero__body[data-px-text] { translate: 0 var(--ty, 0px); opacity: var(--to, 1); will-change: translate, opacity; }
@media (prefers-reduced-motion: reduce) {
  [data-px] { translate: none; scale: none; }
  .hero__body[data-px-text] { translate: none; opacity: 1; }
}

/* caption chip over a media frame (e.g. the Integral reel banner) */
.media--reel { position: relative; }
.media__caption {
  position: absolute; left: clamp(12px, 1.6vw, 20px); bottom: clamp(12px, 1.6vw, 20px);
  padding: 7px 10px; border-radius: 8px;
  background: rgba(10, 14, 23, 0.55); color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.media__caption b { color: var(--white); font-weight: 700; }

/* ───────── click-to-play YouTube (poster first, iframe only after a click) ───────── */
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: var(--ink); }
.yt iframe, .yt__play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt__play { padding: 0; cursor: pointer; background: none; display: grid; place-items: center; }
.yt__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s var(--ease); }
.yt__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,14,23,0.55), rgba(10,14,23,0.05) 55%); }
.yt__play span {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 20px 14px 16px; border-radius: 6px; background: var(--accent); color: var(--white);
  font-family: var(--sans); font-stretch: 62%; font-weight: 600; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase;
  transition: transform 0.4s var(--ease);
}
.yt__play span::before { content: ""; width: 0; height: 0; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.yt__play:hover img { scale: 1.03; }
.yt__play:hover span { transform: scale(1.05); }
.yt__note { color: var(--muted); font-size: 13px; }

/* ───────── remote services (Engine page) ───────── */
.remote { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.remote__card {
  display: grid; gap: 14px; align-content: start;
  padding: clamp(20px, 2vw, 28px); border-radius: var(--r-card);
  background: var(--ink-2); border: 1px solid var(--line-on-ink);
}
.remote__card h3 { font-size: var(--fs-h3); line-height: 1; letter-spacing: -0.005em; }
.remote__card p { color: var(--muted-on-ink); font-size: var(--fs-small); }
.remote__n { color: var(--accent); }
@media (max-width: 1000px) { .remote { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .remote { grid-template-columns: 1fr; } }

/* ───────── Frixbee page (frixbee.html) + Home teaser ───────── */
.bee-hero { min-height: max(560px, 80svh); align-content: end; }
.bee-hero__mark {
  position: absolute; right: clamp(16px, 2.6vw, 40px); top: clamp(96px, 15vh, 160px);
  width: clamp(84px, 11vw, 168px); height: auto; border-radius: 22%;
}
.models--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.roles--top .role { align-content: start; gap: 28px; }
.roles--top .role h3 { margin-bottom: 10px; }
@media (max-width: 900px) { .models--2 { grid-template-columns: 1fr; } }

/* The flow: one camera pans across three app windows (Resolve → Timeliner → Slack).
   A file chip and the bee carry the story between them. assets/js/frixbee.js adds beat classes
   .b1 … .b12 to .flow as it plays and moves the camera with --cam; every state below keys off them.
   Hidden "before" states are all scoped to .flow, so the same app markup renders complete elsewhere. */
.flow { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.flow__screen {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card); border: 1px solid var(--line-on-ink);
  background: var(--ink-2) radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 0) 0 0 / 22px 22px;
  container-type: inline-size;
  --app-fs: clamp(9.5px, 1.3cqw, 15px);
}
@media (max-width: 700px) { .flow__screen { aspect-ratio: 4 / 5; } }
.flow__track {
  display: flex; width: 300%; height: 100%;
  transform: translateX(calc(var(--cam, 0) * -100% / 3));
  transition: transform 1.1s var(--ease-io);
}
.flow__pane { position: relative; width: calc(100% / 3); height: 100%; padding: clamp(12px, 3.2cqw, 44px); display: grid; min-height: 0; }

/* carriers, positioned in screen space by JS (--x, --y) */
.flow__file, .flow__bee {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  font-size: var(--app-fs);
  opacity: 0;
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--k, 0.9));
  transition: transform 1.1s var(--ease-io), opacity 0.35s ease;
  will-change: transform;
}
.flow__file {
  display: inline-flex; align-items: center; gap: 0.6em; white-space: nowrap;
  padding: 0.6em 0.9em 0.6em 0.6em; border-radius: 0.6em;
  background: var(--white); color: #1d2433;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight: 600;
  box-shadow: 0 1.2em 2.4em rgba(0, 0, 0, 0.35);
}
.flow__file i {
  display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 0.4em;
  background: var(--accent); color: var(--white); font-style: normal; font-size: 0.8em;
}
.flow__bee img { width: 2.6em; height: 2.6em; border-radius: 0.5em; box-shadow: 0 0.8em 1.8em rgba(0, 0, 0, 0.3); }
.flow__say {
  position: absolute; left: calc(100% + 0.6em); top: 50%; white-space: nowrap;
  padding: 0.45em 0.75em; border-radius: 0.6em;
  background: var(--ink); color: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 0.9em; font-weight: 600;
  opacity: 0; transform: translate(-0.4em, -50%);
  transition: opacity 0.3s ease, transform 0.4s var(--ease);
}
.flow__replay {
  position: absolute; right: clamp(10px, 1.6cqw, 20px); bottom: clamp(10px, 1.6cqw, 20px); z-index: 3;
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; cursor: pointer;
  background: rgba(10, 14, 23, 0.72); color: var(--white);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s, background 0.25s;
}
.flow__replay:hover { background: var(--accent); }
.flow.is-done .flow__replay { opacity: 1; visibility: visible; }
@media (max-width: 700px) { .flow__replay { top: 6px; bottom: auto; right: 6px; min-height: 30px; padding: 0 10px; font-size: 12px; } }

/* step captions under the screen; each one is also a button that jumps to its app */
.flow__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.flow__steps button {
  display: grid; gap: 8px; align-content: start; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; color: var(--muted-on-ink);
  transition: color 0.4s ease;
}
.flow__steps strong { color: var(--white); font-weight: 500; font-stretch: 62%; font-size: var(--fs-h3); line-height: 1; letter-spacing: -0.005em; opacity: 0.55; transition: opacity 0.4s ease; }
.flow__steps button > span:last-child { font-size: var(--fs-small); max-width: 34ch; }
.flow__steps .label { color: var(--muted-on-ink); }
.flow__bar { display: block; height: 2px; margin-bottom: 8px; background: var(--line-on-ink); overflow: hidden; }
.flow__bar i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.flow__steps li.is-active .flow__bar i { transform: scaleX(1); transition: transform var(--dur, 0.6s) linear; }
.flow__steps li.is-past .flow__bar i { transform: scaleX(1); }
.flow__steps li:is(.is-active, .is-past) strong { opacity: 1; }
.flow__steps li.is-active .label { color: var(--accent); }
.flow__steps button:hover strong { opacity: 1; }
@media (max-width: 760px) {
  .flow__steps { grid-template-columns: 1fr; }
  .flow__steps button > span:last-child { display: none; }
}

/* ── app windows (shared look) ── */
.app {
  font: 400 var(--app-fs, 14px)/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-stretch: 100%; letter-spacing: 0; text-transform: none;
  border-radius: 0.9em; overflow: hidden; min-height: 0; min-width: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  box-shadow: 0 1.6em 3.2em rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.app p { margin: 0; }
.app__bar { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 0.8em; font-size: 0.82em; }
.app__dots { display: flex; gap: 0.45em; }
.app__dots i { width: 0.8em; height: 0.8em; border-radius: 50%; background: #ff5f57; }
.app__dots i:nth-child(2) { background: #febc2e; }
.app__dots i:nth-child(3) { background: #28c840; }
.app__title { flex: 1; text-align: center; margin-right: 3.6em; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* two stacked states crossfade in place (.swap); the second shows from beat 6 */
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; transition: opacity 0.4s ease, transform 0.5s var(--ease); }
.swap > :first-child { opacity: 0; }
.flow .swap > :first-child { opacity: 1; }
.flow .swap > :last-child { opacity: 0; transform: translateY(0.5em); }
.flow.b6 .swap > :first-child { opacity: 0; transform: translateY(-0.5em); }
.flow.b6 .swap > :last-child { opacity: 1; transform: none; }

/* ── 01 DaVinci Resolve ── */
.app--resolve { background: #19191b; color: #c4c4c8; }
.app--resolve .app__bar { background: #262629; color: #9a9aa0; }
.rv {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 1px; background: #0c0c0e; min-height: 0;
}
.rv__viewer { background: #1f1f22; padding: 0.8em; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0.5em; min-height: 0; }
.rv__frame { position: relative; background: #000; min-height: 4em; }
.rv__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rv__tc { display: flex; justify-content: space-between; gap: 1em; font-size: 0.85em; color: #8d8d93; }
.rv__tc [data-tc] { color: #e6e6ea; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
.rv__queue { background: #1f1f22; padding: 0.8em; display: grid; align-content: start; gap: 0.7em; min-width: 0; }
.rv__head { display: flex; justify-content: space-between; font-size: 0.85em; color: #8d8d93; }
.rv__job {
  display: grid; gap: 0.45em; padding: 0.75em; border-radius: 0.45em;
  background: #2a2a2e; border: 1px solid transparent; transition: border-color 0.5s ease;
}
.rv__job b { color: #e6e6ea; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv__meta { color: #8d8d93; font-size: 0.85em; }
.rv__prog { display: block; height: 0.35em; border-radius: 1em; background: #3a3a3f; overflow: hidden; }
.rv__prog i { display: block; height: 100%; background: #e2683c; transform-origin: 0 50%; transition: background 0.4s ease; }
.rv__status { display: flex; justify-content: space-between; gap: 1em; font-size: 0.85em; color: #8d8d93; font-variant-numeric: tabular-nums; }
.rv__state { display: grid; }
.rv__state > * { grid-area: 1 / 1; opacity: 0; transition: opacity 0.3s ease; }
.rv__state > :last-child { opacity: 1; color: #4cc27a; }
.flow .rv__state > :last-child { opacity: 0; }
.flow .rv__state > :first-child { opacity: 1; }
.flow.b1 .rv__state > :first-child { opacity: 0; }
.flow.b1 .rv__state > :nth-child(2) { opacity: 1; }
.flow.b2 .rv__state > :nth-child(2) { opacity: 0; }
.flow.b2 .rv__state > :last-child { opacity: 1; }
.flow.b2 .rv__job { border-color: rgba(76, 194, 122, 0.6); }
.flow.b2 .rv__prog i { background: #4cc27a; }
.rv__render { justify-self: start; padding: 0.4em 0.9em; border-radius: 0.35em; background: #3a3a3f; color: #e6e6ea; font-size: 0.85em; }
.rv__tl { grid-column: 1 / -1; position: relative; background: #1d1d20; padding: 0.7em 0.8em; display: grid; gap: 0.3em; }
.rv__row { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 0.5em; align-items: center; }
.rv__row > span { color: #77777d; font-size: 0.8em; }
.rv__lane { position: relative; height: 1.5em; }
.rv__clip {
  position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w);
  border-radius: 2px; background: #3f6c9c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.rv__clip--a { background: #2f7d55; }
.rv__clip--t { background: #7a5ea8; }
.rv__ph { position: absolute; top: 0.3em; bottom: 0.3em; left: calc(0.8em + 2.7em); right: 0.8em; pointer-events: none; }
.rv__playhead {
  position: absolute; inset: 0; border-left: 2px solid #e5484d;
  transform: translateX(calc(var(--p, 1) * 100%));
}
.rv__playhead::before { content: ""; position: absolute; left: -0.45em; top: -0.3em; border: 0.4em solid transparent; border-top: 0.5em solid #e5484d; }
.rv__pages { grid-column: 1 / -1; display: flex; justify-content: center; gap: 2.2em; padding: 0.55em; background: #262629; color: #77777d; font-size: 0.85em; }
.rv__pages .is-on { color: #e6e6ea; box-shadow: 0 2px 0 #e2683c; }
@container (max-width: 560px) {
  .rv { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto auto; }
  .rv__row--extra, .rv__render, .rv__pages span:not(.is-key) { display: none; }
}

/* ── 02 Timeliner ── */
.app--tl { background: #f5f6f9; color: #1d2433; }
.app--tl .app__bar { background: #fff; color: #6b7385; border-bottom: 1px solid #e6e8ee; }
.tl { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.tl__head { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 1em 1.2em 0.4em; }
.tl__brand { display: flex; align-items: center; gap: 0.6em; font-weight: 700; font-size: 1.25em; }
.tl__logo { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 0.4em; background: #1f6f5c; color: #fff; font-size: 0.8em; }
.tl__tabs { display: flex; gap: 1.2em; color: #6b7385; font-size: 0.9em; }
.tl__tabs .is-on { color: #1d2433; box-shadow: 0 2px 0 #1d2433; }
.tl__body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); min-height: 0; }
.tl__list { display: grid; gap: 0.55em; align-content: start; padding: 0.7em 1.2em 1.2em; min-height: 0; }
.tl__preview { display: grid; gap: 0.7em; align-content: start; padding: 0.7em 1.2em 1.2em 0; min-width: 0; }
.tl__player { position: relative; aspect-ratio: 16 / 9; border-radius: 0.5em; overflow: hidden; background: #000; }
.tl__player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tl__badge { position: absolute; left: 0.6em; top: 0.6em; padding: 0.15em 0.5em; border-radius: 0.3em; background: rgba(10, 14, 23, 0.7); color: #fff; font-size: 0.8em; font-weight: 600; }
.tl__scrub { position: relative; height: 0.35em; border-radius: 1em; background: #dfe3ea; }
.tl__scrub i { position: absolute; top: 50%; left: var(--at); width: 0.7em; height: 0.7em; margin: -0.35em 0 0 -0.35em; border-radius: 50%; background: #f5a524; box-shadow: 0 0 0 2px #f5f6f9; }
.tl__note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6em; align-items: baseline; padding: 0.6em 0.7em; border-radius: 0.5em; background: #fff; border: 1px solid #e6e8ee; font-size: 0.9em; }
.tl__tc { color: #b06d00; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; }
.tl__done { justify-items: end; color: #6b7385; font-size: 0.85em; white-space: nowrap; }
.tl__done > :last-child { color: #1d7a45; font-weight: 600; }
.tl__row {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 5.4em minmax(0, 1fr) auto 6.5em; gap: 1em; align-items: center;
  padding: 0.55em; border-radius: 0.6em; background: #fff; border: 1px solid #e6e8ee;
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.tl__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 0.35em; overflow: hidden; background: #dfe3ea; }
.tl__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tl__thumb--empty { background: repeating-linear-gradient(135deg, #e8ebf0 0 0.4em, #dfe3ea 0.4em 0.8em); }
.tl__name { display: grid; gap: 0.15em; min-width: 0; }
.tl__name b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl__sub { color: #6b7385; font-size: 0.85em; white-space: nowrap; }
.tl__ver { display: inline-block; vertical-align: bottom; height: 1.35em; overflow: hidden; margin-left: 0.3em; padding: 0 0.35em; border-radius: 0.3em; background: #eef0f4; color: #4b5468; font-size: 0.8em; line-height: 1.35em; }
.tl__ver > span { display: grid; transition: transform 0.5s var(--ease); }
.tl__ver > span > span { height: 1.35em; }
.flow .tl__ver > span { transform: none; }
.tl__ver > span { transform: translateY(-1.35em); }
.flow.b6 .tl__ver > span { transform: translateY(-1.35em); }
.tl__state { justify-items: end; }
.tl__pill { padding: 0.3em 0.75em; border-radius: 1em; font-size: 0.82em; font-weight: 600; white-space: nowrap; }
.tl__pill--edit { background: #fff1db; color: #93560a; }
.tl__pill--queued { background: #eef0f4; color: #6b7385; }
.tl__pill--ok { background: #e2f5e9; color: #1d7a45; }
.tl__pill--review { background: #e3eeff; color: #1f5fd6; }
.tl__due { color: #6b7385; font-size: 0.85em; text-align: right; }
.tl__up { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transition: opacity 0.4s ease; }
.tl__up i { display: block; height: 100%; background: var(--spark); transform-origin: 0 50%; transform: scaleX(0); }
.flow.b5 .tl__up i { transform: scaleX(1); transition: transform 0.9s var(--ease); }
.flow.b6 .tl__up { opacity: 0; }
.flow.b5 .tl__row--hero { border-color: rgba(35, 129, 255, 0.55); box-shadow: 0 0 0 3px rgba(35, 129, 255, 0.12); }
@container (max-width: 560px) {
  .tl__row { grid-template-columns: 4.4em minmax(0, 1fr) auto; gap: 0.7em; }
  .tl__due, .tl__tabs { display: none; }
}
@container (max-width: 900px) {
  .tl__body { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .tl__preview { padding: 0 1.2em 1.2em; }
  .tl__player, .tl__scrub { display: none; }
}

/* ── 03 Slack ── */
.app--slack { background: #fff; color: #1d1c1d; }
.app--slack .app__bar { background: #3b0f3e; color: rgba(255, 255, 255, 0.7); }
.sl { display: grid; grid-template-columns: 14em minmax(0, 1fr); min-height: 0; }
.sl__side { display: grid; align-content: start; gap: 0.15em; padding: 0.9em 0.6em; background: #4a154b; color: rgba(255, 255, 255, 0.72); }
.sl__side > span { padding: 0.25em 0.6em; border-radius: 0.35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl__side .sl__ws { color: #fff; font-weight: 800; font-size: 1.1em; padding-bottom: 0.6em; }
.sl__side .sl__sec { font-size: 0.82em; opacity: 0.7; }
.sl__side .is-on { background: #1164a3; color: #fff; }
.sl__main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; }
.sl__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: 0.8em 1.2em; border-bottom: 1px solid #e8e8e8; font-weight: 800; }
.sl__head small { color: #616061; font-weight: 400; font-size: 0.8em; }
.sl__msgs { display: grid; gap: 1em; align-content: start; padding: 0.8em 1.2em; min-height: 0; overflow: hidden; }
.sl__day { justify-self: center; padding: 0.15em 0.9em; border: 1px solid #e8e8e8; border-radius: 1em; font-size: 0.78em; font-weight: 700; }
.sl__msg { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 0.7em; align-items: start; }
.sl__av { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.5em; }
.sl__av--lena { background: #e8912d; color: #fff; font-weight: 800; }
.sl__body { display: grid; gap: 0.1em; justify-items: start; min-width: 0; }
.sl__who { display: flex; align-items: baseline; gap: 0.4em; }
.sl__who b { font-weight: 800; }
.sl__who small { color: #616061; font-size: 0.8em; }
.sl__app { padding: 0 0.3em; border-radius: 0.2em; background: #e8e8e8; color: #616061; font-size: 0.7em; font-weight: 700; text-transform: uppercase; }
.sl__card { display: grid; gap: 0.6em; width: 100%; max-width: 36em; margin-top: 0.3em; padding: 0.2em 0 0.2em 0.9em; border-left: 0.3em solid #2080ff; border-radius: 0.15em; }
.sl__h { font-weight: 800; font-size: 1.1em; }
.sl__row { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.sl__link { color: #1264a3; font-weight: 700; }
.sl__btn { flex: none; padding: 0.35em 0.8em; border: 1px solid #c8c8c8; border-radius: 0.4em; font-weight: 700; font-size: 0.9em; white-space: nowrap; }
.sl__div { display: block; height: 1px; background: #e8e8e8; }
.sl__foot { color: #616061; font-size: 0.78em; }
.sl__react { display: inline-flex; gap: 0.35em; margin-top: 0.4em; padding: 0.1em 0.55em; border: 1px solid #1d9bd1; border-radius: 1em; background: #e8f5fa; font-size: 0.85em; }
.sl__react b { color: #1264a3; }
.sl__compose { position: relative; display: grid; margin: 0 1.2em 1em; padding: 0.7em 0.9em; border: 1px solid #c8c8c8; border-radius: 0.6em; color: #8a8a8a; }
.sl__ph { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl__typing { position: absolute; left: 0.2em; bottom: calc(100% + 0.2em); color: #616061; font-size: 0.8em; opacity: 0; transition: opacity 0.3s ease; }
.flow.b9:not(.b10) .sl__typing { opacity: 1; }
/* messages arrive: the bee lands in the avatar slot, then the card slides up beside it */
.flow .sl__msg--bee .sl__av { opacity: 0; }
.flow.b10 .sl__msg--bee .sl__av { opacity: 1; }
.flow :is(.sl__msg--bee, .sl__msg--reply) .sl__body,
.flow .sl__msg--reply .sl__av { opacity: 0; transform: translateY(0.8em); transition: opacity 0.5s ease, transform 0.7s var(--ease); }
.flow .sl__react { opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.flow.b10 .sl__msg--bee .sl__body,
.flow.b12 .sl__msg--reply :is(.sl__body, .sl__av) { opacity: 1; transform: none; }
.flow.b11 .sl__react { opacity: 1; transform: none; }
@container (max-width: 640px) {
  .sl { grid-template-columns: minmax(0, 1fr); }
  .sl__side { display: none; }
  .sl__row { flex-wrap: wrap; }
}

/* ── beats: carriers ── */
.flow.b3 .flow__file { opacity: 1; --k: 1; }
.flow.b5 .flow__file { opacity: 0; --k: 0.6; transition: transform 0.45s var(--ease), opacity 0.4s ease 0.05s; }
.flow.b7 .flow__bee { opacity: 1; --k: 1; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; }
.flow.b8 .flow__bee { transition: transform 1.1s var(--ease-io), opacity 0.3s ease; }
.flow__bee--flip .flow__say { left: auto; right: calc(100% + 0.6em); transform: translate(0.4em, -50%); }
.flow.b7:not(.b8) .flow__say { opacity: 1; transform: translate(0, -50%); }
.flow.b10 .flow__bee { opacity: 0; transition: opacity 0.2s ease 0.1s; }
/* replay/jump resets without animating backwards */
.flow.is-reset *, .flow.is-reset { transition: none !important; }

/* ── Home teaser ── */
.bee-teaser__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.bee-teaser__shot { container-type: inline-size; --app-fs: clamp(11px, 2.3cqw, 15px); }
.bee-teaser__shot .app { box-shadow: 0 1.6em 3.2em rgba(0, 0, 0, 0.4); }
.bee-teaser__shot .sl__msgs { padding-block: 1.2em; }
@media (max-width: 900px) { .bee-teaser__grid { grid-template-columns: 1fr; } }

/* ───────── click-to-play films in cards ([data-film]): the silent loop is swapped for the full film with sound ───────── */
.card--feature.card--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.card--flip .card__media { order: 2; aspect-ratio: 16 / 9; min-height: 0; align-self: center; }
.film-play {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 14px;
  border: 0; border-radius: 999px; background: var(--white); color: var(--ink); cursor: pointer;
  font-family: var(--sans); font-stretch: 62%; font-weight: 600; font-size: 15px; letter-spacing: 0.02em;
  box-shadow: 0 6px 24px rgba(10, 14, 23, 0.25); transition: transform 0.3s var(--ease);
}
.film-play::before { content: ""; border-left: 11px solid var(--accent); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.film-play b { color: var(--muted); font-weight: 600; }
.film-play:hover { transform: translateY(-2px); }
.card__media video.film { opacity: 1; object-fit: contain; background: #000; scale: 1 !important; }
@media (max-width: 900px) { .card--feature.card--flip { grid-template-columns: 1fr; } .card--flip .card__media { order: 0; } }

/* ───────── a client's live site, framed as a browser window (inseeq case study) ───────── */
.site-frame {
  display: block; margin-top: 8px; border-radius: 14px; overflow: hidden; text-decoration: none;
  background: var(--ink); border: 1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(10, 14, 23, 0.45);
  transition: transform 0.5s var(--ease);
}
.site-frame:hover { transform: translateY(-4px); }
.site-frame__bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--ink-2); }
.site-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.site-frame__bar span { margin-left: 10px; padding: 3px 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: var(--muted-on-ink); font-size: 12px; }
.site-frame img { display: block; width: 100%; height: auto; }

/* ───────── testimonials (home): cards inside the Selected work panel.
   Photo with name/role over a fade, numbered label + quote; the last card is an open slot (CTA).
   Wide screens (>1100px): an accordion, one card open (photo + quote side by side), the others narrow photo strips;
   hover, focus or click opens another (site.js [data-accordion]). Up to 1100px: a sideways row with snap. ───────── */
.testimonial__head { margin-top: clamp(56px, 7vw, 104px); }
.testimonial__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tcard { display: flex; flex-direction: column; min-width: 0; background: var(--white); border-radius: var(--r-card); overflow: hidden; }
.tcard__photo { position: relative; aspect-ratio: 5 / 4; background: var(--ink); isolation: isolate; }
.tcard__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.tcard__photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,14,23,0) 40%, rgba(10,14,23,0.78) 100%); }
.tcard__who { position: absolute; left: 20px; right: 20px; bottom: 16px; display: grid; justify-items: start; gap: 2px; color: var(--white); }
.tcard__who b { font-weight: 600; font-size: var(--fs-small); }
.tcard__who .label { color: rgba(255,255,255,0.72); font-size: 12px; }
.tcard__logo { width: 72px; height: 18px; color: var(--white); margin-bottom: 8px; }
.tcard--moritz .tcard__photo img { object-position: 50% 30%; }   /* square studio portrait: keep the face in the 5:4 box */
.tcard__logo--ninox { height: 27px; margin-bottom: 4px; }
.tcard__body { flex: 1; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: 18px 20px 22px; }
.tcard__eyebrow { color: var(--muted); }
.tcard__quote { margin: 0; display: grid; gap: 0.9em; align-content: start; font-size: var(--fs-small); line-height: 1.55; color: var(--ink); }
.tcard__quote strong { font-weight: 600; color: var(--accent-deep); }
.tcard--next { justify-content: space-between; gap: 32px; padding: 18px 20px 22px; background: var(--accent); color: var(--white); text-decoration: none; }
.tcard--next .tcard__eyebrow { color: rgba(255,255,255,0.8); }
.tcard__display { font-family: var(--display); font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(72px, 8vw, 132px); line-height: 0.84; }
.tcard__text { margin-top: 14px; max-width: 26ch; font-size: var(--fs-body); line-height: 1.4; }
.tcard--next .link-arrow { color: var(--white); }
.tcard--next:hover .link-arrow::after { transform: translateX(4px); }
@media (max-width: 1100px) {
  .testimonial__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 380px);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: 6px;
  }
  .tcard { scroll-snap-align: start; }
}
@media (min-width: 1101px) {
  /* Motion: one slow ease-in-out for every moving part, so the cards glide rather than snap;
     the closing quote fades out first, the opening one fades up once its card has room. */
  .testimonial__grid { --acc: 1s cubic-bezier(0.65, 0, 0.35, 1); display: flex; height: clamp(540px, 42vw, 620px); }
  .tcard {
    --tq: clamp(360px, 28vw, 430px);              /* width of the quote column when open */
    position: relative; flex: 1 1 0; flex-direction: row; cursor: pointer;
  }
  /* Two classes deep so it outranks `.reveal-ready [data-reveal]`, which would otherwise drop the flex-grow transition
     (that's what made the first version snap); keeps the scroll reveal's fade and rise. */
  .testimonial__grid .tcard { transition: flex-grow var(--acc), opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .tcard.is-open { flex-grow: 3.6; cursor: auto; }
  .tcard__photo { flex: none; width: 100%; height: 100%; aspect-ratio: auto; transition: width var(--acc); }
  .tcard.is-open .tcard__photo { width: calc(100% - var(--tq)); }
  .tcard__photo img { transform: scale(1.06); transition: transform 1.4s cubic-bezier(0.33, 0, 0.2, 1); }
  .tcard.is-open .tcard__photo img { transform: none; }
  .tcard__body {                                /* stays readable to screen readers; only hidden visually while closed */
    position: absolute; top: 0; right: 0; bottom: 0; width: var(--tq); padding: 22px 26px 26px;
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .tcard.is-open .tcard__body {
    opacity: 1; transform: none; pointer-events: auto;
    transition: opacity 0.6s ease 0.5s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
  }
  .tcard--next { flex-direction: column; padding: 22px 24px 26px; }
  .tcard--next .tcard__display { font-size: clamp(64px, 5.4vw, 112px); transition: font-size var(--acc); }
  .tcard--next.is-open .tcard__display { font-size: clamp(96px, 8vw, 150px); }
}
@media (min-width: 1101px) and (prefers-reduced-motion: reduce) {
  .testimonial__grid .tcard, .tcard__photo, .tcard__photo img, .tcard__body, .tcard.is-open .tcard__body, .tcard--next .tcard__display { transition: none; }
}

/* ───────── Engine: why we're different (problem → what we do rows) ───────── */
.fixes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.fix {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 14px clamp(24px, 4vw, 72px); align-items: start;
  padding-block: clamp(24px, 3vw, 44px); border-bottom: 1px solid var(--line);
}
.fix > div { display: grid; gap: 10px; }
.fix .label { color: var(--muted); }
.fix__n { color: var(--accent) !important; padding-top: 2px; }
.fix > div:last-child p:last-child { color: var(--muted); max-width: 58ch; }
.fix strong { color: var(--ink); font-weight: 600; }
.fixes__close { margin-top: clamp(28px, 3.4vw, 48px); font-size: clamp(28px, 2.8vw, 44px); line-height: 1; font-weight: 500; font-stretch: 62%; max-width: 24ch; }
@media (max-width: 760px) { .fix { grid-template-columns: 1fr; } }

/* ───────── legal pages (Impressum, Datenschutz) ───────── */
.legal { display: grid; gap: clamp(36px, 4vw, 56px); margin-inline: 0; padding-inline: clamp(16px, 2.6vw, 40px); max-width: calc(74ch + 80px); padding-top: clamp(8px, 2vw, 24px); padding-bottom: clamp(72px, 10vw, 140px); }
.legal section { display: grid; gap: 14px; scroll-margin-top: 96px; }
.legal h2 { font-size: clamp(26px, 2.4vw, 36px); line-height: 1; }
.legal h3 { font-size: var(--fs-body); font-weight: 600; font-stretch: 100%; margin-top: 6px; }
.legal p, .legal li, .legal address { color: var(--muted); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.legal address { font-style: normal; }
.legal a { color: var(--ink); text-underline-offset: 3px; }
.legal__meta { color: var(--muted); font-size: var(--fs-small); }
.legal__note { display: inline-block; margin-top: 6px; font-size: var(--fs-small); }
/* fields only Dimi can fill in; _tools/build.py refuses to build while any remain */
.todo { background: #ffe58a; color: var(--ink); padding: 0 5px; border-radius: 3px; font-weight: 600; }

/* ───────── documentary side (docs/): Docs+ ─────────
   A production company's site for funders, broadcasters and festivals: calm, editorial, confident.
   Dark page, full-bleed footage, sentence-case titles, hairlines, metadata tables. Orange only as a marker.
   Scoped to body.docs; the brand site is untouched. The two sides only meet in the footer. */
.docs { background: var(--ink); color: rgba(255,255,255,0.92); }
.docs ::selection { background: var(--accent); color: var(--white); }

/* skewed tag: the brand's slanted label (used for "Docs+" next to the logo) */
.tag {
  display: inline-block; justify-self: start; align-self: start;
  padding: 4px 11px; background: var(--accent); color: var(--white);
  transform: skewX(var(--skew));
  font-family: var(--sans); font-stretch: 62%; font-weight: 700; font-size: 14px; line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase;
}
.tag > span { display: inline-block; transform: skewX(calc(var(--skew) * -1)); }
.nav__logo { gap: 10px; text-decoration: none; }
.nav__logo .tag { font-size: 13px; align-self: center; }
/* Docs+ label: the orange block wipes in along its slant, then the word follows, then it holds */
@media (prefers-reduced-motion: no-preference) {
  .docs .nav__logo .tag { animation: tag-wipe 0.6s cubic-bezier(0.76, 0, 0.24, 1) 0.9s both; }
  .docs .nav__logo .tag > span { animation: tag-wipe 0.5s cubic-bezier(0.76, 0, 0.24, 1) 1.2s both; }
}
@keyframes tag-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* nav: dark glass */
.docs .nav__links { background: rgba(10, 14, 23, 0.55); box-shadow: inset 0 0 0 1px var(--line-on-ink); }
.docs .nav__links a { color: rgba(255,255,255,0.86); }
.docs .nav__links a:hover { background: rgba(255,255,255,0.08); }
.docs .nav__links a[aria-current="page"] { background: rgba(255,255,255,0.1); color: var(--white); }
.docs .nav__links a.nav__cta { background: var(--white); color: var(--ink); }
.docs .nav__links a.nav__cta:hover { background: var(--accent); color: var(--white); }
@media (max-width: 760px) { .docs .nav__links { background: rgba(10, 14, 23, 0.95); } }

/* type */
.dx-h1 { font-size: clamp(40px, 5.2vw, 88px); line-height: 0.98; letter-spacing: -0.015em; font-weight: 500; font-stretch: 62%; max-width: 15ch; color: var(--white); }
.dx-h2 { font-size: clamp(32px, 3.6vw, 60px); line-height: 1; letter-spacing: -0.01em; font-weight: 500; font-stretch: 62%; max-width: 18ch; color: var(--white); }
.dx-lead { font-size: var(--fs-lead); line-height: 1.55; color: rgba(255,255,255,0.74); max-width: 52ch; }
.dx-body { display: grid; gap: 1em; color: rgba(255,255,255,0.68); max-width: 60ch; }
.dx-body strong { color: var(--white); font-weight: 600; }
.dx-title { font-family: var(--display); font-weight: 900; font-stretch: 62%; text-transform: uppercase; line-height: 0.88; letter-spacing: -0.005em; font-size: clamp(40px, 4.2vw, 72px); color: var(--white); }
.docs .chip { color: rgba(255,255,255,0.62); }
.dx-label { color: rgba(255,255,255,0.5); }

/* status: a small dot and a word */
.status { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.78); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.status--done::before { background: rgba(255,255,255,0.55); }

/* links and buttons on dark */
.dx-link { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; font-stretch: 62%; font-weight: 600; font-size: 16px; letter-spacing: 0.03em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.3); transition: border-color 0.3s var(--ease); }
.dx-link::after { content: "→"; transition: transform 0.3s var(--ease); }
.dx-link:hover { border-color: var(--accent); }
.dx-link:hover::after { transform: translateX(4px); }
.dx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* sections */
.dx-section { padding-block: clamp(80px, 10vw, 160px); border-top: 1px solid var(--line-on-ink); }
.dx-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(20px, 4vw, 64px); align-items: start; margin-bottom: clamp(40px, 6vw, 88px); }
.dx-head > :last-child { display: grid; gap: 22px; }
@media (max-width: 900px) { .dx-head { grid-template-columns: 1fr; } }

/* hero: full-bleed footage, text at the bottom */
.dx-hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-content: end; padding: 120px var(--gutter) clamp(28px, 4vw, 56px); overflow: hidden; }
.dx-hero > img, .dx-hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.dx-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,14,23,0.92) 0%, rgba(10,14,23,0.45) 45%, rgba(10,14,23,0.25) 70%, rgba(10,14,23,0.55) 100%); }
.dx-hero__inner { width: 100%; max-width: 1440px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.dx-hero__main { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.dx-hero__side { justify-self: end; display: grid; gap: 6px; text-align: right; }
.dx-hero__side .label { color: rgba(255,255,255,0.5); }
.dx-hero__side span:last-child { color: rgba(255,255,255,0.86); }
@media (max-width: 900px) {
  .dx-hero__inner { grid-template-columns: 1fr; }
  .dx-hero__side { justify-self: start; text-align: left; }
}

/* slate: one row per project */
.dx-slate { display: grid; }
.dx-project { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line-on-ink); align-items: start; }
.dx-project:first-child { border-top: 0; padding-top: 0; }
.dx-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--ink-2); }
.dx-media > img, .dx-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
a.dx-media:hover > img, a.dx-media:hover > video { scale: 1.025; }
.dx-media > video.film { object-fit: contain; background: #000; scale: 1; }
.dx-project__info { display: grid; gap: 18px; align-content: start; }
.dx-project__info .dx-title a { color: inherit; text-decoration: none; }
.dx-project__info p { color: rgba(255,255,255,0.74); }
@media (max-width: 900px) { .dx-project { grid-template-columns: 1fr; } }

/* metadata table */
.dx-meta { margin: 0; display: grid; border-top: 1px solid var(--line-on-ink); }
.dx-meta > div { display: grid; grid-template-columns: minmax(7.5em, 0.42fr) minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-on-ink); font-size: var(--fs-small); }
.dx-meta dt { color: rgba(255,255,255,0.5); }
.dx-meta dd { margin: 0; color: rgba(255,255,255,0.88); }

/* the studio */
.dx-studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.dx-portrait { margin: 0; display: grid; gap: 10px; }
.dx-portrait > div { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; }
.dx-portrait img { width: 100%; height: 100%; object-fit: cover; }
.dx-portrait figcaption { color: rgba(255,255,255,0.5); }
.dx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-on-ink); margin-top: 12px; }
.dx-fact { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line-on-ink); display: grid; gap: 6px; }
.dx-fact b { font-weight: 500; font-stretch: 62%; font-size: clamp(26px, 2.4vw, 38px); line-height: 1; color: var(--white); }
.dx-fact span { color: rgba(255,255,255,0.5); font-size: var(--fs-small); }
@media (max-width: 900px) { .dx-studio { grid-template-columns: 1fr; } .dx-portrait > div { aspect-ratio: 16 / 10; } }

/* partner columns */
.dx-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.dx-col { display: grid; gap: 14px; align-content: start; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.3); }
.dx-col h3 { font-size: var(--fs-h3); line-height: 1.05; color: var(--white); }
.dx-col p { color: rgba(255,255,255,0.66); font-size: var(--fs-small); max-width: 38ch; }
@media (max-width: 900px) { .dx-cols { grid-template-columns: 1fr; } }

/* contact */
.dx-contact { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: end; }
.dx-card { display: grid; gap: 6px; padding: 24px 0; border-top: 1px solid var(--line-on-ink); border-bottom: 1px solid var(--line-on-ink); }
.dx-card b { font-weight: 500; font-stretch: 62%; font-size: 26px; color: var(--white); line-height: 1.1; }
.dx-card span { color: rgba(255,255,255,0.55); font-size: var(--fs-small); }
.dx-card a { color: var(--white); text-underline-offset: 5px; text-decoration-color: rgba(255,255,255,0.35); margin-top: 8px; font-size: var(--fs-lead); }
.dx-card a:hover { text-decoration-color: var(--accent); }
@media (max-width: 900px) { .dx-contact { grid-template-columns: 1fr; } }

/* film page: overview, teaser, stills, next project */
.dx-overview { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.dx-overview .dx-statement { font-size: clamp(26px, 2.6vw, 42px); line-height: 1.08; font-weight: 500; font-stretch: 62%; letter-spacing: -0.01em; color: var(--white); max-width: 26ch; }
@media (max-width: 900px) { .dx-overview { grid-template-columns: 1fr; } }
.dx-stills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dx-stills figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; }
.dx-stills img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .dx-stills { grid-template-columns: 1fr 1fr; } }
.docs .film-play { left: 18px; bottom: 18px; border-radius: 6px; background: rgba(10,14,23,0.72); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.docs .film-play::before { border-left-color: var(--white); }
.docs .film-play b { color: rgba(255,255,255,0.6); }
.dx-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: center; text-decoration: none; color: inherit; }
.dx-next .dx-media { aspect-ratio: 21 / 9; }
@media (max-width: 900px) { .dx-next { grid-template-columns: 1fr; } }

/* footer: quiet, with the one door back to the brand site */
.dx-footer { border-top: 1px solid var(--line-on-ink); padding: clamp(48px, 6vw, 88px) var(--gutter) 28px; }
.dx-footer__inner { max-width: 1440px; margin-inline: auto; display: grid; gap: clamp(40px, 6vw, 80px); }
.dx-footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
.dx-footer__brand { display: flex; align-items: center; gap: 10px; }
.dx-footer__brand img { height: 30px; width: auto; }
.dx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dx-footer a { color: rgba(255,255,255,0.78); text-decoration: none; }
.dx-footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.dx-footer .label { color: rgba(255,255,255,0.45); margin-bottom: 14px; }
.dx-footer__base { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; color: rgba(255,255,255,0.45); padding-top: 22px; border-top: 1px solid var(--line-on-ink); }
.dx-footer__base .footer__legal a { color: inherit; }
.dx-footer__base .to-top { margin-left: auto; }
@media (max-width: 760px) { .dx-footer__top { grid-template-columns: 1fr 1fr; } .dx-footer__top > :first-child { grid-column: 1 / -1; } }

/* ───────── Home: Docs+ band (after The studio) ─────────
   The brand site's door into Docs+: proof for startups that the same people make documentaries for the screen.
   Full-bleed loop behind, the FRIX* + Docs+ lockup, a short pitch and the slate as a list. */
.docs-band { isolation: isolate; color: var(--white); padding: clamp(40px, 6vw, 88px) clamp(16px, 2.6vw, 40px); min-height: max(620px, 86svh); display: grid; align-content: end; }
.docs-band > video, .docs-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.docs-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,14,23,0.94) 0%, rgba(10,14,23,0.6) 45%, rgba(10,14,23,0.3) 100%); }
.docs-band__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: end; width: 100%; max-width: 1440px; margin-inline: auto; }
.docs-band__text { display: grid; gap: 22px; }
.docs-band__lockup { display: inline-flex; align-items: center; gap: 10px; justify-self: start; text-decoration: none; }
.docs-band__lockup img { height: clamp(30px, 2.8vw, 40px); width: auto; }
.docs-band__text .prose { color: rgba(255,255,255,0.78); max-width: 50ch; }
.docs-band__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.22); }
.docs-band__list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.22); color: inherit; text-decoration: none; }
.docs-band__list b { font-family: var(--display); font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(26px, 2.4vw, 38px); line-height: 1; }
.docs-band__list span { color: rgba(255,255,255,0.62); font-size: var(--fs-small); grid-column: 1; }
.docs-band__list a > i { font-style: normal; grid-row: 1 / span 2; grid-column: 2; align-self: center; color: rgba(255,255,255,0.7); transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
.docs-band__list a:hover > i { transform: translateX(4px); color: var(--accent); }
.docs-band__list .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }
.docs-band__list .dot--done { background: rgba(255,255,255,0.55); }
@media (max-width: 900px) { .docs-band__grid { grid-template-columns: 1fr; } }

/* ───────── Home: How we work as two promises (11 Nov) ─────────
   Each card names the problem, strikes it through in orange as it scrolls in, then states the promise. */
.promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.promise { display: grid; grid-template-rows: auto 1fr; background: var(--white); border-radius: var(--r-card); overflow: hidden; }
.promise:nth-child(2) { transition-delay: 0.12s; }
.promise__media { position: relative; margin: 12px 12px 0; aspect-ratio: 16 / 11; border-radius: 12px; overflow: hidden; background: var(--ink); }
.promise__media > img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s var(--ease); }
.promise:hover .promise__media > img { scale: 1.03; }
.promise__media .chip { position: absolute; left: 14px; bottom: 12px; color: rgba(255,255,255,0.92); text-shadow: 0 1px 10px rgba(10,14,23,0.5); }
.promise__media--site { background: var(--panel); display: grid; place-items: center; padding: clamp(16px, 2.6vw, 36px); }
.promise__media--site .site-frame { margin: 0; width: 100%; }
.promise__body { display: grid; gap: 14px; align-content: start; padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px) clamp(24px, 2.8vw, 36px); }
.promise__n { color: var(--accent-deep); }
.promise__problem { color: var(--muted); font-size: var(--fs-lead); line-height: 1.3; }
.promise__problem s {
  text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 58% / 0% 2px;
  transition: background-size 0.7s var(--ease) 0.5s;
}
.promise.is-in .promise__problem s, html:not(.reveal-ready) .promise__problem s { background-size: 100% 2px; }
.promise__title { font-size: clamp(36px, 3.6vw, 60px); }
.promise__list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.promise__list li { position: relative; padding: 11px 0 11px 20px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.promise__list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 8px; background: var(--accent); }
.promise__body .link-arrow { justify-self: start; margin-top: 4px; color: var(--ink); }
.promises__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: clamp(24px, 3vw, 40px); }
.promises__foot .lead { color: var(--muted); max-width: 52ch; }
@media (max-width: 900px) { .promises { grid-template-columns: 1fr; } .promise:nth-child(2) { transition-delay: 0s; } .promise__media--site { aspect-ratio: auto; } }