:root {

  --artist-bg: #0b0e16;

  --artist-bg-soft: #131825;

  --artist-ink: #f7f2e9;

  --artist-muted: #aaa6a0;

  --gold: #d8a45f;

  --gold-light: #efc989;

  --rose: #b74876;

  --teacher-bg: #f2ece2;

  --teacher-bg-soft: #e7dccd;

  --teacher-ink: #442433;

  --teacher-muted: #7d6971;

  --wine: #8f3d58;

  --cream: #fffaf1;

  --white: #ffffff;

  --black: #090b10;

  --line-dark: rgba(255, 255, 255, 0.14);

  --line-light: rgba(68, 36, 51, 0.15);

  --shell: min(1320px, calc(100% - 64px));

  --header-h: 92px;

  --radius-xl: 36px;

  --radius-lg: 26px;

  --radius-md: 18px;

  --shadow: 0 30px 80px rgba(4, 7, 14, 0.18);

  --ease: cubic-bezier(.2, .8, .2, 1);

  --focus-accent: var(--gold);

}



* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

  scroll-padding-top: 90px;

}



body {

  margin: 0;

  min-width: 320px;

  color: var(--artist-ink);

  background: var(--artist-bg);

  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-size: 16px;

  line-height: 1.6;

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;

}



body[data-focus="artist"] {

  --focus-accent: var(--gold);

}



body[data-focus="teacher"] {

  --focus-accent: var(--wine);

}



body[data-focus="duality"] {

  --focus-accent: #b06f6f;

}



::selection {

  color: #fff;

  background: var(--focus-accent);

}



img,

svg {

  display: block;

  max-width: 100%;

}



img {

  object-fit: cover;

}



button,

a {

  font: inherit;

}



a {

  color: inherit;

  text-decoration: none;

}



button {

  color: inherit;

}



h1,

h2,

h3,

p,

blockquote {

  margin-top: 0;

}



h2,

h3 {

  text-wrap: balance;

}



h2 {

  margin-bottom: 24px;

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(3rem, 6vw, 6.6rem);

  font-weight: 500;

  letter-spacing: -0.055em;

  line-height: .93;

}



h2 em {

  font-weight: 500;

}



h3 {

  font-size: clamp(1.4rem, 2vw, 2rem);

  line-height: 1.15;

}



.sr-only {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  padding: 0 !important;

  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;

  border: 0 !important;

}



.skip-link {

  position: fixed;

  z-index: 10000;

  top: 12px;

  left: 12px;

  padding: 10px 14px;

  color: var(--black);

  background: var(--white);

  border-radius: 8px;

  transform: translateY(-150%);

  transition: transform .2s ease;

}



.skip-link:focus {

  transform: none;

}



.site-noise {

  position: fixed;

  z-index: 1000;

  inset: 0;

  pointer-events: none;

  opacity: .06;

  background-image: url("assets/img/grain.png");

  mix-blend-mode: soft-light;

}



.scroll-progress {

  position: fixed;

  z-index: 1100;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: rgba(255, 255, 255, .06);

}



.scroll-progress span {

  display: block;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, var(--gold), var(--rose), var(--wine));

  transform: scaleX(0);

  transform-origin: left center;

}



.section {

  position: relative;

  isolation: isolate;

}



.section-shell {

  width: var(--shell);

  margin-inline: auto;

}



.eyebrow {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 20px;

  color: var(--gold-light);

  font-size: .76rem;

  font-weight: 700;

  letter-spacing: .18em;

  line-height: 1.3;

  text-transform: uppercase;

}



.eyebrow::before {

  width: 36px;

  height: 1px;

  content: "";

  background: currentColor;

  opacity: .75;

}



.eyebrow--mixed {

  color: var(--wine);

}



.lead {

  max-width: 650px;

  font-size: clamp(1.05rem, 1.6vw, 1.28rem);

  line-height: 1.75;

}



.button {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  min-height: 52px;

  padding: 0 24px;

  border: 1px solid transparent;

  border-radius: 999px;

  font-size: .86rem;

  font-weight: 700;

  letter-spacing: .035em;

  line-height: 1;

  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);

}



.button:hover,

.button:focus-visible {

  transform: translateY(-2px);

}



.button:focus-visible,

a:focus-visible,

button:focus-visible {

  outline: 3px solid color-mix(in srgb, var(--focus-accent) 70%, white);

  outline-offset: 4px;

}



.button--light {

  color: var(--artist-bg);

  background: var(--cream);

  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);

}



.button--light:hover {

  background: var(--gold-light);

}



.button--dark {

  color: var(--cream);

  background: var(--teacher-ink);

  box-shadow: 0 12px 32px rgba(68, 36, 51, .16);

}



.button--dark:hover {

  background: var(--wine);

}



.button--gold {

  color: #17120c;

  background: var(--gold-light);

  box-shadow: 0 16px 38px rgba(216, 164, 95, .18);

}



.button--gold:hover {

  color: var(--cream);

  background: var(--wine);

}



.button--wine {

  color: var(--cream);

  background: var(--wine);

  box-shadow: 0 16px 38px rgba(143, 61, 88, .18);

}



.button--wine:hover {

  background: var(--teacher-ink);

}



.text-link {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  border-bottom: 1px solid currentColor;

  font-weight: 700;

  transition: color .2s ease, gap .2s ease;

}



.text-link:hover {

  gap: 15px;

  color: var(--focus-accent);

}



/* Header */

.site-header {

  position: fixed;

  z-index: 1000;

  top: 0;

  left: 0;

  right: 0;

  display: grid;

  grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);

  align-items: center;

  gap: 24px;

  min-height: var(--header-h);

  padding: 16px 32px;

  color: var(--white);

  border-bottom: 1px solid rgba(255, 255, 255, .12);

  transition: min-height .3s var(--ease), padding .3s var(--ease), background .3s ease, color .3s ease, backdrop-filter .3s ease;

}



.site-header.is-scrolled {

  min-height: 72px;

  padding-top: 10px;

  padding-bottom: 10px;

  color: var(--artist-ink);

  background: rgba(10, 13, 21, .82);

  border-color: rgba(255, 255, 255, .1);

  backdrop-filter: blur(20px) saturate(120%);

}



.brand {

  display: inline-flex;

  align-items: center;

  gap: 13px;

  width: fit-content;

}



.brand__mark {

  display: grid;

  width: 48px;

  height: 48px;

  place-items: center;

  color: var(--artist-bg);

  background: linear-gradient(135deg, var(--gold-light), var(--gold));

  border-radius: 50%;

  font-family: "Playfair Display", Georgia, serif;

  font-size: 1.05rem;

  font-style: italic;

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);

}



.brand__logo-art {

  display: block;

  width: 36px;

  height: 32px;

  overflow: visible;

}



.brand__text {

  display: grid;

  line-height: 1.15;

}



.brand__text strong {

  font-family: "Playfair Display", Georgia, serif;

  font-size: 1.05rem;

  font-weight: 600;

  letter-spacing: -.01em;

}



.brand__text small {

  margin-top: 4px;

  color: rgba(255, 255, 255, .65);

  font-size: .66rem;

  font-weight: 600;

  letter-spacing: .08em;

  text-transform: uppercase;

}



.desktop-nav {

  display: flex;

  justify-content: center;

  gap: clamp(18px, 2.2vw, 36px);

}



.desktop-nav a {

  position: relative;

  color: rgba(255, 255, 255, .78);

  font-size: .8rem;

  font-weight: 600;

  letter-spacing: .05em;

}



.desktop-nav a::after {

  position: absolute;

  bottom: -8px;

  left: 0;

  width: 100%;

  height: 1px;

  content: "";

  background: var(--gold-light);

  transform: scaleX(0);

  transform-origin: right;

  transition: transform .25s var(--ease);

}



.desktop-nav a:hover::after,

.desktop-nav a:focus-visible::after {

  transform: scaleX(1);

  transform-origin: left;

}



.role-switch {

  justify-self: end;

  display: flex;

  padding: 4px;

  background: rgba(255, 255, 255, .08);

  border: 1px solid rgba(255, 255, 255, .16);

  border-radius: 999px;

  backdrop-filter: blur(12px);

}



.role-switch button {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  min-height: 36px;

  padding: 0 12px;

  color: rgba(255, 255, 255, .64);

  background: transparent;

  border: 0;

  border-radius: 999px;

  cursor: pointer;

  font-size: .68rem;

  font-weight: 700;

  letter-spacing: .04em;

  transition: color .25s ease, background .25s ease, box-shadow .25s ease;

}



.role-switch button[aria-pressed="true"] {

  color: var(--black);

  background: var(--cream);

  box-shadow: 0 5px 18px rgba(0, 0, 0, .15);

}



body[data-focus="teacher"] .role-switch button[aria-pressed="true"] {

  color: var(--cream);

  background: var(--wine);

}



body[data-focus="artist"] .role-switch button[aria-pressed="true"] {

  color: var(--artist-bg);

  background: var(--gold-light);

}



.menu-button {

  display: none;

  justify-self: end;

  width: 44px;

  height: 44px;

  padding: 12px;

  background: rgba(255, 255, 255, .08);

  border: 1px solid rgba(255, 255, 255, .18);

  border-radius: 50%;

  cursor: pointer;

}



.menu-button span:not(.sr-only) {

  display: block;

  width: 100%;

  height: 1px;

  margin: 4px 0;

  background: currentColor;

  transition: transform .25s var(--ease);

}



.menu-button[aria-expanded="true"] span:first-child {

  transform: translateY(2.5px) rotate(45deg);

}



.menu-button[aria-expanded="true"] span:nth-child(2) {

  transform: translateY(-2.5px) rotate(-45deg);

}



.mobile-menu {

  position: fixed;

  z-index: 950;

  inset: 0;

  display: grid;

  align-content: center;

  padding: 120px 32px 40px;

  color: var(--artist-ink);

  background: rgba(9, 12, 20, .97);

  backdrop-filter: blur(24px);

}



.mobile-menu[hidden] {

  display: none;

}



.mobile-menu nav {

  display: grid;

  gap: 10px;

}



.mobile-menu nav a {

  padding: 14px 0;

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(2rem, 9vw, 4rem);

  line-height: 1;

  border-bottom: 1px solid rgba(255, 255, 255, .12);

}



.mobile-menu .social-link {

  margin-top: 42px;

  color: var(--gold-light);

  font-size: .86rem;

  font-weight: 700;

  letter-spacing: .06em;

  text-transform: uppercase;

}



/* Hero */

.hero {

  position: relative;

  display: grid;

  grid-template-columns: 1fr 1fr;

  min-height: max(760px, 100svh);

  overflow: hidden;

  background: linear-gradient(90deg, var(--artist-bg) 0 50%, var(--teacher-bg) 50% 100%);

}



.hero-world {

  position: relative;

  display: flex;

  min-width: 0;

  align-items: center;

  overflow: hidden;

  transition: filter .65s var(--ease), transform .65s var(--ease), opacity .65s var(--ease);

}



.hero-world__inner {

  position: relative;

  z-index: 3;

  width: min(590px, calc(100% - 64px));

}



.hero-world--artist {

  justify-content: flex-start;

  color: var(--artist-ink);

  background:

    radial-gradient(circle at 18% 80%, rgba(191, 116, 64, .2), transparent 32%),

    radial-gradient(circle at 75% 20%, rgba(137, 44, 92, .14), transparent 34%),

    linear-gradient(145deg, #070a10, #111726 72%);

}



.hero-world--artist .hero-world__inner {

  margin-left: max(32px, calc((100vw - 1320px) / 2));

  padding-right: 90px;

}



.hero-world--teacher {

  justify-content: flex-end;

  color: var(--teacher-ink);

  background:

    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, .72), transparent 27%),

    linear-gradient(145deg, #f8f4ed, #e9ddce 88%);

}



.hero-world--teacher .hero-world__inner {

  margin-right: max(32px, calc((100vw - 1320px) / 2));

  padding-left: 120px;

}



.hero-world--teacher .eyebrow {

  color: var(--wine);

}



.hero-kicker {

  margin-bottom: 8px;

  color: var(--gold-light);

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(1.15rem, 2vw, 1.65rem);

  font-style: italic;

}



.hero-world--teacher .hero-kicker {

  color: var(--wine);

}



.hero-world h2 {

  max-width: 520px;

  margin-bottom: 26px;

  font-size: clamp(3.6rem, 6.5vw, 7.5rem);

  line-height: .82;

}



.hero-world--artist h2 {

  color: var(--cream);

  text-shadow: 0 10px 42px rgba(0, 0, 0, .35);

}



.hero-world--teacher h2 {

  color: var(--teacher-ink);

}



.hero-copy {

  max-width: 460px;

  margin-bottom: 34px;

  color: rgba(255, 255, 255, .7);

  font-size: clamp(.98rem, 1.2vw, 1.12rem);

}



.hero-world--teacher .hero-copy {

  margin-left: auto;

  color: var(--teacher-muted);

}



.hero-world__index {

  position: absolute;

  z-index: 0;

  right: 7%;

  bottom: -17%;

  color: rgba(255, 255, 255, .025);

  font-family: "Playfair Display", Georgia, serif;

  font-size: 38rem;

  font-style: italic;

  line-height: 1;

  pointer-events: none;

}



.hero-world--teacher .hero-world__index {

  right: auto;

  left: 8%;

  color: rgba(68, 36, 51, .035);

}



.stage-light {

  position: absolute;

  z-index: 0;

  top: -38%;

  width: 180px;

  height: 120%;

  opacity: .38;

  background: linear-gradient(180deg, rgba(255, 226, 176, .78), transparent 80%);

  filter: blur(20px);

  transform: rotate(20deg);

  transform-origin: top;

}



.stage-light--one {

  left: 16%;

}



.stage-light--two {

  left: 52%;

  opacity: .18;

  transform: rotate(-15deg);

}



.score-lines {

  position: absolute;

  inset: 16% -10% auto 8%;

  height: 320px;

  opacity: .12;

  background: repeating-linear-gradient(to bottom, transparent 0 24px, var(--teacher-ink) 25px 26px);

  mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);

  transform: rotate(-9deg);

}



.score-lines::before,

.score-lines::after {

  position: absolute;

  width: 16px;

  height: 16px;

  content: "";

  background: var(--teacher-ink);

  border-radius: 50%;

  box-shadow: 0 26px 0 var(--teacher-ink), 0 52px 0 var(--teacher-ink), 0 78px 0 var(--teacher-ink);

}



.score-lines::before {

  top: 10px;

  left: 32%;

}



.score-lines::after {

  top: 35px;

  left: 68%;

}



.hero-portrait {

  position: absolute;

  z-index: 8;

  top: 50%;

  left: 50%;

  width: clamp(230px, 22vw, 360px);

  aspect-ratio: .78;

  color: var(--gold-light);

  transform: translate(-50%, -50%);

  transition: transform .7s var(--ease);

}



.hero-portrait__halo {

  position: absolute;

  inset: -40px;

  background:

    radial-gradient(circle at 45% 35%, rgba(239, 201, 137, .32), transparent 37%),

    radial-gradient(circle at 72% 64%, rgba(183, 72, 118, .22), transparent 44%);

  filter: blur(16px);

  border-radius: 50%;

  animation: haloPulse 7s ease-in-out infinite;

}



.hero-portrait__frame {

  position: absolute;

  inset: 0;

  overflow: hidden;

  background: #151822;

  border: 1px solid rgba(255, 255, 255, .42);

  border-radius: 48% 48% 44% 44% / 38% 38% 58% 58%;

  box-shadow: 0 34px 90px rgba(0, 0, 0, .34), inset 0 0 0 8px rgba(255, 255, 255, .06);

}



.hero-portrait__frame::after {

  position: absolute;

  inset: 0;

  content: "";

  background:

    linear-gradient(180deg, transparent 55%, rgba(4, 6, 12, .62)),

    radial-gradient(circle at 50% 20%, transparent 20%, rgba(0, 0, 0, .2) 100%);

  pointer-events: none;

}



.hero-portrait__image,

.hero-portrait__live {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transition: opacity .7s var(--ease), filter .7s var(--ease), transform 1s var(--ease);

}



.hero-portrait__image--artist {

  opacity: .82;

  filter: brightness(1.12) contrast(1.04);

}



.hero-portrait__image--teacher {

  opacity: .32;

  filter: brightness(1.08) contrast(1.02);

  mix-blend-mode: screen;

}



.hero-portrait__live {

  z-index: 1;

  display: none;

  opacity: 0;

}



.hero-portrait__live.is-ready {

  display: block;

  opacity: .96;

}



.hero-portrait__monogram {

  position: absolute;

  z-index: 3;

  right: 24px;

  bottom: 22px;

  color: rgba(255, 255, 255, .92);

  font-family: "Playfair Display", Georgia, serif;

  font-size: 1.4rem;

  font-style: italic;

}



.accordion-outline {

  position: absolute;

  z-index: -1;

  top: 58%;

  left: 50%;

  width: 152%;

  opacity: .32;

  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .24));

  transform: translate(-50%, -50%) rotate(-7deg);

}



.hero-bridge {

  position: absolute;

  z-index: 12;

  left: 50%;

  bottom: 36px;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 10px 16px;

  color: var(--teacher-ink);

  background: rgba(255, 250, 241, .92);

  border: 1px solid rgba(255, 255, 255, .5);

  border-radius: 999px;

  box-shadow: 0 10px 40px rgba(0, 0, 0, .12);

  backdrop-filter: blur(12px);

  transform: translateX(-50%);

  white-space: nowrap;

}



.hero-bridge span,

.hero-bridge strong {

  font-size: .68rem;

  letter-spacing: .07em;

  text-transform: uppercase;

}



.hero-bridge i {

  width: 5px;

  height: 5px;

  background: linear-gradient(135deg, var(--gold), var(--wine));

  border-radius: 50%;

}



.scroll-cue {

  position: absolute;

  z-index: 10;

  left: 30px;

  bottom: 32px;

  display: flex;

  align-items: center;

  gap: 10px;

  color: rgba(255, 255, 255, .55);

  font-size: .65rem;

  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;

  transform: rotate(-90deg) translateX(100%);

  transform-origin: left bottom;

}



.scroll-cue i {

  display: block;

  width: 40px;

  height: 1px;

  overflow: hidden;

  background: rgba(255, 255, 255, .25);

}



.scroll-cue i::after {

  display: block;

  width: 100%;

  height: 100%;

  content: "";

  background: var(--gold-light);

  animation: scrollLine 2.3s ease-in-out infinite;

}



body[data-focus="artist"] .hero-world--teacher {

  filter: saturate(.65) brightness(.78);

  opacity: .78;

}



body[data-focus="artist"] .hero-world--artist {

  transform: scale(1.01);

}



body[data-focus="artist"] .hero-portrait {

  transform: translate(-56%, -50%) scale(1.03);

}



body[data-focus="artist"] .hero-portrait__image--artist {

  opacity: .96;

}



body[data-focus="artist"] .hero-portrait__image--teacher {

  opacity: 0;

}



body[data-focus="teacher"] .hero-world--artist {

  filter: saturate(.55) brightness(.65);

  opacity: .72;

}



body[data-focus="teacher"] .hero-world--teacher {

  transform: scale(1.01);

}



body[data-focus="teacher"] .hero-portrait {

  transform: translate(-44%, -50%) scale(1.03);

}



body[data-focus="teacher"] .hero-portrait__image--artist {

  opacity: .08;

}



body[data-focus="teacher"] .hero-portrait__image--teacher {

  opacity: .96;

  mix-blend-mode: normal;

}



/* Duality */

.duality {

  padding: 150px 0 160px;

  color: var(--teacher-ink);

  background:

    radial-gradient(circle at 50% 26%, rgba(216, 164, 95, .14), transparent 28%),

    var(--cream);

}



.duality::before {

  position: absolute;

  inset: 0;

  z-index: -1;

  content: "";

  opacity: .24;

  background-image: linear-gradient(var(--line-light) 1px, transparent 1px), linear-gradient(90deg, var(--line-light) 1px, transparent 1px);

  background-size: 60px 60px;

  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);

}



.section-heading {

  max-width: 1040px;

  margin-bottom: 90px;

}



.section-heading h2 {

  max-width: 980px;

}



.section-heading h2 em {

  color: var(--wine);

}



.section-heading > p:last-child {

  max-width: 700px;

  margin-bottom: 0;

  color: var(--teacher-muted);

  font-size: 1.08rem;

}



.duality-grid {

  display: grid;

  grid-template-columns: 1fr 180px 1fr;

  align-items: center;

  gap: 28px;

}



.identity-card {

  position: relative;

  min-height: 440px;

  padding: clamp(32px, 4vw, 58px);

  overflow: hidden;

  border-radius: var(--radius-xl);

  transition: transform .5s var(--ease), box-shadow .5s var(--ease), opacity .5s ease;

}



.identity-card:hover {

  transform: translateY(-10px);

}



.identity-card--artist {

  color: var(--artist-ink);

  background:

    radial-gradient(circle at 90% 8%, rgba(216, 164, 95, .2), transparent 27%),

    linear-gradient(145deg, #0b0e16, #171d2d);

  box-shadow: 0 30px 80px rgba(5, 8, 16, .15);

}



.identity-card--teacher {

  color: var(--teacher-ink);

  background:

    radial-gradient(circle at 90% 8%, rgba(255, 255, 255, .8), transparent 28%),

    linear-gradient(145deg, #eadfce, #f7f1e8);

  border: 1px solid rgba(68, 36, 51, .08);

  box-shadow: 0 30px 80px rgba(68, 36, 51, .08);

}



.identity-card__number {

  position: absolute;

  top: 22px;

  right: 28px;

  color: rgba(255, 255, 255, .2);

  font-family: "Playfair Display", Georgia, serif;

  font-size: 5rem;

  line-height: 1;

}



.identity-card--teacher .identity-card__number {

  color: rgba(68, 36, 51, .1);

}



.identity-card__icon {

  display: grid;

  width: 72px;

  height: 72px;

  margin-bottom: 82px;

  place-items: center;

  color: var(--artist-bg);

  background: var(--gold-light);

  border-radius: 50%;

}



.identity-card--teacher .identity-card__icon {

  color: var(--cream);

  background: var(--wine);

}



.identity-card__icon svg {

  width: 34px;

  fill: none;

  stroke: currentColor;

  stroke-width: 2.6;

  stroke-linecap: round;

  stroke-linejoin: round;

}



.identity-card h3 {

  margin-bottom: 18px;

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(2.3rem, 4vw, 4.2rem);

  font-weight: 500;

  letter-spacing: -.04em;

}



.identity-card p {

  max-width: 480px;

  margin-bottom: 34px;

  color: rgba(255, 255, 255, .66);

}



.identity-card--teacher p {

  color: var(--teacher-muted);

}



.identity-card a {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  color: var(--gold-light);

  font-size: .86rem;

  font-weight: 700;

  border-bottom: 1px solid currentColor;

}



.identity-card--teacher a {

  color: var(--wine);

}



.duality-center {

  position: relative;

  display: grid;

  height: 180px;

  place-items: center;

  color: var(--teacher-ink);

  border: 1px solid rgba(68, 36, 51, .12);

  border-radius: 50%;

}



.duality-center::before,

.duality-center::after {

  position: absolute;

  width: 1px;

  height: 160px;

  content: "";

  background: linear-gradient(transparent, rgba(68, 36, 51, .22), transparent);

}



.duality-center::before {

  bottom: 100%;

}



.duality-center::after {

  top: 100%;

}



.duality-center__logo {

  position: relative;

  z-index: 1;

  width: 98px;

  height: 88px;

  color: var(--wine);

}



.duality-center i {

  position: absolute;

  width: 126px;

  height: 126px;

  border: 1px dashed rgba(143, 61, 88, .3);

  border-radius: 50%;

  animation: rotate 18s linear infinite;

}



.duality-center small {

  position: absolute;

  bottom: 30px;

  color: var(--teacher-muted);

  font-size: .58rem;

  font-weight: 700;

  letter-spacing: .18em;

  text-transform: uppercase;

}



body[data-focus="artist"] .identity-card--teacher,

body[data-focus="teacher"] .identity-card--artist {

  opacity: .62;

  transform: scale(.97);

}



body[data-focus="artist"] .identity-card--artist,

body[data-focus="teacher"] .identity-card--teacher {

  box-shadow: 0 38px 110px color-mix(in srgb, var(--focus-accent) 24%, transparent);

  transform: translateY(-10px) scale(1.02);

}



/* Artist */

.artist-section {

  padding: 170px 0 0;

  color: var(--artist-ink);

  background:

    radial-gradient(circle at 14% 8%, rgba(183, 72, 118, .12), transparent 24%),

    radial-gradient(circle at 84% 56%, rgba(216, 164, 95, .12), transparent 32%),

    linear-gradient(160deg, #090c13, #101625 68%, #080b12);

}



.artist-section::before {

  position: absolute;

  z-index: -1;

  inset: 0;

  content: "";

  opacity: .16;

  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);

  background-size: 86px 86px;

  mask-image: linear-gradient(90deg, black, transparent 75%);

}



.artist-layout {

  display: grid;

  grid-template-columns: minmax(0, 800px); /* Két oszlop helyett egyetlen középre zárt oszlop */

  justify-content: center;               /* Vízszintes középre igazítás */

  text-align: center;                    /* Szövegek középre igazítása */

  gap: clamp(40px, 6vw, 80px);

  padding-bottom: 150px;

}

}



.artist-copy h2 {

  max-width: 670px;

}



.artist-copy h2 em {

  color: var(--gold-light);

}



.artist-copy .lead {

  color: rgba(255, 255, 255, .66);

}



.service-list {

  display: grid;

  margin: 48px 0;

  border-top: 1px solid var(--line-dark);

}



.service-list > div {

  display: grid;

  grid-template-columns: 54px minmax(150px, .8fr) 1fr;

  align-items: center;

  gap: 16px;

  padding: 17px 0;

  border-bottom: 1px solid var(--line-dark);

  transition: padding-left .25s var(--ease), color .25s ease;

}



.service-list > div:hover {

  padding-left: 8px;

  color: var(--gold-light);

}



.service-list span {

  color: var(--gold);

  font-family: "Playfair Display", Georgia, serif;

  font-size: .84rem;

}



.service-list strong {

  font-size: .92rem;

}



.service-list small {

  color: var(--artist-muted);

  font-size: .78rem;

}



.artist-visual {

  position: relative;

  min-height: 670px;

}



.artist-visual__main {

  position: absolute;

  inset: 30px 0 95px 56px;

  overflow: hidden;

  background: #17202d;

  border: 1px solid rgba(255, 255, 255, .16);

  border-radius: 240px 240px 32px 32px;

  box-shadow: 0 40px 100px rgba(0, 0, 0, .38);

}



.artist-visual__main::after {

  position: absolute;

  inset: 0;

  content: "";

  background: linear-gradient(180deg, rgba(4, 6, 12, .04), rgba(4, 6, 12, .82));

}



.artist-visual__main img {

  width: 100%;

  height: 100%;

  filter: contrast(1.04) saturate(.95);

  transform: scale(1.02);

}



.artist-visual__caption {

  position: absolute;

  z-index: 2;

  right: 40px;

  bottom: 40px;

  left: 40px;

  display: grid;

  gap: 6px;

}



.artist-visual__caption span {

  color: var(--gold-light);

  font-family: "Playfair Display", Georgia, serif;

  font-size: 1.7rem;

  font-style: italic;

}



.artist-visual__caption strong {

  color: rgba(255, 255, 255, .72);

  font-size: .7rem;

  letter-spacing: .14em;

  text-transform: uppercase;

}



.artist-visual__badge {

  position: absolute;

  z-index: 3;

  top: 0;

  left: 0;

  display: grid;

  width: 126px;

  height: 126px;

  place-items: center;

  color: var(--artist-bg);

  background: var(--gold-light);

  border-radius: 50%;

  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);

}



.artist-visual__badge span {

  position: absolute;

  z-index: 2;

  font-size: .7rem;

  font-weight: 800;

  letter-spacing: .18em;

}



.artist-visual__badge svg {

  width: 82%;

  fill: none;

  stroke: rgba(11, 14, 22, .22);

  stroke-width: 1;

  animation: rotate 18s linear infinite reverse;

}



.artist-visual :is(blockquote, .artist-visual__statement) {

  position: absolute;

  z-index: 5;

  right: -24px;

  bottom: 0;

  max-width: 310px;

  padding: 24px 28px;

  color: var(--teacher-ink);

  background: var(--cream);

  border-radius: 22px 22px 22px 4px;

  box-shadow: var(--shadow);

  font-family: "Playfair Display", Georgia, serif;

  font-size: 1.22rem;

  font-style: italic;

  line-height: 1.4;

}



.repertoire-strip {

  overflow: hidden;

  color: var(--artist-bg);

  background: var(--gold-light);

  border-block: 1px solid rgba(255, 255, 255, .3);

}



.repertoire-strip__track {

  display: flex;

  align-items: stretch;

  width: max-content;

  transform: translate3d(0, 0, 0);

  animation: repertoireMarquee 28s linear infinite;

  will-change: transform;

  backface-visibility: hidden;

}



.repertoire-strip__group {

  display: flex;

  flex: 0 0 auto;

  align-items: center;

  justify-content: space-around;

  gap: 28px;

  min-width: max(100vw, 940px);

  padding: 20px clamp(24px, 3vw, 56px);

}



.repertoire-strip span {

  font-family: "Playfair Display", Georgia, serif;

  font-size: 1.35rem;

  font-style: italic;

  white-space: nowrap;

}



.repertoire-strip i {

  color: var(--wine);

  font-size: .55rem;

  font-style: normal;

}



/* Teacher */

.teacher-section {

  padding: 170px 0;

  overflow: hidden;

  color: var(--teacher-ink);

  background:

    radial-gradient(circle at 10% 15%, rgba(255, 255, 255, .76), transparent 23%),

    linear-gradient(150deg, #f7f2ea, #e9dece 82%);

}



.teacher-orbit {

  position: absolute;

  z-index: -1;

  border: 1px solid rgba(143, 61, 88, .13);

  border-radius: 50%;

}



.teacher-orbit--one {

  top: -280px;

  right: -160px;

  width: 760px;

  height: 760px;

}



.teacher-orbit--two {

  right: 80px;

  bottom: -360px;

  width: 620px;

  height: 620px;

  border-style: dashed;

}



.teacher-heading {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  max-width: 900px;

  margin-inline: auto;

  margin-bottom: 82px;

}



/* Az eyebrow középre igazítása és szimmetrikus díszítővonal mindkét oldalra */

.teacher-heading .eyebrow {

  justify-content: center;

}



.teacher-heading .eyebrow::after {

  width: 36px;

  height: 1px;

  content: "";

  background: currentColor;

  opacity: .75;

}



/* Címsor és lead középre helyezése */

.teacher-heading h2,

.teacher-heading .lead {

  margin-inline: auto;

  text-align: center;

}

}



/* A blokk középre helyezése és a 3 oszlop kikényszerítése egymás mellett */

/* Megatörés felülírása: a 3 kártya MINDIG egymás mellett marad */

/* Három kártya vízszintesen egymás mellett, középre rendezve */

.teacher-stats {

  display: flex !important;

  flex-direction: row !important;

  justify-content: center !important;

  align-items: stretch !important;

  width: 100% !important;

  max-width: 900px !important;

  margin-inline: auto !important;

  margin-bottom: 82px !important;

}



.teacher-stats > div {

  flex: 1 1 0px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  text-align: center !important;

  padding: 30px 15px !important;

  min-height: auto !important;

  border-right: 1px solid rgba(68, 36, 51, 0.15) !important;

  border-bottom: none !important;

}



.teacher-stats > div:last-child {

  border-right: none !important;

}



.teacher-stats strong {

  display: block !important;

  margin-bottom: 6px !important;

}

.teacher-stats span {

  color: var(--teacher-muted);

  font-size: .78rem;

  font-weight: 600;

  letter-spacing: .04em;

}



.lesson-path {

  display: grid;

  gap: 0;

  margin-bottom: 90px;

}



.lesson-step {

  display: grid;

  grid-template-columns: 100px 1px 1fr;

  gap: 38px;

  min-height: 220px;

}



.lesson-step__number {

  color: var(--wine);

  font-family: "Playfair Display", Georgia, serif;

  font-size: 2.5rem;

  font-style: italic;

}



.lesson-step__line {

  position: relative;

  height: 100%;

  background: rgba(68, 36, 51, .16);

}



.lesson-step__line::before {

  position: absolute;

  top: 5px;

  left: 50%;

  width: 13px;

  height: 13px;

  content: "";

  background: var(--teacher-bg);

  border: 3px solid var(--wine);

  border-radius: 50%;

  transform: translateX(-50%);

}



.lesson-step > div:last-child {

  padding: 0 0 60px;

  border-bottom: 1px solid rgba(68, 36, 51, .12);

}



.lesson-step:last-child > div:last-child {

  border-bottom: 0;

}



.lesson-step small {

  display: block;

  margin-bottom: 10px;

  color: var(--wine);

  font-size: .7rem;

  font-weight: 700;

  letter-spacing: .14em;

  text-transform: uppercase;

}



.lesson-step h3 {

  margin-bottom: 12px;

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(2rem, 4vw, 3.4rem);

  font-weight: 500;

  letter-spacing: -.035em;

}



.lesson-step p {

  max-width: 700px;

  margin-bottom: 0;

  color: var(--teacher-muted);

}



.student-types {

  display: grid;

  grid-template-columns: 1.6fr repeat(3, minmax(150px, .62fr)) auto;

  align-items: center;

  gap: 16px;

  padding: 28px;

  color: var(--artist-ink);

  background: var(--teacher-ink);

  border-radius: var(--radius-lg);

  box-shadow: 0 30px 70px rgba(68, 36, 51, .18);

}



.student-types__intro {

  padding: 12px 16px;

}



.student-types__intro .eyebrow {

  margin-bottom: 8px;

  color: var(--gold-light);

}



.student-types__intro h3 {

  margin-bottom: 0;

  font-family: "Playfair Display", Georgia, serif;

  font-size: 1.45rem;

  font-weight: 500;

}



.student-chip {

  display: flex;

  align-items: center;

  gap: 11px;

  min-height: 76px;

  padding: 14px;

  background: rgba(255, 255, 255, .06);

  border: 1px solid rgba(255, 255, 255, .1);

  border-radius: 16px;

}



.student-chip span {

  display: grid;

  flex: 0 0 auto;

  width: 34px;

  height: 34px;

  place-items: center;

  color: var(--teacher-ink);

  background: var(--gold-light);

  border-radius: 50%;

  font-family: "Playfair Display", Georgia, serif;

}



.student-chip strong {

  font-size: .78rem;

  line-height: 1.25;

}



/* Media */

.media-section {

  padding: 160px 0 170px;

  color: var(--artist-ink);

  background:

    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px),

    #0a0d15;

  background-size: 72px 72px;

}



.section-heading--media {

  display: flex;

  max-width: none;

  align-items: end;

  justify-content: space-between;

  gap: 40px;

}



.section-heading--media h2 {

  margin-bottom: 0;

}



.section-heading--media h2 em {

  color: var(--gold-light);

}



.section-heading--media .eyebrow--mixed {

  color: var(--gold-light);

}



.section-heading--media .text-link {

  flex: 0 0 auto;

  margin-bottom: 14px;

  color: rgba(255, 255, 255, .7);

}



.video-grid {

  display: grid;

  grid-template-columns: 1.35fr .65fr;

  grid-template-rows: repeat(2, minmax(230px, 1fr));

  gap: 22px;

  min-height: 650px;

}



.video-card {

  position: relative;

  overflow: hidden;

  background: linear-gradient(135deg, #1c2231, #0f131d);

  border: 1px solid rgba(255, 255, 255, .11);

  border-radius: var(--radius-lg);

  box-shadow: 0 25px 70px rgba(0, 0, 0, .24);

}



.video-card--large {

  grid-row: 1 / span 2;

}



.video-card button {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  padding: 0;

  color: inherit;

  background: transparent;

  border: 0;

  cursor: pointer;

  text-align: left;

}



.video-card button::after {

  position: absolute;

  inset: 0;

  z-index: 1;

  content: "";

  background: linear-gradient(180deg, rgba(3, 5, 10, .05), rgba(3, 5, 10, .82));

  transition: background .35s ease;

}



.video-card img {

  width: 100%;

  height: 100%;

  transition: transform .7s var(--ease), filter .4s ease;

}



.video-card img:not([src]),

.video-card img.is-broken {

  opacity: 0;

}



.video-card:hover img {

  filter: saturate(1.08) contrast(1.04);

  transform: scale(1.045);

}



.video-card:hover button::after {

  background: linear-gradient(180deg, rgba(3, 5, 10, 0), rgba(3, 5, 10, .72));

}



.video-card__fallback {

  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  color: rgba(255, 255, 255, .08);

  background:

    radial-gradient(circle at 20% 20%, rgba(216, 164, 95, .2), transparent 30%),

    radial-gradient(circle at 80% 70%, rgba(183, 72, 118, .2), transparent 33%);

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(3rem, 8vw, 8rem);

  font-style: italic;

  text-align: center;

}



.play-button {

  position: absolute;

  z-index: 3;

  top: 28px;

  right: 28px;

  display: grid;

  width: 62px;

  height: 62px;

  place-items: center;

  color: var(--artist-bg);

  background: var(--gold-light);

  border-radius: 50%;

  box-shadow: 0 15px 40px rgba(0, 0, 0, .24);

  transition: transform .3s var(--ease), background .3s ease;

}



.video-card:not(.video-card--large) .play-button {

  width: 48px;

  height: 48px;

}



.play-button svg {

  width: 24px;

  fill: currentColor;

}



.video-card:hover .play-button {

  background: var(--cream);

  transform: scale(1.08);

}



.video-card__meta {

  position: absolute;

  z-index: 3;

  right: 28px;

  bottom: 28px;

  left: 28px;

  display: grid;

  gap: 6px;

}



.video-card__meta small {

  color: var(--gold-light);

  font-size: .65rem;

  font-weight: 700;

  letter-spacing: .14em;

  text-transform: uppercase;

}



.video-card__meta strong {

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(1.35rem, 2.4vw, 2.6rem);

  font-weight: 500;

  line-height: 1.05;

}



.video-card:not(.video-card--large) .video-card__meta strong {

  font-size: clamp(1.15rem, 1.8vw, 1.7rem);

}



/* Story */

.story-section {

  padding: 170px 0;

  color: var(--teacher-ink);

  background: var(--cream);

}



.story-layout {

  display: grid;

  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);

  align-items: center;

  gap: clamp(50px, 8vw, 120px);

}



.story-image {

  position: relative;

  min-height: 640px;

  overflow: hidden;

  background: var(--teacher-bg-soft);

  border-radius: 38% 38% 26px 26px / 24% 24% 26px 26px;

  box-shadow: 0 30px 80px rgba(68, 36, 51, .13);

}



.story-image::after {

  position: absolute;

  inset: 0;

  content: "";

  background: linear-gradient(180deg, transparent 60%, rgba(22, 14, 18, .58));

}



.story-image img {

  width: 100%;

  height: 100%;

  filter: saturate(.84) contrast(1.02);

}



.story-image__label {

  position: absolute;

  z-index: 2;

  right: 30px;

  bottom: 28px;

  left: 30px;

  color: var(--cream);

  font-family: "Playfair Display", Georgia, serif;

  font-size: 1.25rem;

  font-style: italic;

}



.story-copy h2 {

  font-size: clamp(3.2rem, 5.5vw, 6rem);

}



.story-copy h2 em {

  color: var(--wine);

}



.story-copy > p:not(.eyebrow) {

  max-width: 650px;

  color: var(--teacher-muted);

  font-size: 1.08rem;

}



.story-values {

  display: grid;

  margin: 42px 0;

  border-top: 1px solid var(--line-light);

}



.story-values > div {

  display: grid;

  grid-template-columns: 52px 1fr;

  gap: 16px;

  padding: 16px 0;

  border-bottom: 1px solid var(--line-light);

}



.story-values span {

  color: var(--wine);

  font-family: "Playfair Display", Georgia, serif;

  font-style: italic;

}



.story-values strong {

  font-size: .9rem;

}



.story-copy .text-link {

  color: var(--wine);

}



/* Contact */

.contact-section {

  position: relative;

  display: grid;

  min-height: 690px;

  place-items: center;

  overflow: hidden;

  background: linear-gradient(90deg, var(--artist-bg) 0 50%, var(--teacher-bg) 50% 100%);

}



.contact-side {

  position: absolute;

  inset-block: 0;

  width: 50%;

}



.contact-side--artist {

  left: 0;

  background:

    radial-gradient(circle at 15% 80%, rgba(216, 164, 95, .18), transparent 34%),

    linear-gradient(145deg, #090c13, #151b29);

}



.contact-side--teacher {

  right: 0;

  background:

    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .78), transparent 27%),

    linear-gradient(145deg, #f7f1e8, #e9ddcd);

}



.contact-side::after {

  position: absolute;

  inset: 0;

  content: "";

  opacity: .14;

  background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);

  background-size: 72px 72px;

}



.contact-side--teacher::after {

  background-image: linear-gradient(rgba(68,36,51,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(68,36,51,.14) 1px, transparent 1px);

}



.contact-inner {

  position: relative;

  z-index: 3;

  width: min(860px, calc(100% - 40px));

  padding: clamp(44px, 7vw, 80px);

  color: var(--teacher-ink);

  background: rgba(255, 250, 241, .93);

  border: 1px solid rgba(255, 255, 255, .6);

  border-radius: var(--radius-xl);

  box-shadow: 0 40px 120px rgba(0, 0, 0, .22);

  text-align: center;

  backdrop-filter: blur(22px) saturate(115%);

}



.contact-inner .eyebrow {

  justify-content: center;

}



.contact-inner h2 {

  margin-bottom: 36px;

  font-size: clamp(3rem, 6.4vw, 6.5rem);

}



.contact-inner h2 em {

  color: var(--wine);

}



.contact-actions {

  display: flex;

  justify-content: center;

  gap: 14px;

  margin-bottom: 28px;

}



.button--split {

  min-width: 230px;

  color: var(--cream);

  background: linear-gradient(90deg, var(--artist-bg), var(--wine));

  box-shadow: 0 16px 40px rgba(68, 36, 51, .18);

}



.button--split strong,

.button--ghost strong {

  font-size: 1rem;

}



.button--ghost {

  min-width: 210px;

  color: var(--teacher-ink);

  background: transparent;

  border-color: rgba(68, 36, 51, .22);

}



.button--ghost:hover {

  color: var(--cream);

  background: var(--teacher-ink);

}



.contact-note {

  margin-bottom: 0;

  color: var(--teacher-muted);

  font-size: .72rem;

}



/* Footer */

.site-footer {

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  gap: 28px;

  padding: 34px 40px;

  color: rgba(255, 255, 255, .68);

  background: #070910;

  border-top: 1px solid rgba(255, 255, 255, .1);

}



.brand--footer .brand__mark {

  width: 42px;

  height: 42px;

}



.brand--footer .brand__text strong {

  color: var(--cream);

}



.site-footer p {

  margin-bottom: 0;

  font-size: .72rem;

}



.site-footer > a {

  justify-self: end;

  font-size: .72rem;

  font-weight: 700;

}



/* Video modal */

.video-modal {

  width: min(1040px, calc(100% - 32px));

  padding: 0;

  color: var(--artist-ink);

  background: #090c13;

  border: 1px solid rgba(255, 255, 255, .18);

  border-radius: 22px;

  box-shadow: 0 40px 120px rgba(0, 0, 0, .6);

}



.video-modal::backdrop {

  background: rgba(2, 4, 8, .82);

  backdrop-filter: blur(12px);

}



.video-modal__bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  min-height: 70px;

  padding: 12px 18px 12px 24px;

  border-bottom: 1px solid rgba(255, 255, 255, .1);

}



.video-modal__bar h2 {

  margin: 0;

  font-family: "DM Sans", sans-serif;

  font-size: .88rem;

  font-weight: 700;

  letter-spacing: .04em;

}



.video-modal__bar button {

  display: grid;

  width: 42px;

  height: 42px;

  place-items: center;

  color: var(--cream);

  background: rgba(255, 255, 255, .08);

  border: 1px solid rgba(255, 255, 255, .12);

  border-radius: 50%;

  cursor: pointer;

  font-size: 1.5rem;

}



.video-modal__frame {

  aspect-ratio: 16 / 9;

  background: #000;

}



.video-modal__frame iframe {

  width: 100%;

  height: 100%;

  border: 0;

}



.noscript {

  position: fixed;

  z-index: 2000;

  right: 16px;

  bottom: 16px;

  left: 16px;

  padding: 14px;

  color: var(--artist-bg);

  background: var(--gold-light);

  border-radius: 12px;

  text-align: center;

}



/* Motion */

.js .reveal {

  opacity: 0;

  transform: translateY(34px);

  transition: opacity .8s var(--ease), transform .8s var(--ease);

}



.js .reveal.is-visible {

  opacity: 1;

  transform: none;

}



@keyframes haloPulse {

  0%, 100% { opacity: .68; transform: scale(.96) rotate(-3deg); }

  50% { opacity: 1; transform: scale(1.05) rotate(3deg); }

}



@keyframes scrollLine {

  0% { transform: translateX(-100%); }

  50%, 100% { transform: translateX(100%); }

}



@keyframes rotate {

  to { transform: rotate(360deg); }

}



@keyframes repertoireMarquee {

  from { transform: translate3d(0, 0, 0); }

  to { transform: translate3d(-50%, 0, 0); }

}



/* Responsive */

@media (max-width: 1180px) {

  :root {

    --shell: min(1120px, calc(100% - 48px));

  }



  .site-header {

    grid-template-columns: 1fr auto;

  }



  .desktop-nav {

    display: none;

  }



  .role-switch {

    grid-column: 2;

    grid-row: 1;

    margin-right: 60px;

  }



  .menu-button {

    display: block;

    grid-column: 2;

    grid-row: 1;

  }



  .hero-world--artist .hero-world__inner {

    padding-right: 70px;

  }



  .hero-world--teacher .hero-world__inner {

    padding-left: 90px;

  }



  .duality-grid {

    grid-template-columns: 1fr 100px 1fr;

  }



  .duality-center {

    height: 100px;

  }



  .duality-center i {

    width: 74px;

    height: 74px;

  }



  .duality-center__logo {

    width: 62px;

    height: 56px;

  }



  .duality-center small {

    display: none;

  }



  .artist-layout {

    grid-template-columns: minmax(0, 1fr) minmax(380px, .85fr);

    gap: 58px;

  }



  .teacher-heading {

    grid-template-columns: 1fr;

    gap: 24px;

  }



  .teacher-heading .lead {

    max-width: 720px;

  }



  .student-types {

    grid-template-columns: 1fr repeat(3, minmax(150px, .62fr));

  }



  .student-types__intro {

    grid-column: 1 / -1;

  }



  .student-types .button {

    grid-column: 1 / -1;

    justify-self: start;

  }

}



@media (max-width: 900px) {

  :root {

    --shell: min(820px, calc(100% - 40px));

  }



  .hero {

    grid-template-columns: 1fr;

    grid-template-rows: 1fr 1fr;

    min-height: 1080px;

    background: linear-gradient(180deg, var(--artist-bg) 0 50%, var(--teacher-bg) 50% 100%);

  }



  .hero-world {

    min-height: 540px;

  }



  .hero-world__inner {

    width: min(620px, calc(100% - 40px));

  }



  .hero-world--artist {

    align-items: flex-end;

    padding-bottom: 104px;

  }



  .hero-world--artist .hero-world__inner {

    margin-inline: auto;

    padding-right: 280px;

  }



  .hero-world--teacher {

    align-items: flex-start;

    padding-top: 106px;

  }



  .hero-world--teacher .hero-world__inner {

    margin-inline: auto;

    padding-left: 280px;

  }



  .hero-world h2 {

    font-size: clamp(3.5rem, 10vw, 6rem);

  }



  .hero-portrait {

    width: 260px;

  }



  .hero-bridge {

    bottom: 22px;

  }



  .scroll-cue {

    display: none;

  }



  body[data-focus="artist"] .hero-portrait,

  body[data-focus="teacher"] .hero-portrait {

    transform: translate(-50%, -50%) scale(1.02);

  }



  .duality,

  .artist-section,

  .teacher-section,

  .media-section,

  .story-section {

    padding-top: 120px;

  }



  .duality {

    padding-bottom: 120px;

  }



  .section-heading {

    margin-bottom: 60px;

  }



  .duality-grid {

    grid-template-columns: 1fr;

  }



  .duality-center {

    width: 100px;

    margin: 0 auto;

    transform: rotate(90deg);

  }



  .duality-center__logo {

    width: 62px;

    height: 56px;

    transform: rotate(-90deg);

  }



  .identity-card {

    min-height: 360px;

  }



  .identity-card__icon {

    margin-bottom: 52px;

  }



  .artist-layout,

  .story-layout {

    grid-template-columns: 1fr;

  }



  .artist-visual {

    min-height: 650px;

  }



  .artist-visual__main {

    inset-inline: 40px;

  }



  .artist-visual :is(blockquote, .artist-visual__statement) {

    right: 0;

  }



  .teacher-stats {

    grid-template-columns: 1fr;

  }



  .teacher-stats > div {

    grid-template-columns: minmax(150px, .45fr) 1fr;

    align-items: center;

    min-height: auto;

    border-right: 0;

    border-bottom: 1px solid rgba(68, 36, 51, .1);

  }



  .teacher-stats > div:last-child {

    border-bottom: 0;

  }



  .student-types {

    grid-template-columns: 1fr 1fr;

  }



  .student-types__intro,

  .student-types .button {

    grid-column: 1 / -1;

  }



  .video-grid {

    grid-template-columns: 1fr 1fr;

    grid-template-rows: minmax(420px, .95fr) minmax(240px, .55fr);

    min-height: auto;

  }



  .video-card--large {

    grid-column: 1 / -1;

    grid-row: auto;

  }



  .story-image {

    min-height: 580px;

  }

}



@media (max-width: 680px) {

  :root {

    --shell: calc(100% - 28px);

    --header-h: 76px;

    --radius-xl: 26px;

    --radius-lg: 20px;

  }



  h2 {

    font-size: clamp(2.75rem, 13vw, 4.6rem);

  }



  .site-header {

    min-height: 76px;

    padding: 10px 14px;

  }



  .brand__mark {

    width: 42px;

    height: 42px;

  }



  .brand__text strong {

    font-size: .92rem;

  }



  .brand__text small {

    display: none;

  }



  .role-switch {

    position: fixed;

    z-index: 1001;

    right: 14px;

    bottom: 14px;

    left: 14px;

    grid-column: auto;

    grid-row: auto;

    justify-self: auto;

    justify-content: center;

    margin: 0;

    background: rgba(9, 12, 20, .86);

    box-shadow: 0 15px 40px rgba(0, 0, 0, .25);

    backdrop-filter: blur(18px);

  }



  .role-switch button {

    flex: 1 1 0;

    justify-content: center;

  }



  .menu-button {

    display: block;

  }



  .hero {

    min-height: 1060px;

  }



  .hero-world {

    min-height: 530px;

  }



  .hero-world__inner {

    width: calc(100% - 28px);

    text-align: left;

  }



  .hero-world--artist {

    padding-bottom: 154px;

  }



  .hero-world--teacher {

    padding-top: 154px;

  }



  .hero-world--artist .hero-world__inner,

  .hero-world--teacher .hero-world__inner {

    padding-inline: 0;

  }



  .hero-world--teacher .hero-copy {

    margin-left: 0;

  }



  .hero-world h2 {

    font-size: clamp(3.6rem, 17vw, 5.5rem);

  }



  .hero-copy {

    max-width: 94%;

    margin-bottom: 24px;

    font-size: .92rem;

  }



  .hero-portrait {

    width: 220px;

  }



  .hero-bridge {

    bottom: 84px;

    gap: 8px;

    padding: 8px 11px;

  }



  .hero-bridge span,

  .hero-bridge strong {

    font-size: .55rem;

  }



  .duality,

  .artist-section,

  .teacher-section,

  .media-section,

  .story-section {

    padding-top: 96px;

  }



  .duality,

  .teacher-section,

  .media-section,

  .story-section {

    padding-bottom: 96px;

  }



  .section-heading {

    margin-bottom: 42px;

  }



  .identity-card {

    min-height: 0;

    padding: 30px 24px;

  }



  .identity-card__icon {

    width: 58px;

    height: 58px;

    margin-bottom: 46px;

  }



  .identity-card h3 {

    font-size: 2.5rem;

  }



  .artist-layout {

    padding-bottom: 96px;

  }



  .service-list > div {

    grid-template-columns: 40px 1fr;

  }



  .service-list small {

    grid-column: 2;

  }



  .artist-visual {

    min-height: 510px;

  }



  .artist-visual__main {

    inset: 24px 0 70px 24px;

    border-radius: 160px 160px 24px 24px;

  }



  .artist-visual__badge {

    width: 92px;

    height: 92px;

  }



  .artist-visual :is(blockquote, .artist-visual__statement) {

    max-width: 260px;

    padding: 20px;

    font-size: 1rem;

  }



  .artist-visual__caption {

    right: 24px;

    bottom: 28px;

    left: 24px;

  }



  .repertoire-strip__group {

    gap: 20px;

    min-width: max(100vw, 760px);

    padding: 14px 24px;

  }



  .repertoire-strip span {

    font-size: 1.05rem;

  }



  .teacher-heading {

    margin-bottom: 48px;

  }



  .teacher-stats {

    margin-bottom: 60px;

  }



  .teacher-stats > div {

    grid-template-columns: 1fr;

    padding: 24px;

  }



  .lesson-step {

    grid-template-columns: 52px 1px 1fr;

    gap: 18px;

  }



  .lesson-step__number {

    font-size: 1.6rem;

  }



  .lesson-step h3 {

    font-size: 1.75rem;

  }



  .student-types {

    grid-template-columns: 1fr;

    padding: 18px;

  }



  .student-types__intro,

  .student-types .button {

    grid-column: auto;

  }



  .student-types .button {

    width: 100%;

  }



  .section-heading--media {

    display: grid;

  }



  .section-heading--media .text-link {

    justify-self: start;

  }



  .video-grid {

    grid-template-columns: 1fr;

    grid-template-rows: 360px 230px 230px;

  }



  .video-card--large {

    grid-column: auto;

  }



  .play-button {

    top: 18px;

    right: 18px;

  }



  .video-card__meta {

    right: 20px;

    bottom: 20px;

    left: 20px;

  }



  .story-image {

    min-height: 440px;

  }



  .contact-section {

    min-height: 690px;

    padding: 70px 0 100px;

  }



  .contact-inner {

    padding: 42px 20px;

  }



  .contact-actions {

    display: grid;

  }



  .contact-actions .button {

    width: 100%;

  }



  .site-footer {

    grid-template-columns: 1fr;

    justify-items: center;

    padding: 32px 20px 100px;

    text-align: center;

  }



  .site-footer > a {

    justify-self: center;

  }

}



@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }



  *,

  *::before,

  *::after {

    scroll-behavior: auto !important;

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;

  }



  .js .reveal {

    opacity: 1;

    transform: none;

  }

}



/* Progressive interaction states */

.desktop-nav a.is-active::after {

  transform: scaleX(1);

  transform-origin: left;

}



body.menu-open,

body.modal-open {

  overflow: hidden;

}



@media (min-width: 901px) {

  .hero-portrait {

    transform: translate(calc(-50% + var(--pointer-x, 0px)), calc(-50% + var(--pointer-y, 0px)));

  }



  body[data-focus="artist"] .hero-portrait {

    transform: translate(calc(-56% + var(--pointer-x, 0px)), calc(-50% + var(--pointer-y, 0px))) scale(1.03);

  }



  body[data-focus="teacher"] .hero-portrait {

    transform: translate(calc(-44% + var(--pointer-x, 0px)), calc(-50% + var(--pointer-y, 0px))) scale(1.03);

  }

}



/* ========================================================================== 

   ÖTVÖZÖTT NYITÓKÉPERNYŐ

   Az interaktív, kétpaneles belépő a hosszú, görgethető bemutatkozó oldallal.

   ========================================================================== */



:root {

  --teacher-bg: #eef5f8;

  --teacher-bg-soft: #dceaf1;

  --teacher-ink: #17364a;

  --teacher-muted: #647b89;

  --wine: #2f789d;

  --rose: #69a9c5;

  --teacher-blue: #5aa8d0;

  --teacher-blue-deep: #153f5c;

  --glass-dark: rgba(9, 14, 24, .74);

  --glass-border: rgba(255, 255, 255, .17);

}



body.role-open {

  overflow: hidden;

}



/* Gyors közösségi és kapcsolat elemek */

.quick-social {

  position: fixed;

  z-index: 1180;

  top: 50%;

  left: 20px;

  display: grid;

  gap: 12px;

  transform: translateY(-50%);

}



.quick-social a {

  display: grid;

  width: 44px;

  height: 44px;

  place-items: center;

  color: #fff;

  background: rgba(9, 14, 24, .48);

  border: 1px solid rgba(255, 255, 255, .18);

  border-radius: 50%;

  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);

  font-family: Georgia, serif;

  font-size: 1.05rem;

  font-weight: 700;

  backdrop-filter: blur(12px);

  transition: transform .25s var(--ease), background .25s ease, border-color .25s ease;

}



.quick-social a:last-child {

  padding-left: 2px;

  font-family: inherit;

  font-size: .8rem;

}



.quick-social a:hover,

.quick-social a:focus-visible {

  background: var(--wine);

  border-color: rgba(255, 255, 255, .5);

  transform: translateX(5px) scale(1.04);

}



.floating-contact {

  position: fixed;

  z-index: 1180;

  right: 28px;

  bottom: 28px;

  display: inline-flex;

  min-height: 52px;

  align-items: center;

  gap: 10px;

  padding: 0 23px;

  color: #15110c;

  background: linear-gradient(135deg, var(--gold-light), var(--gold));

  border: 0;

  border-radius: 999px;

  box-shadow: 0 16px 42px rgba(216, 164, 95, .3);

  cursor: pointer;

  font-size: .82rem;

  font-weight: 800;

  letter-spacing: .06em;

  text-transform: uppercase;

  transition: transform .25s var(--ease), box-shadow .25s ease;

}



.floating-contact span {

  font-size: 1rem;

}



.floating-contact:hover,

.floating-contact:focus-visible {

  box-shadow: 0 20px 50px rgba(216, 164, 95, .45);

  transform: translateY(-4px);

}



/* Kapcsolati választóablak */

.contact-dialog {

  width: min(760px, calc(100% - 32px));

  max-height: min(760px, calc(100svh - 32px));

  padding: clamp(28px, 5vw, 58px);

  overflow: auto;

  color: var(--teacher-ink);

  background:

    radial-gradient(circle at 12% 0%, rgba(216, 164, 95, .2), transparent 34%),

    radial-gradient(circle at 100% 100%, rgba(90, 168, 208, .16), transparent 38%),

    rgba(255, 250, 244, .98);

  border: 1px solid rgba(255, 255, 255, .7);

  border-radius: 28px;

  box-shadow: 0 40px 120px rgba(4, 8, 16, .45);

}



.contact-dialog::backdrop {

  background: rgba(4, 8, 16, .78);

  backdrop-filter: blur(12px);

}



.contact-dialog[open] {

  animation: contactDialogIn .35s var(--ease) both;

}



.contact-dialog__close {

  position: sticky;

  z-index: 2;

  top: 0;

  float: right;

  display: grid;

  width: 44px;

  height: 44px;

  place-items: center;

  margin: -10px -10px 0 20px;

  color: var(--teacher-ink);

  background: rgba(255, 255, 255, .72);

  border: 1px solid rgba(23, 54, 74, .14);

  border-radius: 50%;

  cursor: pointer;

  font-size: 1.5rem;

  line-height: 1;

  transition: color .2s ease, background .2s ease, transform .25s var(--ease);

}



.contact-dialog__close:hover {

  color: #fff;

  background: var(--wine);

  transform: rotate(90deg);

}



.contact-dialog h2 {

  max-width: 620px;

  margin-bottom: 20px;

  font-size: clamp(2.65rem, 6vw, 5.2rem);

}



.contact-dialog h2 em {

  color: var(--wine);

}



.contact-dialog__lead {

  max-width: 610px;

  margin-bottom: 32px;

  color: var(--teacher-muted);

  font-size: 1.02rem;

}



.contact-dialog__choices {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

  margin-bottom: 26px;

}



.contact-choice {

  position: relative;

  display: grid;

  min-height: 164px;

  align-content: end;

  padding: 26px;

  overflow: hidden;

  border-radius: 20px;

  transition: transform .28s var(--ease), box-shadow .28s ease;

}



.contact-choice::before {

  position: absolute;

  inset: 0;

  content: "";

  opacity: .5;

  background: radial-gradient(circle at 90% 12%, rgba(255, 255, 255, .28), transparent 32%);

}



.contact-choice--artist {

  color: var(--artist-ink);

  background: linear-gradient(145deg, #0c101a, #20283a);

  box-shadow: 0 20px 46px rgba(6, 9, 16, .16);

}



.contact-choice--teacher {

  color: #fff;

  background: linear-gradient(145deg, #1c5979, #4b9bc3);

  box-shadow: 0 20px 46px rgba(47, 120, 157, .18);

}



.contact-choice:hover,

.contact-choice:focus-visible {

  transform: translateY(-6px);

}



.contact-choice small,

.contact-choice strong,

.contact-choice span {

  position: relative;

  z-index: 1;

}



.contact-choice small {

  margin-bottom: 8px;

  opacity: .72;

  font-size: .68rem;

  font-weight: 800;

  letter-spacing: .15em;

  text-transform: uppercase;

}



.contact-choice strong {

  max-width: 220px;

  font-family: "Playfair Display", Georgia, serif;

  font-size: 1.8rem;

  line-height: 1.05;

}



.contact-choice span {

  position: absolute;

  top: 22px;

  right: 24px;

  font-size: 1.2rem;

}



.contact-dialog__youtube {

  display: inline-flex;

  gap: 10px;

  color: var(--wine);

  border-bottom: 1px solid currentColor;

  font-size: .84rem;

  font-weight: 800;

}



/* Interaktív kétpaneles hero */

.hybrid-hero {

  position: relative;

  display: flex;

  width: 100%;

  height: 100svh;

  min-height: 760px;

  overflow: hidden;

  isolation: isolate;

  color: #fff;

  background: #070a11;

}



.hybrid-panel {

  position: relative;

  display: flex;

  min-width: 0;

  flex: 1 1 50%;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  isolation: isolate;

  transition: flex-basis .8s cubic-bezier(.25, 1, .5, 1), flex-grow .8s cubic-bezier(.25, 1, .5, 1), opacity .48s ease, filter .55s ease;

}



.hybrid-panel--artist {

  background: #090c14;

}



.hybrid-panel--teacher {

  background: #12354d;

}



.hybrid-panel__backdrop,

.hybrid-panel__shade,

.hybrid-panel__pattern {

  position: absolute;

  inset: 0;

}



.hybrid-panel__backdrop {

  z-index: -4;

  overflow: hidden;

}



.hybrid-panel__backdrop img {

  width: 100%;

  height: 100%;

  opacity: .45;

  filter: blur(8px) saturate(.8) contrast(1.05);

  transform: scale(1.16);

  transition: transform 8s ease, opacity .7s ease, filter .7s ease;

}



.hybrid-panel--artist .hybrid-panel__backdrop img {

  object-position: 45% 38%;

}



.hybrid-panel--teacher .hybrid-panel__backdrop img {

  object-position: 56% 38%;

}



.hybrid-panel__shade {

  z-index: -2;

  background:

    linear-gradient(180deg, rgba(5, 8, 14, .42), rgba(5, 8, 14, .76)),

    radial-gradient(circle at 50% 46%, transparent 0 12%, rgba(6, 9, 16, .18) 52%, rgba(4, 7, 13, .64) 100%);

}



.hybrid-panel--artist .hybrid-panel__shade {

  background:

    radial-gradient(circle at 28% 48%, rgba(216, 164, 95, .45), transparent 36%),

    linear-gradient(115deg, rgba(5, 8, 14, .38), rgba(5, 8, 14, .86));

}



.hybrid-panel--teacher .hybrid-panel__shade {

  background:

    radial-gradient(circle at 72% 46%, rgba(90, 168, 208, .5), transparent 36%),

    linear-gradient(245deg, rgba(8, 30, 45, .3), rgba(5, 12, 22, .86));

}



.hybrid-panel__pattern {

  z-index: -1;

  pointer-events: none;

}



.hybrid-panel__pattern--stage {

  opacity: .32;

  background:

    linear-gradient(105deg, transparent 18%, rgba(255, 225, 173, .22) 19%, transparent 30%),

    linear-gradient(75deg, transparent 52%, rgba(255, 225, 173, .13) 53%, transparent 64%);

  filter: blur(1px);

}



.hybrid-panel__pattern--score {

  inset: 8% -12% auto 2%;

  height: 66%;

  opacity: .12;

  background: repeating-linear-gradient(to bottom, transparent 0 32px, #e9f7ff 33px 34px);

  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 85%, transparent);

  transform: rotate(-7deg);

}



.hybrid-panel__intro {

  position: relative;

  z-index: 4;

  display: grid;

  width: min(520px, calc(100% - 64px));

  justify-items: center;

  margin-top: 58px;

  text-align: center;

  transition: opacity .45s ease, transform .55s var(--ease), visibility .45s ease;

}



.hybrid-panel__number {

  margin-bottom: 18px;

  color: rgba(255, 255, 255, .68);

  font-size: .7rem;

  font-weight: 800;

  letter-spacing: .18em;

  text-transform: uppercase;

}



.hybrid-avatar {

  width: clamp(128px, 13vw, 180px);

  aspect-ratio: 1;

  margin-bottom: 22px;

  padding: 6px;

  overflow: hidden;

  background: rgba(255, 255, 255, .08);

  border: 1px solid rgba(255, 255, 255, .42);

  border-radius: 50%;

  box-shadow: 0 22px 55px rgba(0, 0, 0, .42), inset 0 0 0 5px rgba(255, 255, 255, .05);

  transition: transform .4s var(--ease), border-color .3s ease, box-shadow .4s ease;

}



.hybrid-avatar img {

  width: 100%;

  height: 100%;

  border-radius: 50%;

}



.hybrid-avatar--artist img {

  filter: contrast(1.03) brightness(1.04) saturate(.85);

}



.hybrid-avatar--teacher img {

  filter: contrast(1.02) brightness(1.08) saturate(.82);

}



.hybrid-panel__kicker {

  margin-bottom: 4px;

  color: var(--gold-light);

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(1.05rem, 1.9vw, 1.45rem);

  font-style: italic;

}



.hybrid-panel--teacher .hybrid-panel__kicker {

  color: #bfe9ff;

}



.hybrid-panel__intro h2 {

  margin-bottom: 12px;

  color: #fff;

  font-size: clamp(3.3rem, 6vw, 6.3rem);

  letter-spacing: -.045em;

  line-height: .92;

  text-shadow: 0 12px 36px rgba(0, 0, 0, .44);

}



.hybrid-panel__tagline {

  margin-bottom: 28px;

  color: rgba(255, 255, 255, .72);

  font-size: .78rem;

  font-weight: 700;

  letter-spacing: .13em;

  text-transform: uppercase;

}



.hybrid-panel__open {

  display: inline-flex;

  min-height: 48px;

  align-items: center;

  gap: 12px;

  padding: 0 22px;

  color: #fff;

  background: rgba(255, 255, 255, .09);

  border: 1px solid rgba(255, 255, 255, .3);

  border-radius: 999px;

  cursor: pointer;

  font-size: .78rem;

  font-weight: 800;

  letter-spacing: .06em;

  text-transform: uppercase;

  backdrop-filter: blur(12px);

  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s var(--ease);

}



.hybrid-panel--artist .hybrid-panel__open:hover,

.hybrid-panel--artist .hybrid-panel__open:focus-visible {

  color: #15110c;

  background: var(--gold-light);

  border-color: var(--gold-light);

  transform: translateY(-3px);

}



.hybrid-panel--teacher .hybrid-panel__open:hover,

.hybrid-panel--teacher .hybrid-panel__open:focus-visible {

  background: var(--teacher-blue);

  border-color: var(--teacher-blue);

  transform: translateY(-3px);

}



.hybrid-panel:hover .hybrid-panel__backdrop img {

  opacity: .58;

  filter: blur(5px) saturate(.92) contrast(1.08);

  transform: scale(1.22);

}



.hybrid-panel:hover .hybrid-avatar {

  transform: translateY(-8px) scale(1.05);

}



.hybrid-panel--artist:hover .hybrid-avatar {

  border-color: var(--gold-light);

  box-shadow: 0 26px 65px rgba(0, 0, 0, .52), 0 0 0 7px rgba(216, 164, 95, .12);

}



.hybrid-panel--teacher:hover .hybrid-avatar {

  border-color: #a9ddf7;

  box-shadow: 0 26px 65px rgba(0, 0, 0, .52), 0 0 0 7px rgba(90, 168, 208, .14);

}



.hybrid-hero__title {

  position: absolute;

  z-index: 12;

  top: calc(var(--header-h) + 18px);

  left: 50%;

  display: grid;

  justify-items: center;

  color: #fff;

  text-align: center;

  text-shadow: 0 5px 22px rgba(0, 0, 0, .5);

  transform: translateX(-50%);

  pointer-events: none;

  transition: opacity .35s ease, transform .45s var(--ease);

}



.hybrid-hero__title span {

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(1.8rem, 3.5vw, 3.5rem);

  font-weight: 600;

  line-height: 1;

}



.hybrid-hero__title small {

  margin-top: 8px;

  color: rgba(255, 255, 255, .68);

  font-size: .66rem;

  font-weight: 800;

  letter-spacing: .24em;

  text-transform: uppercase;

}



.hybrid-hero__ambient {

  position: absolute;

  z-index: 1;

  inset: 0;

  overflow: hidden;

  pointer-events: none;

}



.hybrid-hero__ambient span {

  position: absolute;

  bottom: -40px;

  color: rgba(255, 255, 255, .07);

  font-size: 2.2rem;

  animation: hybridNoteFloat 16s linear infinite;

}



.hybrid-hero__ambient span:nth-child(1) { left: 8%; animation-duration: 14s; }

.hybrid-hero__ambient span:nth-child(2) { left: 28%; animation-delay: -8s; animation-duration: 18s; font-size: 3.8rem; }

.hybrid-hero__ambient span:nth-child(3) { left: 52%; animation-delay: -3s; animation-duration: 15s; }

.hybrid-hero__ambient span:nth-child(4) { left: 74%; animation-delay: -10s; animation-duration: 20s; font-size: 4.4rem; }

.hybrid-hero__ambient span:nth-child(5) { left: 91%; animation-delay: -5s; animation-duration: 17s; }



.hybrid-hero__seam {

  position: absolute;

  z-index: 11;

  top: 50%;

  left: 50%;

  display: grid;

  width: 58px;

  height: 58px;

  place-items: center;

  color: var(--teacher-ink);

  background: rgba(255, 250, 241, .94);

  border: 1px solid rgba(255, 255, 255, .65);

  border-radius: 50%;

  box-shadow: 0 14px 45px rgba(0, 0, 0, .28);

  font-family: "Playfair Display", Georgia, serif;

  font-size: .9rem;

  font-style: italic;

  transform: translate(-50%, -50%);

  pointer-events: none;

  transition: opacity .3s ease, transform .45s var(--ease);

}



.hybrid-hero__seam::before,

.hybrid-hero__seam::after {

  position: absolute;

  left: 50%;

  width: 1px;

  height: 44vh;

  content: "";

  background: linear-gradient(transparent, rgba(255, 255, 255, .45));

  transform: translateX(-50%);

}



.hybrid-hero__seam::before {

  bottom: 100%;

}



.hybrid-hero__seam::after {

  top: 100%;

  background: linear-gradient(rgba(255, 255, 255, .45), transparent);

}



.hybrid-hero__seam-logo {

  display: block;

  width: 40px;

  height: 35px;

  overflow: visible;

}



.hybrid-hero__seam i {

  position: absolute;

  inset: -13px;

  border: 1px solid rgba(255, 255, 255, .16);

  border-radius: 50%;

}



.hybrid-hero__bridge {

  position: absolute;

  z-index: 11;

  bottom: 28px;

  left: 50%;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 9px 14px;

  color: var(--teacher-ink);

  background: rgba(255, 250, 244, .92);

  border: 1px solid rgba(255, 255, 255, .58);

  border-radius: 999px;

  box-shadow: 0 12px 35px rgba(0, 0, 0, .16);

  transform: translateX(-50%);

  backdrop-filter: blur(12px);

  pointer-events: none;

  white-space: nowrap;

  transition: opacity .3s ease, transform .45s var(--ease);

}



.hybrid-hero__bridge span,

.hybrid-hero__bridge strong {

  font-size: .62rem;

  letter-spacing: .09em;

  text-transform: uppercase;

}



.hybrid-hero__bridge i {

  width: 5px;

  height: 5px;

  background: linear-gradient(135deg, var(--gold), var(--wine));

  border-radius: 50%;

}



.hybrid-scroll-cue {

  position: absolute;

  z-index: 10;

  bottom: 30px;

  left: 30px;

  display: flex;

  align-items: center;

  gap: 10px;

  color: rgba(255, 255, 255, .55);

  font-size: .64rem;

  font-weight: 800;

  letter-spacing: .13em;

  text-transform: uppercase;

  transform: rotate(-90deg) translateX(100%);

  transform-origin: left bottom;

  transition: opacity .3s ease;

}



.hybrid-scroll-cue i {

  width: 38px;

  height: 1px;

  overflow: hidden;

  background: rgba(255, 255, 255, .2);

}



.hybrid-scroll-cue i::after {

  display: block;

  width: 100%;

  height: 100%;

  content: "";

  background: var(--gold-light);

  animation: scrollLine 2.3s ease-in-out infinite;

}



/* A panelben megnyíló részletes kártya */

.hybrid-panel__details {

  position: absolute;

  z-index: 8;

  top: 50%;

  left: 50%;

  display: grid;

  width: min(1180px, calc(100% - 80px));

  max-height: calc(100svh - 155px);

  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);

  grid-template-areas:

    "heading cards"

    "actions cards";

  gap: 30px 56px;

  padding: clamp(36px, 5vw, 64px);

  overflow: auto;

  color: #fff;

  background: rgba(10, 15, 25, .75);

  border: 1px solid var(--glass-border);

  border-radius: 28px;

  box-shadow: 0 34px 90px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12);

  opacity: 0;

  transform: translate(-50%, -44%) scale(.97);

  visibility: hidden;

  pointer-events: none;

  backdrop-filter: blur(24px) saturate(115%);

  transition: opacity .48s ease .2s, transform .6s cubic-bezier(.2, .9, .25, 1.15) .15s, visibility .48s ease .2s;

}



.hybrid-panel--teacher .hybrid-panel__details {

  background: rgba(8, 32, 48, .74);

  border-color: rgba(173, 224, 249, .24);

}



.hybrid-details__heading {

  grid-area: heading;

  align-self: end;

}



.hybrid-details__heading .eyebrow {

  margin-bottom: 18px;

}



.hybrid-panel--teacher .hybrid-details__heading .eyebrow {

  color: #bfe9ff;

}



.hybrid-details__heading h2 {

  margin-bottom: 20px;

  color: #fff;

  font-size: clamp(3.1rem, 6vw, 6.2rem);

}



.hybrid-panel--artist .hybrid-details__heading h2 em {

  color: var(--gold-light);

}



.hybrid-panel--teacher .hybrid-details__heading h2 em {

  color: #bfe9ff;

}



.hybrid-details__heading > p:last-child {

  max-width: 620px;

  margin-bottom: 0;

  color: rgba(255, 255, 255, .72);

  font-size: 1.02rem;

}



.hybrid-details__grid {

  display: grid;

  grid-area: cards;

  align-content: center;

  gap: 14px;

}



.hybrid-details__grid article {

  display: grid;

  grid-template-columns: 62px 1fr;

  gap: 3px 18px;

  padding: 22px;

  background: rgba(255, 255, 255, .055);

  border: 1px solid rgba(255, 255, 255, .1);

  border-radius: 17px;

  transition: transform .28s var(--ease), background .28s ease, border-color .28s ease;

}



.hybrid-details__grid article:hover {

  background: rgba(255, 255, 255, .095);

  border-color: rgba(255, 255, 255, .22);

  transform: translateX(6px);

}



.hybrid-details__grid article > span {

  grid-row: 1 / span 2;

  display: grid;

  width: 54px;

  height: 54px;

  place-items: center;

  color: #15110c;

  background: var(--gold-light);

  border-radius: 50%;

  font-family: "Playfair Display", Georgia, serif;

  font-size: 1rem;

  font-weight: 700;

}



.hybrid-panel--teacher .hybrid-details__grid article > span {

  color: #fff;

  background: var(--teacher-blue);

  font-family: inherit;

  font-size: .74rem;

}



.hybrid-details__grid h3 {

  align-self: end;

  margin: 0 0 5px;

  font-size: 1.18rem;

}



.hybrid-details__grid p {

  margin: 0;

  color: rgba(255, 255, 255, .62);

  font-size: .88rem;

  line-height: 1.55;

}



.hybrid-details__actions {

  display: flex;

  grid-area: actions;

  align-items: center;

  align-self: start;

  gap: 20px;

  flex-wrap: wrap;

}



.hybrid-details__link {

  display: inline-flex;

  gap: 9px;

  color: rgba(255, 255, 255, .82);

  border-bottom: 1px solid currentColor;

  font-size: .8rem;

  font-weight: 800;

}



.hybrid-panel__close {

  position: sticky;

  z-index: 3;

  top: -18px;

  right: 0;

  display: grid;

  grid-column: 1 / -1;

  justify-self: end;

  width: 44px;

  height: 44px;

  place-items: center;

  margin: -22px -22px -22px 0;

  color: #fff;

  background: rgba(255, 255, 255, .08);

  border: 1px solid rgba(255, 255, 255, .18);

  border-radius: 50%;

  cursor: pointer;

  font-size: 1.5rem;

  line-height: 1;

  backdrop-filter: blur(10px);

  transition: color .2s ease, background .2s ease, transform .28s var(--ease);

}



.hybrid-panel--artist .hybrid-panel__close:hover {

  color: #15110c;

  background: var(--gold-light);

  transform: rotate(90deg);

}



.hybrid-panel--teacher .hybrid-panel__close:hover {

  background: var(--teacher-blue);

  transform: rotate(90deg);

}



/* Megnyitott állapot */

.hybrid-hero[data-open="artist"] .hybrid-panel--artist,

.hybrid-hero[data-open="teacher"] .hybrid-panel--teacher {

  flex-basis: 100%;

  flex-grow: 1;

}



.hybrid-hero[data-open="artist"] .hybrid-panel--teacher,

.hybrid-hero[data-open="teacher"] .hybrid-panel--artist {

  flex-basis: 0;

  flex-grow: 0;

  opacity: 0;

  pointer-events: none;

}



.hybrid-hero[data-open="artist"] .hybrid-panel--artist .hybrid-panel__intro,

.hybrid-hero[data-open="teacher"] .hybrid-panel--teacher .hybrid-panel__intro {

  opacity: 0;

  transform: translateY(-44px) scale(.95);

  visibility: hidden;

  pointer-events: none;

}



.hybrid-hero[data-open="artist"] .hybrid-panel--artist .hybrid-panel__details,

.hybrid-hero[data-open="teacher"] .hybrid-panel--teacher .hybrid-panel__details {

  opacity: 1;

  transform: translate(-50%, -50%) scale(1);

  visibility: visible;

  pointer-events: auto;

}



.hybrid-hero[data-open="artist"] .hybrid-hero__title,

.hybrid-hero[data-open="teacher"] .hybrid-hero__title,

.hybrid-hero[data-open="artist"] .hybrid-hero__seam,

.hybrid-hero[data-open="teacher"] .hybrid-hero__seam,

.hybrid-hero[data-open="artist"] .hybrid-hero__bridge,

.hybrid-hero[data-open="teacher"] .hybrid-hero__bridge,

.hybrid-hero[data-open="artist"] .hybrid-scroll-cue,

.hybrid-hero[data-open="teacher"] .hybrid-scroll-cue {

  opacity: 0;

  transform: translate(-50%, -20px) scale(.92);

  pointer-events: none;

}



.hybrid-hero[data-open="artist"] .hybrid-panel--artist .hybrid-panel__backdrop img,

.hybrid-hero[data-open="teacher"] .hybrid-panel--teacher .hybrid-panel__backdrop img {

  opacity: .64;

  filter: blur(4px) saturate(.9) contrast(1.08);

  transform: scale(1.2);

}



/* Fejléc szerepválasztójának vizuális kapcsolata a nyitóképernyővel */

.hybrid-hero:not([data-open="artist"]):not([data-open="teacher"]) .hybrid-panel {

  transition: flex-basis .7s var(--ease), flex-grow .7s var(--ease), opacity .45s ease, filter .55s ease;

}



body[data-focus="artist"] .hybrid-hero:not([data-open="artist"]):not([data-open="teacher"]) .hybrid-panel--artist,

body[data-focus="teacher"] .hybrid-hero:not([data-open="artist"]):not([data-open="teacher"]) .hybrid-panel--teacher {

  flex-grow: 1.08;

}



body[data-focus="artist"] .hybrid-hero:not([data-open="artist"]):not([data-open="teacher"]) .hybrid-panel--teacher,

body[data-focus="teacher"] .hybrid-hero:not([data-open="artist"]):not([data-open="teacher"]) .hybrid-panel--artist {

  flex-grow: .92;

  filter: brightness(.76) saturate(.7);

}



@media (hover: hover) and (min-width: 901px) {

  .hybrid-hero:not([data-open="artist"]):not([data-open="teacher"]) .hybrid-panel:hover {

    flex-grow: 1.08;

  }



  .hybrid-hero:not([data-open="artist"]):not([data-open="teacher"]):has(.hybrid-panel:hover) .hybrid-panel:not(:hover) {

    flex-grow: .92;

    filter: brightness(.78) saturate(.76);

  }

}



/* A világosabb, kék tanári karakter finomhangolása az alsó szakaszokon */

.teacher-section {

  background:

    radial-gradient(circle at 82% 16%, rgba(90, 168, 208, .22), transparent 30%),

    linear-gradient(145deg, #edf5f8, #dceaf1 88%);

}



.teacher-orbit {

  border-color: rgba(47, 120, 157, .13);

}



.contact-side--teacher {

  background:

    radial-gradient(circle at 65% 42%, rgba(90, 168, 208, .34), transparent 34%),

    linear-gradient(145deg, #dbeaf1, #f0f6f8);

}



@keyframes hybridNoteFloat {

  0% { opacity: 0; transform: translateY(0) rotate(0deg); }

  12% { opacity: 1; }

  86% { opacity: 1; }

  100% { opacity: 0; transform: translateY(-115svh) rotate(320deg); }

}



@keyframes contactDialogIn {

  from { opacity: 0; transform: translateY(20px) scale(.96); }

  to { opacity: 1; transform: none; }

}



@media (max-width: 1180px) {

  .hybrid-panel__details {

    width: calc(100% - 48px);

    gap: 26px 36px;

    padding: 42px;

  }



  .hybrid-details__heading h2 {

    font-size: clamp(2.9rem, 5.8vw, 5.2rem);

  }



  .hybrid-details__grid article {

    grid-template-columns: 52px 1fr;

    padding: 18px;

  }



  .hybrid-details__grid article > span {

    width: 46px;

    height: 46px;

  }

}



@media (max-width: 900px) {

  .quick-social {

    display: none;

  }



  .floating-contact {

    right: 15px;

    bottom: 15px;

    min-height: 46px;

    padding: 0 17px;

    font-size: .7rem;

  }



  .hybrid-hero {

    min-height: 720px;

    flex-direction: column;

  }



  .hybrid-panel {

    flex-basis: 50%;

    flex-grow: 1;

  }



  .hybrid-panel__intro {

    width: calc(100% - 32px);

    grid-template-columns: auto 1fr auto;

    grid-template-areas:

      "avatar number button"

      "avatar role button"

      "avatar tagline button";

    justify-items: start;

    column-gap: 18px;

    margin-top: 38px;

    text-align: left;

  }



  .hybrid-panel__number {

    grid-area: number;

    align-self: end;

    margin: 0 0 2px;

    font-size: .58rem;

  }



  .hybrid-avatar {

    grid-area: avatar;

    width: 104px;

    margin: 0;

  }



  .hybrid-panel__kicker {

    display: none;

  }



  .hybrid-panel__intro h2 {

    grid-area: role;

    margin: 0;

    font-size: clamp(2.45rem, 9vw, 4rem);

  }



  .hybrid-panel__tagline {

    grid-area: tagline;

    margin: 3px 0 0;

    font-size: .58rem;

  }



  .hybrid-panel__open {

    grid-area: button;

    align-self: center;

    min-height: 44px;

    padding: 0 16px;

    font-size: .66rem;

  }



  .hybrid-hero__title {

    display: none;

  }



  .hybrid-hero__seam {

    width: 48px;

    height: 48px;

  }



  .hybrid-hero__seam-logo {

    width: 33px;

    height: 29px;

  }



  .hybrid-hero__seam::before,

  .hybrid-hero__seam::after {

    width: 44vw;

    height: 1px;

  }



  .hybrid-hero__seam::before {

    right: 100%;

    bottom: auto;

    left: auto;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4));

    transform: none;

  }



  .hybrid-hero__seam::after {

    top: auto;

    right: auto;

    left: 100%;

    background: linear-gradient(90deg, rgba(255, 255, 255, .4), transparent);

    transform: none;

  }



  .hybrid-hero__bridge,

  .hybrid-scroll-cue {

    display: none;

  }



  .hybrid-hero[data-open="artist"] .hybrid-panel--artist,

  .hybrid-hero[data-open="teacher"] .hybrid-panel--teacher {

    flex-basis: 100%;

    min-height: 100%;

  }



  .hybrid-hero[data-open="artist"] .hybrid-panel--teacher,

  .hybrid-hero[data-open="teacher"] .hybrid-panel--artist {

    display: none;

  }



  .hybrid-panel__details {

    top: var(--header-h);

    bottom: 0;

    left: 0;

    display: block;

    width: 100%;

    max-height: none;

    padding: 38px 22px 80px;

    border: 0;

    border-radius: 0;

    transform: translateY(20px);

  }



  .hybrid-hero[data-open="artist"] .hybrid-panel--artist .hybrid-panel__details,

  .hybrid-hero[data-open="teacher"] .hybrid-panel--teacher .hybrid-panel__details {

    transform: none;

  }



  .hybrid-panel__close {

    top: 0;

    float: right;

    margin: -14px -4px 6px 18px;

  }



  .hybrid-details__heading h2 {

    font-size: clamp(2.7rem, 11vw, 4.5rem);

  }



  .hybrid-details__grid {

    clear: both;

    margin-top: 30px;

  }



  .hybrid-details__actions {

    margin-top: 28px;

  }



  .hybrid-details__actions .button {

    width: 100%;

  }



  .contact-dialog__choices {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 620px) {

  .hybrid-hero {

    min-height: 680px;

  }



  .hybrid-panel__intro {

    grid-template-columns: 88px minmax(0, 1fr);

    grid-template-areas:

      "avatar number"

      "avatar role"

      "avatar tagline"

      "button button";

    row-gap: 0;

    margin-top: 50px;

  }



  .hybrid-avatar {

    width: 82px;

  }



  .hybrid-panel__open {

    justify-self: start;

    margin-top: 13px;

  }



  .hybrid-panel__intro h2 {

    font-size: 2.65rem;

  }



  .hybrid-panel__tagline {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }



  .hybrid-details__grid article {

    grid-template-columns: 46px 1fr;

    gap: 3px 14px;

    padding: 17px;

  }



  .hybrid-details__grid article > span {

    width: 42px;

    height: 42px;

  }



  .contact-dialog {

    padding: 25px 20px 30px;

    border-radius: 22px;

  }



  .contact-choice {

    min-height: 136px;

    padding: 22px;

  }



  .contact-choice strong {

    font-size: 1.55rem;

  }

}



@media (prefers-reduced-motion: reduce) {

  .hybrid-hero__ambient,

  .hybrid-hero__ambient span {

    display: none;

  }



  .hybrid-panel__backdrop img,

  .hybrid-panel,

  .hybrid-panel__intro,

  .hybrid-panel__details,

  .hybrid-hero__title,

  .hybrid-hero__seam,

  .hybrid-hero__bridge {

    animation: none !important;

    transition: none !important;

  }

}



/* Megnyitott szerepnézetben a lebegő vezérlők ne takarják a tartalmat. */

.quick-social,

.floating-contact,

.role-switch {

  transition: opacity .25s ease, transform .25s var(--ease), visibility .25s ease;

}



body.role-open .quick-social,

body.role-open .floating-contact,

body.role-open .role-switch {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



body.role-open .floating-contact {

  transform: translateY(12px);

}



/* ==========================================================================

   KAPCSOLATFELVÉTELI ŰRLAP – két világ, egy közvetlen üzenetküldés

   ========================================================================== */

.contact-dialog {

  width: min(1080px, calc(100% - 32px));

  max-height: calc(100svh - 32px);

  padding: 0;

  overflow: hidden;

}



.contact-dialog__close {

  position: absolute;

  z-index: 12;

  top: 18px;

  right: 18px;

  float: none;

  margin: 0;

}



.contact-dialog__layout {

  display: grid;

  grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr);

  min-height: min(680px, calc(100svh - 32px));

  max-height: calc(100svh - 32px);

}



.contact-dialog__intro,

.contact-form-panel {

  min-width: 0;

  overflow-y: auto;

  overscroll-behavior: contain;

}



.contact-dialog__intro {

  padding: clamp(38px, 5vw, 62px);

  padding-right: clamp(34px, 4vw, 48px);

  background:

    radial-gradient(circle at 7% 0%, rgba(216, 164, 95, .22), transparent 36%),

    linear-gradient(155deg, rgba(255, 250, 244, .99), rgba(249, 240, 231, .97));

}



.contact-dialog__intro .eyebrow {

  margin-right: 54px;

}



.contact-dialog h2 {

  max-width: 560px;

  margin: 0 0 18px;

  font-size: clamp(2.55rem, 4.8vw, 4.8rem);

  line-height: .98;

}



.contact-dialog__lead {

  max-width: 540px;

  margin: 0 0 28px;

}



.contact-dialog__choices {

  grid-template-columns: 1fr;

  gap: 12px;

  margin-bottom: 24px;

}



button.contact-choice {

  width: 100%;

  min-height: 118px;

  border: 0;

  cursor: pointer;

  font: inherit;

  text-align: left;

}



.contact-choice strong {

  max-width: none;

  font-size: clamp(1.45rem, 2vw, 1.8rem);

}



.contact-choice.is-selected {

  outline: 3px solid rgba(255, 255, 255, .82);

  outline-offset: -7px;

  transform: translateY(-3px);

}



.contact-dialog__links {

  display: flex;

  flex-wrap: wrap;

  gap: 13px 20px;

  align-items: center;

}



.contact-form-panel {

  position: relative;

  padding: clamp(42px, 5vw, 62px);

  color: var(--teacher-ink);

  background:

    radial-gradient(circle at 100% 0%, rgba(90, 168, 208, .2), transparent 34%),

    linear-gradient(160deg, #f4f9fc 0%, #edf4f7 52%, #f8f4ef 100%);

  border-left: 1px solid rgba(23, 54, 74, .11);

}



.contact-form-panel::before {

  position: absolute;

  inset: 0;

  pointer-events: none;

  content: "";

  opacity: .24;

  background-image:

    linear-gradient(rgba(23, 54, 74, .07) 1px, transparent 1px),

    linear-gradient(90deg, rgba(23, 54, 74, .07) 1px, transparent 1px);

  background-size: 44px 44px;

  mask-image: linear-gradient(to bottom, #000, transparent 76%);

}



.contact-form-panel > * {

  position: relative;

  z-index: 1;

}



.contact-form-panel__kicker {

  margin: 0 52px 8px 0;

  color: var(--wine);

  font-size: .69rem;

  font-weight: 800;

  letter-spacing: .16em;

  text-transform: uppercase;

}



.contact-form-panel h3 {

  margin: 0 0 27px;

  color: var(--teacher-ink);

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(2.2rem, 4vw, 3.8rem);

  font-weight: 500;

  line-height: 1;

}



.contact-form-panel__lead {

  margin: 0 0 27px;

  color: var(--teacher-muted);

  font-size: .94rem;

}



.contact-form-panel__lead strong {

  color: var(--wine);

  font-weight: 700;

}



.contact-form {

  display: grid;

  gap: 17px;

}



.contact-form__row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

}



.contact-form__field {

  display: grid;

  gap: 7px;

  color: var(--teacher-ink);

  font-size: .78rem;

  font-weight: 750;

  letter-spacing: .02em;

}



.contact-form__field > span b {

  color: var(--wine);

}



.contact-form input,

.contact-form select,

.contact-form textarea {

  width: 100%;

  color: var(--teacher-ink);

  background: rgba(255, 255, 255, .82);

  border: 1px solid rgba(23, 54, 74, .18);

  border-radius: 13px;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);

  font: inherit;

  font-size: .92rem;

  font-weight: 500;

  outline: none;

  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;

}



.contact-form input,

.contact-form select {

  min-height: 49px;

  padding: 0 14px;

}



.contact-form textarea {

  min-height: 128px;

  padding: 13px 14px;

  resize: vertical;

  line-height: 1.55;

}



.contact-form input::placeholder,

.contact-form textarea::placeholder {

  color: rgba(68, 36, 51, .48);

}



.contact-form input:focus,

.contact-form select:focus,

.contact-form textarea:focus {

  background: #fff;

  border-color: rgba(90, 168, 208, .92);

  box-shadow: 0 0 0 4px rgba(90, 168, 208, .14);

}



.contact-form__honeypot {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  padding: 0 !important;

  overflow: hidden !important;

  clip: rect(0 0 0 0) !important;

  white-space: nowrap !important;

  border: 0 !important;

}



.contact-form__consent {

  display: grid;

  grid-template-columns: 18px 1fr;

  gap: 10px;

  align-items: start;

  color: var(--teacher-muted);

  cursor: pointer;

  font-size: .72rem;

  line-height: 1.45;

}



.contact-form__consent input {

  width: 18px;

  min-height: 18px;

  height: 18px;

  margin-top: 1px;

  padding: 0;

  accent-color: var(--wine);

}



.contact-form__submit {

  display: inline-flex;

  width: 100%;

  min-height: 52px;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 0 20px;

  color: #fff;

  background: linear-gradient(100deg, var(--wine), #315f78);

  border: 0;

  border-radius: 14px;

  box-shadow: 0 16px 34px rgba(64, 75, 96, .2);

  cursor: pointer;

  font-size: .78rem;

  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase;

  transition: transform .22s var(--ease), box-shadow .22s ease, opacity .22s ease;

}



.contact-form__submit:hover,

.contact-form__submit:focus-visible {

  box-shadow: 0 20px 42px rgba(64, 75, 96, .3);

  transform: translateY(-2px);

}



.contact-form__submit:disabled {

  cursor: wait;

  opacity: .67;

  transform: none;

}



.contact-form__submit strong {

  font-size: 1.15rem;

}



.contact-form__status {

  min-height: 20px;

  margin: -5px 0 0;

  color: var(--teacher-muted);

  font-size: .76rem;

  font-weight: 650;

  line-height: 1.45;

}



.contact-form__status.is-sending {

  color: #315f78;

}



.contact-form__status.is-success {

  color: #23704c;

}



.contact-form__status.is-error {

  color: #a43645;

}



.contact-form__status a {

  color: inherit;

  text-decoration: underline;

  text-underline-offset: 3px;

}



.contact-form-panel__note {

  margin: 17px 0 0;

  color: var(--teacher-muted);

  font-size: .67rem;

  line-height: 1.5;

}



.contact-actions .button {

  cursor: pointer;

}



@media (max-width: 920px) {

  .contact-dialog {

    overflow: auto;

  }



  .contact-dialog__close {

    position: sticky;

    top: 12px;

    right: auto;

    float: right;

    margin: 12px 12px -56px 0;

  }



  .contact-dialog__layout {

    display: block;

    min-height: 0;

    max-height: none;

  }



  .contact-dialog__intro,

  .contact-form-panel {

    overflow: visible;

  }



  .contact-dialog__intro {

    padding: 44px 34px 38px;

  }



  .contact-form-panel {

    padding: 40px 34px 46px;

    border-top: 1px solid rgba(23, 54, 74, .11);

    border-left: 0;

  }



  .contact-dialog__choices {

    grid-template-columns: 1fr 1fr;

  }

}



@media (max-width: 620px) {

  .contact-dialog {

    width: calc(100% - 18px);

    max-height: calc(100svh - 18px);

    padding: 0;

    border-radius: 20px;

  }



  .contact-dialog__close {

    top: 12px;

    right: 12px;

  }



  .contact-dialog__intro,

  .contact-form-panel {

    padding-right: 20px;

    padding-left: 20px;

  }



  .contact-dialog__intro {

    padding-top: 31px;

  }



  .contact-dialog h2 {

    font-size: clamp(2.35rem, 12vw, 3.5rem);

  }



  .contact-dialog__choices,

  .contact-form__row {

    grid-template-columns: 1fr;

  }



  button.contact-choice {

    min-height: 106px;

  }



  .contact-form-panel {

    padding-top: 34px;

    padding-bottom: 38px;

  }

}



/* ================================================================

   FOTÓMENTES ZENEI IKONRENDSZER

   A teljes oldal személyes fényképek nélkül, saját SVG illusztrációkkal.

   ================================================================ */

.icon-sprite {

  position: absolute;

  width: 0;

  height: 0;

  overflow: hidden;

  pointer-events: none;

}



/* Nyitóképernyő: nagy, atmoszférikus hangszerikonok */

.hybrid-panel__backdrop {

  display: grid;

  place-items: center;

  overflow: hidden;

}



.hybrid-panel__backdrop::before,

.hybrid-panel__backdrop::after {

  position: absolute;

  content: "";

  border: 1px solid currentColor;

  border-radius: 50%;

  opacity: .12;

}



.hybrid-panel__backdrop::before {

  width: min(72vw, 760px);

  aspect-ratio: 1;

}



.hybrid-panel__backdrop::after {

  width: min(50vw, 520px);

  aspect-ratio: 1;

}



.hybrid-panel__backdrop--artist {

  color: var(--gold-light);

  background:

    radial-gradient(circle at 22% 45%, rgba(216, 164, 95, .22), transparent 29%),

    repeating-radial-gradient(circle at 32% 52%, transparent 0 36px, rgba(216, 164, 95, .045) 37px 38px),

    linear-gradient(135deg, #0a0d16 0%, #14101a 52%, #080a10 100%);

}



.hybrid-panel__backdrop--teacher {

  color: #bfe9ff;

  background:

    radial-gradient(circle at 78% 45%, rgba(90, 168, 208, .28), transparent 31%),

    repeating-linear-gradient(to bottom, transparent 0 34px, rgba(191, 233, 255, .045) 35px 36px),

    linear-gradient(225deg, #17435f 0%, #102c42 52%, #09131f 100%);

}



.hybrid-panel__backdrop-icon {

  position: relative;

  z-index: 1;

  width: min(66vw, 660px);

  opacity: .16;

  filter: drop-shadow(0 35px 75px rgba(0, 0, 0, .45));

  transition: opacity .65s ease, transform 1.1s var(--ease), filter .65s ease;

}



.hybrid-panel--artist .hybrid-panel__backdrop-icon {

  transform: translate(-8%, 8%) rotate(-7deg) scale(1.02);

}



.hybrid-panel--teacher .hybrid-panel__backdrop-icon {

  transform: translate(8%, 7%) rotate(6deg) scale(1.02);

}



.hybrid-panel__note {

  position: absolute;

  z-index: 2;

  color: currentColor;

  font-family: "Playfair Display", Georgia, serif;

  opacity: .17;

  text-shadow: 0 14px 35px rgba(0, 0, 0, .45);

  animation: iconNoteDrift 6s ease-in-out infinite alternate;

}



.hybrid-panel__note--one { top: 20%; left: 15%; font-size: clamp(2.8rem, 7vw, 6.4rem); }

.hybrid-panel__note--two { right: 12%; bottom: 19%; font-size: clamp(3.2rem, 8vw, 7.4rem); animation-delay: -2.5s; }

.hybrid-panel__note--three { top: 33%; right: 19%; font-size: clamp(2rem, 5vw, 4.6rem); animation-delay: -4s; }



.hybrid-panel:hover .hybrid-panel__backdrop-icon {

  opacity: .24;

  filter: drop-shadow(0 45px 85px rgba(0, 0, 0, .52));

}



.hybrid-panel--artist:hover .hybrid-panel__backdrop-icon {

  transform: translate(-5%, 5%) rotate(-3deg) scale(1.09);

}



.hybrid-panel--teacher:hover .hybrid-panel__backdrop-icon {

  transform: translate(5%, 4%) rotate(3deg) scale(1.09);

}



.hybrid-avatar {

  position: relative;

  display: grid;

  place-items: center;

  overflow: visible;

  background: rgba(8, 13, 22, .72);

  backdrop-filter: blur(14px);

}



.hybrid-avatar::before {

  position: absolute;

  inset: 9px;

  content: "";

  border: 1px dashed currentColor;

  border-radius: 50%;

  opacity: .28;

  animation: rotate 24s linear infinite;

}



.hybrid-avatar::after {

  position: absolute;

  inset: -10px;

  content: "";

  border: 1px solid currentColor;

  border-radius: 50%;

  opacity: .12;

}



.hybrid-avatar svg {

  position: relative;

  z-index: 1;

  width: 72%;

  height: 72%;

  overflow: visible;

  color: currentColor;

  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));

}



.hybrid-avatar--artist {

  color: var(--gold-light);

  background: radial-gradient(circle at 35% 25%, rgba(216, 164, 95, .25), rgba(8, 13, 22, .82) 60%);

}



.hybrid-avatar--teacher {

  color: #bfe9ff;

  background: radial-gradient(circle at 65% 25%, rgba(90, 168, 208, .32), rgba(7, 25, 38, .84) 64%);

}



.hybrid-hero[data-open="artist"] .hybrid-panel--artist .hybrid-panel__backdrop-icon,

.hybrid-hero[data-open="teacher"] .hybrid-panel--teacher .hybrid-panel__backdrop-icon {

  opacity: .22;

  filter: blur(2px) drop-shadow(0 45px 85px rgba(0, 0, 0, .52));

  transform: scale(1.16) rotate(0deg);

}



/* Művészi fejezet: ikonikus harmonika-kompozíció */

.artist-visual__main {

  display: grid;

  place-items: center;

  background:

    radial-gradient(circle at 50% 44%, rgba(216, 164, 95, .22), transparent 35%),

    linear-gradient(145deg, #182231, #0a0e17 68%);

}



.artist-visual__main::before {

  position: absolute;

  inset: 0;

  content: "";

  background:

    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);

  background-size: 34px 34px;

  mask-image: radial-gradient(circle at 50% 48%, #000 15%, transparent 72%);

}



.artist-visual__instrument {

  position: absolute;

  z-index: 1;

  inset: 12% 10% 20%;

  display: grid;

  place-items: center;

  color: var(--gold-light);

}



.artist-visual__instrument > svg {

  position: relative;

  z-index: 2;

  width: min(88%, 520px);

  overflow: visible;

  filter: drop-shadow(0 30px 42px rgba(0, 0, 0, .48));

  animation: accordionBreathe 5.2s ease-in-out infinite;

}



.artist-visual__ring {

  position: absolute;

  border: 1px solid rgba(216, 164, 95, .2);

  border-radius: 50%;

}



.artist-visual__ring--one { width: 82%; aspect-ratio: 1; animation: rotate 30s linear infinite; }

.artist-visual__ring--two { width: 58%; aspect-ratio: 1; border-style: dashed; animation: rotate 22s linear infinite reverse; }



.artist-visual__music {

  position: absolute;

  z-index: 3;

  color: var(--gold-light);

  font-family: "Playfair Display", Georgia, serif;

  font-style: normal;

  opacity: .6;

  animation: iconNoteDrift 4.6s ease-in-out infinite alternate;

}



.artist-visual__music--one { top: 10%; left: 12%; font-size: 4rem; }

.artist-visual__music--two { top: 20%; right: 8%; font-size: 5.4rem; animation-delay: -2s; }

.artist-visual__music--three { right: 22%; bottom: 5%; font-size: 3rem; animation-delay: -3.5s; }



.artist-visual__caption { z-index: 4; }

.artist-visual__main::after { z-index: 3; pointer-events: none; }



/* Videók: külső bélyegképek helyett zenei ikonlapok */

.video-card__icon-scene {

  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  overflow: hidden;

  color: var(--gold-light);

  background:

    radial-gradient(circle at 22% 20%, rgba(216, 164, 95, .24), transparent 30%),

    radial-gradient(circle at 82% 78%, rgba(90, 168, 208, .17), transparent 34%),

    linear-gradient(145deg, #1a2231, #090d15 74%);

}



.video-card__icon-scene::before,

.video-card__icon-scene::after {

  position: absolute;

  content: "";

  border: 1px solid currentColor;

  border-radius: 50%;

  opacity: .12;

}



.video-card__icon-scene::before { width: 78%; aspect-ratio: 1; }

.video-card__icon-scene::after { width: 54%; aspect-ratio: 1; border-style: dashed; }



.video-card__icon-scene svg {

  position: relative;

  z-index: 1;

  width: min(48%, 320px);

  min-width: 150px;

  overflow: visible;

  opacity: .72;

  filter: drop-shadow(0 24px 35px rgba(0, 0, 0, .48));

  transition: transform .65s var(--ease), opacity .35s ease;

}



.video-card--large .video-card__icon-scene svg {

  width: min(64%, 470px);

}



.video-card__icon-scene--score { color: #bfe9ff; }

.video-card__icon-scene--wave { color: #e8b8cc; }



.video-card__icon-scene i {

  position: absolute;

  color: currentColor;

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(2.5rem, 6vw, 6rem);

  font-style: normal;

  opacity: .14;

}



.video-card__icon-scene i:nth-of-type(1) { top: 10%; left: 10%; transform: rotate(-12deg); }

.video-card__icon-scene i:nth-of-type(2) { right: 12%; bottom: 15%; transform: rotate(12deg); }

.video-card__icon-scene i:nth-of-type(3) { top: 18%; right: 20%; font-size: 3rem; }



.video-card:hover .video-card__icon-scene svg {

  opacity: .9;

  transform: scale(1.06) rotate(-2deg);

}



.video-card:hover .video-card__icon-scene::after {

  animation: rotate 14s linear infinite;

}



/* Közös történet: a két szerepet összekötő ikonpár */

.story-image {

  display: grid;

  place-items: center;

  background:

    radial-gradient(circle at 24% 35%, rgba(216, 164, 95, .3), transparent 34%),

    radial-gradient(circle at 76% 62%, rgba(90, 168, 208, .32), transparent 36%),

    linear-gradient(145deg, #182231, #dceaf1 52%, #eef5f8);

}



.story-image::before {

  position: absolute;

  inset: 0;

  content: "";

  background:

    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);

  background-size: 38px 38px;

  mask-image: linear-gradient(180deg, #000, transparent 86%);

  opacity: .3;

}



.story-image__icons {

  position: relative;

  z-index: 1;

  display: grid;

  width: min(88%, 560px);

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  gap: 18px;

}



.story-image__role {

  display: grid;

  justify-items: center;

  gap: 18px;

  padding: 34px 18px;

  border: 1px solid rgba(255, 255, 255, .38);

  border-radius: 999px 999px 34px 34px;

  box-shadow: 0 28px 60px rgba(27, 37, 53, .18);

  backdrop-filter: blur(14px);

}



.story-image__role svg {

  width: 86%;

  max-width: 180px;

  overflow: visible;

  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .23));

}



.story-image__role span {

  font-size: .66rem;

  font-weight: 800;

  letter-spacing: .16em;

  text-transform: uppercase;

}



.story-image__role--artist {

  color: var(--gold-light);

  background: rgba(10, 14, 23, .78);

}



.story-image__role--teacher {

  color: var(--teacher-blue-deep);

  background: rgba(244, 250, 252, .76);

  border-color: rgba(23, 54, 74, .16);

}



.story-image__connector {

  display: grid;

  justify-items: center;

  gap: 9px;

  color: var(--teacher-ink);

}



.story-image__connector i {

  width: 1px;

  height: 70px;

  background: linear-gradient(transparent, currentColor, transparent);

  opacity: .35;

}



.story-image__connector strong {

  display: grid;

  width: 46px;

  height: 46px;

  place-items: center;

  color: var(--cream);

  background: linear-gradient(135deg, var(--gold), var(--teacher-blue-deep));

  border-radius: 50%;

  box-shadow: 0 12px 30px rgba(27, 37, 53, .22);

  font-family: "Playfair Display", Georgia, serif;

  font-size: 1.25rem;

}



.story-image__label { z-index: 3; }



@keyframes iconNoteDrift {

  from { transform: translate3d(0, -7px, 0) rotate(-5deg); }

  to { transform: translate3d(8px, 9px, 0) rotate(6deg); }

}



@keyframes accordionBreathe {

  0%, 100% { transform: scale(1) rotate(-1deg); }

  50% { transform: scale(1.035) rotate(1deg); }

}



@media (max-width: 900px) {

  .hybrid-panel__backdrop-icon { width: min(78vw, 510px); }

  .hybrid-panel--artist .hybrid-panel__backdrop-icon { transform: translate(-20%, 4%) rotate(-7deg); }

  .hybrid-panel--teacher .hybrid-panel__backdrop-icon { transform: translate(20%, 4%) rotate(6deg); }

  .artist-visual__instrument { inset: 11% 7% 22%; }

  .story-image__icons { width: min(88%, 500px); }

}



@media (max-width: 620px) {

  .hybrid-panel__backdrop-icon { width: 94vw; opacity: .11; }

  .hybrid-panel__note--three { display: none; }

  .artist-visual__music--two { font-size: 3.8rem; }

  .story-image__icons { width: 86%; grid-template-columns: 1fr; gap: 14px; }

  .story-image__role { width: min(250px, 100%); justify-self: center; padding: 22px 16px; border-radius: 28px; }

  .story-image__role svg { width: 54%; }

  .story-image__connector { grid-template-columns: 1fr auto 1fr; align-items: center; width: 70%; justify-self: center; }

  .story-image__connector i { width: 100%; height: 1px; }

}



@media (prefers-reduced-motion: reduce) {

  .hybrid-panel__backdrop-icon,

  .hybrid-panel__note,

  .hybrid-avatar::before,

  .artist-visual__instrument > svg,

  .artist-visual__ring,

  .artist-visual__music,

  .video-card__icon-scene::after {

    animation: none !important;

    transition: none !important;

  }

}





/* ================================================================

   HARMONIKÁS FOTÓILLUSZTRÁCIÓK + LEBEGŐ HANGJEGYEK

   Személyes portrék nélkül, a hangszer és a zenei hangulat fókuszával.

   ================================================================ */



/* A nyitóképernyő ikonikus hátterei helyett valódi harmonikás képek */

.hybrid-panel__backdrop {

  display: block;

  color: #fff;

  background: #080b12;

}



.hybrid-panel__backdrop::before,

.hybrid-panel__backdrop::after {

  display: none;

}



.hybrid-panel__backdrop img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: .76;

  filter: saturate(.96) contrast(1.06) brightness(.84);

  transform: scale(1.045);

  transition: transform 7s ease, opacity .65s ease, filter .65s ease;

}



.hybrid-panel--artist .hybrid-panel__backdrop img {

  object-position: 68% 50%;

}



.hybrid-panel--teacher .hybrid-panel__backdrop img {

  object-position: 69% 50%;

  filter: saturate(.9) contrast(1.04) brightness(.72);

}



.hybrid-panel:hover .hybrid-panel__backdrop img {

  opacity: .88;

  filter: saturate(1.04) contrast(1.08) brightness(.9);

  transform: scale(1.085);

}



.hybrid-panel--teacher:hover .hybrid-panel__backdrop img {

  filter: saturate(.98) contrast(1.05) brightness(.8);

}



.hybrid-panel--artist .hybrid-panel__shade {

  background:

    linear-gradient(180deg, rgba(5, 7, 12, .2), rgba(5, 7, 12, .72)),

    linear-gradient(100deg, rgba(5, 7, 12, .18), rgba(5, 7, 12, .7));

}



.hybrid-panel--teacher .hybrid-panel__shade {

  background:

    linear-gradient(180deg, rgba(4, 18, 28, .38), rgba(4, 18, 28, .76)),

    linear-gradient(255deg, rgba(5, 22, 34, .26), rgba(5, 14, 24, .72));

}



/* Kör alakú hangszerfotók a szerepválasztóban */

.hybrid-avatar {

  padding: 0;

  overflow: hidden;

  isolation: isolate;

  background: rgba(7, 11, 18, .55);

}



.hybrid-avatar::before,

.hybrid-avatar::after {

  z-index: 3;

  pointer-events: none;

}



.hybrid-avatar img {

  position: absolute;

  z-index: 1;

  inset: 6px;

  width: calc(100% - 12px);

  height: calc(100% - 12px);

  object-fit: cover;

  border-radius: 50%;

  transition: transform .65s var(--ease), filter .45s ease;

}



.hybrid-avatar--artist img {

  object-position: 68% center;

  filter: contrast(1.06) brightness(.92) saturate(1.02);

}



.hybrid-avatar--teacher img {

  object-position: 70% center;

  filter: contrast(1.03) brightness(.94) saturate(.9);

}



.hybrid-panel:hover .hybrid-avatar img {

  transform: scale(1.08);

}



/* Látványosabb, de továbbra is finom lebegő hangjegyek */

.hybrid-hero__ambient span {

  color: rgba(255, 255, 255, .13);

  text-shadow: 0 10px 26px rgba(0, 0, 0, .34);

}



.hybrid-hero__ambient span:nth-child(6) { left: 18%; animation-delay: -11s; animation-duration: 21s; font-size: 2.8rem; }

.hybrid-hero__ambient span:nth-child(7) { left: 42%; animation-delay: -6s; animation-duration: 17s; font-size: 3.3rem; }

.hybrid-hero__ambient span:nth-child(8) { left: 67%; animation-delay: -14s; animation-duration: 23s; font-size: 2.4rem; }

.hybrid-hero__ambient span:nth-child(9) { left: 86%; animation-delay: -2s; animation-duration: 16s; font-size: 3.7rem; }



.hybrid-panel__note {

  opacity: .3;

  text-shadow: 0 16px 38px rgba(0, 0, 0, .55);

}



.panel-note-stream,

.frame-notes {

  position: absolute;

  inset: 0;

  overflow: hidden;

  pointer-events: none;

}



.panel-note-stream {

  z-index: 3;

}



.panel-note-stream span {

  position: absolute;

  bottom: -14%;

  left: 8%;

  color: rgba(255, 255, 255, .35);

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(1.8rem, 3.8vw, 4.2rem);

  line-height: 1;

  opacity: 0;

  text-shadow: 0 12px 30px rgba(0, 0, 0, .42);

  animation: musicNoteRise 12s linear infinite;

}



.panel-note-stream--artist span {

  color: rgba(244, 199, 128, .5);

}



.panel-note-stream--teacher span {

  color: rgba(211, 241, 255, .48);

}



.panel-note-stream span:nth-child(1) { left: 7%; animation-delay: -2s; animation-duration: 12s; }

.panel-note-stream span:nth-child(2) { left: 22%; animation-delay: -8s; animation-duration: 17s; font-size: clamp(2.5rem, 5vw, 5.2rem); }

.panel-note-stream span:nth-child(3) { left: 44%; animation-delay: -4s; animation-duration: 14s; }

.panel-note-stream span:nth-child(4) { left: 63%; animation-delay: -11s; animation-duration: 19s; font-size: clamp(2rem, 4.5vw, 4.8rem); }

.panel-note-stream span:nth-child(5) { left: 78%; animation-delay: -6s; animation-duration: 15s; }

.panel-note-stream span:nth-child(6) { left: 91%; animation-delay: -13s; animation-duration: 21s; font-size: clamp(2.3rem, 4.8vw, 5rem); }



@keyframes musicNoteRise {

  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-12deg) scale(.78); }

  12% { opacity: .74; }

  48% { transform: translate3d(18px, -52vh, 0) rotate(7deg) scale(1); }

  86% { opacity: .55; }

  100% { opacity: 0; transform: translate3d(-10px, -116vh, 0) rotate(26deg) scale(.84); }

}



/* Képes kettősség-kártyák */

.identity-card {

  min-height: 540px;

}



.identity-card__number {

  z-index: 5;

  text-shadow: 0 6px 18px rgba(0, 0, 0, .22);

}



.identity-card__media {

  position: relative;

  height: 205px;

  margin: 0 0 38px;

  overflow: hidden;

  background: #151a25;

  border: 1px solid rgba(255, 255, 255, .16);

  border-radius: 26px;

  box-shadow: 0 22px 52px rgba(0, 0, 0, .22);

}



.identity-card--teacher .identity-card__media {

  background: #dceaf1;

  border-color: rgba(68, 36, 51, .11);

  box-shadow: 0 22px 52px rgba(68, 36, 51, .11);

}



.identity-card__media::after {

  position: absolute;

  z-index: 1;

  inset: 0;

  content: "";

  background: linear-gradient(180deg, rgba(5, 8, 14, .02), rgba(5, 8, 14, .42));

}



.identity-card--teacher .identity-card__media::after {

  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(24,54,72,.24));

}



.identity-card__media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 67% center;

  transition: transform .72s var(--ease), filter .45s ease;

}



.identity-card:hover .identity-card__media img {

  filter: saturate(1.08) contrast(1.04);

  transform: scale(1.07);

}



/* Általános, képek fölött lebegő hangjegyek */

.frame-notes {

  z-index: 2;

}



.frame-notes span {

  position: absolute;

  color: rgba(255, 255, 255, .72);

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(1.75rem, 3.8vw, 4.2rem);

  line-height: 1;

  opacity: .66;

  text-shadow: 0 10px 25px rgba(0, 0, 0, .42);

  animation: frameNoteDrift 5.8s ease-in-out infinite alternate;

}



.frame-notes--gold span { color: rgba(246, 207, 148, .78); }

.frame-notes--blue span { color: rgba(208, 240, 255, .82); }

.frame-notes--mixed span:nth-child(odd) { color: rgba(246, 207, 148, .82); }

.frame-notes--mixed span:nth-child(even) { color: rgba(195, 233, 250, .82); }



.frame-notes span:nth-child(1) { top: 12%; left: 9%; animation-delay: -1.2s; }

.frame-notes span:nth-child(2) { top: 28%; right: 10%; animation-delay: -3.8s; font-size: clamp(2.2rem, 4.8vw, 5rem); }

.frame-notes span:nth-child(3) { right: 24%; bottom: 12%; animation-delay: -2.4s; }

.frame-notes span:nth-child(4) { left: 22%; bottom: 15%; animation-delay: -4.6s; font-size: clamp(2rem, 4.2vw, 4.7rem); }

.frame-notes span:nth-child(5) { top: 46%; left: 42%; animation-delay: -5.4s; font-size: clamp(1.5rem, 3vw, 3.4rem); }



.frame-notes--large span {

  opacity: .72;

}



@keyframes frameNoteDrift {

  0% { transform: translate3d(-5px, 9px, 0) rotate(-9deg) scale(.9); opacity: .36; }

  50% { opacity: .84; }

  100% { transform: translate3d(13px, -14px, 0) rotate(8deg) scale(1.06); opacity: .56; }

}



/* Művészeti szakasz: a rajz helyett színpadi harmonikakép */

.artist-visual__main {

  display: block;

  background: #0d111a;

}



.artist-visual__main::before {

  display: none;

}



.artist-visual__main::after {

  z-index: 1;

  background:

    linear-gradient(180deg, rgba(4, 6, 12, .02) 28%, rgba(4, 6, 12, .84) 100%),

    linear-gradient(90deg, rgba(4, 6, 12, .2), transparent 55%);

}



.artist-visual__main > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 67% center;

  filter: contrast(1.05) saturate(1.02);

  transform: scale(1.02);

  transition: transform 1.1s var(--ease), filter .5s ease;

}



.artist-visual:hover .artist-visual__main > img {

  filter: contrast(1.07) saturate(1.08);

  transform: scale(1.07);

}



.artist-visual__main .frame-notes {

  z-index: 2;

}



.artist-visual__caption {

  z-index: 3;

}



/* Tanári szakasz: külön fotós tanulási hangulat */

.teacher-content-grid {

  display: grid;

  grid-template-columns: minmax(360px, .88fr) minmax(0, 1.12fr);

  align-items: start;

  gap: clamp(48px, 7vw, 100px);

  margin-bottom: 92px;

}



.teacher-visual {

  position: sticky;

  top: 116px;

  min-height: 690px;

  overflow: hidden;

  background: #dceaf1;

  border: 1px solid rgba(47, 120, 157, .12);

  border-radius: 230px 230px 34px 34px;

  box-shadow: 0 34px 88px rgba(47, 120, 157, .17);

}



.teacher-visual::after {

  position: absolute;

  z-index: 1;

  inset: 0;

  content: "";

  background:

    linear-gradient(180deg, rgba(245,250,252,.02) 45%, rgba(17,47,65,.68) 100%),

    linear-gradient(90deg, rgba(255,255,255,.22), transparent 48%);

}



.teacher-visual img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 66% center;

  filter: saturate(.92) contrast(1.02);

  transition: transform 1.1s var(--ease), filter .5s ease;

}



.teacher-visual:hover img {

  filter: saturate(1.02) contrast(1.04);

  transform: scale(1.055);

}



.teacher-visual .frame-notes {

  z-index: 2;

}



.teacher-visual figcaption {

  position: absolute;

  z-index: 3;

  right: 34px;

  bottom: 34px;

  left: 34px;

  display: grid;

  gap: 7px;

  color: #fff;

}



.teacher-visual figcaption span {

  color: #d8f2ff;

  font-family: "Playfair Display", Georgia, serif;

  font-size: 1.55rem;

  font-style: italic;

}



.teacher-visual figcaption strong {

  font-size: .68rem;

  letter-spacing: .14em;

  text-transform: uppercase;

}



.teacher-content-grid .lesson-path {

  margin-bottom: 0;

}



.teacher-content-grid .lesson-step {

  grid-template-columns: 82px 1px 1fr;

  gap: 28px;

  min-height: 228px;

}



/* Videókártyák: harmonikás képek, finom animált zenei réteggel */

.video-card__image {

  position: absolute;

  z-index: 0;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 67% center;

}



.video-card .frame-notes {

  z-index: 2;

}



.video-card:not(.video-card--large) .frame-notes span {

  font-size: clamp(1.5rem, 2.8vw, 3rem);

}



.video-card:not(.video-card--large) .frame-notes span:nth-child(3) {

  display: none;

}



/* Közös történet: a kettősséget egyetlen harmonikás kép fogja össze */

.story-image {

  display: block;

  background: #dceaf1;

}



.story-image::before {

  display: none;

}



.story-image::after {

  z-index: 1;

  background:

    linear-gradient(180deg, rgba(255,255,255,.01) 46%, rgba(15, 27, 39, .72) 100%),

    linear-gradient(90deg, rgba(255,255,255,.08), transparent 50%);

}



.story-image > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 68% center;

  filter: saturate(.93) contrast(1.03);

  transition: transform 1.1s var(--ease), filter .5s ease;

}



.story-image:hover > img {

  filter: saturate(1.02) contrast(1.05);

  transform: scale(1.05);

}



.story-image .frame-notes {

  z-index: 2;

}



.story-image__label {

  z-index: 3;

}



@media (max-width: 1180px) {

  .identity-card {

    min-height: 520px;

  }



  .identity-card__media {

    height: 180px;

    margin-bottom: 32px;

  }



  .teacher-content-grid {

    grid-template-columns: minmax(330px, .8fr) minmax(0, 1.2fr);

    gap: 54px;

  }



  .teacher-visual {

    min-height: 640px;

  }

}



@media (max-width: 900px) {

  .hybrid-panel--artist .hybrid-panel__backdrop img,

  .hybrid-panel--teacher .hybrid-panel__backdrop img {

    object-position: 68% center;

  }



  .identity-card {

    min-height: auto;

  }



  .identity-card__media {

    height: 240px;

  }



  .teacher-content-grid {

    grid-template-columns: 1fr;

    gap: 64px;

  }



  .teacher-visual {

    position: relative;

    top: auto;

    min-height: 560px;

    border-radius: 210px 210px 32px 32px;

  }



  .teacher-content-grid .lesson-step {

    grid-template-columns: 80px 1px 1fr;

  }

}



@media (max-width: 620px) {

  .hybrid-panel__backdrop img {

    opacity: .72;

  }



  .hybrid-panel--artist .hybrid-panel__backdrop img {

    object-position: 66% center;

  }



  .hybrid-panel--teacher .hybrid-panel__backdrop img {

    object-position: 69% center;

  }



  .hybrid-avatar {

    width: 112px;

  }



  .panel-note-stream span:nth-child(2),

  .panel-note-stream span:nth-child(5) {

    display: none;

  }



  .identity-card__media {

    height: 190px;

    border-radius: 20px;

  }



  .artist-visual__main > img,

  .story-image > img,

  .teacher-visual img {

    object-position: 66% center;

  }



  .teacher-visual {

    min-height: 445px;

    border-radius: 150px 150px 26px 26px;

  }



  .teacher-visual figcaption {

    right: 24px;

    bottom: 24px;

    left: 24px;

  }



  .teacher-content-grid .lesson-step {

    grid-template-columns: 58px 1px 1fr;

    gap: 18px;

  }



  .frame-notes span:nth-child(4),

  .frame-notes span:nth-child(5) {

    display: none;

  }

}



@media (prefers-reduced-motion: reduce) {

  .panel-note-stream span,

  .frame-notes span,

  .hybrid-panel__backdrop img,

  .hybrid-avatar img,

  .identity-card__media img,

  .artist-visual__main > img,

  .teacher-visual img,

  .story-image > img {

    animation: none !important;

    transition: none !important;

  }

}



/* Mobilon a kapcsolatgomb ne fedje el a háromállású szerepválasztót. */

@media (max-width: 900px) {

  .floating-contact {

    bottom: 72px;

  }

}



/* ======================================================================

   ASZTALI + HELYI MEGNYITÁSI ANIMÁCIÓJAVÍTÁS

   ----------------------------------------------------------------------

   A főoldali dekoratív hangjegyek akkor is mozognak, ha a Windows/macOS

   vagy a böngésző "csökkentett mozgás" beállítása aktív. A többi nagy

   átmenet továbbra is tiszteletben tartja ezt a rendszerbeállítást.

   A data-motion="full" attribútum már az index.html <html> elemén szerepel,

   ezért a javítás a script betöltése előtt és file:// megnyitásnál is él.

   ====================================================================== */



html[data-motion="full"] .hybrid-hero__ambient,

html[data-motion="full"] .panel-note-stream,

html[data-motion="full"] .frame-notes {

  display: block !important;

}



html[data-motion="full"] .hybrid-hero__ambient span {

  --motion-duration: 16s;

  --motion-delay: 0s;

  display: block !important;

  animation-name: hybridNoteFloat !important;

  animation-duration: var(--motion-duration) !important;

  animation-delay: var(--motion-delay) !important;

  animation-timing-function: linear !important;

  animation-iteration-count: infinite !important;

  animation-direction: normal !important;

  animation-fill-mode: both !important;

  animation-play-state: running !important;

}



html[data-motion="full"] .hybrid-hero__ambient span:nth-child(1) { --motion-duration: 14s; --motion-delay: 0s; }

html[data-motion="full"] .hybrid-hero__ambient span:nth-child(2) { --motion-duration: 18s; --motion-delay: -8s; }

html[data-motion="full"] .hybrid-hero__ambient span:nth-child(3) { --motion-duration: 15s; --motion-delay: -3s; }

html[data-motion="full"] .hybrid-hero__ambient span:nth-child(4) { --motion-duration: 20s; --motion-delay: -10s; }

html[data-motion="full"] .hybrid-hero__ambient span:nth-child(5) { --motion-duration: 17s; --motion-delay: -5s; }

html[data-motion="full"] .hybrid-hero__ambient span:nth-child(6) { --motion-duration: 21s; --motion-delay: -11s; }

html[data-motion="full"] .hybrid-hero__ambient span:nth-child(7) { --motion-duration: 17s; --motion-delay: -6s; }

html[data-motion="full"] .hybrid-hero__ambient span:nth-child(8) { --motion-duration: 23s; --motion-delay: -14s; }

html[data-motion="full"] .hybrid-hero__ambient span:nth-child(9) { --motion-duration: 16s; --motion-delay: -2s; }



html[data-motion="full"] .panel-note-stream span {

  --motion-duration: 15s;

  --motion-delay: 0s;

  display: block !important;

  animation-name: musicNoteRise !important;

  animation-duration: var(--motion-duration) !important;

  animation-delay: var(--motion-delay) !important;

  animation-timing-function: linear !important;

  animation-iteration-count: infinite !important;

  animation-direction: normal !important;

  animation-fill-mode: both !important;

  animation-play-state: running !important;

}



html[data-motion="full"] .panel-note-stream span:nth-child(1) { --motion-duration: 12s; --motion-delay: -2s; }

html[data-motion="full"] .panel-note-stream span:nth-child(2) { --motion-duration: 17s; --motion-delay: -8s; }

html[data-motion="full"] .panel-note-stream span:nth-child(3) { --motion-duration: 14s; --motion-delay: -4s; }

html[data-motion="full"] .panel-note-stream span:nth-child(4) { --motion-duration: 19s; --motion-delay: -11s; }

html[data-motion="full"] .panel-note-stream span:nth-child(5) { --motion-duration: 15s; --motion-delay: -6s; }

html[data-motion="full"] .panel-note-stream span:nth-child(6) { --motion-duration: 21s; --motion-delay: -13s; }



html[data-motion="full"] .hybrid-panel__note {

  display: block !important;

  animation-name: iconNoteDrift !important;

  animation-duration: 6s !important;

  animation-timing-function: ease-in-out !important;

  animation-iteration-count: infinite !important;

  animation-direction: alternate !important;

  animation-fill-mode: both !important;

  animation-play-state: running !important;

}



html[data-motion="full"] .hybrid-panel__note--one { animation-delay: 0s !important; }

html[data-motion="full"] .hybrid-panel__note--two { animation-delay: -2.5s !important; }

html[data-motion="full"] .hybrid-panel__note--three { animation-delay: -4s !important; }



html[data-motion="full"] .frame-notes span {

  display: block !important;

  animation-name: frameNoteDrift !important;

  animation-duration: 5.8s !important;

  animation-timing-function: ease-in-out !important;

  animation-iteration-count: infinite !important;

  animation-direction: alternate !important;

  animation-fill-mode: both !important;

  animation-play-state: running !important;

}



html[data-motion="full"] .frame-notes span:nth-child(1) { animation-delay: -1.2s !important; }

html[data-motion="full"] .frame-notes span:nth-child(2) { animation-delay: -3.8s !important; }

html[data-motion="full"] .frame-notes span:nth-child(3) { animation-delay: -2.4s !important; }

html[data-motion="full"] .frame-notes span:nth-child(4) { animation-delay: -4.6s !important; }

html[data-motion="full"] .frame-notes span:nth-child(5) { animation-delay: -5.4s !important; }



html[data-motion="full"] .hybrid-avatar::before {

  animation-name: rotate !important;

  animation-duration: 24s !important;

  animation-timing-function: linear !important;

  animation-iteration-count: infinite !important;

  animation-play-state: running !important;

}



/* A repertoár-sáv minden asztali és helyi megnyitásnál megszakítás nélkül fut. */

html[data-motion="full"] .repertoire-strip__track {

  display: flex !important;

  animation-name: repertoireMarquee !important;

  animation-duration: 28s !important;

  animation-delay: 0s !important;

  animation-timing-function: linear !important;

  animation-iteration-count: infinite !important;

  animation-direction: normal !important;

  animation-fill-mode: both !important;

  animation-play-state: running !important;

  will-change: transform;

  backface-visibility: hidden;

  transform-style: preserve-3d;

}



/* Régebbi asztali böngészőkön is folyamatosan a kompozitáló rétegen marad. */

.hybrid-hero__ambient span,

.panel-note-stream span,

.hybrid-panel__note,

.frame-notes span {

  will-change: transform, opacity;

  backface-visibility: hidden;

  transform-style: preserve-3d;

}





/* A korábbi, jól működő mobilos sűrűséget megtartjuk. */

@media (max-width: 620px) {

  html[data-motion="full"] .panel-note-stream span:nth-child(2),

  html[data-motion="full"] .panel-note-stream span:nth-child(5),

  html[data-motion="full"] .hybrid-panel__note--three,

  html[data-motion="full"] .frame-notes span:nth-child(4),

  html[data-motion="full"] .frame-notes span:nth-child(5) {

    display: none !important;

  }

}



/* Az eyebrow középre igazítása és szimmetrikus vonalak hozzáadása */

.artist-copy .eyebrow {

  justify-content: center;

}



/* Egy második vonal hozzáadása a szöveg UTÁN is, hogy szimmetrikus legyen */

.artist-copy .eyebrow::after {

  width: 36px;

  height: 1px;

  content: "";

  background: currentColor;

  opacity: .75;

}



/* A lead (bevezető szöveg) középre helyezése és igazítása */

.artist-copy .lead {

  margin-left: auto;

  margin-right: auto;

  text-align: center;

} 
/* Egyéni / 1:1 / Online egymás mellett */
.teacher-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto 82px !important;
}

.teacher-stats > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 30px 15px !important;
  text-align: center !important;
  border-right: 1px solid rgba(68, 36, 51, 0.15) !important;
  border-bottom: 0 !important;
}

.teacher-stats > div:last-child {
  border-right: 0 !important;
}

.teacher-stats strong,
.teacher-stats span {
  display: block !important;
}
@media (max-width: 680px) {
  .teacher-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .teacher-stats > div {
    padding: 18px 6px !important;
  }

  .teacher-stats strong {
    font-size: 1.35rem !important;
  }

  .teacher-stats span {
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
  }
}


/* ==========================================================================\n   MOBIL JAVITASOK + VISSZA A TETEJERE GOMB\n   ========================================================================== */

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 86px;
  z-index: 120;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(205, 166, 92, .55);
  border-radius: 50%;
  background: rgba(24, 13, 19, .92);
  color: #f4d99c;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
  font: 700 1.25rem/1 inherit;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease,
    background-color .25s ease, border-color .25s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  border-color: #e8c979;
  background: #4b2033;
  outline: none;
}

body.role-open .back-to-top,
body.menu-open .back-to-top,
body.modal-open .back-to-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .hybrid-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(2, minmax(330px, auto)) !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: var(--header-h) !important;
    overflow: hidden !important;
  }

  .hybrid-panel {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 330px !important;
    flex: none !important;
    overflow: hidden !important;
  }

  .hybrid-panel__intro {
    position: relative !important;
    inset: auto !important;
    z-index: 5 !important;
    display: grid !important;
    width: min(100% - 32px, 620px) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 38px 0 30px !important;
    align-content: center !important;
    box-sizing: border-box !important;
  }

  .hybrid-panel__intro > * {
    min-width: 0;
  }

  .hybrid-panel__tagline {
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: initial !important;
    white-space: normal !important;
  }

  .hybrid-panel__open {
    width: max-content;
    max-width: 100%;
    white-space: normal;
  }

  .hybrid-panel__backdrop,
  .hybrid-panel__shade,
  .hybrid-panel__pattern {
    position: absolute !important;
    inset: 0 !important;
  }

  .hybrid-panel__backdrop img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .hybrid-hero__seam {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .hybrid-hero[data-open="artist"],
  .hybrid-hero[data-open="teacher"] {
    display: block !important;
    min-height: calc(100svh - var(--header-h)) !important;
  }

  .hybrid-hero[data-open="artist"] .hybrid-panel--artist,
  .hybrid-hero[data-open="teacher"] .hybrid-panel--teacher {
    min-height: calc(100svh - var(--header-h)) !important;
  }

  .hybrid-panel__details {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    max-width: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .section,
  .story,
  .contact-section,
  .site-footer {
    overflow-x: clip;
  }

  .back-to-top {
    right: 15px;
    bottom: 76px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 620px) {
  .hybrid-hero {
    grid-template-rows: repeat(2, minmax(310px, auto)) !important;
  }

  .hybrid-panel {
    min-height: 310px !important;
  }

  .hybrid-panel__intro {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar number"
      "avatar role"
      "avatar tagline"
      "button button" !important;
    column-gap: 14px !important;
    width: calc(100% - 28px) !important;
    padding: 30px 0 24px !important;
  }

  .hybrid-avatar {
    width: 76px !important;
  }

  .hybrid-panel__intro h2 {
    font-size: clamp(2.2rem, 12vw, 3rem) !important;
    line-height: .92 !important;
  }

  .hybrid-panel__number,
  .hybrid-panel__tagline {
    letter-spacing: .08em !important;
  }

  .hybrid-panel__open {
    justify-self: stretch !important;
    width: 100% !important;
    min-height: 46px !important;
    margin-top: 16px !important;
    text-align: center;
  }

  .hybrid-panel__details {
    padding: 26px 16px 72px !important;
  }

  .hybrid-details__heading h2 {
    overflow-wrap: anywhere;
    font-size: clamp(2.25rem, 12vw, 3.35rem) !important;
  }

  .hybrid-details__actions {
    display: grid !important;
    gap: 14px !important;
  }

  .teacher-heading,
  .section-heading,
  .artist-copy,
  .story-copy,
  .contact-inner {
    min-width: 0;
  }

  .teacher-heading h2,
  .section-heading h2,
  .artist-copy h2,
  .story-copy h2,
  .contact-inner h2 {
    overflow-wrap: anywhere;
  }

  .teacher-stats {
    max-width: 100% !important;
  }

  .teacher-stats > div {
    padding-inline: 4px !important;
  }

  .floating-contact {
    max-width: calc(100vw - 78px);
  }
}

@media (max-width: 390px) {
  .hybrid-panel__intro {
    grid-template-columns: 66px minmax(0, 1fr) !important;
    column-gap: 11px !important;
  }

  .hybrid-avatar {
    width: 66px !important;
  }

  .hybrid-panel__intro h2 {
    font-size: 2.12rem !important;
  }

  .hybrid-panel__tagline {
    font-size: .53rem !important;
  }

  .teacher-stats strong {
    font-size: 1.15rem !important;
  }

  .teacher-stats span {
    font-size: .6rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}