@font-face { font-family: "Fraunces"; src: url("assets/fonts/fraunces-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }

/* A change of scene, not a change of identity. */
.hero { overflow: clip; }
.conversation-word { position: relative; width: fit-content; }
.conversation-word svg { position: absolute; inset: auto 0 -.08em; width: 100%; height: .2em; overflow: visible; color: var(--orange-light); }
.conversation-word path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.creative-collage { display: flex; align-items: center; width: min(100%, 440px); height: 190px; margin: 2.75rem 0 .5rem; padding: 10px 12px; }
.creative-collage > div { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: space-between; height: 150px; min-width: 0; padding: 14px; border-radius: 12px; color: var(--ink); transform-origin: 50% 90%; }
.creative-collage small { font: 600 .8125rem/1.5 var(--body); }
.collage-type { z-index: 3; background: var(--paper); transform: rotate(-9deg) translateY(7px); }
.collage-type > span { font: 600 4.3rem/1.1 "Fraunces", Georgia, serif; letter-spacing: -.035em; }
.collage-design { z-index: 2; margin-left: -12px; background: var(--orange-light); transform: rotate(5deg) translateY(-9px); }
.collage-design > i { position: absolute; top: 22px; left: 25px; width: 58px; height: 58px; border: 2px solid var(--ink); border-radius: 50%; }
.collage-design > i:nth-child(2) { left: 52px; background: var(--ink); }
.collage-design small { margin-top: auto; }
.collage-build { z-index: 1; margin-left: -12px; background: var(--acid); transform: rotate(12deg) translateY(8px); }
.collage-browser { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; height: 82px; margin-top: 5px; border: 2px solid var(--ink); border-radius: 4px; padding: 9px; }
.collage-browser i { grid-column: 1 / -1; height: 3px; background: var(--ink); }
.collage-browser span { align-self: center; height: 22px; border-block: 5px solid var(--ink); }
.collage-browser b { background: var(--cobalt); border-radius: 50% 50% 2px 2px; }
.scene-trail { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; padding-top: 1.5rem; border-top: 1px solid #53564a; }
.scene-trail > a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .8rem; min-height: 44px; font-size: .875rem; }
.scene-trail > a > .arrow-icon { width: 20px; height: 20px; transform: rotate(135deg); }
.scene-colors { display: flex; gap: 4px; }
.scene-colors i { display: block; width: 12px; height: 22px; border-radius: 2px; background: var(--cobalt); }
.scene-colors i:nth-child(2) { background: var(--acid); }
.scene-colors i:nth-child(3) { background: var(--lilac); }
.scene-colors i:nth-child(4) { background: var(--paper); }
.scene-colors i:nth-child(5) { background: var(--orange-light); }
.motion-toggle { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; padding: .4rem .75rem; border: 1px solid #73776a; border-radius: 999px; background: transparent; color: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.5; }
.motion-toggle::before { content: ""; width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; }
.motion-toggle[aria-pressed="true"]::before { border-color: var(--acid); background: var(--acid); }
.motion-toggle:hover { border-color: var(--acid); }

/* A typographic poster is the first shift in pace. */
.offer { position: relative; overflow: clip; }
.offer-intro h2 { max-width: 15ch; font-size: clamp(2.6rem, 5vw, 4.5rem); font-weight: 850; line-height: 1.08; }
.offer-intro h2 em { margin-top: .22em; font-weight: 600; }
.offer-item { position: relative; }
.offer-item::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--acid); transform: scaleX(0); transform-origin: left; }
.offer-item:hover::after { transform: scaleX(1); }

/* Three art directions share the same message and real responsive preview. */
.style-picker { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid #788e38; }
.style-picker-intro { flex: 1 1 320px; }
.style-picker h3 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.style-picker p { max-width: 57ch; margin: .5rem 0 0; font-size: .875rem; line-height: 1.6; }
.style-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.style-options button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .65rem .9rem; border: 1px solid #788e38; border-radius: 12px; background: transparent; font-size: .875rem; font-weight: 600; line-height: 1.5; }
.style-options button:hover { background: #cce967; }
.style-options button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper-bright); text-decoration: underline; text-underline-offset: 4px; }
.style-swatch { width: 16px; height: 20px; border: 1px solid currentColor; border-radius: 2px; }
.swatch-warm { background: var(--paper); }
.swatch-editorial { background: var(--ink); box-shadow: inset 5px 0 var(--paper); }
.swatch-bold { background: var(--cobalt); box-shadow: inset 5px 0 var(--acid); }
.browser-shell { transform-origin: center 65%; }
.showcase-journey { position: relative; margin-top: 2.5rem; }
.showcase-journey .demo-workbench { margin-top: 0; }
.journey-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; padding-top: .75rem; font-size: .8125rem; }
.journey-controls p { margin: 0; }
.journey-controls a, .journey-controls button { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 4px; }
.journey-controls .arrow-icon { width: 17px; height: 17px; transform: rotate(135deg); }
#after-showcase { scroll-margin-top: 120px; }
.style-options button { position: relative; overflow: clip; }
.style-options button::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--acid); transform: scaleX(var(--style-progress, 0)); transform-origin: left; }
/* Sticky only when the complete canvas fits. Short, narrow and zoomed views keep normal flow. */
@media (min-width: 1024px) and (min-height: 850px) {
  .showcase-journey.is-compact .style-picker { margin-bottom: .75rem; padding-bottom: .75rem; gap: .5rem 1.5rem; }
  .showcase-journey.is-compact .style-picker h3 { font-size: 1.5rem; }
  .showcase-journey.is-compact .style-picker p { margin-top: .25rem; }
  .showcase-journey.is-compact #annotation-note { min-height: 1.65em; margin: .5rem 0 .75rem; font-size: .875rem; }
  .showcase-journey.is-compact .concept-nav { min-height: 56px; padding-block: .75rem; }
  .showcase-journey.is-compact .concept-copy { padding: 1.75rem 2rem; }
  .showcase-journey.is-compact .concept-copy h3 { font-size: 2.75rem !important; }
  .showcase-journey.is-compact .concept-photo { min-height: 400px; }
  .showcase-journey.is-compact #concept-frame[data-style="bold"] .concept-photo { min-height: 352px; }
  .showcase-journey.is-compact .concept-bottom { padding-block: .8rem; }
  .showcase-journey.is-scroll-story { height: var(--journey-height); }
  .showcase-journey.is-scroll-story .demo-workbench { position: sticky; top: 108px; }
  html[data-motion="on"] .is-scroll-story .browser-shell { animation: none; }
}
.concept-screen { --concept-accent: var(--cobalt); }
.concept-copy, .concept-photo { grid-row: 1; }
.concept-copy { grid-column: 1; }
.concept-photo { grid-column: 2; overflow: clip; }
#concept-frame[data-style="editorial"] .concept-screen { background: var(--ink); color: var(--paper); --concept-accent: var(--acid); }
#concept-frame[data-style="editorial"] .concept-nav, #concept-frame[data-style="editorial"] .concept-bottom { border-color: #606454; }
#concept-frame[data-style="editorial"] .concept-nav > span, #concept-frame[data-style="editorial"] .concept-copy p { color: #d1cfc6; }
#concept-frame[data-style="editorial"] .concept-nav b i { background: var(--paper); color: var(--ink); }
#concept-frame[data-style="editorial"] .concept-copy { grid-column: 2; }
#concept-frame[data-style="editorial"] .concept-photo { grid-column: 1; }
#concept-frame[data-style="editorial"] .concept-copy h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(2.2rem, 3.8vw, 3.5rem); line-height: 1.2; letter-spacing: -.025em; }
#concept-frame[data-style="editorial"] .concept-action { color: var(--paper); }
#concept-frame[data-style="bold"] .concept-screen { background: var(--cobalt); color: var(--paper-bright); --concept-accent: var(--acid); }
#concept-frame[data-style="bold"] .concept-nav, #concept-frame[data-style="bold"] .concept-bottom { border-color: #8a9eeb; }
#concept-frame[data-style="bold"] .concept-nav > span, #concept-frame[data-style="bold"] .concept-copy p { color: #e0e6ff; }
#concept-frame[data-style="bold"] .concept-copy h3 { font-family: var(--body); font-size: clamp(2.2rem, 3.7vw, 3.4rem); font-weight: 900; line-height: 1.15; letter-spacing: -.035em; text-transform: uppercase; color: var(--acid); }
#concept-frame[data-style="bold"] .concept-photo { margin: 1.5rem 1.5rem 1.5rem 0; min-height: 392px; border-radius: 50% 50% 12px 12px; }
#concept-frame[data-style="bold"] .concept-nav b i { background: var(--acid); color: var(--ink); }
#concept-frame[data-style="bold"] .concept-action { padding: .65rem 1rem; border: 0; border-radius: 12px; background: var(--acid); color: var(--ink); }
.has-annotation .is-highlighted, .has-annotation .concept-photo.is-highlighted { outline-color: var(--concept-accent); }
.has-annotation .is-highlighted { animation: none; }

/* The route draws across three actual stages; the words never wait for it. */
.process-track li { position: relative; }
.process-track li::before { content: ""; position: absolute; inset: -2px 0 auto; height: 3px; background: var(--cobalt); transform-origin: left; }
.step-index { display: block; margin-bottom: 1.25rem; color: var(--cobalt); font: 750 2.5rem/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.build-scene { position: relative; display: grid; place-items: center; height: 210px; margin: 0 0 1.75rem; overflow: clip; }
.build-window { width: 76%; max-width: 280px; padding: 12px; border: 2px solid var(--cobalt); border-radius: 12px; background: var(--paper-bright); }
.build-top { height: 13px; margin-bottom: 12px; border-bottom: 1px solid var(--cobalt); }
.build-layout { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 55px 22px; gap: 10px; }
.build-lines { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.build-lines i { width: 100%; height: 4px; background: var(--cobalt); }
.build-lines i:nth-child(2) { width: 80%; }
.build-lines i:nth-child(3) { width: 60%; }
.build-image { grid-column: 2; grid-row: 1 / 3; border: 1px dashed var(--cobalt); border-radius: 3px; }
.build-action { width: 75%; border: 1px solid var(--cobalt); border-radius: 999px; }
.build-pencil { position: absolute; width: 8px; height: 84px; right: 14%; top: 33%; border: 2px solid var(--cobalt); border-radius: 3px; background: var(--acid); transform: rotate(30deg); }
.build-pencil::after { content: ""; position: absolute; bottom: -9px; left: -2px; border: 4px solid transparent; border-top-color: var(--cobalt); }
.scene-design .build-window { transform: rotate(-5deg); }
.scene-design .build-image, .scene-launch .build-image { border: 0; background: var(--cobalt); border-radius: 40% 40% 3px 3px; }
.scene-design .build-action, .scene-launch .build-action { background: var(--orange-light); border-color: var(--ink); }
.build-palette { position: absolute; display: flex; right: 3%; bottom: 16%; gap: 5px; padding: 8px; border-radius: 12px; background: var(--ink); transform: rotate(8deg); }
.build-palette i { width: 26px; height: 32px; border-radius: 3px; background: var(--orange-light); }
.build-palette i:nth-child(2) { background: var(--acid); }
.build-palette i:nth-child(3) { background: var(--cobalt); }
.scene-launch .build-window { background: var(--ink); border-color: var(--ink); }
.scene-launch .build-top { border-color: var(--paper); }
.scene-launch .build-lines i { background: var(--paper); }
.scene-launch .build-image { background: var(--acid); }
.build-pointer { position: absolute; left: 40%; top: 63%; width: 28px; height: 35px; background: var(--orange-light); clip-path: polygon(0 0, 100% 56%, 62% 64%, 46% 100%); transform: rotate(-12deg); }
.build-check { position: absolute; top: 20px; right: 9%; width: 38px; height: 38px; border-radius: 50%; background: var(--acid); }
.build-check::after { content: ""; position: absolute; left: 14px; top: 9px; width: 9px; height: 16px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.answers-heading h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; line-height: 1.18; }
.answer-list details[open] { padding-inline: 1rem; background: var(--paper-bright); }
.answer-list details[open] > p { margin-bottom: 1.5rem; }
.contact-copy h2 em { width: fit-content; padding-bottom: .08em; border-bottom: 3px solid currentColor; }

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] .button i, html[data-motion="on"] .nav-cta i { transition: transform 220ms var(--ease), background-color 160ms; }
  html[data-motion="on"] .button:hover i, html[data-motion="on"] .nav-cta:hover i { transform: rotate(45deg); }
  html[data-motion="on"] .offer-item::after { transition: transform 300ms var(--ease); }
  html[data-motion="on"] .answer-list summary > i::after { transition: transform 180ms var(--ease); }
  @supports (animation-timeline: view()) {
    html[data-motion="on"] .hero { view-timeline-name: --hero-scene; }
    html[data-motion="on"] .conversation-word path { animation: underline-draw linear both; animation-timeline: --hero-scene; animation-range: exit 0% exit 65%; }
    html[data-motion="on"] .creative-collage > div { animation: collage-spread linear both; animation-timeline: --hero-scene; animation-range: exit 0% exit 65%; }
    html[data-motion="on"] .collage-type { --fan-start: rotate(-9deg) translateY(7px); --fan-end: rotate(-18deg) translate(-14px, 12px); }
    html[data-motion="on"] .collage-design { --fan-start: rotate(5deg) translateY(-9px); --fan-end: rotate(0deg) translateY(-25px); }
    html[data-motion="on"] .collage-build { --fan-start: rotate(12deg) translateY(8px); --fan-end: rotate(20deg) translate(14px, 12px); }
    html[data-motion="on"] .demo-workbench { view-timeline-name: --showcase; }
    html[data-motion="on"] .browser-shell { animation: canvas-arrival linear both; animation-timeline: --showcase; animation-range: entry 5% entry 70%; }
    html[data-motion="on"] .process-track li { view-timeline-name: --step-scene; }
    html[data-motion="on"] .process-track li::before { animation: route-draw linear both; animation-timeline: --step-scene; animation-range: entry 5% entry 85%; }
    html[data-motion="on"] .process-track li:nth-child(2)::before { animation-range: entry 15% entry 95%; }
    html[data-motion="on"] .process-track li:nth-child(3)::before { animation-range: entry 25% entry 100%; }
    html[data-motion="on"] .build-scene { view-timeline-name: --build-scene; }
    html[data-motion="on"] .scene-plan .build-lines { animation: sketch-lines linear both; animation-timeline: --build-scene; animation-range: entry 10% entry 90%; }
    html[data-motion="on"] .build-pencil { animation: pencil-mark linear both; animation-timeline: --build-scene; animation-range: entry 10% entry 90%; }
    html[data-motion="on"] .build-palette { animation: palette-place linear both; animation-timeline: --build-scene; animation-range: entry 10% entry 90%; }
    html[data-motion="on"] .scene-design .build-window { animation: window-settle linear both; animation-timeline: --build-scene; animation-range: entry 10% entry 90%; }
    html[data-motion="on"] .build-pointer { animation: pointer-place linear both; animation-timeline: --build-scene; animation-range: entry 10% entry 90%; }
    html[data-motion="on"] .build-check { animation: launch-check linear both; animation-timeline: --build-scene; animation-range: entry 65% entry 100%; }
  }
}
@keyframes underline-draw { from { stroke-dasharray: 1; stroke-dashoffset: .8; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes canvas-arrival { from { transform: translateY(24px) rotate(-1deg) scale(.975); } to { transform: none; } }
@keyframes route-draw { from { transform: scaleX(.08); } to { transform: scaleX(1); } }
@keyframes collage-spread { from { transform: var(--fan-start); } to { transform: var(--fan-end); } }
@keyframes sketch-lines { from { clip-path: inset(0 72% 0 0); } to { clip-path: inset(0); } }
@keyframes pencil-mark { from { transform: translate(-35px, -12px) rotate(30deg); } to { transform: rotate(30deg); } }
@keyframes palette-place { from { transform: translate(26px, 18px) rotate(16deg); } to { transform: rotate(8deg); } }
@keyframes window-settle { from { transform: rotate(-10deg) translateY(12px); } to { transform: rotate(-5deg); } }
@keyframes pointer-place { from { transform: translate(40px, 20px) rotate(-12deg); } to { transform: rotate(-12deg); } }
@keyframes launch-check { from { transform: scale(.65); opacity: .3; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 820px) {
  .creative-collage { height: 180px; margin-top: 2.5rem; }
  .build-scene { height: 165px; }
  .build-window { width: 84%; padding: 10px; }
  .build-palette { right: 0; }
  .build-palette i { width: 18px; height: 25px; }
  .style-picker-intro { flex-basis: 100%; }
  .concept-copy, .concept-photo, #concept-frame[data-style="editorial"] .concept-copy, #concept-frame[data-style="editorial"] .concept-photo { grid-column: 1; grid-row: auto; }
  #concept-frame[data-style="bold"] .concept-photo { margin: 0 1.25rem 1.25rem; min-height: 300px; border-radius: 12px; }
  #concept-frame[data-style="editorial"] .concept-copy h3, #concept-frame[data-style="bold"] .concept-copy h3 { font-size: clamp(2.1rem, 6vw, 3.5rem); }
  @keyframes canvas-arrival { from { transform: translateY(12px); } to { transform: none; } }
}
#concept-frame[data-preview="phone"] .concept-copy, #concept-frame[data-preview="phone"] .concept-photo { grid-column: 1; grid-row: auto; }
#concept-frame[data-preview="phone"][data-style="editorial"] .concept-copy h3, #concept-frame[data-preview="phone"][data-style="bold"] .concept-copy h3 { font-size: 2.25rem; }
#concept-frame[data-preview="phone"][data-style="bold"] .concept-photo { margin: 0 1.25rem 1.25rem; min-height: 260px; border-radius: 12px; }
@media (max-width: 540px) {
  .creative-collage { width: min(100%, 350px); height: 155px; padding: 8px; }
  .creative-collage > div { height: 125px; padding: 10px; }
  .collage-type > span { font-size: 3.5rem; }
  .collage-design > i { top: 20px; left: 15px; width: 44px; height: 44px; }
  .collage-design > i:nth-child(2) { left: 36px; }
  .collage-browser { height: 68px; padding: 7px; }
  .process-track li { display: grid; grid-template-columns: minmax(0, 1fr) 130px; align-items: start; gap: 0 1rem; }
  .process-track .step-index { grid-column: 1; margin: .5rem 0 1rem; }
  .process-track h3, .process-track p { grid-column: 1 / -1; }
  .build-scene { grid-column: 2; grid-row: 1; height: 85px; margin: 0 0 1rem; overflow: clip; }
  .build-window { width: 100%; max-width: 118px; padding: 7px; border-radius: 8px; }
  .build-top { height: 6px; margin-bottom: 6px; }
  .build-layout { grid-template-rows: 25px 10px; gap: 5px; }
  .build-lines { gap: 4px; }
  .build-lines i { height: 2px; }
  .build-pencil { height: 40px; right: 10%; top: 35%; }
  .build-palette { right: 10px; bottom: 6px; padding: 5px; gap: 3px; border-radius: 6px; }
  .build-palette i { width: 13px; height: 17px; }
  .build-pointer { width: 15px; height: 19px; }
  .build-check { top: 0; right: 0; width: 26px; height: 26px; }
  .build-check::after { left: 9px; top: 5px; width: 7px; height: 12px; }
  .scene-trail { gap: 1rem; padding-top: 1rem; }
  .scene-trail > a { font-size: .8125rem; }
  .style-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: .35rem; }
  .style-options button { flex-direction: column; gap: .4rem; padding-inline: .35rem; font-size: .8125rem; }
  .style-swatch { width: 20px; height: 15px; }
  .step-index { margin-bottom: 1rem; font-size: 2rem; }
  #concept-frame[data-style="editorial"] .concept-copy h3, #concept-frame[data-style="bold"] .concept-copy h3, #concept-frame[data-preview="phone"][data-style="editorial"] .concept-copy h3, #concept-frame[data-preview="phone"][data-style="bold"] .concept-copy h3 { font-size: clamp(1.9rem, 8.8vw, 2.5rem); }
  #concept-frame[data-style="bold"] .concept-photo { min-height: 260px; }
}
html[data-motion="off"] { scroll-behavior: auto; }

/* Words, design and action become one website. Only the artwork is scrubbed. */
.assembly-scene { position: relative; width: min(100%, 420px); height: 226px; margin-top: 1rem; overflow: clip; isolation: isolate; }
.assembly-window { position: absolute; left: calc(50% - 130px); top: 36px; width: 260px; height: 166px; border: 2px solid var(--paper); border-radius: 12px; }
.assembly-top { display: flex; gap: 5px; height: 22px; padding: 8px 10px; border-bottom: 1px solid var(--paper); }
.assembly-top i { width: 4px; height: 4px; border-radius: 50%; background: var(--paper); }
.assembly-copy { position: absolute; left: calc(50% - 113px); top: 72px; width: 118px; height: 77px; padding: 8px 12px; border-radius: 4px; background: var(--paper); color: var(--ink); }
.assembly-copy > span { display: block; font: 700 2.55rem/1 var(--display); letter-spacing: -.025em; }
.assembly-copy > i { display: block; width: 65%; height: 3px; margin-top: 5px; background: var(--ink); }
.assembly-copy > i:last-child { width: 45%; }
.assembly-art { position: absolute; left: calc(50% + 17px); top: 72px; width: 96px; height: 77px; border-radius: 4px; background: var(--orange-light); }
.assembly-art svg { width: 100%; height: 100%; }
.assembly-art circle { fill: var(--acid); }
.assembly-art path { stroke: var(--ink); stroke-width: 6; }
.assembly-action { position: absolute; left: calc(50% - 113px); top: 162px; display: flex; align-items: center; justify-content: space-between; width: 226px; height: 25px; padding-inline: 12px 5px; border-radius: 3px; background: var(--ink); color: var(--acid); }
.assembly-action > span { width: 60px; height: 3px; background: var(--paper); }
.assembly-action .arrow-icon { width: 22px; height: 22px; transform: scale(.65); }
.conversation-route { display: block; width: min(100%, 320px); height: 112px; margin-top: 1.5rem; color: var(--ink); }
.conversation-route path { stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.conversation-route circle { fill: currentColor; }
.route-down { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] .assembly-scene { --piece-copy: clamp(0, calc(var(--scroll-progress, 1) * 2), 1); --piece-art: clamp(0, calc((var(--scroll-progress, 1) - .15) * 1.8), 1); --piece-action: clamp(0, calc((var(--scroll-progress, 1) - .4) * 1.667), 1); }
  html[data-motion="on"] .assembly-window { opacity: calc(.35 + var(--scroll-progress, 1) * .65); transform: scale(calc(.94 + var(--scroll-progress, 1) * .06)); }
  html[data-motion="on"] .assembly-copy { transform: translate(calc((1 - var(--piece-copy)) * -34px * var(--scatter, 1)), calc((1 - var(--piece-copy)) * -32px)) rotate(calc((1 - var(--piece-copy)) * -14deg * var(--scatter, 1))); }
  html[data-motion="on"] .assembly-art { transform: translate(calc((1 - var(--piece-art)) * 32px * var(--scatter, 1)), calc((1 - var(--piece-art)) * -38px)) rotate(calc((1 - var(--piece-art)) * 18deg * var(--scatter, 1))); }
  html[data-motion="on"] .assembly-action { transform: translate(calc((1 - var(--piece-action)) * 26px * var(--scatter, 1)), calc((1 - var(--piece-action)) * 26px)) rotate(calc((1 - var(--piece-action)) * -7deg * var(--scatter, 1))); }
  html[data-motion="on"] .scene-design { --layer-travel: 28px; --layer-away: calc(1 - var(--scroll-progress, 1)); }
  html[data-motion="on"] .scene-design .build-lines { transform: translate(calc(var(--layer-away) * var(--layer-travel) * -1), calc(var(--layer-away) * -12px)); }
  html[data-motion="on"] .scene-design .build-image { transform: translate(calc(var(--layer-away) * var(--layer-travel)), calc(var(--layer-away) * -18px)) rotate(calc(var(--layer-away) * 12deg)); }
  html[data-motion="on"] .scene-design .build-action { transform: translateY(calc(var(--layer-away) * 16px)); }
  html[data-motion="on"] .conversation-route .route-line { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--scroll-progress, 1)); }
  html[data-motion="on"] .conversation-route .route-head { opacity: clamp(0, calc((var(--scroll-progress, 1) - .8) * 5), 1); }
}
@media (max-width: 820px) {
  .conversation-route { margin-top: 1rem; height: 84px; }
  .route-wide { display: none; }
  .route-down { display: block; }
}
@media (max-width: 540px) {
  .assembly-scene { --scatter: .45; margin-top: .5rem; }
  html[data-motion="on"] .scene-design { --layer-travel: 12px; }
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
@media (forced-colors: active) {
  .style-options button, .motion-toggle { border-color: ButtonText; }
  .style-options button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -4px; }
  .style-swatch { forced-color-adjust: none; }
}