.hero {
  --hero-top-gap: clamp(2.5rem, 5.5vw, 5rem);
  --process-top: calc(var(--app-bar-offset) + var(--hero-top-gap));
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 4.25rem);
  padding-block: var(--hero-top-gap) 1.25rem;
}
.hero[data-scroll-process] { min-height: calc(100svh + clamp(13rem, 34svh, 20rem) - var(--app-bar-offset)); }
.hero-copy { padding-top: clamp(1rem, 6svh, 3.5rem); }
.hero[data-scroll-process] .hero-copy { position: sticky; top: var(--process-top); }
.process-track { min-width: 0; align-self: stretch; }
.hero-process {
  width: min(100%, 33rem, max(16rem, calc((100svh - var(--process-top) - 82px) * 1.2)));
  margin-inline-start: auto;
}
.hero[data-scroll-process] .hero-process { position: sticky; top: var(--process-top); }
.hero-copy h1 {
  max-width: 12ch;
  margin-left: -.06em;
  font-size: clamp(3.5rem, 6vw, 6.65rem);
  font-weight: 570;
  letter-spacing: -.055em;
  line-height: 1.025;
}
.hero-copy h1 span { color: var(--accent-text); }
.hero-copy > p {
  max-width: 35ch;
  margin-block: 1.9rem 2rem;
  color: var(--secondary);
  font-size: clamp(1.1rem, 1.6vw, 1.38rem);
  line-height: 1.5;
}
[data-theme="light"] .hero-copy > p { color: var(--text); }
.process-visual {
  --paper-highlight: color-mix(in srgb, var(--logo), white 42%);
  --paper-base: var(--logo);
  --paper-shade: color-mix(in srgb, var(--logo), var(--base) 15%);
  --paper-edge: color-mix(in srgb, var(--logo), var(--base) 42%);
  --paper-print: #50625a;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
[data-theme="light"] .process-visual {
  --paper-highlight: color-mix(in srgb, var(--logo), white 17%);
  --paper-shade: color-mix(in srgb, var(--logo), black 12%);
  --paper-edge: color-mix(in srgb, var(--logo), black 36%);
  --paper-print: #d9dfd8;
}
.hero-process figcaption {
  padding: 0 .25rem .45rem;
  color: var(--secondary); font-size: .94rem; font-weight: 670;
  transform: translateY(var(--stack-caption-offset, 0px));
}
.paper-highlight { stop-color: var(--paper-highlight); }
.paper-base { stop-color: var(--paper-base); }
.paper-shade { stop-color: var(--paper-shade); }
.copper-highlight { stop-color: color-mix(in srgb, var(--copper), #f5c4ad 43%); }
.copper-base { stop-color: var(--copper); }
.copper-shade { stop-color: color-mix(in srgb, var(--copper), #60382e 26%); }
.process-shadow { fill: #101a15; opacity: .45; filter: blur(11px); }
[data-theme="light"] .process-shadow { opacity: .26; }
.process-paper { filter: drop-shadow(0 3px 2px rgb(9 17 13 / .23)); }
.process-paper-face { fill: url(#process-neutral-face); stroke: var(--paper-highlight); stroke-width: .35; }
.process-paper-edge { fill: var(--paper-edge); }
.process-paper-print {
  fill: none; stroke: var(--paper-print); stroke-width: .7;
  stroke-linecap: round; opacity: .28;
}
.process-work .process-paper-face { fill: url(#process-copper-face); stroke: #e6a48e; }
.process-work .process-paper-edge { fill: #8e4937; }
.process-work .process-paper-print { stroke: #592c21; }
.process-label use { fill: none; stroke: var(--edge); stroke-width: .85; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.process-label text { fill: var(--secondary); font-size: 16px; font-weight: 620; }
.process-work .process-label use { stroke: var(--copper); }
.process-work .process-label text { fill: var(--accent-text); }
.process-captions {
  display: grid; padding: .65rem .25rem .25rem;
  color: var(--muted); font-size: .875rem;
  transform: translateY(calc(-1 * var(--stack-caption-offset, 0px)));
}
.process-captions p { grid-area: 1 / 1; visibility: hidden; }
.hero-process:not([data-stage]) [data-step="4"],
.hero-process[data-stage="0"] [data-step="0"],
.hero-process[data-stage="1"] [data-step="1"],
.hero-process[data-stage="2"] [data-step="2"],
.hero-process[data-stage="3"] [data-step="3"],
.hero-process[data-stage="4"] [data-step="4"] { visibility: visible; }

@media (max-width: 870px) {
  .hero-copy h1 { font-size: clamp(3rem, 7.1vw, 4.8rem); }
}

@media (max-width: 690px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    --process-top: calc(var(--app-bar-offset) + 12px);
    gap: 1.5rem;
    padding-block: clamp(2.6rem, 9.5vw, 4.25rem) 1.6rem;
  }
  .hero[data-scroll-process] { grid-template-rows: auto 1fr; min-height: calc(100svh + clamp(17rem, 40svh, 23rem)); }
  .hero[data-scroll-process] .hero-copy { position: static; }
  .hero-copy { padding-top: 0; }
  .process-track { width: 100%; }
  .hero-process { margin-inline: auto; max-width: 28rem; }
  .hero-copy h1 {
    max-width: none;
    font-size: clamp(2.1rem, 10vw, 4.75rem);
  }
  .hero-copy > p { margin-block: 1.2rem 1.45rem; }
}