/*! atrium · site styles · v1.6.2
 * Source: atrium-library/src/atrium.css. Linked in the site head.
 * Collected 2026-10-16 from every custom-code <style> block on the site.
 * Designer-only rules (.wf-design-mode …) stay in the GLOBAL CODE embed,
 * because external stylesheets don't load on the Designer canvas.
 */

/* ===== Lenis  ·  formerly: site head custom code ===== */
/* Lennis Smooth Scroll CSS */
  html.lenis {
    height: auto;
  }
  .lenis.lenis-smooth {
    scroll-behavior: auto;
  }
  .lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
  }
  .lenis.lenis-stopped {
    overflow: hidden;
  }

/* ===== Globals: type, font scaling, rendering, GSAP helpers  ·  formerly: GLOBAL CODE component ===== */
html {
    font-family: 'PP Frama', sans-serif;
    /* v1.5.11: stylistic sets from Figma (Atrium // Desktop); v1.5.12: tails (ss01) off.
       ss03 = round dots (punctuation + i/j), ss06 = alt Ä Ü, ss08 = alt & € */
    font-feature-settings: 'ss03' 1, 'ss06' 1, 'ss08' 1, 'lnum' 1, 'pnum' 1;
  }
  /* FONT SCALING */

  html {
    font-size: calc(0.625rem + 0.41666666666666663vw);
  }
  @media screen and (max-width: 1920px) {
    html {
      font-size: calc(0.625rem + 0.41666666666666674vw);
    }
  }
  @media screen and (max-width: 1440px) {
    html {
      font-size: calc(0.5991091314031181rem + 0.4454342984409799vw);
    }
  }
  @media screen and (max-width: 991px) {
    html {
      font-size: calc(0.5719866071428572rem + 0.8928571428571428vw);
    }
  }
  @media screen and (max-width: 767px) {
    html {
      font-size: calc(0.8894348894348895rem + 0.49140049140049136vw);
    }
  }
  @media screen and (max-width: 360px) {
    html {
      font-size: calc(0.7493036211699164rem + 1.1142061281337046vw);
    }
  }

  /* FONT RENDERING */

  body {
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-synthesis-weight: none;
  }

  ::selection {
    background: #f74e04;
    color: white;
  }

  ::-moz-selection {
    background: #f74e04;
    color: white;
  }

  /* GSAP FIXES */

  [gsap-scroll='paragraph'] div {
    line-height: 1.4;
    margin: -0.2em 0;
    padding: 0;
  }
  /* v1.5.11: line pitch = Figma line-height. Lines keep 1.4 for the reveal mask;
     the collapsed negative margin brings the pitch back to --split-lh (was a fixed 1.2em). */
  .heading-h3 { --split-lh: 1.2632; } /* H3 38/48 */
  .heading-h2 { --split-lh: 1.2727; } /* H2 44/56 */
  @media screen and (max-width: 767px) {
    .heading-h3, .heading-h2 { --split-lh: 1.2; } /* mobile: unchanged (no Figma frame) */
  }
  [gsap-scroll='paragraph'] > div {
    margin-top: calc((var(--split-lh, 1.2) - 1.4) * 1em);
    margin-bottom: calc((var(--split-lh, 1.2) - 1.4) * 1em);
  }

  .split-line-wrap {
    overflow: hidden;
    display: block;
  }

  .split-line {
    display: block;
    will-change: transform;
  }

  /* RICH TEXT FORMATTING */

  .w-richtext > :first-child {
    margin-top: 0;
  }

  .w-richtext > :last-child {
    margin-bottom: 0;
  }

  /* SCROLLBAR STYLING */

  ::-webkit-scrollbar {
    width: 0px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: transparent;
  }

  html {
    scrollbar-gutter: stable;
  }

  /* MEDIA STYLING */

  figure {
    max-width: none !important;
  }

  figure div {
    width: 100%;
    max-width: none !important;
  }

/* ===== Nav  ·  formerly: NAV component ===== */
.menu-sublink {
    transition-delay: 0.05s;
  }

/* ===== Cart + home hero hover  ·  formerly: CART component, Home page embed (hero) =====
   v1.4.5: only on devices that really hover (a tap would leave them stuck) */
@media (hover: hover) and (pointer: fine) {
.cart-suggestion:hover .cart-atrium-icon {
    border-right-color: var(--_01-colors---semantics--border--border-alternate);
  }
  .cart-suggestion:hover .cart-button {
    border-top-color: var(--_01-colors---semantics--border--border-alternate);
  }

.hero-waves-button--wrap:hover .hero-waves--button {
    width: 2.25rem;
    height: 2.25rem;
    border-color: white;
  }
  .hero-waves-button--wrap:hover .hero-waves-button--circle {
    width: 3.5rem;
    height: 3.5rem;
    border-color: white;
  }
  .hero-waves-button--wrap:hover .body-regular {
    transform: translateY(0rem);
  }

}

/* ===== Home slider: active card  ·  formerly: Home page embed (slider) ===== */
.slider--card.active .slider-card--circle {
    transform: translate(-50%, -50%) scale(2.4);
  }
  .slider--card.active .body-large.is--initial {
    transform: translateY(-100%);
    transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1) 0.05s;
  }

  .slider--card.active .body-large.is--active {
    transform: translateY(0);
    transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1) 0.1s;
  }

  .slider--card.active .body-small.is--initial {
    transform: translateY(-100%);
  }

  .slider--card.active .body-small.is--active {
    transform: translateY(0);
  }

/* ===== Load intro (v1.1.0): hold back what the hero-intro / bottom-bar
   modules animate in, until the script has set their start states.
   Failsafe: shown anyway after 4 s if the script never runs. ===== */
@keyframes atrium-failsafe { to { visibility: visible; } }
html.w-mod-js:not(.atrium-intro):not(.atrium-preload) .atrium--demo,
html.w-mod-js:not(.atrium-intro):not(.atrium-preload) .bottom-bar {
  visibility: hidden;
  animation: atrium-failsafe 0s 4s forwards;
}

/* ===== Legal pages (v1.2.0) ===== */
/* Rich text inside .legal-content: tag styles can't be set per class in
   Webflow's API, so they live here. Layout/spacing of the blocks is native. */
.legal-content h2 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.333;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.legal-content h2:not(:first-child) { margin-top: 2rem; }
.legal-content h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 300;
}
/* v1.5.3: legal paragraphs and list items at body-regular everywhere (v1.5.11: 16/26 per Figma) */
.legal-content p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.625;
}
.legal-content ul,
.legal-content ol { margin: 0; padding-left: 1.6875rem; }
.legal-content li { margin-bottom: 0.5rem; font-size: 1rem; line-height: 1.625; }
.legal-content li:last-child { margin-bottom: 0; }
.legal-content a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
@media screen and (max-width: 767px) {
  .legal-content h2 { font-size: 1.25rem; line-height: 1.4; }
}

/* Legal tabs: the orange pill slides under the active tab (legal-tabs module).
   Without JS the current tab carries the orange itself. Colors need
   !important: the site globals set a { color: inherit !important }. */
.legal-tabs { position: relative; }
.legal-pill { left: 0; top: 0; }
.legal-tab { transition: color 0.35s cubic-bezier(0.2, 0, 0.2, 1); }
.legal-tab.w--current { background-color: var(--_01-colors---semantics--background--background-tertiary); color: var(--_01-colors---semantics--text--text-alternate) !important; }
html.atrium-intro .legal-tab.w--current { background-color: transparent; }
/* v1.3.0: the current tab stays white from the first paint (no black flash
   while the script marks it active); only a tab the pill has left goes dark */
html.atrium-intro .legal-tabs:has(.is-active) .legal-tab.w--current:not(.is-active) { color: inherit !important; }
html.atrium-intro .legal-tab.is-active { color: var(--_01-colors---semantics--text--text-alternate) !important; }
html.atrium-intro .legal-pill { opacity: 1; }

/* FAQ accordion (accordion module toggles .is-open; grid 0fr -> 1fr) */
.faq--item:last-child { border-bottom: 1px solid var(--_01-colors---semantics--border--border-primary); }
.faq--head { cursor: pointer; }
.faq--item.is-open .faq--body { grid-template-rows: 1fr; }
.faq--item.is-open .faq--bar.is-vertical { transform: rotate(90deg); }
.faq--head:focus-visible { outline: 2px solid currentColor; outline-offset: 0.25rem; }

@media (prefers-reduced-motion: reduce) {
  .faq--body, .faq--bar, .legal-tab { transition: none !important; }
}

/* ===== v1.3.0 ===== */
/* Preloader (first visit only). html.atrium-preload is set by the inline
   snippet in the site head before the first paint; the page stays hidden
   until the preloader has played (failsafe: shown after 7 s). */
/* v1.4.1: the page renders underneath (in its final state) and is covered
   from the first paint; the intro start states are set when the preloader
   ends. Failsafe: the cover goes after 7 s if the script never runs. */
@keyframes atrium-cover-failsafe { to { opacity: 0; visibility: hidden; } }
html.atrium-preload body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1999;
  background-color: var(--_01-colors---semantics--background--background-primary);
  pointer-events: none;
  animation: atrium-cover-failsafe 0s 7s forwards;
}
.atrium-preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--_01-colors---semantics--background--background-primary);
}
.atrium-preloader i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}
.atrium-preloader .is--stroke { border: 1px solid var(--_01-colors---semantics--border--border-primary); }
.atrium-preloader .is--dark { background-color: var(--_01-colors---semantics--background--background-alternate); }
.atrium-preloader .is--orange {
  background-color: var(--_01-colors---semantics--background--background-tertiary);
  border: 1px solid var(--_01-colors---semantics--border--border-quaternary);
}
.atrium-preloader .is--ring { border: 1px solid var(--_01-colors---semantics--border--border-quaternary); }
.atrium-preloader .is--light {
  background-color: var(--_01-colors---semantics--background--background-primary);
  border: 1px solid var(--_01-colors---semantics--border--border-quaternary);
}

/* Page transition: 1px line on the edge of the circle */
.atrium-circle-ring {
  position: fixed;
  z-index: 3;
  width: 0;
  height: 0;
  border: 1px solid var(--_01-colors---semantics--border--border-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Cart: the wordmark keeps its own proportions (it was stretched across the row) */
.cart-logo { width: auto; }
.cart-logo svg { width: auto; height: 100%; }

@media screen and (max-width: 767px) {
  /* scroll-reveal headlines: the circle's stage is wider than the screen on
     phones (Webflow: .special-heading--wrap 170vw), clipped here without
     breaking the sticky inside */
  .section.home-scroll-text { overflow-x: clip; }
  /* overlays: content scrolls when it is taller than the visible screen */
  .popup-content { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .popup-container { overflow: hidden; }
}

/* ===== v1.4.0 ===== */
/* KPI card outlines (kpi-art module): drawn through the SVG as a mask, so the
   line takes border-primary, and border-quaternary on the orange active card */
.slider-card--img.is--masked { visibility: hidden; }
.slider-card--art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--_01-colors---semantics--border--border-primary);
  -webkit-mask: var(--art) center / 100% 100% no-repeat;
  mask: var(--art) center / 100% 100% no-repeat;
  transition: background-color 0.25s cubic-bezier(0.2, 0, 0.2, 1);
}
.slider--card.active .slider-card--art { background-color: var(--_01-colors---semantics--border--border-quaternary); }

/* scroll circle headlines (special-reveal module): transform layers */
.special-heading--fill, .special-heading--fill > .u-heading-special { will-change: transform; }

/* v1.4.3: the footer logo's mouse-follow gradient stays inside the logo
   (it widened narrow pages); no element may widen the page sideways */
.footer-logo.mask, .logo-404.mask { overflow: clip; }
body { overflow-x: clip; }

/* v1.4.4: scroll circle outline (special-reveal): a separate ring keeps the
   1px border at every size; the scaling fill drops its own border */
.special-heading--fill.has-ring { border-color: transparent; }
.special-heading--ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1; /* above the page background (z-index -1 painted underneath it) */
  width: 0;
  height: 0;
  border: 1px solid var(--_01-colors---primitives--neutral-500);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  visibility: hidden;
}

/* ===== v1.4.5 ===== */
/* scroll circle headlines: the text sits next to the scaling circle and is
   clipped by a circle of the same size (special-reveal) */
/* each headline is its own layer, so the next circle (opaque fill) covers
   the headline before it, as when the text sat inside the circle */
.special-heading--wrap { isolation: isolate; }
.special-heading--wrap > .u-heading-special.is-clipped {
  position: relative;
  z-index: 0;
  flex: none;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  /* each headline is its own layer, so the next circle (opaque fill) covers
   the headline before it, as when the text sat inside the circle */
.special-heading--wrap { isolation: isolate; }
.special-heading--wrap > .u-heading-special.is-clipped { white-space: normal; }
}

/* KPI cards: description at Figma Body Medium 18/28 (v1.5.11) */
.card-sub .body-small { font-size: 1.125rem; line-height: 1.5556; }

/* KPI cards on phones (no orange active state): the top card of the stack
   shows its description, rising in from below */
@media screen and (max-width: 767px) {
  .slider--card .card-sub .body-small.is--initial {
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.3s ease;
  }
  .slider--card.is-top .card-sub .body-small.is--initial {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
  }
}

/* v1.4.6: purchase section on phones (Figma 14041:3433): smaller wordmark
   (embedded SVG, 222 px) and a slimmer button (variant padding 10 px).
   Row text size: Webflow (.body-large.is--medium, 767). */
@media screen and (max-width: 767px) {
  .cta--wrap .cta-logo svg { width: 13.875rem; height: auto; }
  .cta--wrap .button .button--content { padding: 0.625rem 0.75rem 0.625rem 0.625rem; }
}

/* ===== v1.5.0: in action (home) ===== */
.track--wave { display: flex; align-items: center; justify-content: space-between; touch-action: pan-y; }
.track--wave:focus-visible { outline: 1px solid var(--_01-colors---semantics--border--border-tertiary); outline-offset: 0.25rem; }
.track--bar {
  flex: none;
  width: 2px;
  min-height: 2px;
  background-color: var(--_01-colors---semantics--border--border-primary);
  transition: height 0.4s cubic-bezier(0.2, 0, 0.2, 1);
  pointer-events: none;
}
.track--bar.is-hover { background-color: var(--_01-colors---semantics--border--border-quaternary); }
.track--bar.is-played { background-color: var(--_01-colors---semantics--border--border-tertiary); }
/* artist card opens while the track plays; v1.5.2: absolute below the
   track, so opening it doesn't move the layout */
.in-action--track { position: relative; }
.track--artist { position: absolute; top: 100%; left: 0; right: 0; z-index: 1; }
.track--artist { transition: grid-template-rows 0.6s cubic-bezier(0.2, 0, 0.2, 1); }
.in-action--track.is-playing .track--artist { grid-template-rows: 1fr; }
/* the link icon sits beside the title; the underline spans both */
.track--title .link-underline { bottom: 0; }
/* v1.5.2: the title link hugs its text (the meta column stretched it to the producer line) */
.track--title { align-self: flex-start; }
@media screen and (max-width: 767px) {
  /* phones: the tracks are a swipe slider inside the container width
     (Figma 14056:9255), each artist card always shown below its track.
     v1.5.3: the row takes touches itself; the section is pointer-events:none,
     and iOS doesn't scroll a scroll box that inherits that. */
  .in-action--tracks {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    padding-left: 0;
    padding-right: 0;
    pointer-events: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .in-action--tracks::-webkit-scrollbar { display: none; }
  .in-action--track { scroll-snap-align: start; }
  .track--artist { position: static; grid-template-rows: 1fr; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .track--artist, .track--bar { transition: none; }
}
/* v1.5.1: hidden underlines sit fully outside (no sub-pixel sliver) */
.artist--social .link-underline.start--invisible,
.track--title .link-underline.start--invisible { transform: translateX(101%); }

/* v1.5.3: footer on phones (Figma 14056:9536): CTA + rings centred in the
   footer and running under the wordmark, links 12 px from the bottom, the
   credit on one line, the button as slim as in the purchase section.
   The wrap keeps its 4rem top padding above the footer top, so the CTA
   (content centre) and the rings (padding-box centre + 2rem) both land on 50%. */
@media screen and (max-width: 767px) {
  .container.footer { position: relative; padding-bottom: 0.75rem; }
  .container.footer > .footer-cta--wrap { position: absolute; top: -4rem; right: 0; bottom: 0; left: 0; height: auto; width: auto; }
  .footer-bottom .body-small { white-space: nowrap; }
  .footer-cta .button .button--content { padding: 0.625rem 0.75rem 0.625rem 0.625rem; }
}

/* v1.5.6: hint beside the sound toggle while the browser blocks sound
   (placed and shown by the sound-toggle module) */
.sound-hint {
  position: absolute;
  transform: translateY(-50%);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto; /* the bottom bar itself is pointer-events: none */
  color: var(--_01-colors---semantics--text--text-primary);
  /* v1.6.2: always shown (Sound on / off); makes way for the volume slider */
  transition: opacity 0.25s cubic-bezier(0.2, 0, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0, 0.2, 1);
}

/* v1.5.7: "in action" headline breaks after the first sentence. Phones and
   tablets wrap naturally (Figma). v1.5.12 (PP Frama): first sentence 15.64em,
   with " This" 17.54em; 17.1818em = Figma text box 756px at 44px. */
.home-testimonials .heading-h2 { max-width: 17.1818em; }

/* v1.6.0: sound toggle + volume in one pill (sound-toggle module). The
   slider slides out to the right of the toggle on hover / keyboard focus,
   on touch for a few seconds after a tap (.is-open). Hidden while the
   browser still waits for a first start (.is-blocked, the hint shows). */
.sound-control {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  pointer-events: auto;
  border-radius: 2.25rem;
  background-color: var(--_01-colors---semantics--background--background-primary);
}
.sound-volume {
  display: flex;
  align-items: center;
  width: 0;
  height: 2.25rem;
  overflow: hidden;
  opacity: 0;
  transition: width 0.4s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.2, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .sound-control:not(.is-blocked):hover .sound-volume { width: 6.5rem; opacity: 1; }
}
/* keyboard focus only: a tap leaves focus on the toggle */
.sound-control:has(:focus-visible) .sound-volume,
.sound-control:has(.sound-volume--input:active) .sound-volume,
.sound-control.is-open .sound-volume { width: 6.5rem; opacity: 1; }
.sound-control.is-blocked .sound-volume { width: 0; opacity: 0; }
/* v1.6.2: the Sound on / off label gives way while the slider is out.
   v1.6.3: it keeps its hover area while hidden (no pointer-events: none),
   so hovering the label no longer flips the hover on and off while the
   slider grows; the slider sits above it and takes over as it comes out. */
.sound-volume { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .sound-control:not(.is-blocked):hover .sound-hint { opacity: 0; transform: translate(-0.5rem, -50%); }
}
.sound-control:not(.is-blocked):has(:focus-visible) .sound-hint,
.sound-control:not(.is-blocked):has(.sound-volume--input:active) .sound-hint,
.sound-control.is-open:not(.is-blocked) .sound-hint { opacity: 0; transform: translate(-0.5rem, -50%); }
.sound-volume--input {
  --vol: 100%;
  flex: none;
  width: 5.25rem;
  height: 1.5rem;
  margin: 0 1rem 0 0.25rem;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.sound-volume--input:focus { outline: none; }
.sound-volume--input:focus-visible { outline: 1px solid var(--_01-colors---semantics--border--border-tertiary); outline-offset: 0.25rem; }
.sound-volume--input::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, #f74e04 var(--vol), #cacaca var(--vol));
}
.sound-volume--input::-moz-range-track { height: 2px; background: #cacaca; }
.sound-volume--input::-moz-range-progress { height: 2px; background: #f74e04; }
.sound-volume--input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: calc(1px - 0.3125rem);
  border: 0;
  border-radius: 50%;
  background: #f74e04;
}
.sound-volume--input::-moz-range-thumb {
  width: 0.625rem;
  height: 0.625rem;
  border: 0;
  border-radius: 50%;
  background: #f74e04;
}

/* v1.6.0: a page change that takes a moment: pulsing ring at the click
   point (page transitions) and a progress cursor until the page swaps */
html.atrium-loading, html.atrium-loading * { cursor: progress !important; }
@keyframes atrium-loader {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
.atrium-loader {
  position: fixed;
  z-index: 3;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--_01-colors---semantics--border--border-tertiary);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.2);
  animation: atrium-loader 1s cubic-bezier(0.2, 0, 0.2, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sound-volume, .sound-hint { transition: none; }
}