.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 10px 16px;
  background: #553322;
  color: #FAFAFA;
  font-size: 14px;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
}

:root {
    --bg: #2A2A2A;
    --accent: #553322;
    --light: #FAFAFA;
    --dim: rgba(250, 250, 250, 0.55);
    --hair: rgba(250, 250, 250, 0.12);
  }

  *, *::before, *::after { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--light);
    font-family: "DM Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  html.lenis,
  html.lenis body {
    height: auto;
  }

  .lenis.lenis-smooth {
    scroll-behavior: auto !important;
  }

  .lenis.lenis-stopped {
    overflow: hidden;
  }

  body { min-height: 100vh; }

  ::selection { background: var(--accent); color: var(--light); }

  a { color: inherit; text-decoration: none; }

  /* ───────────── CURTAIN ───────────── */
  .curtain {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: #1a1a1a;
    pointer-events: none;
  }

  /* ───────────── NAV ───────────── */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    pointer-events: none;
    opacity: 0;
  }
  .nav > * { pointer-events: auto; }

  .nav__logo {
    width: 80px;
    height: 80px;
    padding: 0;
    color: var(--light);
    display: block;
  }

  .nav__cta {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-size: clamp(17px, 1.85vw, 32px);
    line-height: 0.86;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--light);
    display: inline-block;
    min-width: 0;
    animation: ctaFloat 3.2s ease-in-out infinite alternate;
    will-change: transform;
  }

  .nav__cta-surface {
    background: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 11px 10px;
    border-radius: 8px;
    border: none;
    transform-origin: center center;
    transition: background 0.3s ease, transform 0.2s ease;
    will-change: transform;
  }

  .nav__cta:hover .nav__cta-surface {
    background: #6a402b;
    transform: scale(1.03);
  }

  /* ───────────── PAGE CONTENT ───────────── */
  .page-content {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* ───────────── HERO ───────────── */
  .hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
  }

  .hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }

  .hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.45s ease;
  }

  .hero__overlay-mark {
    width: min(48vh, 48vw);
    height: min(48vh, 48vw);
    color: #fff7ef;
    transform: perspective(900px) rotateX(3.5deg) rotateY(-4deg) translateZ(0);
    transform-origin: center center;
    filter:
      drop-shadow(-1px -1px 0 rgba(255,255,255,0.18))
      drop-shadow(2px 3px 0 rgba(85,51,34,0.36))
      drop-shadow(0 18px 26px rgba(0,0,0,0.44))
      drop-shadow(0 42px 82px rgba(0,0,0,0.48))
      drop-shadow(0 0 16px rgba(255,247,239,0.12));
    will-change: transform, filter;
  }

  .hero__overlay.is-hidden {
    opacity: 0;
  }

  .hero__overlay .rl-mark.is-drawn .rl-arc {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.2s cubic-bezier(.7,0,.2,1);
  }
  .hero__overlay .rl-mark.is-drawn .rl-arc-2 {
    transition-delay: 0.15s;
  }

  .hero__hint {
    position: absolute;
    left: 50%;
    top: calc(50% + min(24vh, 24vw) + 62px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #fff7ef;
    opacity: 0.88;
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45));
    animation: heroHintBounce 2.2s ease-in-out infinite;
    transition: opacity 0.5s ease;
    white-space: nowrap;
  }

  .hero__hint-label {
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255, 247, 239, 0.75);
    line-height: 1;
  }

  .hero__hint svg {
    width: 34px;
    height: 34px;
    display: block;
  }

  .hero__hint.is-hidden {
    opacity: 0;
    animation: none;
  }

  @media (min-width: 1025px) {
    .hero__hint {
      top: auto;
      bottom: 110px;
    }
  }

  @keyframes heroHintBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.8; }
    50% { transform: translateX(-50%) translateY(10px); opacity: 1; }
  }

  /* ───────────── QUOTE ───────────── */
  .quote {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 0 8vw;
    text-align: center;
    position: relative;
    background: var(--accent);
  }


  .pull {
    text-align: center;
    padding: 0;
    position: relative;
    z-index: 1;
  }

  .pull__q {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-size: clamp(32px, 4vw, 64px);
    line-height: 1.2;
    max-width: 22ch;
    margin: 0 auto;
    color: var(--light);
  }

  .pull__attr {
    margin-top: 28px;
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(250,250,250,0.6);
  }

  .quote .pull__q,
  .quote .pull__attr {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-20px);
    transition: opacity 1.1s ease, filter 0.75s ease, transform 1.1s cubic-bezier(.2,.8,.2,1);
  }

  .quote .pull__attr {
    transition-delay: 0.28s;
  }

  .quote.is-visible .pull__q,
  .quote.is-visible .pull__attr {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }



  /* ───────────── GALLERY ───────────── */
  .gallery {
    position: relative;
    overflow: hidden;
    background: var(--bg);
    min-height: 100vh;
  }


  .gallery__track {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100vh;
    padding-left: 5vw;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform;
  }

  .gallery__item {
    --gallery-item-height: 100%;
    --gallery-item-width: 66.6667vh;
    margin: 0;
    flex: 0 0 var(--gallery-item-width);
    width: var(--gallery-item-width);
    height: var(--gallery-item-height);
    aspect-ratio: 2 / 3;
    overflow: hidden;
  }

  .gallery__item--tall  { --gallery-item-height: 92%; --gallery-item-width: 61.3333vh; }
  .gallery__item--medium { --gallery-item-height: 75%; --gallery-item-width: 50vh; }
  .gallery__item--short  { --gallery-item-height: 60%; --gallery-item-width: 40vh; }
  .gallery__item--wide { --gallery-item-height: 92%; --gallery-item-width: 138vh; aspect-ratio: 3 / 2; }

  .gallery__photo {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform-origin: center center;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
  }

  .gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
  }

  /* ───────────── GALLERY CURSOR ───────────── */

  /* ───────────── FOOTER ───────────── */
  .footer {
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: 18px;
    z-index: 100;
    pointer-events: none;
    animation: footerFloat 6.4s ease-in-out infinite alternate;
    will-change: transform;
  }

  .footer__statement {
    background: var(--accent);
    border-radius: 8px;
    color: var(--light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 2vw, 34px);
    font-family: "DM Serif Display", serif;
    font-size: clamp(22px, 2.65vw, 46px);
    font-weight: 400;
    line-height: 0.86;
    text-transform: uppercase;
    padding: 11px 14px 15px;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: auto;
    transform-origin: center center;
    will-change: transform;
  }

  .footer__statement a {
    color: inherit;
  }

  .footer__item {
    min-width: 0;
  }

  /* ───────────── COOKIE CONSENT ───────────── */
  .cookie-consent {
    position: fixed;
    top: 112px;
    left: 32px;
    z-index: 140;
    width: min(380px, calc(100vw - 64px));
    color: var(--light);
    background: rgba(42, 42, 42, 0.82);
    border: 1px solid rgba(250, 250, 250, 0.16);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -12px, 0);
    transition: opacity 0.42s ease, transform 0.42s cubic-bezier(.16, 1, .3, 1), visibility 0.42s ease;
    pointer-events: none;
  }

  .cookie-consent.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }

  .cookie-consent__label {
    margin: 0 0 9px;
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    line-height: 0.95;
    text-transform: uppercase;
  }

  .cookie-consent__text {
    margin: 0;
    max-width: 36ch;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(250, 250, 250, 0.74);
  }

  .cookie-consent__actions {
    display: flex;
    gap: 8px;
    margin-top: 15px;
  }

  .cookie-consent__button {
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 11px 12px;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  }

  .cookie-consent__button:hover {
    transform: translateY(-1px);
  }

  .cookie-consent__button--primary {
    background: var(--accent);
    color: var(--light);
  }

  .cookie-consent__button--primary:hover {
    background: #6a402b;
  }

  .cookie-consent__button--ghost {
    background: rgba(250, 250, 250, 0.1);
    color: rgba(250, 250, 250, 0.82);
  }

  .cookie-consent__button--ghost:hover {
    background: rgba(250, 250, 250, 0.16);
    color: var(--light);
  }

  @keyframes footerFloat {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to { transform: translate3d(5px, -10px, 0) rotate(0.34deg); }
  }

  @keyframes ctaFloat {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to { transform: translate3d(-3px, -6px, 0) rotate(-0.34deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .curtain { display: none; }
    .footer,
    .nav__cta {
      animation: none;
    }
  }

  /* ───────────── FOCUS ───────────── */
  a:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--light);
    outline-offset: 4px;
    border-radius: 4px;
  }

  .nav__cta:focus-visible .nav__cta-surface {
    outline: 2px solid var(--light);
    outline-offset: 4px;
    border-radius: 8px;
  }

  .nav__cta:focus-visible {
    outline: none;
  }

  .footer__statement a:focus-visible {
    outline-color: var(--light);
    outline-offset: 2px;
  }

  /* ───── Reveal helpers ───── */
  .reveal { opacity: 0; transform: translateY(40px); }

  /* ─────── ROUS mark (SVG) ─────── */
  .rl-mark {
    color: var(--light);
    display: block;
    line-height: 0;
  }
  .rl-mark svg { width: 100%; height: 100%; display: block; }
  .rl-arc {
    stroke-width: 3.17px;
    stroke-dasharray: 720;
    stroke-dashoffset: 720;
  }
  .rl-mark.is-drawn .rl-arc { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.7,0,.2,1); }
  .rl-mark.is-drawn .rl-arc-2 { transition-delay: 0.25s; }

  /* ───────────── PRIVACY MODAL ───────────── */
  .privacy-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }

  .privacy-modal.is-open {
    opacity: 1;
    visibility: visible;
  }

  .privacy-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .privacy-modal__panel {
    position: relative;
    width: min(640px, calc(100vw - 48px));
    max-height: calc(100vh - 80px);
    background: var(--bg);
    border: 1px solid rgba(250, 250, 250, 0.12);
    border-radius: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translate3d(0, 20px, 0);
    transition: transform 0.4s cubic-bezier(.16, 1, .3, 1);
  }

  .privacy-modal.is-open .privacy-modal__panel {
    transform: translate3d(0, 0, 0);
  }

  .privacy-modal__close {
    position: sticky;
    top: 0;
    float: right;
    z-index: 2;
    background: var(--bg);
    border: none;
    color: var(--light);
    font-size: 28px;
    line-height: 1;
    padding: 16px 20px;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .privacy-modal__close:hover {
    opacity: 0.6;
  }

  .privacy-modal__content {
    padding: 40px 36px 48px;
  }

  .privacy-modal__title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 36px;
    color: var(--light);
  }

  .privacy-modal__section {
    margin-bottom: 28px;
  }

  .privacy-modal__section h3 {
    font-family: "DM Serif Display", serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--light);
    margin: 0 0 10px;
  }

  .privacy-modal__section p {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: var(--dim);
    margin: 0 0 10px;
  }

  .privacy-modal__section p:last-child {
    margin-bottom: 0;
  }

  /* ───────────── MOBILE ───────────── */
  @media (max-width: 1024px) {
    .privacy-modal__panel {
      width: calc(100vw - 24px);
      max-height: calc(100vh - 40px);
    }
    .privacy-modal__content {
      padding: 28px 20px 36px;
    }
    .privacy-modal__title {
      margin-bottom: 24px;
    }
    .quote:not(.quote--2) .pull__q {
      font-size: 0 !important;
      max-width: none !important;
    }
    .quote:not(.quote--2) .pull__q::before {
      content: "Kuuntelen\A\AToteutan\A\AViimeistelen";
      white-space: pre;
      display: block;
      font-family: "DM Serif Display", serif;
      font-size: clamp(20px, 5.8vw, 32px);
      line-height: 1.2;
      color: var(--light);
    }
    .nav { padding: 16px 20px; }
    .nav__logo { width: 60px; height: 60px; }
    .nav__cta {
      font-size: clamp(18px, 5.4vw, 30px);
      line-height: 0.9;
    }
    .nav__cta-surface {
      padding: 8px 10px 10px;
    }
    .footer {
      left: 12px;
      right: 12px;
      bottom: 12px;
    }
    .footer__statement {
      flex-direction: row;
      align-items: center;
      gap: 5px;
      font-size: clamp(12px, 3.4vw, 15px);
      line-height: 1;
      padding: 6px 10px 8px;
      white-space: nowrap;
      overflow: hidden;
    }
    .footer__item:last-child {
      display: none;
    }
    .cookie-consent {
      top: 86px;
      left: 12px;
      right: 12px;
      width: auto;
      padding: 10px 12px;
    }
    .cookie-consent__label {
      font-size: 15px;
      margin-bottom: 5px;
    }
    .cookie-consent__text {
      max-width: none;
      font-size: 11px;
      line-height: 1.3;
    }
    .cookie-consent__actions {
      flex-direction: row;
      gap: 6px;
      margin-top: 10px;
    }
    .cookie-consent__button {
      flex: 1;
      font-size: 11px;
      padding: 8px 10px;
    }

    /* Mobile lockdown applies to ALL mobile viewports — prevents native scroll
       even before JS adds .is-mobile-virtual-scroll class. */
    html,
    body {
      width: 100%;
      height: var(--mobile-vh, 100vh);
      min-height: var(--mobile-vh, 100vh);
      overflow: hidden;
      overscroll-behavior: none;
    }
    body {
      position: fixed;
      inset: 0;
      touch-action: none;
    }

    /* ─── Mobile/iPad: virtual swipe panels (marasrl-style) ─── */
    html.is-mobile-virtual-scroll .page-content {
      position: fixed;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: var(--mobile-vh, 100vh);
      padding: 0;
      background: var(--bg);
      overflow: visible;
      will-change: transform;
      transform: translate3d(0, 0, 0);
      touch-action: none;
    }
    html.is-mobile-virtual-scroll .hero,
    html.is-mobile-virtual-scroll .quote,
    html.is-mobile-virtual-scroll .gallery__item,
    html.is-mobile-virtual-scroll .gallery__item--tall,
    html.is-mobile-virtual-scroll .gallery__item--medium,
    html.is-mobile-virtual-scroll .gallery__item--short {
      position: fixed;
      inset: 0;
      width: 100%;
      min-height: var(--mobile-vh, 100vh);
      height: var(--mobile-vh, 100vh);
      overflow: hidden;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      will-change: transform;
    }
    html.is-mobile-virtual-scroll .hero {
      z-index: 1;
    }
    html.is-mobile-virtual-scroll .quote {
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 8vw;
      background: var(--accent);
    }
    html.is-mobile-virtual-scroll .quote--2 {
      z-index: 3;
    }
    html.is-mobile-virtual-scroll .quote .pull {
      width: 100%;
      max-width: 520px;
      margin: 0 auto;
      padding: 0 6vw;
    }
    html.is-mobile-virtual-scroll .quote .pull__q {
      font-size: clamp(20px, 5.8vw, 32px);
      max-width: 18ch;
    }
    html.is-mobile-virtual-scroll .quote .pull__attr {
      margin-top: 14px;
      font-size: 11px;
    }
    html.is-mobile-virtual-scroll .gallery {
      position: static;
      z-index: auto;
      min-height: auto;
      overflow: visible;
    }
    html.is-mobile-virtual-scroll .gallery__track {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      height: auto;
      padding: 0;
      transform: none;
      will-change: auto;
    }
    html.is-mobile-virtual-scroll .gallery__item {
      height: var(--mobile-vh, 100vh);
      width: 100%;
      flex: 0 0 auto;
    }
    /* Rising z-index so each card covers the previous */
    html.is-mobile-virtual-scroll .gallery__item:nth-child(1) { z-index: 1; }
    html.is-mobile-virtual-scroll .gallery__item:nth-child(2) { z-index: 2; }
    html.is-mobile-virtual-scroll .gallery__item:nth-child(3) { z-index: 3; }
    html.is-mobile-virtual-scroll .gallery__item:nth-child(4) { z-index: 4; }
    html.is-mobile-virtual-scroll .gallery__item:nth-child(5) { z-index: 5; }
    html.is-mobile-virtual-scroll .gallery__item:nth-child(6) { z-index: 6; }
    html.is-mobile-virtual-scroll .gallery__item:nth-child(7) { z-index: 7; }
    html.is-mobile-virtual-scroll .gallery__item:nth-child(8) { z-index: 8; }

    html.is-mobile-virtual-scroll .gallery__photo {
      display: block;
      width: 100%;
      height: 100%;
      transform-origin: center center;
    }
	    html.is-mobile-virtual-scroll .gallery__item img {
	      width: 100%;
	      height: 100%;
	      object-fit: cover;
	      pointer-events: none;
	    }
    html.is-mobile-virtual-scroll .gallery__back-top {
      position: absolute;
      right: 16px;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 58px);
      z-index: 24;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 10px 10px;
      border: 0;
      border-radius: 8px;
      background: var(--accent);
      color: var(--light);
      font-family: "DM Serif Display", serif;
      font-size: clamp(16px, 4.8vw, 22px);
      font-weight: 400;
      line-height: 0.86;
      text-transform: uppercase;
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
      transform: translate3d(0, 0, 0);
      transition: background 0.28s ease, transform 0.22s cubic-bezier(.2,.8,.2,1);
      pointer-events: auto;
    }
    html.is-mobile-virtual-scroll .gallery__back-top:active {
      background: #6a402b;
      transform: translate3d(0, -2px, 0) scale(1.03);
    }
    html.is-mobile-virtual-scroll .footer {
      bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    }
	  }