:root{
    --bg:#08090F; --bg-2:#0C0E17; --ink:#F3F4F2; --mute:#8b8f9c; --dim:#7c8296; /* --dim ≥4.5:1 auf --bg (WCAG AA) */
    --acc:#4B5BFF; --acc-hi:#8EA0FF; --warm:#F6ECD8; --line:rgba(255,255,255,.12);
    --gold:#E7CE9B; --gold-hi:#F4E4BC; /* warmes Champagner-Gold = „draußen leuchten" (edel) */
    --gut:clamp(20px,5vw,80px); --sans:'Inter',system-ui,sans-serif;
    --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
    --mono:ui-monospace,'SF Mono','Roboto Mono',Menlo,Consolas,monospace;
    --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{background:var(--bg); color:var(--ink); font-family:var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased}
  ::selection{background:var(--acc); color:#fff}
  a{color:inherit; text-decoration:none}
  :focus-visible{outline:2px solid var(--acc-hi); outline-offset:3px}
  .wrap{max-width:1500px; margin:0 auto; padding-inline:var(--gut)}
  .mono{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute)}
  .mono b{color:var(--acc-hi); font-weight:500}
  main,header{position:relative; z-index:2}

  html{scroll-padding-top:84px}
  header{position:fixed; inset:0 0 auto 0; z-index:50; transition:background .35s,border-color .35s; border-bottom:1px solid transparent}
  header.solid{background:rgba(8,9,15,.86); backdrop-filter:blur(8px); border-color:var(--line)}
  .nav{display:flex; align-items:center; justify-content:space-between; height:74px}
  .brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:18px; letter-spacing:-.01em}
  .brand__logo{height:25px; width:auto; display:block}
  .nav__l{display:flex; gap:32px; align-items:center; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
  .nav__l a{color:var(--mute); transition:color .2s} .nav__l a:hover{color:var(--ink)}
  .cta{position:relative; display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:14px; color:#fff; background:var(--acc); padding:12px 20px; border-radius:2px; overflow:hidden; isolation:isolate}
  .cta::before{content:""; position:absolute; inset:0; background:var(--ink); transform:translateY(101%); transition:transform .4s cubic-bezier(.2,.8,.2,1); z-index:-1}
  .cta:hover{color:var(--bg)} .cta:hover::before{transform:translateY(0)}
  .ghost{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:14px; color:var(--ink); border:1px solid rgba(255,255,255,.35); padding:12px 20px; border-radius:2px; transition:.25s; backdrop-filter:blur(3px)}
  .ghost:hover{border-color:var(--ink); background:var(--ink); color:var(--bg)}
  .cta--big{padding:16px 28px; font-size:15px; border-radius:3px}
  /* Neon-CTA (Hero) — leuchtender Cobalt-Button */
  .cta--neon{border-radius:100px; border:1px solid rgba(142,160,255,.7); background:linear-gradient(180deg,#5f7dff,#4657f5); box-shadow:0 8px 30px -8px rgba(75,91,255,.7), 0 0 22px rgba(91,123,255,.5), inset 0 0 12px rgba(174,190,255,.3); animation:neonPulse 3.2s ease-in-out infinite}
  .cta--neon::before{display:none}
  .cta--neon:hover{color:#fff; transform:translateY(-2px); animation:none; box-shadow:0 14px 44px -8px rgba(75,91,255,.95), 0 0 46px rgba(120,150,255,.75), inset 0 0 18px rgba(174,190,255,.45)}
  @keyframes neonPulse{0%,100%{box-shadow:0 8px 30px -8px rgba(75,91,255,.64), 0 0 20px rgba(91,123,255,.4), inset 0 0 12px rgba(174,190,255,.26)}50%{box-shadow:0 10px 36px -8px rgba(75,91,255,.86), 0 0 36px rgba(120,150,255,.7), inset 0 0 16px rgba(174,190,255,.42)}}
  /* Glas-CTA (Hero-Sekundär) — dezenter Pill neben dem Neon */
  .ghost--glass{border-radius:100px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06); backdrop-filter:blur(8px); box-shadow:0 6px 22px -10px rgba(0,0,0,.6)}
  .ghost--glass:hover{border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.14); color:#fff}
  @media(prefers-reduced-motion:reduce){ .cta--neon{animation:none} }
  @media(max-width:860px){ .nav__l{display:none} }
  /* Skip-Link (Tastatur/Screenreader) */
  .skip{position:fixed; left:12px; top:10px; z-index:60; background:var(--acc); color:#fff; padding:10px 16px; border-radius:3px; font-size:14px; font-weight:600; transform:translateY(-160%); transition:transform .2s}
  .skip:focus{transform:none}
  /* Hamburger + Mobil-Menü */
  .nav__burger{display:none; width:44px; height:44px; flex-direction:column; gap:5px; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; padding:0}
  .nav__burger span{width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s}
  .nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  @media(max-width:860px){ .nav__burger{display:flex} }
  .navmenu{position:fixed; inset:0; z-index:45; background:rgba(8,9,15,.98); backdrop-filter:blur(6px); display:flex; flex-direction:column; justify-content:center; gap:26px; padding:var(--gut); opacity:0; visibility:hidden; transition:opacity .3s}
  .navmenu.is-open{opacity:1; visibility:visible}
  .navmenu__nav{display:flex; flex-direction:column; gap:6px}
  .navmenu__nav a{font-family:var(--serif); font-size:clamp(2.2rem,10vw,3.4rem); line-height:1.1; color:var(--ink); transition:color .2s}
  .navmenu__nav a:hover,.navmenu__nav a:focus-visible{color:var(--gold)}
  .navmenu__cta{align-self:flex-start; margin-top:14px}
  @media(min-width:861px){ .navmenu{display:none} }

  /* HERO — Vollbild-Video (echtes Frankfurt bei Nacht), Apple-Komposition: zentriert, edel, ruhig */
  .hero{position:relative; overflow:hidden; height:100svh; min-height:600px; max-height:1080px; background:#04050a}
  .hero__v{position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center 42%}
  /* Scrim: obere Turmspitzen bleiben klar, ab ~40% abwärts (hinter der Typo) zunehmend dunkel → Text lesbar */
  .hero__scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(4,5,10,.5) 0%, rgba(4,5,10,.08) 16%, rgba(4,5,10,0) 32%, rgba(4,5,10,.4) 47%, rgba(4,5,10,.74) 67%, rgba(4,5,10,.96) 100%)}
  .grain{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  /* zentriert horizontal, unten verankert — Text sitzt unter der Skyline (stört sie nicht) */
  .hero__ui{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center;
    gap:clamp(13px,1.8vw,20px); padding:calc(74px + 16px) var(--gut) clamp(52px,10vh,120px)}
  .hero__eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--warm); text-shadow:0 1px 14px rgba(4,5,10,.9)}
  .hero__eyebrow b{color:var(--acc-hi); font-weight:600}
  .hero__h1{font-family:var(--serif); font-weight:400; letter-spacing:-.015em; line-height:1.0; font-size:clamp(3rem,6.5vw,6.2rem); text-wrap:balance; text-shadow:0 2px 44px rgba(4,5,10,.85)}
  .hero__h1 .acc{color:var(--acc-hi); font-style:italic}
  .hero__h1 .warm{color:var(--gold); font-style:italic; text-shadow:0 0 34px rgba(231,206,155,.5), 0 0 80px rgba(231,206,155,.26)}
  .hero__lead{max-width:32ch; font-size:clamp(1.1rem,1.5vw,1.4rem); line-height:1.42; color:#e9ebf3; text-shadow:0 1px 18px rgba(4,5,10,.8)}
  .hero__ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:6px}
  /* iOS-Stromsparmodus blockiert Autoplay und legt einen Play-Button aufs Video —
     ausblenden, dann steht sauber das Poster; hero-fx.js startet bei der ersten Geste */
  .hero__v::-webkit-media-controls-start-playback-button{display:none!important; -webkit-appearance:none}
  .hero__v::-webkit-media-controls{display:none!important}
  /* Solange die Consent-Notice sichtbar ist, weicht der unten verankerte Hero-Inhalt ihr aus
     (Browser ohne :has ignorieren die Regel — dann gilt das bisherige Verhalten) */
  body:has(.cookie-notice:not(.cookie-modal-notice)) .hero__ui{padding-bottom:180px}
  @media(min-width:768px){ body:has(.cookie-notice:not(.cookie-modal-notice)) .hero__ui{padding-bottom:130px} }

  @media(max-width:720px){
    .hero__ui{padding-bottom:clamp(40px,7vh,80px)}
    .hero__h1{font-size:clamp(2.9rem,13vw,4.4rem)}
    .hero__lead{max-width:26ch}
    /* CTAs gestapelt + volle Breite statt zwei gequetschte Buttons nebeneinander */
    .hero__ctas{width:100%; flex-direction:column; gap:10px}
    .hero__ctas .cta, .hero__ctas .ghost{width:100%; justify-content:center; min-height:52px; font-size:16px}
    .nav .cta{min-height:44px}
  }
  /* Handy: Header entrümpeln — Logo + Menü reichen; der CTA sitzt im Burger-Menü und prominent in der Hero */
  @media(max-width:600px){ .nav .cta{display:none} }

  /* MARQUEE */
  .marq{border-block:1px solid var(--line); overflow:hidden; padding:15px 0; background:var(--bg-2)}
  .marq__t{display:flex; width:max-content; will-change:transform}
  /* Fein & getrackt statt Standard-Fett; Punkt mittig zwischen zwei Wörtern (gleicher Abstand links/rechts) */
  .marq__t span{font-weight:400; font-size:clamp(1.05rem,1.6vw,1.4rem); letter-spacing:.2em; text-transform:uppercase; display:inline-flex; align-items:center; white-space:nowrap; color:#C3CCE0; padding:0}
  .marq__t span::after{content:"·"; color:var(--acc); font-size:1em; letter-spacing:0; margin-left:calc(clamp(22px,3vw,44px) - .2em); margin-right:clamp(22px,3vw,44px); opacity:.85}

  /* PROBLEM — den Besucher abholen */
  .prob{padding:clamp(60px,10vw,130px) 0}
  .prob__eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:18px}
  .prob__h{font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:1.06; font-size:clamp(1.8rem,4.4vw,3.3rem); max-width:24ch}
  .prob__h .g{color:var(--gold); font-style:italic}
  .prob__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px); margin-top:clamp(34px,4.5vw,56px)}
  .prob__i{border-top:1px solid var(--line); padding-top:18px}
  .prob__i b{display:block; font-family:var(--mono); font-size:13px; color:var(--dim); margin-bottom:10px}
  .prob__i p{color:var(--mute); font-size:15.5px; line-height:1.5}
  .prob__turn{margin-top:clamp(30px,4vw,50px); font-size:clamp(1.05rem,1.6vw,1.35rem); color:var(--ink); max-width:56ch}
  .prob__turn .g{color:var(--gold)}

  /* ---------- Drei Einstiege (Kundenproblem → Lösung) ---------- */
  .paths{padding:clamp(40px,6vw,80px) 0 0}
  .paths__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  @media(max-width:640px){ .paths__grid{grid-template-columns:1fr} .path p{max-width:none} }
  .path{position:relative; display:block; padding:26px 46px 30px 24px; background:var(--bg-2); border:1px solid var(--line); border-radius:14px; transition:border-color .25s,transform .25s var(--ease-out)}
  .path:hover{border-color:rgba(255,255,255,.28); transform:translateY(-3px)}
  .path__q{display:block; color:var(--acc-hi); margin-bottom:14px}
  .path--warm .path__q{color:var(--gold)}
  .path h3{font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.4vw,1.9rem); line-height:1.12; margin-bottom:10px; text-wrap:balance}
  .path p{color:var(--mute); font-size:15px; line-height:1.55; max-width:34ch}
  .path__ar{position:absolute; top:22px; right:20px; color:var(--mute); transition:color .25s}
  .path:hover .path__ar{color:var(--ink)}
  @media(max-width:720px){ .prob__grid{grid-template-columns:1fr; gap:0} .prob__i{padding:16px 0} }

  /* PROZESS — So läuft's (Besucher zur Handlung führen) */
  .proc{padding:clamp(60px,9vw,120px) 0}
  .proc__steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px); margin-top:clamp(30px,4vw,50px)}
  .proc__step{border-top:2px solid var(--line); padding-top:20px; position:relative}
  .proc__step::before{content:""; position:absolute; top:-2px; left:0; width:38px; height:2px; background:var(--gold)}
  .proc__n{font-family:var(--serif); font-size:clamp(2rem,3vw,2.6rem); color:var(--gold); line-height:1; display:block; margin-bottom:14px}
  .proc__step h3{font-weight:700; font-size:1.15rem; letter-spacing:-.01em; margin-bottom:8px}
  .proc__step p{color:var(--mute); font-size:14.5px; line-height:1.55}
  @media(max-width:860px){ .proc__steps{grid-template-columns:repeat(2,1fr); gap:30px 18px} }
  @media(max-width:520px){ .proc__steps{grid-template-columns:1fr} }

  /* SERVICES */
  .svc{padding:clamp(70px,11vw,150px) 0 0}
  .sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(30px,4vw,52px)}
  .sec-head h2{font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:1; font-size:clamp(2rem,5.4vw,3.9rem)}
  .sec-head h2 .acc{color:var(--acc-hi); font-style:italic}
  .sec-head p{max-width:34ch; color:var(--mute); font-size:14.5px; line-height:1.55}
  /* Leistungs-Kacheln: gerahmte Karten — Bild oben, Label unten (Schritt für Schritt) */
  .work{display:flex; flex-direction:column; gap:clamp(14px,1.8vw,22px); margin-top:clamp(28px,4vw,50px); max-width:1180px; margin-inline:auto; padding-inline:var(--gut)}
  .svc-tile{display:block; border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden; background:var(--bg-2); transition:transform .45s cubic-bezier(.22,1,.36,1), border-color .3s}
  .svc-tile:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.22)}
  .svc-media{position:relative; aspect-ratio:16/8.2; overflow:hidden; background:#0e0f17}
  .svc-media img{width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .7s cubic-bezier(.22,1,.36,1)}
  .svc-tile:hover .svc-media img{transform:scale(1.045)}
  .svc-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 58%, rgba(8,9,15,.45))}
  /* Browser-Chrome für die Screen-Leistungen (Websites, Business, Shop) */
  .svc-chrome{position:absolute; top:0; left:0; right:0; z-index:3; height:40px; display:flex; align-items:center; gap:7px; padding:0 16px; background:rgba(8,9,15,.85); backdrop-filter:blur(6px); border-bottom:1px solid rgba(255,255,255,.08)}
  .svc-chrome i{width:9px; height:9px; border-radius:50%; background:#3a3d4d; flex:none}
  .svc-chrome span{margin-left:12px; font-family:var(--mono); font-size:12px; color:var(--mute); letter-spacing:.02em}
  .svc-tile--screen .svc-media img{margin-top:40px; height:calc(100% - 40px)}
  .svc-body{padding:22px clamp(20px,2.6vw,34px) 26px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 24px}
  .svc-cat{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; width:100%; color:var(--acc-hi); display:flex; align-items:center; gap:12px}
  .svc-cat::before{content:""; width:26px; height:1px; background:var(--acc)}
  .svc-tile--warm .svc-cat{color:var(--gold)}
  .svc-tile--warm .svc-cat::before{background:var(--gold)}
  .svc-t{font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,3.6vw,2.7rem); line-height:1.02; letter-spacing:-.01em; flex:1 1 auto}
  .svc-d{color:var(--mute); font-size:14.5px; line-height:1.5; flex:1 1 300px; max-width:46ch}
  .svc-ar{margin-left:auto; width:48px; height:48px; border:1px solid rgba(255,255,255,.28); border-radius:50%; display:grid; place-items:center; font-size:19px; color:#fff; flex:none; transition:.3s}
  .svc-tile:hover .svc-ar{transform:scale(1.08); background:var(--acc); border-color:var(--acc)}
  .svc-tile--warm:hover .svc-ar{background:var(--gold); border-color:var(--gold); color:var(--bg)}
  @media(max-width:640px){
    .svc-t{flex-basis:100%; font-size:clamp(1.55rem,7.5vw,2.1rem)}
    .svc-d{flex-basis:100%; max-width:none}
    /* „Wo willst du sichtbarer werden?": Überschrift + Text stapeln statt gequetscht nebeneinander */
    .sec-head{flex-direction:column; align-items:flex-start; gap:14px}
    .sec-head p{max-width:none}
  }

  .stmt{padding:clamp(40px,7vw,90px) 0}
  .stmt__inner{min-height:88svh; display:flex; align-items:center}
  .stmt__inner p{font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:1.04; font-size:clamp(2.1rem,7.5vw,6rem); max-width:18ch}
  .stmt__inner .w{display:inline-block; opacity:.12} .stmt__inner .w.acc{color:var(--acc)}
  /* Statement mobil: nicht gepinnt (pin nur >768px) → Reveal darf nie unter lesbar fallen + weniger Totraum */
  @media(max-width:768px){
    .stmt__inner{min-height:52svh}
    .stmt__inner .w{opacity:.45}
  }

  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,30px); border-top:1px solid var(--line); padding-top:clamp(40px,5vw,64px); margin-bottom:clamp(20px,3vw,40px)}
  .stat b{display:block; font-weight:900; font-size:clamp(2.4rem,5.5vw,4.4rem); letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
  .stat b i{color:var(--acc); font-style:normal}
  .stat span{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-top:12px; display:block}
  @media(max-width:720px){ .stats{grid-template-columns:repeat(2,1fr); gap:32px 16px} }

  /* BEWEIS — echte Kundenstimmen (Teaser) */
  .voices{padding:clamp(60px,9vw,120px) 0}
  .voices__link{color:var(--acc-hi); font-family:var(--sans); font-size:14px; font-weight:600; font-style:normal; text-transform:none; letter-spacing:0; display:inline-block; margin-top:12px; transition:color .25s}
  .voices__link:hover{color:var(--gold)}
  .voices__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(30px,4vw,50px)}
  .voice{border:1px solid var(--line); border-radius:14px; padding:28px; background:var(--bg-2); display:flex; flex-direction:column; gap:16px}
  .voice__stars{color:var(--gold); letter-spacing:3px; font-size:15px}
  .voice blockquote{font-size:16px; line-height:1.55; color:var(--ink)}
  .voice blockquote em{font-style:normal; color:var(--gold)}
  .voice figcaption{display:flex; align-items:center; gap:12px; margin-top:auto}
  .voice__av{width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:12.5px; font-weight:700; color:var(--bg); background:linear-gradient(135deg,var(--gold-hi),#B7975B)}
  .voice__who b{display:block; font-size:14.5px} .voice__who span{font-size:12.5px; color:var(--mute)}
  @media(max-width:1080px){ .voices__grid{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:640px){ .voices__grid{grid-template-columns:1fr} }

  /* FAQ — sichtbares Akkordeon (native details/summary) */
  .faq{padding:clamp(50px,8vw,110px) 0}
  .faq__list{margin-top:clamp(26px,3.5vw,44px); border-top:1px solid var(--line); max-width:940px}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{list-style:none; cursor:pointer; padding:22px 46px 22px 0; position:relative; font-family:var(--serif); font-weight:400; font-size:clamp(1.2rem,2.4vw,1.65rem); line-height:1.25; color:var(--ink); transition:color .2s}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+"; position:absolute; right:2px; top:24px; font-family:var(--sans); font-weight:300; font-size:26px; line-height:1; color:var(--gold); transition:transform .3s, color .2s}
  .faq summary:hover{color:var(--gold-hi)}
  .faq details[open] summary{color:var(--gold-hi)}
  .faq details[open] summary::after{content:"−"}
  .faq details p{padding:0 46px 26px 0; color:var(--mute); font-size:15.5px; line-height:1.65; max-width:80ch}

  .close{padding:clamp(80px,12vw,170px) 0}
  .close h2{font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:1; font-size:clamp(2.6rem,8.5vw,6.5rem)}
  .close h2 .acc{color:var(--acc)}
  .close__b{display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:clamp(30px,4vw,48px)}
  .close__b .mono{max-width:40ch; line-height:1.6; text-transform:none; letter-spacing:0; font-size:13px}
  footer{border-top:1px solid var(--line); padding:32px 0}
  .foot{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center}
  .foot .mono{color:var(--mute)} .foot .mono b{color:var(--ink)}
  .foot a{color:var(--mute); transition:color .2s} .foot a:hover{color:var(--ink)}
  @media(prefers-reduced-motion:reduce){
    .reel__s{transition:none}
    .reel--anim .reel__s.is-on{animation:none}
  }