/* Ctrlflow AI Inc. — ctrlflow.ai
   One stylesheet for every page. Paper + ink, one signal red; the two app plates carry their own brand colours. */

/* ---- fonts (self-hosted latin subsets; see tools/fetch-fonts.mjs) ---- */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url('/assets/fonts/newsreader-normal-300-500.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 500; font-display: swap;
  src: url('/assets/fonts/newsreader-italic-300-500.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-normal-400-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-normal-500.woff2') format('woff2'); }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/bodoni-moda-italic-500.woff2') format('woff2'); }

/* ---- tokens ---- */
:root {
  color-scheme: light;
  --paper: #f2ede3;
  --ink: #15130e;
  --ink2: #3a362d;
  --muted: #6a6357;
  --signal: #c23b1e;
  --rule: rgba(21, 19, 14, 0.9);
  --hair: rgba(21, 19, 14, 0.18);
  --coral: #cb7b70;
  --amber: #e9a95b;
  --plum: #140d16;
  --bone: #f1e7dc;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --gutter: 56px;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--paper); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* Paper grain: one tiled SVG noise, fixed so it never re-renders on scroll. */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 1280px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.mono { font: 500 11px/1.6 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }

.btn { display: inline-block; border: 1px solid var(--ink); border-radius: 99px; padding: 9px 18px; transition: background-color 0.2s, color 0.2s; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.fill { background: var(--ink); color: var(--paper); }
.btn.fill:hover { background: var(--ink2); }
.line-link { padding: 9px 6px; border-bottom: 1px solid var(--ink); }
.line-link:hover { color: var(--signal); border-color: var(--signal); }

/* ---- utility bar ---- */
.util { border-bottom: 1px solid var(--hair); color: var(--muted); }
.util .wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
.util .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: 8px; vertical-align: 1px; }

/* ---- nav ---- */
.nav .wrap { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; padding-bottom: 24px; }
.mark { display: flex; align-items: center; gap: 12px; font: 400 26px/1 var(--serif); letter-spacing: -0.015em; }
.mark svg { width: 28px; height: 28px; flex: none; }
.mark small { font: 500 10px var(--mono); letter-spacing: 0.16em; color: var(--muted); margin-left: 2px; }
.links { display: flex; align-items: center; gap: 36px; }
.links a:not(.btn):hover { color: var(--signal); }

/* ---- hero ---- */
.hero { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.hero .wrap { display: grid; grid-template-columns: 1.15fr 1fr; }
.hero-l { padding: 72px 56px 64px 0; border-right: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: space-between; }
.eyebrow { color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 22px; }
.eyebrow b { color: var(--ink); font-weight: 500; }
h1 { font: 300 clamp(56px, 9.2vw, 118px)/0.94 var(--serif); letter-spacing: -0.035em; margin: 34px 0; }
h1 em { font-weight: 300; }
.sig { color: var(--signal); }
.lede { font-size: 19px; line-height: 1.6; color: var(--ink2); max-width: 500px; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; align-items: center; }
.hero-foot { display: flex; flex-wrap: wrap; gap: 20px 48px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--hair); color: var(--muted); }
.hero-foot strong { display: block; font: 400 26px/1.1 var(--serif); letter-spacing: -0.01em; color: var(--ink); text-transform: none; margin-top: 6px; }
.hero-r { padding: 48px 0 40px 48px; display: flex; align-items: center; justify-content: center; }

/* The hero picture: one 495 x 700 drawing that scales with its box (1cqw = 4.95px at full size). */
.stage { position: relative; width: 100%; max-width: 495px; aspect-ratio: 495 / 700; container-type: inline-size; }
.stage .flow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow path { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: draw 2.2s 0.3s cubic-bezier(0.6, 0, 0.2, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.node-label { position: absolute; top: 0; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.node-label .n { font: 400 max(17px, 4.44cqw)/1.2 var(--serif); }
.node-label .mono { color: var(--muted); display: block; margin-top: 2px; font-size: max(9px, 2.2cqw); }
.phone { position: absolute; left: 4.04cqw; top: 30.3cqw; width: 48.08cqw; height: 102.6cqw; border-radius: 8.08cqw; background: #0d0b0f;
  padding: 1.82cqw; box-shadow: 0 40px 70px -30px rgba(21, 19, 14, 0.55), 0 0 0 1px rgba(21, 19, 14, 0.4); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; border-radius: 6.4cqw; }
.phone::after { content: ""; position: absolute; top: 3.84cqw; left: 50%; width: 15cqw; height: 4.44cqw; transform: translateX(-50%); background: #0d0b0f; border-radius: 4cqw; }
.night { position: absolute; right: 0; top: 50.5cqw; width: 47.68cqw; height: 66.67cqw; border-radius: 6px; overflow: hidden;
  background: radial-gradient(70% 55% at 70% 18%, rgba(233, 169, 91, 0.22), transparent 70%),
    radial-gradient(90% 70% at 20% 100%, rgba(120, 70, 150, 0.35), transparent 70%), var(--plum);
  box-shadow: 0 40px 70px -30px rgba(21, 19, 14, 0.6); }
.moon { position: absolute; top: 5.25cqw; right: 5.25cqw; width: 6.87cqw; height: 6.87cqw; border-radius: 50%; background: #e8d9c8; box-shadow: 0 0 40px rgba(233, 200, 160, 0.5); }
.moon::after { content: ""; position: absolute; top: -1.2cqw; left: -2cqw; width: 100%; height: 100%; border-radius: 50%; background: var(--plum); }
.night img { position: absolute; bottom: -24.24cqw; left: 50%; transform: translateX(-50%); width: 40.4cqw; max-width: none; }
.bubble { position: absolute; left: 2.83cqw; top: 43.2cqw; width: 33cqw; z-index: 2; background: rgba(20, 13, 22, 0.72); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--bone); font: 400 max(10px, 2.42cqw)/1.4 var(--sans); padding: 1.8cqw 2.2cqw; border-radius: 2cqw; }
.bubble span { display: block; font: 400 max(8px, 1.82cqw) var(--mono); color: rgba(241, 231, 220, 0.55); margin-top: 4px; letter-spacing: 0.06em; }
.cap { position: absolute; color: var(--muted); font-size: max(9px, 2.2cqw); }
.cap b { color: var(--ink); font-weight: 500; }
.cap-1 { left: 4.04cqw; top: 136.6cqw; }
.cap-2 { right: 0; top: 119.6cqw; text-align: right; }

/* ---- marquee ---- */
.band { background: var(--ink); color: var(--paper); overflow: hidden; white-space: nowrap; position: relative; }
.band:hover .track, .band.paused .track { animation-play-state: paused; }
/* Pause/play: two bars while it moves, a triangle once paused. */
.band-toggle { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 1; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: var(--ink); border: 1px solid rgba(242, 237, 227, 0.35); display: grid; place-items: center; box-shadow: -24px 0 24px 6px var(--ink); }
.band-toggle span { width: 10px; height: 11px; border-left: 3px solid var(--paper); border-right: 3px solid var(--paper); }
.band.paused .band-toggle span { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--paper); margin-left: 3px; }
.band-toggle:hover { border-color: var(--paper); }
.band .track { display: inline-flex; padding: 18px 0; animation: slide 40s linear infinite; }
.track span { font: 300 30px/1.2 var(--serif); letter-spacing: -0.01em; padding: 0 28px; }
.track .i { font-style: italic; color: var(--amber); }
.track .d { color: var(--signal); padding: 0; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---- sections ---- */
.sec { border-bottom: 1px solid var(--rule); scroll-margin-top: 12px; }
.sec-h { display: flex; justify-content: space-between; gap: 16px; padding-top: 28px; padding-bottom: 28px; color: var(--muted); position: relative; }
/* The hairline under a section head runs edge to edge, like the section rules. */
.sec-h::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; transform: translateX(-50%); border-bottom: 1px solid var(--hair); }

.statement .wrap { display: grid; grid-template-columns: 220px 1fr; padding-top: 90px; padding-bottom: 100px; }
.statement .label { color: var(--muted); }
.big { font: 300 clamp(32px, 4.7vw, 60px)/1.08 var(--serif); letter-spacing: -0.025em; max-width: 920px; }
.big em { color: var(--ink2); }
.side { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 56px; max-width: 760px; }
.side p { color: var(--ink2); }

/* ---- portfolio plates ---- */
.plates { display: grid; grid-template-columns: 1fr 1fr; }
.plate { padding: 44px 56px 48px; }
.plate:first-child { padding-left: 0; }
.plate:last-child { padding-right: 0; border-left: 1px solid var(--rule); }
.plate-top { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
/* Plate art: a 528 x 430 drawing that scales with its box (1cqw = 5.28px at full size). */
.art { position: relative; overflow: hidden; border-radius: 4px; margin: 26px 0 34px; aspect-ratio: 528 / 430; container-type: inline-size; }
.art-adorii { background: radial-gradient(70% 80% at 75% 20%, rgba(203, 123, 112, 0.55), transparent 65%),
  radial-gradient(60% 60% at 10% 90%, rgba(212, 148, 139, 0.35), transparent 70%), #ecd9cf; }
.art-adorii .p2 { position: absolute; width: 37.9cqw; height: 80.7cqw; bottom: -13.3cqw; left: 66%; transform: translateX(-50%) rotate(-4deg);
  border-radius: 6.4cqw; background: #0d0b0f; padding: 1.5cqw; box-shadow: 0 40px 60px -25px rgba(80, 30, 20, 0.55); }
.art-adorii .p2 img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: 5.1cqw; }
.art-adorii .app-icon { position: absolute; right: 5.3cqw; top: 6.8cqw; width: max(30px, 8.3cqw); height: max(30px, 8.3cqw); border-radius: 22%; box-shadow: 0 8px 20px -8px rgba(80, 30, 20, 0.45); }
.chip { position: absolute; left: 5.3cqw; background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 12px;
  padding: 1.9cqw 2.5cqw; font: 400 max(11px, 2.46cqw)/1.35 var(--sans); color: #2b2320; box-shadow: 0 10px 30px -12px rgba(80, 30, 20, 0.35); }
.chip small { display: block; font: 500 max(8px, 1.7cqw) var(--mono); letter-spacing: 0.1em; color: #8c5a50; margin-bottom: 3px; text-transform: uppercase; }
.chip-1 { top: 7.6cqw; width: 37cqw; }
.chip-2 { top: 37cqw; width: 33cqw; }
.art-night { background: radial-gradient(60% 60% at 75% 15%, rgba(233, 169, 91, 0.25), transparent 65%),
  radial-gradient(80% 70% at 15% 100%, rgba(110, 60, 140, 0.45), transparent 70%), var(--plum); }
.art-night img { position: absolute; bottom: -43.6cqw; left: 50%; transform: translateX(-50%); width: 56.8cqw; max-width: none; }
.ad-lockup { position: absolute; top: 5.3cqw; left: 5.7cqw; display: flex; align-items: center; gap: 1.9cqw; color: var(--bone); }
.ad-lockup svg { width: max(24px, 6.4cqw); height: max(24px, 6.4cqw); }
.ad-lockup b { display: block; font: italic 500 max(20px, 5.7cqw)/1 'Bodoni Moda', var(--serif); letter-spacing: 0.01em; }
.ad-lockup small { display: block; font: 600 max(7px, 1.8cqw)/1 var(--sans); letter-spacing: 0.34em; text-transform: uppercase; color: var(--amber); margin-top: 0.9cqw; padding-left: 2px; }
.age { position: absolute; top: 5.7cqw; right: 5.7cqw; font: 500 max(10px, 2.1cqw) var(--mono); letter-spacing: 0.12em; color: var(--bone);
  border: 1px solid rgba(241, 231, 220, 0.4); border-radius: 99px; padding: 0.95cqw 2.1cqw; }
.plate h3 { font: 300 clamp(44px, 5vw, 64px)/1 var(--serif); letter-spacing: -0.03em; }
.plate h3 em { font-weight: 300; }
.plate .one { font-size: 17px; color: var(--ink2); margin: 16px 0 28px; max-width: 470px; }
.facts { border-top: 1px solid var(--rule); }
.facts div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.facts dt { color: var(--muted); }
.facts a { border-bottom: 1px solid var(--hair); }
.facts a:hover { border-color: var(--ink); }
.visit { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; font: 400 22px var(--serif); }
.visit .arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; font-size: 18px; transition: background-color 0.2s, color 0.2s, transform 0.2s; }
.visit:hover .arrow { background: var(--ink); color: var(--paper); transform: rotate(45deg); }

/* ---- approach ---- */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.col { padding: 44px 40px 56px 0; }
.col + .col { padding-left: 40px; border-left: 1px solid var(--hair); }
.rn { font: italic 300 64px/1 var(--serif); color: var(--signal); }
.col h3 { font: 400 30px/1.15 var(--serif); letter-spacing: -0.015em; margin: 26px 0 14px; }
.col p { color: var(--ink2); }

/* ---- closing line (home) ---- */
.cta .wrap { display: grid; grid-template-columns: 220px 1fr; padding-top: 72px; padding-bottom: 80px; align-items: center; }
.cta .label { color: var(--muted); }
.cta-line { display: flex; justify-content: space-between; align-items: center; gap: 32px; font: 300 clamp(36px, 5.6vw, 76px)/1.05 var(--serif); letter-spacing: -0.03em; }
.cta-line em { border-bottom: 1px solid var(--ink); white-space: nowrap; }
.cta-line .arrow { flex: none; width: clamp(56px, 6vw, 84px); height: clamp(56px, 6vw, 84px); border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center;
  font-size: clamp(22px, 2.2vw, 30px); transition: background-color 0.2s, color 0.2s; }
.cta-line:hover em { color: var(--signal); border-color: var(--signal); }
.cta-line:hover .arrow { background: var(--ink); color: var(--paper); }

/* ---- contact page ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; max-width: 920px; margin-top: 8px; }
.contact-grid h2 { font: 500 11px/1.6 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-top: 40px; }
.co-list div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.5; }
.co-list dt { color: var(--muted); }
.co-list dd { min-width: 0; overflow-wrap: anywhere; }
.co-list a { border-bottom: 1px solid var(--hair); }
.co-list a:hover { border-color: var(--ink); }

/* ---- footer ---- */
footer { padding-top: 40px; overflow: hidden; }
.foot-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding-bottom: 20px; }
.foot-row .mono { display: block; margin-bottom: 10px; color: var(--muted); }
.foot-row ul { list-style: none; font-size: 15px; line-height: 1.75; }
.foot-row a:hover { color: var(--signal); }
.giant { font: 300 clamp(64px, 8vw, 104px)/0.8 var(--serif); letter-spacing: -0.045em; white-space: nowrap; margin: 28px 0 -0.067em -0.04em; position: relative; z-index: 1; }
.giant em { font-weight: 300; }
.legal { border-top: 1px solid var(--rule); position: relative; z-index: 2; background: var(--paper); color: var(--muted); }
.legal .wrap { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 18px; }

/* ---- legal pages ---- */
.doc { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.doc .wrap { display: grid; grid-template-columns: 220px 1fr; padding-top: 72px; padding-bottom: 96px; }
.doc .label { color: var(--muted); }
.doc h1 { font-size: clamp(48px, 7vw, 88px); margin: 0 0 18px; }
.doc .updated { color: var(--muted); margin-bottom: 48px; }
.prose { max-width: 680px; }
.prose h2 { font: 400 28px/1.2 var(--serif); letter-spacing: -0.01em; margin: 44px 0 12px; }
.prose p, .prose li { color: var(--ink2); font-size: 17px; line-height: 1.7; }
.prose p + p { margin-top: 14px; }
.prose ul { margin: 12px 0 0 22px; }
.prose li + li { margin-top: 6px; }
.prose a { border-bottom: 1px solid var(--hair); color: var(--ink); }
.prose a:hover { border-color: var(--ink); }
.prose .lead { font: 300 26px/1.35 var(--serif); color: var(--ink); letter-spacing: -0.01em; }

/* ---- 404 ---- */
.lost { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.lost .wrap { padding-top: 96px; padding-bottom: 110px; display: grid; grid-template-columns: 1fr 260px; gap: 48px; align-items: center; }
.lost h1 { font-size: clamp(52px, 8vw, 104px); margin: 18px 0 24px; }
.lost svg path { fill: none; stroke: var(--ink); stroke-width: 1.2; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  .hero-l { padding-right: 40px; }
  .hero-r { padding-left: 32px; }
  .plate { padding-left: 36px; padding-right: 36px; }
}
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-l { border-right: 0; padding: 56px 0 48px; }
  .hero-r { padding: 40px 0 48px; border-top: 1px solid var(--hair); }
  .statement .wrap, .doc .wrap, .cta .wrap { grid-template-columns: 1fr; gap: 28px; }
  .cta .wrap { padding-top: 52px; padding-bottom: 60px; }
  .statement .wrap { padding-top: 64px; padding-bottom: 72px; }
  .plates { grid-template-columns: 1fr; }
  .plate, .plate:first-child, .plate:last-child { padding: 40px 0 44px; border-left: 0; }
  .plate + .plate { border-top: 1px solid var(--rule); }
  .contact-grid { grid-template-columns: 1fr; }
  .lost .wrap { grid-template-columns: 1fr; }
  .lost svg { width: 200px; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  .util .coords { display: none; }
  .links a:not(.btn) { display: none; }
  .mark { font-size: 23px; }
  .lede { font-size: 17px; }
  .side { grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
  .cols { grid-template-columns: 1fr; }
  .col, .col + .col { padding: 32px 0 36px; border-left: 0; }
  .col + .col { border-top: 1px solid var(--hair); }
  .col h3 { margin-top: 18px; }
  .rn { font-size: 52px; }
  .facts div, .co-list div { grid-template-columns: 112px 1fr; }
  .foot-row { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .track span { font-size: 24px; padding: 0 20px; }
  .doc .wrap { padding-top: 48px; padding-bottom: 64px; }
}
@media (max-width: 480px) {
  .chip-2 { display: none; }
  .chip-1 { width: 44cqw; }
  .hero-foot { gap: 16px 28px; }
  .hero-foot strong { font-size: 22px; }
}

/* ---- people who turn motion off ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flow path { animation: none; stroke-dashoffset: 0; }
  .band .track { animation: none; }
  .band-toggle { display: none; }
  .btn, .visit .arrow, .cta-line .arrow { transition: none; }
}