:root {
  --dv-paper: #f4f3f3;
  --dv-white: #fbfbfb;
  --dv-ink: #171717;
  --dv-body: #62666a;
  --dv-line: rgba(55, 67, 77, .16);
  --dv-line-strong: rgba(55, 67, 77, .34);
  --dv-blue: #a8b8c5;
  --dv-blue-soft: #e5ebef;
  --dv-dark: #37434d;
  --dv-motion: cubic-bezier(.32,.72,0,1);
}

html { scroll-behavior: smooth; }
.dv-preview { margin: 0; background: var(--dv-paper); color: var(--dv-ink); }
.dv-preview__bar { position: sticky; top: 0; z-index: 10; min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding-inline: max(24px, calc((100vw - 1600px) / 2)); background: rgba(244,243,243,.94); box-shadow: inset 0 -1px var(--dv-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.dv-preview__logo { color: var(--dv-ink); font: 600 17px/1 'Unbounded', sans-serif; text-decoration: none; }
.dv-preview__bar nav { display: flex; gap: 8px; }
.dv-preview__bar nav a { width: 36px; height: 36px; display: grid; place-items: center; color: var(--dv-body); font: 400 9px/1 'IBM Plex Mono', monospace; text-decoration: none; box-shadow: inset 0 0 0 1px var(--dv-line); transition: color 420ms var(--dv-motion), background-color 420ms var(--dv-motion), transform 420ms var(--dv-motion); }
.dv-preview__bar nav a:hover { color: var(--dv-ink); background: var(--dv-white); transform: translateY(-2px); }
.dv-preview main { width: min(1600px, calc(100% - 80px)); margin-inline: auto; }
.dv-rubric { color: var(--dv-body); font: 400 10px/1 'IBM Plex Mono', monospace; letter-spacing: .18em; text-transform: uppercase; }
.dv-preview__intro { max-width: 1300px; padding-block: clamp(84px, 11vw, 168px); }
.dv-preview__intro h1 { max-width: 20ch; margin-top: 24px; font-size: clamp(48px, 6.2vw, 94px); line-height: .98; }
.dv-preview__intro p { max-width: 680px; margin-top: 34px; color: var(--dv-body); font-size: 18px; line-height: 1.55; }
.dv-option { min-height: 840px; padding-block: clamp(72px, 8vw, 120px); scroll-margin-top: 64px; box-shadow: inset 0 1px var(--dv-line); }
.dv-option__head { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.6fr); gap: 48px; align-items: end; margin-bottom: clamp(48px,6vw,84px); }
.dv-option__head > div { display: flex; align-items: baseline; gap: 24px; }
.dv-option__head > div > span { color: var(--dv-dark); font: 400 10px/1 'IBM Plex Mono', monospace; letter-spacing: .16em; }
.dv-option__head h2 { max-width: 19ch; font-size: clamp(32px,4vw,58px); line-height: 1.05; }
.dv-option__head > p { max-width: 42ch; color: var(--dv-body); font-size: 17px; line-height: 1.55; }

/* 01 — runway */
.dv-runway { padding: clamp(34px,4vw,60px); background: var(--dv-white); box-shadow: none; }
.dv-runway__line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; color: var(--dv-body); font: 400 9px/1 'IBM Plex Mono', monospace; letter-spacing: .15em; text-transform: uppercase; }
.dv-runway__line i { height: 1px; background: linear-gradient(90deg,var(--dv-line),var(--dv-dark)); }
.dv-runway__steps { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 46px; box-shadow: inset 1px 1px var(--dv-line); }
.dv-runway__steps article { min-height: 430px; display: flex; flex-direction: column; padding: 28px; box-shadow: inset -1px -1px var(--dv-line); }
.dv-runway__steps article > span { color: var(--dv-body); font: 300 clamp(34px,3vw,50px)/1 'Unbounded', sans-serif; }
.dv-runway__steps small { margin-top: auto; color: var(--dv-body); font: 400 9px/1 'IBM Plex Mono', monospace; letter-spacing: .13em; text-transform: uppercase; }
.dv-runway__steps h3 { margin-top: 20px; font-size: clamp(18px,1.7vw,24px); line-height: 1.2; }
.dv-runway__steps p { margin-top: 18px; color: var(--dv-body); font-size: 14px; line-height: 1.55; }
.dv-runway__steps .is-accent { color: var(--dv-white); background: var(--dv-dark); }
.dv-runway__steps .is-accent > span, .dv-runway__steps .is-accent small, .dv-runway__steps .is-accent p { color: var(--dv-blue); }

/* 02 — cinematic chapters */
.dv-focus { position: relative; background: transparent; box-shadow: none; }
.dv-focus__scene {
  position: relative;
  isolation: isolate;
  min-height: clamp(560px, 59vw, 720px);
  overflow: hidden;
  color: #fff;
  background: #171b1e;
}
.dv-focus__image {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  filter: saturate(.92) contrast(1.04);
  transition: opacity 420ms var(--dv-motion), transform 8s ease-out;
}
.dv-focus__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(8,12,14,.9) 0%, rgba(8,12,14,.65) 43%, rgba(8,12,14,.08) 82%),
    linear-gradient(0deg, rgba(8,12,14,.78) 0%, transparent 64%);
}
.dv-focus__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 76% 34%, transparent 0 28%, rgba(8,12,14,.24) 100%);
}
.dv-focus__story {
  min-height: inherit;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(42px,5vw,78px);
}
.dv-focus__meta {
  display: flex;
  gap: 18px;
  margin-bottom: auto;
  color: rgba(255,255,255,.62);
  font: 400 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.dv-focus__meta span:last-child { color: var(--dv-blue); }
.dv-focus__story h3 {
  max-width: 14ch;
  margin-top: clamp(70px,10vw,150px);
  font-size: clamp(42px,5.2vw,78px);
  line-height: .98;
  letter-spacing: -.045em;
}
.dv-focus__text {
  max-width: 58ch;
  margin-top: 28px;
  color: rgba(255,255,255,.72);
  font-size: clamp(16px,1.25vw,20px);
  line-height: 1.55;
}
.dv-focus__outcome {
  max-width: 600px;
  display: grid;
  gap: 10px;
  margin-top: 36px;
}
.dv-focus__outcome small {
  color: var(--dv-blue);
  font: 400 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.dv-focus__outcome strong {
  font-size: clamp(20px,2vw,30px);
  line-height: 1.25;
  font-weight: 400;
}
.dv-focus__chapters { display: flex; gap: 12px; margin-top: 12px; }
.dv-focus__chapters button {
  position: relative;
  isolation: isolate;
  flex: 1;
  min-width: 0;
  height: 152px;
  overflow: hidden;
  border: 0;
  padding: 18px 20px;
  cursor: pointer;
  color: #fff;
  background: #171b1e;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 5px;
  text-align: left;
  transition: flex 520ms var(--dv-motion), transform 360ms var(--dv-motion);
}
.dv-focus__chapters button:hover { transform: translateY(-3px); }
.dv-focus__chapters button[aria-selected="true"] { flex: 1.55; }
.dv-focus__chapters button img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.45) brightness(.62);
  transform: scale(1.01);
  transition: filter 420ms var(--dv-motion), transform 4s ease-out;
}
.dv-focus__chapters button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg,rgba(8,12,14,.9),rgba(8,12,14,.12));
}
.dv-focus__chapters button[aria-selected="true"] img {
  filter: saturate(.9) brightness(.78);
  transform: scale(1.05);
}
.dv-focus__chapters button span {
  font: 400 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  color: rgba(255,255,255,.65);
}
.dv-focus__chapters button b {
  grid-column: 1/-1;
  align-self: end;
  font: 400 clamp(13px,1vw,16px)/1.2 'Unbounded',sans-serif;
}
.dv-focus__chapters button small {
  grid-column: 1/-1;
  color: var(--dv-blue);
  font: 400 8px/1 'IBM Plex Mono',monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.dv-focus__chapters button:focus-visible {
  outline: 2px solid var(--dv-blue);
  outline-offset: 3px;
}
.dv-focus__scene.is-changing .dv-focus__story > * { animation: dv-rise 560ms var(--dv-motion); }

/* 03 — core */
.dv-core { display: grid; grid-template-columns: 1fr minmax(300px,.8fr) 1fr; grid-template-rows: 1fr 1fr; min-height: 660px; background: var(--dv-white); box-shadow: none; }
.dv-core__card { min-height: 330px; padding: clamp(28px,3vw,46px); box-shadow: inset -1px -1px var(--dv-line); }
.dv-core__card > span { color: var(--dv-body); font: 400 9px/1 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.dv-core__card h3 { max-width: 18ch; margin-top: 62px; font-size: clamp(22px,2.2vw,32px); line-height: 1.14; }
.dv-core__card p { margin-top: 22px; color: var(--dv-body); font-size: 15px; line-height: 1.5; }
.dv-core__center { grid-column: 2; grid-row: 1/3; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(34px,4vw,58px); color: var(--dv-white); background: var(--dv-dark); }
.dv-core__center small, .dv-core__center span { color: var(--dv-blue); font: 400 9px/1.5 'IBM Plex Mono', monospace; letter-spacing: .15em; text-transform: uppercase; }
.dv-core__center p { font: 300 clamp(32px,3.6vw,52px)/1.12 'Unbounded', sans-serif; letter-spacing: -.035em; }
.dv-core__card--1 { grid-column: 1; grid-row: 1; }
.dv-core__card--2 { grid-column: 1; grid-row: 2; }
.dv-core__card--3 { grid-column: 3; grid-row: 1; }
.dv-core__card--4 { grid-column: 3; grid-row: 2; background: var(--dv-blue-soft); }

/* 04 — ledger */
.dv-ledger { background: var(--dv-white); box-shadow: none; }
.dv-ledger__head, .dv-ledger article { display: grid; grid-template-columns: minmax(170px,.55fr) minmax(320px,1.1fr) minmax(260px,.8fr); gap: 34px; align-items: center; padding-inline: clamp(26px,3vw,46px); }
.dv-ledger__head { min-height: 72px; color: var(--dv-body); font: 400 9px/1 'IBM Plex Mono', monospace; letter-spacing: .13em; text-transform: uppercase; box-shadow: inset 0 -1px var(--dv-line); }
.dv-ledger article { min-height: 132px; box-shadow: inset 0 -1px var(--dv-line); }
.dv-ledger article:last-child { box-shadow: none; }
.dv-ledger article small { color: var(--dv-body); font: 400 9px/1.4 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.dv-ledger article h3 { font-size: clamp(18px,1.75vw,25px); line-height: 1.25; }
.dv-ledger article p { color: var(--dv-body); font-size: 14px; line-height: 1.5; }
.dv-ledger article.is-accent { color: var(--dv-white); background: var(--dv-dark); }
.dv-ledger article.is-accent small, .dv-ledger article.is-accent p { color: var(--dv-blue); }

/* 05 — stairs */
.dv-stairs { min-height: 650px; display: grid; grid-template-columns: repeat(4,1fr); align-items: end; padding: 48px; background: var(--dv-white); box-shadow: none; }
.dv-stairs article { min-height: 330px; display: flex; flex-direction: column; padding: 28px; background: var(--dv-paper); box-shadow: inset -1px -1px var(--dv-line); }
.dv-stairs article:nth-child(2) { min-height: 390px; }
.dv-stairs article:nth-child(3) { min-height: 450px; }
.dv-stairs article:nth-child(4) { min-height: 510px; }
.dv-stairs article > span { color: var(--dv-body); font: 300 clamp(32px,3vw,48px)/1 'Unbounded', sans-serif; }
.dv-stairs small { margin-top: auto; color: var(--dv-body); font: 400 9px/1 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.dv-stairs h3 { margin-top: 18px; font-size: clamp(18px,1.8vw,25px); line-height: 1.2; }
.dv-stairs p { margin-top: 18px; color: var(--dv-body); font-size: 14px; line-height: 1.5; }
.dv-stairs .is-accent { color: var(--dv-white); background: var(--dv-dark); }
.dv-stairs .is-accent > span, .dv-stairs .is-accent small, .dv-stairs .is-accent p { color: var(--dv-blue); }

@keyframes dv-rise { from { opacity: .15; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .dv-preview main { width: min(100% - 40px,680px); }
  .dv-preview__intro { padding-block: 72px; }
  .dv-preview__intro h1 { font-size: clamp(36px,9vw,56px); }
  .dv-option { min-height: 0; padding-block: 72px; }
  .dv-option__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .dv-option__head > div { display: block; }
  .dv-option__head h2 { margin-top: 14px; font-size: 32px; }

  .dv-runway__steps { grid-template-columns: 1fr; }
  .dv-runway__steps article { min-height: 230px; display: grid; grid-template-columns: 60px 1fr; grid-template-rows: auto auto 1fr; column-gap: 18px; }
  .dv-runway__steps article > span { grid-row: 1/4; }
  .dv-runway__steps small { margin-top: 0; }
  .dv-runway__steps h3 { margin-top: 16px; }
  .dv-runway__steps p { grid-column: 2; }

  .dv-focus__scene { min-height: 620px; }
  .dv-focus__story { padding: 38px; }
  .dv-focus__chapters { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .dv-focus__chapters::-webkit-scrollbar { display: none; }
  .dv-focus__chapters button,
  .dv-focus__chapters button[aria-selected="true"] {
    flex: 0 0 220px;
    height: 132px;
    scroll-snap-align: start;
  }

  .dv-core { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .dv-core__center { grid-column: 1/3; grid-row: 1; min-height: 360px; }
  .dv-core__card--1, .dv-core__card--2, .dv-core__card--3, .dv-core__card--4 { grid-column: auto; grid-row: auto; }

  .dv-ledger__head { display: none; }
  .dv-ledger article { grid-template-columns: 1fr; gap: 18px; align-content: center; min-height: 230px; padding-block: 28px; }

  .dv-stairs { grid-template-columns: 1fr 1fr; align-items: stretch; padding: 28px; }
  .dv-stairs article, .dv-stairs article:nth-child(2), .dv-stairs article:nth-child(3), .dv-stairs article:nth-child(4) { min-height: 320px; }
}

@media (max-width: 480px) {
  .dv-preview__bar { padding-inline: 20px; }
  .dv-preview__bar nav { gap: 5px; }
  .dv-preview__bar nav a { width: 31px; height: 31px; }
  .dv-preview main { width: calc(100% - 40px); }
  .dv-preview__intro { padding-block: 56px 72px; }
  .dv-preview__intro h1 { font-size: 34px; }
  .dv-preview__intro p { margin-top: 24px; font-size: 15px; }
  .dv-option { padding-block: 56px; }
  .dv-option__head h2 { font-size: 27px; }
  .dv-option__head > p { font-size: 15px; }

  .dv-runway { padding: 20px; box-shadow: none; }
  .dv-runway__line { grid-template-columns: 1fr; gap: 10px; }
  .dv-runway__line i { display: none; }
  .dv-runway__line span:last-child { text-align: right; }
  .dv-runway__steps article { min-height: 220px; padding: 20px; }
  .dv-runway__steps article > span { font-size: 34px; }
  .dv-runway__steps h3 { font-size: 19px; }

  .dv-focus__scene { min-height: 590px; }
  .dv-focus__shade {
    background:
      linear-gradient(90deg,rgba(8,12,14,.88),rgba(8,12,14,.4)),
      linear-gradient(0deg,rgba(8,12,14,.82),transparent 72%);
  }
  .dv-focus__story { padding: 28px 22px 32px; }
  .dv-focus__story h3 { margin-top: 64px; font-size: clamp(34px,10vw,43px); }
  .dv-focus__text { margin-top: 22px; font-size: 15px; line-height: 1.5; }
  .dv-focus__outcome { margin-top: 26px; }
  .dv-focus__chapters button,
  .dv-focus__chapters button[aria-selected="true"] {
    flex-basis: 190px;
    height: 118px;
    padding: 14px;
  }

  .dv-core { grid-template-columns: 1fr; box-shadow: none; }
  .dv-core__center { grid-column: 1; min-height: 320px; padding: 28px; }
  .dv-core__center p { font-size: 34px; }
  .dv-core__card { min-height: 235px; padding: 26px; }
  .dv-core__card h3 { margin-top: 42px; font-size: 23px; }

  .dv-ledger { box-shadow: none; }
  .dv-ledger article { min-height: 220px; padding-inline: 24px; }
  .dv-ledger article h3 { font-size: 20px; }

  .dv-stairs { grid-template-columns: 1fr; padding: 20px; box-shadow: none; }
  .dv-stairs article, .dv-stairs article:nth-child(2), .dv-stairs article:nth-child(3), .dv-stairs article:nth-child(4) { min-height: 245px; padding: 22px; }
  .dv-stairs article > span { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dv-focus__scene.is-changing .dv-focus__story > * { animation: none; }
  .dv-focus__image { transition: none; }
}