/* ─── Reset & Base ───────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:        #0a0a0a;
      --bg-alt:    #111111;
      --bg-card:   #161616;
      --orange-bright: #EF5814;
      --orange-dark:   #B64615;
      --orange-dark-rgb: 186, 70, 21;
      --neon:      var(--orange-dark);
      --neon-rgb:  var(--orange-dark-rgb);
      --neon-dim:  #A64615;
      --accent:    var(--orange-dark);
      --text:      #e8e8e8;
      --text-muted:#888;
      --border:    rgba(255,255,255,0.07);
      --font-head: 'Bebas Neue', sans-serif;
      --font-body: 'Inter', sans-serif;
      --nav-h:     70px;
    }

    html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-weight: 300;
      line-height: 1.7;
    }

    ::selection { background: var(--neon); color: #000; }

    /* ─── Scrollbar ──────────────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--neon); border-radius: 2px; }

    /* ─── Typography helpers ─────────────────────────────────────────── */
    .section-label {
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--neon);
      margin-bottom: 0.75rem;
    }

    h2 {
      font-family: var(--font-head);
      font-size: clamp(2.8rem, 6vw, 5rem);
      line-height: 1;
      letter-spacing: 0.03em;
      color: #fff;
    }

    /* ─── Layout helpers ─────────────────────────────────────────────── */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 clamp(1.5rem, 5vw, 4rem);
    }

    section {
      padding: clamp(5rem, 10vw, 9rem) 0;
    }

    section:nth-child(even) { background: var(--bg-alt); }

    /* ─── Glow line divider ──────────────────────────────────────────── */
    .glow-line {
      width: 60px;
      height: 2px;
      background: var(--neon);
      box-shadow: 0 0 12px var(--neon);
      margin: 1.5rem 0 2.5rem;
    }

    /* ─── Fade-in animation ──────────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: none;
    }

    /* ══════════════════════════════════════════════════════════════════
       NAV
    ══════════════════════════════════════════════════════════════════ */
    #navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      background: rgba(10,10,10,0.72);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background 0.4s ease, backdrop-filter 0.4s ease;
    }

    #navbar.scrolled {
      background: rgba(10,10,10,0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }

    #navbar .container {
      width: 100%;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-logo {
      font-family: var(--font-head);
      font-size: 1.8rem;
      letter-spacing: 0.1em;
      color: #fff;
      text-decoration: none;
    }

    .nav-logo span { color: var(--orange-bright); }

    nav ul {
      list-style: none;
      display: flex;
      gap: 2.5rem;
    }

    nav a {
      color: var(--text-muted);
      text-decoration: none;
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      transition: color 0.25s;
      position: relative;
    }

    nav a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--neon);
      transition: width 0.3s;
    }

    nav a:hover { color: var(--neon); }
    nav a:hover::after { width: 100%; }

    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
    }
    .hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--text);
      transition: all 0.3s;
    }

    @media (max-width: 768px) {
      .hamburger { display: flex; }

      nav {
        position: fixed;
        top: var(--nav-h);
        left: 0;
        right: 0;
        background: rgba(10,10,10,0.97);
        padding: 2rem;
        transform: translateY(calc(-100% - var(--nav-h)));
        transition: transform 0.35s ease;
        border-bottom: 1px solid var(--border);
      }

      nav.open { transform: translateY(0); }

      nav ul {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
      }

      nav a { font-size: 1rem; }
    }

    /* ══════════════════════════════════════════════════════════════════
       HERO
    ══════════════════════════════════════════════════════════════════ */
    #hero {
      position: relative;
      height: 100vh;
      min-height: 600px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
      padding: 0;
    }

    #hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.55;
      filter: saturate(0.5) brightness(0.9);
    }

    /* Dot-matrix raster overlay */
    #hero-raster {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background-image:
        radial-gradient(circle, rgba(10,10,10,0.65) 1px, transparent 1px);
      background-size: 4px 4px;
    }

    #hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(10,10,10,0.2) 0%,
        rgba(10,10,10,0.5) 60%,
        var(--bg) 100%
      );
    }

    .hero-content {
      position: relative;
      z-index: 2;
    }

    .hero-eyebrow {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--neon);
      margin-bottom: 1.5rem;
      opacity: 0;
      animation: fadeUp 1s ease 0.3s forwards;
    }

    .hero-title {
      font-family: var(--font-head);
      font-size: clamp(5rem, 18vw, 14rem);
      line-height: 0.9;
      letter-spacing: 0.04em;
      color: #fff;
      text-shadow: 0 0 80px rgba(var(--neon-rgb),0.15);
      opacity: 0;
      animation: fadeUp 1s ease 0.5s forwards;
    }

    .hero-title .neon-word { color: var(--orange-bright); text-shadow: 0 0 40px var(--orange-bright); }

    .hero-sub {
      margin-top: 1.5rem;
      font-size: clamp(0.9rem, 2vw, 1.1rem);
      font-weight: 400;
      color: var(--text-muted);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      opacity: 0;
      animation: fadeUp 1s ease 0.8s forwards;
    }

    .hero-cta {
      margin-top: 3rem;
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeUp 1s ease 1.1s forwards;
    }

    .btn {
      display: inline-block;
      padding: 0.85rem 2.2rem;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 2px;
      transition: all 0.3s;
      cursor: pointer;
    }

    .btn-primary {
      background: var(--neon);
      color: #000;
      border: 1px solid var(--neon);
    }
    .btn-primary:hover {
      background: transparent;
      color: var(--neon);
      box-shadow: 0 0 20px rgba(var(--neon-rgb),0.3);
    }

    .btn-outline {
      background: transparent;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.3);
    }
    .btn-outline:hover {
      border-color: var(--neon);
      color: var(--neon);
      box-shadow: 0 0 20px rgba(var(--neon-rgb),0.15);
    }

    .scroll-hint {
      position: absolute;
      bottom: 2.5rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      color: var(--text-muted);
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      animation: fadeUp 1s ease 1.5s both;
    }

    .scroll-hint::after {
      content: '';
      width: 1px;
      height: 40px;
      background: linear-gradient(to bottom, var(--text-muted), transparent);
      animation: scrollLine 2s ease-in-out infinite;
    }

    /* ══════════════════════════════════════════════════════════════════
       OM BANDET
    ══════════════════════════════════════════════════════════════════ */
    #om-bandet .inner {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 10rem;
      align-items:stretch;
    }

    .about-text p {
      color: var(--text-muted);
      margin-bottom: 1.2rem;
      font-size: 1.05rem;
    }

    .about-text p strong { color: var(--text); font-weight: 500; }

    .stats-row {
      display: flex;
      gap: 2.5rem;
      margin-top: 2rem;
      flex-wrap: wrap;
    }

    .stat {
      display: flex;
      flex-direction: column;
    }

    .stat-number {
      font-family: var(--font-head);
      font-size: 3rem;
      color: var(--neon);
      line-height: 1;
    }

    .stat-label {
      font-size: 0.7rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-top: 0.2rem;
    }

    /* Band member mosaic – 2 cols × 5 rows, tiles fill text height */
    .member-mosaic {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(5, 1fr);
      gap: 6px;
      min-height: 0;
    }

    .member-tile {
      position: relative;
      overflow:hidden;
      background: var(--bg-card);
      cursor: pointer;
      min-height: 0;
    }

    /* Bottom gradient for name label */
    .member-tile::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 55%);
      z-index: 2;
      pointer-events: none;
      transition: opacity 0.35s;
    }

    .member-tile[data-playing="true"]::before { opacity: 0; }

    /* Shared style for photo and video layers */
    .member-photo,
    .member-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .member-photo {
      transition: transform 0.5s ease, opacity 0.35s ease;
      z-index: 1;
    }

    .member-video {
      z-index: 0;
      opacity: 0;
      transition: opacity 0.35s ease;
    }

    /* When playing: show video, hide photo */
    .member-tile[data-playing="true"] .member-photo {
      opacity: 0;
      transform: scale(1.04);
    }

    .member-tile[data-playing="true"] .member-video {
      opacity: 1;
      z-index: 1;
    }

    /* Hover: scale photo slightly */
    .member-tile:not([data-playing="true"]):hover .member-photo {
      transform: scale(1.04);
    }

    /* Play icon overlay */
    .tile-play-icon {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .tile-play-icon svg {
      width: 36px;
      height: 36px;
      opacity: 0;
      transition: opacity 0.25s;
      filter: drop-shadow(0 0 6px rgba(0,0,0,0.8));
    }

    .member-tile:not([data-playing="true"]):hover .tile-play-icon svg { opacity: 1; }

    /* Placeholder tile (no photo/video) */
    .member-tile--placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 0.5rem;
      cursor: default;
      border: 1px solid var(--border);
      min-height: 0;
    }

    .member-tile--placeholder svg {
      width: 40px;
      height: 40px;
      color: var(--text-muted);
      opacity: 0.4;
    }

    /* Brand tile (hero-style) */
    .member-tile--brand {
      cursor: default;
      container-type: size;
    }
    .member-tile--brand::before {
      background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 100%);
    }
    .tile-brand-raster {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background-image:
        radial-gradient(circle, rgba(10,10,10,0.65) 1px, transparent 1px);
      background-size: 2px 2px;
    }
    .tile-brand-text {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      pointer-events: none;
      padding-left: 18%;
      line-height: 0.95;
      font-family: var(--font-head);
      font-size: 22cqi;
      letter-spacing: 0.04em;
      opacity: 0.8;
    }
    .tile-brand-star {
      color: #fff;
      text-shadow: 0 0 30px rgba(255,255,255,0.3);
    }
    .tile-brand-struck {
      color: var(--orange-bright);
      text-shadow: 0 0 40px var(--orange-bright);
    }

    .member-name {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0 0.3em;
      font-family: var(--font-head);
      font-size: clamp(0.9rem, 1.4vw, 1.2rem);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
      text-shadow: 0 0 18px rgba(var(--neon-rgb),0.6), 0 2px 8px rgba(0,0,0,0.9);
      text-align: center;
      padding: 0.5rem;
      pointer-events: none;
      opacity: 0;
      -webkit-transition: opacity 0.35s;
      transition: opacity 0.35s;
      background: rgba(0,0,0,0.35);
    }

    .member-name-last {
      color: inherit;
    }

    .member-tile[data-playing="true"] .member-name {
      flex-wrap: wrap;
      align-content: center;
      gap: 0 0.3em;
      line-height: 1;
      bottom: auto;
      height: 100%;
      -webkit-transform: translate3d(0, 0, 0) scale(1);
      transform: translate3d(0, 0, 0) scale(1);
      -webkit-transition: -webkit-transform 2.5s ease, opacity 0.35s;
      transition: transform 2.5s ease, opacity 0.35s;
      will-change: transform;
    }

    .member-tile[data-playing="true"][data-name-bottom="true"] .member-name {
      -webkit-transform: translate3d(0, 38%, 0) scale(0.7);
      transform: translate3d(0, 38%, 0) scale(0.7);
      background: transparent;
    }

    .member-tile[data-playing="true"] .member-name-last {
      color: var(--orange-bright);
    }

    /* Show name at bottom when not playing (hover) */
    .member-tile:not([data-playing="true"]) .member-name {
      inset: auto 0 0 0;
      background: none;
      align-items: flex-end;
      padding: 0 0.65rem 0.65rem;
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: none;
      text-shadow: none;
      line-height: 1.3;
      opacity: 1;
    }

    .placeholder-name {
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--text-muted);
      text-align: center;
      padding: 0 0.5rem;
      letter-spacing: 0.06em;
    }

    @media (max-width: 900px) {
      #om-bandet .inner {
        grid-template-columns: 1fr;
      }
      .member-mosaic {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, 1fr);
      }
      .member-tile { aspect-ratio: 1; }
      .member-tile--placeholder { aspect-ratio: 1; }
    }

    @media (max-width: 600px) {
      .member-mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr);
      }
    }

    /* ══════════════════════════════════════════════════════════════════
       SETLISTE
    ══════════════════════════════════════════════════════════════════ */
    #setliste { background: var(--bg-alt); }

    .setliste-intro {
      max-width: 620px;
      margin-bottom: 3rem;
    }

    .setliste-intro p {
      color: var(--text-muted);
      font-size: 1rem;
    }

    /* ── Word Cloud ─────────────────────────────────────────────────── */
    .setlist-grid {
      list-style: none;
      margin: 0;
      padding: 3rem 1rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 0.55rem 1.4rem;
      min-height: 340px;
    }

    .setlist-item {
      --wc-size:    1.3rem;
      --wc-color:   var(--text);
      --wc-rotate:  0deg;
      --wc-opacity: 0.6;
      display: inline-block;
      position: relative;
      transform: rotate(var(--wc-rotate));
      opacity: var(--wc-opacity);
      cursor: default;
      transition: opacity 0.3s, transform 0.3s;
    }

    .setlist-item:hover {
      opacity: 1;
      transform: rotate(0deg) scale(1.08);
      z-index: 10;
    }

    /* Pseudo-random size / colour / angle — 13-step cycle avoids visual banding */
    .setlist-item:nth-child(13n+1)  { --wc-size: 3.4rem;  --wc-color: var(--orange-bright); --wc-rotate: -2deg;   --wc-opacity: 1;    }
    .setlist-item:nth-child(13n+2)  { --wc-size: 1.0rem;  --wc-color: #888;                 --wc-rotate:  1.5deg; --wc-opacity: 0.5;  }
    .setlist-item:nth-child(13n+3)  { --wc-size: 1.9rem;  --wc-color: var(--neon);          --wc-rotate:  0deg;   --wc-opacity: 0.85; }
    .setlist-item:nth-child(13n+4)  { --wc-size: 0.85rem; --wc-color: #aaa;                 --wc-rotate: -1.5deg; --wc-opacity: 0.45; }
    .setlist-item:nth-child(13n+5)  { --wc-size: 2.5rem;  --wc-color: #fff;                 --wc-rotate:  2.5deg; --wc-opacity: 0.9;  }
    .setlist-item:nth-child(13n+6)  { --wc-size: 0.95rem; --wc-color: #777;                 --wc-rotate: -0.5deg; --wc-opacity: 0.45; }
    .setlist-item:nth-child(13n+7)  { --wc-size: 1.55rem; --wc-color: var(--neon);          --wc-rotate:  2deg;   --wc-opacity: 0.75; }
    .setlist-item:nth-child(13n+8)  { --wc-size: 0.88rem; --wc-color: #999;                 --wc-rotate: -2deg;   --wc-opacity: 0.45; }
    .setlist-item:nth-child(13n+9)  { --wc-size: 2.1rem;  --wc-color: var(--orange-bright); --wc-rotate: -1deg;   --wc-opacity: 0.8;  }
    .setlist-item:nth-child(13n+10) { --wc-size: 1.2rem;  --wc-color: #ccc;                 --wc-rotate:  1.5deg; --wc-opacity: 0.6;  }
    .setlist-item:nth-child(13n+11) { --wc-size: 1.65rem; --wc-color: var(--neon);          --wc-rotate: -3deg;   --wc-opacity: 0.7;  }
    .setlist-item:nth-child(13n+12) { --wc-size: 0.9rem;  --wc-color: #888;                 --wc-rotate:  1deg;   --wc-opacity: 0.45; }
    .setlist-item:nth-child(13n)    { --wc-size: 2.9rem;  --wc-color: #fff;                 --wc-rotate:  0.5deg; --wc-opacity: 0.95; }

    .song-number  { display: none; }
    .setlist-info { display: contents; } /* dissolve wrapper — children render directly */

    .song-title {
      display: block;
      font-family: var(--font-head);
      font-size: var(--wc-size);
      color: var(--wc-color);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      line-height: 1;
      white-space: nowrap;
      transition: text-shadow 0.3s;
    }

    .setlist-item:hover .song-title {
      text-shadow: 0 0 24px currentColor, 0 0 6px currentColor;
    }

    /* Artist tooltip — appears above word on hover */
    .song-artist {
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%) rotate(calc(var(--wc-rotate) * -1));
      white-space: nowrap;
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--orange-bright);
      background: rgba(10,10,10,0.92);
      padding: 0.3rem 0.65rem;
      border: 1px solid rgba(var(--neon-rgb),0.35);
      border-radius: 2px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
      z-index: 20;
    }

    .setlist-item:hover .song-artist,
    .setlist-item.touch-active .song-artist { opacity: 1; }

    .setlist-item.touch-active {
      opacity: 1;
      transform: rotate(0deg) scale(1.08);
      z-index: 10;
    }
    .setlist-item.touch-active .song-title {
      text-shadow: 0 0 24px currentColor, 0 0 6px currentColor;
    }

    @media (max-width: 768px) {
      .setlist-grid { gap: 0.45rem 1rem; padding: 2rem 0.75rem; }
      .setlist-item:nth-child(13n+1)  { --wc-size: 2.2rem; }
      .setlist-item:nth-child(13n+5)  { --wc-size: 1.8rem; }
      .setlist-item:nth-child(13n+9)  { --wc-size: 1.5rem; }
      .setlist-item:nth-child(13n)    { --wc-size: 2.0rem; }
    }

    /* ══════════════════════════════════════════════════════════════════
       GALLERY
    ══════════════════════════════════════════════════════════════════ */
    #galleri {
      padding-bottom: 0;
    }

    .gallery-header { margin-bottom: 3rem; }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: auto;
      gap: 6px;
    }

    .gallery-item {
      overflow: hidden;
      background: var(--bg-card);
      position: relative;
    }

    /* item 1 = video top (full width), items 2-7 = photos (mosaic), last = video bottom (full width) */
    .gallery-item:nth-child(1)  { grid-column: span 12; }
    .gallery-item:nth-child(2)  { grid-column: span 7; grid-row: span 2; }
    .gallery-item:nth-child(3)  { grid-column: span 5; }
    .gallery-item:nth-child(4)  { grid-column: span 5; }
    .gallery-item:nth-child(5)  { grid-column: span 4; }
    .gallery-item:nth-child(6)  { grid-column: span 4; }
    .gallery-item:nth-child(7)  { grid-column: span 4; }
    /* dynamic images inherit default span */
    .gallery-item:last-child    { grid-column: span 12; } /* video bottom */

    /* Gallery video hero item */
    .gallery-video-wrapper {
      position: relative;
      width: 100%;
      cursor: pointer;
    }

    .gallery-video-wrapper video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      min-height: 240px;
      filter: saturate(0.8);
      transition: filter 0.4s ease;
    }

    .gallery-video-wrapper:hover video { filter: saturate(1); }

    .gallery-video-play {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      pointer-events: none;
      transition: opacity 0.3s;
    }

    .gallery-video-play svg {
      width: 64px;
      height: 64px;
      filter: drop-shadow(0 0 12px rgba(0,0,0,0.7));
      transition: transform 0.3s;
    }

    .gallery-video-wrapper:hover .gallery-video-play svg { transform: scale(1.1); }

    .gallery-video-wrapper[data-playing="true"] .gallery-video-play { opacity: 0; }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      min-height: 240px;
      transition: transform 0.6s ease, filter 0.4s ease;
      filter: saturate(0.8);
    }

    .gallery-item:hover img {
      transform: scale(1.04);
      filter: saturate(1);
    }

    /* Gallery image-to-video tiles */
    .gallery-item--has-video {
      cursor: pointer;
    }

    .gallery-item--has-video img {
      position: relative;
      z-index: 2;
      -webkit-transition: opacity 0.35s ease, transform 0.6s ease, filter 0.4s ease;
      transition: opacity 0.35s ease, transform 0.6s ease, filter 0.4s ease;
    }

    .gallery-item-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      z-index: 1;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }

    .gallery-item--has-video[data-playing="true"] img {
      opacity: 0;
      pointer-events: none;
    }

    .gallery-item--has-video[data-playing="true"] .gallery-item-video {
      z-index: 3;
    }

    @media (max-width: 768px) {
      .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .gallery-item { grid-column: span 1 !important; grid-row: span 1 !important; }
      .gallery-item:nth-last-child(2) { grid-column: 1 !important; }
      .gallery-item:last-child { grid-column: 2 !important; }
      .gallery-item img { min-height: 180px; }
    }

    @media (max-width: 520px) {
      .gallery-grid {
        grid-template-columns: 1fr;
      }
      .gallery-item,
      .gallery-item:nth-last-child(2),
      .gallery-item:last-child { grid-column: span 1 !important; }
    }

    /* ══════════════════════════════════════════════════════════════════
       TESTIMONIALS
    ══════════════════════════════════════════════════════════════════ */
    #reviews {
      position: relative;
      overflow: hidden;
    }

    #reviews-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.55;
      filter: saturate(0.5) brightness(0.9);
      z-index: 0;
    }

    #reviews-raster {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background-image: radial-gradient(circle, rgba(10,10,10,0.65) 1px, transparent 1px);
      background-size: 4px 4px;
    }

    #reviews-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        to bottom,
        rgba(10,10,10,0.5) 0%,
        rgba(10,10,10,0.65) 100%
      );
      pointer-events: none;
    }

    #reviews > .container {
      position: relative;
      z-index: 2;
    }

    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
    }

    .review-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      padding: 2rem;
      position: relative;
    }

    .review-card::before {
      content: '"';
      font-family: var(--font-head);
      font-size: 5rem;
      color: var(--neon);
      opacity: 0.15;
      position: absolute;
      top: -0.5rem;
      left: 1.5rem;
      line-height: 1;
      pointer-events: none;
    }

    .review-text {
      font-size: 0.95rem;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 1.5rem;
    }

    .review-author {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--neon);
    }

    /* ══════════════════════════════════════════════════════════════════
       DET PRAKTISKE
    ══════════════════════════════════════════════════════════════════ */
    #det-praktiske { background: var(--bg-alt); }

    .praktiske-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
      margin-top: 1rem;
    }

    .praktiske-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      padding: 2rem;
      transition: border-color 0.3s;
    }

    .praktiske-card:hover { border-color: rgba(var(--neon-rgb),0.3); }

    .card-icon {
      width: 40px;
      height: 40px;
      margin-bottom: 1.25rem;
      color: var(--neon);
    }

    .card-title {
      font-family: var(--font-head);
      font-size: 1.4rem;
      letter-spacing: 0.05em;
      color: #fff;
      margin-bottom: 0.75rem;
    }

    .card-body {
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.8;
    }

    .price-tag {
      display: inline-block;
      margin-top: 1rem;
      font-family: var(--font-head);
      font-size: 2rem;
      color: var(--neon);
      letter-spacing: 0.05em;
    }

    /* ══════════════════════════════════════════════════════════════════
       KONTAKT
    ══════════════════════════════════════════════════════════════════ */
    #kontakt {
      position: relative;
      overflow: hidden;
    }

    #kontakt-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.55;
      filter: saturate(0.5) brightness(0.9);
      z-index: 0;
    }

    #kontakt-raster {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background-image: radial-gradient(circle, rgba(10,10,10,0.65) 1px, transparent 1px);
      background-size: 4px 4px;
    }

    #kontakt-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        to bottom,
        rgba(10,10,10,0.45) 0%,
        rgba(10,10,10,0.65) 100%
      );
      pointer-events: none;
    }

    #kontakt > .container {
      position: relative;
      z-index: 2;
    }

    .kontakt-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: start;
    }

    /* Single-column centred layout when no form */
    .kontakt-inner--simple {
      grid-template-columns: 1fr;
      max-width: 600px;
      margin: 0 auto;
    }

    .kontakt-text p {
      color: var(--text-muted);
      margin-bottom: 1rem;
      font-size: 1rem;
    }

    .contact-details {
      margin-top: 2rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .contact-detail {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.9rem;
      color: var(--text-muted);
    }

    .contact-detail svg {
      color: var(--neon);
      flex-shrink: 0;
      width: 18px;
      height: 18px;
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .form-group label {
      font-size: 0.7rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-muted);
      font-weight: 500;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
      background: var(--bg-card);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 0.85rem 1rem;
      font-family: var(--font-body);
      font-size: 0.9rem;
      outline: none;
      border-radius: 2px;
      transition: border-color 0.25s;
      width: 100%;
    }

    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      border-color: var(--neon);
      box-shadow: 0 0 0 2px rgba(var(--neon-rgb),0.08);
    }

    .form-group textarea { resize: vertical; min-height: 130px; }

    .form-group select option { background: #1a1a1a; }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .btn-submit {
      margin-top: 0.5rem;
      background: var(--neon);
      color: #000;
      border: none;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 1rem 2rem;
      cursor: pointer;
      border-radius: 2px;
      transition: all 0.3s;
      align-self: flex-start;
    }

    .btn-submit:hover {
      background: transparent;
      color: var(--neon);
      box-shadow: 0 0 20px rgba(var(--neon-rgb),0.25), inset 0 0 0 1px var(--neon);
    }

    @media (max-width: 768px) {
      .kontakt-inner { grid-template-columns: 1fr; gap: 3rem; }
      .form-row { grid-template-columns: 1fr; }
    }

    /* ══════════════════════════════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════════════════════════════ */
    footer {
      background: var(--bg);
      border-top: 1px solid var(--border);
      padding: 2.5rem 0;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .footer-logo {
      font-family: var(--font-head);
      font-size: 1.5rem;
      letter-spacing: 0.1em;
      color: #fff;
    }

    .footer-logo span { color: var(--orange-bright); }

    .footer-copy {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    /* ══════════════════════════════════════════════════════════════════
       KEYFRAMES
    ══════════════════════════════════════════════════════════════════ */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: none; }
    }

    @keyframes scrollLine {
      0%, 100% { transform: scaleY(1); opacity: 1; }
      50%       { transform: scaleY(0.4); opacity: 0.3; }
    }

    /* ─── Neon pulse on hover ────────────────────────────────────────── */
    @keyframes neonPulse {
      0%, 100% { box-shadow: 0 0 6px var(--neon); }
      50%       { box-shadow: 0 0 20px var(--neon), 0 0 40px rgba(var(--neon-rgb),0.3); }
    }

    .glow-line { animation: neonPulse 3s ease-in-out infinite; }