/* ==========================================================================
   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);
}