/* =========================================================
   PLAMEN.PRO v2.0 — Project overrides / refinements
   ========================================================= */

/* Clean premium navigation expansion */
nav#nav.pp-nav .pp-nav-menu {
  gap: clamp(28px, 4vw, 58px);
}

/* Prices heading: requested layout */
.price-title {
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  margin-bottom: 72px;
  line-height: .86;
}
.price-title span,
.price-title em {
  display: block;
}
.price-title span {
  color: var(--white);
  font-weight: 700;
  letter-spacing: -.03em;
}
.price-title em {
  margin-top: 8px;
  margin-left: clamp(34px, 8vw, 118px);
  color: rgba(240,237,232,.3);
  font-style: normal;
  font-weight: 300;
  letter-spacing: .06em;
}

/* Portfolio section */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid rgba(240,237,232,.08);
  background: rgba(240,237,232,.08);
}
.portfolio-card {
  min-height: 260px;
  padding: 42px 38px;
  background:
    radial-gradient(circle at 50% 0%, rgba(200,169,106,.075), transparent 46%),
    rgba(6,6,6,.96);
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s, border-color .35s;
}
.portfolio-card::before {
  content: '';
  position: absolute;
  left: 28px; right: 28px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,169,106,.55), transparent);
  opacity: .35;
}
.portfolio-card::after {
  content: '';
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle, rgba(200,169,106,.08), transparent 52%);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .35s, transform .35s;
  pointer-events: none;
}
.portfolio-card:hover {
  transform: translateY(-4px);
  background:
    radial-gradient(circle at 50% 0%, rgba(200,169,106,.12), transparent 50%),
    rgba(10,10,10,.98);
}
.portfolio-card:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.portfolio-kicker {
  display: block;
  font-size: .52rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(200,169,106,.65);
  margin-bottom: 34px;
}
.portfolio-card h3 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 300;
  letter-spacing: -.02em;
  margin-bottom: 18px;
  color: rgba(240,237,232,.88);
}
.portfolio-card p {
  font-size: .82rem;
  line-height: 1.95;
  color: rgba(240,237,232,.36);
  max-width: 320px;
}

/* Cinematic intro polish */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9997;
  pointer-events: none;
  animation: ppIntroFade 1.55s cubic-bezier(.16,1,.3,1) .15s forwards;
}
@keyframes ppIntroFade {
  0% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
nav#nav,
#hero .hero-eyebrow,
#hero .hero-title,
#hero .hero-sub,
#hero .hero-cta,
.piano-sticky {
  animation: ppSoftReveal 1.25s cubic-bezier(.16,1,.3,1) both;
}
nav#nav { animation-delay: .45s; }
#hero .hero-eyebrow { animation-delay: .65s; }
#hero .hero-title { animation-delay: .85s; }
#hero .hero-sub { animation-delay: 1.05s; }
#hero .hero-cta { animation-delay: 1.2s; }
.piano-sticky { animation-delay: .35s; }
@keyframes ppSoftReveal {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Player typography refinements kept separate for future tuning */
.player-track-name {
  letter-spacing: -.02em;
}
.track-item.active {
  box-shadow: inset 0 0 0 1px rgba(200,169,106,.055);
}

@media (max-width: 900px) {
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-card { min-height: auto; }
  .price-title em { margin-left: 0; }
}

/* ── PLAMEN.PRO v2.0 — Premium VU Meter / Player Upgrade ───────────── */
.player-shell {
  position: relative;
  background:
    radial-gradient(circle at 18% 12%, rgba(200,169,106,.055), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006)),
    rgba(7,7,7,.92);
  box-shadow:
    0 34px 120px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 0 1px rgba(200,169,106,.045);
}
.player-shell::after {
  content: '';
  position: absolute;
  left: 28px; right: 28px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,169,106,.24), transparent);
  opacity: .75;
  pointer-events: none;
}
.player-track-name {
  font-family: var(--sans) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: rgba(240,237,232,.86) !important;
  text-shadow:
    0 4px 18px rgba(0,0,0,.7),
    0 0 34px rgba(200,169,106,.08);
}
.player-track-sub,
.player-now-label,
.player-counter,
.player-time-block {
  font-family: var(--sans);
  letter-spacing: .22em;
}
.player-wave-wrap {
  margin-top: 32px;
  padding: 10px 0 16px;
}
#waveCanvas { opacity: .78; }
.premium-meter-deck {
  margin-top: 28px;
  padding: 22px 26px 24px;
  border: 1px solid rgba(200,169,106,.12);
  background:
    linear-gradient(180deg, rgba(200,169,106,.035), rgba(255,255,255,.006)),
    rgba(0,0,0,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 18px 60px rgba(0,0,0,.22);
  position: relative;
  overflow: hidden;
}
.premium-meter-deck::before {
  content: '';
  position: absolute;
  left: -20%; right: -20%; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,197,121,.5), transparent);
  opacity: .4;
}
.premium-meter-deck::after {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  right: -80px; top: -120px;
  background: radial-gradient(circle, rgba(200,169,106,.08), transparent 62%);
  pointer-events: none;
}
.meter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: .48rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(240,237,232,.26);
}
.meter-head span:first-child { color: rgba(200,169,106,.58); }
.meter-row {
  display: grid;
  grid-template-columns: 28px 1fr 70px;
  align-items: center;
  gap: 14px;
  margin: 10px 0;
}
.meter-label {
  font-size: .58rem;
  letter-spacing: .18em;
  color: rgba(240,237,232,.42);
}
.meter-db {
  text-align: right;
  font-size: .56rem;
  letter-spacing: .08em;
  color: rgba(240,237,232,.32);
  font-variant-numeric: tabular-nums;
}
.meter-bar {
  position: relative;
  height: 10px;
  overflow: hidden;
  border: 1px solid rgba(240,237,232,.07);
  background:
    repeating-linear-gradient(90deg, rgba(240,237,232,.055) 0 1px, transparent 1px 9px),
    linear-gradient(90deg, rgba(200,169,106,.045), rgba(200,169,106,.018));
}
.meter-bar span {
  display: block;
  width: 0%;
  height: 100%;
  background:
    linear-gradient(90deg,
      rgba(200,169,106,.18) 0%,
      rgba(230,205,145,.72) 78%,
      rgba(245,226,171,.96) 100%);
  box-shadow: 0 0 18px rgba(200,169,106,.22);
  transition: width .055s linear;
}
.meter-bar i {
  position: absolute;
  top: -2px;
  width: 1px;
  height: 14px;
  left: 0%;
  background: rgba(245,226,171,.9);
  box-shadow: 0 0 10px rgba(245,226,171,.7);
  opacity: .75;
  transform: translateX(-1px);
  transition: left .16s ease-out, opacity .25s ease;
}
.meter-scale {
  display: flex;
  justify-content: space-between;
  margin: 2px 84px 0 42px;
  font-size: .44rem;
  letter-spacing: .12em;
  color: rgba(240,237,232,.18);
  font-variant-numeric: tabular-nums;
}
#spectrumCanvas {
  width: 100%;
  height: 74px;
  display: block;
  margin-top: 16px;
  opacity: .72;
  border-top: 1px solid rgba(240,237,232,.045);
}
/* Champagne gradient on the big track title */
.player-track-name {
  background: linear-gradient(180deg, #fff7e1 0%, #d8c8a8 62%, #a8987a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Gold progress on the seek line */
.wave-seek-fill {
  background: linear-gradient(90deg, rgba(200,169,106,.35), rgba(230,205,145,.75)) !important;
}
/* Transport: larger, finer play button */
.p-play {
  width: 58px !important;
  height: 58px !important;
  background: radial-gradient(circle at 50% 32%, rgba(200,169,106,.10), transparent 70%) !important;
}
.track-item {
  position: relative;
  transition: background .22s ease, transform .22s ease, opacity .22s ease;
}
.track-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200,169,106,.42), transparent);
  opacity: 0;
  transition: opacity .25s ease;
}
.track-item.active::before { opacity: 1; }

/* ── PLAMEN.PRO — Responsive polish (mobile & tablet) ─────────────── */
html, body { overflow-x: clip; }

@media (max-width: 768px) {
  /* Sections */
  .section-pad { padding: 72px 0; }
  .section-title { margin-bottom: 40px; }
  .price-title em { margin-left: 0; }

  /* Prices */
  .prices-list { gap: 8px; }
  .price-row {
    flex-wrap: wrap;
    padding: 20px 18px;
    gap: 10px 16px;
  }
  .price-row::before { width: auto; }
  .price-row:hover { transform: none; }
  .price-row-left { flex: 1 1 60%; }
  .price-row-name { font-size: .92rem; }
  .price-row-val { font-size: 1.05rem; margin-left: auto; }

  /* Player */
  .player-top { padding: 30px 20px 28px; }
  .player-toprow { margin-bottom: 24px; }
  .player-controls { gap: 34px; }
  .track-item { padding: 12px 20px; grid-template-columns: 40px 1fr; }
  .premium-meter-deck { margin-top: 22px; }
  .meter-scale { margin: 2px 68px 0 36px; }
  #spectrumCanvas { height: 56px; }

  /* Piano block & CTA */
  .pt-block { padding: 22px 20px; max-width: 92vw; }

  /* Grids down to one column */
  .services-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }

  /* Music fade shorter on small screens */
  #music::before { height: 120px; }

  /* Footer */
  .footer-name img { width: 82vw; }
  .footer-nav-row { flex-wrap: wrap; gap: 18px 28px; }
  footer { padding: 72px 24px 48px; }
}

@media (max-width: 440px) {
  .section-title { font-size: clamp(30px, 9vw, 40px); }
  .price-row-val { font-size: .98rem; }
  .player-controls { gap: 26px; }
  .p-play { width: 52px !important; height: 52px !important; }
}

/* ── Compact player head: NOW PLAYING — TRACK — STUDIO ─────────────── */
.player-head {
  display: flex;
  align-items: baseline;
  gap: 0;
  margin-bottom: 24px;
  min-width: 0;
}
.player-head .player-track-name {
  font-size: 1.02rem !important;
  margin: 0 !important;
  min-width: 0;
}
.player-head .player-now-label,
.player-head .player-track-sub { flex-shrink: 0; }
.player-head .player-track-name::before,
.player-head .player-track-sub::before {
  content: '—';
  margin: 0 16px;
  color: rgba(200,169,106,.35);
  font-weight: 300;
  -webkit-text-fill-color: rgba(200,169,106,.35);
}
.player-head-right {
  margin-left: auto;
  display: flex;
  gap: 22px;
  align-items: baseline;
  flex-shrink: 0;
}
/* Tighter vertical rhythm so the whole player fits on screen */
.player-top { padding: 28px 40px 26px !important; }
.player-wave-wrap { margin-top: 6px !important; padding: 6px 0 12px !important; }
#waveCanvas { height: 44px !important; }
.premium-meter-deck { margin-top: 18px !important; padding: 16px 22px 18px !important; }
#spectrumCanvas { height: 52px !important; margin-top: 12px !important; }
.player-controls { margin-top: 4px; }
.track-item { padding: 11px 40px; }

@media (max-width: 768px) {
  .player-head { flex-wrap: wrap; gap: 6px 0; }
  .player-head .player-track-sub { display: none; }
  .player-head-right { margin-left: auto; }
  .player-top { padding: 22px 20px 20px !important; }
  .track-item { padding: 11px 20px; }
}

/* ── Player v3: low profile, VU beside track name ──────────────────── */
.player-head-mini {
  display: flex;
  align-items: baseline;
  min-width: 0;
  margin-bottom: 12px;
}
.player-head-mini .player-track-sub::before {
  content: '·';
  margin: 0 14px;
  color: rgba(200,169,106,.4);
}
.player-head-mini .player-head-right {
  margin-left: auto;
  display: flex;
  gap: 22px;
  align-items: baseline;
  flex-shrink: 0;
}
.player-title-row {
  display: flex;
  align-items: center;
  gap: 36px;
  min-width: 0;
}
.player-title-row .player-track-name {
  font-size: 1.5rem !important;
  margin: 0 !important;
  min-width: 0;
  flex-shrink: 1;
}
.mini-meter {
  flex: 1 1 auto;
  max-width: 680px;
  min-width: 220px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mini-meter-ch {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 8px;
  align-items: center;
}
.mini-meter-ch .mm-l {
  font-size: .46rem;
  letter-spacing: .12em;
  color: rgba(240,237,232,.35);
}
.mini-meter .meter-bar { height: 5px; }
.mini-meter .meter-bar i { height: 9px; top: -2px; }

/* Lower overall profile, content inset from both edges */
.player-top { padding: 30px clamp(36px, 4.5vw, 72px) 24px !important; }
.player-wave-wrap { margin-top: 12px !important; padding: 4px 0 10px !important; }
#waveCanvas { height: 40px !important; }
.player-controls { gap: 40px; }
.p-play { width: 46px !important; height: 46px !important; }
.track-item { padding: 9px 36px; }

@media (max-width: 768px) {
  .player-title-row { flex-wrap: wrap; gap: 12px; }
  .mini-meter { max-width: none; width: 100%; margin-left: 0; }
  .player-top { padding: 18px 20px 16px !important; }
  .track-item { padding: 9px 20px; }
}

/* ── Section takeover: each section pins full-screen, next slides over ── */
@media (min-width: 769px) {
  /* overrides #music.section-border { position: relative } from base.css */
  #music.section-border { position: sticky; }

  /* Flex parents make margin:auto children shrink-to-fit — restore full width */
  #music > .section-wrap,
  #prices > .section-wrap,
  #portfolio > .section-wrap,
  #contact > .section-wrap { width: 100%; }

  /* Hero pins too — the piano scene slides over it */
  #hero { position: sticky; top: 0; min-height: 100vh; }
  .piano-outer { position: relative; z-index: 2; }
  .piano-sticky { box-shadow: 0 -40px 120px rgba(0,0,0,.65); }

  /* Soft blend from hero into the piano scene (fades out while scrolling) */
  .piano-fade-top {
    position: absolute; top: 0; left: 0; right: 0;
    height: 26vh;
    background: linear-gradient(to bottom, rgba(6,6,6,.95), transparent);
    z-index: 2; pointer-events: none;
  }
  /* Dim layer: darkens the piano while Music covers it */
  .piano-dim {
    position: absolute; inset: 0;
    background: #000; opacity: 0;
    z-index: 6; pointer-events: none;
  }
  .hero-dim {
    position: absolute; inset: 0;
    background: #000; opacity: 0;
    z-index: 8; pointer-events: none;
  }

  #music, #prices, #portfolio, #contact {
    position: sticky;
    top: 0;
    min-height: 100vh;
    background: var(--black);
    display: flex;
    flex-direction: column;
    justify-content: center;
    will-change: transform, filter;
  }
  /* Incoming edge: gold hairline + deep shadow for the premium reveal */
  #prices, #portfolio, #contact {
    box-shadow: 0 -40px 120px rgba(0,0,0,.65);
  }
  #prices::after, #portfolio::after, #contact::after {
    content: '';
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,106,.4), transparent);
    pointer-events: none;
  }
  footer {
    position: relative;
    background: var(--black);
    box-shadow: 0 -40px 120px rgba(0,0,0,.65);
  }
}

/* ── Studio intro: full-screen scroll-driven frame sequence ────────── */
.studio-outer { height: 260vh; position: relative; z-index: 1; }
.studio-sticky {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; background: #000;
}
body.studio-in-view::before,
body.studio-in-view::after { opacity: 0; }
@media (min-width: 769px) {
  #hero { background: var(--black); box-shadow: 0 -40px 120px rgba(0,0,0,.65); }
}

/* ── Studio + hero merged: text over the frame sequence ───────────── */
.studio-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  z-index: 3;
  padding: 0 5vw;
  pointer-events: none;
}
.studio-text .hero-cta { pointer-events: auto; margin-top: 46px; }
.st-block {
  position: relative;
  padding: clamp(26px, 4vw, 46px) clamp(40px, 7vw, 100px);
  background: linear-gradient(168deg,
    rgba(255,255,255,.035) 0%,
    rgba(255,255,255,.01) 34%,
    rgba(6,6,6,.18) 100%);
  -webkit-backdrop-filter: blur(4px) saturate(1.15) brightness(1.03);
  backdrop-filter: blur(4px) saturate(1.15) brightness(1.03);
  border: 1px solid rgba(200,169,106,.24);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.38),
    0 42px 110px rgba(0,0,0,.62);
}
.st-block::before {
  content: ''; position: absolute; inset: 7px;
  border: 1px solid rgba(200,169,106,.13);
  border-radius: 1px; pointer-events: none;
}
.st-block::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 34%, rgba(255,255,255,.05) 46%,
    rgba(255,255,255,.11) 50%, rgba(255,255,255,.04) 54%, transparent 66%);
  mix-blend-mode: screen;
}
/* Intro reveal for the merged text */
.st-block,
.studio-text .hero-eyebrow,
.studio-text .hero-title,
.studio-text .hero-sub,
.studio-text .hero-cta {
  animation: ppSoftReveal 1.25s cubic-bezier(.16,1,.3,1) both;
}
.st-block { animation-delay: .5s; }
.studio-text .hero-eyebrow { animation-delay: .7s; }
.studio-text .hero-title { animation-delay: .9s; }
.studio-text .hero-sub { animation-delay: 1.1s; }
.studio-text .hero-cta { animation-delay: 1.25s; }
@media (max-width: 768px) {
  .st-block { max-width: 92vw; padding: 22px 20px; }
}

/* ── Hero title: Cormorant Garamond, -20% ──────────────────────────── */
.hero-title {
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
  font-size: clamp(35px, 6vw, 80px);
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: .96;
}
.hero-title .line-italic {
  font-style: normal;
  font-weight: 400;
  font-size: .52em;
  letter-spacing: .12em;
  margin-bottom: 8px;
}
.hero-title .line-bold {
  font-weight: 400;
  letter-spacing: .03em;
}

/* ── Takeover polish for the first two scenes ──────────────────────── */
@media (min-width: 769px) {
  .piano-sticky::before {
    content: '';
    position: absolute; top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,106,.4), transparent);
    z-index: 7; pointer-events: none;
  }
  #music { box-shadow: 0 -40px 120px rgba(0,0,0,.65); }
  #music::after {
    content: '';
    position: absolute; top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,106,.4), transparent);
    pointer-events: none;
  }
}

/* ── Hero title: polished golden metal ─────────────────────────────── */
.hero-title .line-bold {
  background: linear-gradient(100deg,
    #8a6a28 0%,
    #d4a944 18%,
    #f9e7b3 32%,
    #fdf3cf 40%,
    #e7c05e 52%,
    #b8862e 66%,
    #f2d68a 82%,
    #9a7530 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 3px 2px rgba(0,0,0,.65))
    drop-shadow(0 14px 30px rgba(0,0,0,.5))
    drop-shadow(0 0 30px rgba(212,169,68,.22));
  animation: ppGoldSheen 7s ease-in-out infinite;
}
.hero-title .line-italic {
  background: linear-gradient(180deg,
    rgba(249,231,179,.55) 0%,
    rgba(212,169,68,.42) 55%,
    rgba(154,117,48,.35) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.6));
}
@keyframes ppGoldSheen {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

/* Center the eyebrow inside the glass block */
.st-block .hero-eyebrow {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 28px;
}

/* ── Piano block matches the hero: Anton + golden metal ────────────── */
.pt-title {
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  background: linear-gradient(100deg,
    #8a6a28 0%, #d4a944 18%, #f9e7b3 32%, #fdf3cf 40%,
    #e7c05e 52%, #b8862e 66%, #f2d68a 82%, #9a7530 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 3px 2px rgba(0,0,0,.65))
    drop-shadow(0 14px 30px rgba(0,0,0,.5))
    drop-shadow(0 0 30px rgba(212,169,68,.22));
  animation: ppGoldSheen 7s ease-in-out infinite;
}
.pt-label { font-size: .68rem !important; }
.pt-sub   { font-size: .66rem !important; }

/* ── Footer merged into the Contact screen ─────────────────────────── */
#contact footer {
  width: 100%;
  padding: 72px 32px 8px;
  background: transparent;
  box-shadow: none;
  position: static;
}

/* ── All big section headings: Anton + golden metal ────────────────── */
.section-title {
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: .98;
  background: linear-gradient(100deg,
    #8a6a28 0%, #d4a944 18%, #f9e7b3 32%, #fdf3cf 40%,
    #e7c05e 52%, #b8862e 66%, #f2d68a 82%, #9a7530 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 3px 2px rgba(0,0,0,.6))
    drop-shadow(0 12px 26px rgba(0,0,0,.45));
  animation: ppGoldSheen 7s ease-in-out infinite;
}
/* Ghost part of the headings: subdued transparent gold */
.section-title em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: .04em;
  background: linear-gradient(180deg,
    rgba(249,231,179,.5) 0%,
    rgba(212,169,68,.38) 55%,
    rgba(154,117,48,.3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.price-title span {
  font-weight: 400;
  letter-spacing: .04em;
}
.price-title em {
  background: linear-gradient(180deg,
    rgba(249,231,179,.5) 0%,
    rgba(212,169,68,.38) 55%,
    rgba(154,117,48,.3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Mobile: centered section headings with breathing room ─────────── */
@media (max-width: 768px) {
  .section-wrap { padding: 0 26px; }
  .section-label { justify-content: center; }
  .section-title {
    text-align: center;
    margin-bottom: 36px;
    font-size: clamp(28px, 8vw, 40px);
  }
  .price-title { line-height: 1.02; }
  .price-title em { margin-left: 0; margin-top: 2px; }
  /* Contact intro text under the centered heading */
  #contact .contact-grid { text-align: left; }
}

/* ── Mobile takeover: same cinematic transitions ───────────────────── */
@media (max-width: 768px) {
  #music, #prices, #portfolio, #contact {
    position: relative;
    background: var(--black);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 -30px 90px rgba(0,0,0,.65);
  }
  #music > .section-wrap,
  #prices > .section-wrap,
  #portfolio > .section-wrap,
  #contact > .section-wrap { width: 100%; }
  /* Only sections that fit the screen get pinned (JS sets the class) */
  #music.takeover-pin, #prices.takeover-pin,
  #portfolio.takeover-pin, #contact.takeover-pin {
    position: sticky;
    top: 0;
  }
  #music::after, #prices::after, #portfolio::after, #contact::after {
    content: '';
    position: absolute; top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,106,.4), transparent);
    pointer-events: none;
  }
  .piano-sticky { box-shadow: 0 -30px 90px rgba(0,0,0,.65); }
  .piano-fade-top {
    position: absolute; top: 0; left: 0; right: 0;
    height: 18vh;
    background: linear-gradient(to bottom, rgba(6,6,6,.95), transparent);
    z-index: 2; pointer-events: none;
  }
  .piano-dim {
    position: absolute; inset: 0;
    background: #000; opacity: 0;
    z-index: 6; pointer-events: none;
  }
  .hero-dim {
    position: absolute; inset: 0;
    background: #000; opacity: 0;
    z-index: 8; pointer-events: none;
  }
}

/* ── Mobile contact: clean single-column form ──────────────────────── */
@media (max-width: 768px) {
  /* Hide the intro paragraph */
  #contact .contact-grid > div:first-child > p:first-child { display: none; }
  #contact .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
  .form-row { grid-template-columns: 1fr; gap: 16px; }
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea { width: 100%; }
}

/* ── Contact: info row on top + golden mirror glass form ───────────── */
.contact-layout {
  max-width: 940px;
  margin: 0 auto;
  width: 100%;
}
.contact-info-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px clamp(28px, 6vw, 90px);
  margin-bottom: 44px;
  text-align: center;
}
.ci-label {
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(200,169,106,.55);
  margin-bottom: 6px;
}
.ci-val {
  font-size: .85rem;
  color: rgba(240,237,232,.78);
}
/* The same mirror-glass language as the hero & piano blocks */
.contact-form {
  position: relative;
  padding: clamp(26px, 4vw, 46px) clamp(22px, 5vw, 60px);
  background: linear-gradient(168deg,
    rgba(255,255,255,.035) 0%,
    rgba(255,255,255,.01) 34%,
    rgba(6,6,6,.18) 100%);
  -webkit-backdrop-filter: blur(4px) saturate(1.15) brightness(1.03);
  backdrop-filter: blur(4px) saturate(1.15) brightness(1.03);
  border: 1px solid rgba(200,169,106,.24);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.38),
    0 42px 110px rgba(0,0,0,.62);
}
.contact-form::before {
  content: ''; position: absolute; inset: 7px;
  border: 1px solid rgba(200,169,106,.13);
  border-radius: 1px; pointer-events: none;
}
.contact-form::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 34%, rgba(255,255,255,.05) 46%,
    rgba(255,255,255,.11) 50%, rgba(255,255,255,.04) 54%, transparent 66%);
  mix-blend-mode: screen;
}
@media (max-width: 768px) {
  .contact-info-row { gap: 14px 22px; margin-bottom: 32px; }
  .ci-val { font-size: .74rem; }
  .ci-label { font-size: .5rem; }
}

/* ── Mobile: clear the fixed nav; overflowing sections align safely ── */
@media (max-width: 768px) {
  #music, #prices, #portfolio, #contact {
    justify-content: safe center;
    padding-top: 92px;
    padding-bottom: 24px;
  }
}

/* ── Mobile contact: tighter form + compact footer ─────────────────── */
@media (max-width: 768px) {
  #contact { padding-top: 84px; }
  #contact .section-title { margin-bottom: 26px; }
  .contact-info-row { margin-bottom: 22px; }

  .contact-form { padding: 20px 18px; }
  .contact-form .fgroup { gap: 6px; }
  .contact-form .form-row { gap: 12px; margin-bottom: 12px; }
  .contact-form .fgroup { margin-bottom: 12px; }
  .contact-form input[type="text"],
  .contact-form input[type="email"] { padding: 8px 0; }
  .contact-form textarea { min-height: 84px; }
  .form-submit { padding: 13px 20px !important; margin-top: 2px; }
  .cs-trigger { padding: 10px 0; }

  /* Compact footer */
  #contact footer { padding: 36px 20px 0; }
  .footer-name { margin-bottom: 18px; }
  .footer-name img { width: 56vw; opacity: .08; }
  .footer-tagline { margin-bottom: 20px; font-size: .5rem; letter-spacing: .22em; }
  .footer-nav-row { margin-bottom: 18px; gap: 12px 22px; }
  .footer-copy { font-size: .5rem; }
}

/* ── Kill the browser autofill highlight in the contact form ───────── */
.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover,
.contact-form input:-webkit-autofill:focus,
.contact-form textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--white);
  -webkit-box-shadow: 0 0 0 1000px #0c0c0b inset;
  box-shadow: 0 0 0 1000px #0c0c0b inset;
  caret-color: var(--white);
  transition: background-color 9999s ease-in-out 0s;
}

/* ── Mobile: hero/piano titles guaranteed to fit (no horizontal wiggle) ── */
@media (max-width: 768px) {
  .hero-title { font-size: clamp(24px, 7vw, 32px); }
  .hero-title .line-italic { font-size: .56em; }
  .st-block { max-width: calc(100vw - 40px); padding: 20px 16px; }
  .pt-block { max-width: calc(100vw - 40px); }
  .pt-title { font-size: clamp(26px, 8vw, 40px) !important; }
  .hero-sub, .pt-sub, .pt-label { letter-spacing: .18em !important; }
}

/* ── Supporting caps lines: Oswald Light (thin sibling of Anton) ───── */
.hero-eyebrow,
.hero-sub,
.pt-label,
.pt-sub,
.section-label,
.ci-label,
.ci-val,
.footer-tagline,
.footer-copy,
.player-now-label,
.player-track-sub,
.player-counter,
.player-time-block {
  font-family: 'Oswald', 'Arial Narrow', sans-serif !important;
  font-weight: 300 !important;
}

/* ── Better legibility: form labels, placeholders, footer lines ────── */
.fgroup label { color: rgba(240,237,232,.62) !important; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(240,237,232,.45); }
.contact-form input,
.contact-form textarea { color: rgba(240,237,232,.92); }
.cs-trigger { color: rgba(240,237,232,.6); }
.ci-label { color: rgba(200,169,106,.75); }
.ci-val { color: rgba(240,237,232,.88); }
.footer-tagline { color: rgba(240,237,232,.52) !important; }
.footer-copy { color: rgba(240,237,232,.4) !important; }
.footer-nav-row a { color: rgba(240,237,232,.55); }

/* Footer logo: a touch brighter */
.footer-name img { opacity: .22; }
@media (max-width: 768px) {
  .footer-name img { opacity: .2; }
}

/* =========================================================
   PLAMEN.PRO v22 — Cinematic scroll correction
   ========================================================= */
.studio-sticky {
  background-color: #000;
  background-image: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22)), url('../studio-frames/s0010.webp');
  background-size: cover;
  background-position: center;
}
.piano-sticky {
  background-color: #000;
  background-image: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)), url('../piano-frames/f0015.webp');
  background-size: cover;
  background-position: center;
}
.studio-sticky canvas,
.piano-sticky canvas { position:absolute; inset:0; width:100%; height:100%; }
.studio-text { will-change: opacity, filter; }
.st-block, .studio-text .hero-cta { will-change: transform; }

/* Prevent the old CSS reveal from fighting the progress-controlled piano block. */
.piano-text {
  will-change: opacity, filter;
  opacity: 0;
}
.piano-text .pt-block {
  transform: translate3d(0, var(--pianoTextLift, 0px), 0) !important;
  will-change: transform;
}
.piano-text .pt-cta {
  transform: translate3d(0, var(--pianoCtaDrop, 0px), 0) !important;
  will-change: transform;
}
.piano-text.revealed .pt-label,
.piano-text.revealed .pt-title,
.piano-text.revealed .pt-sub,
.piano-text.revealed .pt-cta {
  opacity: 1 !important;
}
/* PLAMEN.PRO — black glass letters with dense metallic border and minimal glow */
.piano-text .pt-title {
  color: rgba(8, 8, 8, .50) !important;
  -webkit-text-fill-color: rgba(8, 8, 8, .50) !important;
  -webkit-text-stroke: 1.15px rgba(214, 178, 74, .82) !important;
  paint-order: stroke fill;
  text-shadow:
    0 0 1px rgba(214,178,74,.28),
    0 0 7px rgba(214,178,74,.055),
    0 12px 30px rgba(0,0,0,.62) !important;
}
.piano-text .pt-block {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.48),
    0 36px 90px rgba(0,0,0,.58),
    0 0 calc(18px * var(--pianoBlockGlow, .16)) rgba(200,169,106,.16) !important;
}

@media (max-width: 1024px), (hover: none) {
  .studio-outer { height: 250vh !important; }
  .piano-outer  { height: 340vh !important; }
  .studio-sticky, .piano-sticky { height: 100svh; top: 0; }
  .studio-text { padding: 0 4vw; }
  .st-block { max-width: 92vw; }
  .hero-title { font-size: clamp(30px, 8.4vw, 60px); }
  .hero-sub { font-size: .70rem; }
  .piano-text { left: 5vw !important; right: 5vw !important; bottom: 22svh !important; }
  .piano-text .pt-title { font-size: clamp(46px, 14vw, 92px) !important; }
  .piano-text .pt-label,
  .piano-text .pt-sub { font-size: clamp(.50rem, 1.7vw, .68rem) !important; }
  .piano-text .pt-cta { width: min(82vw, 620px); text-align: center; }
  .piano-dim, .hero-dim { display: none !important; }
  #music { margin-top: 0 !important; }
}

/* =========================================================
   PLAMEN.PRO v24 — Desktop nav cleanup + piano title fill
   ========================================================= */

/* Only one navigation: keep the main fixed header, remove the duplicated footer/menu row. */
.footer-nav-row {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Make the real top nav always clickable above cinematic/sticky layers. */
nav#nav.pp-nav {
  z-index: 20000 !important;
  pointer-events: auto !important;
}
nav#nav.pp-nav .pp-nav-logo,
nav#nav.pp-nav .pp-nav-menu,
nav#nav.pp-nav .pp-nav-menu a,
nav#nav.pp-nav .pp-hamburger {
  pointer-events: auto !important;
}

/* PLAMEN.PRO on the piano scene: transparent black fill to the actual piano background,
   with a clearer metallic border and almost imperceptible glow. */
.piano-text .pt-title {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: rgba(0, 0, 0, .50) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, .50) !important;
  -webkit-text-stroke: 1.25px rgba(214, 178, 74, .86) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 0 .5px rgba(214,178,74,.26),
    0 0 5px rgba(214,178,74,.045),
    0 10px 24px rgba(0,0,0,.48) !important;
  filter: none !important;
}

@media (max-width: 1024px), (hover: none) {
  .piano-text .pt-title {
    -webkit-text-stroke-width: 1.1px !important;
    text-shadow:
      0 0 .5px rgba(214,178,74,.22),
      0 0 4px rgba(214,178,74,.04),
      0 8px 20px rgba(0,0,0,.42) !important;
  }
}


/* =========================================================
   PLAMEN.PRO v25 — final polish: piano title cut-through,
   wider mobile piano crop, and desktop contact split layout
   ========================================================= */

/* 1) Piano title: almost transparent fill directly to the scene.
   The stroke stays readable; the fill is only 10% black, so the piano
   is visually allowed to come through the letters. */
.piano-text .pt-title {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: rgba(0, 0, 0, .10) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, .10) !important;
  -webkit-text-stroke: 1.28px rgba(214, 178, 74, .84) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 0 .35px rgba(214,178,74,.18),
    0 0 3px rgba(214,178,74,.025),
    0 8px 18px rgba(0,0,0,.34) !important;
  filter: none !important;
}

@media (max-width: 1024px), (hover: none) {
  .piano-text .pt-title {
    -webkit-text-fill-color: rgba(0, 0, 0, .10) !important;
    color: rgba(0, 0, 0, .10) !important;
    -webkit-text-stroke-width: 1.12px !important;
    text-shadow:
      0 0 .3px rgba(214,178,74,.16),
      0 0 2.5px rgba(214,178,74,.022),
      0 7px 16px rgba(0,0,0,.30) !important;
  }
}

/* 2) Desktop contact: info on the left, form on the right, compact enough
   to fit inside a single desktop viewport. */
@media (min-width: 1025px) {
  #contact {
    min-height: 100vh !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #contact > .section-wrap {
    width: 100% !important;
    max-width: 1280px !important;
    padding-left: 56px !important;
    padding-right: 56px !important;
  }

  #contact .section-pad {
    padding-top: 76px !important;
    padding-bottom: 24px !important;
  }

  #contact .section-label {
    margin-bottom: 12px !important;
  }

  #contact .section-title {
    font-size: clamp(42px, 4.1vw, 68px) !important;
    line-height: .94 !important;
    margin-bottom: 32px !important;
  }

  #contact .contact-layout {
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(220px, .68fr) minmax(560px, 1.55fr) !important;
    gap: clamp(38px, 5vw, 76px) !important;
    align-items: start !important;
    margin: 0 !important;
  }

  #contact .contact-info-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    text-align: left !important;
    gap: 24px !important;
    margin: 8px 0 0 !important;
  }

  #contact .ci-label {
    font-size: .54rem !important;
    margin-bottom: 8px !important;
  }

  #contact .ci-val {
    font-size: .94rem !important;
    line-height: 1.25 !important;
    color: rgba(240,237,232,.82) !important;
  }

  #contact .contact-form {
    padding: 28px 40px !important;
    gap: 12px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.34),
      0 30px 78px rgba(0,0,0,.50) !important;
  }

  #contact .contact-form::before { inset: 6px !important; }
  #contact .form-row { gap: 28px !important; }
  #contact .fgroup { gap: 6px !important; }

  #contact .fgroup label {
    font-size: .50rem !important;
  }

  #contact .fgroup input,
  #contact .fgroup textarea,
  #contact .cs-trigger {
    padding: 9px 0 !important;
    font-size: .82rem !important;
  }

  #contact .fgroup textarea {
    min-height: 78px !important;
    height: 78px !important;
  }

  #contact .form-submit {
    padding: 14px !important;
    margin-top: 6px !important;
  }

  #contact footer {
    padding: 24px 32px 0 !important;
  }

  #contact .footer-name {
    margin-bottom: 12px !important;
  }

  #contact .footer-name img {
    width: min(420px, 30vw) !important;
    opacity: .12 !important;
  }

  #contact .footer-tagline {
    margin-bottom: 10px !important;
    font-size: .46rem !important;
    letter-spacing: .24em !important;
  }

  #contact .footer-copy {
    font-size: .46rem !important;
  }
}

/* =========================================================
   PLAMEN.PRO v30 — production polish and fixes
   ========================================================= */

/* Piano title: transparent fill, BLACK stroke/border, no gold fill. */
.piano-text .pt-title {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1.35px rgba(0,0,0,.96) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 0 .45px rgba(216,178,74,.20),
    0 0 4px rgba(216,178,74,.045),
    0 10px 22px rgba(0,0,0,.42) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Supporting piano captions: subtle black shadow for readability on bright frame areas. */
.piano-text .pt-label,
.piano-text .pt-sub,
.studio-text .hero-eyebrow,
.studio-text .hero-sub {
  text-shadow:
    0 1px 1px rgba(0,0,0,.55),
    0 3px 8px rgba(0,0,0,.28) !important;
}

@media (max-width: 1024px), (hover: none) {
  .piano-text .pt-title {
    -webkit-text-stroke-width: 1.15px !important;
    text-shadow:
      0 0 .35px rgba(216,178,74,.16),
      0 0 3px rgba(216,178,74,.035),
      0 8px 18px rgba(0,0,0,.38) !important;
  }
}

/* Desktop contact: final balanced two-column layout; footer logo anchored low. */
@media (min-width: 1025px) {
  #contact {
    min-height: 100vh !important;
    position: relative !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding-bottom: 112px !important;
  }

  #contact > .section-wrap {
    max-width: 1220px !important;
    padding-left: 52px !important;
    padding-right: 52px !important;
    transform: translateY(-10px);
  }

  #contact .section-pad {
    padding-top: 68px !important;
    padding-bottom: 0 !important;
  }

  #contact .section-label {
    margin-bottom: 10px !important;
  }

  #contact .section-title {
    font-size: clamp(40px, 3.7vw, 62px) !important;
    line-height: .92 !important;
    margin-bottom: 28px !important;
  }

  #contact .contact-layout {
    display: grid !important;
    grid-template-columns: minmax(180px, .56fr) minmax(520px, 1.65fr) !important;
    gap: clamp(42px, 6vw, 88px) !important;
    align-items: start !important;
  }

  #contact .contact-info-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 22px !important;
    margin: 8px 0 0 !important;
  }

  #contact .ci-label {
    font-size: .52rem !important;
    margin-bottom: 7px !important;
  }

  #contact .ci-val {
    font-size: .9rem !important;
    line-height: 1.25 !important;
  }

  #contact .contact-form {
    padding: 24px 36px !important;
    gap: 10px !important;
    max-height: 360px !important;
  }

  #contact .contact-form::before { inset: 6px !important; }
  #contact .form-row { gap: 24px !important; }
  #contact .fgroup { gap: 5px !important; }
  #contact .fgroup label { font-size: .48rem !important; }

  #contact .fgroup input,
  #contact .fgroup textarea,
  #contact .cs-trigger {
    padding: 8px 0 !important;
    font-size: .8rem !important;
  }

  #contact .fgroup textarea {
    min-height: 66px !important;
    height: 66px !important;
  }

  #contact .form-submit {
    padding: 12px !important;
    margin-top: 4px !important;
  }

  #contact footer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 18px !important;
    padding: 0 32px !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  #contact .footer-name { margin-bottom: 8px !important; }
  #contact .footer-name img {
    width: min(410px, 28vw) !important;
    opacity: .13 !important;
    margin: 0 auto !important;
  }
  #contact .footer-tagline {
    margin-bottom: 7px !important;
    font-size: .42rem !important;
    letter-spacing: .24em !important;
  }
  #contact .footer-copy { font-size: .42rem !important; }
}

/* Keep nav links above all cinematic canvases and clickable. */
nav#nav.pp-nav,
nav#nav.pp-nav * {
  pointer-events: auto !important;
}
nav#nav.pp-nav { z-index: 10000 !important; }

/* Mobile hamburger: no accidental focus box; keep only the three refined lines. */
.pp-hamburger,
.pp-hamburger:focus,
.pp-hamburger:focus-visible,
.pp-hamburger:active {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}


/* =========================================================
   PLAMEN.PRO v31 — final contact + reliable desktop spacing
   ========================================================= */

@media (min-width: 1025px) {
  #contact {
    min-height: 100vh !important;
    justify-content: flex-start !important;
    padding-top: clamp(70px, 8vh, 96px) !important;
    padding-bottom: clamp(44px, 6vh, 72px) !important;
    overflow: hidden !important;
  }

  #contact > .section-wrap {
    transform: none !important;
    max-width: 1240px !important;
    width: 100% !important;
  }

  #contact .section-pad {
    padding-top: clamp(28px, 4.2vh, 54px) !important;
    padding-bottom: 0 !important;
  }

  #contact .section-title {
    margin-bottom: clamp(26px, 3.4vh, 42px) !important;
  }

  #contact .contact-layout {
    grid-template-columns: minmax(210px, .62fr) minmax(560px, 1.68fr) !important;
    gap: clamp(60px, 7vw, 110px) !important;
    align-items: start !important;
  }

  #contact .contact-info-row {
    margin-top: 4px !important;
    gap: clamp(18px, 2.4vh, 28px) !important;
  }

  #contact .contact-form {
    max-height: none !important;
    padding: clamp(22px, 2.9vh, 30px) clamp(32px, 3.8vw, 44px) !important;
    gap: clamp(9px, 1.2vh, 14px) !important;
  }

  #contact .fgroup input,
  #contact .fgroup textarea,
  #contact .cs-trigger {
    padding: clamp(7px, 1vh, 10px) 0 !important;
  }

  #contact .fgroup textarea {
    min-height: clamp(56px, 7vh, 78px) !important;
    height: clamp(56px, 7vh, 78px) !important;
  }

  #contact .form-submit {
    padding: clamp(11px, 1.5vh, 15px) !important;
    margin-top: 2px !important;
  }

  #contact footer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: clamp(34px, 5vh, 62px) !important;
    padding: 0 32px !important;
    pointer-events: none !important;
  }

  #contact .footer-name img {
    width: min(390px, 25vw) !important;
    opacity: .13 !important;
  }
}

@media (min-width: 1025px) and (max-height: 820px) {
  #contact {
    padding-top: 62px !important;
    padding-bottom: 36px !important;
  }
  #contact .section-pad { padding-top: 24px !important; }
  #contact .section-title { font-size: clamp(38px, 3.4vw, 56px) !important; margin-bottom: 22px !important; }
  #contact .contact-form { padding: 20px 34px !important; gap: 8px !important; }
  #contact .fgroup textarea { min-height: 54px !important; height: 54px !important; }
  #contact footer { margin-top: 26px !important; }
  #contact .footer-name img { width: min(330px, 21vw) !important; }
}


/* =========================================================
   PLAMEN.PRO v32 — menu typography, centered contact, audio-safe UI
   ========================================================= */

/* Mobile overlay menu: refined readable typography instead of oversized serif. */
.mobile-menu {
  background:
    radial-gradient(circle at 50% 35%, rgba(200,169,106,.055), transparent 42%),
    rgba(4,4,4,.985) !important;
  gap: clamp(22px, 4.2vh, 38px) !important;
}
.mobile-menu a {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: clamp(2.05rem, 8.2vw, 4.2rem) !important;
  line-height: .95 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  color: rgba(240,237,232,.78) !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.55) !important;
}
.mobile-menu a:hover,
.mobile-menu a:focus {
  color: rgba(240,237,232,.96) !important;
}
@media (max-width: 420px) {
  .mobile-menu a { font-size: clamp(1.85rem, 8vw, 3rem) !important; letter-spacing: .095em !important; }
}

/* Desktop contact: center the info/form block vertically; keep the footer logo low but not glued to the bottom. */
@media (min-width: 1025px) {
  #contact {
    min-height: 100vh !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding-top: clamp(70px, 7.5vh, 92px) !important;
    padding-bottom: clamp(30px, 4.2vh, 54px) !important;
    overflow: hidden !important;
  }
  #contact > .section-wrap {
    align-self: center !important;
    transform: translateY(clamp(-18px, -1.8vh, -8px)) !important;
    max-width: 1240px !important;
    width: 100% !important;
  }
  #contact .section-pad {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #contact .section-title {
    margin-bottom: clamp(30px, 3.8vh, 48px) !important;
  }
  #contact .contact-layout {
    grid-template-columns: minmax(210px, .62fr) minmax(560px, 1.68fr) !important;
    gap: clamp(64px, 7vw, 118px) !important;
    align-items: center !important;
  }
  #contact .contact-info-row {
    margin-top: 0 !important;
    align-self: center !important;
    gap: clamp(20px, 2.8vh, 34px) !important;
  }
  #contact .contact-form {
    align-self: center !important;
    padding: clamp(22px, 2.8vh, 32px) clamp(34px, 3.8vw, 46px) !important;
    gap: clamp(9px, 1.2vh, 14px) !important;
  }
  #contact footer {
    align-self: end !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 0 !important;
    padding: 0 32px clamp(8px, 1.2vh, 16px) !important;
    pointer-events: none !important;
  }
  #contact .footer-name img {
    width: min(380px, 24vw) !important;
    opacity: .13 !important;
  }
}

@media (min-width: 1025px) and (max-height: 820px) {
  #contact {
    padding-top: 58px !important;
    padding-bottom: 28px !important;
  }
  #contact > .section-wrap { transform: translateY(-6px) !important; }
  #contact .section-title { font-size: clamp(38px, 3.35vw, 55px) !important; margin-bottom: 22px !important; }
  #contact .contact-form { padding: 20px 34px !important; gap: 8px !important; }
  #contact .fgroup textarea { min-height: 54px !important; height: 54px !important; }
  #contact footer { padding-bottom: 6px !important; }
  #contact .footer-name img { width: min(320px, 20vw) !important; }
}

/* ── v38: True VU peak arrow markers ─────────────────────────────── */
.meter-bar i,
.mini-meter .meter-bar i {
  width: 0 !important;
  height: 0 !important;
  top: -4px !important;
  background: transparent !important;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid rgba(245,226,171,.92);
  box-shadow: none !important;
  filter: drop-shadow(0 0 6px rgba(245,226,171,.36));
  transform: translateX(-4px) !important;
}

/* =========================================================
   PLAMEN.PRO v40 — Identity, contact UX, audio meter polish
   ========================================================= */

/* Use the real logo file on the piano slide. The image itself stays semi-transparent;
   the heavy black outline is built from repeated drop-shadows so the original logo
   shape is preserved exactly. */
.piano-text .pt-title-logo {
  background: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  filter: none !important;
  line-height: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
}
.piano-text .pt-logo-img {
  display: block;
  width: min(620px, 62vw);
  height: auto;
  opacity: .48;
  mix-blend-mode: screen;
  filter:
    drop-shadow( 2px  0   0 rgba(0,0,0,.98))
    drop-shadow(-2px  0   0 rgba(0,0,0,.98))
    drop-shadow( 0    2px 0 rgba(0,0,0,.98))
    drop-shadow( 0   -2px 0 rgba(0,0,0,.98))
    drop-shadow( 2px  2px 0 rgba(0,0,0,.92))
    drop-shadow(-2px  2px 0 rgba(0,0,0,.92))
    drop-shadow( 2px -2px 0 rgba(0,0,0,.92))
    drop-shadow(-2px -2px 0 rgba(0,0,0,.92))
    drop-shadow(0 0 5px rgba(214,178,74,.10));
}
@media (max-width: 1024px), (hover: none) {
  .piano-text .pt-logo-img {
    width: min(560px, 78vw);
    opacity: .50;
    filter:
      drop-shadow( 2px  0   0 rgba(0,0,0,.98))
      drop-shadow(-2px  0   0 rgba(0,0,0,.98))
      drop-shadow( 0    2px 0 rgba(0,0,0,.98))
      drop-shadow( 0   -2px 0 rgba(0,0,0,.98))
      drop-shadow( 2px  2px 0 rgba(0,0,0,.90))
      drop-shadow(-2px  2px 0 rgba(0,0,0,.90))
      drop-shadow( 2px -2px 0 rgba(0,0,0,.90))
      drop-shadow(-2px -2px 0 rgba(0,0,0,.90))
      drop-shadow(0 0 4px rgba(214,178,74,.08));
  }
}

/* Contact composition: START YOUR PROJECT higher, content centered, footer low with air. */
@media (min-width: 1025px) {
  #contact {
    padding-bottom: 132px !important;
  }
  #contact > .section-wrap {
    max-width: 1320px !important;
    transform: translateY(-8px) !important;
  }
  #contact .section-label,
  #contact .section-title {
    transform: translateY(-130px) !important;
  }
  #contact .section-title {
    margin-bottom: -72px !important;
  }
  #contact .contact-layout {
    align-items: center !important;
    margin-top: 0 !important;
  }
  #contact footer {
    bottom: 60px !important;
  }
}

/* Premium contact submit states */
.form-submit {
  position: relative;
  overflow: hidden;
}
.form-submit.is-sending,
.form-submit.is-sent,
.form-submit.is-error {
  pointer-events: none;
}
.form-submit.is-sending::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border: 1px solid rgba(214,178,74,.35);
  border-top-color: rgba(245,226,171,.96);
  border-radius: 50%;
  vertical-align: -1px;
  animation: ppSubmitSpin .72s linear infinite;
}
@keyframes ppSubmitSpin { to { transform: rotate(360deg); } }
.form-submit.is-sent {
  border-color: rgba(214,178,74,.55) !important;
  color: rgba(245,226,171,.96) !important;
}
.form-submit.is-error {
  border-color: rgba(205,88,88,.5) !important;
  color: rgba(255,205,205,.92) !important;
}

.contact-toast {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transform: scale(.985);
  transition: opacity .32s cubic-bezier(.16,1,.3,1), visibility .32s, transform .32s cubic-bezier(.16,1,.3,1);
  z-index: 40000;
  pointer-events: none;
  background: rgba(0,0,0,.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.contact-toast.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.contact-toast-card {
  width: min(520px, 92vw);
  padding: 36px 34px 34px;
  text-align: center;
  border: 1px solid rgba(214,178,74,.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(214,178,74,.08), transparent 54%),
    rgba(6,6,6,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 35px 95px rgba(0,0,0,.56);
}
.contact-toast-kicker {
  margin-bottom: 18px;
  font-size: .52rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(214,178,74,.72);
}
.contact-toast-title {
  margin-bottom: 18px;
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(20px, 3.2vw, 32px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(240,237,232,.94);
}
.contact-toast-body {
  font-size: .92rem;
  line-height: 1.75;
  color: rgba(240,237,232,.74);
}
.contact-toast.error .contact-toast-card { border-color: rgba(205,88,88,.42); }
.contact-toast.error .contact-toast-kicker { color: rgba(255,166,166,.76); }

/* Audio player PRO: Digital/Analog mode switch + analog needles.
   The data source remains the real precomputed RMS envelope, so audio routing stays native-safe. */
.meter-mode {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 4px;
}
.meter-mode-btn {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: .42rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240,237,232,.20);
  transition: color .2s;
}
.meter-mode-btn::before {
  content: '○';
  margin-right: 5px;
  color: rgba(214,178,74,.35);
}
.meter-mode-btn.active { color: rgba(240,237,232,.52); }
.meter-mode-btn.active::before { content: '●'; color: rgba(214,178,74,.72); }
.analog-meter {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
.analog-face {
  position: relative;
  height: 34px;
  border: 1px solid rgba(214,178,74,.10);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(214,178,74,.06), transparent 56%),
    rgba(255,255,255,.01);
  overflow: hidden;
}
.analog-face::before {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 8px;
  height: 1px;
  background: rgba(240,237,232,.14);
}
.analog-face i {
  position: absolute;
  left: 50%; bottom: 8px;
  width: 1px; height: 24px;
  background: rgba(245,226,171,.86);
  transform-origin: 50% 100%;
  transform: rotate(-48deg);
  box-shadow: 0 0 9px rgba(214,178,74,.28);
  transition: transform .045s linear;
}
.analog-label {
  position: absolute;
  left: 9px; top: 8px;
  font-size: .44rem;
  letter-spacing: .12em;
  color: rgba(240,237,232,.34);
}

/* Faster, cleaner 400 ms peak hold marker. */
.meter-bar i,
.mini-meter .meter-bar i {
  transition: left .045s linear, opacity .16s ease !important;
}


/* =========================================================
   PLAMEN.PRO v41 — final logo restore + contact placement fix
   ========================================================= */

/* Piano slide: force the ORIGINAL header logo image to remain visible.
   No generated/recreated text. The logo is semi-transparent with a real black
   optical outline made from repeated drop-shadows. */
.piano-text .pt-title-logo,
.piano-text .pt-title-logo#ptTitle {
  min-height: clamp(70px, 8vw, 122px) !important;
  opacity: 1 !important;
  transform: none !important;
  background: none !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  filter: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
.piano-text .pt-title-logo .pt-logo-img {
  display: block !important;
  visibility: visible !important;
  width: min(620px, 58vw) !important;
  max-width: 100% !important;
  height: auto !important;
  opacity: .52 !important;
  mix-blend-mode: normal !important;
  filter:
    drop-shadow( 3px  0   0 rgba(0,0,0,.98))
    drop-shadow(-3px  0   0 rgba(0,0,0,.98))
    drop-shadow( 0    3px 0 rgba(0,0,0,.98))
    drop-shadow( 0   -3px 0 rgba(0,0,0,.98))
    drop-shadow( 2px  2px 0 rgba(0,0,0,.96))
    drop-shadow(-2px  2px 0 rgba(0,0,0,.96))
    drop-shadow( 2px -2px 0 rgba(0,0,0,.96))
    drop-shadow(-2px -2px 0 rgba(0,0,0,.96))
    drop-shadow(0 0 4px rgba(214,178,74,.08)) !important;
}
@media (max-width: 1024px), (hover: none) {
  .piano-text .pt-title-logo,
  .piano-text .pt-title-logo#ptTitle {
    min-height: clamp(48px, 11vw, 92px) !important;
  }
  .piano-text .pt-title-logo .pt-logo-img {
    width: min(560px, 76vw) !important;
    opacity: .54 !important;
  }
}

/* Contact screen: only START YOUR PROJECT moves up. The info/form block and
   the footer logo return to a balanced, centered composition. */
@media (min-width: 1025px) {
  #contact {
    padding-bottom: 0 !important;
  }
  #contact > .section-wrap {
    max-width: 1320px !important;
    transform: none !important;
    padding-top: 0 !important;
  }
  #contact .section-label,
  #contact .section-title {
    transform: translateY(-130px) !important;
  }
  #contact .section-title {
    margin-bottom: 48px !important;
  }
  #contact .contact-layout {
    transform: none !important;
    margin-top: 0 !important;
    align-items: center !important;
  }
  #contact footer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 60px !important;
    padding: 0 24px !important;
    margin: 0 !important;
  }
}


/* =========================================================
   PLAMEN.PRO v42 — cinematic sticky reveal polish
   ========================================================= */

/* Logo on piano slide: softer optical outline, no sticker look. */
.piano-text .pt-title-logo .pt-logo-img {
  opacity: .50 !important;
  filter:
    drop-shadow( 1px  0   0 rgba(0,0,0,.92))
    drop-shadow(-1px  0   0 rgba(0,0,0,.92))
    drop-shadow( 0    1px 0 rgba(0,0,0,.92))
    drop-shadow( 0   -1px 0 rgba(0,0,0,.92))
    drop-shadow( 1px  1px 0 rgba(0,0,0,.78))
    drop-shadow(-1px  1px 0 rgba(0,0,0,.78))
    drop-shadow( 1px -1px 0 rgba(0,0,0,.78))
    drop-shadow(-1px -1px 0 rgba(0,0,0,.78))
    drop-shadow(0 0 5px rgba(214,178,74,.055)) !important;
}
@media (max-width: 1024px), (hover: none) {
  .piano-text .pt-title-logo .pt-logo-img {
    opacity: .52 !important;
    filter:
      drop-shadow( 1px  0   0 rgba(0,0,0,.92))
      drop-shadow(-1px  0   0 rgba(0,0,0,.92))
      drop-shadow( 0    1px 0 rgba(0,0,0,.92))
      drop-shadow( 0   -1px 0 rgba(0,0,0,.92))
      drop-shadow( 1px  1px 0 rgba(0,0,0,.78))
      drop-shadow(-1px  1px 0 rgba(0,0,0,.78))
      drop-shadow( 1px -1px 0 rgba(0,0,0,.78))
      drop-shadow(-1px -1px 0 rgba(0,0,0,.78))
      drop-shadow(0 0 4px rgba(214,178,74,.05)) !important;
  }
}

/* Start the third slide while the piano is still pinned, so it rises over the
   locked piano scene instead of appearing after a hard release. */
.piano-outer {
  margin-bottom: -100vh !important;
}
#music {
  position: relative;
  z-index: 5;
  box-shadow: 0 -46px 130px rgba(0,0,0,.72);
}
#music::before {
  z-index: 0;
}
#music > .section-wrap {
  position: relative;
  z-index: 1;
}
.piano-sticky {
  transform-origin: center center;
  will-change: transform, filter;
}
.piano-dim {
  display: block !important;
}
@media (max-width: 768px) {
  .piano-outer {
    margin-bottom: -100svh !important;
  }
  #music {
    box-shadow: 0 -40px 110px rgba(0,0,0,.78);
  }
}


/* =========================================================
   PLAMEN.PRO v44 — stable piano-to-music reveal fix
   ---------------------------------------------------------
   Fixes the v42/v43 overlap bug where sticky section takeover
   kept the piano scene visible over later sections.
   Piano still stays pinned while Selected Works rises over it,
   then normal document flow resumes for Prices / Portfolio / Contact.
   ========================================================= */

@media (min-width: 769px) {
  /* Keep only the piano scene cinematic. The content sections must scroll normally. */
  #music.section-border,
  #prices.section-border,
  #portfolio.section-border,
  #contact.section-border,
  #music,
  #prices,
  #portfolio,
  #contact {
    position: relative !important;
    top: auto !important;
    min-height: 100vh;
  }

  #prices,
  #portfolio,
  #contact {
    z-index: 6;
  }

  /* The Music slide starts exactly during the last viewport of the piano pin. */
  .piano-outer {
    height: 340vh !important;
    margin-bottom: -100vh !important;
    position: relative !important;
    z-index: 2;
  }

  .piano-sticky {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    transform-origin: center center !important;
    will-change: transform, filter;
  }

  #music {
    z-index: 7 !important;
    background: var(--black) !important;
    box-shadow: 0 -46px 130px rgba(0,0,0,.72);
  }

  #music > .section-wrap,
  #prices > .section-wrap,
  #portfolio > .section-wrap,
  #contact > .section-wrap {
    width: 100%;
  }

  /* No sticky carry-over from Selected Works into Prices. */
  #music + #prices {
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  #music,
  #prices,
  #portfolio,
  #contact {
    position: relative !important;
    top: auto !important;
  }

  .piano-outer {
    height: 340svh !important;
    margin-bottom: -100svh !important;
  }
}

/* Softer original-logo outline in the piano slide. */
.piano-text .pt-title-logo .pt-logo-img {
  opacity: .50 !important;
  filter:
    drop-shadow( .6px  0    0 rgba(0,0,0,.86))
    drop-shadow(-.6px  0    0 rgba(0,0,0,.86))
    drop-shadow( 0    .6px 0 rgba(0,0,0,.86))
    drop-shadow( 0   -.6px 0 rgba(0,0,0,.86))
    drop-shadow( .8px  .8px 0 rgba(0,0,0,.62))
    drop-shadow(-.8px  .8px 0 rgba(0,0,0,.62))
    drop-shadow( .8px -.8px 0 rgba(0,0,0,.62))
    drop-shadow(-.8px -.8px 0 rgba(0,0,0,.62))
    drop-shadow(0 0 4px rgba(214,178,74,.045)) !important;
}


/* =========================================================
   PLAMEN.PRO v45 — final piano timing only
   Scope: second slide logo size + hold before blur/Selected Works.
   ========================================================= */

/* Make the real logo smaller and less sticker-like on the piano slide. */
.piano-text .pt-title-logo .pt-logo-img {
  width: min(440px, 34vw) !important;
  opacity: .48 !important;
  filter:
    drop-shadow(.45px 0 0 rgba(0,0,0,.82))
    drop-shadow(-.45px 0 0 rgba(0,0,0,.82))
    drop-shadow(0 .45px 0 rgba(0,0,0,.82))
    drop-shadow(0 -.45px 0 rgba(0,0,0,.82))
    drop-shadow(.65px .65px 0 rgba(0,0,0,.52))
    drop-shadow(-.65px .65px 0 rgba(0,0,0,.52))
    drop-shadow(.65px -.65px 0 rgba(0,0,0,.52))
    drop-shadow(-.65px -.65px 0 rgba(0,0,0,.52))
    drop-shadow(0 0 3px rgba(214,178,74,.04)) !important;
}

@media (max-width: 1024px), (hover: none) {
  .piano-text .pt-title-logo .pt-logo-img {
    width: min(390px, 58vw) !important;
    opacity: .50 !important;
  }
}

/* Extend only the piano scene: frames finish, the opened piano holds, then blur/zoom begins. */
.piano-outer {
  height: 460vh !important;
  margin-bottom: -70vh !important;
}

@media (max-width: 768px) {
  .piano-outer {
    height: 460svh !important;
    margin-bottom: -70svh !important;
  }
}

/* =========================================================
   PLAMEN.PRO v46 — readability + contact glass polish only
   Scope: contact form glass motion, lighter small text, footer line off.
   ========================================================= */

/* 1) Contact form: replace the static bright slash with a subtle moving glass reflection. */
.contact-form {
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 52% 35%, rgba(255,255,255,.025), transparent 48%),
    linear-gradient(168deg,
      rgba(255,255,255,.026) 0%,
      rgba(255,255,255,.008) 34%,
      rgba(6,6,6,.20) 100%) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.08) brightness(.96) !important;
  backdrop-filter: blur(3px) saturate(1.08) brightness(.96) !important;
}
.contact-form::after {
  opacity: .42 !important;
  background:
    linear-gradient(113deg,
      transparent 0%,
      transparent 41%,
      rgba(255,255,255,.018) 47%,
      rgba(255,255,255,.040) 50%,
      rgba(255,255,255,.018) 53%,
      transparent 60%,
      transparent 100%) !important;
  transform: translate3d(-22%, 0, 0);
  animation: ppContactGlassDrift 8.5s cubic-bezier(.45,0,.2,1) infinite alternate;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
@keyframes ppContactGlassDrift {
  0%   { transform: translate3d(-24%, 0, 0); opacity: .18; }
  45%  { opacity: .32; }
  100% { transform: translate3d(18%, 0, 0); opacity: .26; }
}

/* 2) Contact form legibility: brighter, not white, with a soft black shadow. */
.contact-form .fgroup label,
.contact-form label,
.contact-form input,
.contact-form textarea,
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.contact-form .cs-trigger,
.contact-form .cs-opt,
.contact-form .cs-chevron,
#contact .ci-val,
#contact .ci-label {
  text-shadow: 0 1px 2px rgba(0,0,0,.72), 0 0 8px rgba(0,0,0,.38) !important;
}
.contact-form .fgroup label,
.contact-form label,
#contact .ci-label {
  color: rgba(238,232,220,.72) !important;
}
.contact-form input,
.contact-form textarea,
.contact-form .cs-trigger.selected,
#contact .ci-val {
  color: rgba(242,238,230,.88) !important;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.contact-form .cs-trigger {
  color: rgba(236,232,224,.62) !important;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form .custom-select.open .cs-trigger {
  color: rgba(248,244,236,.93) !important;
  border-bottom-color: rgba(238,232,220,.44) !important;
}

/* 3) Global small-copy readability pass. Keeps titles untouched, lifts secondary text. */
body,
p,
li,
small,
.section-label,
.hero-sub,
.st-kicker,
.st-meta,
.pt-kicker,
.pt-sub,
.price-row-desc,
.price-row-name,
.player-now-label,
.player-track-sub,
.player-counter,
.player-time-block,
.player-list li,
.project-card p,
.project-card .eyebrow,
.footer-tagline,
.footer-copy,
.footer-nav-row a,
.ci-val,
.ci-label {
  text-shadow: 0 1px 2px rgba(0,0,0,.72), 0 0 10px rgba(0,0,0,.36);
}
p,
.project-card p,
.price-row-desc,
.player-track-sub,
.player-counter,
.player-time-block,
.footer-tagline,
.footer-copy {
  color: rgba(232,228,220,.60) !important;
}
.section-label,
.st-kicker,
.pt-kicker,
.project-card .eyebrow,
.player-now-label,
.ci-label {
  color: rgba(207,174,104,.70) !important;
}
.price-row-name,
.player-list li,
.project-card h3,
.contact-form input,
.contact-form textarea {
  color: rgba(236,232,224,.82) !important;
}

@media (max-width: 768px), (hover: none) {
  p,
  .project-card p,
  .price-row-desc,
  .player-track-sub,
  .player-counter,
  .player-time-block,
  .footer-tagline,
  .footer-copy {
    color: rgba(236,232,224,.70) !important;
  }
  .price-row-name,
  .player-list li,
  .project-card h3,
  .contact-form input,
  .contact-form textarea {
    color: rgba(242,238,230,.88) !important;
  }
  .contact-form input::placeholder,
  .contact-form textarea::placeholder,
  .contact-form .cs-trigger {
    color: rgba(238,234,226,.68) !important;
  }
}

/* 4) Footer: remove the unnecessary horizontal separator. */
footer::before,
#contact footer::before {
  display: none !important;
  opacity: 0 !important;
}

/* =========================================================
   PLAMEN.PRO v47 — Final readability / premium polish
   Scope: typography brightness, subtle metal emboss, contact glass,
   player and small-copy readability. No hero timing / JS changes.
   ========================================================= */

:root {
  --pp-cream-hi: #fff5d0;
  --pp-cream-mid: #efd27d;
  --pp-cream-low: #b78934;
  --pp-small-copy: rgba(244, 241, 234, .82);
  --pp-small-copy-soft: rgba(238, 234, 226, .72);
}

/* Big section titles: brighter cream-metal, but less “lit” than before. */
.section-title,
.price-title span,
.price-title em {
  background: linear-gradient(96deg,
    #b98b31 0%,
    #dfbf66 18%,
    #fff4c9 36%,
    #fff9df 45%,
    #e4bd58 60%,
    #b8862e 74%,
    #f3dda0 90%,
    #a77b2d 100%) !important;
  background-size: 190% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter:
    drop-shadow(0 2px 1px rgba(0,0,0,.62))
    drop-shadow(0 8px 16px rgba(0,0,0,.44))
    drop-shadow(0 0 12px rgba(238,204,126,.10)) !important;
  text-shadow: none !important;
}

/* Slightly dim the glow on very large title strokes, so it reads as relief. */
#contact .section-title,
#portfolio .section-title,
#music .section-title,
#prices .section-title {
  text-rendering: geometricPrecision;
}

/* Prices inherit the same cream-metal language as the section titles. */
.price-row-val {
  background: linear-gradient(96deg,
    #b98b31 0%,
    #e4c471 22%,
    #fff4cd 43%,
    #d7ad4e 62%,
    #f0d99b 86%,
    #a77b2d 100%) !important;
  background-size: 175% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.68))
    drop-shadow(0 4px 10px rgba(0,0,0,.48))
    drop-shadow(0 0 8px rgba(238,204,126,.08)) !important;
  animation: ppGoldSheen 8s ease-in-out infinite;
}

/* Price rows: stronger text legibility, but still elegant and not pure white. */
.price-row-name {
  color: rgba(246,243,236,.88) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.82), 0 0 10px rgba(0,0,0,.48) !important;
}
.price-row-left [data-cms$="_sub"],
.price-row-desc,
.price-row-left > div:nth-child(2) {
  color: rgba(238,234,226,.62) !important;
  font-size: .72rem !important;
  line-height: 1.55 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.82), 0 0 9px rgba(0,0,0,.42) !important;
}

/* Portfolio cards: small texts nearly white and a touch larger. */
.portfolio-card .portfolio-kicker,
.portfolio-card .eyebrow,
.project-card .eyebrow {
  color: rgba(222,190,112,.82) !important;
  font-size: .76rem !important;
  letter-spacing: .18em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.82), 0 0 8px rgba(0,0,0,.46) !important;
}
.portfolio-card h3,
.project-card h3 {
  color: rgba(246,243,236,.88) !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.78), 0 0 12px rgba(0,0,0,.42) !important;
}
.portfolio-card p,
.project-card p {
  color: rgba(242,238,230,.74) !important;
  font-size: clamp(.92rem, .9vw, 1.02rem) !important;
  line-height: 1.72 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.82), 0 0 8px rgba(0,0,0,.44) !important;
}

/* Audio player: brighter, slightly larger playlist and title text. */
.player-track-name,
.player-title-row .player-track-name,
.player-head .player-track-name {
  color: rgba(244,241,234,.86) !important;
  font-size: clamp(1.12rem, 1.45vw, 1.72rem) !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.82), 0 0 10px rgba(0,0,0,.5) !important;
}
.track-list li,
.player-list li,
.track-list button,
.track-list .track-title,
.track-list .tl-title {
  color: rgba(236,232,224,.66) !important;
  font-size: clamp(.76rem, .72vw, .92rem) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.82), 0 0 7px rgba(0,0,0,.44) !important;
}
.track-list li.active,
.track-list li.active .track-title,
.track-list li.active .tl-title,
.track-list li.is-active,
.player-list li.active {
  color: rgba(246,243,236,.88) !important;
}
.player-now-label,
.player-track-sub,
.player-counter,
.player-time-block,
.meter-mode-btn,
.mini-meter-ch .mm-l {
  color: rgba(238,234,226,.66) !important;
  font-size: .72rem !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.82), 0 0 8px rgba(0,0,0,.42) !important;
}

/* Hero/piano supporting captions: slightly larger and with a soft blurred black edge. */
.studio-text .hero-eyebrow,
.studio-text .hero-sub,
.piano-text .pt-label,
.piano-text .pt-sub,
.hero-eyebrow,
.hero-sub,
.pt-label,
.pt-sub {
  color: rgba(246,242,234,.76) !important;
  font-size: clamp(.72rem, .78vw, .88rem) !important;
  letter-spacing: .22em !important;
  text-shadow:
    0 1px 1px rgba(0,0,0,.92),
    0 0 2px rgba(0,0,0,.88),
    0 0 10px rgba(0,0,0,.50) !important;
  -webkit-text-stroke: .18px rgba(0,0,0,.38);
}
.studio-text .hero-eyebrow,
.piano-text .pt-label {
  color: rgba(226,190,106,.84) !important;
}

/* Contact form glass: subtler moving highlight, no strong static slash. */
.contact-form::after {
  opacity: .20 !important;
  background: linear-gradient(112deg,
    transparent 0%,
    transparent 43%,
    rgba(255,255,255,.010) 47%,
    rgba(255,255,255,.024) 50%,
    rgba(255,255,255,.010) 53%,
    transparent 61%,
    transparent 100%) !important;
  animation-duration: 11s !important;
}
.contact-form::before {
  opacity: .38 !important;
}
.contact-form .fgroup label,
.contact-form label {
  color: rgba(246,242,234,.84) !important;
  font-size: .74rem !important;
  letter-spacing: .20em !important;
}
.contact-form input,
.contact-form textarea,
.contact-form .cs-trigger,
.contact-form .cs-opt {
  color: rgba(246,243,236,.88) !important;
  font-size: clamp(.92rem, .88vw, 1.02rem) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.82), 0 0 8px rgba(0,0,0,.44) !important;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.contact-form .cs-trigger:not(.selected) {
  color: rgba(242,238,230,.66) !important;
}

/* General small-copy readability across the whole site. */
.section-label,
.ci-label,
.ci-val,
.footer-tagline,
.footer-copy,
.footer-nav-row a,
small,
p {
  color: var(--pp-small-copy-soft) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.84), 0 0 8px rgba(0,0,0,.42) !important;
}
.section-label,
.ci-label {
  color: rgba(226,190,106,.78) !important;
}
.ci-val {
  color: rgba(246,243,236,.86) !important;
}

/* Footer: keep it clean — no separator line. */
#contact footer,
footer {
  border-top: 0 !important;
  box-shadow: none !important;
}
#contact footer::before,
#contact footer::after,
footer::before,
footer::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

@media (max-width: 768px), (hover: none) {
  .section-title,
  .price-title span,
  .price-title em {
    filter:
      drop-shadow(0 2px 1px rgba(0,0,0,.64))
      drop-shadow(0 7px 14px rgba(0,0,0,.46))
      drop-shadow(0 0 9px rgba(238,204,126,.08)) !important;
  }
  .price-row-name,
  .track-list li,
  .player-list li,
  .player-track-name,
  .portfolio-card h3,
  .project-card h3 {
    color: rgba(246,243,236,.88) !important;
  }
  .price-row-left [data-cms$="_sub"],
  .price-row-desc,
  .portfolio-card p,
  .project-card p,
  .player-track-sub,
  .player-counter,
  .player-time-block,
  .contact-form input::placeholder,
  .contact-form textarea::placeholder {
    color: rgba(242,238,230,.72) !important;
  }
}

/* =========================================================
   PLAMEN.PRO v48 — final small typography/player polish
   Scope: player header/mobile layout + hero small text color
   ========================================================= */

/* Hero line: SOUND ARCHITECT brighter, less red, still below main title intensity */
.hero-title .line-italic,
.studio-text .hero-title .line-italic {
  background: linear-gradient(180deg,
    rgba(252,238,192,.78) 0%,
    rgba(226,190,101,.66) 48%,
    rgba(190,150,64,.52) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter:
    drop-shadow(0 2px 1px rgba(0,0,0,.70))
    drop-shadow(0 7px 14px rgba(0,0,0,.48))
    drop-shadow(0 0 10px rgba(229,192,105,.10)) !important;
}

/* Player: remove STUDIO PLAMEN.PRO from UI and place counter/time between title and VU */
.player-track-sub {
  display: none !important;
}
.player-head-mini .player-track-sub::before {
  display: none !important;
  content: none !important;
}
.player-head-mini {
  margin-bottom: 14px !important;
  align-items: center !important;
}
.player-title-row {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.9fr) minmax(170px, auto) minmax(280px, 1fr) !important;
  align-items: center !important;
  column-gap: clamp(24px, 3.4vw, 56px) !important;
}
.player-title-row .player-track-name {
  font-size: clamp(1.46rem, 1.65vw, 2.05rem) !important;
  color: rgba(238,235,229,.88) !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.58),
    0 10px 22px rgba(0,0,0,.55),
    0 0 20px rgba(224,190,112,.075) !important;
}
.player-mid-meta {
  margin-left: 0 !important;
  justify-self: center !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 18px !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}
.player-counter,
.player-time-block {
  color: rgba(238,235,229,.68) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.72) !important;
}
.mini-meter {
  margin-left: 0 !important;
  justify-self: stretch !important;
}

/* Playlist title readability – slightly larger and brighter, but still restrained */
.track-name-main {
  font-size: .82rem !important;
  color: rgba(230,227,220,.56) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.72) !important;
}
.track-item.active .track-name-main {
  color: rgba(240,237,232,.82) !important;
}

/* Mobile player top layout: title, counter and VU should breathe instead of colliding */
@media (max-width: 768px) {
  .player-head-mini {
    margin-bottom: 12px !important;
  }
  .player-now-label {
    font-size: .66rem !important;
    line-height: 1.35 !important;
    letter-spacing: .20em !important;
    color: rgba(238,235,229,.72) !important;
  }
  .player-title-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 14px !important;
    align-items: start !important;
  }
  .player-title-row .player-track-name {
    font-size: clamp(1.18rem, 5.6vw, 1.72rem) !important;
    letter-spacing: .18em !important;
    line-height: 1.18 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  .player-mid-meta {
    justify-self: start !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    font-size: .72rem !important;
    letter-spacing: .16em !important;
    margin-top: -2px !important;
  }
  .mini-meter {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .meter-mode {
    justify-content: flex-start !important;
    margin-bottom: 7px !important;
  }
  .player-top {
    padding: 22px 18px 18px !important;
  }
  .player-wave-wrap {
    margin-top: 8px !important;
  }
  .track-name-main {
    font-size: .76rem !important;
    color: rgba(230,227,220,.56) !important;
  }
  .track-item.active .track-name-main {
    color: rgba(240,237,232,.80) !important;
  }
}

@media (max-width: 430px) {
  .player-mid-meta {
    font-size: .66rem !important;
    gap: 12px !important;
  }
  .player-title-row .player-track-name {
    font-size: clamp(1.05rem, 5.1vw, 1.42rem) !important;
  }
  .player-now-label {
    font-size: .61rem !important;
  }
}

/* =========================================================
   PLAMEN.PRO v49 — player micro layout polish only
   Scope: player title spacing/relief, counter position, timer line, VU vertical alignment
   ========================================================= */

/* Counter goes back to the upper metadata line next to NOW PLAYING. */
.player-head-mini {
  display: flex !important;
  align-items: center !important;
  gap: clamp(18px, 2vw, 34px) !important;
  margin-bottom: clamp(18px, 1.65vw, 28px) !important;
}
.player-head-mini .player-counter {
  display: inline-flex !important;
  align-items: center !important;
  color: rgba(236,232,224,.72) !important;
  font-size: .78rem !important;
  letter-spacing: .20em !important;
  line-height: 1 !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.82),
    0 0 8px rgba(0,0,0,.42) !important;
}

/* Main player row: title, timer, VU all share the same visual baseline/line. */
.player-title-row {
  display: grid !important;
  grid-template-columns: minmax(280px, .92fr) minmax(135px, auto) minmax(330px, 1fr) !important;
  align-items: center !important;
  column-gap: clamp(28px, 3.5vw, 64px) !important;
}

/* Track title: slightly smaller, less spaced and less embossed. */
.player-title-row .player-track-name,
.player-track-name,
.player-head .player-track-name {
  font-size: clamp(1.28rem, 1.42vw, 1.78rem) !important;
  letter-spacing: clamp(.16em, .95vw, .30em) !important;
  color: rgba(238,234,226,.84) !important;
  line-height: 1.08 !important;
  filter: none !important;
  text-shadow:
    0 1px 1px rgba(0,0,0,.70),
    0 5px 12px rgba(0,0,0,.44),
    0 0 8px rgba(224,190,112,.045) !important;
}

/* Timer stays between title and VU, same line, with a slightly richer but subtle treatment. */
.player-mid-meta {
  justify-self: center !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  transform: translateY(-1px) !important;
}
.player-time-block {
  display: inline-flex !important;
  align-items: center !important;
  gap: .62em !important;
  font-size: clamp(.82rem, .82vw, 1.02rem) !important;
  letter-spacing: .17em !important;
  color: rgba(242,238,230,.76) !important;
  line-height: 1 !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.82),
    0 0 10px rgba(222,188,112,.08) !important;
}
.player-time-sep {
  color: rgba(242,238,230,.36) !important;
  margin: 0 .10em !important;
}

/* VU meter moves up slightly so the composition feels balanced with title/timer. */
.mini-meter {
  align-self: center !important;
  transform: translateY(-7px) !important;
}
.meter-mode {
  margin-bottom: 8px !important;
}
.meter-digital {
  transform: translateY(-1px) !important;
}

@media (max-width: 980px) {
  .player-title-row {
    grid-template-columns: minmax(220px, 1fr) minmax(120px, auto) !important;
    grid-template-areas:
      "title time"
      "meter meter" !important;
    row-gap: 14px !important;
    column-gap: 20px !important;
  }
  .player-title-row .player-track-name { grid-area: title !important; }
  .player-mid-meta { grid-area: time !important; justify-self: end !important; }
  .mini-meter { grid-area: meter !important; transform: translateY(-2px) !important; }
}

@media (max-width: 768px) {
  .player-head-mini {
    margin-bottom: 14px !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
  }
  .player-head-mini .player-counter {
    font-size: .66rem !important;
    letter-spacing: .17em !important;
  }
  .player-title-row {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "time"
      "meter" !important;
    row-gap: 12px !important;
  }
  .player-title-row .player-track-name {
    font-size: clamp(1.0rem, 4.9vw, 1.44rem) !important;
    letter-spacing: .13em !important;
    line-height: 1.16 !important;
  }
  .player-mid-meta {
    justify-self: center !important;
    transform: translateY(0) !important;
  }
  .player-time-block {
    font-size: .76rem !important;
    letter-spacing: .14em !important;
  }
  .mini-meter {
    width: 100% !important;
    transform: translateY(-3px) !important;
  }
}

/* =========================================================
   PLAMEN.PRO v50 — desktop contact service dropdown fix only
   Keeps mobile behavior untouched. Prevents the desktop form
   glass container from clipping the first service options.
   ========================================================= */
@media (min-width: 769px) {
  #contact .contact-form {
    overflow: visible !important;
  }

  #contact .custom-select {
    position: relative !important;
    z-index: 80 !important;
  }

  #contact .custom-select.open {
    z-index: 120 !important;
  }

  #contact .cs-options {
    top: calc(100% + 2px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 130 !important;
    max-height: none !important;
    overflow: visible !important;
    border-top: 1px solid rgba(240,237,232,.12) !important;
    border-bottom: 1px solid rgba(200,169,106,.20) !important;
    background:
      linear-gradient(180deg, rgba(18,18,18,.98), rgba(7,7,7,.98)) !important;
    box-shadow:
      0 24px 70px rgba(0,0,0,.72),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.06) !important;
    backdrop-filter: blur(10px) saturate(1.06) !important;
  }

  #contact .cs-opt {
    display: block !important;
    min-height: 42px !important;
    padding: 13px 20px !important;
    color: rgba(246,243,236,.82) !important;
  }
}

/* =========================================================
   PLAMEN.PRO V3.0 FINAL — mobile player timer position only
   Moves the timer to the top-right on mobile. Desktop stays untouched.
   ========================================================= */
@media (max-width: 768px) {
  .player-shell,
  .player-top {
    position: relative !important;
  }

  .player-head-mini {
    padding-right: clamp(120px, 34vw, 172px) !important;
  }

  .player-title-row {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "meter" !important;
    row-gap: 13px !important;
  }

  .player-mid-meta {
    position: absolute !important;
    top: 22px !important;
    right: 20px !important;
    z-index: 30 !important;
    margin: 0 !important;
    transform: none !important;
    justify-self: auto !important;
    align-self: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: 48vw !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }

  .player-time-block {
    font-size: .76rem !important;
    letter-spacing: .13em !important;
    line-height: 1 !important;
    color: rgba(242,238,230,.78) !important;
    text-align: right !important;
    text-shadow:
      0 1px 2px rgba(0,0,0,.82),
      0 0 10px rgba(222,188,112,.08) !important;
  }

  .mini-meter {
    grid-area: meter !important;
  }
}

@media (max-width: 430px) {
  .player-head-mini {
    padding-right: 112px !important;
  }

  .player-mid-meta {
    top: 20px !important;
    right: 18px !important;
    max-width: 45vw !important;
  }

  .player-time-block {
    font-size: .68rem !important;
    letter-spacing: .11em !important;
  }
}

/* =========================================================
   PLAMEN.PRO v3.1.2 — VU meter micro alignment only
   Moves only the VU block a few pixels higher on desktop.
   ========================================================= */
@media (min-width: 981px) {
  .mini-meter {
    transform: translateY(-14px) !important;
  }
}