/* RuhrLogik, Brand v0.1. Kreideweiß als Grund, Schwarzgrau und Ziegelrot als Kontrast, weiche Formen.
   Ziegelrot #B84839 auf dunklem Grund nur für Flächen, Linien und große Schrift.
   Bewegung nur über transform und opacity. Pause-Schalter und prefers-reduced-motion schalten alles ab. */

@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/montserrat-latin-variable.woff2") format("woff2")}

:root{
  --ink:#1F2326;--ink-2:#292E32;--ink-3:#353B40;--ink-4:#474E54;
  --brick:#8B2F23;--lit:#B84839;--lit-text:#D4614C;
  --chalk:#F5F1EA;--chalk-2:#E8E2D7;--card-light:#FBF8F3;
  --steel:#A7A7A5;--soft:#D3CFC7;
  --r:22px;--r-sm:14px;--r-pill:999px;
  --wrap:1120px;--gut:clamp(20px,4.5vw,56px);
  --ease:cubic-bezier(.22,1,.36,1);
  /* Standard: heller Grund */
  --bg:var(--chalk);--fg:#1F2326;--fg-soft:#3D4448;--card:var(--card-light);--line:rgba(31,35,38,.14);--accent:var(--brick);
  --shadow:0 1px 2px rgba(31,35,38,.06),0 18px 40px -22px rgba(31,35,38,.3);
}
.dark,.hero,.footer,.top{--bg:var(--ink);--fg:var(--chalk);--fg-soft:var(--soft);--card:var(--ink-2);--line:rgba(245,241,234,.16);--accent:var(--chalk);--shadow:none}
.band-brick{--bg:var(--brick);--fg:var(--chalk);--fg-soft:#EDE3DA;--accent:var(--chalk)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;background:var(--ink)}
body{margin:0;background:var(--chalk);color:var(--fg);font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;accent-color:var(--lit);caret-color:var(--lit-text)}
::selection{background:var(--lit);color:var(--chalk)}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:.22em;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--fg);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0 0 1em;max-width:62ch}
ul,ol{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--chalk);color:var(--ink);padding:10px 16px;font-weight:700;z-index:90;border-radius:10px}
.skip:focus{left:8px}
svg.ic{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.motionbar{background:var(--ink);padding:5px var(--gut);text-align:right;font-size:12px;font-weight:500;color:var(--steel)}
.motionbar label{cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.ruhr:has(#motion-pause:checked) *,.ruhr:has(#motion-pause:checked) *::before,.ruhr:has(#motion-pause:checked) *::after{animation:none!important;transition:none!important}
.ruhr:has(#motion-pause:checked) .reveal{opacity:1!important;transform:none!important}

/* Kopf */
.top{position:sticky;top:0;z-index:60;background:rgba(31,35,38,.95);color:var(--chalk);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.top .wrap{display:flex;align-items:center;gap:20px;height:72px}
.brandmark{display:inline-flex;align-items:center;color:var(--chalk);text-decoration:none;line-height:1;white-space:nowrap}
.brandmark img{height:54px;width:auto}
.topnav{display:flex;gap:2px;margin-left:auto}
.topnav a{color:var(--soft);text-decoration:none;font-weight:600;font-size:15px;padding:12px 14px;border-radius:var(--r-pill);white-space:nowrap}
.topnav a:hover{color:var(--ink);background:var(--chalk)}
.hdr-social{display:flex;gap:8px}
.round{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ink-3);color:var(--chalk);font-size:21px;text-decoration:none}
.round:hover{background:var(--chalk);color:var(--ink)}

/* Knöpfe: rund, klare Fläche, Symbol im Kreis, zweite Zeile für Details */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;padding:6px 6px 6px 26px;border-radius:var(--r-pill);background:var(--lit);color:var(--chalk);font:inherit;font-weight:800;font-size:19px;line-height:1.2;text-decoration:none;border:0;cursor:pointer;text-align:left;transition:transform .25s var(--ease)}
.btn small{display:block;margin-top:2px;font-size:13px;font-weight:600;opacity:.92}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--chalk);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.btn .i{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:var(--chalk);color:var(--ink);font-size:22px}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:scaleX(1)}
.btn:hover .i{background:var(--ink);color:var(--chalk)}
.btn:active{transform:scale(.98)}
.btn.sm{min-height:50px;font-size:15px;padding:4px 4px 4px 20px;background:var(--brick)}
.btn.sm .i{width:42px;height:42px;font-size:18px}
.btn.big{min-height:76px;font-size:clamp(18px,2vw,21px);padding-left:30px}
.btn.big .i{width:64px;height:64px;font-size:26px}
.btn.on-light{background:var(--ink);color:var(--chalk)}
.btn.on-light::before{background:var(--lit)}
.btn.on-light .i{background:var(--lit);color:var(--chalk)}
.btn.on-light:hover{color:var(--chalk)}
.btn.on-light:hover .i{background:var(--chalk);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--chalk);box-shadow:inset 0 0 0 2px var(--steel)}
.btn.ghost .i{background:var(--ink-3);color:var(--chalk)}
.btn.ghost:hover{color:var(--ink);box-shadow:inset 0 0 0 2px var(--chalk)}
.btn.ghost:hover .i{background:var(--ink);color:var(--chalk)}
.btn.outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.outline::before{background:var(--ink)}
.btn.outline .i{background:var(--ink);color:var(--chalk)}
.btn.outline:hover{color:var(--chalk)}
.btn.outline:hover .i{background:var(--chalk);color:var(--ink)}
.btn.shine::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;background:rgba(245,241,234,.22);transform:translateX(-160%) skewX(-18deg);animation:shine 6s 2.5s var(--ease) infinite;pointer-events:none}
@keyframes shine{0%{transform:translateX(-160%) skewX(-18deg)}22%,100%{transform:translateX(420%) skewX(-18deg)}}

/* Profile: Instagram, Google Maps, Bewertung. Helle Knöpfe mit rotem Symbol, nicht zu übersehen. */
.profiles{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px}
.profiles-label{flex-basis:100%;margin:0 0 2px;font-weight:700;font-size:14px;color:var(--fg-soft)}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 8px;border-radius:var(--r-pill);background:var(--chalk);color:var(--ink);font-weight:800;font-size:15.5px;text-decoration:none;transition:transform .25s var(--ease)}
.pill svg{display:block;width:38px;height:38px;padding:9px;border-radius:50%;background:var(--lit);color:var(--chalk)}
.pill:hover{transform:translateY(-2px)}
.light .pill,.finale .pill{background:var(--ink);color:var(--chalk)}

/* Abschnitte */
.section{padding:clamp(60px,7.5vw,108px) 0}
.section.soft{background:var(--chalk-2)}
.section.dark{background:var(--ink);color:var(--chalk)}
.section h2{font-size:clamp(30px,4.2vw,52px);margin-bottom:16px;max-width:22ch}
.lede{font-size:clamp(18px,1.7vw,21px);color:var(--fg-soft);max-width:58ch}
.sub{font-size:15px;color:var(--fg-soft)}
.fine{font-size:14px;color:var(--fg-soft);margin-top:28px;max-width:70ch}
.closer{font-weight:800;font-size:clamp(20px,2.4vw,28px);line-height:1.25;margin:36px 0 0;max-width:30ch;padding-left:20px;border-left:6px solid var(--lit);border-radius:3px}
.kick{display:inline-block;margin:0 0 14px;padding:6px 14px;border-radius:var(--r-pill);background:rgba(184,72,57,.14);font-weight:700;font-size:14px;color:var(--accent);max-width:none}
.dark .kick,.hero .kick{background:rgba(184,72,57,.22)}
.band-brick .kick{background:rgba(245,241,234,.18);color:var(--chalk)}
.ico{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--lit);color:var(--chalk);font-size:24px;flex:none}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--chalk);padding:clamp(40px,5vw,72px) 0 0}
/* Revier am Horizont: Fördergerüst, Zeche und Schlote aus dem Hauptlogo auf einer Ziegelrot-Linie, dahinter Glut */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 38% at 76% 100%,rgba(139,47,35,.55),rgba(139,47,35,0) 72%)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(36px,4.5vw,58px);line-height:1.04;letter-spacing:-.03em;margin-bottom:22px}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .ln>span{display:block;animation:rise 1s var(--ease) both}
.hero h1 .ln:nth-child(2)>span{animation-delay:.14s;color:var(--lit-text)}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero .lede{margin-bottom:28px;max-width:30em;color:var(--chalk)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:640px;animation:fade .9s .35s var(--ease) both}
.actions .btn:first-child{grid-column:1/-1}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero .profiles{animation:fade .9s .5s var(--ease) both}
.hero-portrait{margin:0;position:relative;justify-self:center;width:min(100%,440px)}
.hero-portrait::before{content:"";position:absolute;z-index:0;right:-6%;bottom:-6%;width:74%;aspect-ratio:1;border-radius:50%;background:var(--brick)}
.hero-portrait img{position:relative;z-index:1;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%;border-radius:var(--r);animation:fade 1s .2s var(--ease) both}
.hero-portrait figcaption{position:absolute;z-index:2;left:0;bottom:0;padding:34px 22px 16px;width:100%;border-radius:0 0 var(--r) var(--r);background:linear-gradient(180deg,rgba(31,35,38,0),rgba(31,35,38,.88));font-size:14px;line-height:1.3;color:var(--soft)}
.hero-portrait figcaption b{display:block;color:var(--chalk);font-size:17px}
.horizon{position:relative;z-index:1;height:clamp(150px,27vw,340px);margin-top:clamp(28px,4vw,52px);background:url("/brand/skyline-hell.webp") right 6% bottom 0/auto 100% no-repeat;animation:fade 1.4s .3s var(--ease) both}
.horizon::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,rgba(184,72,57,0),var(--lit) 22%,var(--lit) 78%,rgba(184,72,57,0))}

/* Hier findest du mich: ziegelrotes Band, große Karten */
.band{padding:clamp(52px,6vw,84px) 0;background:var(--brick);color:var(--chalk)}
.band h2{max-width:none;font-size:clamp(28px,3.8vw,46px)}
.band .lede{color:#EDE3DA}
.social{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.s-card{display:flex;flex-direction:column;gap:6px;padding:26px;border-radius:var(--r);background:var(--chalk);color:var(--ink);text-decoration:none;box-shadow:0 18px 40px -22px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.s-card:hover{transform:translateY(-4px)}
.s-card .ico{width:60px;height:60px;font-size:28px;margin-bottom:10px;background:var(--brick)}
.s-card h3{font-size:22px}
.s-card p{margin:0 0 10px;color:#3D4448;font-size:15.5px}
.s-card .go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;min-height:48px;font-weight:800;color:var(--brick)}
.s-card .go svg{transition:transform .3s var(--ease)}
.s-card:hover .go svg{transform:translateX(4px)}

/* Kennst du das */
.problems{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.problems li{display:flex;flex-direction:column;gap:18px;background:var(--card);border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.problems p{margin:0;font-size:17px}

/* Drei Angebote */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px;align-items:stretch}
.offer{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);padding:30px;box-shadow:var(--shadow)}
.offer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;min-height:54px}
.offer .tag{margin:0;padding:6px 14px;border-radius:var(--r-pill);background:var(--lit);color:var(--chalk);font-weight:800;font-size:13px}
.offer h3{font-size:26px;margin-bottom:10px}
.offer-lead{font-weight:700;font-size:17px}
.ticks{display:grid;gap:10px;margin:6px 0 16px}
.ticks li{position:relative;padding-left:28px;color:var(--fg-soft);font-size:15.5px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.28em;width:17px;height:17px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10-10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10-10'/%3E%3C/svg%3E") center/contain no-repeat}
.ticks b{color:var(--fg)}
.more{margin:auto 0 14px;font-weight:700;font-size:15px}
.textlink{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-weight:800;font-size:15.5px;color:var(--fg);text-decoration:none;border-top:2px solid var(--line);padding-top:12px}
.textlink svg{color:var(--accent);transition:transform .3s var(--ease)}
.textlink:hover{color:var(--accent)}
.textlink:hover svg{transform:translateX(4px)}

/* Beispiele */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chip{min-height:48px;padding:0 22px;border-radius:var(--r-pill);background:transparent;box-shadow:inset 0 0 0 2px var(--line);color:var(--fg);font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.chip:hover{box-shadow:inset 0 0 0 2px var(--fg)}
.chip[aria-pressed=true]{background:var(--chalk);color:var(--ink);box-shadow:inset 0 0 0 2px var(--chalk)}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px}
.case{background:var(--card);border-radius:var(--r);padding:28px}
.case-tag{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-weight:700;font-size:14px;color:var(--accent)}
.case h3{font-size:22px;margin-bottom:10px}
.case>p:not(.case-tag){color:var(--fg-soft);font-size:15.5px;margin-bottom:22px}
.flow{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);gap:6px;align-items:start}
.flow li{font-size:13px;line-height:1.35;color:var(--fg-soft)}
.flow li b{display:block;margin:10px 0 2px;color:var(--fg);font-size:14px}
.flow .node{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--ink-3);color:var(--chalk);font-size:22px}
.flow .node.warn{background:transparent;color:var(--lit-text);box-shadow:inset 0 0 0 2px var(--lit)}
.flow .out .node{background:var(--lit);color:var(--chalk)}
.flow .arrow{display:grid;place-items:center;height:50px;color:var(--lit-text);font-size:22px}
.cta-row{margin-top:32px}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px;counter-reset:s}
.steps li{counter-increment:s;background:var(--card);border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--lit);color:var(--chalk);font-weight:800;font-size:24px;margin-bottom:16px}
.steps h3{font-size:22px;margin-bottom:8px}
.steps p{margin:0;color:var(--fg-soft);font-size:16px}

/* Über mich */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,80px);align-items:center}
.about-photo{position:relative}
.about-photo::before{content:"";position:absolute;z-index:0;left:-5%;bottom:-5%;width:70%;aspect-ratio:1;border-radius:50%;background:var(--lit);opacity:.9}
.about-photo img{position:relative;z-index:1;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 25%;border-radius:var(--r)}
.about-text h2{font-size:clamp(30px,4vw,48px);margin-bottom:16px}
.about-text p{color:var(--fg-soft)}
.principles{margin:20px 0 0;display:grid;gap:10px}
.principles li{padding:16px 20px;border-radius:var(--r-sm);background:var(--card);font-size:16px;color:var(--fg-soft);box-shadow:var(--shadow)}
.principles b{display:block;color:var(--fg);font-size:17px}

/* Kontakt */
.finale .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,6vw,80px)}
.finale h2{font-size:clamp(32px,4.4vw,54px);line-height:1.04;max-width:15ch}
.finale .lede{margin:18px 0 26px}
.ways{display:grid;gap:12px;max-width:520px}
.ways .btn{width:100%}
.finale .profiles{margin-top:22px}
.finale .sub{margin:22px 0 0}
.finale form{background:var(--card-light);padding:clamp(24px,3vw,38px);border-radius:var(--r);align-self:start;box-shadow:var(--shadow)}
.finale form h3{font-size:24px;margin-bottom:6px}
.finale form label{display:block;font-weight:700;font-size:15px;margin-top:16px}
.finale form input,.finale form textarea{width:100%;margin-top:6px;padding:14px 18px;border:2px solid var(--chalk-2);border-radius:var(--r-sm);background:#fff;color:var(--ink);font:inherit;font-weight:400}
.finale form textarea{resize:vertical}
.finale form input:focus,.finale form textarea:focus{outline:none;border-color:var(--lit)}
.finale form .btn{margin-top:22px;width:100%}
.formprivacy{font-size:14px;line-height:1.7;color:#3D4448;margin:16px 0 0}
.formhoneypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Revier-Wasserzeichen in hellen und dunklen Abschnitten */
.skyline{position:relative;overflow:hidden}
.skyline>.wrap{position:relative;z-index:1}
.skyline::after{content:"";position:absolute;z-index:0;pointer-events:none;right:-5%;bottom:0;width:min(880px,95vw);aspect-ratio:1600/739;background:url("/brand/skyline-dunkel.webp") center/contain no-repeat;opacity:.07}
.dark.skyline::after{background-image:url("/brand/skyline-hell.webp");opacity:.06}

/* Fuß */
.footer{position:relative;overflow:hidden;background:var(--ink);border-top:4px solid var(--lit);padding:48px 0 100px;color:var(--soft);font-size:15px}
.footer::after{content:"";position:absolute;z-index:0;pointer-events:none;right:-4%;bottom:-10%;width:min(620px,80vw);aspect-ratio:1600/739;background:url("/brand/skyline-hell.webp") center/contain no-repeat;opacity:.08}
.footer .wrap{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;gap:28px 48px;align-items:center}
.footer img{width:140px}
.footer p{margin:0 0 4px}
.footer small{color:var(--steel);font-size:13px}
.footer nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.footer a{color:var(--chalk);text-decoration-color:var(--lit);display:inline-flex;align-items:center;min-height:44px}

/* Handy: Termin und Anruf immer griffbereit */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;padding:10px var(--gut) max(10px,env(safe-area-inset-bottom));background:var(--ink);box-shadow:0 -1px 0 var(--ink-3);transform:translateY(110%);transition:transform .45s var(--ease)}
.dock.show{transform:none}
.dock .btn{min-height:56px;background:var(--brick)}
.dock .btn.ghost{background:transparent}
.dock .btn:first-child{flex:1}
.dock .btn.call{flex:none;padding:4px;min-height:56px}
.dock .btn.call .i{width:48px;height:48px}

/* Rechtsseiten, Danke */
.legal{padding:clamp(40px,6vw,88px) 0 clamp(64px,8vw,110px);background:var(--chalk);color:var(--ink)}
.legal a{color:var(--brick)}
.legal a:hover{color:var(--ink)}
.legal .back{display:inline-block;font-weight:700;margin-bottom:18px}
.legal-copy{max-width:780px}
.legal h1{font-size:clamp(34px,5vw,56px);margin-bottom:22px}
.legal-copy h2{font-size:clamp(22px,2.6vw,30px);margin:40px 0 12px}
.legal-copy h3{font-size:19px;margin:26px 0 8px;letter-spacing:-.01em}
.legal-copy h4{font-size:16px;margin:20px 0 6px}
.legal-copy p,.legal-copy li{color:#2A3034;overflow-wrap:anywhere;hyphens:auto}
.social-imprint{background:var(--chalk-2);padding:18px 20px;border-radius:var(--r-sm)}

/* Einblenden: 0,55 s, Verzögerung pro Karte über --d */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .45s ease-out,transform .55s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}
.js .case .arrow{opacity:0;transform:translateX(-8px);transition:opacity .4s ease-out,transform .5s var(--ease)}
.js .case.is-in .arrow{opacity:1;transform:none}
.js .case.is-in .arrow:nth-child(2){transition-delay:.35s}
.js .case.is-in .arrow:nth-child(4){transition-delay:.65s}

@media(max-width:1000px){
  .topnav{display:none}
  .top .wrap{justify-content:space-between}
  .hdr-social{margin-left:auto}
  .hero-grid{grid-template-columns:1fr}
  .hero-portrait{width:min(100%,380px);justify-self:start}
  .problems,.offers,.steps,.social{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr}
  .finale .wrap,.about{grid-template-columns:1fr}
  .about-photo{max-width:380px}
  .footer .wrap{grid-template-columns:1fr}
}
@media(max-width:720px){
  body{font-size:16px}
  .top .wrap{gap:10px}
  .hdr-social{display:none}
  .top .btn.sm .i{display:none}
  .top .btn.sm{padding:0 18px}
  .actions{grid-template-columns:1fr}
  .btn{min-height:64px}
  .hero-portrait{margin-right:10px}
  .about-photo{margin-left:10px}
  .flow{grid-template-columns:1fr;gap:0}
  .flow li:not(.arrow){display:grid;grid-template-columns:50px 1fr;column-gap:14px;align-items:center}
  .flow li b{margin:0 0 2px}
  .flow li .node{grid-row:1/3}
  .flow li b,.flow li{min-width:0}
  .flow .arrow{height:28px;width:50px}
  .flow .arrow svg{transform:rotate(90deg)}
  .js .case .arrow{transform:translateY(-6px)}
  .js .case.is-in .arrow{transform:none}
  .horizon{height:190px;background-position:center bottom}
  .dock{display:flex}
  .dock .btn{font-size:16px;padding-left:20px}
  .hero .btn,.finale .btn{font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .case .arrow{opacity:1;transform:none}
  .js .case .arrow{transform:none}
}