/* 36 · Downstream — homepage-only styles (round 6, home agent). Loaded after site.css.
   Colors and type follow BRIEF-R6 §6: brand set for text and UI, warm color only inside the prints. */
:root {
  --b-ink: #16243D; --b-navy: #24405E; --b-blue: #3C6E91; --b-teal: #56B8A6; --b-slate: #45566B;
  --div-pos: #C2604D; --div-neg: #2E6DA8; --div-mid: #EFEEEC;
  --label: 'Montserrat', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --brand-serif: 'Source Serif 4', Georgia, serif;
}

/* ---------- the descent: one pinned stage, scroll drives it (descent.js) ---------- */
.descent { position: relative; padding: clamp(28px, 4vw, 56px) 0 0; }
.ds-track { position: relative; }
.ds-stage { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; overflow: hidden; }
.ds-text { position: relative; flex: 0 0 auto; height: var(--band, 150px); width: 100%; box-sizing: border-box; }
.ds-step { position: absolute; left: var(--gut); right: var(--gut); top: 0; padding-top: clamp(10px, 2vh, 22px); max-width: 78ch; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.ds-step.on { opacity: 1; visibility: visible; transition: opacity .45s ease .05s, visibility 0s; }
.ds-step h2 { font-family: var(--brand-serif); font-weight: 400; font-size: clamp(28px, 3vw, 44px); line-height: 1.12; }
.ds-step h3 { font-family: var(--brand-serif); font-weight: 400; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.15; margin: 0 0 8px; }
.ds-step p { font-family: var(--brand-serif); font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.5; margin: 0; color: var(--b-ink); max-width: 76ch; }
.ds-step .still { display: none; }
.ds-view { position: relative; flex: 1 1 auto; min-height: 0; }
.ds-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ds-ill { position: absolute; right: var(--gut); bottom: 10px; margin: 0; font-family: var(--label); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--b-slate); pointer-events: none; opacity: 0; transition: opacity .4s; }
.ds-ill.show { opacity: 1; }
.ds-quiet { pointer-events: none; }

/* the last step: the two homes, in the same stage */
.ds-pair { position: absolute; inset: 0 var(--gut) 36px; max-width: calc(var(--wrap) - 2 * var(--gut)); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; column-gap: clamp(14px, 2vw, 28px); row-gap: 6px; opacity: 0; visibility: hidden; pointer-events: none; }
.ds-pair.show { visibility: visible; pointer-events: auto; }
.ds-ph { display: flex; flex-direction: column; min-height: 0; }
.ds-ph .ph { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--sheet); }
.ds-ph .ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ds-ph svg[data-flow] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ds-ph .wind-tag { position: absolute; left: 10px; top: 10px; background: rgba(249, 243, 233, .94); padding: 5px 9px 4px; font-family: var(--label); font-weight: 600; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--b-ink); }
.ds-ph .rd { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding-top: 10px; color: var(--b-ink); }
.ds-ph .hm { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-family: var(--label); font-weight: 600; font-size: 14px; color: #fff; }
.ds-ph .hm.a { background: var(--div-pos); }
.ds-ph .hm.b { background: var(--div-neg); }
.ds-ph .mph { font-family: var(--brand-serif); font-size: clamp(26px, 2.4vw, 36px); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.ds-ph .mph small { font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-left: 6px; color: var(--b-slate); }
.ds-ph .was { font-family: var(--brand-serif); font-style: italic; font-size: 16px; color: var(--b-slate); opacity: .75; margin-left: 18px; }
.ds-pair > figcaption { grid-column: 1 / -1; font-family: var(--brand-serif); font-style: italic; font-size: 15.5px; line-height: 1.4; color: var(--b-slate); margin: 4px 0 0; max-width: 70ch; }

/* streamlines over the photos: a quiet paper base line with ink pulses; lee eddies turn clockwise (side view, wind left to right) */
svg[data-flow] .fl { fill: none; stroke: #FBF8F0; stroke-linecap: round; }
svg[data-flow] .pl { fill: none; stroke: #16243D; stroke-linecap: round; stroke-dasharray: 70 260; animation: ds-pulse 1.5s linear infinite paused; }
svg[data-flow="b"] .pl { stroke-dasharray: 46 300; animation-duration: 2.2s; }
svg[data-flow] .edw { fill: none; stroke: #FBF8F0; stroke-linecap: round; }
svg[data-flow] .ed, svg[data-flow] .eda { fill: none; stroke: #16243D; stroke-linecap: round; stroke-linejoin: round; }
svg[data-flow] .ed { stroke-dasharray: 9 7; animation: ds-flow 2.8s linear infinite paused; }
[data-flows].run svg[data-flow] .pl, [data-flows].run svg[data-flow] .ed { animation-play-state: running; }
@keyframes ds-pulse { from { stroke-dashoffset: 330; } to { stroke-dashoffset: 0; } }
@keyframes ds-flow { to { stroke-dashoffset: -50; } }

@media (max-width: 760px) {
  .ds-step h2 { font-size: 25px; }
  .ds-step h3 { font-size: 21px; margin-bottom: 6px; }
  .ds-step p { font-size: 15px; line-height: 1.45; }
  .ds-ill { bottom: 6px; }
  .ds-pair { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto; row-gap: 8px; bottom: 26px; }
  .ds-ph .rd { padding-top: 6px; gap: 2px 8px; }
  .ds-ph .was { font-size: 14px; }
  .ds-pair > figcaption { font-size: 14px; }
  .ds-ph .hm { width: 24px; height: 24px; font-size: 12px; }
  .ds-ph .mph { font-size: 24px; }
}

/* reduced motion (or no canvas): the steps in sequence, each with its stills */
.descent.static .ds-track { height: auto !important; }
.descent.static .ds-stage { position: static; height: auto; overflow: visible; display: block; }
.descent.static .ds-text { height: auto; }
.descent.static .ds-step { position: static; opacity: 1; visibility: visible; max-width: none; padding: 0 0 48px; }
.descent.static .ds-step .still { display: block; margin-top: 16px; }
.descent.static .ds-step .still img { width: 100%; height: auto; display: block; }
.descent.static .ds-view { display: none; }
.descent.static .ds-pair { position: static; grid-template-rows: auto; opacity: 1; visibility: visible; pointer-events: auto; margin-top: 16px; padding: 0; }
.descent.static .ds-ph .ph { aspect-ratio: 1200 / 1250; flex: none; }
@media (prefers-reduced-motion: reduce) { svg[data-flow] .pl, svg[data-flow] .ed { animation: none; } svg[data-flow] .pl { stroke-dasharray: none; stroke-opacity: .35; } }

/* ---------- what we do: risk in the brand's diverging pair (tokens.css) ---------- */
:root { --risk-hi: var(--div-pos); --risk-lo: var(--div-neg); }
.eq .hi { color: var(--risk-hi); font-weight: 400; }
.eq .lo { color: var(--risk-lo); font-weight: 400; }
.risk-key { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-family: var(--label); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--b-slate); margin-top: 12px; }
.risk-key .ramp { display: flex; }
.risk-key .ramp i { width: 26px; height: 9px; display: block; }

/* ---------- round 7 (Ted's batch 1) ---------- */
/* hero: the leader under Get in touch */
.scroll-cue { margin: clamp(18px, 2.4vw, 30px) 0 0; text-align: center; font-family: var(--brand-serif); font-size: clamp(19px, 1.6vw, 23px); color: var(--b-ink); }
.scroll-cue::after { content: "\2193"; display: block; margin: 6px auto 0; width: max-content; font-size: 1.1em; line-height: 1; animation: ds-nudge 2.4s ease-in-out infinite; }
@keyframes ds-nudge { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue::after { animation: none; } }
/* the header over the figure: current cat model resolution → Downstream resolution */
.ds-view { --fh: 40px; }
.ds-canvas { top: var(--fh); height: calc(100% - var(--fh)); }
.ds-pair { top: var(--fh); }
.ds-fighead { position: absolute; left: 0; right: 0; top: 0; height: var(--fh); margin: 0; display: grid; place-items: center; pointer-events: none; font-family: var(--label); font-weight: 600; font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--b-ink); }
.ds-fighead span { grid-area: 1 / 1; opacity: 0; transition: opacity .45s ease; padding: 6px 2px; border-top: 1px solid rgba(22, 36, 61, .35); border-bottom: 1px solid rgba(22, 36, 61, .35); }
.ds-fighead.cur .cur, .ds-fighead.ds .ds { opacity: 1; }
.ds-fighead .ds { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; letter-spacing: .28em; padding: 6px 10px; }   /* the release: a step up from the current-model label */
.ds-fighead.glow .ds { animation: ds-release 1.8s ease-out both; }
@keyframes ds-release {
  0% { transform: scale(1); text-shadow: none; border-color: rgba(22, 36, 61, .35); background: transparent; }
  14% { transform: scale(1.08); text-shadow: 0 0 2px rgba(86, 184, 166, .9), 0 0 20px rgba(86, 184, 166, 1); border-color: #56B8A6; background: rgba(86, 184, 166, .16); }
  100% { transform: scale(1); text-shadow: 0 0 8px rgba(86, 184, 166, .45); border-color: rgba(44, 139, 123, .8); background: rgba(86, 184, 166, .06); }
}
@media (prefers-reduced-motion: reduce) { .ds-fighead.glow .ds { animation: none; text-shadow: 0 0 8px rgba(86, 184, 166, .45); border-color: rgba(44, 139, 123, .8); background: rgba(86, 184, 166, .06); } }
.ds-fighead .fh-mark { height: .74em; width: auto; display: block; }   /* the brand mark at the header's cap height */
@media (max-width: 760px) { .ds-view { --fh: 34px; } .ds-fighead { font-size: 10px; letter-spacing: .22em; } .ds-fighead .ds { font-size: 12.5px; letter-spacing: .2em; } }
/* keep the Get in touch button and the leader above the fold on a laptop screen */
@media (min-width: 901px) { .hero-print .impression { max-height: calc(100vh - 560px); min-height: 280px; } .hero-foot { padding-top: 18px; } .scroll-cue { margin-top: 8px; } }
/* batch 8: the house step's headline shares the release glow with the Downstream resolution label */
.ds-step h3.ds-glow { transform-origin: left center; }
.released .ds-step.on h3.ds-glow { animation: ds-h-release 1.8s ease-out both; }
@keyframes ds-h-release {
  0% { transform: scale(1); text-shadow: none; }
  14% { transform: scale(1.04); text-shadow: 0 0 2px rgba(86, 184, 166, .9), 0 0 22px rgba(86, 184, 166, 1); }
  100% { transform: scale(1); text-shadow: 0 0 10px rgba(86, 184, 166, .45); }
}
@media (prefers-reduced-motion: reduce) { .released .ds-step.on h3.ds-glow { animation: none; text-shadow: 0 0 10px rgba(86, 184, 166, .45); } }