/* Press timeline.
   Two presentations from one set of markup:
     #press          — a pinned HORIZONTAL journey (the home-page showpiece)
     press-archive   — a plain vertical grid (the reference copy)
   Expects the site tokens (--bg, --surface, --accent, --serif …) from :root. */

.press-intro{margin-bottom:.6rem;max-width:640px}

/* ══ shared card ═════════════════════════════════════════════════════════ */
.pe-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s}
.pe-shot{display:block;border:0;padding:0;margin:0;background:var(--surface2);cursor:zoom-in;
  position:relative;line-height:0;flex-shrink:0;width:100%}
.pe-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  filter:saturate(.08) contrast(1.08) brightness(1.04);transition:filter .4s,transform .5s}
.pe-shot::after{content:'⤢';position:absolute;right:.5rem;bottom:.5rem;font-size:.72rem;line-height:1;
  color:var(--text);background:rgba(11,14,19,.82);border:1px solid var(--border);border-radius:6px;
  padding:.26rem .4rem;opacity:0;transition:opacity .25s}
.pe-shot-txt{background:linear-gradient(150deg,var(--surface2),var(--bg));display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5rem;padding:1rem .7rem;border-bottom:1px solid var(--border);flex-shrink:0}
.pe-shot-txt .pst-mark{font-family:var(--serif);font-size:2.4rem;font-weight:600;color:var(--accent);line-height:1}
.pe-shot-txt .pst-note{font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-align:center;line-height:1.45}
.pe-body{padding:1rem 1.15rem 1.15rem;display:flex;flex-direction:column;flex:1;min-height:0}
.pe-meta{display:flex;align-items:center;gap:.5rem;font-size:.64rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.4rem;flex-wrap:wrap}
.pe-meta .pe-yr{color:var(--muted)}
.pe-meta .pe-tag{color:var(--muted);border:1px solid var(--border);border-radius:100px;padding:.08rem .48rem;letter-spacing:.06em}
.pe-body h4{font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--white);line-height:1.28;margin-bottom:.45rem}
.pe-quote{font-size:.82rem;color:var(--cream);line-height:1.5;font-style:italic;
  border-left:2px solid var(--accent);padding-left:.7rem;margin-bottom:.45rem}
.pe-note{font-size:.76rem;color:var(--muted);line-height:1.55}
.pe-note strong{color:var(--text);font-weight:600}
.pe-datenote{font-size:.7rem;color:var(--muted);opacity:.8;font-style:italic;margin-top:.4rem;line-height:1.5}
.pe-links{margin-top:auto;padding-top:.7rem;display:flex;gap:.85rem;flex-wrap:wrap}
.pe-links a,.pe-links button{font-size:.72rem;font-weight:600;color:var(--muted);background:none;border:0;
  border-bottom:1px solid var(--border);padding:0 0 1px;cursor:pointer;text-decoration:none;font-family:inherit;
  transition:color .2s,border-color .2s}
.pe-links a:hover,.pe-links button:hover{color:var(--accent);border-color:var(--accent)}

/* ══ THE JOURNEY (home page) ═════════════════════════════════════════════ */
/* The stage runs full-bleed so the journey fills the screen; the section's own
   horizontal padding moves onto the text blocks instead. */
#press{padding-left:0;padding-right:0;padding-bottom:0}
#press > .sec-eyebrow,#press > h2,#press > .press-intro,#press > .press-foot{
  padding-left:var(--pad-x);padding-right:var(--pad-x)}
.hz{position:relative}
.hz-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.hz-track{display:flex;align-items:stretch;gap:1.6rem;padding:0 clamp(1.5rem,5vw,5rem);will-change:transform}

/* progress rail */
.hz-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--border);z-index:5}
.hz-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--oca),var(--ia),var(--bj),var(--id),var(--accent))}
.hz-era{position:absolute;left:clamp(1.5rem,5vw,5rem);bottom:1.5rem;z-index:5;pointer-events:none;
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.6rem}
.hz-era b{color:var(--accent);font-weight:700}
.hz-hint{position:absolute;right:clamp(1.5rem,5vw,5rem);bottom:1.4rem;z-index:5;pointer-events:none;
  font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.75}
.hz-hint span{display:inline-block;animation:nudge 1.9s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* act "station" panel */
.hz-act{flex:0 0 clamp(300px,26vw,400px);display:flex;flex-direction:column;justify-content:center;
  padding:0 1.5rem 0 0;border-left:2px solid var(--accent);padding-left:1.7rem;position:relative}
.hz-act::before{content:'';position:absolute;left:-9px;top:50%;width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:3px solid var(--bg);box-shadow:0 0 0 5px var(--accent-glow2)}
.hz-act .gen-yrs{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.hz-act h3{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.5rem);font-weight:600;color:var(--white);
  line-height:1.1;letter-spacing:-.02em;margin-bottom:.7rem}
.hz-act p{font-size:.87rem;color:var(--muted);line-height:1.7}
.hz-act .gen-who{display:inline-block;margin-top:.9rem;font-size:.7rem;font-weight:600;letter-spacing:.06em;
  color:var(--text);border:1px solid var(--border);border-radius:100px;padding:.3rem .85rem;background:var(--surface);align-self:flex-start}

/* clipping card on the journey — the scan is the hero */
/* Sized so the longest quote+note pairs fit without truncation — the worst
   card was 86px short at 660px tall. Taller and a little wider rather than
   shrinking the scans, which are the whole point of this section. */
.hz-track .pe{flex:0 0 clamp(280px,23vw,368px);display:flex;align-items:center}
.hz-track .pe-card{height:min(84vh,760px);width:100%}
.hz-track .pe-shot,.hz-track .pe-shot-txt{height:clamp(210px,34vh,340px)}
.hz-track .pe-body{overflow:hidden}
/* Clamps are a backstop for short viewports only — at 4 and 5 lines they were
   truncating notes that had plenty of room left in the card. Measured across
   all 46 cards: nothing overflows at these limits. */
.hz-track .pe-quote{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.hz-track .pe-note{display:-webkit-box;-webkit-line-clamp:14;-webkit-box-orient:vertical;overflow:hidden}
.hz-track .pe-datenote{display:none}
.hz-track .pe:hover .pe-card{border-color:var(--accent);transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(0,0,0,.5)}
.hz-track .pe:hover .pe-shot img{filter:saturate(.55) contrast(1.08) brightness(1.06);transform:scale(1.04)}
.hz-track .pe:hover .pe-shot::after{opacity:1}

/* closing panel */
.hz-end{flex:0 0 clamp(280px,24vw,380px);display:flex;flex-direction:column;justify-content:center;gap:1rem}
.hz-end h3{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,2rem);font-weight:600;color:var(--white);line-height:1.15}
.hz-end p{font-size:.87rem;color:var(--muted);line-height:1.7}
.hz-end a{align-self:flex-start;font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--bg);
  background:var(--accent);border-radius:8px;padding:.7rem 1.3rem;text-decoration:none;transition:transform .2s,box-shadow .2s}
.hz-end a:hover{transform:translateY(-2px);box-shadow:0 12px 30px var(--accent-glow)}

/* fallback when not pinned (touch, narrow, reduced motion): native swipe */
.hz.is-native .hz-stage{position:static;height:auto;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:1.5rem}
.hz.is-native .hz-track{transform:none!important;will-change:auto}
.hz.is-native .pe,.hz.is-native .hz-act,.hz.is-native .hz-end{scroll-snap-align:center}
.hz.is-native .hz-prog,.hz.is-native .hz-hint{display:none}
.hz.is-native .hz-era{position:static;margin:0 0 .9rem clamp(1.5rem,5vw,5rem)}
.hz.is-native .pe-card{height:min(78vh,620px)}

/* ══ ARCHIVE (vertical grid) ═════════════════════════════════════════════ */
.press-path{position:relative;max-width:1180px;margin:2.6rem auto 0}
.gen{position:relative;padding-left:2.6rem;margin-bottom:1.5rem}
.gen:not(:first-child){margin-top:3.2rem}
.gen::before{content:'';position:absolute;left:0;top:4px;width:17px;height:17px;border-radius:50%;
  background:var(--accent);border:3px solid var(--bg);box-shadow:0 0 0 4px var(--accent-glow2)}
.gen-yrs{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.3rem}
.gen h3{font-family:var(--serif);font-size:1.38rem;font-weight:600;color:var(--white);line-height:1.2;margin-bottom:.4rem}
.gen p{font-size:.87rem;color:var(--muted);line-height:1.7;max-width:660px}
.gen .gen-who{display:inline-block;margin-top:.55rem;font-size:.72rem;font-weight:600;letter-spacing:.06em;
  color:var(--text);border:1px solid var(--border);border-radius:100px;padding:.26rem .8rem;background:var(--surface)}
.snake{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1.05rem;margin:0 0 .4rem 2.6rem}
.snake .pe-shot,.snake .pe-shot-txt{height:150px}
.snake .pe:hover .pe-card{border-color:var(--accent);transform:translateY(-3px)}
.snake .pe:hover .pe-shot img{filter:saturate(.5) contrast(1.08)}
.snake .pe:hover .pe-shot::after{opacity:1}
.press-foot{max-width:1180px;margin:2.4rem auto 0;padding-top:1.2rem;border-top:1px solid var(--border);
  font-size:.78rem;color:var(--muted);line-height:1.65}

/* ══ lightbox ════════════════════════════════════════════════════════════ */
.pr-lb{position:fixed;inset:0;z-index:200;background:rgba(6,8,12,.95);display:none;align-items:center;
  justify-content:center;padding:2.2rem 1.2rem 3.4rem}
.pr-lb.open{display:flex}
.pr-lb img{max-width:min(1100px,94vw);max-height:86vh;object-fit:contain;border-radius:5px;box-shadow:0 24px 70px rgba(0,0,0,.65)}
.pr-lb-cap{position:absolute;bottom:1.1rem;left:0;right:0;text-align:center;font-size:.79rem;color:var(--muted);padding:0 1.5rem;line-height:1.5}
.pr-lb-x{position:absolute;top:1.1rem;right:1.3rem;width:40px;height:40px;background:rgba(19,23,32,.9);
  border:1px solid var(--border);color:var(--text);border-radius:50%;font-size:1.25rem;line-height:1;cursor:pointer;
  transition:border-color .2s,color .2s}
.pr-lb-x:hover{border-color:var(--accent);color:var(--accent)}

/* ══ motion ══════════════════════════════════════════════════════════════
   Archive-only reveal. The journey animates via scroll position itself, so it
   needs no observer. Hidden start state lives solely under .io-anim (added by
   press.js), so if the script never runs, content is simply visible. */
.io-anim .snake .pe,.io-anim .gen{opacity:0;transform:translateY(24px);
  transition:opacity .55s ease,transform .6s cubic-bezier(.19,1,.22,1)}
.io-anim .snake .pe{transition-delay:calc(var(--i,0) * 70ms)}
.io-anim .snake .pe.is-in,.io-anim .gen.is-in{opacity:1;transform:none}

/* ── Identity Layer feature (#suite) ─────────────────────────────────────── */
/* Sits ABOVE the four platform cards: the umbrella has to be introduced before
   its parts, otherwise the section explains the Identity Layer after showing it. */
.suite-label{margin-top:2.4rem;font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.suite-label + .suite-strip{margin-top:.9rem}
.il{display:grid;grid-template-columns:1fr minmax(300px,46%);gap:clamp(1.4rem,3vw,2.6rem);align-items:center;
  margin-top:2.2rem;padding:clamp(1.5rem,3vw,2.2rem);border:1px solid var(--border);border-radius:16px;
  background:radial-gradient(120% 140% at 0% 0%,var(--surface2),var(--surface));
  text-decoration:none;transition:border-color .3s,transform .3s,box-shadow .3s}
.il:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 20px 50px rgba(0,0,0,.45)}
/* The loop diagram, ported from identity-layer.ai. The original runs on GSAP
   (5 radar passes lighting concentric rings); that's ~70KB of library for one
   graphic, so the sweep and the arc reveal are done in CSS instead. */
.il-loop{width:min(100%,540px);justify-self:center}
.il-loop svg{width:100%;height:auto;display:block;overflow:visible}
.il-arc{fill:none;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 7px currentColor);
  opacity:0;animation:il-arc-in .5s ease forwards;
  animation-delay:calc(var(--q,0) * .28s + var(--r,0) * .07s)}
/* calc() can't read data- attributes, so map them to custom properties */
.il-arc[data-q="0"]{--q:0}.il-arc[data-q="1"]{--q:1}
.il-arc[data-q="2"]{--q:2}.il-arc[data-q="3"]{--q:3}
.il-arc[data-r="0"]{--r:0}.il-arc[data-r="1"]{--r:1}.il-arc[data-r="2"]{--r:2}
.il-arc[data-r="3"]{--r:3}.il-arc[data-r="4"]{--r:4}
@keyframes il-arc-in{to{opacity:1}}
/* outer rings sit fainter so the quadrant reads as one thickening band */
.il-arc[data-r="3"]{opacity:0;animation-name:il-arc-in-dim}
.il-arc[data-r="4"]{opacity:0;animation-name:il-arc-in-faint}
@keyframes il-arc-in-dim{to{opacity:.55}}
@keyframes il-arc-in-faint{to{opacity:.28}}
.il-radar{transform-origin:310px 225px;animation:il-spin 9s linear infinite}
@keyframes il-spin{to{transform:rotate(360deg)}}
.il-l{font-family:'Inter',sans-serif;font-weight:800;font-size:15px;letter-spacing:.1em}
.il-s{font-family:'Inter',sans-serif;font-size:10.5px;letter-spacing:.06em;fill:var(--muted)}
.il-hub{font-family:'Inter',sans-serif;font-weight:800;font-size:14px;letter-spacing:.14em;fill:var(--white)}
.il-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.6rem}
.il-body h3{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.95rem);font-weight:600;color:var(--white);
  line-height:1.15;letter-spacing:-.02em;margin-bottom:.6rem}
.il-body h3 em{font-style:italic;color:var(--accent)}
.il-body p{font-size:.92rem;color:var(--muted);line-height:1.75;max-width:620px;margin-bottom:1rem}
.il-steps{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem}
.il-step{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--border);border-radius:100px;padding:.3rem .8rem;background:var(--bg)}
.il-step.id{color:var(--id)}.il-step.bj{color:var(--bj)}
.il-step.ia{color:var(--ia)}.il-step.oca{color:var(--oca)}
.il-cta{display:inline-flex;align-items:center;gap:.7rem;font-size:.95rem;font-weight:700;
  letter-spacing:-.01em;color:var(--bg);background:var(--accent);border-radius:12px;
  padding:.85rem 1.5rem .85rem 1rem;transition:transform .2s,box-shadow .2s,background .2s}
/* the loop mark sits on its own dark disc so the four brand colours stay
   legible against the rose button */
.il-cta-mark{width:34px;height:34px;flex-shrink:0;display:block;
  transition:transform .55s cubic-bezier(.19,1,.22,1)}
.il-cta-arr{font-weight:700;transition:transform .2s}
.il:hover .il-cta{transform:translateY(-2px);background:var(--accent-d);box-shadow:0 14px 34px var(--accent-glow)}
.il:hover .il-cta-mark{transform:rotate(90deg)}
.il:hover .il-cta-arr{transform:translate(2px,-2px)}
@media(max-width:760px){
  .il{grid-template-columns:1fr;text-align:left}
  .il-loop{width:min(100%,420px);margin-top:.4rem}
}
@media(prefers-reduced-motion:reduce){
  .il:hover{transform:none}
  .il:hover .il-cta,.il:hover .il-cta-mark,.il:hover .il-cta-arr{transform:none}
  /* hold the loop at full strength rather than spinning or fading it in */
  .il-radar{animation:none}
  .il-arc{opacity:1;animation:none}
  .il-arc[data-r="3"]{opacity:.55}
  .il-arc[data-r="4"]{opacity:.28}
}

/* ── the career journey (#journey) — roles + client work, one track ───────── */
#journey{padding-left:0;padding-right:0;padding-bottom:0}
#journey > .sec-eyebrow,#journey > h2,#journey > .lead{padding-left:var(--pad-x);padding-right:var(--pad-x)}
/* One date treatment for the whole timeline — role ranges and project years
   share a single size token so they can't drift apart again. */
.jr{--jr-date:1.32rem}
.jr .hz-act .gen-yrs,.jr .jr-yr{font-family:var(--serif);font-size:var(--jr-date);font-weight:600;
  color:var(--accent);line-height:1.2;letter-spacing:-.01em;text-transform:none}
.jr .hz-act .gen-yrs{margin-bottom:.5rem}

/* Cards are stretched to equal height, so centring each card's content put
   every year label at a different y — 2016 (23 chips) sat 167px above 2020
   (1 chip). Top-aligning with matched padding lands all the dates on one line. */
.jr .hz-act,.jr .jr-proj{justify-content:flex-start;padding-top:1.15rem}
/* project cards carry a 1px border that role cards don't — take it back out of
   the padding so both sets of dates land on exactly the same line */
.jr .jr-proj{padding-top:calc(1.15rem - 1px)}
.jr .hz-act h3{font-size:clamp(1.15rem,1.9vw,1.6rem);margin-bottom:.35rem}
.jr .jr-org{font-size:.8rem;color:var(--text);font-weight:600;margin-bottom:.6rem;line-height:1.45}
.jr .hz-act.is-edu{border-left-color:var(--ia)}
.jr .hz-act.is-edu::before{background:var(--ia);box-shadow:0 0 0 5px rgba(234,179,8,.15)}
/* the Net Results Consults entry anchors everything after it */
.jr .hz-act.is-anchor{border-left-width:3px}
.jr .hz-act.is-anchor::before{width:20px;height:20px;left:-11px}

/* a year of client work */
.jr-proj{flex:0 0 clamp(252px,20vw,310px);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.2rem;
  max-height:min(74vh,660px);overflow:hidden;transition:border-color .25s}
.jr-proj:hover{border-color:var(--accent)}
.jr-proj.is-wide{flex-basis:clamp(360px,30vw,470px)}
.jr-proj.is-xwide{flex-basis:clamp(520px,44vw,720px)}
.jr-proj-head{display:flex;align-items:baseline;gap:.55rem;margin-bottom:.15rem}
.jr-yr{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--accent);line-height:1}
.jr-n{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.jr-proj .jr-org{display:flex;align-items:center;gap:.45rem;font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem;min-height:24px}
/* the lockup carries the name itself — no text label alongside it */
.jr-wordmark{width:clamp(132px,13vw,168px);height:auto;display:block}
.jr-logo{width:26px;height:26px;flex-shrink:0;display:block;object-fit:contain}
.jr-logo-irs{display:flex;align-items:center;justify-content:center;font-family:var(--serif);
  font-size:.78rem;font-weight:600;letter-spacing:0;color:var(--ia);
  border:1.5px solid var(--ia);border-radius:50%;text-transform:none}
/* the two owners read differently on the rail */
.jr-proj.is-irs{border-left:2px solid var(--ia)}
.jr-proj.is-nrc{border-left:2px solid var(--accent)}
.jr-proj .cw-list{display:flex;flex-wrap:wrap;gap:.35rem;align-content:flex-start;overflow:hidden}
/* Every chip is a centring flex box, with or without a logo. Chips stretch to
   their row's height, so a plain span would leave its text stuck at the top
   while logo chips centred theirs — the mixed top/middle alignment. */
.cw-item{display:inline-flex;align-items:center;font-size:.72rem;line-height:1.3;color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.28rem .5rem;
  transition:border-color .2s,color .2s}
.cw-item[title]{cursor:help}
.cw-item:hover{border-color:var(--accent);color:var(--white)}
/* brand mark — large enough to be identified at a glance while scrolling.
   Single token so the size can be tuned in one place; card widths below are
   sized to suit it, so re-check the 2016 card for clipping if you change it. */
.jr{--cw-logo:38px}
.cw-item.has-logo{display:inline-flex;align-items:center;gap:.5rem;padding-left:.28rem}
.cw-logo{width:var(--cw-logo,38px);height:var(--cw-logo,38px);flex-shrink:0;display:block;
  object-fit:contain;border-radius:7px;background:#fff;padding:3px;transition:transform .2s}
.cw-item:hover .cw-logo{transform:scale(1.08)}

@media(max-width:640px){
  .cw-year{grid-template-columns:1fr;gap:.5rem}
  .cw-yr{font-size:1rem}
}

/* ── the career timeline (#journey) ───────────────────────────────────────
   Lives here rather than in the page's inline <style> so all scroll motion is
   in one file. These rules load after the inline block, so they win on equal
   specificity. Defaults are the finished state — the hidden start only applies
   under .io-anim, which press.js adds. */
.io-anim .tl-item{opacity:0;transform:translateY(18px);
  transition:opacity .55s ease,transform .6s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--i,0) * 60ms)}
.io-anim .tl-item.is-in{opacity:1;transform:none}
/* the dot pops in just behind its entry */
.io-anim .tl-item::before{transform:scale(.2);opacity:0;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;
  transition-delay:calc(var(--i,0) * 60ms + 120ms)}
.io-anim .tl-item.is-in::before{transform:scale(1);opacity:1}
/* The rail draws downward, tracking scroll through the section. The transform
   only applies once press.js has set an initial value and added .rail-anim —
   otherwise the rail renders normally, so a script failure can't erase it. */
.io-anim .tl-wrap.rail-anim::before{transform:scaleY(var(--rail,1));
  transform-origin:top center;will-change:transform}

@media(prefers-reduced-motion:reduce){
  .io-anim .snake .pe,.io-anim .gen{opacity:1;transform:none;transition:none}
  .io-anim .tl-item{opacity:1;transform:none;transition:none}
  .io-anim .tl-item::before{transform:scale(1);opacity:1;transition:none}
  .io-anim .tl-wrap::before{transform:none}
  .hz-hint span{animation:none}
  .hz-track .pe:hover .pe-card{transform:none}
}

@media(max-width:640px){
  .gen{padding-left:1.9rem}
  .snake{margin-left:1.9rem;grid-template-columns:1fr;gap:.9rem}
  .gen h3{font-size:1.25rem}
}