/* Self Intelligence deck — Self edition (format/self.css in the studio handbook).
   Paper #F2EBE5, ink black, Bordeaux #410E0D for openers, mono for the service layer.
   Basis Grotesque / Relative Mono fall back to Instrument Sans / IBM Plex Mono until the files land. */

@font-face { font-family: 'Instrument Sans'; src: url('assets/fonts/instrument.ttf') format('truetype'); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('assets/fonts/plexmono.ttf') format('truetype'); font-weight: 400; font-display: swap; }

:root {
  --sans: 'Basis Grotesque', 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Relative Mono', 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

  --ink: #000;
  --paper: #F2EBE5;
  --paper-2: #E9E1DA;
  --paper-3: #CEC6BF;
  --bordeaux: #410E0D;
  --line: rgba(0, 0, 0, .14);

  --gutter: clamp(16px, 4.2vw, 80px);
  --top: clamp(18px, 3.4vw, 56px);
  --label: clamp(11px, .78vw + 4px, 16px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--paper); color: var(--ink); color-scheme: light; }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; }

/* ---------- The deck: one slide per viewport ---------- */
.deck {
  height: 100%;
  overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }

.slide {
  position: relative;
  height: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  padding: calc(var(--top) * 2.4) var(--gutter) calc(var(--top) * 1.6);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.slide--paper { background: var(--paper); color: var(--ink); }
.slide--cover { background: var(--bordeaux); color: var(--paper); }

/* ---------- HUD: the service layer, inverts on any slide ---------- */
.hud {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(var(--top) + env(safe-area-inset-top, 0px)) var(--gutter) 0;
  font: 400 var(--label)/1 var(--mono); letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink); pointer-events: none; transition: color .4s ease;
}
body[data-theme="dark"] .hud { color: var(--paper); }
.hud-section { text-align: center; }
.hud-count { text-align: right; font-variant-numeric: tabular-nums; }
.progress { position: fixed; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px); height: 3px; z-index: 10; pointer-events: none; }
.progress i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .5s cubic-bezier(.2, .7, .2, 1), background .4s ease; }
body[data-theme="dark"] .progress i { background: var(--paper); }

/* ---------- 01 · Cover ---------- */
.wordmark { margin-left: auto; align-self: flex-end; height: clamp(26px, 3.2vw, 56px); width: auto; filter: invert(1) sepia(.18) brightness(.97); }
.cover-title {
  margin-top: auto;
  font-weight: 560; font-size: clamp(64px, 15.2vw, 300px);
  line-height: .86; letter-spacing: -.055em;
  margin-left: -.04em;
}
.cover-foot {
  display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 56px);
  margin-top: clamp(24px, 4vh, 56px); padding-top: clamp(14px, 1.6vw, 24px);
  border-top: 1px solid rgba(242, 235, 229, .28);
  font: 400 var(--label)/1 var(--mono); text-transform: uppercase; letter-spacing: .02em;
  color: rgba(242, 235, 229, .66);
}

/* ---------- 02 · Contents ---------- */
.kicker { font-weight: 400; font: 400 var(--label)/1 var(--mono); text-transform: uppercase; letter-spacing: .02em; opacity: .5; }
.toc { list-style: none; margin-top: auto; border-top: 1px solid var(--line); }
.toc li { border-bottom: 1px solid var(--line); }
.toc a {
  display: grid; grid-template-columns: clamp(48px, 9vw, 180px) 1fr; align-items: baseline;
  padding: clamp(14px, 2.2vh, 30px) 0 clamp(12px, 2vh, 26px);
  color: inherit; text-decoration: none;
}
.toc-n { font: 400 var(--label)/1 var(--mono); opacity: .5; transform: translateY(-.2em); }
.toc-name {
  font-weight: 540; font-size: clamp(40px, 7.6vw, 150px);
  line-height: .9; letter-spacing: -.045em;
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.toc a:hover .toc-name, .toc a:focus-visible .toc-name { transform: translateX(.08em); }
.toc:hover a:not(:hover) .toc-name { opacity: .32; }
.toc a:focus-visible { outline: none; }
.toc a:focus-visible .toc-n { opacity: 1; }

/* ---------- 03 · How it works ---------- */
.slide--how { gap: clamp(20px, 3.4vh, 44px); }
.kicker span { opacity: 1; margin-right: .6em; }
.how-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 80px); align-items: end; }
.how-head .kicker { grid-column: 1 / -1; margin-bottom: clamp(10px, 1.6vh, 20px); }
.how-title { font-weight: 540; font-size: clamp(36px, 4.9vw, 96px); line-height: .92; letter-spacing: -.045em; text-wrap: balance; }
.how-dek { font-size: clamp(15px, 1.15vw, 21px); line-height: 1.35; letter-spacing: -.01em; opacity: .62; max-width: 46ch; text-wrap: pretty; }

.flow { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 3.6fr) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 28px); align-items: stretch; }
.flow-col { display: flex; flex-direction: column; gap: clamp(10px, 1.4vh, 16px); padding-top: clamp(30px, 3.6vh, 44px); min-width: 0; }
.flow-label { font: 400 var(--label)/1.1 var(--mono); text-transform: uppercase; letter-spacing: .02em; opacity: .5; }
.flow-note { margin-top: auto; font-size: clamp(12px, .82vw, 15px); line-height: 1.35; opacity: .55; }

.chips { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.chips li { position: relative; font-size: clamp(13px, .95vw, 18px); font-weight: 500; letter-spacing: -.01em; padding: .5em .7em; background: var(--paper-2); border-radius: 8px; }
.chips li::after { content: ''; position: absolute; right: calc(-1 * clamp(14px, 1.6vw, 28px)); top: 50%; width: clamp(14px, 1.6vw, 28px); border-top: 1px dashed rgba(0,0,0,.28); }

.flow-core { position: relative; display: flex; flex-direction: column; border: 1px dashed rgba(65, 14, 13, .45); border-radius: 12px; padding: 0 clamp(10px, 1vw, 16px) clamp(10px, 1vw, 16px); min-width: 0; }
.flow-boundary { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: clamp(10px, 1.3vh, 16px) 4px; font: 400 var(--label)/1.1 var(--mono); text-transform: uppercase; letter-spacing: .02em; color: var(--bordeaux); }
.flow-boundary span:last-child { opacity: .7; }
.stages { list-style: none; flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, .8vw, 14px); counter-reset: s; }
.stage { position: relative; display: flex; flex-direction: column; gap: clamp(8px, 1.2vh, 14px); padding: clamp(14px, 1.3vw, 24px); background: var(--paper-2); border-radius: 8px; min-width: 0; }
.stage-n { font: 400 var(--label)/1 var(--mono); opacity: .5; }
.stage h3 { font-weight: 560; font-size: clamp(22px, 2.15vw, 42px); line-height: .95; letter-spacing: -.04em; }
.stage p { font-size: clamp(12.5px, .9vw, 17px); line-height: 1.35; letter-spacing: -.005em; opacity: .7; }
.stage--core { background: var(--bordeaux); color: var(--paper); }
.stage--core p, .stage--core .stage-n { opacity: .72; }

.fact { margin-top: auto; display: grid; gap: 4px; padding: 10px 12px; border: 1px solid rgba(242,235,229,.22); border-radius: 6px; font: 400 clamp(10px, .68vw, 13px)/1.25 var(--mono); }
.fact-k { opacity: .6; text-transform: uppercase; letter-spacing: .02em; }
.fact-old { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .5; }
.fact-new { font-weight: 400; }
.fact-src { opacity: .6; }

.events { list-style: none; margin-top: auto; display: grid; gap: 4px; }
.events li { font: 400 clamp(10px, .7vw, 13px)/1.2 var(--mono); padding: .55em .6em; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.events time { opacity: .45; margin-right: .5em; }
.events li:nth-child(1) { opacity: .5; }
.events li:nth-child(2) { opacity: .75; }
.parse { margin-top: auto; display: grid; gap: 4px; font: 400 clamp(10px, .7vw, 13px)/1.25 var(--mono); }
.parse span { padding: .55em .6em; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.parse i { font-style: normal; text-transform: uppercase; letter-spacing: .02em; opacity: .5; margin-right: .5em; }
.parse .parse-q { font-family: var(--sans); font-size: clamp(11.5px, .82vw, 15px); letter-spacing: -.01em; background: none; border-style: dashed; }
.methods { list-style: none; margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.methods li { font: 400 clamp(10px, .7vw, 13px)/1.15 var(--mono); text-transform: uppercase; letter-spacing: .02em; padding: .7em .6em; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }

.pulse { position: absolute; left: clamp(10px, 1vw, 16px); right: clamp(10px, 1vw, 16px); bottom: 5px; height: 1px; background: rgba(65,14,13,.14); overflow: hidden; }
.pulse i { position: absolute; top: -1px; left: -12%; width: 12%; height: 3px; border-radius: 2px; background: var(--bordeaux); }
.slide--how.is-active .pulse i { animation: travel 4.2s cubic-bezier(.45, 0, .55, 1) 1s infinite; }
@keyframes travel { to { left: 100%; } }

.flow-out { padding-left: 0; }
.ports { display: flex; gap: 6px; }
.ports span { flex: 1; text-align: center; font: 400 clamp(12px, .9vw, 16px)/1 var(--mono); padding: .75em 0; background: var(--ink); color: var(--paper); border-radius: 6px; }
.consumers { list-style: none; display: flex; flex-direction: column; gap: clamp(8px, 1.2vh, 14px); }
.consumers li { font-size: clamp(12px, .85vw, 15.5px); line-height: 1.3; opacity: .62; border-top: 1px solid var(--line); padding-top: clamp(8px, 1.1vh, 12px); }
.consumers b { display: block; font-weight: 560; font-size: clamp(17px, 1.45vw, 28px); letter-spacing: -.035em; line-height: 1; margin-bottom: .3em; opacity: 1; color: var(--ink); }
.consumers li { color: rgba(0,0,0,.62); opacity: 1; }

.slide--how .stage { transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.slide--how:not(.is-active) .stage { opacity: 0; transform: translateY(16px); }
.slide--how.is-active .stage:nth-child(2) { transition-delay: .15s; }
.slide--how.is-active .stage:nth-child(3) { transition-delay: .3s; }
.slide--how.is-active .stage:nth-child(4) { transition-delay: .45s; }

@media (max-width: 1100px) {
  .flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
  .flow-col { padding-top: 0; }
  .chips { flex-direction: row; flex-wrap: wrap; }
  .chips li::after { display: none; }
  .flow-note { display: none; }
  .consumers { flex-direction: row; gap: 16px; }
  .consumers li { flex: 1; }
}
@media (max-width: 640px) {
  .how-head { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .how-dek { font-size: 13px; }
  .stages { grid-template-columns: 1fr 1fr; }
  .stage { padding: 10px; gap: 4px; }
  .stage h3 { font-size: 20px; }
  .stage p, .fact, .methods, .events, .parse, .flow-boundary span:last-child, .consumers li { display: none; }
  .consumers { display: none; }
  .chips li { font-size: 12px; padding: .35em .55em; }
  .stage p:first-of-type { display: block; font-size: 11.5px; }
}

/* ---------- 03 · What it is ---------- */
.slide--what { gap: clamp(14px, 2.4vh, 32px); padding-bottom: calc(var(--top) * 1.1); }
.wi-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 80px); align-items: end; }
.wi-head .kicker { grid-column: 1 / -1; margin-bottom: clamp(8px, 1.2vh, 16px); }
.wi-title span { opacity: .4; }
.wi-title { font-weight: 540; font-size: clamp(28px, 3.5vw, 66px); line-height: .94; letter-spacing: -.045em; text-wrap: balance; }
.wi-dek { font-size: clamp(13px, 1vw, 19px); line-height: 1.35; letter-spacing: -.01em; opacity: .62; max-width: 48ch; text-wrap: pretty; }

.wi-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); grid-template-areas: "gap arch sol"; gap: clamp(12px, 1.6vw, 30px); }
.wi-gap { grid-area: gap; } .wi-arch { grid-area: arch; } .wi-sol { grid-area: sol; }
.wi-col { display: flex; flex-direction: column; gap: clamp(8px, 1.3vh, 14px); min-width: 0; min-height: 0; }
.wi-h { font-weight: 560; font-size: clamp(17px, 1.45vw, 28px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }

/* the gap and the solution: two paired problems, A and B */
.wi-cards { list-style: none; flex: 1; min-height: 0; display: grid; grid-template-rows: 1fr 1fr; gap: clamp(8px, 1.3vh, 14px); }
.wi-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: clamp(8px, .8vw, 14px); row-gap: clamp(4px, .8vh, 10px); align-content: start; padding: clamp(12px, 1.7vh, 22px) clamp(12px, 1.1vw, 20px); background: var(--paper-2); border: 1px dashed rgba(65, 14, 13, .45); border-radius: 8px; }
.wi-card b { align-self: center; font-weight: 560; font-size: clamp(16px, 1.4vw, 27px); line-height: 1; letter-spacing: -.035em; }
.wi-card > span:last-child { grid-column: 1 / -1; font-size: clamp(12px, .95vw, 18px); line-height: 1.4; letter-spacing: -.005em; opacity: .75; text-wrap: pretty; }
.wi-ab { display: grid; place-items: center; width: 1.9em; height: 1.9em; font: 500 clamp(10px, .7vw, 13px)/1 var(--mono); border: 1px solid currentColor; border-radius: 50%; }
.wi-card--ok { background: var(--bordeaux); color: var(--paper); border: 0; }
.wi-card--ok > span:last-child { opacity: .82; }
.wi-arch { margin: 0; }
.wi-svg { flex: 1; min-height: 0; width: 100%; height: 100%; color: var(--ink); }
.wi-svg text { font-family: var(--sans); fill: currentColor; }
.wi-svg .wi-n { font-size: 15px; font-weight: 560; letter-spacing: -.02em; }
.wi-svg .wi-t { font-size: 11px; font-weight: 500; letter-spacing: -.005em; }
.wi-svg .wi-note { font-size: 10.5px; opacity: .62; }
.wi-svg .wi-lab, .wi-svg .wi-elab, .wi-svg .wi-plab, .wi-svg .wi-at { font-family: var(--mono); font-size: 8.5px; letter-spacing: .02em; }
.wi-svg .wi-lab--dim, .wi-svg .wi-at { opacity: .5; }
.wi-svg .wi-elab { opacity: .6; }
.wi-svg .wi-elab--b, .wi-svg .wi-plab { fill: var(--bordeaux); opacity: 1; }
.wi-svg .wi-n--core { font-size: 19px; fill: var(--paper); }
.wi-svg .wi-note--core { fill: var(--paper); opacity: .75; }
.wi-svg .wi-t--inv { fill: var(--paper); }
.wi-box { fill: var(--paper-2); }
.wi-agent { fill: var(--paper); stroke: var(--line); }
.wi-src { fill: var(--paper-2); }
.wi-core { fill: var(--bordeaux); }
.wi-ink { fill: var(--ink); }
.wi-dot { fill: var(--bordeaux); }
.wi-perim { fill: none; stroke: rgba(65,14,13,.5); stroke-dasharray: 5 4; }
.wi-ext { fill: none; stroke: rgba(0,0,0,.45); stroke-dasharray: 3 3; }
.wi-edge { stroke: rgba(0,0,0,.55); stroke-width: 1.2; fill: none; }
.wi-edge--b { stroke: var(--bordeaux); }
.wi-edge--dash { stroke-dasharray: 3 3; }
.wi-ah { fill: rgba(0,0,0,.6); }

.wi-col { transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.slide--what:not(.is-active) .wi-col { opacity: 0; transform: translateY(14px); }
.slide--what.is-active .wi-col:nth-child(2) { transition-delay: .12s; }
.slide--what.is-active .wi-col:nth-child(3) { transition-delay: .24s; }

@media (max-width: 1100px) {
  .wi-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: 1fr 1fr; grid-template-areas: "gap arch" "sol arch"; }
  .wi-card > span:last-child { display: none; }
  .wi-cards { grid-template-rows: none; grid-auto-rows: min-content; }
  .wi-h { font-size: clamp(14px, 1.9vw, 20px); }
}
@media (max-width: 640px) {
  .wi-head { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .wi-dek { font-size: 12.5px; }
  .wi-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "gap" "sol"; }
  .wi-arch { display: none; }
  .wi-h { font-size: 15px; }
  .wi-card > span:last-child { display: block; font-size: 12px; }
  .wi-cards { grid-template-rows: none; grid-auto-rows: min-content; }
  .wi-arch .flow-label { display: none; }
}
.tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.tags i { font: 400 clamp(9.5px, .62vw, 12px)/1 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .02em; padding: .55em .6em; background: var(--paper); border: 1px solid var(--line); border-radius: 5px; }
.model { position: relative; display: block; text-align: center; font: 400 clamp(11px, .8vw, 15px)/1 var(--mono); text-transform: uppercase; letter-spacing: .02em; padding: .8em .4em; background: var(--ink); color: var(--paper); border-radius: 6px; }
.model--ext { background: none; color: var(--ink); border: 1px dashed rgba(0,0,0,.4); }
.model--ext::before { content: ''; position: absolute; right: 100%; top: 50%; width: clamp(28px, 2.8vw, 50px); border-top: 1px dashed rgba(0,0,0,.35); }

@media (max-width: 1100px) {
  .model--ext::before { display: none; }
}

/* ---------- Entrance ---------- */
.slide > * { transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.slide:not(.is-active) > * { opacity: 0; transform: translateY(24px); }
.slide.is-active > :nth-child(2) { transition-delay: .08s; }
.slide.is-active > :nth-child(3) { transition-delay: .16s; }
.toc li { transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.slide:not(.is-active) .toc li { opacity: 0; transform: translateY(18px); }
.slide.is-active .toc li:nth-child(2) { transition-delay: .1s; }
.slide.is-active .toc li:nth-child(3) { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  .deck { scroll-behavior: auto; }
  .slide > *, .toc li, .toc-name, .progress i, .slide--how .stage, .wi-col { transition: none !important; }
  .slide--how .stage, .wi-col { opacity: 1 !important; transform: none !important; }
  .pulse i { animation: none !important; display: none; }
  .slide:not(.is-active) > *, .slide:not(.is-active) .toc li { opacity: 1; transform: none; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .hud { grid-template-columns: 1fr auto; }
  .hud-section { display: none; }
  .cover-foot span:nth-child(2) { display: none; }
  .cover-title { font-size: 20.5vw; }
}

@media print {
  body { overflow: visible; }
  .deck { height: auto; overflow: visible; }
  .slide { height: 100vh; page-break-after: always; }
  .slide > *, .toc li, .slide .stage, .slide .wi-col { opacity: 1 !important; transform: none !important; }
  .hud, .progress { display: none; }
}

/* ---------- 03 · Self Intelligence, what it is: one sentence and three boxes ---------- */
.slide--intro { gap: clamp(20px, 4vh, 52px); }
.slide--intro .kicker span { opacity: 1; margin-right: .6em; }
.intro-title { font-weight: 540; font-size: clamp(28px, 4.9vw, 100px); line-height: .98; letter-spacing: -.048em; text-wrap: balance; max-width: 20em; }
.intro-title span { opacity: .45; }
.intro-boxes { list-style: none; margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 24px); }
.intro-box { display: grid; grid-template-rows: auto 1fr auto; row-gap: clamp(10px, 1.6vh, 20px); min-height: clamp(150px, 26vh, 300px); padding: clamp(16px, 1.6vw, 30px); background: var(--paper-2); border-radius: 8px; }
.intro-box:nth-child(1) { background: var(--bordeaux); color: var(--paper); }
.intro-n { font: 400 var(--label)/1 var(--mono); letter-spacing: .02em; opacity: .55; }
.intro-box h3 { align-self: end; font-weight: 560; font-size: clamp(26px, 2.8vw, 56px); line-height: .95; letter-spacing: -.045em; }
.intro-box p { font-size: clamp(13px, 1.1vw, 21px); line-height: 1.35; letter-spacing: -.005em; opacity: .75; text-wrap: pretty; min-height: 4.1em; }
.intro-box:nth-child(1) p { opacity: .85; }
.intro-title, .intro-box { transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.slide--intro:not(.is-active) .intro-title, .slide--intro:not(.is-active) .intro-box { opacity: 0; transform: translateY(16px); }
.slide--intro.is-active .intro-box:nth-child(1) { transition-delay: .15s; }
.slide--intro.is-active .intro-box:nth-child(2) { transition-delay: .27s; }
.slide--intro.is-active .intro-box:nth-child(3) { transition-delay: .39s; }
@media (max-width: 900px) {
  .intro-boxes { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .intro-box { min-height: 0; grid-template-rows: auto auto auto; }
  .intro-box p { min-height: 0; }
  .intro-box h3 { font-size: 26px; }
}
@media print {
  .intro-title, .intro-box { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-title, .intro-box { transition: none !important; opacity: 1 !important; transform: none !important; }
}