/* ---------- Shared tokens ---------- */
.QeLVq1vYOJwoHuEYTa5q {
  --piano-border: #9e3b3b;
  --piano-white: #ffffff;
  --piano-white-hover: #fef4e6;
  --piano-yellow: #ffebba;
  --piano-radius: 0.75rem;
  --piano-font: 'Ranchers', system-ui, sans-serif;

  /* Key dimensions — overridden inside .desktopOverlay for the taller overlay keys. */
  --key-height: 20rem;
  --black-key-height: 12.5rem;
}

/* =================================================================
   DESKTOP / TABLET LAYOUT (>= 480px)
   Virtual canvas 66.875rem x 12.5rem (≈ 1070 x 200 px at 16px root).
   The keys (height var(--key-height)) extend above the stage so the
   top of each key is naturally cut off by the viewport edge. Stage
   scales down via --nav-scale set in JS.
   ================================================================= */

/* The STATIC navbar — lives in normal document flow at the top of the
   page and scrolls away with the rest of the content. */
.CcBCIWq_BoEsSWQizhof {
  position: relative;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
  margin-top: -1.25rem; /* nudge the whole static nav slightly higher */
}

/* In the static nav only, sit the label a bit closer to the bottom border.
   The overlay keeps its own (larger) padding because its labels are
   vertical/rotated. */
.CcBCIWq_BoEsSWQizhof .zRDuyiscqWnlXhccNnBx {
  padding-bottom: 0.75rem;
}

/* In the static nav only, make the black keys hang longer (further into the
   white keys), reducing the visible gap between black-key bottoms and the
   labels at the bottom of the white keys. The overlay defines its own
   --black-key-height in the @media block below, so this only affects the
   static nav. */
.CcBCIWq_BoEsSWQizhof .EyDGjiYFBHq9zOPboN5G {
  height: 14rem;
}

.c3blxUFYhCvQu9Od5nEm {
  position: relative;
  width: calc(66.875rem * var(--nav-scale, 1));
  height: calc(12.5rem * var(--nav-scale, 1));
  pointer-events: none;
}

.aVKtCp_MKjCjshQ8GMHS {
  position: absolute;
  top: 0;
  left: 0;
  width: 66.875rem;
  height: 12.5rem;
  transform-origin: top left;
  transform: scale(var(--nav-scale, 1));
  pointer-events: none;
}

@media (max-width: 479px) {
  .CcBCIWq_BoEsSWQizhof { display: none; }
}

/* ---------- White / yellow keys ----------
   Keys are TALL — they extend above the stage top so the upper part is
   naturally clipped by the viewport edge. The label sits near the bottom
   (visible area). */
.zRDuyiscqWnlXhccNnBx {
  position: absolute;
  width: 10.625rem;
  height: var(--key-height);
  border: 0.375rem solid var(--piano-border);
  border-radius: var(--piano-radius);
  background: var(--piano-white);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1.375rem;
  text-decoration: none;
  color: var(--piano-border);
  font-family: var(--piano-font);
  font-size: 1.375rem;
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* removes 300ms tap delay + double-tap zoom */
  transition:
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 220ms ease;
  will-change: transform;
}

/* Per-key z-index so later keys overlap earlier ones (like a piano). */
.zRDuyiscqWnlXhccNnBx.q9iS27vOi7386am3LaA0 { z-index: 1; }
.zRDuyiscqWnlXhccNnBx.usT2vihUYP2F9Yuw1Nz2 { z-index: 2; }
.zRDuyiscqWnlXhccNnBx.Vu1oeAi1XDrG6uSnRNvt { z-index: 3; }
.zRDuyiscqWnlXhccNnBx.i_CZtwa8PI9zlmtwMxdw { z-index: 4; }
.zRDuyiscqWnlXhccNnBx.gNroELJ6VZhC0MB0ix7g { z-index: 5; }
.zRDuyiscqWnlXhccNnBx.GQr04qzXsfgupLzYkvMN { z-index: 6; }
.zRDuyiscqWnlXhccNnBx.F8Ma7XbpauC27sDIOiAm { z-index: 7; }

.zRDuyiscqWnlXhccNnBx.rvzxBqNELzBlCTMggCoA {
  background: var(--piano-yellow);
}

/* :active and :focus-visible work on every input type — keep them outside
   the hover media query so keyboard + touch users get the lift z-index. */
.zRDuyiscqWnlXhccNnBx:focus-visible,
.zRDuyiscqWnlXhccNnBx:active {
  z-index: 200;
}

.zRDuyiscqWnlXhccNnBx.Hmdt1cd0kIpSV6c4GMt3,
.zRDuyiscqWnlXhccNnBx:active {
  box-shadow: none !important;
  transition:
    background-color 80ms ease,
    color 80ms ease,
    box-shadow 80ms ease;
}

/* Hover styles only apply on devices that actually have a pointer that
   can hover — prevents "sticky hover" on iOS after a tap. */
@media (hover: hover) {
  .zRDuyiscqWnlXhccNnBx:hover {
    z-index: 200;
    background: var(--piano-white-hover);
    box-shadow: 0 0.875rem 1.375rem -0.625rem rgba(158, 59, 59, 0.45);
  }
  .zRDuyiscqWnlXhccNnBx.rvzxBqNELzBlCTMggCoA:hover {
    background: var(--piano-border);
    color: #ffffff;
  }
}

.SUoVXrnWGW8yTQXg03TK {
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Decorative black keys ----------
   Sit ABOVE the visible portion of the white keys. They're also clipped
   at the top by the viewport. Bottom edge ends above where the white-key
   label sits, so the labels never collide with the black keys (even on
   hover when the white key lifts up). */
.EyDGjiYFBHq9zOPboN5G {
  position: absolute;
  /* Above white-key hover z-index (200), so black keys always stay on top. */
  z-index: 300;
  width: 4.375rem;
  height: var(--black-key-height);
  background: var(--piano-border);
  border-radius: var(--piano-radius);
  pointer-events: none;
}

/* =================================================================
   DESKTOP SCROLL HAMBURGER + SLIDE-DOWN OVERLAY (>= 480px)
   Floating hamburger appears top-right when the user scrolls past the
   static navbar. Click → overlay slides down with cascading keys (the
   same per-item stagger as the mobile menu, but vertical direction).
   ================================================================= */
.NbLl67r_d4GrOurFhiaX {
  display: none;
}

@media (min-width: 480px) {
  .NbLl67r_d4GrOurFhiaX {
    display: block;
    position: fixed;
    top: 1.25rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    border: none;
    background: transparent;
    z-index: 1200;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.375rem);
    transition:
      opacity 320ms ease,
      transform 320ms cubic-bezier(0.65, 0, 0.35, 1);
  }
  .NbLl67r_d4GrOurFhiaX.oOkJOqIIh5Fv1kkPMj2W {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.NbLl67r_d4GrOurFhiaX span {
  position: absolute;
  left: 50%;
  width: 1.875rem;
  height: 0.25rem;
  background: var(--piano-border);
  border-radius: 0.125rem;
  transform-origin: center;
  transform: translateX(-50%);
  transition:
    transform 280ms cubic-bezier(0.65, 0, 0.35, 1),
    opacity 200ms ease,
    top 280ms cubic-bezier(0.65, 0, 0.35, 1);
}

.NbLl67r_d4GrOurFhiaX span:nth-child(1) { top: 0.875rem; }
.NbLl67r_d4GrOurFhiaX span:nth-child(2) { top: 1.375rem; }
.NbLl67r_d4GrOurFhiaX span:nth-child(3) { top: 1.875rem; }

.NbLl67r_d4GrOurFhiaX.Ceu4KzToPjPJVDsDsiAq span:nth-child(1) {
  top: 1.375rem;
  transform: translateX(-50%) rotate(45deg);
}
.NbLl67r_d4GrOurFhiaX.Ceu4KzToPjPJVDsDsiAq span:nth-child(2) {
  opacity: 0;
  transform: translateX(-50%) scaleX(0.3);
}
.NbLl67r_d4GrOurFhiaX.Ceu4KzToPjPJVDsDsiAq span:nth-child(3) {
  top: 1.375rem;
  transform: translateX(-50%) rotate(-45deg);
}

/* Blurry backdrop behind the overlay (covers the entire viewport). */
.WzO7YKaAGuIIu8EbG31c {
  display: none;
}

@media (min-width: 480px) {
  .WzO7YKaAGuIIu8EbG31c {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    z-index: 1000;
    pointer-events: none;
    transition:
      background-color 320ms ease,
      backdrop-filter 320ms ease,
      -webkit-backdrop-filter 320ms ease;
  }
  .WzO7YKaAGuIIu8EbG31c.mzjtkr5J8hLRy4i4Mefe {
    background: rgba(40, 20, 20, 0.18);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    pointer-events: auto;
  }
}

/* Slide-down overlay containing a second copy of the desktop nav.
   The overlay container itself doesn't animate — its CHILDREN (keys +
   pegs) slide in from above with a cascading stagger via GSAP.
   The overlay is 80svh tall; key + black-key heights are overridden
   here so the piano keyboard fills more of that 80svh space. */
.qzzINgxYfnpqucbGoBNN {
  display: none;
}

@media (min-width: 480px) {
  .qzzINgxYfnpqucbGoBNN {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80vh;
    height: 80svh;
    z-index: 1100;
    pointer-events: none;
    background: transparent;
    /* SSR safety: hide the overlay until React has hydrated and GSAP has
       parked the keys/pegs off-screen. Without this, Webflow's server-side
       render paints the overlay at its final on-screen position for one
       frame before useLayoutEffect runs (visible flash on page load). */
    visibility: hidden;

    /* Make the keys in this overlay much longer than in the static nav
       so they visibly fill the 80svh menu area on every viewport.
       The formula compensates for the stage's transform: scale() so the
       VISIBLE bottom of the keys lands at ~80svh regardless of viewport:
         visible_height = key_height × overlay_scale
       Adding the top-cutoff offset (avg key top ≈ -150px ≈ -9.375rem)
       keeps the bottom anchored to 80svh. */
    --key-height: calc(80svh / var(--overlay-scale, 1) + 9.375rem);
    --black-key-height: calc(48svh / var(--overlay-scale, 1) + 5.625rem);
  }
  .qzzINgxYfnpqucbGoBNN.HLqR4oTPBUfW8LoeQ8ah,
  .qzzINgxYfnpqucbGoBNN.mzjtkr5J8hLRy4i4Mefe {
    visibility: visible;
  }

  /* The overlay sizes with its own --overlay-scale (set in JS) so it can
     be much wider than the compact static nav, which keeps --nav-scale. */
  .qzzINgxYfnpqucbGoBNN .c3blxUFYhCvQu9Od5nEm {
    width: calc(66.875rem * var(--overlay-scale, 1));
    height: calc(12.5rem * var(--overlay-scale, 1));
  }
  .qzzINgxYfnpqucbGoBNN .aVKtCp_MKjCjshQ8GMHS {
    transform: scale(var(--overlay-scale, 1));
  }

  /* In the overlay, rotate the labels 90° so they run along each tall key,
     and bump the font size. writing-mode: vertical-rl is the proper way
     to render true vertical text — each character stays upright. */
  .qzzINgxYfnpqucbGoBNN .SUoVXrnWGW8yTQXg03TK {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 2.5rem;
    letter-spacing: 0.0625rem;
  }
  .qzzINgxYfnpqucbGoBNN.mzjtkr5J8hLRy4i4Mefe {
    pointer-events: auto;
  }
}

/* =================================================================
   HAMBURGER BUTTON (mobile portrait only, no border / no background)
   ================================================================= */
.kSEtCegaBgVK0bAYAPib {
  display: none;
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  width: 3rem;
  height: 3rem;
  border: none;
  background: transparent;
  z-index: 1101;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

@media (max-width: 479px) {
  .kSEtCegaBgVK0bAYAPib { display: block; }
}

.kSEtCegaBgVK0bAYAPib span {
  position: absolute;
  left: 50%;
  width: 1.875rem;
  height: 0.25rem;
  background: var(--piano-border);
  border-radius: 0.125rem;
  transform-origin: center;
  transform: translateX(-50%);
  transition: transform 280ms cubic-bezier(0.65, 0, 0.35, 1),
              opacity 200ms ease,
              top 280ms cubic-bezier(0.65, 0, 0.35, 1);
}

.kSEtCegaBgVK0bAYAPib span:nth-child(1) { top: 0.875rem; }
.kSEtCegaBgVK0bAYAPib span:nth-child(2) { top: 1.375rem; }
.kSEtCegaBgVK0bAYAPib span:nth-child(3) { top: 1.875rem; }

.kSEtCegaBgVK0bAYAPib.mzjtkr5J8hLRy4i4Mefe span:nth-child(1) {
  top: 1.375rem;
  transform: translateX(-50%) rotate(45deg);
}
.kSEtCegaBgVK0bAYAPib.mzjtkr5J8hLRy4i4Mefe span:nth-child(2) {
  opacity: 0;
  transform: translateX(-50%) scaleX(0.3);
}
.kSEtCegaBgVK0bAYAPib.mzjtkr5J8hLRy4i4Mefe span:nth-child(3) {
  top: 1.375rem;
  transform: translateX(-50%) rotate(-45deg);
}

/* =================================================================
   MOBILE PORTRAIT — slide-in panel from left
   ================================================================= */
.OAeg96vD3N0AdbqE3pSM {
  display: none;
}

@media (max-width: 479px) {
  .OAeg96vD3N0AdbqE3pSM {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    z-index: 1000;
    pointer-events: none;
    transition:
      background-color 320ms ease,
      backdrop-filter 320ms ease,
      -webkit-backdrop-filter 320ms ease;
  }
  .OAeg96vD3N0AdbqE3pSM.mzjtkr5J8hLRy4i4Mefe {
    background: rgba(40, 20, 20, 0.18);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    pointer-events: auto;
  }
}

._7pzi_cjtWLXPPEZzXpue {
  display: none;
}

@media (max-width: 479px) {
  ._7pzi_cjtWLXPPEZzXpue {
    display: block;
    position: fixed;
    top: 50%;
    left: 0;
    width: 84vw;
    max-width: 22.5rem;
    height: 85vh;
    height: 85svh;
    z-index: 1050;
    transform: translateY(-50%);
    pointer-events: none;
    /* SSR safety (same pattern as .desktopOverlay): the keys are rendered
       at their final open positions in the server markup and only get
       parked off-screen by GSAP after hydration. Without this, the whole
       menu flashes on mobile portrait until the JS bundle loads. */
    visibility: hidden;
  }
  ._7pzi_cjtWLXPPEZzXpue.HLqR4oTPBUfW8LoeQ8ah,
  ._7pzi_cjtWLXPPEZzXpue.mzjtkr5J8hLRy4i4Mefe {
    visibility: visible;
  }
  ._7pzi_cjtWLXPPEZzXpue.mzjtkr5J8hLRy4i4Mefe {
    pointer-events: auto;
  }
}

.OyPCL2_KpXiPhrjn37Bj {
  position: absolute;
  left: -3.5rem;
  /* Heights and tops are expressed as % of the panel (.mobileNav, which is
     sized in svh). This keeps every key and peg in the SAME coordinate
     system, so they always stay in proportion to each other regardless of
     viewport height. */
  height: 15.8%;
  border: 0.25rem solid var(--piano-border);
  border-radius: var(--piano-radius);
  background: var(--piano-white);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1.375rem;
  text-decoration: none;
  color: var(--piano-border);
  font-family: var(--piano-font);
  font-size: 1.375rem;
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 220ms ease;
  will-change: transform;
}

.OyPCL2_KpXiPhrjn37Bj.zKzv6wIyMls9wOKEjlzQ { top: 3.5%;  right: 0.75rem;   z-index: 1; }
.OyPCL2_KpXiPhrjn37Bj.EIQoU69VSKPvAhHlhSjR { top: 15.8%; right: 1.625rem;  z-index: 2; }
.OyPCL2_KpXiPhrjn37Bj.bs5X4XfIrOUfUtc9cEYf { top: 28.1%; right: 0.875rem;  z-index: 3; }
.OyPCL2_KpXiPhrjn37Bj.dRCYL0ZAcRVXizJpegzT { top: 41.6%; right: 1.875rem;  z-index: 4; }
.OyPCL2_KpXiPhrjn37Bj.KOOpT9lKl9M_D61k09io { top: 55.1%; right: 0.75rem;   z-index: 5; }
.OyPCL2_KpXiPhrjn37Bj.v2vcBp5Vlon6Rq5ANIVz { top: 68.7%; right: -0.25rem;  z-index: 6; }
.OyPCL2_KpXiPhrjn37Bj.vUb1sqH3YbviqGoCH3GV { top: 82.2%; right: 1.375rem;  z-index: 7; }

.OyPCL2_KpXiPhrjn37Bj.rvzxBqNELzBlCTMggCoA {
  background: var(--piano-yellow);
}

.OyPCL2_KpXiPhrjn37Bj:focus-visible,
.OyPCL2_KpXiPhrjn37Bj:active {
  z-index: 200;
}

.OyPCL2_KpXiPhrjn37Bj.Hmdt1cd0kIpSV6c4GMt3,
.OyPCL2_KpXiPhrjn37Bj:active {
  box-shadow: none !important;
}

@media (hover: hover) {
  .OyPCL2_KpXiPhrjn37Bj:hover {
    z-index: 200;
    background: var(--piano-white-hover);
    box-shadow: 0 0.625rem 1.25rem -0.625rem rgba(158, 59, 59, 0.45);
  }
  .OyPCL2_KpXiPhrjn37Bj.rvzxBqNELzBlCTMggCoA:hover {
    background: var(--piano-border);
    color: #ffffff;
  }
}

.bSvIWfCfBj5YEEpT824c {
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
}

.EQ3lDCmF2JUjX8TEWesL {
  position: absolute;
  left: -3.5rem;
  width: 64%;
  height: 6.8%;
  background: var(--piano-border);
  border-radius: var(--piano-radius);
  pointer-events: none;
  z-index: 300;
}

.EQ3lDCmF2JUjX8TEWesL.hRoMSdkWqB9QtK9gNDbA { top: 16.3%; transform: translateY(-50%) rotate(1.2deg); }
.EQ3lDCmF2JUjX8TEWesL.VJzdNTMH7dPZk1wO3owZ { top: 29.3%; transform: translateY(-50%) rotate(-0.8deg); }
.EQ3lDCmF2JUjX8TEWesL.SRWT0sdQG80hJHFRGxAb { top: 56.3%; transform: translateY(-50%) rotate(1.4deg); }
.EQ3lDCmF2JUjX8TEWesL.AsH5GpfHNpnLBGpqzfqJ { top: 69.8%; transform: translateY(-50%) rotate(-0.6deg); }
.EQ3lDCmF2JUjX8TEWesL.B9o30deYb3syUBZBGw2R { top: 83.3%; transform: translateY(-50%) rotate(0.9deg); }