:root {
  --paper: #f5f3ee;
  --ink: #101010;
  --orange: #ff6d22;
  --pink: #ef0a75;
  --blue: #0b82d8;
  --ease: cubic-bezier(.22,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); overflow-x: hidden; }

.progress {
  position: fixed;
  z-index: 100;
  left: 0; top: 0;
  width: 100%; height: 2px;
  background: rgba(0,0,0,.04);
  pointer-events: none;
}
.progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg,var(--orange),var(--pink),var(--blue));
  transform-origin: 0 50%;
}

.screen {
  position: relative;
  width: 100%;
  background: var(--paper);
  overflow: hidden;
  line-height: 0;
  opacity: 0;
  transform: translateY(22px) scale(.996);
  transition: opacity .85s var(--ease), transform 1s var(--ease);
}
.screen.is-visible { opacity: 1; transform: none; }
.screen img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.overlay-button, .nav-hit {
  position: absolute;
  display: block;
  cursor: pointer;
  background: transparent;
  border: 0;
  text-decoration: none;
}

/* Clickable navigation areas matching page 1 artwork */
.hero-nav { position: absolute; inset: 0; pointer-events: none; }
.hero-nav .nav-hit { pointer-events: auto; top: 3.4%; height: 6%; }
.home-hit { left: 65.1%; width: 5.1%; }
.sobre-hit { left: 71.5%; width: 5.9%; }
.servicos-hit { left: 78.0%; width: 7.0%; }
.amostras-hit { left: 85.1%; width: 7.8%; }
.contato-hit { left: 92.3%; width: 7.0%; }

/* Page 2: OUViR AMOSTRAS */
.samples-button { left: 13.9%; top: 62.6%; width: 13.6%; height: 8.7%; border-radius: 10px; }
/* Page 3: LISTEN */
.play-button { left: 54.6%; top: 65.8%; width: 12.4%; height: 10%; }
/* Page 5: INICIAR PROJETO */
.project-button { left: 39.8%; top: 60.0%; width: 20.7%; height: 9.2%; border-radius: 8px; }
/* Page 6: e-mail */
.email-button { left: 76.8%; top: 29.3%; width: 18%; height: 8%; }

.nav-hit::after, .samples-button::after, .project-button::after, .email-button::after, .play-button::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow .25s ease, background .25s ease;
}
.nav-hit:hover::after, .samples-button:hover::after, .project-button:hover::after, .email-button:hover::after, .play-button:hover::after {
  box-shadow: inset 0 0 0 1px rgba(255,109,34,.22);
  background: rgba(255,255,255,.025);
}

.section-dots {
  position: fixed;
  z-index: 90;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(246,244,239,.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: .72;
  transition: opacity .25s ease;
}
.section-dots:hover { opacity: 1; }
.section-dots a {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,.26);
  transition: transform .25s ease, background .25s ease;
}
.section-dots a.active { transform: scale(1.55); background: var(--orange); }

.prototype-toast {
  position: fixed;
  z-index: 110;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 18px);
  padding: 10px 16px;
  background: rgba(10,10,10,.9);
  color: #fff;
  border-radius: 999px;
  font: 500 12px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing: .03em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.prototype-toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 760px) {
  .screen {
    /* Desktop artwork remains intact in this first visual prototype. */
    min-height: auto;
  }
  .section-dots { right: 7px; gap: 8px; padding: 8px; }
  .section-dots a { width: 5px; height: 5px; }
  .hero-nav .nav-hit { top: 2%; height: 10%; }
  .prototype-toast { bottom: 14px; width: calc(100% - 28px); text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .screen { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition-duration: .01ms !important; }
}

/* V0.2 — interactive waveform reactors */
.wave-reactor {
  position: absolute;
  z-index: 8;
  cursor: crosshair;
  line-height: normal;
  opacity: .96;
  transition: filter .35s ease, opacity .35s ease;
  touch-action: none;
}
.wave-reactor canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.wave-reactor:hover {
  filter: saturate(1.08) contrast(1.02);
  opacity: 1;
}
.wave-home-main { left: 67.8%; top: 29.7%; width: 27.0%; height: 24.0%; }
.wave-home-mid  { left: 38.7%; top: 43.5%; width: 11.5%; height: 22.0%; }
.stereo-home { left: 88.2%; top: 78.2%; width: 9.8%; height: 13.6%; }
.wave-about-small { left: 34.2%; top: 43.0%; width: 12.9%; height: 11.4%; }
.wave-about-edge  { right: 0.0%; top: 35.1%; width: 8.2%; height: 30.5%; }
.wave-sample-player { left: 54.6%; top: 28.0%; width: 27.8%; height: 14.0%; }
.wave-cta-left  { left: 0; top: 40.0%; width: 18.2%; height: 14.5%; }
.wave-cta-right { right: 0; top: 40.0%; width: 18.2%; height: 14.5%; }
.stereo-about { left: 35.15%; top: 71.4%; width: 8.7%; height: 12.0%; }
.stereo-samples { left: 4.3%; top: 82.8%; width: 8.9%; height: 12.4%; }

.wave-reactor::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 6px;
  opacity: 0;
  box-shadow: 0 0 0 1px rgba(12,130,216,.08);
  transition: opacity .28s ease;
  pointer-events: none;
}
.wave-reactor:hover::after { opacity: 1; }

.wave-reactor[data-mode="stereo"]::after {
  inset: -4px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(12,130,216,.10);
}

@media (hover: none) {
  .wave-reactor { cursor: default; }
  .wave-reactor::after { display: none; }
}

/* V0.3 — Sample carousel title/navigation */
.sample-title-patch {
  position: absolute;
  z-index: 16;
  left: 54.45%;
  top: 10.95%;
  width: 27.9%;
  height: 18.2%;
  padding: 2.2% 1.85% 0 1.85%;
  background: rgba(245,243,238,1);
  line-height: 1.1;
  color: #101010;
}
.sample-heading-row {
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.sample-title-wrap { min-width: 0; flex: 1; }
.sample-kicker {
  font: 600 clamp(7px,.72vw,13px)/1.1 "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .28em;
  white-space: nowrap;
  margin-bottom: clamp(12px,1.15vw,21px);
}
.sample-title {
  max-width: 100%;
  font: 500 clamp(13px,1.55vw,29px)/1.1 "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .105em;
  text-transform: uppercase;
  transition: opacity .18s ease, transform .22s ease;
}
.sample-title.is-changing { opacity: 0; transform: translateY(5px); }
.sample-nav {
  display: flex;
  align-items: center;
  gap: clamp(5px,.45vw,9px);
  margin-top: -2px;
  flex: 0 0 auto;
}
.sample-arrow {
  width: clamp(22px,1.85vw,34px);
  height: clamp(22px,1.85vw,34px);
  border: 1px solid rgba(16,16,16,.22);
  border-radius: 50%;
  background: transparent;
  color: #111;
  font: 400 clamp(12px,1vw,18px)/1 sans-serif;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.sample-arrow:hover {
  border-color: rgba(255,109,34,.75);
  background: rgba(255,109,34,.035);
  transform: scale(1.06);
}
.sample-counter {
  min-width: clamp(36px,3vw,52px);
  text-align: center;
  font: 500 clamp(7px,.62vw,11px)/1 "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .12em;
  color: rgba(16,16,16,.55);
}

@media (max-width: 760px) {
  .sample-title-patch { padding-top: 1.45%; }
  .sample-kicker { margin-bottom: 5px; letter-spacing: .18em; }
  .sample-title { font-size: clamp(7px,1.7vw,13px); letter-spacing: .07em; }
  .sample-nav { gap: 2px; }
  .sample-arrow { width: 16px; height: 16px; font-size: 9px; }
  .sample-counter { min-width: 28px; font-size: 6px; }
}

/* V0.9 — header menu closer to the handwritten signal-chain language */
.hero-menu-mask {
  position: absolute;
  z-index: 14;
  left: 63.2%;
  top: 2.3%;
  width: 35.8%;
  height: 9.2%;
  background: linear-gradient(90deg, rgba(248,247,243,.985), rgba(249,246,242,.99));
  pointer-events: none;
}
.hero-nav-hand { z-index: 15; }
.hero-nav-hand .nav-hit {
  top: 3.2%;
  height: 6.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #17254a;
  font-family: "Bradley Hand", "Segoe Print", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: clamp(8px, .78vw, 15px);
  font-style: italic;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  transform: rotate(-1.2deg);
  text-shadow: .15px .15px 0 rgba(16,29,69,.22);
}
.hero-nav-hand .nav-hit:nth-child(even) { transform: rotate(.8deg); }
.hero-nav-hand .nav-hit:hover { color: #0f3579; }
.hero-nav-hand .home-hit::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--orange);
  transform: translateX(-50%);
}
.hero-nav-hand .nav-hit::after {
  inset: -2px -4px;
  border-radius: 4px;
}
@media (max-width: 760px) {
  .hero-nav-hand .nav-hit { font-size: clamp(5px,1.3vw,9px); letter-spacing: 0; }
  .hero-nav-hand .home-hit::before { width: 3px; height: 3px; bottom: -1px; }
}


/* V0.12 — tighter transparent header logo overlay */
.hero-logo-mask {
  position: absolute;
  z-index: 13;
  left: 1.45%;
  top: 0.95%;
  width: 12.1%;
  height: 8.2%;
  background: linear-gradient(90deg, rgba(248,247,243,.996), rgba(249,246,242,.996));
  border-radius: 2px;
  pointer-events: none;
}
.screen img.hero-logo-overlay {
  position: absolute;
  z-index: 15;
  left: 1.72%;
  top: 1.18%;
  width: 11.3%;
  max-width: 11.3%;
  height: auto;
  display: block;
  filter: saturate(1.05) contrast(1.04);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 760px) {
  .hero-logo-mask { left: 1.1%; top: .85%; width: 13.7%; height: 8.6%; }
  .screen img.hero-logo-overlay { left: 1.35%; top: 1.05%; width: 12.6%; max-width: 12.6%; }
}

/* V0.13 — key copy rebuilt as real HTML/CSS text */
.html-panel {
  position: absolute;
  z-index: 11;
  line-height: normal;
  pointer-events: none;
}
.panel-mask {
  position: absolute;
  inset: 0;
  background: rgba(248,246,241,.995);
  z-index: 0;
}
.html-copy {
  position: absolute;
  z-index: 1;
  color: #101010;
  font-family: "Helvetica Neue", Arial, sans-serif;
  pointer-events: auto;
}
.gradient-text {
  display: inline-block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#ff6d22 0%,#ef0a75 48%,#0b82d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.gradient-text.italic { font-style: italic; }
.short-rule {
  display: block;
  width: 2.8vw;
  max-width: 45px;
  height: 1px;
  background: #111;
}

/* Page 3 — Audio Craft */
.audio-craft-panel {
  left: 4.2%; top: 18.1%; width: 44.5%; height: 37.5%;
}
.audio-craft-copy { left: 6%; top: 1%; }
.audio-craft-copy h2 {
  margin: 0;
  font-size: clamp(44px, 6.6vw, 112px);
  line-height: .95;
  font-weight: 500;
  letter-spacing: -.055em;
}
.audio-craft-copy .short-rule { margin: 4.7% 0 4.4%; }
.audio-craft-copy p {
  margin: 0;
  font-size: clamp(11px, 1.18vw, 21px);
  line-height: 1.48;
  font-weight: 400;
}

/* Page 4 — Services */
.services-panel {
  left: 4.0%; top: 5.3%; width: 44.0%; height: 88.0%;
}
.services-copy { left: 5.4%; top: 1.3%; width: 89%; }
.services-copy .accent-rule {
  display: block;
  width: 3.0vw;
  max-width: 52px;
  height: 3px;
  background: var(--orange);
  margin-bottom: 3.2%;
}
.services-copy .eyebrow {
  font-size: clamp(8px,.95vw,17px);
  letter-spacing: .16em;
  color: rgba(16,16,16,.42);
  margin-bottom: 3.8%;
}
.services-copy h2 {
  margin: 0 0 7.2%;
  font-size: clamp(40px,5.9vw,101px);
  line-height: .95;
  font-weight: 500;
  letter-spacing: -.055em;
}
.service-list { display: grid; }
.service-item {
  display: grid;
  grid-template-columns: 8.5% 1px 1fr;
  column-gap: 4.2%;
  align-items: start;
  padding: 0 0 5.0%;
  margin: 0 0 5.0%;
  border-bottom: 1px solid rgba(16,16,16,.12);
}
.service-item:last-child { border-bottom: 0; margin-bottom: 0; }
.service-no {
  font-size: clamp(12px,1.42vw,25px);
  line-height: 1;
  padding-top: .25em;
}
.service-accent { width: 1px; height: 5.4vw; min-height: 56px; max-height: 94px; }
.service-accent.orange { background: var(--orange); }
.service-accent.pink { background: var(--pink); }
.service-accent.blue { background: var(--blue); }
.service-item h3 {
  margin: 0 0 2.6%;
  font-size: clamp(14px,1.58vw,28px);
  line-height: 1.15;
  font-weight: 600;
}
.service-item p {
  margin: 0;
  font-size: clamp(10px,1.12vw,20px);
  line-height: 1.48;
  color: rgba(16,16,16,.72);
}

/* Page 5 — CTA */
.cta-copy-panel {
  left: 25.0%; top: 6.4%; width: 50%; height: 63.5%;
}
.cta-copy { inset: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta-copy h2 {
  margin: 0;
  font-size: clamp(46px,6.05vw,104px);
  line-height: .91;
  font-weight: 500;
  letter-spacing: -.055em;
}
.cta-copy p {
  margin: 4.4% 0 5.2%;
  font-size: clamp(10px,1.14vw,20px);
  line-height: 1.42;
  color: rgba(16,16,16,.74);
}
.cta-html-button {
  min-width: 41%;
  padding: 2.4% 5.2%;
  border: 1px solid rgba(16,16,16,.72);
  border-radius: 7px;
  color: #111;
  text-decoration: none;
  font-size: clamp(9px,.92vw,16px);
  letter-spacing: .22em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2.5em;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.cta-html-button span { color: var(--orange); font-size: 1.25em; letter-spacing: 0; }
.cta-html-button:hover { background: rgba(255,255,255,.48); border-color: var(--orange); transform: translateY(-1px); }

@media (max-width: 760px) {
  .audio-craft-copy p br,
  .service-item p br,
  .cta-copy p br { display: none; }
  .service-accent { min-height: 34px; }
  .cta-html-button { border-radius: 4px; gap: 1em; }
}


/* V0.14 — refined HTML text integration */
.gradient-tail {
  display: inline;
}
.services-panel .panel-mask {
  background: linear-gradient(180deg, rgba(242,239,232,.985), rgba(243,240,233,.992));
  border-radius: 2px;
}
.services-copy h2 {
  white-space: nowrap;
  font-size: clamp(28px,4.15vw,71px);
  margin: 0 0 6.2%;
}
.services-copy {
  width: 91%;
}
.service-list {
  background: transparent;
}

.services-panel {
  overflow: hidden;
}
.services-panel .panel-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.05), transparent 42%),
              radial-gradient(110% 90% at 100% 100%, rgba(0,0,0,.015), transparent 48%);
  pointer-events: none;
}


/* V0.16 — services section full beige integration and title cleanup */
.audio-craft-copy .craft-word { font-style: italic; }
.services-panel {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.services-panel .panel-mask {
  inset: 0;
  background: rgba(245,243,238,.996);
  border-radius: 0;
}
.services-panel .panel-mask::after {
  content: "";
  position: absolute;
  right: 34.1%;
  top: 31.4%;
  width: 3px;
  height: 54.6%;
  background: linear-gradient(180deg, rgba(255,109,34,.95) 0%, rgba(239,10,117,.95) 52%, rgba(11,130,216,.95) 100%);
  opacity: .92;
  filter: blur(.15px);
}
.services-copy {
  left: 8.9%;
  top: 7.1%;
  width: 38.8%;
}
.services-copy h2 {
  white-space: nowrap;
  font-size: clamp(28px,4.05vw,68px);
  margin: 0 0 6.1%;
  overflow: visible;
}
.service-list { width: 100%; }
.service-item { column-gap: 4.0%; }


/* V0.17 — fix clipping on the final "s" in Serviços */
.services-copy .gradient-tail {
  padding-right: .12em;
  margin-right: -.12em;
  overflow: visible;
}
.services-copy h2,
.services-copy h2 .gradient-text,
.services-copy h2 .gradient-tail {
  overflow: visible;
}


/* V0.20 — page 2 copy/button rebuilt as HTML and page 3 Portuguese copy */
.about-copy-panel {
  left: 11.7%;
  top: 26.5%;
  width: 18.5%;
  height: 46.5%;
}
.about-copy-panel .panel-mask {
  background: rgba(245,243,238,.985);
  border-radius: 2px;
}
.about-copy {
  left: 5.8%;
  top: 4.2%;
  width: 88%;
}
.about-copy h3 {
  margin: 0;
  font-size: clamp(11px,1.18vw,22px);
  line-height: 1.42;
  font-weight: 700;
  letter-spacing: -.01em;
}
.about-copy .short-rule {
  margin: 8.8% 0 7.5%;
  width: 1.55vw;
  max-width: 28px;
}
.about-copy p {
  margin: 0 0 12.5%;
  font-size: clamp(11px,1.14vw,21px);
  line-height: 1.55;
  font-weight: 400;
  color: rgba(16,16,16,.84);
}
.about-html-button {
  min-width: 78%;
  display: inline-flex;
  align-items: center;
  gap: .9em;
  padding: 7.4% 8.4%;
  border-radius: 9px;
  background: #111a35;
  color: #fff;
  text-decoration: none;
  font-size: clamp(8px,.86vw,15px);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(18,26,53,.08);
  transition: transform .24s ease, background .24s ease, box-shadow .24s ease;
}
.about-html-button:hover {
  transform: translateY(-1px);
  background: #172348;
  box-shadow: 0 10px 26px rgba(18,26,53,.12);
}
.about-html-button .play-mark {
  font-size: 1.18em;
  line-height: 1;
  transform: translateY(-.02em);
}
.audio-craft-copy p {
  font-size: clamp(11px,1.12vw,20px);
  line-height: 1.5;
}
@media (max-width: 760px) {
  .about-copy h3 { font-size: clamp(7px,1.6vw,11px); }
  .about-copy p { font-size: clamp(7px,1.6vw,11px); }
  .about-html-button { border-radius: 5px; font-size: clamp(5px,1.2vw,8px); gap: .55em; }
}


/* V0.21 — language toggle and gradient clipping fix */
.lang-switch {
  position: absolute;
  z-index: 16;
  right: 1.8%;
  top: 3.05%;
  display: inline-flex;
  align-items: center;
  gap: .32em;
  color: #17254a;
  font-family: "Bradley Hand", "Segoe Print", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: clamp(9px,.86vw,15px);
  font-style: italic;
  font-weight: 600;
  line-height: 1;
}
.lang-btn {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  font: inherit;
  opacity: .54;
  transition: opacity .22s ease, color .22s ease, transform .22s ease;
}
.lang-btn.active,
.lang-btn:hover {
  opacity: 1;
  color: #0f3579;
  transform: translateY(-.5px);
}
.gradient-cta {
  display: inline-block;
  padding-right: .10em;
  margin-right: -.10em;
  overflow: visible;
}
.cta-copy h2,
.cta-copy h2 .gradient-text,
.cta-copy h2 .gradient-cta {
  overflow: visible;
}
@media (max-width: 760px) {
  .lang-switch { right: 1.4%; top: 2.95%; font-size: clamp(6px,1.15vw,9px); }
}


/* V0.22 — sample title cleanup and services italic gradient */
.sample-title-patch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(245,243,238,1);
  z-index: 0;
}
.sample-heading-row { position: relative; z-index: 1; }


/* V0.23 — services word italic, EN/PT moved after menu, improved EN CTA */
.services-word { font-style: italic; }
.lang-switch {
  right: 0.9%;
  top: 3.18%;
  gap: .22em;
  font-size: clamp(8px,.76vw,13px);
}
.hero-nav-hand .contato-hit {
  left: 90.6%;
  width: 6.1%;
}
.hero-nav-hand .amostras-hit {
  left: 83.8%;
  width: 7.2%;
}
@media (max-width: 760px) {
  .lang-switch { right: .9%; top: 2.95%; font-size: clamp(5px,1.0vw,8px); }
  .hero-nav-hand .contato-hit { left: 89.8%; width: 6.7%; }
  .hero-nav-hand .amostras-hit { left: 82.5%; width: 7.8%; }
}


/* V0.24 — interactive LUFS meter on samples panel */
.lufs-meter-widget {
  position: absolute;
  z-index: 16;
  left: 74.6%;
  top: 83.4%;
  width: 18.5%;
  height: 11.1%;
  padding: .35% .5% .2% .55%;
  background: rgba(245,243,238,.99);
  border-radius: 4px;
  color: #212224;
  user-select: none;
}
.lufs-title {
  font: 700 clamp(7px,.66vw,12px)/1.1 "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .08em;
  margin-bottom: .55em;
}
.lufs-sub {
  display: flex;
  gap: 1.2em;
  font: 500 clamp(7px,.62vw,11px)/1 "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .08em;
  margin-bottom: .45em;
}
.lufs-scale-wrap { position: relative; padding-left: 1.1em; }
.lufs-track {
  position: relative;
  height: clamp(11px,1.05vw,20px);
  border: 1px solid rgba(59,60,62,.32);
  border-radius: 999px;
  overflow: visible;
  background: linear-gradient(90deg, #0a211b 0%, #243635 10%, #5d6161 48%, #bebcbc 78%, #f6f5f4 100%);
}
.lufs-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 82%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,0,0,.14), rgba(255,255,255,0));
  opacity: .35;
  pointer-events: none;
}
.lufs-pointer {
  position: absolute;
  top: -64%;
  left: 82%;
  width: 1px;
  height: 205%;
  background: rgba(68,72,79,.74);
  transform: translateX(-50%);
  transition: left .18s ease-out;
}
.lufs-pointer::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(68,72,79,.74);
  transform: translateX(-50%);
}
.lufs-value {
  position: absolute;
  top: -1.35em;
  left: 50%;
  transform: translateX(-50%);
  font: 700 clamp(7px,.64vw,12px)/1 "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  color: #32343b;
  white-space: nowrap;
}
.lufs-left-zero {
  position: absolute;
  left: -.2em;
  top: .72em;
  transform: translateX(-100%);
  font: 500 clamp(7px,.60vw,11px)/1 "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  color: rgba(33,34,36,.82);
}
.lufs-ticks {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
  margin-top: .55em;
  font: 500 clamp(7px,.60vw,11px)/1 "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  color: rgba(33,34,36,.82);
}
.lufs-ticks span { text-align: center; }
.lufs-track::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  pointer-events: none;
}
.lufs-meter-widget.is-hover .lufs-track {
  box-shadow: 0 0 0 1px rgba(17,53,121,.08), 0 6px 18px rgba(0,0,0,.04);
}
@media (max-width: 760px) {
  .lufs-meter-widget { left: 74.2%; top: 83.0%; width: 19.5%; height: 11.8%; padding: .5% .55% .25% .55%; }
}


/* V0.25 — LUFS meter applied to page 2 as well */
.lufs-about-widget {
  left: 34.0%;
  top: 56.2%;
  width: 11.8%;
  height: 9.0%;
  padding: .18% .25% .08% .28%;
  background: rgba(245,243,238,.995);
  border-radius: 2px;
}
.lufs-about-widget .lufs-title {
  font-size: clamp(6px,.46vw,9px);
  letter-spacing: .03em;
  margin-bottom: .35em;
}
.lufs-about-widget .lufs-sub {
  gap: 1.0em;
  font-size: clamp(5px,.46vw,9px);
  margin-bottom: .25em;
}
.lufs-about-widget .lufs-track {
  height: clamp(7px,.56vw,11px);
}
.lufs-about-widget .lufs-pointer {
  top: -60%;
}
.lufs-about-widget .lufs-pointer::before {
  width: 2px;
  height: 2px;
  top: -2px;
}
.lufs-about-widget .lufs-value {
  font-size: clamp(5px,.46vw,9px);
  top: -1.25em;
}
.lufs-about-widget .lufs-left-zero {
  top: .42em;
  font-size: clamp(5px,.44vw,9px);
}
.lufs-about-widget .lufs-ticks {
  grid-template-columns: repeat(8, 1fr);
  margin-top: .38em;
  font-size: clamp(5px,.44vw,9px);
}
@media (max-width: 760px) {
  .lufs-about-widget { left: 33.6%; top: 56.1%; width: 13.2%; height: 9.8%; }
}


/* V0.26 — restore the blue LUFS style on page 2 */
.lufs-about-widget {
  background: rgba(245,243,238,.998);
}
.lufs-about-widget .lufs-track {
  background: rgba(255,255,255,.98);
  border-color: rgba(84,93,111,.36);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.lufs-about-widget .lufs-fill {
  width: 82%;
  background: linear-gradient(90deg,
    #1f5ea6 0%,
    #2a6fbe 22%,
    #4b8ad2 50%,
    #8db7e6 78%,
    rgba(199,220,244,.70) 92%,
    rgba(255,255,255,0) 100%);
  opacity: 1;
}
.lufs-about-widget .lufs-track::after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.lufs-about-widget .lufs-pointer,
.lufs-about-widget .lufs-pointer::before {
  background: rgba(72,78,90,.72);
}
.lufs-about-widget .lufs-title,
.lufs-about-widget .lufs-sub,
.lufs-about-widget .lufs-value,
.lufs-about-widget .lufs-left-zero,
.lufs-about-widget .lufs-ticks {
  color: rgba(63,67,73,.88);
}
.lufs-about-widget.is-hover .lufs-track {
  box-shadow: 0 0 0 1px rgba(47,100,176,.10), 0 4px 12px rgba(48,94,155,.08);
}


/* V0.27 — clean page-2 LUFS area, restore title and remove duplicate static artifact */
.lufs-about-widget {
  z-index: 17;
  left: 33.55%;
  top: 53.95%;
  width: 13.35%;
  height: 12.35%;
  padding: .55% .55% .22% .55%;
  background: rgba(245,243,238,1);
  border-radius: 0;
}
.lufs-about-widget::before {
  content: "";
  position: absolute;
  inset: -5% -4% -4% -7%;
  background: rgba(245,243,238,1);
  z-index: 0;
}
.lufs-about-widget > * {
  position: relative;
  z-index: 1;
}
.lufs-about-widget .lufs-title {
  font: 600 clamp(5px,.44vw,8px)/1.1 "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .06em;
  color: rgba(72,76,84,.88);
  margin-bottom: .58em;
}
.lufs-about-widget .lufs-sub {
  gap: 1.08em;
  margin-bottom: .34em;
}
.lufs-about-widget .lufs-scale-wrap { padding-left: 1.15em; }
.lufs-about-widget .lufs-left-zero { top: .52em; }
.lufs-about-widget .lufs-track {
  background: rgba(255,255,255,.995);
}
.lufs-about-widget .lufs-fill {
  background: linear-gradient(90deg,
    #1a5a9e 0%,
    #2d72c0 24%,
    #5f97d8 56%,
    #a6c8ee 82%,
    rgba(219,234,248,.82) 93%,
    rgba(255,255,255,0) 100%);
}


/* V0.28 — refine page-2 LUFS positioning to avoid overlap and leftovers */
.lufs-about-widget {
  left: 34.35%;
  top: 60.15%;
  width: 11.95%;
  height: 8.2%;
  padding: .16% .22% .08% .22%;
  background: rgba(245,243,238,1);
}
.lufs-about-widget::before {
  inset: -7% -7% -8% -8%;
  background: rgba(245,243,238,1);
}
.lufs-about-widget .lufs-title {
  font-size: clamp(4px,.40vw,7px);
  margin-bottom: .28em;
}
.lufs-about-widget .lufs-sub {
  font-size: clamp(4px,.40vw,7px);
  margin-bottom: .18em;
  gap: 1.05em;
}
.lufs-about-widget .lufs-scale-wrap { padding-left: .95em; }
.lufs-about-widget .lufs-track {
  height: clamp(5px,.48vw,8px);
}
.lufs-about-widget .lufs-pointer {
  top: -58%;
  height: 198%;
}
.lufs-about-widget .lufs-pointer::before { top: -2px; width: 2px; height: 2px; }
.lufs-about-widget .lufs-value {
  font-size: clamp(4px,.39vw,7px);
  top: -1.15em;
}
.lufs-about-widget .lufs-left-zero {
  top: .34em;
  font-size: clamp(4px,.39vw,7px);
}
.lufs-about-widget .lufs-ticks {
  font-size: clamp(4px,.39vw,7px);
  margin-top: .22em;
}


/* V0.29 — integrate about-text and blue LUFS overlays seamlessly with section background */
.about-copy-panel {
  overflow: visible;
}
.about-copy-panel .panel-mask {
  inset: -3.8% -4.8% -4.5% -4.8%;
  background: rgba(247,246,242,1);
  border-radius: 0;
}
.about-copy-panel .panel-mask::after {
  content: "";
  position: absolute;
  inset: -4% -4% -4% -4%;
  background: rgba(247,246,242,1);
  pointer-events: none;
}
.about-copy {
  left: 4.4%;
  top: 2.8%;
  width: 90.5%;
}
.lufs-about-widget {
  background: rgba(247,246,242,1);
  border-radius: 0;
}
.lufs-about-widget::before {
  inset: -10% -10% -10% -10%;
  background: rgba(247,246,242,1);
}

/* V0.30 — real audio player controls */
#sampleAudio { display: none; }
.play-button {
  z-index: 20;
  overflow: visible;
}
.play-button .player-icon {
  position: absolute;
  left: 1.2%;
  top: 10%;
  width: 34%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #10231f;
  color: #fff;
  font: 500 clamp(9px,1.1vw,19px)/1 Arial, sans-serif;
  letter-spacing: 0;
  box-shadow: 0 2px 7px rgba(0,0,0,.08);
  pointer-events: none;
  transition: transform .2s ease, background .2s ease;
}
.play-button:hover .player-icon { transform: scale(1.04); background: #142d27; }
.play-button.is-playing .player-icon {
  font-size: clamp(8px,.92vw,16px);
  letter-spacing: -.12em;
  padding-right: .08em;
}
.player-time {
  position: absolute;
  z-index: 19;
  left: 75.0%;
  top: 69.15%;
  width: 8.0%;
  height: 3.9%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: .15%;
  background: rgba(245,243,238,1);
  color: #232323;
  font: 500 clamp(7px,.72vw,13px)/1 "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .08em;
  white-space: nowrap;
  line-height: 1;
}
#amostras.audio-playing .wave-sample-player {
  filter: saturate(1.04) contrast(1.03);
}
@media (max-width: 760px) {
  .play-button .player-icon { font-size: clamp(5px,1.4vw,9px); }
  .play-button.is-playing .player-icon { font-size: clamp(5px,1.2vw,8px); }
  .player-time { font-size: clamp(4px,1.1vw,7px); }
}


/* V0.31 — contact slide text rebuilt in HTML for bilingual support */
.contact-left-panel,
.contact-right-panel,
.contact-footer-panel {
  overflow: visible;
}
.contact-left-panel .panel-mask,
.contact-right-panel .panel-mask,
.contact-footer-panel .panel-mask {
  background: rgba(247,246,242,1);
  border-radius: 0;
}
.contact-left-panel {
  left: 5.6%;
  top: 42.0%;
  width: 30.0%;
  height: 18.6%;
}
.contact-left-panel .panel-mask { inset: -4% -4% -6% -4%; }
.contact-left-copy {
  left: 3.8%;
  top: 4.0%;
  width: 90%;
}
.contact-left-copy p {
  margin: 0;
  color: rgba(67,71,76,.92);
  font: 400 clamp(18px,2.5vw,44px)/1.28 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .005em;
}
.contact-right-panel {
  left: 73.0%;
  top: 24.5%;
  width: 20.6%;
  height: 31.0%;
}
.contact-right-panel .panel-mask { inset: -4% -8% -6% -8%; }
.contact-right-copy {
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
}
.contact-kicker {
  color: var(--orange);
  font: 500 clamp(18px,2.0vw,34px)/1.1 "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .08em;
  margin-bottom: 18.5%;
}
.contact-email-text,
.contact-right-copy p {
  display: block;
  margin: 0 0 15.5%;
  color: #111;
  text-decoration: none;
  font: 400 clamp(17px,1.95vw,34px)/1.18 "Helvetica Neue", Arial, sans-serif;
}
.contact-right-copy p:last-child { margin-bottom: 0; }
.contact-footer-panel {
  left: 5.5%;
  top: 72.6%;
  width: 88.5%;
  height: 12.6%;
}
.contact-footer-panel .panel-mask { inset: -2% -1% -2% -1%; }
.contact-footer-copy {
  left: 0;
  top: 16%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2%;
}
.footer-note {
  color: rgba(67,71,76,.92);
  font: 400 clamp(11px,1.18vw,22px)/1.18 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
}
.footer-tagline {
  color: var(--orange);
  font: 500 clamp(12px,1.3vw,24px)/1.15 "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .18em;
  white-space: nowrap;
}
.contact-footer-copy .dot {
  color: var(--orange);
  margin: 0 .7em;
}
@media (max-width: 760px) {
  .contact-left-copy p { font-size: clamp(10px,2.35vw,17px); }
  .contact-kicker { font-size: clamp(10px,1.65vw,15px); margin-bottom: 10%; }
  .contact-email-text, .contact-right-copy p { font-size: clamp(10px,1.55vw,15px); margin-bottom: 10%; }
  .footer-note { font-size: clamp(7px,1vw,10px); }
  .footer-tagline { font-size: clamp(7px,1.05vw,10px); letter-spacing: .12em; }
}


/* V0.32 — contact slide refinement */
.contact-left-panel .panel-mask,
.contact-right-panel .panel-mask,
.contact-footer-panel .panel-mask {
  background: rgba(248,247,243,.985);
}
.contact-left-panel {
  left: 5.8%;
  top: 42.7%;
  width: 25.8%;
  height: 15.2%;
}
.contact-left-panel .panel-mask { inset: -1.6% -1.8% -2.2% -1.8%; }
.contact-left-copy {
  left: 1.4%;
  top: 1.8%;
  width: 98%;
}
.contact-left-copy p {
  font-size: clamp(17px,2.18vw,38px);
  line-height: 1.26;
  letter-spacing: 0;
}
.contact-right-panel {
  left: 75.1%;
  top: 24.8%;
  width: 16.2%;
  height: 23.8%;
}
.contact-right-panel .panel-mask { inset: -1.5% -2.5% -2.0% -2.5%; }
.contact-kicker {
  font-size: clamp(16px,1.75vw,30px);
  margin-bottom: 15.2%;
}
.contact-email-text,
.contact-right-copy p {
  font-size: clamp(15px,1.72vw,29px);
  line-height: 1.16;
  margin: 0 0 13.2%;
}
.contact-footer-panel {
  left: 5.8%;
  top: 74.0%;
  width: 87.5%;
  height: 8.8%;
}
.contact-footer-panel .panel-mask { inset: -1% -1% -1% -1%; }
.contact-footer-copy {
  top: 8%;
}
.footer-note {
  font-size: clamp(10px,1.08vw,18px);
}
.footer-tagline {
  font-size: clamp(11px,1.18vw,20px);
  letter-spacing: .17em;
}
.footer-gradient {
  display: inline-block;
  background: linear-gradient(90deg, #ff6d22 0%, #ef0a75 54%, #0b82d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 760px) {
  .contact-left-copy p { font-size: clamp(9px,2.0vw,14px); }
  .contact-kicker { font-size: clamp(9px,1.45vw,13px); }
  .contact-email-text, .contact-right-copy p { font-size: clamp(9px,1.34vw,13px); }
  .footer-note { font-size: clamp(6px,.92vw,9px); }
  .footer-tagline { font-size: clamp(6px,.96vw,9px); }
}


/* V0.33 — fix contact slide overlap by expanding masks and matching page background */
.contact-left-panel,
.contact-right-panel,
.contact-footer-panel {
  z-index: 16;
}
.contact-left-panel .panel-mask,
.contact-right-panel .panel-mask,
.contact-footer-panel .panel-mask {
  background: #f8f7f3;
  border-radius: 0;
  box-shadow: none;
}
.contact-left-panel {
  left: 3.2%;
  top: 41.9%;
  width: 34.6%;
  height: 19.6%;
}
.contact-left-panel .panel-mask {
  inset: -3.5% -4.5% -4.5% -4.5%;
}
.contact-left-copy {
  left: 3.2%;
  top: 6.2%;
  width: 82%;
}
.contact-left-copy p {
  font-size: clamp(17px,2.06vw,35px);
  line-height: 1.28;
  color: rgba(69,73,78,.92);
}
.contact-right-panel {
  left: 72.0%;
  top: 19.8%;
  width: 23.8%;
  height: 39.2%;
}
.contact-right-panel .panel-mask {
  inset: -4% -6% -5% -6%;
}
.contact-right-copy {
  left: 0;
  top: 2%;
  width: 100%;
}
.contact-kicker {
  font-size: clamp(16px,1.68vw,29px);
  margin-bottom: 16%;
}
.contact-email-text,
.contact-right-copy p {
  font-size: clamp(15px,1.60vw,27px);
  line-height: 1.2;
  margin: 0 0 14%;
}
.contact-footer-panel {
  left: 2.8%;
  top: 79.6%;
  width: 94.2%;
  height: 12.8%;
}
.contact-footer-panel .panel-mask {
  inset: -3% -1.5% -4% -1.5%;
}
.contact-footer-copy {
  top: 18%;
  left: 1%;
  width: 98%;
}
.footer-note {
  font-size: clamp(10px,1.03vw,17px);
  line-height: 1.2;
}
.footer-tagline {
  font-size: clamp(11px,1.12vw,19px);
  letter-spacing: .16em;
}
@media (max-width: 760px) {
  .contact-left-panel { left: 3.2%; top: 42.2%; width: 35.2%; height: 20.2%; }
  .contact-right-panel { left: 71.2%; top: 20.2%; width: 24.8%; height: 39.4%; }
  .contact-footer-panel { left: 2.4%; top: 79.4%; width: 95%; height: 13.4%; }
}


/* V0.34 — remove visible contact boxes and fix duplicate footer rows */
.contact-left-panel,
.contact-right-panel,
.contact-footer-panel {
  overflow: visible;
}
.contact-left-panel .panel-mask,
.contact-right-panel .panel-mask,
.contact-footer-panel .panel-mask {
  background: #f7f6f2;
  border-radius: 0;
  box-shadow: none;
}
/* Cover original image text zones with page-matching masks, without box feeling */
.contact-left-panel {
  left: 0.8%;
  top: 39.8%;
  width: 38.8%;
  height: 22.8%;
}
.contact-left-panel .panel-mask {
  inset: 0;
}
.contact-left-copy {
  left: 8.6%;
  top: 23.6%;
  width: 74%;
}
.contact-left-copy p {
  font-size: clamp(16px,2.02vw,34px);
  line-height: 1.28;
}
.contact-right-panel {
  left: 70.4%;
  top: 16.2%;
  width: 26.8%;
  height: 43.0%;
}
.contact-right-panel .panel-mask {
  inset: 0;
}
.contact-right-copy {
  left: 4%;
  top: 10.5%;
  width: 92%;
}
.contact-kicker {
  font-size: clamp(16px,1.66vw,28px);
  margin-bottom: 15%;
}
.contact-email-text,
.contact-right-copy p {
  font-size: clamp(15px,1.54vw,26px);
  line-height: 1.18;
  margin: 0 0 13.5%;
}
/* Reposition footer overlay to sit exactly over original footer row */
.contact-footer-panel {
  left: 3.1%;
  top: 70.9%;
  width: 93.8%;
  height: 11.7%;
}
.contact-footer-panel .panel-mask {
  inset: 0;
}
.contact-footer-copy {
  left: 1.2%;
  top: 34%;
  width: 97.2%;
}
.footer-note {
  font-size: clamp(10px,1.00vw,16px);
}
.footer-tagline {
  font-size: clamp(11px,1.10vw,18px);
  letter-spacing: .15em;
}
@media (max-width: 760px) {
  .contact-left-panel { left: 0; top: 40%; width: 40%; height: 23.5%; }
  .contact-left-copy { left: 8.5%; top: 23%; width: 76%; }
  .contact-right-panel { left: 69.6%; top: 16.4%; width: 27.8%; height: 43.8%; }
  .contact-footer-panel { left: 2.8%; top: 70.8%; width: 94.6%; height: 12.4%; }
}


/* V0.35 — make contact slide masks white to blend with slide background */
.contact-left-panel .panel-mask,
.contact-right-panel .panel-mask,
.contact-footer-panel .panel-mask {
  background: #f9f9f7;
}
.contact-left-panel {
  left: 1.6%;
  top: 40.3%;
  width: 37.1%;
  height: 21.3%;
}
.contact-left-copy {
  left: 7.8%;
  top: 24.0%;
  width: 75%;
}
.contact-right-panel {
  left: 71.2%;
  top: 17.3%;
  width: 25.4%;
  height: 41.8%;
}
.contact-right-copy {
  left: 3%;
  top: 9.8%;
  width: 94%;
}
.contact-footer-panel {
  left: 2.0%;
  top: 71.8%;
  width: 95.1%;
  height: 10.9%;
}
.contact-footer-copy {
  left: 1.1%;
  top: 33%;
  width: 97.4%;
}


/* V0.36 — force last-slide masks to pure white */
.contact-left-panel .panel-mask,
.contact-right-panel .panel-mask,
.contact-footer-panel .panel-mask {
  background: #ffffff;
}


/* V0.37 — animated waveform inside contact-slide logo */
.wave-contact-logo {
  z-index: 9;
  left: 16.9%;
  top: 20.9%;
  width: 12.8%;
  height: 14.6%;
  opacity: .78;
  mix-blend-mode: screen;
}
.wave-contact-logo:hover {
  opacity: .96;
}
.wave-contact-logo::after {
  inset: -5px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(239,10,117,.08);
}
@media (max-width: 760px) {
  .wave-contact-logo { left: 16.6%; top: 20.6%; width: 13.5%; height: 15.0%; }
}


/* V0.38 — constrain contact-logo waveform to the orange waveform / letter I only */
.wave-contact-logo {
  left: 18.55%;
  top: 18.7%;
  width: 4.55%;
  height: 18.4%;
  opacity: .82;
  mix-blend-mode: screen;
}
.wave-contact-logo::after {
  inset: -3px;
  border-radius: 2px;
}
@media (max-width: 760px) {
  .wave-contact-logo {
    left: 18.2%;
    top: 18.4%;
    width: 4.9%;
    height: 18.9%;
  }
}


/* V0.39 — orange-only waveform constrained to the I area of the logo */
.wave-contact-logo {
  left: 18.88%;
  top: 18.45%;
  width: 3.55%;
  height: 18.9%;
  opacity: .94;
  mix-blend-mode: normal;
  filter: saturate(1.05);
}
.wave-contact-logo:hover {
  opacity: 1;
}
.wave-contact-logo::after {
  inset: -2px;
  border-radius: 1px;
  box-shadow: none;
}
@media (max-width: 760px) {
  .wave-contact-logo {
    left: 18.55%;
    top: 18.15%;
    width: 3.9%;
    height: 19.2%;
  }
}


/* V0.40 — move logo waveform down to sit over the built-in orange waveform */
.wave-contact-logo {
  left: 18.78%;
  top: 21.85%;
  width: 4.05%;
  height: 15.2%;
  opacity: .95;
}
@media (max-width: 760px) {
  .wave-contact-logo {
    left: 18.45%;
    top: 21.55%;
    width: 4.35%;
    height: 15.6%;
  }
}


/* V0.41 — move the orange waveform test from the logo to the acoustic-fidelity phrase */
.wave-contact-logo {
  left: 4.3%;
  top: 46.0%;
  width: 24.5%;
  height: 9.4%;
  opacity: .42;
  mix-blend-mode: multiply;
  z-index: 17;
}
.wave-contact-logo:hover {
  opacity: .74;
  filter: saturate(1.10);
}
.wave-contact-logo::after {
  inset: -3px;
  border-radius: 2px;
  box-shadow: none;
}
@media (max-width: 760px) {
  .wave-contact-logo {
    left: 4.0%;
    top: 45.7%;
    width: 25.2%;
    height: 9.8%;
  }
}

/* V0.42 — first dedicated mobile composition */
@media (max-width: 760px) {
  html, body { background: #fff; }
  body { overflow-x: hidden; }
  .screen {
    min-height: 100svh;
    height: 100svh;
    background: #fff;
    overflow: hidden;
  }
  .screen > img:not(.hero-logo-overlay) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
  }
  .section-dots { display: none; }

  /* HERO — preserve the technical world, with a clean mobile header */
  .hero > img:first-child { object-position: 51% center; opacity: .98; }
  .hero-menu-mask {
    left: 0; top: 0; width: 100%; height: 12.5%;
    background: rgba(255,255,255,.96);
  }
  .hero-logo-mask { left: 2.2%; top: 1.2%; width: 23%; height: 9.8%; background: #fff; }
  .screen img.hero-logo-overlay { left: 2.8%; top: 1.7%; width: 20.5%; max-width: 20.5%; }
  .hero-nav-hand {
    left: 26%; right: 3%; top: 0; bottom: auto; height: 12%;
    display: flex; align-items: center; justify-content: flex-end; gap: 1.8%;
    pointer-events: none;
  }
  .hero-nav-hand .nav-hit,
  .hero-nav-hand .home-hit,
  .hero-nav-hand .sobre-hit,
  .hero-nav-hand .servicos-hit,
  .hero-nav-hand .amostras-hit,
  .hero-nav-hand .contato-hit {
    position: relative !important;
    left: auto !important; top: auto !important; width: auto !important; height: auto !important;
    padding: 9px 2px;
    font-size: clamp(6px, 1.8vw, 9px);
    transform: none !important;
  }
  .lang-switch {
    right: 2.1%; top: 9.2%;
    font-size: clamp(6px,1.7vw,9px);
    background: rgba(255,255,255,.92);
    padding: 2px 4px;
    border-radius: 3px;
  }
  .wave-home-main { left: 46%; top: 30%; width: 48%; height: 20%; }
  .stereo-home { left: 74%; top: 76%; width: 20%; height: 13%; }

  /* ABOUT — prioritize copy and CTA, keep studio visual as atmosphere */
  #sobre > img { object-position: 61% center; opacity: .42; }
  .about-copy-panel {
    left: 7%; top: 18%; width: 86%; height: 58%;
  }
  .about-copy-panel .panel-mask {
    inset: -6%;
    background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 75%, rgba(255,255,255,.72) 100%);
  }
  .about-copy { left: 0; top: 0; width: 88%; }
  .about-copy h3 { font-size: clamp(19px,5.1vw,27px); line-height: 1.32; }
  .about-copy .short-rule { width: 42px; margin: 7% 0 7%; }
  .about-copy p { font-size: clamp(17px,4.5vw,23px); line-height: 1.46; margin-bottom: 9%; }
  .about-copy p br { display: none; }
  .about-html-button {
    min-width: 0; padding: 16px 19px; border-radius: 8px;
    font-size: clamp(11px,3vw,14px);
  }
  .wave-about-edge { right: -9%; top: 33%; width: 30%; height: 30%; opacity: .7; }
  .stereo-about { left: 68%; top: 76%; width: 24%; height: 14%; }
  .lufs-about-widget { left: 56%; top: 64%; width: 35%; height: 10%; }

  /* SAMPLES — mobile hierarchy: title, player, then technical decoration */
  #amostras > img { object-position: 64% center; opacity: .30; }
  .audio-craft-panel { left: 7%; top: 10%; width: 86%; height: 27%; }
  .audio-craft-panel .panel-mask {
    inset: -7%;
    background: rgba(255,255,255,.96);
  }
  .audio-craft-copy { left: 0; top: 0; width: 100%; }
  .audio-craft-copy h2 { font-size: clamp(42px,12vw,64px); }
  .audio-craft-copy .short-rule { margin: 5% 0; width: 38px; }
  .audio-craft-copy p { font-size: clamp(14px,3.9vw,19px); line-height: 1.45; }
  .audio-craft-copy p br { display: none; }
  .sample-title-patch {
    left: 7%; top: 42%; width: 86%; height: 17%;
    padding: 4% 4% 0;
    background: rgba(255,255,255,.98);
    border-radius: 9px;
  }
  .sample-kicker { font-size: 8px; margin-bottom: 8px; }
  .sample-title { font-size: clamp(13px,3.6vw,18px); line-height: 1.25; }
  .sample-nav { margin-top: 0; }
  .sample-arrow { width: 28px; height: 28px; font-size: 14px; }
  .sample-counter { font-size: 8px; min-width: 42px; }
  .wave-sample-player { left: 11%; top: 60%; width: 66%; height: 11%; }
  .play-button { left: 7%; top: 74%; width: 20%; height: 9%; }
  .player-time { left: 62%; top: 77%; width: 27%; font-size: clamp(8px,2.2vw,11px); }
  .stereo-samples { left: 73%; top: 62%; width: 20%; height: 12%; }
  #amostras > .lufs-meter-widget { left: 56%; top: 84%; width: 37%; height: 10%; }

  /* SERVICES — rebuild as a true vertical reading experience */
  #servicos > img { opacity: .08; object-position: center; }
  .services-panel { left: 0; top: 0; width: 100%; height: 100%; }
  .services-panel .panel-mask { background: #fff; }
  .services-panel .panel-mask::after { display: none; }
  .services-copy { left: 7%; top: 8%; width: 86%; }
  .services-copy .accent-rule { width: 36px; margin-bottom: 5%; }
  .services-copy .eyebrow { font-size: 9px; margin-bottom: 4%; }
  .services-copy h2 { font-size: clamp(39px,10.8vw,56px); margin-bottom: 8%; }
  .service-item {
    grid-template-columns: 9% 2px 1fr;
    column-gap: 4%;
    padding-bottom: 5.5%; margin-bottom: 5.5%;
  }
  .service-no { font-size: 15px; }
  .service-accent { min-height: 56px; height: 14vw; max-height: 74px; }
  .service-item h3 { font-size: clamp(17px,4.6vw,23px); margin-bottom: 2%; }
  .service-item p { font-size: clamp(12px,3.25vw,16px); line-height: 1.4; }
  .service-item p br { display: none; }

  /* CTA — centered, spacious and touch-friendly */
  #projeto > img { object-position: 50% center; opacity: .32; }
  .cta-copy-panel { left: 6%; top: 17%; width: 88%; height: 58%; }
  .cta-copy-panel .panel-mask {
    inset: -8%;
    background: radial-gradient(circle at center, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 62%, rgba(255,255,255,.58) 100%);
  }
  .cta-copy h2 { font-size: clamp(48px,13vw,70px); line-height: .94; }
  .cta-copy p { font-size: clamp(13px,3.55vw,18px); line-height: 1.45; margin: 8% 0 8%; }
  .cta-copy p br { display: none; }
  .cta-html-button { min-width: 70%; padding: 15px 18px; font-size: 10px; border-radius: 7px; }
  .wave-cta-left { left: -8%; top: 73%; width: 45%; height: 11%; }
  .wave-cta-right { right: -8%; top: 73%; width: 45%; height: 11%; }

  /* CONTACT — true mobile stack; preserve the approved waveform-over-copy gesture */
  #contato > img { object-position: 18% center; opacity: .34; }
  .contact-left-panel { left: 6%; top: 19%; width: 88%; height: 28%; }
  .contact-left-panel .panel-mask { background: rgba(255,255,255,.94); }
  .contact-left-copy { left: 0; top: 14%; width: 88%; }
  .contact-left-copy p { font-size: clamp(27px,7.4vw,39px); line-height: 1.18; }
  .wave-contact-logo { left: 5%; top: 31.5%; width: 70%; height: 9%; opacity: .38; }
  .contact-right-panel { left: 6%; top: 51%; width: 88%; height: 28%; }
  .contact-right-panel .panel-mask { background: rgba(255,255,255,.96); }
  .contact-right-copy { left: 0; top: 0; width: 100%; text-align: left; }
  .contact-kicker { font-size: 18px; margin-bottom: 7%; }
  .contact-email-text, .contact-right-copy p { font-size: clamp(17px,4.7vw,23px); margin-bottom: 6%; }
  .contact-footer-panel { left: 5%; top: 84%; width: 90%; height: 11%; }
  .contact-footer-panel .panel-mask { background: #fff; }
  .contact-footer-copy { left: 0; top: 0; width: 100%; display: block; }
  .footer-note { font-size: 10px; white-space: normal; margin-bottom: 9px; }
  .footer-tagline { font-size: 9px; letter-spacing: .10em; white-space: normal; }

  /* Touch targets and hover-only decoration */
  .wave-reactor { cursor: default; }
  .wave-reactor::after { display: none; }
}

@media (max-width: 430px) {
  .hero-nav-hand { gap: 1.2%; }
  .hero-nav-hand .nav-hit { font-size: 6px; padding-inline: 1px; }
  .services-copy h2 { font-size: 39px; }
  .sample-title-patch { top: 43%; }
  .contact-left-copy p { font-size: 28px; }
}

/* V0.43 — portrait-mobile refinement based on the iPhone navigation test */
@media (max-width: 760px) and (orientation: portrait) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: 0;
  }

  body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
  }

  .screen {
    /* 100dvh follows Safari's visible viewport as its bars open and close. */
    min-height: 100dvh;
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    scroll-margin-top: 0;
  }

  /* Text-heavy sections may grow on shorter phones instead of clipping. */
  #servicos,
  #contato {
    min-height: max(100dvh, 720px);
    height: max(100dvh, 720px);
  }

  /* Mobile header: clearer labels and 44px touch targets. */
  .hero-menu-mask { height: 14%; }
  .hero-nav-hand {
    left: 24%;
    right: 2.5%;
    height: 13.2%;
    gap: 1.1%;
  }
  .hero-nav-hand .nav-hit,
  .hero-nav-hand .home-hit,
  .hero-nav-hand .sobre-hit,
  .hero-nav-hand .servicos-hit,
  .hero-nav-hand .amostras-hit,
  .hero-nav-hand .contato-hit {
    min-height: 44px;
    padding: 0 2px;
    display: inline-flex;
    align-items: center;
    font-size: clamp(7px, 1.95vw, 9px);
  }
  .lang-switch {
    top: 10.2%;
    min-height: 30px;
    font-size: clamp(8px, 2vw, 10px);
    padding: 4px 6px;
  }
  .lang-btn { min-width: 22px; min-height: 22px; }

  /* About: readable without changing the approved composition. */
  .about-copy-panel { top: 16%; }
  .about-copy h3 { font-size: clamp(20px, 5.25vw, 28px); }
  .about-copy p { font-size: clamp(16px, 4.25vw, 22px); }
  .about-html-button {
    min-height: 48px;
    padding: 14px 18px;
    font-size: clamp(11px, 3vw, 14px);
  }

  /* Player: larger type and controls that are comfortable to tap. */
  .sample-title-patch {
    top: 41%;
    height: 19%;
    padding: 4% 3.5% 0;
  }
  .sample-kicker { font-size: 9px; }
  .sample-title { font-size: clamp(14px, 3.75vw, 19px); }
  .sample-arrow {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }
  .sample-counter {
    min-width: 44px;
    font-size: 9px;
  }
  .wave-sample-player { top: 62%; height: 10%; }
  .play-button {
    left: 7%;
    top: 74%;
    width: 64px;
    height: 64px;
    min-width: 48px;
    min-height: 48px;
  }
  .play-button .player-icon {
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    font-size: 15px;
  }
  .play-button.is-playing .player-icon { font-size: 13px; }
  .player-time {
    top: 76.5%;
    min-height: 28px;
    font-size: clamp(9px, 2.4vw, 12px);
  }
  #amostras > .lufs-meter-widget { top: 84.5%; }

  /* Services: more legible while retaining all three offerings. */
  .services-copy { top: 6.5%; }
  .services-copy h2 {
    font-size: clamp(40px, 10.8vw, 56px);
    margin-bottom: 7%;
  }
  .service-item {
    padding-bottom: 4.5%;
    margin-bottom: 4.5%;
  }
  .service-item h3 { font-size: clamp(18px, 4.75vw, 23px); }
  .service-item p {
    font-size: clamp(13px, 3.45vw, 16px);
    line-height: 1.43;
  }

  /* Primary CTAs keep a consistent, accessible touch height. */
  .cta-html-button {
    min-height: 48px;
    padding: 14px 18px;
  }

  /* Contact: keep all information above the iPhone home indicator. */
  .contact-left-panel { top: 16%; }
  .contact-right-panel { top: 49.5%; }
  .contact-email-text,
  .contact-right-copy p {
    font-size: clamp(17px, 4.55vw, 22px);
    line-height: 1.28;
  }
  .contact-email-text {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .contact-footer-panel {
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    height: auto;
    min-height: 70px;
  }

  .prototype-toast {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .hero-nav-hand .nav-hit,
  .hero-nav-hand .home-hit,
  .hero-nav-hand .sobre-hit,
  .hero-nav-hand .servicos-hit,
  .hero-nav-hand .amostras-hit,
  .hero-nav-hand .contato-hit {
    font-size: 7.8px;
    padding-inline: 1px;
  }
  .services-copy { top: 5.5%; }
  .service-item p { font-size: 13px; }
}

/* Contact logo is added only for the portrait-mobile composition. */
.screen img.contact-logo-overlay { display: none; }

/* V0.44 — preserve the complete artwork in portrait without touching desktop or landscape */
@media (max-width: 760px) and (orientation: portrait) {
  /* The approved Services composition remains intentionally untouched. */

  /* HERO: zoom out enough to recover the technical drawings and move the live wave off the I. */
  .hero > img:first-child {
    inset: 0 auto 0 50%;
    width: 132%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center 55%;
    transform: translateX(-50%);
    opacity: 1;
  }
  .wave-home-main {
    left: 66%;
    top: 34%;
    width: 26%;
    height: 15%;
  }
  .stereo-home {
    left: 77%;
    top: 65%;
    width: 17%;
    height: 12%;
  }

  /* ABOUT: full artwork above, readable copy below, with no full-page white cover. */
  #sobre > img {
    inset: 0 auto 0 50%;
    width: 132%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center 24%;
    transform: translateX(-50%);
    opacity: .92;
  }
  .about-copy-panel {
    left: 6%;
    top: 51%;
    width: 88%;
    height: 42%;
  }
  .about-copy-panel .panel-mask {
    inset: -3%;
    background: rgba(255,255,255,.94);
  }
  .about-copy {
    left: 0;
    top: 0;
    width: 76%;
  }
  .about-copy h3 {
    font-size: clamp(16px,4.2vw,21px);
    line-height: 1.3;
  }
  .about-copy .short-rule { margin: 5% 0; }
  .about-copy p {
    font-size: clamp(14px,3.65vw,18px);
    line-height: 1.42;
    margin-bottom: 6%;
  }
  .about-html-button {
    min-height: 44px;
    padding: 12px 15px;
    font-size: clamp(10px,2.65vw,13px);
  }
  .wave-about-edge {
    right: 3%;
    top: 27%;
    width: 24%;
    height: 17%;
  }
  .stereo-about {
    left: 72%;
    top: 38%;
    width: 18%;
    height: 11%;
  }
  .lufs-about-widget {
    left: 61%;
    top: 78%;
    width: 31%;
    height: 9%;
  }

  /* SAMPLES: show the full graphic system and use one functional play button only. */
  #amostras > img {
    inset: 0 auto 0 50%;
    width: 132%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center 58%;
    transform: translateX(-50%);
    opacity: .48;
  }
  .audio-craft-panel {
    left: 6%;
    top: 7%;
    width: 88%;
    height: 26%;
  }
  .audio-craft-panel .panel-mask {
    inset: -3%;
    background: rgba(255,255,255,.94);
  }
  .audio-craft-copy h2 { font-size: clamp(38px,10.5vw,56px); }
  .audio-craft-copy p { font-size: clamp(14px,3.6vw,18px); }
  .sample-title-patch {
    left: 6%;
    top: 36%;
    width: 88%;
    height: 16%;
    padding: 3.5% 3.5% 0;
    border-radius: 5px;
    background: rgba(255,255,255,.95);
  }
  .sample-title-patch::before { background: rgba(255,255,255,.95); }
  .sample-title { font-size: clamp(12px,3.25vw,16px); }
  .sample-arrow {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .wave-sample-player {
    left: 14%;
    top: 57%;
    width: 70%;
    height: 10%;
  }
  .stereo-samples {
    left: 73%;
    top: 57%;
    width: 18%;
    height: 11%;
  }
  .play-button {
    left: 49%;
    top: 65%;
    width: 68px;
    height: 68px;
    min-width: 68px;
    min-height: 68px;
    border-radius: 50%;
    background: #10231f;
    box-shadow: 0 2px 9px rgba(0,0,0,.10);
  }
  .play-button .player-icon {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 17px;
    background: #10231f;
  }
  .play-button.is-playing .player-icon { font-size: 14px; }
  .player-time {
    left: 69%;
    top: 67.2%;
    width: 24%;
    min-height: 28px;
    font-size: clamp(8px,2.2vw,11px);
  }
  #amostras > .lufs-meter-widget {
    left: 55%;
    top: 82%;
    width: 38%;
    height: 10%;
  }

  /* CTA: remove the ghost duplicate and bring the two animated side waves back. */
  #projeto > img {
    inset: 0 auto 0 50%;
    width: 126%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
    transform: translateX(-50%);
    opacity: .09;
  }
  .cta-copy-panel {
    left: 10%;
    top: 19%;
    width: 80%;
    height: 56%;
  }
  .cta-copy-panel .panel-mask {
    inset: -5%;
    background: rgba(255,255,255,.92);
  }
  .cta-copy h2 { font-size: clamp(43px,11.7vw,62px); }
  .cta-copy p { font-size: clamp(13px,3.45vw,17px); }
  .wave-cta-left {
    left: -4%;
    top: 43%;
    width: 27%;
    height: 11%;
  }
  .wave-cta-right {
    right: -4%;
    top: 43%;
    width: 27%;
    height: 11%;
  }

  /* CONTACT: clean mobile stack with explicit logo and complete footer. */
  #contato > img:first-child {
    inset: 0 auto 0 50%;
    width: 126%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
    transform: translateX(-50%);
    opacity: .12;
  }
  #contato > img.contact-logo-overlay {
    display: block;
    position: absolute;
    z-index: 18;
    left: 7%;
    right: auto;
    top: 7%;
    bottom: auto;
    width: 40%;
    max-width: 40%;
    height: 10%;
    object-fit: contain;
    transform: none;
    opacity: 1;
  }
  .contact-left-panel {
    left: 6%;
    top: 23%;
    width: 88%;
    height: 23%;
  }
  .contact-left-panel .panel-mask {
    inset: -3%;
    background: rgba(255,255,255,.94);
  }
  .contact-left-copy {
    left: 0;
    top: 8%;
    width: 90%;
  }
  .contact-left-copy p {
    font-size: clamp(25px,6.6vw,35px);
    line-height: 1.18;
  }
  .wave-contact-logo {
    left: 5%;
    top: 35%;
    width: 71%;
    height: 8%;
    opacity: .42;
  }
  .contact-right-panel {
    left: 6%;
    top: 51%;
    width: 88%;
    height: 25%;
  }
  .contact-right-panel .panel-mask {
    inset: -3%;
    background: rgba(255,255,255,.95);
  }
  .contact-kicker { font-size: 17px; margin-bottom: 5%; }
  .contact-email-text,
  .contact-right-copy p {
    font-size: clamp(16px,4.25vw,21px);
    line-height: 1.24;
    margin-bottom: 4.5%;
  }
  .contact-footer-panel {
    left: 6%;
    top: auto;
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    width: 88%;
    height: auto;
    min-height: 76px;
  }
  .contact-footer-panel .panel-mask {
    inset: -8% -3%;
    background: rgba(255,255,255,.97);
  }
  .contact-footer-copy {
    left: 0;
    top: 0;
    width: 100%;
    display: block;
  }
  .footer-note {
    display: block;
    font-size: clamp(9px,2.45vw,11px);
    line-height: 1.35;
    white-space: normal;
    margin-bottom: 9px;
  }
  .footer-tagline {
    display: block;
    font-size: clamp(9px,2.4vw,11px);
    line-height: 1.3;
    letter-spacing: .09em;
    white-space: normal;
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .about-copy-panel { top: 49%; }
  .sample-title-patch { top: 35%; }
  .contact-left-copy p { font-size: 25px; }
}

/* V0.45 — portrait flow: full-width artwork, no duplicated baked-in controls */
@media (max-width: 760px) and (orientation: portrait) {
  /* Keep the portrait document in a continuous flow instead of forcing every
     horizontal artwork to occupy an entire phone viewport. */
  #home,
  #sobre,
  #amostras {
    min-height: 0;
    scroll-snap-align: none;
  }

  /* HERO: the complete 16:9 artwork defines the section height. This removes
     both the lateral crop and the large empty tail below the image. */
  #home {
    height: 56.25vw;
    max-height: 428px;
    background: #fff;
  }
  .hero > img:first-child {
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
  }
  .hero-logo-mask {
    left: 1.1%;
    top: .85%;
    width: 13.7%;
    height: 9.5%;
  }
  .screen img.hero-logo-overlay {
    left: 1.35%;
    top: 1.05%;
    width: 12.6%;
    max-width: 12.6%;
  }
  .hero-menu-mask {
    left: 63.2%;
    top: 2.3%;
    width: 35.8%;
    height: 10.5%;
  }
  .hero-nav-hand {
    left: 0;
    right: 0;
    height: 100%;
    gap: 0;
  }
  .hero-nav-hand .nav-hit,
  .hero-nav-hand .home-hit,
  .hero-nav-hand .sobre-hit,
  .hero-nav-hand .servicos-hit,
  .hero-nav-hand .amostras-hit,
  .hero-nav-hand .contato-hit {
    top: 0;
    height: 18%;
    min-height: 34px;
    padding: 0;
    align-items: center;
    font-size: clamp(5px, 1.3vw, 9px);
  }
  .hero-nav-hand .home-hit { left: 65.1%; width: 5.1%; }
  .hero-nav-hand .sobre-hit { left: 71.5%; width: 5.9%; }
  .hero-nav-hand .servicos-hit { left: 78%; width: 7%; }
  .hero-nav-hand .amostras-hit { left: 85.1%; width: 7.8%; }
  .hero-nav-hand .contato-hit { left: 92.3%; width: 7%; }
  .lang-switch {
    right: 1.5%;
    top: 10.5%;
    min-height: 28px;
    font-size: clamp(6px, 1.25vw, 9px);
  }
  .wave-home-main {
    left: 67.8%;
    top: 29.7%;
    width: 27%;
    height: 24%;
  }
  .stereo-home {
    left: 88.2%;
    top: 78.2%;
    width: 9.8%;
    height: 13.6%;
  }

  /* ABOUT: the source artwork is shown once at its natural 16:9 ratio. Only
     its baked-in left copy/button are covered; graphs and studio photo remain. */
  #sobre {
    height: calc(56.25vw + 470px);
    background: #f8f7f3;
  }
  #sobre > img {
    inset: 0;
    width: 100%;
    height: 56.25vw;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
    opacity: 1;
  }
  #sobre::before {
    content: "";
    position: absolute;
    z-index: 9;
    left: 0;
    top: 13.5vw;
    width: 28.5vw;
    height: 37.5vw;
    background: #f8f7f3;
    pointer-events: none;
  }
  .about-copy-panel {
    left: 6%;
    top: calc(56.25vw + 26px);
    width: 88%;
    height: 414px;
  }
  .about-copy-panel .panel-mask {
    inset: -2%;
    background: #f8f7f3;
  }
  .about-copy {
    left: 0;
    top: 0;
    width: 78%;
  }
  .about-copy h3 {
    font-size: clamp(17px, 4.45vw, 22px);
    line-height: 1.3;
  }
  .about-copy p {
    font-size: clamp(15px, 3.85vw, 19px);
    line-height: 1.42;
  }
  .wave-about-edge {
    right: 3%;
    top: 15vw;
    width: 24%;
    height: 12vw;
  }
  .stereo-about {
    left: 72%;
    top: 39vw;
    width: 18%;
    height: 9vw;
  }
  .lufs-about-widget {
    left: 61%;
    top: calc(56.25vw + 305px);
    width: 31%;
    height: 72px;
  }

  /* SAMPLES: readable introduction, complete artwork and functional player are
     separate layers. The two white patches suppress the play/text baked into
     the desktop image, leaving a single live play control. */
  #amostras {
    height: calc(56.25vw + 665px);
    background: #fff;
  }
  #amostras > img {
    inset: 250px 0 auto;
    width: 100%;
    height: 56.25vw;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
    opacity: 1;
  }
  #amostras::before,
  #amostras::after {
    content: "";
    position: absolute;
    z-index: 9;
    background: #fff;
    pointer-events: none;
  }
  #amostras::before {
    left: 0;
    top: calc(250px + 7vw);
    width: 38vw;
    height: 42vw;
  }
  #amostras::after {
    left: 48%;
    top: calc(250px + 29vw);
    width: 25%;
    height: 14vw;
  }
  .audio-craft-panel {
    left: 6%;
    top: 28px;
    width: 88%;
    height: 200px;
  }
  .audio-craft-panel .panel-mask {
    inset: -2%;
    background: #fff;
  }
  .audio-craft-copy h2 {
    font-size: clamp(39px, 10.5vw, 56px);
  }
  .audio-craft-copy p {
    font-size: clamp(14px, 3.55vw, 18px);
    line-height: 1.42;
  }
  .sample-title-patch {
    left: 6%;
    top: calc(56.25vw + 278px);
    width: 88%;
    height: 138px;
    padding: 22px 4% 0;
    background: #f8f7f3;
  }
  .sample-title-patch::before { background: #f8f7f3; }
  .sample-heading-row { align-items: flex-start; }
  .sample-title-wrap { max-width: 56%; }
  .sample-title { font-size: clamp(13px, 3.35vw, 17px); }
  .sample-arrow {
    width: 42px;
    height: 42px;
    font-size: 17px;
  }
  .sample-counter {
    min-width: 48px;
    font-size: 9px;
  }
  .wave-sample-player {
    left: 14%;
    top: calc(56.25vw + 438px);
    width: 70%;
    height: 70px;
  }
  .stereo-samples {
    left: 73%;
    top: calc(56.25vw + 430px);
    width: 18%;
    height: 78px;
  }
  .play-button {
    left: 8%;
    top: calc(56.25vw + 510px);
    width: 68px;
    height: 68px;
  }
  .player-time {
    left: 62%;
    top: calc(56.25vw + 526px);
    width: 31%;
    min-height: 36px;
    justify-content: center;
    font-size: clamp(9px, 2.35vw, 12px);
  }
  #amostras > .lufs-meter-widget {
    left: 55%;
    top: calc(56.25vw + 588px);
    width: 38%;
    height: 70px;
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .about-copy-panel { top: calc(56.25vw + 24px); }
  .sample-title-patch { top: calc(56.25vw + 276px); }
}