/* =========================================================
   Kilian Einig
   Schwarz und Weiß, keine Akzentfarbe. Tiefe entsteht nur aus Schriftgröße und Abstand.
   Eine Schrift: Space Grotesk (lokal, SIL OFL). Das Logo ist die Kerbe.
   ========================================================= */
@font-face{font-family:'Space Grotesk';src:url(../fonts/SpaceGrotesk-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(../fonts/SpaceGrotesk-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(../fonts/SpaceGrotesk-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(../fonts/SpaceGrotesk-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  color-scheme:light;
  --paper:#FAFAFA;      /* Grund */
  --ink:#141414;        /* Schrift, Flächen, Logo */
  --surface:#F0F0F0;    /* Bildgrund vor dem Laden */
  --graphite:#4A4A4A;   /* Fließtext zweite Ebene */
  --stone:#6B6B6B;      /* gedämpfte Labels, 5:1 auf Grund */
  --rule:#E0E0E0;       /* Haarlinien */
  --mist:var(--surface);
  --stage:#141414; --on-stage:#FAFAFA; --on-stage-dim:#A3A3A3;
  --sans:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:var(--sans);
  --fs-hero:clamp(56px,8vw,128px);
  --fs-h2:clamp(36px,4.6vw,72px);
  --fs-row:clamp(28px,3.2vw,48px);
  --fs-lead:clamp(19px,1.6vw,24px);
  --fs-body:17px; --fs-small:15px; --fs-meta:11px;
  --gutter:max(16px,4vw); --max:1440px;
  --space-m:clamp(32px,4vw,56px); --space-l:clamp(88px,10vw,160px);
  --ease:cubic-bezier(.16,1,.3,1); --t-ui:200ms;
  --header-h:72px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
html.lenis{scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:30}
.skip:focus{left:8px}
.label,.meta{font:500 var(--fs-meta)/1.4 var(--sans);text-transform:uppercase;letter-spacing:.15em}
.muted{color:var(--stone)}

/* ---------- Kopfleiste ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;transition:background 300ms var(--ease),border-color 300ms var(--ease);border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(250,250,250,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--rule)}
body:not([data-page="home"]) .nav{position:sticky;background:rgba(250,250,250,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav-in{height:var(--header-h);display:flex;align-items:center;gap:clamp(16px,3vw,40px)}
.brand{display:inline-flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none;font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:14px;min-height:44px}
.brand svg{height:24px;width:auto;fill:currentColor;flex:none}
.links ul{display:flex;gap:clamp(16px,2.4vw,36px);list-style:none;margin:0;padding:0}
.links a{position:relative;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.15em}
.links a::after{content:"";position:absolute;left:0;right:.15em;bottom:12px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--ease)}
.links a:hover::after,.links a[aria-current]::after{transform:scaleX(1)}
@media (max-width:860px){.nav .links li:not(:first-child):not(:last-child){display:none}.nav-in{gap:20px}}
@media (max-width:420px){.brand{letter-spacing:.14em;font-size:12px;gap:10px}.brand svg{height:20px}.nav-in{gap:16px}}

/* ---------- Auftakt ----------
   Bild unter der Kopfleiste, darunter Überschrift und Kerbe auf einer Linie. Alles passt in den ersten Bildschirm. */
.hero{min-height:100svh;display:flex;flex-direction:column;padding-top:var(--header-h)}
.hero-img{position:relative;flex:1 1 auto;min-height:280px;max-height:70svh;background:var(--paper);overflow:hidden}
/* Auftakt: groß nur das Logo, das sich von der Mitte aus öffnet. Der Name steht schon in der Kopfzeile. */
.hero-img{display:grid;place-items:center}
.hero-mark{height:clamp(150px,46svh,440px);width:auto;fill:var(--ink)}
.hero-pause{position:absolute;z-index:2;right:max(var(--gutter),env(safe-area-inset-right,0px));bottom:16px;min-height:44px;padding:0 14px;border:1px solid var(--ink);background:var(--paper);cursor:pointer}
.hero-pause:hover{background:var(--ink);color:var(--paper)}
@keyframes settle{from{transform:scale(1.06)}}
.hero-body{display:flex;align-items:stretch;justify-content:space-between;gap:24px;padding-top:clamp(16px,2vw,24px);padding-bottom:clamp(28px,4vw,56px);width:100%}
.hero-copy{min-width:0;display:flex;flex-direction:column}
.hero .label{margin:0}
.hero h1{margin:14px 0 0 -.04em;font-size:clamp(56px,7.4vw,128px);font-weight:700;letter-spacing:-.045em;line-height:.9}
.hero h1 .ln{display:inline-block;margin-right:.22em}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(20px,2.4vw,32px)}
@media (max-width:760px){
  .hero{min-height:0}
  .hero-img{flex:none;height:46svh;max-height:none}
  .hero-mark{height:min(30svh,64vw)}
  .hero h1 .ln{display:block}
}

.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:500;font-size:15px;letter-spacing:.01em;transition:background var(--t-ui),color var(--t-ui)}
.btn:hover{background:#333}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{background:#dcdcdc}
.tlink{display:inline-flex;align-items:center;min-height:44px;font-size:15px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.tlink:hover{text-decoration-thickness:2px}

/* ---------- Abschnitte ---------- */
.sec{padding-block:var(--space-l) 0}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin-bottom:var(--space-m)}
.sec-head h2,.rule-title{margin:0;font-size:var(--fs-h2);font-weight:700;letter-spacing:-.035em;line-height:1}
.count{margin:0;font-size:var(--fs-lead);font-weight:300}
a.count{font-weight:400}
.rule-title{border-top:1px solid var(--rule);padding-top:20px;margin-bottom:var(--space-m)}

/* ---------- Projekte auf der Startseite: groß, eins nach dem anderen ---------- */
.stack{display:flex;flex-direction:column;gap:clamp(72px,9vw,140px)}
.big{display:block;text-decoration:none}
.big-ph{position:relative;overflow:hidden;background:var(--surface);aspect-ratio:3 / 2;width:min(100%,calc(78svh * 1.5))}
.big-ph img{width:100%;height:100%;transition:transform 900ms var(--ease)}
.big:hover .big-ph img{transform:scale(1.03)}
.big-cap{display:grid;row-gap:6px;padding-top:18px;width:min(100%,calc(78svh * 1.5))}
.big-cap h3{margin:0;font-size:var(--fs-h2);font-weight:700;letter-spacing:-.04em;line-height:1}
.big-kurz{margin:0;font-weight:300;font-size:var(--fs-lead);color:var(--graphite)}
.big:hover h3{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}

/* ---------- Was ich mache: Titel und ein starker Satz ---------- */
.felder{list-style:none;margin:0;padding:0}
.feld{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px 32px;align-items:baseline;padding-block:clamp(28px,3vw,44px);border-bottom:1px solid var(--rule)}
.felder .feld:first-child{border-top:1px solid var(--rule)}
.feld h3{margin:0;font-size:var(--fs-row);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.feld-text{margin:0;font-size:var(--fs-lead);font-weight:300;line-height:1.3;max-width:34ch}
@media (max-width:760px){.feld{grid-template-columns:1fr}}

/* ---------- Über mich ---------- */
.quote{margin:0 auto var(--space-l);max-width:800px;text-align:center}
.quote p{margin:0;font-size:clamp(28px,3vw,48px);font-weight:300;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,80px);align-items:end}
.about figure{margin:0;background:var(--surface)}
.about figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:59% 30%;filter:grayscale(1)}
.about-copy h3{margin:0 0 16px;font-size:var(--fs-row);font-weight:700;letter-spacing:-.03em;line-height:1}
.about-copy p{margin:0 0 .8em;font-weight:300;font-size:var(--fs-lead);line-height:1.4;max-width:36ch}
.chips-title{margin:28px 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{border:1px solid var(--ink);padding:9px 14px}
@media (max-width:760px){.about{grid-template-columns:1fr}}

/* ---------- Projektübersicht ---------- */
.ov-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;padding-block:clamp(40px,6vw,88px) var(--space-m)}
.ov-head h1{margin:0;font-size:clamp(56px,9vw,148px);font-weight:700;letter-spacing:-.05em;line-height:.9}
.overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,56px) 24px;padding-bottom:var(--space-l)}
.tile{display:block;text-decoration:none;min-width:0}
.tile-ph{position:relative;aspect-ratio:3 / 2;overflow:hidden;background:var(--surface)}
.tile-ph img{width:100%;height:100%;transition:transform 700ms var(--ease)}
.tile:hover .tile-ph img{transform:scale(1.04)}
.tile-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:14px}
.tile-cap h2,.tile-cap h3{margin:0;font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.tile-cap .label{margin:0;white-space:nowrap}
.tile-kurz{margin:6px 0 0;font-weight:300;color:var(--graphite)}
.tile:hover h2,.tile:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:900px){.overview{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){#works.overview{grid-template-columns:1fr;gap:40px}#works .tile-cap{flex-direction:row;align-items:baseline}#works .tile-cap h3{font-size:22px}#works .tile-kurz{font-size:16px}
.overview{gap:28px 12px}.tile-cap{flex-direction:column;gap:4px;padding-top:10px}.tile-cap h2,.tile-cap h3{font-size:19px}.tile-kurz{font-size:14px}}

/* ---------- Kontakt ---------- */
.contact{background:var(--ink);color:var(--paper);padding-block:var(--space-l);margin-top:var(--space-l)}
.contact h2{margin:0;font-size:clamp(48px,6vw,96px);font-weight:700;letter-spacing:-.045em;line-height:.95}
.contact h2 .w{display:inline-block}
.contact-sub{margin:28px 0 36px;font-weight:300;font-size:var(--fs-lead);color:var(--on-stage-dim)}
.contact-links{display:flex;flex-wrap:wrap;gap:12px}
.btn-ghost{background:transparent;color:var(--paper);border:1px solid var(--paper);min-height:64px;padding:0 28px;font-size:clamp(18px,2vw,26px)}
.btn-ghost:hover{background:var(--paper);color:var(--ink)}
.contact .mail{min-height:64px;padding:0 28px;font-size:clamp(18px,2vw,26px);overflow-wrap:anywhere}
.contact :focus-visible{outline-color:var(--paper)}

/* ---------- Fuß ---------- */
.foot{background:var(--paper)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-block:28px 8px}
.foot .brand{margin-right:0}
.foot-line{margin:0 auto;padding-block:8px 28px}

/* ---------- Projektseite ---------- */
.pp-head{padding-block:clamp(24px,4vw,56px) var(--space-m)}
.pp-kurz{font-weight:300}
.back{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-small);color:var(--graphite);text-decoration:none}
.back:hover{color:var(--ink);text-decoration:underline}
.pp-title{margin:clamp(12px,2vw,24px) 0 0 -.04em;font-size:clamp(56px,11vw,176px);font-weight:700;letter-spacing:-.06em;line-height:.88;overflow:hidden;padding-bottom:.04em;overflow-wrap:anywhere}
.pp-title>span{display:inline-block}
.pp-kurz{margin:clamp(12px,2vw,24px) 0 0;font-size:var(--fs-lead);line-height:1.3;color:var(--graphite);max-width:40ch}
.pp-hero{margin:0;position:relative;background:var(--paper);overflow:hidden}
.pp-hero img{width:100%;max-height:86svh;object-fit:contain}
.pp-hero.light{background:var(--paper)}
.pp-hero.light img{object-fit:contain}
.blabel{position:absolute;left:12px;top:12px;background:var(--paper);padding:6px 8px;z-index:1}
.pp-body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--space-m) clamp(24px,5vw,80px);padding-block:var(--space-l);align-items:start}
.pp-body dl{margin:0}
.pp-body dl div{border-top:1px solid var(--ink);padding:10px 0 18px}
.pp-body dt{color:var(--stone)}
.pp-body dd{margin:4px 0 0;font-size:var(--fs-small);line-height:1.45}
.pp-body .txt p{margin:0 0 1em;max-width:62ch}
.pp-body .txt p:first-child{font-size:clamp(19px,1.6vw,23px);line-height:1.45;letter-spacing:-.01em}
.pp-body .hinweis{font-size:var(--fs-small);color:var(--graphite)}
@media (max-width:760px){.pp-body{grid-template-columns:1fr}.pp-body .txt{order:-1}}

.steps{list-style:none;margin:0 0 var(--space-l);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.steps li{min-width:0}
.steps img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--mist)}
.steps h3{margin:14px 0 6px;font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.025em;line-height:1.1}
.steps h3 span{font:400 var(--fs-meta)/1 var(--mono);color:var(--stone);margin-right:10px;vertical-align:middle}
.steps p{margin:0;font-size:var(--fs-small);color:var(--graphite);max-width:36ch}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:var(--space-m)}}

.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;padding-bottom:var(--space-l)}
.gal figure{margin:0;min-width:0}
.gal figure.wide{grid-column:1 / -1}
.gal button{display:block;width:100%;padding:0;border:0;background:var(--mist);cursor:zoom-in}
.gal img,.gal video{width:100%}
.gal figcaption{margin-top:10px;font-size:var(--fs-small);color:var(--stone)}
@media (max-width:760px){.gal{grid-template-columns:1fr}}

dialog.lb{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100svh;margin:0}
dialog.lb::backdrop{background:rgba(8,7,6,.94)}
dialog.lb[open]{display:grid;place-items:center}
dialog.lb img{max-width:min(94vw,1800px);max-height:84svh;width:auto;height:auto;object-fit:contain}
dialog.lb p{color:var(--on-stage-dim);margin:14px 16px 0;text-align:center}
dialog.lb .x{position:fixed;right:16px;top:16px;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--on-stage);background:transparent;color:var(--on-stage);cursor:pointer}
dialog.lb .x:focus-visible{outline-color:var(--on-stage)}

/* Bühne für die Licht-Projekte */
.stage-dark{background:var(--stage);color:var(--on-stage);position:relative;overflow:hidden}
.lamellen{height:clamp(360px,52vw,620px);touch-action:pan-y;cursor:crosshair;margin-bottom:var(--space-l)}
.lamellen canvas{position:absolute;inset:0;width:100%;height:100%}
.lamellen .hint{position:absolute;left:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,28px);margin:0;font-size:var(--fs-small);color:var(--on-stage-dim)}
.konfig{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:var(--stage);color:var(--on-stage)}
.konfig .view{position:relative;aspect-ratio:4/5;width:min(100%,calc(84svh * .8));justify-self:center}
.konfig canvas,.konfig .view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.konfig canvas{opacity:0;transition:opacity .8s}
.konfig.ready canvas{opacity:1}
.konfig.ready .view img{visibility:hidden}
.konfig .panel{padding:clamp(24px,3.4vw,48px);display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-width:0}
.konfig .ptitle{margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-.025em;line-height:1.15}
.konfig .psub{margin:10px 0 0;color:var(--on-stage-dim);font-size:var(--fs-small)}
.knobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 10px}
.kn{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.knob{position:relative;width:clamp(56px,6vw,80px);aspect-ratio:1;border-radius:50%;background:#1a1816;border:1px solid #3a3733;cursor:grab;touch-action:none}
.knob::before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f2f2f3,#a9abae 70%,#8e9093)}
.knob::after{content:"";position:absolute;left:calc(50% - 1.5px);top:16%;width:3px;height:26%;background:#111;transform-origin:50% 128%;transform:rotate(var(--rot,0deg))}
.knob:active{cursor:grabbing}
.knob:focus-visible{outline:2px solid var(--on-stage);outline-offset:4px}
.kn .lab{font-size:13px;line-height:1.25;color:#CFCAC2}
.kn output{font:400 12px/1 var(--mono);color:var(--on-stage-dim);display:flex;align-items:center;gap:6px;min-height:16px}
.kn.farbe output::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--swatch,#fff)}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.preset{min-height:44px;padding:0 14px;border:1px solid #3a3733;background:transparent;color:var(--on-stage);font-size:var(--fs-small);cursor:pointer;border-radius:999px;transition:border-color var(--t-ui),background var(--t-ui),color var(--t-ui)}
.preset:hover{border-color:#8C877F}
.preset[aria-pressed="true"]{background:var(--on-stage);color:var(--stage);border-color:var(--on-stage)}
.preset:focus-visible{outline:2px solid var(--on-stage);outline-offset:3px}
.konfig .note{margin:14px 0 0;font-size:13px;color:var(--on-stage-dim)}
@media (max-width:900px){.konfig{grid-template-columns:1fr}.konfig .view{width:100%}.knobs{gap:16px 6px}}

.next{display:block;border-top:1px solid var(--ink);padding:8px 0 var(--space-l);text-decoration:none}
.next span.meta{display:block;color:var(--stone)}
.next strong{display:inline-block;margin-top:12px;font-size:clamp(48px,9vw,148px);font-weight:700;letter-spacing:-.06em;line-height:.9}
.next strong span{display:inline-block;transition:transform 250ms var(--ease)}
.next:hover strong span{transform:translateX(.12em)}

/* Rechtliches */
.legal-page{padding-block:var(--space-m) var(--space-l)}
.legal-page h1{margin:0 0 var(--space-m);font-size:var(--fs-section);font-weight:500;letter-spacing:-.04em;line-height:1}
.legal-body{max-width:68ch}
.legal-body h2{font-size:20px;font-weight:500;letter-spacing:-.01em;margin:2em 0 .4em}


/* ---------- Bewegung ----------
   Auftakt: Bild steht sofort, Text steigt Zeile für Zeile auf, die Kerbe schneidet sich ein.
   Projekte blenden versetzt ein (nur Deckkraft), Kontakt-Überschrift wird Wort für Wort aufgedeckt.
   Seitenwechsel blendet über. Nichts davon bei reduzierter Bewegung. */
@media (prefers-reduced-motion:no-preference){
  .hero-mark{animation:markOpen 1500ms 200ms cubic-bezier(.76,0,.24,1) both}
  .hero .ln{animation:riseIn 1100ms var(--ease) both}
  .hero .ln:nth-child(1){animation-delay:1100ms}
  .hero .ln:nth-child(2){animation-delay:1220ms}
  .hero .ln:nth-child(3){animation-delay:1340ms}
  .pp-title>span{animation:lineUp 900ms 150ms var(--ease) both}
  .pp-kurz,.pp-head .back{animation:riseIn 700ms 400ms var(--ease) both}
  .konfig{animation:clipUp 1100ms 300ms var(--ease) both}
  .pp-hero{animation:fadeIn 900ms 250ms ease both}
  .pp-hero img{animation:settle 1600ms 250ms var(--ease) both}
  img{transition:opacity 600ms ease}
  img.ld{opacity:0}
  body{animation:fadeIn 400ms var(--ease) backwards}
  html.leaving body{opacity:0;transition:opacity 260ms var(--ease)}

  .anim .rv{opacity:0;transition:opacity 700ms ease;transition-delay:var(--d,0ms)}
  .anim .work.rv{transform:scale(.92);transition:opacity 450ms ease,transform 650ms var(--ease);transition-delay:var(--d,0ms)}
  .anim .work.rv.in{transform:none}
  .anim .rv.in{opacity:1}
  .anim .felder .rv,.anim .tile.rv,.anim .big.rv,.anim .pp-body.rv,.anim .gal .rv,.anim .next.rv{transform:translateY(20px);transition:opacity 700ms ease,transform 800ms var(--ease);transition-delay:var(--d,0ms)}
  .anim .felder .rv.in,.anim .tile.rv.in,.anim .big.rv.in,.anim .pp-body.rv.in,.anim .gal .rv.in,.anim .next.rv.in{transform:none}
  .anim .contact h2 .w{clip-path:inset(0 100% 0 0);transition:clip-path 600ms var(--ease);transition-delay:var(--d,0ms)}
  .anim .contact h2.in .w{clip-path:inset(0 0 0 0)}
}
@keyframes markOpen{from{clip-path:inset(50% 0 50% 0);transform:scale(1.06)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes settle{from{transform:scale(1.04)}}
@keyframes riseIn{from{opacity:0;transform:translateY(24px)}}
@keyframes lineUp{from{transform:translateY(105%)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes clipUp{from{clip-path:inset(30% 0 0 0);opacity:.4}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:0s!important}}