/* ===========================================================================
   I/S — Spanndecken & Lichtelemente
   Konzept: Beim Scrollen geht das Licht aus (weiß → nachtschwarz),
   die Lichtelemente gehen an. Warm-beiger Akzent (2 % Kakao).
   Steuervariable: --night 0 (Tag/hell) … 1 (Nacht/dunkel), von JS gesetzt.
   ========================================================================= */

:root{
  /* Neutralskala: warmes Weiß (2 % Kakao) → weiches Schwarz */
  --milk:      #f6f3ec;   /* sehr helles Beige-Weiß */
  --milk-2:    #eee9df;
  --paper:     #fbfaf5;
  --ash:       #d9d5cc;
  --gray:      #9d988d;
  --graphite:  #2a2823;   /* Karten im Dunkeln */
  --ink:       #141310;   /* weiches Schwarz (nicht #000) */
  --ink-deep:  #0b0a07;

  /* Lichtelement — warmweiße LED */
  --led:       #ffe7bd;
  --led-glow:  255,193,120;   /* rgb für rgba-Glow */

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --ease: cubic-bezier(.22,1,.36,1);

  /* Laufzeit-Variablen */
  --night: 0;
  /* interpolierte Flächen-/Textfarbe */
  --bg: color-mix(in oklab, var(--milk), var(--ink-deep) calc(var(--night) * 100%));
  --fg: color-mix(in oklab, var(--ink), var(--milk) calc(var(--night) * 100%));
  --fg-soft: color-mix(in oklab, var(--fg), transparent 42%);
  --hair: color-mix(in oklab, var(--fg), transparent 86%);
  /* Glut der Lichtelemente wächst mit der Dunkelheit */
  --lit: var(--night);
}

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--fg);
  font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .12s linear, color .12s linear;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
em{ font-style:italic; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

h1,h2,h3{ font-family:var(--font-display); font-weight:400; line-height:1.04; letter-spacing:-.015em; text-wrap:balance; }

/* ---------- Fortschritts-Glut oben ---------- */
.scrollglow{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120; transform-origin:0 50%;
  transform:scaleX(var(--night));
  background:linear-gradient(90deg, transparent, rgba(var(--led-glow),.9), #fff);
  box-shadow:0 0 18px rgba(var(--led-glow),.8);
  opacity:calc(.15 + var(--night)*.85);
}

/* ---------- Navigation ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s var(--ease), backdrop-filter .3s;
}
.nav.is-stuck{
  background:color-mix(in oklab, var(--bg), transparent 12%);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--hair);
}
.nav__row{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:20px; }
.brand__logo{ height:40px; width:auto; filter:invert(var(--night)); transition:filter .12s linear; }
.nav__links{ display:flex; align-items:center; gap:6px; }
.nav__links a{
  padding:9px 14px; font-size:.92rem; font-weight:500; color:var(--fg-soft);
  border-radius:100px; transition:color .2s, background .2s;
}
.nav__links a:hover{ color:var(--fg); }
.nav__cta{
  color:var(--ink) !important; background:var(--led);
  box-shadow:0 0 0 1px rgba(var(--led-glow),.4), 0 6px 24px -8px rgba(var(--led-glow),calc(.2 + var(--night)*.6));
}
.nav__cta:hover{ background:#fff !important; }
.nav__toggle{ display:none; width:44px; height:44px; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav__toggle span{ width:22px; height:2px; background:var(--fg); transition:.3s var(--ease); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:100px; font-weight:600; font-size:.95rem;
  letter-spacing:.01em; transition:transform .2s var(--ease), box-shadow .3s, background .2s; will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn--solid{
  background:var(--led); color:var(--ink);
  box-shadow:0 0 0 1px rgba(var(--led-glow),.35), 0 10px 40px -12px rgba(var(--led-glow),calc(.3 + var(--night)*.6));
}
.btn--solid:hover{ background:#fff; box-shadow:0 0 0 1px rgba(var(--led-glow),.6), 0 14px 50px -12px rgba(var(--led-glow),.7); }
.btn--ghost{ border:1px solid var(--hair); color:var(--fg); }
.btn--ghost:hover{ border-color:var(--fg-soft); }
.btn--block{ width:100%; }

.eyebrow{
  font-family:var(--font-body); font-size:.8rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--fg-soft);
}

/* ---------- Sektions-Grundlagen ---------- */
.section{ position:relative; padding:clamp(80px,12vw,150px) 0; }
.section__head{ max-width:640px; margin-bottom:56px; }
.section__head h2{ font-size:clamp(2rem,5vw,3.4rem); }
.section__head p{ color:var(--fg-soft); font-size:1.1rem; margin-top:14px; }

/* ===========================================================================
   HERO
   ========================================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero__grain{ position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(120% 80% at 70% -10%, rgba(var(--led-glow),.10), transparent 60%); }
.hero__inner{ position:relative; padding-top:90px; padding-bottom:120px; max-width:900px; }
.hero__title{ font-size:clamp(2.9rem,8.5vw,6rem); line-height:.98; letter-spacing:-.03em; margin-top:22px; }
.hero__title em{ color:transparent; -webkit-text-stroke:1px var(--fg); }
.hero__sub{ font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--fg-soft); max-width:56ch; margin-top:26px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.hero__scrollhint{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-soft);
}
.hero__scrollhint-b{ color:rgba(var(--led-glow),1); text-shadow:0 0 14px rgba(var(--led-glow),.7); }
.hero__scrollline{ width:1px; height:52px; background:linear-gradient(var(--fg-soft), rgba(var(--led-glow),1)); position:relative; overflow:hidden; }
.hero__scrollline::after{ content:''; position:absolute; top:-20px; left:0; width:1px; height:20px; background:#fff; animation:drop 1.8s var(--ease) infinite; }
@keyframes drop{ to{ transform:translateY(72px); } }

/* ===========================================================================
   KONZEPT — perspektivische Decke, die sich entzündet
   ========================================================================= */
.konzept{ position:relative; padding:clamp(60px,10vw,120px) 0 clamp(80px,12vw,150px); overflow:hidden; }
.ceiling{ position:relative; height:min(58vh,560px); margin-bottom:60px; }
.ceiling__svg{ position:absolute; inset:0; width:100%; height:100%; }
.ceiling__plane{ fill:color-mix(in oklab, var(--milk-2), var(--ink-deep) calc(var(--night)*100%)); transition:fill .12s linear; }
.led{
  stroke:var(--led); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 calc(3px + var(--lit)*20px) rgba(var(--led-glow),calc(.25 + var(--lit)*.75)));
  stroke-dasharray:1600; stroke-dashoffset:1600;
  opacity:calc(.25 + var(--lit)*.75);
}
.konzept.is-lit .led{ stroke-dashoffset:0; transition:stroke-dashoffset 1.8s var(--ease); }
.konzept.is-lit .led--2{ transition-delay:.15s; }
.konzept.is-lit .led--3{ transition-delay:.3s; }
.konzept.is-lit .led--4{ transition-delay:.5s; }
.ceiling__spots{ position:absolute; inset:0; }
.spot{
  position:absolute; left:var(--x); top:var(--y); width:7px; height:7px; border-radius:50%;
  background:#fff; opacity:0; transform:scale(.4);
  box-shadow:0 0 calc(6px + var(--lit)*16px) calc(1px + var(--lit)*4px) rgba(var(--led-glow),.9);
}
.konzept.is-lit .spot{ opacity:calc(.3 + var(--lit)*.7); transform:scale(1); transition:opacity 1s var(--ease) .6s, transform 1s var(--ease) .6s; }
/* Warm/Kühl-Zustand der Deckenlichter (anklickbar) */
.konzept.is-cool{ --led:#dbe8ff; --led-glow:176,202,255; }
.ceiling__toggle{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:3;
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:100px;
  font-family:var(--font-body); font-size:.8rem; letter-spacing:.02em;
  color:var(--fg); background:color-mix(in oklab, var(--bg), transparent 22%);
  backdrop-filter:blur(8px); border:1px solid var(--hair);
  box-shadow:0 0 20px rgba(var(--led-glow),calc(.15 + var(--lit)*.5)); transition:.25s var(--ease);
}
.ceiling__toggle b{ font-weight:600; color:rgba(var(--led-glow),1); }
.ceiling__toggle:hover{ border-color:rgba(var(--led-glow),.6); transform:translateX(-50%) translateY(-2px); }

.konzept__text{ max-width:760px; }
.konzept__text h2{ font-size:clamp(1.8rem,4.5vw,3rem); }
.konzept__text p{ color:var(--fg-soft); font-size:1.15rem; margin-top:20px; }
.konzept__stats{ display:flex; flex-wrap:wrap; gap:38px; margin-top:44px; }
.stat b{ display:block; font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.4rem); color:var(--fg); }
.stat span{ font-size:.85rem; color:var(--fg-soft); letter-spacing:.02em; }

/* ===========================================================================
   LEISTUNGEN
   ========================================================================= */
.cards{ display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:760px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{
  position:relative; padding:34px 30px 38px; border-radius:18px; overflow:hidden;
  background:color-mix(in oklab, var(--paper), var(--graphite) calc(var(--night)*100%));
  border:1px solid var(--hair); transition:transform .35s var(--ease), border-color .35s, background .12s linear;
}
.card:hover{ transform:translateY(-6px); border-color:rgba(var(--led-glow),.5); }
.card__glow{ position:absolute; top:-40%; right:-30%; width:60%; height:80%; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--led-glow),calc(.10 + var(--night)*.22)), transparent 68%); pointer-events:none; }
.card__no{ font-family:var(--font-display); font-size:.9rem; color:rgba(var(--led-glow),1); letter-spacing:.05em; }
.card h3{ font-size:1.7rem; margin:14px 0 12px; }
.card p{ color:var(--fg-soft); font-size:1rem; }

/* ===========================================================================
   GALERIE
   ========================================================================= */
.gallery{ display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:720px){ .gallery{ grid-template-columns:1fr 1fr; } }
.shot{ position:relative; }
.shot--wide{ grid-column:1/-1; }
.shot__frame{
  position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden;
  background-color:var(--graphite);
  background-image:linear-gradient(160deg, #2a2823, #0b0a07);
  background-size:cover; background-position:center;
  border:1px solid var(--hair);
}
.shot--wide .shot__frame{ aspect-ratio:21/9; }
.shot__frame::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 62%, rgba(0,0,0,.30)); }
/* Fotos zeigen die Lichtlinien selbst — synthetische Overlays daher aus */
.shot__led,.shot__led--v,.shot__led--frame,.shot__led--dots{ display:none; }
/* Licht-Overlay in der Galerie */
.shot__led{ position:absolute; z-index:2; }
.shot__led:not(.shot__led--v):not(.shot__led--frame):not(.shot__led--dots){
  top:38%; left:12%; right:30%; height:2px; background:var(--led);
  box-shadow:0 0 20px 2px rgba(var(--led-glow),.85); transform-origin:left; transform:scaleX(0);
}
.shot__led--v{ top:16%; bottom:24%; left:44%; width:2px; background:var(--led); box-shadow:0 0 20px 2px rgba(var(--led-glow),.85); transform-origin:top; transform:scaleY(0); }
.shot__led--frame{ top:16%; left:14%; right:14%; bottom:22%; border:2px solid var(--led); border-radius:8px; box-shadow:0 0 22px rgba(var(--led-glow),.7), inset 0 0 22px rgba(var(--led-glow),.35); opacity:0; }
.shot__led--dots{ position:absolute; inset:0; opacity:0;
  background-image:radial-gradient(rgba(var(--led-glow),.95) 1.1px, transparent 1.8px);
  background-size:36px 32px; filter:drop-shadow(0 0 4px rgba(var(--led-glow),.8)); }
.shot.is-in .shot__led:not(.shot__led--v):not(.shot__led--frame):not(.shot__led--dots){ transform:scaleX(1); transition:transform 1.1s var(--ease); }
.shot.is-in .shot__led--v{ transform:scaleY(1); transition:transform 1.1s var(--ease); }
.shot.is-in .shot__led--frame,.shot.is-in .shot__led--dots{ opacity:1; transition:opacity 1s var(--ease); }
.shot figcaption{ margin-top:14px; font-size:.9rem; color:var(--fg-soft); }

/* ===========================================================================
   KONFIGURATOR
   ========================================================================= */
.konfigurator{ --cfg-dim:.8; --cfg-led:#ffd9a0; --cfg-glow:255,190,120; }
.config{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
@media(min-width:940px){ .config{ grid-template-columns:1.25fr .85fr; gap:48px; } }

/* Bühne / 3D-Raum */
.stage{
  position:relative; border-radius:22px; overflow:hidden; padding:30px;
  background:color-mix(in oklab, #100f0c, #000 calc((1 - var(--cfg-dim))*55%));
  border:1px solid var(--hair); perspective:1100px; min-height:380px;
  display:flex; align-items:center; justify-content:center;
}
.room{ position:relative; width:min(100%,460px); aspect-ratio:4/3; transform-style:preserve-3d; transform:rotateX(6deg); }
.room__wall,.room__floor,.room__ceiling{ position:absolute; }
.room__wall--back{ inset:14% 16%; background:color-mix(in oklab, #23211b, #000 calc((1 - var(--cfg-dim))*60%)); border-radius:2px; }
.room__wall--left{ top:14%; bottom:0; left:0; width:16%; background:color-mix(in oklab, #1a1915, #000 calc((1 - var(--cfg-dim))*65%)); transform:skewY(14deg); transform-origin:right; }
.room__wall--right{ top:14%; bottom:0; right:0; width:16%; background:color-mix(in oklab, #1a1915, #000 calc((1 - var(--cfg-dim))*65%)); transform:skewY(-14deg); transform-origin:left; }
.room__floor{ left:16%; right:16%; bottom:0; height:16%; background:color-mix(in oklab, #14130f, #000 calc((1 - var(--cfg-dim))*60%)); }
/* Decke = Lichtträger */
.room__ceiling{
  top:0; left:16%; right:16%; height:16%;
  background:color-mix(in oklab, #201e18, #000 calc((1 - var(--cfg-dim))*40%));
  box-shadow:0 0 calc(var(--cfg-dim)*60px) rgba(var(--cfg-glow), calc(var(--cfg-dim)*.55));
}
.preview__led{ position:absolute; inset:0; width:100%; height:100%; }
.preview__led path,.preview__led rect{
  stroke:var(--cfg-led); stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 calc(3px + var(--cfg-dim)*14px) rgba(var(--cfg-glow),calc(var(--cfg-dim)*.95)));
  opacity:calc(.12 + var(--cfg-dim)*.88);
}
.preview__led--dots span{ position:absolute; left:var(--x); top:var(--y); width:6px; height:6px; border-radius:50%;
  background:var(--cfg-led); box-shadow:0 0 calc(4px + var(--cfg-dim)*12px) rgba(var(--cfg-glow),calc(var(--cfg-dim)*.95));
  opacity:calc(.12 + var(--cfg-dim)*.88); }
/* Muster-Sichtbarkeit */
.preview__led{ display:none; }
#stage[data-muster="lines"] .preview__led--lines,
#stage[data-muster="frame"] .preview__led--frame,
#stage[data-muster="dots"]  .preview__led--dots,
#stage[data-muster="all"] .preview__led{ display:block; }
/* Möbel */
.room__sofa,.room__tv{ position:absolute; background:#0d0c09; border-radius:4px; opacity:calc(.4 + var(--cfg-dim)*.5); }
.room__sofa{ left:26%; right:26%; bottom:12%; height:12%; box-shadow:0 -6px 20px rgba(var(--cfg-glow),calc(var(--cfg-dim)*.25)); }
.room__tv{ left:38%; right:38%; top:34%; height:16%; background:#050505; border:1px solid rgba(var(--cfg-glow),.2); }
#stage[data-raum="wohnen"] .room__sofa,#stage[data-raum="wohnen"] .room__tv{ display:block; }
#stage:not([data-raum="wohnen"]) .room__sofa,#stage:not([data-raum="wohnen"]) .room__tv{ display:none; }
.stage__hint{ position:absolute; left:18px; bottom:14px; font-size:.78rem; letter-spacing:.05em;
  color:rgba(var(--cfg-glow),1); text-shadow:0 0 12px rgba(var(--cfg-glow),.6); }

/* Steuerung */
.controls{ display:flex; flex-direction:column; gap:26px; }
.control__label{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-soft); margin-bottom:12px; }
.control__val{ font-family:var(--font-display); font-size:1rem; letter-spacing:0; text-transform:none; color:rgba(var(--led-glow),1); }
.control__scale{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--fg-soft); margin-top:8px; }
.seg{ display:flex; gap:6px; flex-wrap:wrap; }
.seg__btn{ flex:1; min-width:74px; padding:11px 10px; border-radius:11px; border:1px solid var(--hair);
  font-size:.86rem; font-weight:500; color:var(--fg-soft); transition:.2s var(--ease); }
.seg__btn:hover{ color:var(--fg); border-color:var(--fg-soft); }
.seg__btn.is-active{ color:var(--ink); background:var(--led); border-color:transparent; box-shadow:0 6px 22px -8px rgba(var(--led-glow),.7); }
.slider{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px; outline:none;
  background:linear-gradient(90deg, rgba(var(--led-glow),.9), var(--hair)); }
.slider--warm{ background:linear-gradient(90deg,#ff9a3d,#ffd9a0,#dfe9ff); }
.slider::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; cursor:pointer;
  box-shadow:0 0 0 4px rgba(var(--led-glow),.3), 0 0 16px rgba(var(--led-glow),.8); }
.slider::-moz-range-thumb{ width:22px; height:22px; border:none; border-radius:50%; background:#fff; cursor:pointer;
  box-shadow:0 0 0 4px rgba(var(--led-glow),.3), 0 0 16px rgba(var(--led-glow),.8); }

/* ===========================================================================
   KONTAKT
   ========================================================================= */
.kontakt{ text-align:center; }
.kontakt__inner{ position:relative; max-width:720px; }
.kontakt__glowline{ width:120px; height:2px; margin:0 auto 40px; background:var(--led);
  box-shadow:0 0 26px 3px rgba(var(--led-glow),.9); }
.kontakt h2{ font-size:clamp(2.2rem,6vw,4rem); }
.kontakt p{ color:var(--fg-soft); font-size:1.15rem; margin-top:18px; }
.kontakt__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:36px; }

/* ---------- Footer ---------- */
.foot{ border-top:1px solid var(--hair); padding:44px 0; }
.foot__row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.foot__logo{ height:34px; filter:invert(var(--night)); }
.foot__tag{ color:var(--fg-soft); font-size:.9rem; }
.foot__links{ display:flex; gap:18px; }
.foot__links a{ color:var(--fg-soft); font-size:.85rem; font-weight:500; }
.foot__links a:hover{ color:rgba(var(--led-glow),1); }
.foot__legal{ margin-left:auto; color:var(--fg-soft); font-size:.82rem; }

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.legal-body{ --night:.94; min-height:100vh; display:flex; flex-direction:column; }
.legal-nav{ padding:22px 0; border-bottom:1px solid var(--hair); }
.legal-nav .nav__row{ height:auto; }
.legal-nav .back{ color:var(--fg-soft); font-weight:500; font-size:.92rem; }
.legal-nav .back:hover{ color:rgba(var(--led-glow),1); }
.legal{ flex:1; max-width:780px; margin-inline:auto; padding:60px 24px 90px; }
.legal h1{ font-size:clamp(2rem,5vw,3rem); margin-bottom:8px; }
.legal .legal__sub{ color:var(--fg-soft); margin-bottom:40px; }
.legal h2{ font-family:var(--font-display); font-size:1.5rem; margin:38px 0 12px; color:rgba(var(--led-glow),1); }
.legal p, .legal li{ color:var(--fg-soft); font-size:1rem; line-height:1.75; }
.legal p{ margin-bottom:14px; }
.legal ul{ padding-left:20px; margin-bottom:14px; }
.legal a{ color:rgba(var(--led-glow),1); text-decoration:underline; text-underline-offset:2px; }
.legal .todo{ display:inline-block; background:rgba(var(--led-glow),.12); border:1px solid rgba(var(--led-glow),.3);
  color:var(--fg); padding:1px 8px; border-radius:5px; font-size:.9rem; font-weight:500; }
.legal__note{ margin-top:40px; padding:16px 18px; border:1px dashed var(--hair); border-radius:10px; font-size:.86rem; color:var(--fg-soft); }

/* ---------- Reveal-Animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .nav__links{ position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:2px;
    background:color-mix(in oklab,var(--bg),transparent 4%); backdrop-filter:blur(16px);
    padding:14px 20px 24px; border-bottom:1px solid var(--hair);
    transform:translateY(-120%); transition:transform .4s var(--ease); }
  .nav__links.is-open{ transform:none; }
  .nav__links a{ padding:14px 8px; font-size:1rem; }
  .nav__cta{ text-align:center; margin-top:8px; }
  .nav__toggle{ display:flex; }
  .nav.is-open .nav__toggle span:first-child{ transform:translateY(3.5px) rotate(45deg); }
  .nav.is-open .nav__toggle span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
}

@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}