:root {
      --bg:    #000000;
      --bg2:   #1d1d1f;
      --fg:    #f5f5f7;
      --fg2:   #6e6e73;
      --sep:   rgba(255,255,255,.1);
      --gap:   2px;
      --nav-h: 44px;
      --font:  -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
      --ease:  cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--fg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }
    img { display: block; }
    a   { color: inherit; text-decoration: none; }
    button { background: none; border: none; cursor: pointer; color: inherit; font: inherit; }

    /* ── NAV ── */
    #nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 9900;
      height: var(--nav-h);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 22px;
      background: rgba(0,0,0,.72);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-bottom: .5px solid rgba(255,255,255,0);
      transition: border-color .3s var(--ease);
    }
    #nav.filled { border-color: rgba(255,255,255,.1); }
    .nav-name {
      font-size: 13px; font-weight: 500; letter-spacing: -.011em;
      color: var(--fg); transition: opacity .15s;
      display: flex; align-items: center; gap: 6px;
    }
    .nav-name:hover { opacity: .7; }
    .nav-status {
      display: flex; align-items: center; gap: 4px;
      font-size: 11px; font-weight: 400; letter-spacing: .01em;
      color: #6e6e73;
    }
    .nav-status-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #30d158;
      box-shadow: 0 0 5px rgba(48,209,88,.8), 0 0 10px rgba(48,209,88,.4);
      flex-shrink: 0;
    }
    .nav-right { display: flex; align-items: center; gap: 20px; }
    .nav-count {
      font-size: 12px; font-weight: 400; color: var(--fg2);
      letter-spacing: -.011em;
      font-variant-numeric: tabular-nums;
    }
    .nav-link {
      font-size: 12px; font-weight: 400; letter-spacing: -.011em;
      color: var(--fg2); transition: color .15s;
    }
    .nav-link:hover { color: var(--fg); }

    /* ── HERO ── */
    #hero {
      position: relative;
      min-height: 88svh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: calc(var(--nav-h) + 40px) 24px 60px;
      text-align: center;
      gap: 0;
    }
    .hero-eyebrow {
      font-size: 17px; font-weight: 600; letter-spacing: -.022em;
      color: #2997ff;
      margin-bottom: 20px;
    }
    .hero-headline {
      font-size: clamp(48px, 9vw, 116px);
      font-weight: 700; line-height: 1.05;
      letter-spacing: -.035em;
      color: var(--fg);
      margin-bottom: 24px;
      max-width: 16ch;
      text-wrap: balance;
    }
    .hero-sub {
      font-size: clamp(17px, 2vw, 24px);
      font-weight: 400; line-height: 1.4;
      letter-spacing: -.011em;
      color: var(--fg2);
      max-width: 34ch;
      margin-bottom: 40px;
      text-wrap: balance;
    }
    .hero-cta {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 17px; font-weight: 400; letter-spacing: -.022em;
      color: #2997ff; transition: opacity .15s;
      text-decoration: none;
      margin-bottom: 52px;
    }
    .hero-cta:hover { opacity: .75; }
    .hero-scroll {
      display: flex; flex-direction: column;
      align-items: center; gap: 8px;
    }
    .hero-scroll-label {
      font-size: 10px; font-weight: 400; letter-spacing: .1em;
      text-transform: uppercase; color: var(--fg2);
      opacity: .7;
    }
    .hero-scroll-line {
      width: 1.5px; height: 52px;
      background: linear-gradient(to bottom, rgba(245,245,247,.8), transparent);
      animation: scrollDrop 2.4s ease-in-out infinite;
      transform-origin: top;
    }
    @keyframes scrollDrop {
      0%,100% { transform: scaleY(0); opacity: 0; }
      35%      { transform: scaleY(1); opacity: 1; }
      75%      { transform: scaleY(1); opacity: 0; }
    }

    /* ── GALLERY ── */
    #gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 280px;
      gap: var(--gap);
      padding: var(--gap);
    }
    .photo-item {
      position: relative; overflow: hidden;
      cursor: pointer;
      background: var(--bg2);
    }
    .photo-item:nth-child(6n+1) {
      grid-column: span 2;
      grid-row: span 2;
    }
    .photo-item img {
      width: 100%; height: 100%; display: block;
      object-fit: cover;
      transition: transform .7s var(--ease), filter .4s var(--ease);
      filter: brightness(.92);
    }
    .photo-item:hover img {
      transform: scale(1.04);
      filter: brightness(1);
    }

    /* ── EMPTY STATE ── */
    #empty {
      display: none;
      position: fixed; inset: 0;
      align-items: center; justify-content: center;
      flex-direction: column; gap: 12px;
    }
    #empty.show { display: flex; }
    .empty-title {
      font-size: 28px; font-weight: 600; letter-spacing: -.022em;
      color: rgba(245,245,247,.1);
    }

    /* ── FOOTER ── */
    footer {
      background: #1d1d1f;
      border-top: .5px solid rgba(255,255,255,.12);
      padding: 0 22px;
      margin-top: var(--gap);
    }
    .footer-inner {
      max-width: 980px; margin: 0 auto;
      padding: 24px 0 32px;
      display: flex; align-items: center;
      justify-content: space-between; flex-wrap: wrap;
      gap: 14px;
    }
    .footer-copy {
      font-size: 12px; line-height: 1.4;
      letter-spacing: -.011em; color: var(--fg2);
    }
    .footer-links {
      display: flex; flex-wrap: wrap; gap: 0 24px;
    }
    .footer-links a {
      font-size: 12px; letter-spacing: -.011em;
      color: var(--fg2); transition: color .15s;
    }
    .footer-links a:hover { color: var(--fg); }

    /* ── LIGHTBOX ── */
    #lb {
      position: fixed; inset: 0; z-index: 10000;
      background: rgba(0,0,0,.96);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity .3s var(--ease);
    }
    #lb.open { opacity: 1; pointer-events: all; }
    #lb-img {
      max-width: 92vw; max-height: 90svh;
      object-fit: contain;
      opacity: 0; transition: opacity .25s var(--ease);
      user-select: none; pointer-events: none;
      border-radius: 2px;
    }
    #lb-img.in { opacity: 1; }
    .lb-tap {
      position: absolute; top: 0; bottom: 0; width: 40%;
      display: flex; align-items: center;
    }
    .lb-tap-prev { left: 0;  justify-content: flex-start; padding-left: 16px; }
    .lb-tap-next { right: 0; justify-content: flex-end;   padding-right: 16px; }
    .lb-arrow {
      font-size: 22px; color: rgba(255,255,255,0);
      transition: color .2s; padding: 20px;
      font-weight: 300;
    }
    #lb:hover .lb-arrow { color: rgba(245,245,247,.3); }
    .lb-arrow:hover { color: rgba(245,245,247,.8) !important; }
    .lb-close-btn {
      position: absolute; top: 16px; right: 16px; z-index: 10;
      width: 32px; height: 32px;
      background: rgba(28,28,30,.75);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border: .5px solid rgba(255,255,255,.14);
      border-radius: 50%;
      color: rgba(245,245,247,.65);
      font-size: 17px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      padding: 0;
      transition: background .15s, color .15s;
    }
    .lb-close-btn:hover { background: rgba(58,58,60,.9); color: var(--fg); }
    .lb-counter {
      position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
      font-size: 11px; letter-spacing: .01em;
      color: rgba(110,110,115,.6);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .lb-progress {
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 1.5px; background: rgba(255,255,255,.07);
    }
    .lb-progress-bar {
      height: 100%;
      background: rgba(245,245,247,.3);
      transition: width .3s var(--ease);
    }

    /* ── LIGHTBOX META ── */
    .lb-meta {
      position: absolute;
      bottom: 44px; right: 20px;
      background: rgba(28,28,30,.78);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border: .5px solid rgba(255,255,255,.1);
      border-radius: 12px;
      padding: 4px 16px;
      min-width: 230px; max-width: 270px;
      opacity: 0; pointer-events: none;
      transition: opacity .4s .3s;
    }
    .lb-meta.show { opacity: 1; }
    .lb-meta-item {
      display: grid;
      grid-template-columns: 88px 1fr;
      align-items: baseline;
      padding: 8px 0;
      border-bottom: .5px solid rgba(255,255,255,.06);
    }
    .lb-meta-item:last-child { border-bottom: none; }
    .lb-meta-label {
      font-size: 10px; letter-spacing: .04em;
      text-transform: uppercase; color: var(--fg2);
      white-space: nowrap;
    }
    .lb-meta-value {
      font-size: 12px; color: var(--fg);
      font-variant-numeric: tabular-nums;
      opacity: .85;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* ── HEADLINE GLOSS ── */
    .headline-accent {
      font-style: italic;
      background: linear-gradient(
        105deg,
        #aeaeb2 0%,
        #ffffff 30%,
        #f5f5f7 50%,
        #ffffff 70%,
        #aeaeb2 100%
      );
      background-size: 300% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: headlineShimmer 5s ease-in-out infinite;
    }
    @keyframes headlineShimmer {
      0%, 100% { background-position: 0% center; }
      50%       { background-position: 100% center; }
    }

    /* ── LIGHTSPEED BEAM ── */
    .lightbeam {
      position: absolute; inset: 0;
      overflow: hidden; pointer-events: none;
    }
    .lightbeam::after {
      content: '';
      position: absolute;
      top: -20%; left: 0;
      width: 14%; height: 140%;
      background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255,255,255,.03) 18%,
        rgba(255,255,255,.22) 42%,
        rgba(255,255,255,.82) 50%,
        rgba(255,255,255,.22) 58%,
        rgba(255,255,255,.03) 82%,
        transparent 100%
      );
      transform: skewX(-12deg) translateX(-400%);
      filter: blur(.5px);
      mix-blend-mode: screen;
      animation: lightspeed 9s linear infinite;
      animation-delay: 1.9s;
      will-change: transform, opacity;
    }
    @keyframes lightspeed {
      0%   { transform: skewX(-12deg) translateX(-400%); opacity: 0; }
      2%   { transform: skewX(-12deg) translateX(-370%); opacity: 1; }
      5%   { transform: skewX(-12deg) translateX(850%);  opacity: 1; }
      6%   { transform: skewX(-12deg) translateX(870%);  opacity: 0; }
      100% { transform: skewX(-12deg) translateX(870%);  opacity: 0; }
    }

    /* ── HERO REVEAL ANIMATION ── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .9s cubic-bezier(.25,.46,.45,.94),
                  transform .9s cubic-bezier(.25,.46,.45,.94);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .d1 { transition-delay: 0s; }
    .d2 { transition-delay: .13s; }
    .d3 { transition-delay: .26s; }
    .d4 { transition-delay: .40s; }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      #gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
        grid-auto-flow: row dense;
      }
      .photo-item:nth-child(6n+1) {
        grid-column: span 2;
        grid-row: span 1;
      }
    }
    @media (max-width: 600px) {
      #nav { padding: 0 16px; }
      #hero { padding: calc(var(--nav-h) + 32px) 20px 100px; }
      #gallery { grid-auto-rows: 160px; }
      /* Reset: alle Fotos 1×1 auf Mobile — kein Spanning, keine schwarzen Löcher */
      .photo-item:nth-child(6n+1) {
        grid-column: span 1;
        grid-row: span 1;
      }
      footer { padding: 0 16px; }
      .hero-eyebrow { font-size: 15px; }

      /* Lightbox mobile — flex column so panel sits directly below photo */
      #lb {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 56px 0 48px;
      }
      #lb-img {
        max-width: 100vw;
        max-height: calc(100svh - 210px);
        border-radius: 0;
        flex-shrink: 0;
      }
      .lb-close-btn { top: 12px; right: 12px; }
      .lb-counter { bottom: 12px; }

      /* EXIF panel — in flow, directly below photo */
      .lb-meta {
        display: flex !important;
        flex-direction: row;
        position: relative !important;
        top: auto !important; bottom: auto !important;
        left: auto !important; right: auto !important;
        width: calc(100% - 24px);
        margin-top: 10px;
        flex-shrink: 0;
        max-width: none; min-width: 0;
        padding: 10px 6px;
        border-radius: 12px;
        gap: 0;
      }
      .lb-meta-item {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        padding: 0 4px;
        border-bottom: none !important;
        border-right: .5px solid rgba(255,255,255,.06);
        gap: 4px;
        min-width: 0;
      }
      .lb-meta-item:last-child { border-right: none; }
      .lb-meta-label { font-size: 8px; text-align: center; }
      .lb-meta-value { font-size: 11px; text-align: center; }
    }

    :focus { outline: none; }
    :focus-visible {
      outline: 2px solid #2997ff;
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* ── SECTION SEPARATOR ── */
    .section-sep {
      border: none;
      border-top: .5px solid rgba(255,255,255,.08);
      margin: 0;
    }

    /* ── BELOW-GALLERY WRAP (lightbeam container) ── */
    .below-gallery-wrap {
      position: relative;
      overflow: hidden;
    }
    /* Zweiter Lichtblitz — weicher, versetztes Timing */
    .lightbeam-alt::after {
      animation-delay: 5.4s;
      opacity: .7;
    }

    /* ── ABOUT ── */
    #about {
      position: relative; z-index: 1;
      padding: 140px 24px 100px;
      max-width: 720px; margin: 0 auto;
      text-align: center;
    }
    .about-eyebrow {
      display: block;
      font-size: 17px; font-weight: 600; letter-spacing: -.022em;
      color: #5ac8fa;
      text-shadow: 0 0 12px rgba(90,200,250,.9), 0 0 30px rgba(41,151,255,.7), 0 0 70px rgba(41,151,255,.4);
      margin-bottom: 20px;
    }
    .about-headline {
      font-size: clamp(40px, 5.5vw, 72px);
      font-weight: 700; line-height: 1.05; letter-spacing: -.025em;
      color: #ffffff;
      text-shadow: 0 0 20px rgba(255,255,255,.7), 0 0 60px rgba(255,255,255,.35), 0 0 120px rgba(255,255,255,.15);
      margin-bottom: 32px;
      text-wrap: balance;
    }
    .about-body {
      font-size: clamp(17px, 1.8vw, 21px); font-weight: 400;
      line-height: 1.47; letter-spacing: -.011em;
      color: #e5e5ea;
      text-shadow: 0 0 16px rgba(229,229,234,.6), 0 0 40px rgba(229,229,234,.25), 0 0 80px rgba(200,200,210,.12);
      text-wrap: balance;
    }
    .about-body + .about-body { margin-top: 20px; }
    .about-cta {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 17px; font-weight: 400; letter-spacing: -.022em;
      color: #2997ff; text-decoration: none;
      margin-top: 36px;
      transition: opacity .15s;
    }
    .about-cta:hover { opacity: .75; }

    /* ── METALLIC SHIMMER (shared) ── */
    @keyframes metalShimmer {
      0%, 100% { background-position: 0% center; }
      50%       { background-position: 100% center; }
    }
    .metal-text {
      background: linear-gradient(
        105deg,
        #8e8e93 0%, #c7c7cc 18%,
        #ffffff 32%, #f5f5f7 50%,
        #ffffff 68%, #c7c7cc 82%,
        #8e8e93 100%
      );
      background-size: 300% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: metalShimmer 7s ease-in-out infinite;
    }

    /* ── CONTACT ── */
    #contact {
      position: relative; z-index: 1;
      padding: 80px 24px 140px;
      max-width: 380px; margin: 0 auto;
    }
    .contact-eyebrow {
      display: block;
      font-size: 15px; font-weight: 600; letter-spacing: .04em;
      text-transform: uppercase;
      color: #2997ff;
      text-shadow: 0 0 18px rgba(41,151,255,.55);
      margin-bottom: 16px; text-align: center;
    }
    .contact-headline {
      font-size: clamp(30px, 4vw, 48px);
      font-weight: 700; line-height: 1.05; letter-spacing: -.025em;
      margin-bottom: 40px; text-align: center;
    }

    /* ── CONTACT CARD — refined metallic ── */
    .contact-card {
      background: linear-gradient(170deg, #252527 0%, #1a1a1c 60%, #111113 100%);
      border-radius: 18px;
      padding: 26px 24px;
      border: .5px solid rgba(255,255,255,.10);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,0,0,.3),
        0 12px 80px rgba(0,0,0,.8),
        0 2px 12px rgba(0,0,0,.5),
        0 0 0 .5px rgba(255,255,255,.04);
      transition: transform .5s cubic-bezier(.25,.1,.25,1),
                  box-shadow .5s cubic-bezier(.25,.1,.25,1);
      will-change: transform;
    }
    .contact-card:hover {
      transform: translateY(-3px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(0,0,0,.3),
        0 20px 96px rgba(0,0,0,.9),
        0 4px 20px rgba(0,0,0,.6),
        0 0 0 .5px rgba(255,255,255,.07);
    }

    .contact-field { margin-bottom: 14px; }
    .contact-field label {
      display: block;
      font-size: 10px; font-weight: 600; letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(174,174,178,.5);
      margin-bottom: 6px;
    }

    /* Inputs */
    .contact-field input,
    .contact-field textarea {
      width: 100%;
      background: rgba(0,0,0,.45);
      border: none;
      border-radius: 10px;
      padding: 11px 14px;
      font-family: var(--font);
      font-size: 14px; font-weight: 400;
      color: var(--fg);
      outline: none;
      box-shadow:
        inset 0 2px 6px rgba(0,0,0,.7),
        inset 0 1px 2px rgba(0,0,0,.4),
        0 0 0 .5px rgba(255,255,255,.06);
      transition: box-shadow .22s var(--ease), background .22s var(--ease);
      resize: none;
      -webkit-appearance: none;
    }
    .contact-field input::placeholder,
    .contact-field textarea::placeholder {
      color: rgba(245,245,247,.18);
    }
    .contact-field input:focus,
    .contact-field textarea:focus {
      background: rgba(0,0,0,.5);
      box-shadow:
        inset 0 2px 6px rgba(0,0,0,.7),
        inset 0 1px 2px rgba(0,0,0,.4),
        0 0 0 2px #2997ff,
        0 0 16px rgba(41,151,255,.15);
    }
    .contact-field input.invalid,
    .contact-field textarea.invalid {
      box-shadow:
        inset 0 2px 6px rgba(0,0,0,.7),
        inset 0 1px 2px rgba(0,0,0,.4),
        0 0 0 2px #ff453a,
        0 0 12px rgba(255,69,58,.18);
    }
    .field-error {
      display: block;
      font-size: 11px; font-weight: 400; letter-spacing: -.011em;
      color: #ff453a;
      margin-top: 5px;
      min-height: 15px;
    }
    .contact-field textarea { height: 108px; }
    .contact-hp { display: none; }

    /* Button: Metallic blue — Gradient + Shine-Sweep */
    .contact-submit {
      position: relative; overflow: hidden;
      display: block; margin: 10px auto 0;
      width: auto; min-width: 140px; padding: 10px 28px;
      background: linear-gradient(180deg,
        #e8e8ea 0%,
        #c8c8cc 30%,
        #a0a0a6 65%,
        #8a8a90 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        inset 0 -1px 0 rgba(0,0,0,.25),
        0 2px 12px rgba(0,0,0,.45),
        0 1px 3px rgba(0,0,0,.3);
      color: #111;
      font-family: var(--font);
      font-size: 15px; font-weight: 500; letter-spacing: -.022em;
      border-radius: 980px;
      cursor: pointer;
      transition: background .3s, box-shadow .3s, transform .15s;
    }
    /* Shine-Sweep Pseudo-Element */
    .contact-submit::before {
      content: '';
      position: absolute;
      top: 0; left: -80%;
      width: 55%; height: 100%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.45) 50%,
        transparent 100%
      );
      transform: skewX(-18deg);
      transition: left .65s cubic-bezier(.25,.46,.45,.94);
      pointer-events: none;
    }
    .contact-submit:hover::before { left: 130%; }
    .contact-submit:hover {
      background: linear-gradient(180deg,
        #f0f0f2 0%,
        #d4d4d8 30%,
        #adadb3 65%,
        #97979e 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        inset 0 -1px 0 rgba(0,0,0,.25),
        0 4px 20px rgba(0,0,0,.55),
        0 1px 4px rgba(0,0,0,.35);
      transform: translateY(-1px);
    }
    .contact-submit:active { transform: translateY(0); }
    .contact-submit:disabled {
      opacity: .4; cursor: default; transform: none;
      background: linear-gradient(180deg, #e8e8ea 0%, #c8c8cc 30%, #a0a0a6 65%, #8a8a90 100%);
    }
    .contact-msg { display: none; }
    .contact-msg.ok  { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 24px; }
    .contact-msg.err { display: block; color: #ff453a; text-align: center; margin-top: 20px; font-size: 15px; }
    .contact-msg-icon {
      width: 56px; height: 56px; border-radius: 50%;
      background: rgba(48,209,88,.15);
      border: 1.5px solid rgba(48,209,88,.35);
      display: flex; align-items: center; justify-content: center;
      font-size: 26px;
      box-shadow: 0 0 24px rgba(48,209,88,.25), 0 0 60px rgba(48,209,88,.1);
    }
    .contact-msg-title {
      font-size: 22px; font-weight: 700; letter-spacing: -.025em;
      color: var(--fg);
    }
    .contact-msg-body {
      font-size: 15px; font-weight: 400; letter-spacing: -.011em;
      line-height: 1.55; color: #6e6e73;
      text-align: center; max-width: 320px;
    }
    .contact-msg-body a {
      color: #2997ff; text-decoration: none;
    }
    .contact-msg-body a:hover { text-decoration: underline; }

    /* ── REDUCED MOTION (WCAG 2.3) ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
      .reveal { opacity: 1; transform: none; }
    }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}