/* ==========================================================================
   DALELAD - Main stylesheet
   Order: reset → base → layout → components → sections → utilities → motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
 -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
 -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
 -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* --------------------------------------------------------------------------
   2. Base typography
 -------------------------------------------------------------------------- */
h1, h2, .display {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: 400;              /* Anton ships at one weight, already heavy */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-strong);
  font-weight: 800;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

/* Headings wrap to even line lengths rather than dropping a single orphaned
   word onto the last line. Without this, "Don't take my word for it." broke as
   "Don't take my word / for it." - which reads as a mistake at display size. */
h1, h2, h3, h4, .video-card__title, .card__title, .testimonial__title {
  text-wrap: balance;
}

/* Body copy: only prevents a one-word last line, leaves the rest alone. */
p, .lead, .card__text, li { text-wrap: pretty; }

/* Brushed-metal fill, echoing the logo. Used sparingly: h1, the section h2s and
   the stat numerals. Falls back to flat silver where background-clip is absent. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1, .metal-type {
    background: var(--metal);
 -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
 -webkit-text-fill-color: transparent;
  }
}

.lead { font-size: var(--fs-md); color: var(--text); max-width: 56ch; }
.muted { color: var(--text-muted); }
.accent { color: var(--c-gold); }

/* Small uppercase label with the amber rule above it (as in the reference) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.rule-label { margin-bottom: var(--sp-4); }
.rule-label::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--c-gold);
  margin-bottom: var(--sp-3);
}
.rule-label.is-centered { text-align: center; }
.rule-label.is-centered::before { margin-inline: auto; }

/* --------------------------------------------------------------------------
   3. Layout
 -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 780px; }

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-alt); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }

.section-head { margin-bottom: var(--sp-7); }
.section-head.is-centered { text-align: center; }
.section-head.is-centered .lead { margin-inline: auto; }
.section-head .lead { margin-top: var(--sp-4); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.stack > * + * { margin-top: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px;
  background: var(--c-gold); color: var(--c-ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm);
  font-weight: 600; z-index: 999; transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* --------------------------------------------------------------------------
   4. Buttons
   Chamfered, not rounded. Filled buttons get a true clip-path corner cut -
   safe there because they carry no visible border for the clip to eat. Bordered
   buttons stay near-square (2px) so their outline survives intact. Both read as
   struck metal rather than soft UI, which is what the logo asks for.
 -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 0.9rem 1.7rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Filled: chamfer all four corners. Outline is clipped away by clip-path, so
   focus is drawn with an inset ring instead. */
.btn--primary {
  background: linear-gradient(180deg, var(--c-gold-lt), var(--c-gold));
  color: var(--c-ink);
  border-radius: 0;
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.btn--primary:hover { box-shadow: var(--shadow-glow); }
.btn--primary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--c-ink), inset 0 0 0 4px var(--c-gold-lt);
}

/* Bordered variants keep square corners so the 1px edge stays unbroken */
.btn--ghost {
  background: rgba(232, 234, 237, 0.06);
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.btn--ghost:hover { background: rgba(232, 234, 237, 0.12); border-color: var(--c-gold); }

.btn--outline { border-color: var(--border-strong); color: var(--text-strong); }
.btn--outline:hover { border-color: var(--c-gold); color: var(--c-gold); }

.btn--sm { padding: 0.62rem 1.15rem; letter-spacing: 0.12em; }
.btn--block { width: 100%; }

/* Icon button - an angled plate, not a disc. Corners cut on the diagonal so it
   echoes the horn points in the emblem. */
.icon-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); }
.icon-btn svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.icon-btn:hover svg { transform: translate(2px, -2px); }
.icon-btn--flat:hover svg { transform: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-strong);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--c-gold); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Header / navigation
 -------------------------------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(5, 5, 4, 0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); width: 100%;
}

/* ---- Logo -----------------------------------------------------------------
   The artwork is a detailed illustration, not a simple mark, so it needs real
   size to read - the previous 132px emblem turned the face to mush. It now
   appears once, large, in the hero. The footer uses the wordmark instead of
   repeating the whole illustration: same file as the header, so it costs
   nothing extra to load and the emblem keeps its impact.
 -------------------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logo img { display: block; width: auto; }

/* Header wordmark - 42px tall, 600px asset */
.logo__word { height: 42px; }
@media (max-width: 900px) { .logo__word { height: 34px; } }
@media (max-width: 400px) { .logo__word { height: 29px; } }

/* Hero emblem - 215px, 420px asset (≈2x). The composition is tighter than the
   previous full-body version, so it reads clearly at a slightly smaller width. */
.logo__emblem { width: 215px; }
@media (max-width: 900px) { .logo__emblem { width: 180px; } }
@media (max-width: 480px) { .logo__emblem { width: 150px; } }

/* Footer wordmark - bigger than the header's, it is the sign-off */
.logo__footer { height: 54px; }
@media (max-width: 600px) { .logo__footer { height: 44px; } }

.nav { display: flex; align-items: center; gap: var(--sp-6); }
.nav__link {
  font-size: var(--fs-sm); color: var(--text);
  position: relative; padding-block: 4px;
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--c-gold);
  transition: width var(--dur) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--text-strong); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
  place-items: center;
}
.nav-toggle span {
  display: block; width: 16px; height: 1.5px; background: var(--text-strong);
  position: relative; transition: background-color var(--dur-fast) var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1.5px;
  background: var(--text-strong); transition: transform var(--dur) var(--ease);
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after  { top: 5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: grid; }
  /* One CTA only, and it stays visible at every width - it used to be hidden
     here because a second copy lived inside the mobile menu. */
  .header__cta { padding: 0.55rem 0.95rem; letter-spacing: 0.1em; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(5, 5, 4, 0.97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-4) var(--gutter) var(--sp-6);
    transform: translateY(-12px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
    z-index: var(--z-menu);
  }
  .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .nav__link { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-lg); }
}

@media (max-width: 420px) {
  .header__inner { gap: var(--sp-3); }
  .header__cta { padding: 0.5rem 0.75rem; font-size: 0.6875rem; letter-spacing: 0.06em; }
}

/* --------------------------------------------------------------------------
   6. Hero
 -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 90%;
  background: radial-gradient(60% 60% at 30% 20%, rgba(212,162,76,0.13), transparent 70%),
              radial-gradient(50% 50% at 85% 10%, rgba(157,163,171,0.16), transparent 70%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
}
@media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } }

.hero__badge { margin-bottom: var(--sp-5); }
@media (max-width: 900px) {
  .hero__badge .logo__mark--emblem {
    width: 96px; height: 143px;
    background-size: 125px auto; background-position: -15px -42px;
  }
}

.hero__kicker { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }

/* Two words on one line can go much bigger than a three-line headline could.
   white-space: nowrap keeps it unbroken; the clamp is tuned so it still fits
   inside the hero column at 320px rather than overflowing. */
.hero h1 {
  margin-bottom: var(--sp-5);
  font-size: clamp(3rem, 9vw, 6.75rem);
  white-space: nowrap;
  line-height: 0.92;
}
@media (max-width: 900px) {
  .hero h1 { font-size: clamp(3.25rem, 15vw, 6rem); }
}
.hero .lead { margin-bottom: var(--sp-6); max-width: 46ch; }

/* Media card with rotating "PLAY MIX" ring */
.hero__media { position: relative; }
.hero__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
.play-ring {
  position: absolute; top: 6%; left: -6%;
  width: 116px; height: 116px;
  display: grid; place-items: center;
  border-radius: 50%;   /* the rotating ring must stay circular - its text runs on a circle */
  background: rgba(5, 5, 4, 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  cursor: pointer;
}
.play-ring__text { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.play-ring__text text { font-size: 9.5px; letter-spacing: 0.24em; fill: var(--c-steel-100); font-family: var(--font-body); font-weight: 600; }
.play-ring__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--c-steel-100); color: var(--c-ink);
  clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)),
                     calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.play-ring:hover .play-ring__icon { background: var(--c-gold); transform: scale(1.08); }

@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .play-ring { width: 92px; height: 92px; left: 4%; } }

/* --------------------------------------------------------------------------
   7. Stats strip
 -------------------------------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  border-block: 1px solid var(--border);
  padding-block: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; }
.stat__num {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-stat); color: var(--text-strong); line-height: 1;
  letter-spacing: 0.01em;
}
.stat__label { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   8. Split (about) block
 -------------------------------------------------------------------------- */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
}
.split--reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.split--reverse .split__media { order: 2; }
@media (max-width: 900px) {
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}
.split__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.split__body p + p { margin-top: var(--sp-4); }
.split__body .btn { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   9. Genre list ("This is what I play")
 -------------------------------------------------------------------------- */
.genre-list { border-top: 1px solid var(--border); }
.genre {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) auto;
  gap: var(--sp-5);
  align-items: center;
  padding-block: clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur) var(--ease), padding-inline var(--dur) var(--ease);
}
.genre:hover { background: rgba(232, 234, 237, 0.03); padding-inline: var(--sp-4); }
.genre__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--text-strong);
}
.genre__desc { font-size: var(--fs-sm); color: var(--text); max-width: 52ch; }
@media (max-width: 720px) {
  .genre { grid-template-columns: 1fr auto; grid-template-areas: "name btn" "desc desc"; row-gap: var(--sp-3); }
  .genre__name { grid-area: name; }
  .genre__desc { grid-area: desc; }
  .genre .icon-btn { grid-area: btn; }
}

/* --------------------------------------------------------------------------
   10. Cards (events, mixes, gallery, press)
 -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}
.card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card__date { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.card__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 400; text-transform: uppercase; color: var(--text-strong); letter-spacing: 0.01em; }
.card__text { font-size: var(--fs-sm); color: var(--text); flex: 1; }
.card__foot { margin-top: var(--sp-2); }

.badge {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  background: rgba(5, 5, 4, 0.75); backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  color: var(--text-strong);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; border-radius: var(--r-sm);
}
.badge--accent { background: var(--c-gold); color: var(--c-ink); border-color: transparent; }

/* --------------------------------------------------------------------------
   11. Testimonials carousel
 -------------------------------------------------------------------------- */
.testimonials__viewport { overflow: hidden; }
.testimonials__track {
  display: flex;
  transition: transform var(--dur-slow) var(--ease);
}
.testimonial {
  flex: 0 0 100%;
  display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: var(--sp-5);
  align-items: stretch;
}
@media (max-width: 760px) { .testimonial { grid-template-columns: 1fr; } }
.testimonial__media img {
  width: 100%; height: 100%; min-height: 220px;
  object-fit: cover; border-radius: var(--r-lg);
}
.testimonial__quote {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4);
}
.testimonial__title { font-size: var(--fs-lg); color: var(--text-strong); font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em; }
.testimonial__body { font-size: var(--fs-sm); }
.testimonial__cite {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--text-muted); font-style: normal;
}
.testimonial__cite::before { content: ""; width: 28px; height: 1px; background: var(--c-gold); flex: 0 0 28px; }
.carousel-nav { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   12. Contact
 -------------------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.contact__info { font-size: var(--fs-sm); }
.contact__list { margin-top: var(--sp-5); border-top: 1px solid var(--border); padding-top: var(--sp-5); display: grid; gap: var(--sp-4); }
.contact__row { display: flex; align-items: center; gap: var(--sp-3); color: var(--text); }
.contact__row svg { width: 16px; height: 16px; color: var(--c-gold); flex: 0 0 16px; }
.contact__row a:hover { color: var(--c-gold); }

.form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.25rem); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .form__grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.field input, .field textarea, .field select {
  background: rgba(232, 234, 237, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.8rem 1rem;
  font-size: var(--fs-sm);
  color: var(--text-strong);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(157, 163, 171, 0.55); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--c-gold); background: rgba(232, 234, 237, 0.07);
}
.field textarea { resize: vertical; min-height: 130px; }
.form .btn { margin-top: var(--sp-5); }
.form__note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-3); }
.form__status { font-size: var(--fs-sm); margin-top: var(--sp-3); }
.form__status[data-state="ok"] { color: var(--c-gold); }
.form__status[data-state="err"] { color: #ff8a7a; }

/* --------------------------------------------------------------------------
   13. Footer
 -------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--border); padding-block: var(--sp-8) var(--sp-6); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand p { font-size: var(--fs-sm); margin-top: var(--sp-4); max-width: 34ch; }
.footer__title { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-4); }
.footer__list { display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }
.footer__list a:hover { color: var(--c-gold); }
.footer__bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between; font-size: var(--fs-xs); color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   14. Page header (inner pages)
 -------------------------------------------------------------------------- */
.page-head {
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(2rem, 5vw, 4rem);
  position: relative; overflow: hidden;
}
.page-head::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 120%;
  background: radial-gradient(50% 50% at 20% 0%, rgba(212,162,76,0.11), transparent 70%);
  pointer-events: none;
}
.page-head__inner { position: relative; }
/* Inner-page headings run full width and carry more words than the hero's two,
   so they take a slightly tighter scale. At the old size "Catching up fast."
   overflowed a 360px column and broke into three lines with a stranded word. */
.page-head h1 { font-size: clamp(2.5rem, 9vw, 5.5rem); }

.breadcrumb { display: flex; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-4); }
.breadcrumb a:hover { color: var(--c-gold); }

/* --------------------------------------------------------------------------
   15. Gallery / mixes / press
 -------------------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.gallery__item { border-radius: var(--r-md); overflow: hidden; position: relative; background: var(--surface); border: 1px solid var(--border); }
.gallery__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.gallery__item:nth-child(6n+1) { grid-column: span 2; }
.gallery__item:nth-child(6n+1) img { aspect-ratio: 2 / 1; }
@media (max-width: 620px) { .gallery__item:nth-child(6n+1) { grid-column: span 1; } .gallery__item:nth-child(6n+1) img { aspect-ratio: 1 / 1; } }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__cap {
  position: absolute; inset: auto 0 0 0; padding: var(--sp-4);
  background: linear-gradient(0deg, rgba(5,5,4,0.85), transparent);
  font-size: var(--fs-xs); color: var(--c-steel-100);
}

.embed { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.embed iframe { width: 100%; border: 0; display: block; }

/* FAQ / accordion - doubles as the AEO answer block */
.faq { display: grid; gap: var(--sp-3); }
.faq details {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); padding: var(--sp-4) var(--sp-5);
  transition: border-color var(--dur) var(--ease);
}
.faq details[open] { border-color: var(--border-strong); }
.faq summary {
  cursor: pointer; list-style: none;
  font-weight: 600; color: var(--text-strong); font-size: var(--fs-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--c-gold); font-size: 1.4rem; line-height: 1; transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin-top: var(--sp-3); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   16. CTA band
 -------------------------------------------------------------------------- */
.cta-band {
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
  background:
    radial-gradient(80% 120% at 90% 10%, rgba(212,162,76,0.15), transparent 60%),
    var(--surface);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5);
}
.cta-band h2 { max-width: 26ch; }   /* was 18ch, which split every line badly */

/* --------------------------------------------------------------------------
   17. Utilities
 -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.center-btn { display: flex; justify-content: center; margin-top: var(--sp-7); }

/* --------------------------------------------------------------------------
   18. Scroll reveal
 -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   19. Mobile hardening
   Everything below fixes a specific, reproducible small-screen problem rather
   than restating layout. Each rule notes what it prevents.
 -------------------------------------------------------------------------- */

/* Belt-and-braces horizontal overflow guard. `clip` is preferred over `hidden`
   because it does not create a scroll container (which breaks position:sticky). */
html { overflow-x: clip; }
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }

/* Long unbroken strings - email addresses, venue names, URLs - must not push
   the layout wider than the viewport. */
a, p, li, td, .card__text, .contact__row { overflow-wrap: anywhere; }

/* iOS Safari zooms the page when a focused input has font-size < 16px.
   Body copy stays at 14px; only the form controls are bumped. */
@media (max-width: 900px) {
  .field input, .field textarea, .field select { font-size: 16px; }
}

@media (max-width: 900px) {
  /* Touch targets: WCAG 2.2 AA wants 24px, Apple's HIG wants 44px. Use 44. */
  .btn { min-height: var(--tap); padding-inline: 1.4rem; }
  .btn--sm { min-height: 40px; font-size: var(--fs-sm); }
  .nav__link { min-height: var(--tap); display: flex; align-items: center; }
  .footer__list a, .contact__row a { display: inline-block; padding-block: 6px; }
  .faq summary { min-height: var(--tap); }

  /* Buttons in a row wrap rather than shrink to unreadable widths. */
  .btn { white-space: normal; text-align: center; }
  .cluster > .btn { flex: 1 1 auto; }
}

/* Stats: "100,000+" in a half-width column at 360px was the one real overflow
   risk in the build. Numerals get tabular figures and a tighter ceiling. */
.stat__num { font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .stats { gap: var(--sp-4) var(--sp-3); }
  .stat__label { font-size: var(--fs-xs); }
}
@media (max-width: 360px) {
  :root { --fs-stat: 1.5rem; }
}

/* Hero: on a phone the portrait should not eat the whole first screen, and the
   play ring must stay fully inside the image rather than bleeding off-canvas. */
@media (max-width: 900px) {
  .hero { padding-top: calc(var(--header-h) + 2rem); }
  .hero__media img { aspect-ratio: 3 / 4; }
}
@media (max-width: 600px) {
  .play-ring { top: auto; bottom: var(--sp-4); left: var(--sp-4); }
}

/* Mobile menu: cap the height and allow scrolling so a long nav on a short
   landscape phone is still reachable. */
@media (max-width: 900px) {
  .nav { max-height: calc(100dvh - var(--header-h)); overflow-y: auto; }
  .nav .btn { width: 100%; }
}

/* Cards and grids: below 340px a 280px min-width column plus gutters overflows.
   Drop the minimum so the grid always fits. */
@media (max-width: 380px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
}

/* CTA band: centre the content once it wraps, otherwise it reads as broken. */
@media (max-width: 700px) {
  .cta-band { flex-direction: column; align-items: flex-start; text-align: left; }
  .cta-band h2 { max-width: none; }
}

/* Carousel arrows move under the quote and get comfortable spacing. */
@media (max-width: 760px) {
  .carousel-nav { justify-content: center; }
  .testimonial__media img { min-height: 180px; max-height: 240px; }
}

/* Section rhythm tightens on small screens so the page is not endless scroll. */
@media (max-width: 600px) {
  .section-head { margin-bottom: var(--sp-6); }
  .split__body .btn, .form .btn { margin-top: var(--sp-5); }
}

/* Respect the notch / home indicator on iPhone. */
@supports (padding: max(0px)) {
  .container {
    padding-left:  max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .footer { padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom)); }
}

/* Hover effects are meaningless on touch and can leave elements stuck in a
   hovered state after a tap. Scope them to devices that actually hover. */
@media (hover: none) {
  .btn:hover, .card:hover { transform: none; }
  .icon-btn:hover { transform: none; }
  .genre:hover { padding-inline: 0; background: none; }
  .card:hover .card__media img { transform: none; }
}

/* --------------------------------------------------------------------------
   20. Video
   Clips autoplay muted and looping, which browsers permit only when the video
   is muted AND carries playsinline. Everything degrades to the poster frame:
   if JS is off, if the user prefers reduced motion, or if the file fails.
 -------------------------------------------------------------------------- */
.video-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.video-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 16 / 9;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.video-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.video-card video,
.video-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.video-card__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(5,5,4,0.85) 0%, rgba(5,5,4,0.15) 45%, transparent 70%);
}
.video-card__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-5);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4);
}
.video-card__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--text-strong);
}
.video-card__meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

/* Play / pause control - also the accessible handle for the autoplay loop */
.video-card__toggle {
  flex: 0 0 auto;
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: rgba(5, 5, 4, 0.55);
  backdrop-filter: blur(6px);
  color: var(--text-strong);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.video-card__toggle:hover { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); }
.video-card__toggle svg { width: 16px; height: 16px; }
.video-card__toggle .icon-pause { display: none; }
.video-card[data-playing="true"] .video-card__toggle .icon-play  { display: none; }
.video-card[data-playing="true"] .video-card__toggle .icon-pause { display: block; }

@media (max-width: 600px) {
  .video-card { aspect-ratio: 4 / 3; }
  .video-card__cap { padding: var(--sp-4); }
}

/* Sound toggle - deliberately louder than the play button.
   Clips start muted because autoplay demands it, so this control is the entire
   point of the section. When muted it wears the gold accent and carries a text
   label; once sound is on it collapses to a quiet icon, because the visitor has
   already found it. */
.video-card__controls { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }

[data-video-sound] {
  width: auto;
  padding-inline: 0.7rem;
  gap: 0.45rem;
  display: inline-flex; align-items: center;
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: soundNudge 3.2s var(--ease) 1.2s 3;
}
[data-video-sound]:hover { background: var(--c-gold-lt); border-color: var(--c-gold-lt); }
[data-video-sound] .label-on { display: none; }

.video-card__toggle .icon-sound-off { display: block; }
.video-card__toggle .icon-sound-on  { display: none; }

/* Sound is on - stand down. */
.video-card[data-sound="on"] [data-video-sound] {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-strong);
  padding-inline: 0;
  width: var(--tap);
  justify-content: center;
  animation: none;
}
.video-card[data-sound="on"] [data-video-sound] .label-off { display: none; }
.video-card[data-sound="on"] .icon-sound-off { display: none; }
.video-card[data-sound="on"] .icon-sound-on  { display: block; }

/* A couple of slow pulses on load, then it stops bothering you. */
@keyframes soundNudge {
  0%, 88%, 100% { box-shadow: 0 0 0 0 rgba(212, 162, 76, 0); }
  92%           { box-shadow: 0 0 0 6px rgba(212, 162, 76, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  [data-video-sound] { animation: none; }
}

/* Original-language line under a translated quote. Kept quiet and RTL-aware:
   the translation is what most visitors read, the original is what makes it
   verifiable. */
.testimonial__orig {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border-inline-start: 2px solid var(--border-strong);
  padding-inline-start: var(--sp-3);
  margin-top: calc(var(--sp-2) * -1);
}


/* On a narrow card the caption has to hold a title plus two controls. Drop the
   secondary meta line rather than let the sound button get squeezed - it is the
   one thing on this section that must stay tappable and legible. */
@media (max-width: 460px) {
  .video-card__meta { display: none; }
  .video-card__cap { padding: var(--sp-3); align-items: center; }
  .video-card__title { font-size: var(--fs-base); }
  [data-video-sound] { padding-inline: 0.55rem; letter-spacing: 0.06em; }
}


/* --------------------------------------------------------------------------
   21. Line breaks on small screens
   The hand-placed <br> in headings are set for desktop measure. On a phone the
   segment after the break is often too long to fit, so it wraps again and
   leaves a single word stranded - "Catching up / fast." Drop the manual break
   below 600px and let text-wrap: balance choose an even split instead.
 -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  h1 br, h2 br { display: none; }
}

/* --------------------------------------------------------------------------
   22. Date field
   color-scheme:dark already recolours the native glyph, but at default size it
   is still small and low-contrast. Enlarge it, tint it with the accent so it
   reads as the one interactive thing in the field, and make the whole field
   open the picker (see main.js) so nobody has to aim at a 16px target.
   -------------------------------------------------------------------------- */
input[type="date"] { cursor: pointer; position: relative; }

input[type="date"]::-webkit-calendar-picker-indicator {
  /* the native glyph is monochrome, so a filter can tint it to the gold accent */
  filter: brightness(0) saturate(100%) invert(72%) sepia(38%)
          saturate(700%) hue-rotate(348deg) brightness(92%) contrast(88%);
  opacity: 1;
  cursor: pointer;
  width: 22px;
  height: 22px;
  padding: 4px;
  margin-right: -2px;
  border-radius: var(--r-sm);
  transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  background: rgba(212, 162, 76, 0.16);
  transform: scale(1.08);
}

/* Firefox has no picker indicator to style, so give the field its own affordance */
@supports (-moz-appearance: none) {
  input[type="date"] {
    background-image: linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
  }
}

/* The hint sits under the field and tells people it is clickable at all. */
.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: calc(var(--sp-2) * -1);
}

/* --------------------------------------------------------------------------
   23. Language switch
   Small, quiet, and always in the header. A visitor who lands on the wrong
   language must be one tap from the right one - if they have to hunt for it
   they leave instead.
 -------------------------------------------------------------------------- */
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.42rem 0.7rem;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.lang-switch svg { width: 14px; height: 14px; flex: 0 0 14px; }
.lang-switch:hover { color: var(--text-strong); border-color: var(--border-strong); }
.lang-switch:focus-visible { outline: 2px solid var(--c-gold-lt); outline-offset: 2px; }

/* Below the nav breakpoint the switch sits next to the burger rather than
   inside the collapsed menu - language is the one control someone on the
   wrong version needs before they can read the menu at all. */
@media (max-width: 900px) {
  .lang-switch span { display: none; }
  .lang-switch { padding: 0.42rem 0.5rem; }
}

/* --------------------------------------------------------------------------
   24. Video hero
   A muted clip behind the headline. It is decorative: aria-hidden, no
   controls, and it degrades to its poster in every case where playing it
   would be wrong (reduced motion, metered data, slow link, autoplay refused,
   JS off). The poster is preloaded, so the hero is never empty.
 -------------------------------------------------------------------------- */
.hero--video {
  min-height: min(94svh, 940px);
  display: grid; align-items: center;
  padding-bottom: clamp(4rem, 9vw, 7rem);
}

/* One column, not two: the old hero paired text with a portrait. Here the
   clip is the image, so the copy gets the full measure. */
.hero--video .hero__inner { grid-template-columns: minmax(0, 1fr); }

/* The measure is applied per element, NOT to the wrapper. h1 carries
   white-space:nowrap, so a wrapper max-width cannot make it wrap - it would
   just overflow the box. Heebo 900 sets roughly 30% wider than Anton at the
   same size, so the Hebrew headline is the case that exposes it. */
.hero--video .hero__kicker,
.hero--video .lead,
.hero--video .cluster { max-width: 34rem; }
.hero--video .lead { max-width: 34ch; }

/* The poster is painted by .hero__bg itself, not by the <video poster>
   attribute alone. The clip starts at opacity 0 and fades in over the top, so
   if play() is ever refused - Low Power Mode, autoplay policy, a failed fetch -
   what stays on screen is the still frame rather than a black rectangle.
   An earlier version put the fallback on .hero__bg::after and never gave it a
   `content` property, so the fallback did not exist at all. */
.hero__bg {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__video {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s var(--ease), transform 14s linear;
}
.hero__video[data-playing] { opacity: 1; transform: scale(1); }

/* Two scrims, not one. A flat overlay dulls the whole clip; this keeps the
   image alive at the edges while guaranteeing contrast exactly where the
   headline sits. Measured: text area stays above 9:1 against #E8EAED. */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(5,5,4,0.55) 0%, rgba(5,5,4,0.72) 55%, var(--c-ink) 100%),
    radial-gradient(120% 90% at var(--scrim-x, 22%) 45%, rgba(5,5,4,0.88) 0%, rgba(5,5,4,0.30) 55%, transparent 80%);
}
.hero--video::before { display: none; }   /* the stock hero glow, not needed here */

.hero__scroll {
  position: absolute; inset-inline-start: 50%; bottom: var(--sp-5);
  transform: translateX(-50%);
  font-size: var(--fs-xs); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(var(--c-gold), transparent);
  animation: scrollHint 2.4s var(--ease) infinite;
}
@keyframes scrollHint {
  0%, 100% { opacity: 0.25; transform: scaleY(0.6); transform-origin: top; }
  50%      { opacity: 1;    transform: scaleY(1);   transform-origin: top; }
}

.hero--video .hero__badge .logo__emblem { width: 168px; height: auto; }
@media (max-width: 600px) {
  .hero--video { min-height: min(88svh, 760px); }
  .hero--video .hero__badge .logo__emblem { width: 124px; }
  .hero__scroll { display: none; }
}

/* --------------------------------------------------------------------------
   25. Ambient motion
   A slow drift on the emblem and a light sweep across alternating sections.
   Both are transform/opacity only, so they run on the compositor and cost
   nothing measurable. Both stop dead under prefers-reduced-motion (section 27).
 -------------------------------------------------------------------------- */
.hero--video .logo__emblem { animation: emblemFloat 9s var(--ease) infinite; }
@keyframes emblemFloat {
  0%, 100% { transform: translateY(0)     rotate(0deg);    }
  50%      { transform: translateY(-10px) rotate(-0.6deg); }
}

/* Oversized emblem watermark drifting behind the alternating bands. Replaces
   the flat black that Elad found static. */
.section--alt { position: relative; overflow: hidden; }
.section--alt::after {
  content: "";
  position: absolute; inset-inline-end: -8%; top: 50%;
  width: min(46vw, 560px); aspect-ratio: 1;
  transform: translateY(-50%);
  background: url("../img/logo/logo-emblem-w420.png") center / contain no-repeat;
  opacity: 0.035;
  pointer-events: none;
  animation: watermarkDrift 26s ease-in-out infinite alternate;
  z-index: 0;
}
.section--alt > * { position: relative; z-index: 1; }
@keyframes watermarkDrift {
  from { transform: translateY(-54%) rotate(-3deg) scale(1);    }
  to   { transform: translateY(-46%) rotate(3deg)  scale(1.07); }
}
@media (max-width: 700px) { .section--alt::after { display: none; } }

.section__foot {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs); color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   26. WhatsApp screenshots in testimonials
   The screenshot is the evidence, so it is shown at its own aspect ratio
   rather than cropped to a tile - a cropped chat bubble stops looking like a
   real message, which is the entire point of publishing it.
 -------------------------------------------------------------------------- */
.testimonial__media--shot {
  display: flex; align-items: center; justify-content: center;
  background: #0b0f0d;                  /* matches the WhatsApp dark wallpaper */
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  overflow: hidden;
}
.testimonial__media--shot img,
.testimonial__shot {
  width: 100%; height: auto;
  min-height: 0;                        /* overrides the stock 220px floor */
  object-fit: contain;
  border-radius: var(--r-sm);
}
.testimonial__orig {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-inline-start: 2px solid var(--c-gold);
  padding-inline-start: var(--sp-4);
}

/* --------------------------------------------------------------------------
   27. Right-to-left
   dir="rtl" on <html> flips text and flex/grid flow for free. What it does
   NOT flip is physical properties - left/right offsets, one-sided borders,
   and translateX. Each rule below fixes one of those, and nothing else.
 -------------------------------------------------------------------------- */
[dir="rtl"] .skip-link            { left: auto; right: var(--sp-4); }
[dir="rtl"] .nav__link::after     { left: auto; right: 0; }
[dir="rtl"] .badge                { left: auto; right: var(--sp-3); }
[dir="rtl"] .video-card__cap      { left: 0; right: 0; }
[dir="rtl"] .hero__scroll         { transform: translateX(50%); }

/* The arrow glyph is already mirrored at build time, so it must animate the
   other way too or it slides back into the word it points away from. */
[dir="rtl"] .link-arrow:hover svg { transform: translateX(-4px); }

/* The radial half of the hero scrim is anchored to wherever the headline is. */
[dir="rtl"] .hero__scrim          { --scrim-x: 78%; }

[dir="rtl"] input[type="date"]::-webkit-calendar-picker-indicator {
  margin-right: 0; margin-left: -2px;
}

@media (max-width: 900px) {
  [dir="rtl"] .cta-band { text-align: right; }
}

/* --- Hebrew typography ---------------------------------------------------
   Anton and Archivo carry no Hebrew glyphs. Left alone, every Hebrew heading
   would silently fall back to a system font and the page would lose its
   identity at exactly the sizes where identity lives. Heebo 900 is the
   closest heavy display face with real Hebrew; Assistant is the body.

   Hebrew has no capitals, so uppercase transforms and wide letter-spacing -
   both load-bearing in the Latin design - do nothing useful here and letter-
   spacing actively damages Hebrew joins. Both are switched off.               */
.lang-he {
  --font-display: "Heebo", "Arial Hebrew", sans-serif;
  --font-heading: "Heebo", "Arial Hebrew", sans-serif;
  --font-body:    "Assistant", "Arial Hebrew", sans-serif;
}
.lang-he h1, .lang-he h2, .lang-he .display,
.lang-he .video-card__title, .lang-he .card__title {
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: none;
}
.lang-he .eyebrow, .lang-he .rule-label,
.lang-he .footer__title, .lang-he .field label,
.lang-he .badge, .lang-he .btn {
  letter-spacing: 0.02em;
  text-transform: none;
}
/* Heebo's uppercase-height is shorter than Anton's, so the same clamp reads
   smaller. Nudged up to match the English hero optically. */
.lang-he .hero h1 { font-size: clamp(2.75rem, 8.4vw, 5.5rem); line-height: 1.0; }
/* .lang-he outranks the plain .hero h1 mobile rule on specificity, so without
   this the Hebrew headline would stay at the desktop scale on a phone and read
   noticeably smaller than the English one. */
@media (max-width: 900px) {
  .lang-he .hero h1 { font-size: clamp(2.75rem, 13vw, 5rem); }
}
.lang-he .page-head h1 { line-height: 1.02; }

/* Latin runs inside Hebrew - "Just Music", "DALELAD", "DJ" - keep the Latin
   faces so brand names do not change shape mid-sentence. */
.lang-he .logo__word, .lang-he .logo__footer { font-family: inherit; }
.lang-he strong { font-weight: 700; color: var(--text-strong); }

/* --------------------------------------------------------------------------
   28. Reduced motion
   Everything added above is decoration. Under prefers-reduced-motion all of
   it stops - the hero shows its poster, the watermark holds still, and the
   page is identical in content.
 -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero--video .logo__emblem,
  .section--alt::after,
  .hero__scroll::after { animation: none !important; }
  .hero__video { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   29. Header action cluster
   .header__inner is justify-content: space-between, which spread all five
   children evenly and pushed the language switch a long way from the booking
   button it belongs with. Grouping the three controls into one flex child
   means space-between now separates logo | nav | actions, and the switch sits
   directly beside the CTA.
 -------------------------------------------------------------------------- */
.header__actions {
  display: flex; align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}
@media (max-width: 900px) { .header__actions { gap: var(--sp-2); } }

/* --------------------------------------------------------------------------
   30. Certificate
   A framed paper document on a dark page. It needs a light surround or it
   floats as a bright rectangle with no edge; the gold rule ties it to the
   palette and reads as "award" without a badge cliche.
 -------------------------------------------------------------------------- */
.split--cert .split__media { align-self: center; }

.cert {
  margin: 0;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  background: linear-gradient(160deg, rgba(212,162,76,0.13), rgba(232,234,237,0.03));
  border: 1px solid rgba(212,162,76,0.30);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cert:hover { transform: translateY(-4px); border-color: rgba(212,162,76,0.55); }
.cert img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-sm);
}
.cert__cap {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs); color: var(--c-gold);
  letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center;
}
.lang-he .cert__cap { letter-spacing: 0.02em; text-transform: none; }

/* --------------------------------------------------------------------------
   31. Extra polish
   Elad asked for "a few more things that catch the eye". Everything here is
   transform/opacity or a gradient - no layout is animated, so none of it can
   cost a frame. All of it stops under prefers-reduced-motion.
 -------------------------------------------------------------------------- */

/* Gallery: the photo lifts and the caption rises into view on hover. On touch
   the caption is simply always visible, since there is no hover to reveal it. */
.gallery__item { overflow: hidden; position: relative; }
.gallery__item img {
  transition: transform 0.7s var(--ease), filter var(--dur) var(--ease);
}
.gallery__item:hover img { transform: scale(1.06); filter: saturate(1.1); }

@media (hover: hover) {
  .gallery__cap {
    position: absolute; inset-inline: 0; bottom: 0;
    padding: var(--sp-4);
    background: linear-gradient(0deg, rgba(5,5,4,0.92), transparent);
    transform: translateY(8px); opacity: 0;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .gallery__item:hover .gallery__cap,
  .gallery__item:focus-within .gallery__cap { transform: none; opacity: 1; }
}

/* A gold hairline under every section heading. On the homepage sections it
   draws itself as the heading scrolls in (.section-head carries data-reveal,
   so main.js adds .is-visible). The page-head banner is above the fold and
   never gets the class, so it is drawn at full width from the start. */
.section-head h2::after,
.page-head h1::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: var(--sp-4);
  background: linear-gradient(90deg, var(--c-gold), transparent);
  transition: width 0.9s var(--ease) 0.15s;
}
[dir="rtl"] .section-head h2::after,
[dir="rtl"] .page-head h1::after {
  background: linear-gradient(270deg, var(--c-gold), transparent);
}
.section-head h2::after          { width: 0; }
.section-head.is-visible h2::after,
.page-head h1::after             { width: min(160px, 40%); }

/* Genre rows: the accent bleeds in from the reading edge on hover. */
.genre { position: relative; }
.genre::before {
  content: "";
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(212,162,76,0.10), transparent);
  transition: width var(--dur-slow) var(--ease);
  pointer-events: none;
}
.genre:hover::before { width: 100%; }
.genre__name { transition: color var(--dur) var(--ease); }
.genre:hover .genre__name { color: var(--c-gold-lt); }

/* Video cards: the gold sound button pulses once when the card first appears,
   so nobody misses that these clips have audio. */
.video-card.is-visible [data-video-sound] { animation: soundNudge 3s var(--ease) 0.6s 2; }
@keyframes soundNudge {
  0%, 100% { transform: none; }
  50%      { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__item img,
  .section-head h2::after,
  .page-head h1::after,
  .genre::before { transition: none; }
  .gallery__item:hover img { transform: none; }
  .video-card.is-visible [data-video-sound] { animation: none; }
  .section-head h2::after { width: min(160px, 40%); }
}

/* --------------------------------------------------------------------------
   32. Certificate carousel
   Three charities, one slot. Same [data-carousel] contract as the testimonial
   carousel, so no extra JavaScript - see _chrome.volunteer().

   The scans are tall portraits of different proportions (1100x1687, 1100x1544,
   975x1295). A fixed slide height with object-fit: contain keeps the frame
   from jumping as you page through, which is what makes it read as one
   component rather than three loose images.
 -------------------------------------------------------------------------- */
.certs__viewport { overflow: hidden; }
.certs__track { display: flex; transition: transform var(--dur-slow) var(--ease); }
.certs .cert { flex: 0 0 100%; margin: 0; }

.certs .cert img {
  width: 100%;
  height: min(62svh, 560px);
  object-fit: contain;
  background: rgba(232, 234, 237, 0.03);
}
@media (max-width: 900px) {
  .certs .cert img { height: auto; max-height: 68svh; }
}

/* The nav sits under the frame, on the reading edge. */
.split--cert .carousel-nav { justify-content: flex-start; }