/* Instant Studio — static marketing pages (child pages).
   Header, footer and brand tokens come from /css/chrome.css; shared marketing
   components (tiles, pills, tagged media, mocks, proof) from
   /css/components.css. Every page loads all three, in that order.
   This file carries the child-page system from the 16 September 2026
   design round: page ground, container, eyebrows, headings, buttons, beats,
   hairline lists, the peach CTA field and the page-specific blocks.
   Cache-busting: ?v=<hash>, stamped by scripts/stamp-chrome.sh. */

/* ---------- page ground ---------- */

/* The texture is sized against the root box. The homepage keeps html at the
   viewport height, so the 1440x1068 image paints once at native size across
   the top and the rest of the page stays white. Without this the root grows
   with the page and "cover" blows the dots up several times over. */
html {
  height: 100%;
}

body {
  color: var(--ink-muted);
  line-height: 1.6;
  background: #fff url("/images/hero-section.svg") 50% 0 / cover no-repeat;
}

.page-main {
  flex: 1;
  width: 100%;
}

.wrap {
  max-width: 1312px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
}

.section {
  padding: clamp(32px, 4vw, 56px) 0;
}

.section--beat {
  padding: clamp(48px, 6vw, 96px) 0 0;
}

/* Vertical rhythm between the big blocks of a long page. */
.stack > * + * {
  margin-top: clamp(48px, 6vw, 80px);
}

/* ---------- eyebrow ---------- */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
}

.kicker::before {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent-secondary);
}

.kicker a {
  color: inherit;
  text-decoration: none;
}

.kicker a:hover {
  color: var(--accent-primary);
}

.kicker--crumb {
  text-transform: lowercase;
}

.kicker--crumb a,
.kicker__sep {
  color: #878787;
}

/* ---------- headings ---------- */

.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 9vw - 50px, 80px);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 24px;
  text-wrap: balance;
}

.hero:not(.hero--split) h1 {
  max-width: 960px;
}

.section-title,
.beat__head h2,
.prose h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 24px;
  text-wrap: balance;
}

/* ---------- hero ---------- */

.hero {
  padding: clamp(48px, 10vw - 48px, 96px) 0 clamp(40px, 5vw, 72px);
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
  align-items: center;
}

.hero__grid--end {
  align-items: end;
}

.hero__grid h1 {
  margin-bottom: 0;
}

.hero__grid > div > h1 {
  margin-bottom: 24px;
}

.lede {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 620px;
  margin: 0 0 32px;
}

.lede:last-child {
  margin-bottom: 0;
}

.sub {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0;
}

.formula {
  display: inline-block;
  margin: -8px 0 32px;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.formula b {
  color: var(--accent-primary);
  font-weight: 500;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tagged--hero {
  max-width: 640px;
  justify-self: end;
  width: 100%;
}

@media (max-width: 720px) {
  .tagged--hero {
    justify-self: stretch;
    max-width: none;
  }
}

/* ---------- buttons (homepage spec) ---------- */

.button {
  display: inline-block;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  color: var(--on-lavender);
  background: var(--accent-secondary);
  border: 1px solid transparent;
  border-radius: 16px;
}

.button:hover {
  background: var(--accent-secondary-hover);
  color: var(--on-lavender);
}

.button--primary {
  font-weight: 600;
  color: #fff;
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.button--primary:hover {
  color: #fff;
  background: var(--accent-primary-dark);
  border-color: var(--accent-primary-dark);
}

.button--ghost {
  font-weight: 400;
  color: #a958fa;
  background: #fff;
  border-color: #a958fa;
}

.button--ghost:hover {
  color: #a958fa;
  background: rgba(209, 179, 255, 0.2);
}

button.button {
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

button.button--primary {
  font-weight: 600;
}

button.button:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ---------- section head, beats, hairline lists ---------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

.section-head .kicker {
  margin: 0;
}

.section-head__note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #878787;
}

.beat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.beat__head .kicker {
  margin-bottom: 16px;
}

.beat__head h2 {
  margin-bottom: 0;
}

.beat__lead {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.6;
}

.beat__body p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.6;
}

.beat__body p:last-child {
  margin-bottom: 0;
}

.beat__body a,
.intro a,
.caption a {
  color: var(--accent-primary);
  font-weight: 600;
  text-decoration: none;
}

.beat__body a:hover,
.intro a:hover,
.caption a:hover {
  text-decoration: underline;
}

.intro {
  max-width: 760px;
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.6;
}

.rule-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 24px;
  border-top: 1px solid var(--line);
}

.rule-cols > * {
  padding: 28px 0;
  margin: 0;
}

a.rule-cols__item {
  display: block;
  color: var(--ink-muted);
  text-decoration: none;
}

a.rule-cols__item:hover {
  color: var(--ink);
}

.rule-kicker {
  display: block;
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

.rule-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 10px;
}

.rule-cols p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(32px, 4vw, 48px);
}

.duo p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}

.duo b {
  color: var(--ink);
  font-weight: 600;
}

/* Numbers between two hairlines (case pages). */

.stat-rule {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat-rule > div {
  padding: 28px 0;
}

.stat-rule b {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
  color: var(--accent-primary);
}

/* Numerals never sit in Hubot: the subset draws every zero slashed. */
.stat-rule .num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.stat-rule .num small {
  font-size: 0.5em;
  font-weight: 500;
}

.stat-rule span:not(.num) {
  font-size: 15px;
}

/* ---------- prose (pages not yet redesigned) ---------- */

.prose {
  max-width: 760px;
}

.prose h2 {
  margin: 52px 0 16px;
}

.prose h2:first-child {
  margin-top: 8px;
}

.prose h3 {
  font-family: "Hubot Sans", var(--font-body);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink);
  margin: 30px 0 10px;
}

.prose p {
  margin: 0 0 18px;
}

.prose ul,
.prose ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

.prose li {
  margin-bottom: 8px;
}

.prose a {
  color: var(--accent-primary);
}

.prose a:hover {
  color: var(--accent-primary-dark);
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- locked / controlled / generative ---------- */

.layers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 0 0 28px;
}

.layer {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.layer__tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
}

.layer--locked .layer__tag {
  color: #fff;
  background: var(--ink);
}

.layer--controlled .layer__tag {
  color: #fff;
  background: var(--accent-primary);
}

.layer--generative .layer__tag {
  color: var(--on-lavender);
  background: var(--accent-secondary);
}

.layer h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
}

.layer p,
.layer ul {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}

.layer ul {
  padding-left: 18px;
}

.layer li {
  margin-bottom: 4px;
}

/* ---------- compare tables ---------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
}

.spec-table {
  width: 100%;
  min-width: 520px;
  border-collapse: separate;
  border-spacing: 1px;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.5;
  background: var(--line);
  border-radius: 16px;
}

.spec-table th,
.spec-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  background: #fff;
}

.spec-table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: #fafafa;
}

.spec-table thead th:last-child,
.spec-table .is-us {
  color: var(--accent-primary);
  background: var(--bg-cream);
}

.spec-table tbody th {
  font-weight: 600;
  color: var(--ink);
}

.spec-table tbody td:last-child {
  color: var(--ink);
}

.spec-table caption {
  caption-side: bottom;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  padding: 10px 2px 0;
}

/* ---------- tagged image groups ---------- */

.designs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  align-items: center;
}

@media (min-width: 700px) {
  .designs--raise > :nth-child(2) {
    transform: translateY(-16px);
  }
}

.figure {
  margin: 0;
}

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.figure-pair {
  max-width: 880px;
}

.figure-pair .figures {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.caption {
  max-width: 760px;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ---------- case callout and playbook row ---------- */

.callout {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(28px, 3vw, 40px);
  color: var(--ink-muted);
  text-decoration: none;
  background: var(--bg-cream);
  border: 1px solid #ffd9c7;
  border-radius: 16px;
  transition: border-color 0.15s ease;
}

.callout:hover {
  border-color: var(--accent-primary);
}

.callout__kicker {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

.callout__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
  color: var(--ink);
}

.callout__sub {
  display: block;
  margin-top: 10px;
  font-size: 15px;
}

.callout p {
  margin: 0 0 10px;
  font-size: 16.5px;
  line-height: 1.6;
}

.callout__more,
.case-row__more,
.playbook__more {
  font-weight: 600;
  color: var(--accent-primary);
  text-decoration: none;
}

.callout__more::after,
.case-row__more::after,
.playbook__more::after,
.pilot__talk a::after {
  content: " \2192";
}

.playbook__more:hover,
.case-row__more:hover {
  text-decoration: underline;
}

.playbook {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.playbook__label {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.playbook p {
  margin: 0;
  color: var(--ink);
}

.playbook__more {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .callout {
    grid-template-columns: 1fr;
  }
}

/* ---------- the older cream callout (case pages not yet redesigned) ---------- */

.case {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: center;
  background: var(--bg-cream);
  border: 1px solid #ffd9c7;
  border-radius: 16px;
  padding: 28px 32px;
  margin: 36px 0;
}

.case__number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  color: var(--accent-primary);
}

.case__number small {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.case p {
  margin: 0 0 10px;
  font-size: 16.5px;
}

.case p:last-child {
  margin: 0;
}

.case a {
  color: var(--accent-primary);
  font-weight: 600;
  text-decoration: none;
}

.case a:hover {
  text-decoration: underline;
}

/* ---------- case rows (work index) ---------- */

.case-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}

.case-row + .case-row {
  margin-top: clamp(48px, 6vw, 80px);
}

@media (min-width: 700px) {
  .case-row--flip .case-row__media {
    order: 2;
  }
}

.case-row__media {
  display: block;
  text-decoration: none;
}

.case-row__client {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

.case-row h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}

.case-row h2 a {
  color: inherit;
  text-decoration: none;
}

.case-row h2 a:hover {
  color: var(--accent-primary);
}

.case-row__text > p {
  max-width: 520px;
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.6;
}

.case-row .tile__tags {
  margin-bottom: 18px;
}

/* ---------- peach CTA field ---------- */

.cta-wrap {
  padding: clamp(72px, 9vw, 128px) clamp(16px, 4vw, 48px) 0;
  text-align: center;
}

.cta-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 4vw, 64px);
  background-color: var(--bg-cream);
  background-image: radial-gradient(#e7d8ce 1px, transparent 1px);
  background-size: 14px 14px;
  border-radius: 16px;
}

.cta-box .kicker {
  margin: 0;
}

.cta-box h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.cta-box p {
  max-width: 708px;
  margin: 0;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-muted);
}

.cta-box__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

/* ---------- card grids (index pages not yet redesigned) ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.card {
  display: block;
  padding: 24px;
  color: var(--ink-soft);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color 0.15s ease;
  scroll-margin-top: 24px;
}

.card:hover {
  border-color: var(--accent-primary);
}

.card__kicker {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

.card h2,
.card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
  color: var(--ink);
}

.card p {
  margin: 0 0 12px;
  font-size: 16px;
}

.card__more {
  font-weight: 600;
  color: var(--accent-primary);
}

/* ---------- numbered steps (list form) ---------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 24px 0 8px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.steps li::before {
  content: counter(step);
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg-cream);
  border: 1px solid var(--accent-primary);
  border-radius: 50%;
}

/* The counter takes column one; the title and the text stack in column two.
   Without the placement the text auto-flows into the 40px counter column. */
.steps b,
.steps span {
  grid-column: 2;
}

.steps b {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.steps span {
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* ---------- facts, meta, stats, pull quotes, news ---------- */

.facts {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px 24px;
  margin: 20px 0 28px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.facts dt {
  padding-top: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.facts dd {
  margin: 0;
  color: var(--ink-soft);
}

.meta {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-muted);
}

.meta a {
  color: var(--ink-muted);
  text-decoration: none;
}

.meta a:hover {
  color: var(--accent-primary);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0 24px;
  margin: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat {
  padding: 24px 0;
}

.stat b {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1;
  color: var(--accent-primary);
}

.stat span {
  font-size: 15px;
  color: var(--ink-muted);
}

.pull {
  margin: 28px 0;
  padding: 18px 24px;
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg-cream);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.dateline {
  margin: 0 0 24px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-muted);
}

.dateline b {
  color: var(--ink);
  font-weight: 600;
}

.boilerplate {
  margin-top: 40px;
  padding-top: 24px;
  font-size: 16px;
  border-top: 1px solid var(--line);
}

.boilerplate h2 {
  font-size: 22px;
  margin-top: 0;
}

@media (max-width: 820px) {
  .case {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px;
  }

  .facts {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }

  .facts dt {
    margin-top: 12px;
  }

  .facts dt:first-child {
    margin-top: 0;
  }
}

/* ---------- work samples (case pages not yet redesigned) ---------- */

.media {
  margin: 40px 0;
}

.media__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.media__cell {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.media__cell img,
.media__cell video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(16, 16, 16, 0.72);
  border-radius: 999px;
}

.media__tag--accent {
  background: var(--accent-primary);
}

.media figcaption {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.media--film video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border-radius: var(--radius);
}

.film {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: var(--radius);
}

.film__poster {
  display: block;
  width: 100%;
  height: 100%;
}

.film__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 10px 30px rgba(16, 16, 16, 0.35);
}

.film__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -13px 0 0 -8px;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
}

.film__poster:hover .film__play {
  background: var(--accent-primary-dark);
}

.film__label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(16, 16, 16, 0.72);
  border-radius: 999px;
}

.film iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.media__grid--portrait {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-width: 760px;
}

.media__grid--portrait .media__cell {
  aspect-ratio: 9 / 16;
}

/* ---------- pilot page ---------- */

.pilot {
  padding-bottom: clamp(40px, 5vw, 72px);
}

.pilot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "form" "aside";
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.pilot__intro {
  grid-area: intro;
}

.pilot__aside {
  grid-area: aside;
}

.pilot__form {
  grid-area: form;
}

/* Two columns: the headline and the steps stack on the left, the form spans
   both rows on the right. On phones the form follows the headline directly. */
@media (min-width: 760px) {
  .pilot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    grid-template-areas: "intro form" "aside form";
    row-gap: 0;
  }
}

.next {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.next li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.next__n {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--accent-primary);
}

.next__t {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
}

.next__b {
  font-size: 15px;
  line-height: 1.55;
}

.pilot__talk {
  margin: 0;
  font-size: 16px;
}

.pilot__talk a {
  font-weight: 600;
  color: var(--accent-primary);
  text-decoration: none;
}

.pilot__talk a:hover {
  text-decoration: underline;
}

/* ---------- forms (pilot enquiry) ---------- */

.form-card {
  padding: clamp(24px, 3vw, 40px);
  background-color: var(--bg-cream);
  background-image: radial-gradient(#e7d8ce 1px, transparent 1px);
  background-size: 14px 14px;
  border: 1px solid #ffd9c7;
  border-radius: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.form-field--full,
.form-foot,
.form-error {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

.form-optional {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid #c4c4c4;
  border-radius: 12px;
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-field select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23606060' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
  border-color: var(--accent-primary);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #9a9a9a;
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 4px;
}

.form-note {
  max-width: 420px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.form-note a {
  color: inherit;
}

.form-error {
  display: none;
  padding: 12px 14px;
  font-size: 15px;
  color: #8a2a12;
  background: #fff;
  border: 1px solid #ffd9c7;
  border-radius: 12px;
}

.form-error a {
  color: inherit;
}

.form-done {
  display: none;
}

.form-done h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 36px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 12px;
}

.form-done p {
  max-width: 620px;
  margin: 0 0 16px;
}