/* Homepage rhythm. The portrait and product demos retain their own art direction;
   the surrounding page uses one frame, one spacing scale, and one reading order. */
html[data-page="home"] {
  --pad: clamp(20px, 4vw, 64px);
  --section-space: clamp(112px, 10vw, 160px);
  --group-space: clamp(32px, 4vw, 56px);
  --column-space: clamp(32px, 5vw, 80px);
  --copy-space: 24px;
  --red: #e60000;
  --surface: #111;
}

html[data-page="home"][data-theme="light"] { --surface: #f1f1f1; }

/* Shared controls: visible hit areas and immediate press feedback. */
.nav { min-height: 80px; padding-block: 16px; background: var(--bg); }
.nav .pill-red, .menu-btn, .pill { min-height: 44px; }
.links a { display: inline-flex; align-items: center; min-height: 44px; }
.menu[hidden] { display: none; }
.pill, .menu-btn, .pl-btn, .pl-link, .vid-play {
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease, color 160ms ease;
}
.pill:active, .menu-btn:active, .pl-btn:active, .pl-link:active, .vid-play:active { transform: scale(.97); }
::selection { color: var(--bg); background: var(--fg); }

/* Keep the first screen's copy clear of the header and the portrait. */
.portrait-intro { padding-top: 112px; gap: var(--column-space); }
.portrait-promise h1 {
  margin: 0 0 var(--copy-space);
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.portrait-promise { max-width: 25ch; }
.portrait-story.is-scrubbing { height: 360svh; }
.is-scrubbing .portrait-handoff {
  top: auto;
  bottom: clamp(80px, 12svh, 128px);
  padding-inline: var(--pad);
}
.portrait-handoff h2 { font-size: clamp(32px, 4.4vw, 68px); }
.portrait-caption { padding-inline: var(--pad); }

/* A question and its answer form a single composition. */
.leak {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--column-space);
  padding: var(--section-space) var(--pad) 0;
}
.leak .gd-q {
  margin: 0;
  font-size: clamp(52px, 7vw, 108px);
  line-height: .98;
  letter-spacing: -.01em;
}
.gd-copy { display: grid; gap: var(--copy-space); }
.leak .gd-lead {
  margin: 0;
  max-width: 52ch;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -.015em;
}
.leak .statement {
  margin: 0;
  max-width: 36ch;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.4;
  letter-spacing: -.025em;
}

.trust {
  grid-template-columns: 1fr 1fr;
  gap: var(--column-space);
  padding: var(--section-space) var(--pad) 0;
}
.trust h2 { font-size: clamp(44px, 6.2vw, 96px); line-height: 1; }
.trust .dash { margin: 32px 0 16px; }
.trust .dash::before { content: none; }
.trust .body { max-width: 42ch; font-size: 18px; line-height: 1.6; }
.logos { gap: 40px 32px; }
.logos img { opacity: .82; max-width: min(140px, 100%); }
.logos .wm { opacity: .82; font-size: 26px; }

/* Heading → media/quote → action. No extra section-sized margins inside it. */
.voices { padding: var(--section-space) 0 0; }
.voice-head { padding: 0 var(--pad); }
.voice-head .tt, .posts-head .tt { font-size: clamp(40px, 5.5vw, 88px); line-height: 1; }
.voice {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--column-space);
  padding: var(--group-space) var(--pad) 0;
}
.voice-r { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.bigq p { max-width: 27ch; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.3; letter-spacing: -.025em; }
.bigq figcaption { margin-top: var(--copy-space); }
.vid-box { border-radius: 0; }
.vid figcaption { flex-wrap: wrap; gap: 4px 12px; line-height: 1.5; }
.midcta {
  margin: var(--group-space) var(--pad) 0;
  padding: 32px 0;
  gap: var(--copy-space);
  border: 0;
}
.midcta p { max-width: 40ch; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; letter-spacing: -.025em; }

.wk { margin-top: 48px; }
.wk-track { height: calc(100svh + (var(--wk-n) - 1) * 40svh); }
.wk .pl-bar { left: var(--pad); right: var(--pad); bottom: 32px; gap: 20px; }
.wk .pl-count { font-family: var(--sans); letter-spacing: 0; font-size: 14px; }
.wk .pl-sub { font-size: 16px; }
.wk .pl-btn, .wk .pl-link { min-height: 44px; }
.wk .pl-btn { width: 44px; border: 0; background: var(--surface); }
.wk .pl-link { background: var(--red); }

/* Each service gets room to demonstrate its steps before the next chapter. */
.story-intro {
  padding: var(--section-space) var(--pad) 64px;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--group-space) var(--column-space);
}
.story-h { font-size: clamp(52px, 8vw, 128px); line-height: .98; }
.story-lede p { max-width: 42ch; font-size: 18px; line-height: 1.6; }
.story-tag { margin-top: 20px !important; font: 400 14px/1.5 var(--sans) !important; text-transform: none; letter-spacing: 0; }
.story-tag i { display: none; }
.story-toc { margin: 8px 0 0; gap: 24px; border: 0; }
.story-toc a { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 0; min-height: 80px; }
.story-toc span { font-size: clamp(28px, 2.6vw, 40px); line-height: 1; }
.story-toc em { font-size: 14px; }
.ch[data-ch="design"] { --len: 460svh; }
.ch[data-ch="build"] { --len: 400svh; }
.ch[data-ch="three"] { --len: 520svh; }
.ch[data-ch="growth"] { --len: 580svh; }
.sv-pin .sv-t { top: 104px; font-size: clamp(48px, 6vw, 96px); line-height: 1; height: 1.1em; }
.sv-n { bottom: 40px; }
.ch-stage { gap: var(--column-space); padding: 144px var(--pad) 48px; }
.ch-copy { padding-top: 0; }
.ch-p { font-size: 17px; line-height: 1.6; color: #eee; }
.story .ch-copy .tools { margin-top: 24px; font-size: 16px; line-height: 1.7; }
.cv { height: min(68svh, 700px); }
.story-end {
  padding: 80px var(--pad) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px var(--column-space);
  border: 0;
}
.se-h { grid-column: 1 / -1; max-width: none; margin: 0; font-size: clamp(36px, 5vw, 80px); line-height: 1; text-wrap: balance; }
.se-p { margin: 0; max-width: 44ch; font-size: 18px; line-height: 1.6; }
.se-row { align-self: center; align-items: center; gap: 12px; }
.gt-n { text-shadow: none; }
.sw span { font-family: var(--sans); }
.voices-2 .voice { padding-top: 0; }

.posts { padding-top: var(--section-space); }
.posts-head { padding: 0 var(--pad) var(--group-space); }
.blist { padding-inline: var(--pad); }
.bl { grid-template-columns: 160px minmax(0, 1fr) 40px; gap: 32px; padding-block: 28px; border: 0; }
.bl + .bl { margin-top: 8px; }
.bl h3 { font-size: clamp(28px, 3.2vw, 48px); line-height: 1.1; }
.bl-c { font-size: 14px; }
.posts-all { margin: 32px var(--pad) 0; }
.faqs { padding: var(--section-space) var(--pad) 0; grid-template-columns: 1fr 1.15fr; gap: var(--column-space); }
.faq-l { gap: 24px; }
.faq-l .tt { font-size: clamp(40px, 5.5vw, 88px); line-height: 1; }
.faq-l .tt span { display: block; }
.faq details { border: 0; background: var(--surface); padding-inline: 24px; }
.faq details + details { margin-top: 8px; }
.faq details:last-child { border: 0; }
.faq summary { padding-block: 24px; font-size: 20px; line-height: 1.4; }
.faq .a { padding-bottom: 24px; font-size: 16px; line-height: 1.6; color: var(--fg); }

/* This is a short invitation, not an empty full-height media section. */
.close { height: auto; min-height: 0; padding: var(--section-space) var(--pad) 0; color: var(--fg); }
.close::after { content: none; }
.close-copy { position: static; padding: 0; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px var(--column-space); }
.close .tt { grid-column: 1 / -1; font-size: clamp(44px, 7vw, 112px); line-height: 1; max-width: none; }
.close-line { font-size: 18px; line-height: 1.6; opacity: 1; }
.close .pill-ghost { color: var(--fg); }
.foot { padding: var(--section-space) var(--pad) 32px; text-align: left; }
.foot-big { flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: 24px; font-size: clamp(36px, 5vw, 80px); }
.foot-row { margin-top: 64px; font-size: 14px; gap: 24px; }
.foot-entity { margin: 32px 0 0; max-width: 76ch; font-size: 14px; line-height: 1.6; }

@media (max-width: 900px) {
  html[data-page="home"] { --section-space: 96px; --group-space: 32px; --column-space: 40px; }
  .leak, .trust, .voice, .voice-r, .story-intro, .faqs { grid-template-columns: 1fr; }
  .leak .gd-q { font-size: clamp(48px, 9vw, 80px); }
  .trust h2 { font-size: clamp(44px, 8vw, 80px); }
  .logos { gap: 36px 24px; }
  .logos img { max-height: 40px; max-width: 120px; }
  .voice { gap: 32px; }
  .voice .vid { max-width: 520px; }
  .voice-r .vid { order: 0; }
  .bigq p { max-width: 34ch; font-size: 28px; }
  .story-h { font-size: clamp(52px, 10vw, 96px); }
  .story-toc { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .sv-pin .sv-t { top: 96px; font-size: 64px; }
  .ch-stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; padding: 172px var(--pad) 32px; gap: 24px; }
  .ch-vis { min-height: 0; }
  .ch-copy { padding: 0; }
  .ch-p { margin: 0; font-size: 16px; }
  .story .ch-copy .tools { margin-top: 12px; }
  .cv { height: min(46svh, 500px); }
  .br-view { height: min(42svh, 440px); }
  .bd { align-content: center; padding-top: 0; }
  .se-h { max-width: none; font-size: clamp(36px, 6.5vw, 60px); }
  .bl { grid-template-columns: 104px minmax(0, 1fr) 24px; gap: 24px; }
  .bl-a { display: block; }
  .faq-l { position: static; }
  .close-copy { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 600px) {
  html[data-page="home"] { --section-space: 80px; --column-space: 32px; }
  .nav-r { gap: 8px; }
  .portrait-intro { padding-top: 100px; gap: 20px; font-size: 15px; line-height: 1.3; }
  .portrait-bio { flex: 0 0 40%; }
  .portrait-promise { max-width: none; flex: 1; }
  .portrait-promise h1 { margin-bottom: 20px; }
  .portrait-promise h1 br { display: none; }
  .portrait-promise .row { gap: 8px; }
  .portrait-promise .pill { min-height: 44px; padding-inline: 12px; font-size: 12px; }
  .is-scrubbing .portrait-person { top: 31%; height: 72%; }
  .is-scrubbing .portrait-caption { top: 13%; font-size: 26px; padding-inline: 20px; }
  .is-scrubbing .portrait-handoff { top: auto; bottom: 80px; }
  .portrait-handoff h2 { font-size: 26px; }
  .leak .gd-q { font-size: clamp(44px, 12vw, 64px); }
  .leak .gd-lead, .trust .body, .story-lede p, .se-p { font-size: 16px; line-height: 1.6; }
  .leak .statement { font-size: 22px; }
  .trust .dash { margin-top: 24px; }
  .logos { gap: 32px 20px; }
  .logos img { max-height: 32px; max-width: 96px; }
  .logos .wm { font-size: 21px; }
  .voice-head .tt, .posts-head .tt { font-size: 40px; }
  .voice { gap: 24px; }
  .bigq p { font-size: 24px; line-height: 1.35; }
  .midcta { align-items: flex-start; padding-block: 16px; gap: 20px; }
  .midcta p { font-size: 20px; }
  .wk { margin-top: 32px; }
  .wk .pl-bar { bottom: 28px; gap: 12px; }
  .wk .pl-sub { font-size: 15px; }
  .story-intro { padding-bottom: 40px; }
  .story-toc { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .story-toc a { min-height: 76px; }
  .sv-pin .sv-t { top: 96px; font-size: 56px; }
  .ch-stage { padding-top: 160px; padding-bottom: 24px; gap: 20px; }
  .story .ch-copy .tools { font-size: 14px; line-height: 1.5; }
  .cv { height: min(40svh, 360px); }
  .br-view { height: min(36svh, 360px); }
  .perf { gap: 12px; }
  .story-end { padding-top: 64px; grid-template-columns: 1fr; gap: 24px; }
  .se-h { font-size: 36px; }
  .se-row { gap: 12px; }
  .bl { grid-template-columns: 1fr; gap: 12px; padding-block: 24px; }
  .bl h3 { font-size: 28px; }
  .bl-a { display: none; }
  .bl + .bl { margin-top: 16px; }
  .faqs { gap: 32px; }
  .faq-l .tt { font-size: 40px; }
  .faq details { padding-inline: 20px; }
  .faq summary { font-size: 18px; padding-block: 20px; }
  .close .tt { font-size: 44px; }
  .close-line { font-size: 16px; }
  .foot-big { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 36px; }
  .foot-row { flex-direction: column; margin-top: 48px; gap: 20px; }
  .foot-row nav { flex-wrap: wrap; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .pill:active, .menu-btn:active, .pl-btn:active, .pl-link:active, .vid-play:active { transform: none; }
}