:root {
  --primary: #e73d31;
  --primary-dark: #af231d;
  --secondary: #0f8d91;
  --secondary-dark: #075f63;
  --accent: #f4c84a;
  --cream: #f4fbff;
  --paper: #ffffff;
  --ink: #17212b;
  --muted: #52606d;
  --bg-dark: #101820;
  --bg-card: rgba(255, 255, 255, 0.9);
  --bg-card-hover: rgba(255, 255, 255, 0.96);
  --border-glass: rgba(23, 33, 43, 0.12);
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.78);
  --font-heading: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 8px;
  --shadow: 0 18px 48px rgba(23, 33, 43, 0.14);
  --shadow-glow: 0 18px 42px rgba(231, 61, 49, 0.22);
  --transition: 180ms ease;
  --navbar-h: 76px;
}


.volunteer-closed-hero::before,
.volunteer-closed-hero::after,
.cause-hero::before,
.cause-hero::after,
.gallery-hero::before,
.gallery-hero::after,
.contact-hero::before,
.contact-hero::after {
  background: none;
  display: none;
}

.volunteer-closed-hero__media,
.cause-hero__media,
.gallery-hero,
.contact-hero {
  filter: none;
}

html {
  background: var(--cream);
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body {
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(244, 251, 255, 0.92), rgba(255, 255, 255, 0.98)),
    url("/static/images/background_desk.jpg") center top / cover fixed;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(231, 61, 49, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(15, 141, 145, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, transparent 0, black 18%, black 70%, transparent 100%);
}

.scroll-progress {
  position: fixed;
  top: var(--navbar-h);
  right: 0;
  z-index: 1001;
  width: 6px;
  height: calc((100svh - var(--navbar-h)) * var(--scroll-progress, 0));
  max-height: calc(100svh - var(--navbar-h));
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--primary) 100%);
  box-shadow: 0 0 18px rgba(231, 61, 49, 0.38);
  pointer-events: none;
}

@media (max-width: 900px) {
  .scroll-progress {
    right: 0;
    width: 4px;
  }
}

::selection {
  color: var(--ink);
  background: var(--accent);
}

.wrapper {
  padding-top: var(--navbar-h);
}

section {
  position: relative;
}

h1,
h2,
h3,
h4,
h5 {
  color: inherit;
  letter-spacing: 0;
}

a {
  color: inherit;
}


header {
  height: var(--navbar-h);
  padding: 0 clamp(18px, 5vw, 64px);
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(23, 33, 43, 0.1);
  box-shadow: 0 12px 36px rgba(23, 33, 43, 0.08);
  color: var(--ink);
}

.logo img {
  height: 54px;
  filter: drop-shadow(0 8px 16px rgba(23, 33, 43, 0.12));
}

nav ul {
  gap: 2px;
}

nav ul li a {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 800;
  padding: 9px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}

nav ul li a::after {
  display: none;
}

nav ul li a:hover {
  color: var(--paper);
  background: var(--ink);
}

.hamburger {
  color: var(--ink);
  border: 1px solid rgba(23, 33, 43, 0.18);
  background: rgba(255, 255, 255, 0.52);
  width: 44px;
  height: 44px;
  padding: 0;
}


.cta-button,
.contact-form button,
.cauze-section .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 999px;
  padding: 13px 24px;
  border: 1px solid rgba(23, 33, 43, 0.12);
  background: var(--primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(231, 61, 49, 0.26);
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}

.cta-button:hover,
.contact-form button:hover,
.cauze-section .cta-button:hover {
  transform: translateY(-2px);
  background: var(--primary-dark);
  box-shadow: 0 18px 34px rgba(231, 61, 49, 0.32);
  opacity: 1;
}

.pulse-button {
  animation: none;
}


.hero {
  min-height: calc(100svh - var(--navbar-h));
  height: auto;
  justify-content: flex-start;
  text-align: left;
  padding: clamp(72px, 12vw, 136px) clamp(20px, 8vw, 112px) clamp(72px, 9vw, 104px);
  isolation: isolate;
}

#background-video,
#background-video-artist {
  filter: none;
}

.hero > .overlay,
.artists > .overlay {
  background: none;
  display: none;
}

.hero::after {
  height: 150px;
  background: none;
}

.hero-content {
  max-width: 760px;
  padding: 0;
}

.hero-title {
  max-width: 11ch;
  margin: 0 0 20px;
  color: var(--paper);
  font-size: clamp(3.1rem, 8vw, 6.8rem);
  line-height: 0.92;
  text-shadow: 0 8px 36px rgba(0, 0, 0, 0.48);
}

.hero-title b {
  color: var(--accent);
  white-space: nowrap;
}

.hero-subtitle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  max-width: 100%;
  margin: 0 0 34px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: var(--paper);
  font-size: clamp(0.96rem, 1.5vw, 1.12rem);
  backdrop-filter: blur(12px);
}

.hero-subtitle span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.hero-subtitle span + span::before {
  content: "•";
  margin-right: 10px;
  color: var(--accent);
}

#paper-plane-canvas {
  opacity: 0.52;
}


.about-section,
.highlight-section,
.news-media,
.organizers-section,
.program-container,
.inimo-artists-section,
.despre-inimo,
.cauze-section,
.contact-container,
.voluntariat-section,
.gallery-section,
.faq-section {
  padding-left: clamp(20px, 6vw, 88px);
  padding-right: clamp(20px, 6vw, 88px);
}

.about-section {
  align-items: center;
  gap: clamp(36px, 7vw, 96px);
  padding-top: clamp(70px, 10vw, 118px);
  padding-bottom: clamp(70px, 10vw, 118px);
  background: var(--cream);
}

.about-text h2,
.highlight-title,
.artists h2,
.news-media h2,
.organizers-section h2,
.program-container h2,
.inimo-section-header h2,
.despre-inimo .section-title,
.cauze-section h1,
.contact-container h2 {
  color: var(--ink);
  font-weight: 800;
  line-height: 1;
}

.about-text h2 {
  max-width: 720px;
  font-size: clamp(2.15rem, 4.8vw, 4rem);
}

.about-text p,
.highlight-box p,
.media-item p,
.cauze-section p,
.despre-inimo p,
.contact-card p {
  color: var(--muted);
}

.festival-info {
  width: min(100%, 530px);
  background: #fff;
  border: 1px solid rgba(23, 33, 43, 0.12);
  box-shadow: var(--shadow);
  animation: none;
  backdrop-filter: none;
}

.festival-info p {
  color: var(--ink);
}

.festival-info span {
  color: var(--secondary-dark);
}

.about-image img {
  max-width: min(78%, 440px);
  border-radius: 8px;
  filter: drop-shadow(0 28px 32px rgba(23, 33, 43, 0.2));
  animation: float 7s ease-in-out infinite;
}


.highlight-section {
  padding-top: 82px;
  padding-bottom: 82px;
  background: #f4fbff;
}

.highlight-section > .section-kicker,
.organizers-section > .section-kicker {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(244, 200, 74, 0.22);
  color: var(--secondary-dark);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invitatii {
  padding: clamp(72px, 10vw, 124px) clamp(20px, 8vw, 112px);
  background:
    linear-gradient(135deg, rgba(16, 24, 32, 0.05), rgba(15, 141, 145, 0.08)),
    var(--paper);
}

.invitatii-coming-soon {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid rgba(23, 33, 43, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
  text-align: center;
}

.invitatii-coming-soon .section-kicker {
  justify-content: center;
  margin-bottom: 18px;
}

.invitatii-coming-soon h2 {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 0.98;
  margin-bottom: 16px;
}

.invitatii-coming-soon p:not(.section-kicker) {
  max-width: 760px;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.16rem);
  font-weight: 700;
  line-height: 1.65;
}

.highlight-title,
.news-media h2,
.organizers-section h2 {
  margin-bottom: 36px;
}

.highlight-container {
  max-width: 1180px;
  margin: 0 auto;
  gap: 18px;
}

.highlight-box,
.media-item,
.program-day,
.inimo-artist-card,
.contact-card,
.contact-form,
.highlight,
.cauze-list li,
.stat-item,
.despre-inimo .container > *:not(.section-title):not(.lead):not(.despre-footer) {
  background: var(--bg-card);
  border: 1px solid rgba(23, 33, 43, 0.12);
  border-radius: 8px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.highlight-box {
  padding: 34px 28px;
}

.highlight-box::before,
.categorie-titlu::after,
.stat-item::before {
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary));
}

.highlight-box:hover,
.media-item:hover,
.inimo-artist-card:hover,
.stat-item:hover {
  transform: translateY(-5px);
  background: var(--bg-card-hover);
  border-color: rgba(231, 61, 49, 0.28);
  box-shadow: var(--shadow-glow);
}

.highlight-box .icon {
  font-size: 2.7rem;
}

highlight-box h3,
categorie-titlu {
  color: var(--primary-dark);
}



.btn-plus:hover,
.btn-minus:hover,
.scroll-btn:hover {
  background: var(--primary);
}


.artists {
  min-height: 780px;
  padding: clamp(88px, 10vw, 132px) 0 clamp(78px, 9vw, 118px);
  overflow: hidden;
  isolation: isolate;
}

.artists .overlay {
  background: none;
  display: none;
}

.artist-teaser {
  position: relative;
  z-index: 2;
  width: min(1060px, calc(100vw - 40px));
  margin: 0 auto 42px;
  text-align: center;
}

.artist-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-bottom: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
}

.artists h2 {
  max-width: 900px;
  margin: 0 auto;
  color: var(--paper);
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 0.9;
  text-wrap: balance;
  text-shadow: 0 12px 38px rgba(0, 0, 0, 0.45);
}

.artist-scroll-wrapper {
  position: relative;
  z-index: 2;
  gap: 14px;
  padding: 0 clamp(14px, 5vw, 58px);
}

.artist-container {
  gap: 16px;
  padding: 8px 4px 18px;
}

.artist-card {
  width: 202px;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.artist-subtitle {
  max-width: 760px;
  margin: 20px auto 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 800;
  line-height: 1.5;
}

.artist-teaser__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.artist-teaser__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.artist-card::after {
  content: "În curând";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.22rem;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
  background:
    linear-gradient(180deg, rgba(16, 24, 32, 0.08), rgba(16, 24, 32, 0.72)),
    rgba(16, 24, 32, 0.16);
  pointer-events: none;
}

.artist-card img {
  height: 238px;
  filter: blur(15px) saturate(0.78) brightness(0.7);
  transform: scale(1.1);
}

.artist-name {
  background: rgba(255, 255, 255, 0.95);
  color: transparent;
  text-shadow: 0 0 12px rgba(23, 33, 43, 0.95);
  filter: blur(7px);
  user-select: none;
}

.scroll-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
}

.coming-ticker {
  width: min(1180px, calc(100vw - 80px));
  margin: 28px auto 0;
  overflow: hidden;
  border: 1px solid rgba(23, 33, 43, 0.12);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
}

.coming-ticker--light {
  position: relative;
  z-index: 2;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
}

.coming-ticker__track {
  display: flex;
  width: max-content;
  gap: 28px;
  align-items: center;
  white-space: nowrap;
  padding: 12px 28px;
  animation: ticker-right-to-left 24s linear infinite;
}

.coming-ticker__track span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 800;
  text-transform: uppercase;
}

.coming-ticker__track span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

@keyframes ticker-right-to-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}


.news-media {
  background: #f4fbff;
  backdrop-filter: none;
}

.media-slider {
  max-width: 1180px;
  margin: 0 auto;
}

.media-item {
  width: 320px;
  background: #fff;
}

.media-item img {
  height: 190px;
}

.organizers-section {
  background: var(--paper);
}

.organizers-section + .organizers-section {
  background: #e9f7ff;
}

.organizers-section h2 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.organizers-img {
  width: min(94vw, 980px);
  padding: 20px;
  background: #fff;
  border: 1px solid rgba(23, 33, 43, 0.1);
  border-radius: 8px;
  box-shadow: var(--shadow);
}


.program-container {
  max-width: 1080px;
  margin-top: 38px;
  color: var(--ink);
}

.program-coming-soon {
  min-height: calc(100svh - var(--navbar-h));
  display: grid;
  place-items: center;
  padding: clamp(64px, 8vw, 110px) clamp(20px, 7vw, 96px);
  background: url("/static/images/festival/Festival_5.jpg") center / cover;
}

.program-coming-soon__inner {
  max-width: 940px;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  text-align: center;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
}

.program-coming-soon h1 {
  margin-bottom: 18px;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 7vw, 6.2rem);
  line-height: 0.94;
}

.program-coming-soon p:not(.section-kicker) {
  max-width: 720px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  line-height: 1.65;
}

.program-container h2 {
  animation: none;
  color: var(--ink);
}

.program-grid {
  gap: 18px;
}

.program-day h3,
.inimo-artist-info h3,
.stat-item h3,
.cauze-cta h2 {
  color: var(--ink);
}

.upcoming {
  color: var(--primary);
  animation: none;
}

.inimo-artists-section {
  margin-top: 0;
}

.inimo-section-header p,
.stat-item p {
  color: var(--muted);
}

.inimo-artist-card {
  opacity: 1;
}

.inimo-artist-card img {
  border-bottom: 0;
}

.despre-inimo {
  background: transparent;
  color: var(--ink);
}

.despre-inimo .section-title,
.despre-inimo .lead,
.despre-inimo h2,
.despre-inimo .despre-footer {
  color: var(--ink);
}

.despre-inimo .section-title::after,
.despre-inimo h2::before {
  background: var(--primary);
}

.despre-inimo li::before {
  color: var(--primary);
}

.despre-inimo .despre-footer {
  background: #fff;
  border-radius: 8px;
}

.cauze-section {
  --dark: var(--ink);
  --light: var(--paper);
  --primary: #e73d31;
  --secondary: #0f8d91;
  --accent: #f4c84a;
  background: transparent;
}

.cauze-section::before,
.cauze-section::after {
  display: none;
}

.cauze-list li::before {
  background-image: none;
  content: "✓";
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--secondary);
  border-radius: 50%;
  font-weight: 800;
}

.cauze-cta {
  background: #fff;
  border: 1px solid rgba(23, 33, 43, 0.12);
  border-radius: 8px;
}

.contact-container {
  max-width: 1120px;
  padding-top: 48px;
  color: var(--ink);
}

.contact-content {
  gap: 18px;
}

.contact-card,
.contact-form {
  margin: 0;
  background: #fff;
}

.contact-form input,
.contact-form textarea {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(23, 33, 43, 0.16);
  border-radius: 8px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 3px solid rgba(244, 200, 74, 0.34);
  border-color: var(--primary);
}

.map-container {
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.social-icons a {
  border-radius: 8px;
  box-shadow: none;
}


.faq-container,
.voluntariat-intro .container,
.volunteer-section .form-container,
.gallery-section {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(23, 33, 43, 0.12);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.faq-container {
  max-width: 920px;
  margin: 54px auto 86px;
  padding: clamp(24px, 5vw, 48px);
}

.faq-container h1,
.gallery-container h1,
.voluntariat-intro h1,
.volunteer-section h1 {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  line-height: 1;
}

.faq-intro,
.gallery-container p,
.voluntariat-intro,
.voluntariat-intro .lead,
.volunteer-section p {
  color: var(--muted);
}

.faq-item {
  border-bottom: 0;
  margin-bottom: 12px;
  padding-bottom: 0;
}

.faq-question {
  min-height: 56px;
  border-radius: 8px;
  background: var(--secondary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.08rem;
}

.faq-question:hover {
  background: var(--secondary-dark);
}

.faq-answer {
  color: var(--muted);
  background: #f4fbff;
  border: 1px solid rgba(23, 33, 43, 0.1);
}

.contact-link {
  border-radius: 999px;
  background: var(--primary);
}

.contact-link:hover {
  background: var(--primary-dark);
}

.voluntariat-intro {
  background: transparent;
  padding-top: 70px;
}

.voluntariat-intro .container {
  padding: clamp(24px, 5vw, 48px);
}

.voluntariat-intro .lead {
  color: var(--secondary-dark);
}

.voluntariat-intro h2 {
  color: var(--primary-dark);
}

.voluntariat-intro ul li::before {
  content: "";
  width: 10px;
  height: 10px;
  top: 0.55em;
  background: var(--accent);
  border-radius: 999px;
}

.volunteer-section {
  min-height: auto;
  padding-top: 48px;
  color: var(--ink);
}

.volunteer-section .form-container {
  max-width: 720px;
}

.volunteer-section input,
.volunteer-section textarea,
.volunteer-section select {
  border: 1px solid rgba(23, 33, 43, 0.15);
  background: #f4fbff;
}

.volunteer-section button {
  border-radius: 999px;
  background: var(--primary);
}

.form-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 24px;
  border-radius: 8px;
  background: rgba(16, 24, 32, 0.78);
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.8rem);
  font-weight: 800;
  text-align: center;
  backdrop-filter: blur(5px);
}

.gallery-container {
  color: var(--ink);
  padding-top: 70px;
}

.gallery-section {
  padding: clamp(18px, 3vw, 28px);
}

.gallery-section h2 {
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
}

.gallery-grid {
  gap: 14px;
}

.gallery-grid img {
  aspect-ratio: 4 / 3;
  height: auto;
  max-height: none;
  border-radius: 8px;
  box-shadow: none;
  border: 4px solid #fff;
}

.gallery-grid img:hover {
  transform: translateY(-4px) scale(1.01);
}


.vendor-hero {
  position: relative;
  min-height: calc(100svh - var(--navbar-h));
  display: grid;
  align-items: end;
  padding: clamp(84px, 12vw, 138px) clamp(20px, 8vw, 112px) clamp(68px, 8vw, 98px);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}

.vendor-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/static/images/Old/2023/26_2023.jpg") center / cover;
}

.vendor-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16, 24, 32, 0.72) 0%, rgba(16, 24, 32, 0.46) 34%, rgba(16, 24, 32, 0.08) 66%, transparent 100%),
    linear-gradient(180deg, transparent 74%, rgba(244, 251, 255, 0.9) 100%);
}

.vendor-hero__content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.vendor-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(244, 200, 74, 0.96);
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0;
}

.vendor-hero h1 {
  max-width: 11ch;
  margin: 18px 0 18px;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(3.3rem, 9vw, 7.4rem);
  line-height: 0.92;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.7), 0 12px 36px rgba(0, 0, 0, 0.42);
}

.vendor-hero__content > p:not(.vendor-kicker) {
  max-width: 720px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 800;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.72);
}

.vendor-intro,
.vendor-section,
.vendor-message,
.vendor-cta {
  padding: clamp(64px, 8vw, 104px) clamp(20px, 7vw, 96px);
}

.vendor-intro {
  background: var(--cream);
}

.vendor-copy {
  max-width: 1040px;
  margin: 0 auto;
}

.vendor-copy h2,
.vendor-section__heading h2,
.vendor-message h2,
.vendor-cta h2 {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: 0.98;
  margin-bottom: 20px;
}

.vendor-copy p,
.vendor-statement p,
.vendor-benefits p,
.vendor-step-grid p,
.vendor-message blockquote,
.vendor-cta p,
.vendor-form-note {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.72;
}

.vendor-copy p {
  max-width: 920px;
  margin-bottom: 14px;
}

.vendor-section {
  background: #fff;
}

.vendor-section:nth-of-type(even) {
  background: #f4fbff;
}

.vendor-section__heading {
  max-width: 980px;
  margin: 0 auto 28px;
}

.vendor-section__heading span {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--primary-dark);
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
}

.vendor-statement,
.vendor-benefits,
.vendor-table,
.vendor-step-grid,
.vendor-message blockquote,
.vendor-form {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.vendor-statement {
  margin-bottom: 22px;
  padding: clamp(22px, 3vw, 34px);
  border-left: 8px solid var(--accent);
  border-radius: 8px;
  background: #fff9df;
  box-shadow: var(--shadow);
}

.vendor-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.vendor-benefits article,
.vendor-step-grid article {
  padding: 24px;
  border: 1px solid rgba(23, 33, 43, 0.1);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.vendor-benefits h3,
.vendor-step-grid h3 {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.05;
  margin-bottom: 10px;
}

.vendor-table {
  display: grid;
  gap: 10px;
}

.vendor-table > div {
  display: grid;
  grid-template-columns: minmax(210px, 0.7fr) 1fr;
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(23, 33, 43, 0.1);
  box-shadow: 0 10px 28px rgba(23, 33, 43, 0.08);
}

.vendor-table strong {
  color: var(--primary-dark);
  font-family: var(--font-heading);
  font-size: 1.18rem;
}

.vendor-table span {
  color: var(--muted);
}

.vendor-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.vendor-step-grid article span {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
}

.vendor-message {
  background: url("/static/images/festival/Festival_4.jpg") center / cover;
}

.vendor-message h2 {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
}

.vendor-message blockquote {
  padding: clamp(24px, 4vw, 42px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  line-height: 1.25;
  backdrop-filter: blur(8px);
}

.vendor-cta {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1fr);
  gap: clamp(24px, 5vw, 58px);
  align-items: start;
  background: linear-gradient(180deg, #f4fbff, #fff);
}

.vendor-form {
  display: grid;
  gap: 12px;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(23, 33, 43, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.vendor-form label {
  color: var(--ink);
  font-weight: 800;
}

.vendor-form input,
.vendor-form select,
.vendor-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(23, 33, 43, 0.16);
  border-radius: 8px;
  background: #f4fbff;
  color: var(--ink);
  font: inherit;
}

.vendor-form textarea {
  min-height: 120px;
  resize: vertical;
}

.vendor-form input:focus,
.vendor-form select:focus,
.vendor-form textarea:focus {
  outline: 3px solid rgba(244, 200, 74, 0.35);
  border-color: var(--primary);
}

.vendor-form button {
  min-height: 52px;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition);
}

.vendor-form button:hover {
  transform: translateY(-2px);
  background: var(--primary-dark);
}

.vendor-form-note {
  font-size: 0.92rem;
}

.vendor-form-note a {
  color: var(--primary-dark);
  font-weight: 800;
}

.vendor-form-response {
  min-height: 1.4em;
  margin: 0;
  color: var(--secondary-dark);
  font-weight: 800;
}

.vendor-form-response.is-error {
  color: var(--primary-dark);
}


.about-hero {
  min-height: calc(86svh - var(--navbar-h));
  display: grid;
  align-items: end;
  padding: clamp(78px, 11vw, 130px) clamp(20px, 8vw, 112px) clamp(62px, 8vw, 96px);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.about-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/static/images/Old/2024/11_2024.jpg") center / cover;
}

.about-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: -1;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--cream));
}

.about-hero__content {
  max-width: 980px;
}

.about-hero h1 {
  max-width: 12ch;
  margin: 18px 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(3.1rem, 8vw, 7rem);
  line-height: 0.92;
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
}

.about-hero__content > p:not(.section-kicker) {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  font-weight: 800;
  line-height: 1.55;
}

.about-impact,
.about-grid-section,
.about-team,
.about-involve,
.about-closing {
  padding: clamp(64px, 8vw, 104px) clamp(20px, 7vw, 96px);
}

.about-impact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  background: var(--cream);
}

.about-impact__copy {
  max-width: 820px;
}

.about-impact h2,
.about-card h2,
.about-team h2,
.about-involve h2,
.about-closing h2 {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  line-height: 0.98;
  margin-bottom: 16px;
}

.about-impact p,
.about-card p,
.about-card li,
.about-team > p,
.about-involve__items span,
.about-closing p {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  line-height: 1.72;
}

.about-impact__stats {
  display: grid;
  gap: 14px;
}

.about-impact__stats div {
  padding: 24px;
  border: 1px solid rgba(23, 33, 43, 0.1);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.about-impact__stats strong {
  display: block;
  color: var(--primary-dark);
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 0.9;
}

.about-impact__stats span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
}

.about-grid-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  background: #fff;
}

.about-card {
  min-height: 100%;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(23, 33, 43, 0.1);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.about-card--accent {
  background:
    linear-gradient(135deg, rgba(244, 200, 74, 0.28), rgba(231, 61, 49, 0.1)),
    #fff;
}

.about-card ul {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 0;
}

.about-card li {
  position: relative;
  padding-left: 22px;
  list-style: none;
}

.about-card li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.about-card--photo {
  padding: 0;
  overflow: hidden;
}

.about-card--photo img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}

.about-team {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  background: #f4fbff;
}

.about-team > p {
  padding: clamp(22px, 3vw, 34px);
  border-left: 8px solid var(--secondary);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.about-involve {
  background: #fff;
}

.about-involve__header {
  max-width: 980px;
  margin: 0 auto 28px;
  text-align: center;
}

.about-involve__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}

.about-involve__items a {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid rgba(23, 33, 43, 0.1);
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

.about-involve__items a:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}

.about-involve__items strong {
  color: var(--primary-dark);
  font-family: var(--font-heading);
  font-size: 1.55rem;
  line-height: 1;
}

.about-closing {
  text-align: center;
  background: url("/static/images/festival/Festival_6.jpg") center / cover;
}

.about-closing h2 {
  color: #fff;
}

.about-closing p {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 800;
}


.volunteer-closed-hero,
.cause-hero,
.contact-hero,
.gallery-hero {
  position: relative;
  min-height: calc(74svh - var(--navbar-h));
  display: grid;
  align-items: end;
  padding: clamp(72px, 10vw, 124px) clamp(20px, 8vw, 112px) clamp(58px, 7vw, 90px);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.volunteer-closed-hero__media,
.cause-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.volunteer-closed-hero__media {
  background: url("/static/images/Old/2023/5_2023.jpg") center / cover;
}

.cause-hero__media {
  background: url("/static/images/Old/2023/25_2023.jpg") center / cover;
}

.gallery-hero {
  min-height: calc(66svh - var(--navbar-h));
  width: 100%;
  background: url("/static/images/festival/Festival_5.jpg") center / cover;
}

.contact-hero {
  min-height: calc(58svh - var(--navbar-h));
  background: url("/static/images/Old/2023/35_2023.jpg") center / cover;
}

.volunteer-closed-hero::after,
.cause-hero::after,
.gallery-hero::after,
.contact-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: -1;
  height: 100px;
  background: none;
}

.volunteer-closed-hero__content,
.cause-hero__content,
.contact-hero__content,
.gallery-hero > div {
  position: relative;
  z-index: 1;
  max-width: 980px;
}

.volunteer-closed-hero h1,
.cause-hero h1,
.contact-hero h1,
.gallery-hero h1 {
  max-width: 12ch;
  margin: 18px 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, 6.7rem);
  line-height: 0.92;
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
}

.volunteer-closed-hero p:not(.section-kicker),
.cause-hero p:not(.section-kicker),
.contact-hero p:not(.section-kicker),
.gallery-hero p:not(.section-kicker) {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 800;
  line-height: 1.55;
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
}

.volunteer-info,
.volunteer-closed-card,
.cause-impact,
.cause-section,
.cause-message,
.contact-modern,
.gallery-coming {
  padding: clamp(64px, 8vw, 104px) clamp(20px, 7vw, 96px);
}

.volunteer-info,
.cause-section,
.contact-modern,
.gallery-coming {
  background: var(--cream);
}

.volunteer-info__intro,
.cause-section__heading,
.gallery-coming {
  max-width: 980px;
  margin: 0 auto 28px;
  text-align: center;
}

.volunteer-info h2,
.volunteer-closed-card h2,
.cause-section h2,
.cause-message h2,
.gallery-coming h2,
.contact-modern h2,
.map-consent h2 {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.98;
  margin-bottom: 14px;
}

.volunteer-info p,
.volunteer-closed-card p,
.cause-section p,
.cause-message p,
.gallery-coming p,
.contact-modern p,
.map-consent p {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  line-height: 1.72;
}

.volunteer-info__grid,
.cause-grid,
.contact-modern__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}

.volunteer-info__grid article,
.cause-grid article,
.contact-modern__cards article,
.map-consent,
.gallery-coming,
.volunteer-closed-card {
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(23, 33, 43, 0.1);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.volunteer-info h3,
.cause-grid h3 {
  color: var(--primary-dark);
  font-family: var(--font-heading);
  font-size: 1.45rem;
  line-height: 1.05;
  margin-bottom: 10px;
}

.volunteer-closed-card,
.cause-message {
  max-width: 980px;
  margin: clamp(42px, 6vw, 76px) auto;
  text-align: center;
}

.cause-impact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  background: var(--cream);
}

.cause-impact div {
  padding: 28px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}

.cause-impact strong {
  display: block;
  color: var(--primary-dark);
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 5vw, 4.3rem);
  line-height: 0.9;
}

.cause-impact span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
}

.cause-message {
  padding: clamp(28px, 5vw, 54px);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(244, 200, 74, 0.26), rgba(15, 141, 145, 0.12)),
    #fff;
  box-shadow: var(--shadow);
}

.contact-modern__cards {
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
}

.contact-modern__form-card form {
  display: grid;
  gap: 12px;
}

.contact-modern input,
.contact-modern textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(23, 33, 43, 0.16);
  border-radius: 8px;
  background: #f4fbff;
  color: var(--ink);
  font: inherit;
}

.contact-modern textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-modern button,
.map-consent button {
  min-height: 50px;
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  cursor: pointer;
}

#formResponse {
  min-height: 1.4em;
  color: var(--secondary-dark);
  font-weight: 800;
}

#formResponse.is-error {
  color: var(--primary-dark);
}

.map-consent,
.map-container--consent {
  max-width: 1180px;
  margin: 28px auto 0;
}

.map-consent {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}


.cc-banner,
.cc-card {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
}

.cc-btn {
  border-radius: 999px !important;
}

.cc-btn-primary {
  background: var(--accent) !important;
  color: var(--ink) !important;
}

.cc-link {
  color: var(--accent) !important;
}


footer {
  background: var(--ink);
  border-top: 0;
  padding: 34px clamp(20px, 6vw, 64px);
}

footer p,
footer p:first-of-type {
  color: rgba(255, 255, 255, 0.82);
}

footer a {
  color: var(--accent);
}


@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}


@media (max-width: 1100px) {
  nav ul li a {
    padding: 8px 8px;
    font-size: 0.74rem;
  }

  .vendor-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  header {
    padding: 0 18px;
  }

  nav {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(23, 33, 43, 0.12);
  }

  nav ul li a {
    color: var(--ink);
    border-bottom: 1px solid rgba(23, 33, 43, 0.08);
    border-radius: 0;
    padding: 15px 24px;
  }

  nav ul li a:hover {
    padding-left: 30px;
    color: var(--paper);
    background: var(--ink);
  }

  .about-section {
    text-align: left;
  }
}

@media (max-width: 1200px) {
  header {
    padding: 0 16px;
  }

  .logo {
    order: 1;
  }

  .hamburger {
    order: 2;
    display: grid !important;
    place-items: center;
    margin-left: auto;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 1002;
  }

  nav {
    order: 3;
    display: none;
    position: absolute;
    top: var(--navbar-h);
    left: 0;
    width: 100%;
    max-height: calc(100svh - var(--navbar-h));
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(23, 33, 43, 0.12);
  }

  nav.active {
    display: block;
  }

  nav ul {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 768px) {
  body {
    background:
      linear-gradient(180deg, rgba(244, 251, 255, 0.92), rgba(255, 255, 255, 0.98)),
      url("/static/images/background_mob.jpg") center top / cover fixed;
  }

  .hero {
    min-height: calc(100svh - var(--navbar-h));
    padding-top: 60px;
    padding-bottom: 68px;
  }

  .hero > .overlay,
  .artists > .overlay {
    background: none;
    display: none;
  }

  .hero-title {
    max-width: 8.5ch;
    font-size: clamp(3rem, 16vw, 4.8rem);
  }

  .hero-subtitle {
    align-items: center;
    white-space: normal;
  }

  .hero-subtitle span {
    white-space: normal;
  }

  .about-section,
  .highlight-section,
  .about-section,
  .news-media,
  .organizers-section {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .organizers-section {
    padding-left: 28px;
    padding-right: 28px;
  }

  .festival-info {
    margin-left: 0;
    margin-right: 0;
  }

  .highlight-box {
    padding: 28px 22px;
  }

  

  .artist-scroll-wrapper {
    gap: 8px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .scroll-btn {
    display: none;
  }

  .artist-card {
    width: 156px;
  }

  .artist-card img {
    height: 184px;
  }

  .media-item {
    width: 84vw;
    min-width: 84vw;
  }

  .contact-content {
    display: grid;
    grid-template-columns: 1fr;
  }

  .vendor-hero {
    min-height: calc(92svh - var(--navbar-h));
    padding-top: 72px;
    padding-bottom: 64px;
  }

  .vendor-hero h1 {
    font-size: clamp(3rem, 16vw, 5rem);
  }

  .vendor-intro,
  .vendor-section,
  .vendor-message,
  .vendor-cta {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .vendor-benefits,
  .vendor-step-grid,
  .vendor-cta {
    grid-template-columns: 1fr;
  }

  .vendor-table > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .about-hero {
    min-height: calc(84svh - var(--navbar-h));
    padding-top: 72px;
    padding-bottom: 64px;
  }

  .about-hero h1 {
    font-size: clamp(3rem, 15vw, 5rem);
  }

  .about-impact,
  .about-grid-section,
  .about-team,
  .about-involve__items {
    grid-template-columns: 1fr;
  }

  .about-card--photo img {
    min-height: 300px;
  }

  .volunteer-closed-hero,
  .cause-hero,
  .contact-hero,
  .gallery-hero {
    min-height: calc(72svh - var(--navbar-h));
    padding-top: 70px;
    padding-bottom: 58px;
  }

  .volunteer-closed-hero h1,
  .cause-hero h1,
  .contact-hero h1,
  .gallery-hero h1 {
    font-size: clamp(2.8rem, 14vw, 4.8rem);
  }

  .volunteer-info__grid,
  .cause-grid,
  .cause-impact,
  .contact-modern__cards,
  .map-consent {
    grid-template-columns: 1fr;
  }

  .map-consent button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  :root {
    --navbar-h: 68px;
  }

  .logo img {
    height: 46px;
  }

  .hero {
    text-align: left;
  }

  .hero-title {
    font-size: clamp(2.75rem, 15vw, 4.1rem);
  }

  .hero-subtitle {
    padding: 9px 12px;
    gap: 4px 8px;
    font-size: 0.88rem;
    line-height: 1.2;
  }

  .hero-subtitle span + span::before {
    margin-right: 8px;
  }

  .cta-button {
    width: 100%;
    max-width: 330px;
  }

  .about-text h2,
  .highlight-title,
  .artists h2,
  .news-media h2,
  .organizers-section h2 {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .artists {
    min-height: auto;
    padding-top: 68px;
    padding-bottom: 72px;
  }

  .artist-teaser {
    width: calc(100vw - 32px);
    margin-bottom: 30px;
  }

  .artist-subtitle {
    font-size: 0.98rem;
  }

  .artist-teaser__chips {
    gap: 8px;
  }

  .artist-teaser__chips span {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 0.9rem;
  }

  .festival-info {
    padding: 18px;
  }

  .festival-info p {
    display: block;
  }

  

  .organizers-img {
    padding: 12px;
  }
}


.typewriter-word {
  display: inline-block;
  white-space: nowrap;
}

.typewriter-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.18em) rotate(-1deg);
  animation: typewriter-letter 0.42s ease forwards;
}

.typewriter-ready::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.78em;
  margin-left: 0.08em;
  border-radius: 999px;
  background: var(--accent);
  animation: typewriter-caret 0.75s steps(1) infinite;
  vertical-align: -0.05em;
}

.typewriter-ready.typewriter-done::after {
  animation: none;
  opacity: 0;
}

@keyframes typewriter-letter {
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

@keyframes typewriter-caret {
  50% {
    opacity: 0;
  }
}

.counter-pop {
  animation: counter-pop 0.55s ease both;
}

@keyframes counter-pop {
  0% {
    transform: translateY(10px) scale(0.92);
    filter: saturate(0.6);
  }
  70% {
    transform: translateY(-2px) scale(1.04);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }
}

.home-impact-strip,
.faq-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: clamp(18px, 4vw, 34px) clamp(20px, 6vw, 88px);
  background: var(--paper);
}

.home-impact-strip {
  margin-top: calc(-1 * var(--navbar-h));
  z-index: 4;
}

.home-stat,
.faq-stats > div {
  min-width: 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(23, 33, 43, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(244, 200, 74, 0.28), rgba(15, 141, 145, 0.12)),
    #fff;
  box-shadow: var(--shadow);
}

.home-stat strong,
.faq-stats strong,
.about-impact__stats strong,
.cause-impact strong {
  display: block;
  color: var(--primary-dark);
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 0.9;
  overflow-wrap: anywhere;
}

.home-stat span,
.faq-stats span {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.2;
}

.faq-hero {
  min-height: calc(54svh - var(--navbar-h));
  display: grid;
  align-items: end;
  padding: clamp(76px, 10vw, 120px) clamp(20px, 8vw, 112px) clamp(48px, 7vw, 78px);
  background: url("/static/images/Old/2023/35_2023.jpg") center / cover;
  color: #fff;
}

.faq-hero__content {
  max-width: 920px;
}

.faq-hero h1 {
  max-width: 11ch;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(3.2rem, 8vw, 6.6rem);
  font-weight: 800;
  line-height: 0.92;
}

.faq-hero p:not(.section-kicker) {
  max-width: 720px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.7vw, 1.24rem);
  font-weight: 800;
  line-height: 1.55;
}

.faq-container {
  max-width: 1020px;
  margin-top: 0;
}

.faq-heading {
  margin-bottom: 26px;
  text-align: center;
}

.faq-heading h2 {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 0.95;
}

.faq-question {
  gap: 14px;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(23, 33, 43, 0.14);
  box-shadow: 0 10px 28px rgba(23, 33, 43, 0.08);
}

.faq-question:hover {
  color: #fff;
  background: var(--ink);
}

.toggle-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
}

.faq-answer {
  padding: 18px 20px;
  line-height: 1.65;
}

@media (max-width: 960px) {
  header {
    padding: 0 16px;
  }

  .logo {
    order: 1;
  }

  .hamburger {
    order: 2;
    display: grid !important;
    place-items: center;
    margin-left: auto;
    font-size: 22px;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 1002;
  }

  nav {
    order: 3;
    max-height: calc(100svh - var(--navbar-h));
    overflow-y: auto;
  }

  nav ul li a {
    font-size: 1rem;
    line-height: 1.15;
  }
}

@media (max-width: 768px) {
  .home-impact-strip,
  .faq-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 14px;
    padding-right: 14px;
  }

  .home-impact-strip .home-stat:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 460px);
    text-align: center;
  }

  .home-impact-strip {
    margin-top: 0;
  }

  .home-stat,
  .faq-stats > div {
    padding: 18px 14px;
  }

  .home-stat strong,
  .faq-stats strong,
  .about-impact__stats strong,
  .cause-impact strong {
    font-size: clamp(1.9rem, 10vw, 3rem);
  }

  .faq-hero {
    min-height: calc(58svh - var(--navbar-h));
    padding-top: 70px;
    padding-bottom: 44px;
  }

  .faq-hero h1 {
    font-size: clamp(3rem, 14vw, 4.7rem);
  }

  .faq-container {
    width: min(100% - 28px, 1020px);
    margin-bottom: 58px;
    padding: 24px 14px;
  }

  .faq-question {
    padding: 14px;
    font-size: 1rem;
  }

  .coming-ticker {
    width: calc(100vw - 72px);
    border-radius: 8px;
  }

  .coming-ticker__track {
    gap: 18px;
    padding: 10px 24px;
  }

  .coming-ticker__track span {
    font-size: 0.95rem;
  }
}

@media (max-width: 520px) {
  header {
    justify-content: space-between;
  }

  .logo img {
    height: 42px;
    max-width: 178px;
  }

  .hamburger {
    width: 42px;
    height: 42px;
  }

  .hero-title {
    max-width: 9ch;
    overflow-wrap: normal;
  }

  .hero-content {
    width: 100%;
  }

  .home-impact-strip,
  .faq-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-impact-strip .home-stat:nth-child(3) {
    grid-column: 1 / -1;
  }

  .home-stat strong,
  .faq-stats strong {
    font-size: clamp(1.9rem, 11vw, 3rem);
  }

  .organizers-section h2 {
    font-size: clamp(2rem, 10vw, 2.8rem);
    overflow-wrap: anywhere;
  }

  .organizers-img {
    width: min(100%, calc(100vw - 56px));
  }

  .organizers-section .coming-ticker {
    width: calc(100vw - 72px);
  }
}


.volunteer-closed-hero::before,
.volunteer-closed-hero::after,
.cause-hero::before,
.cause-hero::after,
.gallery-hero::before,
.gallery-hero::after,
.contact-hero::before,
.contact-hero::after {
  background: none !important;
  display: none !important;
}

.volunteer-closed-hero__media,
.cause-hero__media,
.gallery-hero,
.contact-hero {
  filter: none !important;
}


.hero,
.artists,
.vendor-hero,
.about-hero,
.volunteer-closed-hero,
.cause-hero,
.gallery-hero,
.contact-hero,
.faq-hero,
.program-coming-soon {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#background-video,
#background-video-artist,
.vendor-hero__media,
.about-hero__media,
.volunteer-closed-hero__media,
.cause-hero__media {
  z-index: 0 !important;
  filter: none !important;
}

.hero::before,
.vendor-hero::after,
.about-hero::before,
.volunteer-closed-hero::before,
.cause-hero::before,
.gallery-hero::before,
.contact-hero::before,
.faq-hero::before,
.program-coming-soon::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block !important;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16, 24, 32, 0.72) 0%, rgba(16, 24, 32, 0.48) 34%, rgba(16, 24, 32, 0.12) 66%, transparent 100%),
    linear-gradient(180deg, transparent 76%, rgba(244, 251, 255, 0.88) 100%) !important;
}

.artists::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block !important;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center 20%, rgba(16, 24, 32, 0.58) 0%, rgba(16, 24, 32, 0.34) 38%, rgba(16, 24, 32, 0.08) 70%, transparent 100%),
    linear-gradient(180deg, transparent 76%, rgba(244, 251, 255, 0.86) 100%) !important;
}

.hero-content,
.artist-teaser,
.artist-scroll-wrapper,
.vendor-hero__content,
.about-hero__content,
.volunteer-closed-hero__content,
.cause-hero__content,
.contact-hero__content,
.gallery-hero > div,
.faq-hero__content,
.program-coming-soon__inner {
  position: relative;
  z-index: 2 !important;
}

.hero-title,
.artist-teaser h2,
.vendor-hero h1,
.about-hero h1,
.volunteer-closed-hero h1,
.cause-hero h1,
.gallery-hero h1,
.contact-hero h1,
.faq-hero h1,
.program-coming-soon h1 {
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.72), 0 14px 38px rgba(0, 0, 0, 0.42) !important;
}

.hero-subtitle,
.artist-subtitle,
.vendor-hero__content > p:not(.vendor-kicker),
.about-hero__content > p:not(.section-kicker),
.volunteer-closed-hero p:not(.section-kicker),
.cause-hero p:not(.section-kicker),
.gallery-hero p:not(.section-kicker),
.contact-hero p:not(.section-kicker),
.faq-hero p:not(.section-kicker),
.program-coming-soon p:not(.section-kicker) {
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.72) !important;
}