/* ==========================================================================
   Tekia — tekia.newyorkbrass.com

   Palette is sampled from the band's own kit: crimson from the jackets,
   royal from the trousers, gold from the wordmark. Everything sits on a
   near-black navy so the gold reads as metal rather than yellow.
   ========================================================================== */

:root {
  --night:      #0A0C12;
  --night-2:    #0E1119;
  --ink:        #141824;
  --ink-2:      #1B2030;

  --royal:      #1B2A63;
  --royal-2:    #24397F;
  --crimson:    #B0202F;
  --crimson-2:  #C9303F;

  --gold:       #E8B443;
  --gold-lt:    #F7DC8A;
  --gold-dp:    #C88A22;

  --cream:      #F5EFE2;
  --muted:      #97A0B5;
  --line:       rgba(245,239,226,.12);

  --display: "Bebas Neue", "Arial Narrow", sans-serif;
  --body: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 56px);
  --r: 14px;

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

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.72;
  overflow-x: hidden;
  /* Faint horizontal rules, like the lines of a staff behind everything. */
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 119px, rgba(245,239,226,.022) 119px 120px);
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-lt); }

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

.sr, .skip {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  width: auto; height: auto; margin: 0; padding: 12px 18px;
  clip-path: none; background: var(--gold); color: var(--night);
  font-weight: 700; border-radius: 8px;
}

.wrap { width: min(var(--wrap), 100% - var(--pad) * 2); margin-inline: auto; }

.dot { color: var(--gold); padding: 0 .25em; }

/* ── type ───────────────────────────────────────────────────────────────── */

.h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 4.5rem);
  line-height: .96;
  letter-spacing: .01em;
  margin: 0 0 .5em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h2 em {
  font-style: normal;
  color: var(--gold);
  /* A thin gold underline that reads as a slur mark under the phrase.
     `clone` repeats it per line rather than leaving the last line bare. */
  background: linear-gradient(var(--gold), var(--gold)) bottom left / 100% 2px no-repeat;
  padding-bottom: .08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* The header floats over the page, so anchor jumps need clearance or the
   heading they land on ends up underneath it. */
:target, section[id] { scroll-margin-top: 88px; }

.eyebrow, .kicker {
  font-family: var(--body);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}

.lead { font-size: 1.16rem; color: #DCD6C8; }
.lead--wide { max-width: 62ch; }
p { margin: 0 0 1.1rem; }

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: .95em 1.7em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--body);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background-color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--gold {
  --btn-bg: linear-gradient(135deg, var(--gold-lt), var(--gold) 45%, var(--gold-dp));
  --btn-fg: #2A1A03;
  border-color: transparent;
  box-shadow: 0 10px 30px -12px rgba(232,180,67,.6);
}
.btn--gold:hover {
  color: #2A1A03;
  box-shadow: 0 16px 40px -12px rgba(232,180,67,.75);
}

.btn--ghost { border-color: rgba(245,239,226,.28); }
.btn--ghost:hover {
  border-color: var(--gold);
  background: rgba(232,180,67,.08);
  color: var(--cream);
}

.btn--sm { padding: .62em 1.15em; font-size: .76rem; }
.btn--wide { width: 100%; justify-content: center; }

/* ── header ─────────────────────────────────────────────────────────────── */

.head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease),
              backdrop-filter .4s var(--ease);
}
/* Unscrolled, the header sits directly on the hero footage. This keeps the
   nav legible without painting a solid bar across the artwork. */
.head::before {
  content: "";
  position: absolute; inset: 0 0 -30px;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(10,12,18,.82), rgba(10,12,18,0));
  opacity: 1;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.head.is-stuck::before { opacity: 0; }
.head.is-stuck {
  background: rgba(10,12,18,.88);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px #000;
}

.head__in {
  width: min(var(--wrap), 100% - var(--pad) * 2);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}

.head__brand { display: flex; align-items: center; gap: 12px; }
.head__icon { width: 40px; height: 40px; border-radius: 10px; }
.head__mark { width: 118px; height: auto; }
@media (max-width: 460px) { .head__mark { display: none; } }

/* ── nav ────────────────────────────────────────────────────────────────── */

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  margin: 0; padding: 0; list-style: none;
}
.nav__list a:not(.btn) {
  color: var(--cream);
  font-weight: 500;
  font-size: .93rem;
  position: relative;
  padding: 6px 0;
}
.nav__list a:not(.btn)::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__list a:not(.btn):hover::after,
.nav__list a[aria-current="true"]::after { transform: scaleX(1); }

.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: rgba(20,24,36,.7);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.nav__bars { display: grid; gap: 5px; }
.nav__bars i {
  display: block; width: 20px; height: 2px;
  background: var(--cream);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

@media (max-width: 900px) {
  .nav__toggle { display: flex; }
  .nav__list {
    position: fixed;
    inset: 74px 12px auto 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px;
    background: rgba(14,17,25,.97);
    backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: 0 30px 70px -30px #000;
    /* Collapsed by default; the toggle flips the open class. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease),
                visibility .3s;
  }
  .nav__list.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__list li:last-child { border: 0; padding-top: 10px; }
  .nav__list a:not(.btn) { display: block; padding: 13px 6px; }
  .nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 120px 0 90px;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__video,
.hero__media::before {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The footage is a backyard full of playground equipment, so it has to be
   pushed back before any type can sit on top of it. Most of that work is done
   by the scrim above; this keeps a little in reserve. */
.hero__video { filter: brightness(.62) saturate(1.12) contrast(1.03); }

/* `.hero__media` carries z-index -2, which makes it a stacking context, so the
   scrim needs a positive index to land on top of the video. A negative one put
   it underneath, where it did nothing at all. */
.hero__scrim {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    /* Pool of shadow directly behind the wordmark and the headline. */
    radial-gradient(66% 52% at 50% 46%, rgba(10,12,18,.8) 0%, rgba(10,12,18,0) 100%),
    /* Vignette, so the frame edges fall away instead of ending abruptly. */
    radial-gradient(125% 95% at 50% 28%, rgba(10,12,18,.25) 0%, rgba(10,12,18,.78) 66%, var(--night) 100%),
    linear-gradient(to top, var(--night) 1%, rgba(10,12,18,.62) 32%, rgba(10,12,18,.5) 68%, rgba(27,42,99,.42) 100%);
}

.hero__in {
  position: relative;
  text-align: center;
  width: min(var(--wrap), 100% - var(--pad) * 2);
  text-shadow: 0 2px 20px rgba(10,12,18,.85), 0 1px 3px rgba(10,12,18,.9);
}

.hero__mark { margin: 0 0 1.4rem; }
.hero__mark img {
  width: min(880px, 94%);
  margin-inline: auto;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,.9));
  animation: sheen 7s var(--ease) infinite;
}
@keyframes sheen {
  0%, 100% { filter: drop-shadow(0 18px 44px rgba(0,0,0,.9)) drop-shadow(0 0 0 rgba(232,180,67,0)); }
  50%      { filter: drop-shadow(0 18px 44px rgba(0,0,0,.9)) drop-shadow(0 0 30px rgba(232,180,67,.38)); }
}

.hero__line {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4.3vw, 3rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 .5rem;
}
.hero__sub { max-width: 58ch; margin: 0 auto 2.2rem; color: #E4DFD3; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

@media (max-width: 620px) {
  .hero { padding: 104px 0 76px; }
  .hero__mark { margin-bottom: 1rem; }
  .hero__sub { margin-bottom: 1.6rem; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
}

.hero__down {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  width: 30px; height: 48px;
  border: 1px solid rgba(245,239,226,.3);
  border-radius: 999px;
}
.hero__down span {
  position: absolute; left: 50%; top: 10px;
  width: 4px; height: 4px; margin-left: -2px;
  background: var(--gold); border-radius: 50%;
  animation: drop 1.9s var(--ease) infinite;
}
@keyframes drop {
  0%   { transform: translateY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(24px); opacity: 0; }
}

/* ── equalizer ──────────────────────────────────────────────────────────── */

.eq { display: flex; align-items: flex-end; gap: 2px; height: 15px; }
.eq i {
  display: block;
  width: 2.5px;
  height: 25%;
  background: var(--gold);
  border-radius: 2px;
  transform-origin: bottom;
  /* Idle shimmer; the analyser takes over and sets --h once audio plays. */
  animation: bounce 1.1s ease-in-out infinite alternate;
}
.eq i:nth-child(2n)  { animation-duration: .82s; }
.eq i:nth-child(3n)  { animation-duration: 1.35s; }
.eq i:nth-child(4n)  { animation-duration: .96s; }
.eq i:nth-child(5n)  { animation-duration: 1.55s; }
@keyframes bounce { from { height: 18%; } to { height: 100%; } }

.eq.is-live i { animation: none; height: calc(8% + var(--h, 0) * 92%); }
#listen[aria-pressed="true"] { border-color: var(--gold); background: rgba(232,180,67,.12); }

/* ── ticker ─────────────────────────────────────────────────────────────── */

.ticker {
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, var(--royal) -10%, var(--night-2) 40%, var(--crimson) 130%);
  overflow: hidden;
  padding: 15px 0;
}
.ticker--tight { padding: 11px 0; background: var(--night-2); margin-top: clamp(40px, 6vw, 72px); }

.ticker__row { display: flex; width: max-content; animation: slide 42s linear infinite; }
.ticker__row--rev { animation-duration: 56s; animation-direction: reverse; }
.ticker:hover .ticker__row { animation-play-state: paused; }

.ticker__set { display: flex; align-items: center; flex: 0 0 auto; }
.ticker__set b {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.1vw, 1.55rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cream);
}
.ticker__set b[lang="he"] { font-family: var(--body); font-weight: 700; font-size: clamp(.95rem, 1.8vw, 1.3rem); }
.ticker__set i { color: var(--gold); padding: 0 clamp(16px, 2.4vw, 34px); font-style: normal; }

@keyframes slide { to { transform: translateX(-50%); } }

/* ── shared section furniture ───────────────────────────────────────────── */

section { position: relative; }
.sound, .lineups, .simchas, .watch, .gallery, .credits, .contact {
  padding-block: clamp(64px, 9vw, 132px);
}

/* A photographic plate that sits behind a section at low opacity. */
.plate {
  position: absolute; inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  opacity: .17;
}
.plate::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(var(--night), rgba(10,12,18,.55) 45%, var(--night));
}
.plate--fixed { background-attachment: fixed; opacity: .2; }
/* iOS and most touch browsers either ignore a fixed attachment or scroll it
   badly, so those get the ordinary scrolling version. */
@media (hover: none), (max-width: 900px) {
  .plate--fixed { background-attachment: scroll; }
}

/* ── the band ───────────────────────────────────────────────────────────── */

.sound { background: linear-gradient(var(--night), var(--night-2)); }
.sound__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .sound__grid { grid-template-columns: 1fr; } }

.sound__fig { margin: 0; position: relative; }
.sound__fig img {
  width: 100%;
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -40px #000;
}
.sound__fig figcaption,
.player figcaption {
  margin-top: .85rem;
  font-size: .84rem;
  color: var(--muted);
  letter-spacing: .02em;
}

.facts {
  display: flex; flex-wrap: wrap;
  gap: clamp(20px, 4vw, 46px);
  margin: 2.2rem 0 0; padding: 1.6rem 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.facts li { display: grid; }
.facts b {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  line-height: 1;
  color: var(--gold);
}
.facts span { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ── line-ups ───────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 26px);
  margin-top: clamp(34px, 5vw, 58px);
}
@media (max-width: 980px) { .cards { grid-template-columns: 1fr; } }

.card {
  position: relative;
  padding: clamp(26px, 3vw, 38px);
  background: linear-gradient(160deg, var(--ink-2), var(--ink) 60%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform .4s var(--ease), border-color .4s var(--ease),
              box-shadow .4s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(232,180,67,.45);
  box-shadow: 0 40px 70px -40px #000, 0 0 0 1px rgba(232,180,67,.12) inset;
}
.card--lead {
  background: linear-gradient(160deg, var(--royal), var(--ink) 72%);
  border-color: rgba(232,180,67,.34);
}
.card__flag {
  position: absolute; top: -12px; left: clamp(26px, 3vw, 38px);
  margin: 0; padding: .35em 1em;
  background: var(--crimson);
  border-radius: 999px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.card__num {
  font-family: var(--display);
  font-size: clamp(3.6rem, 6vw, 5.4rem);
  line-height: .8;
  margin: 0 0 .3rem;
  color: transparent;
  background: linear-gradient(150deg, var(--gold-lt), var(--gold) 45%, var(--gold-dp));
  -webkit-background-clip: text;
  background-clip: text;
}
.card__title {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 .9rem;
}
.card__inst {
  display: flex; flex-wrap: wrap;
  gap: 6px 0;
  margin: 0 0 1.1rem; padding: 0;
  list-style: none;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.card__inst li:not(:last-child)::after { content: "/"; color: var(--gold); padding: 0 .6em; }
/* Only the unclassed body paragraphs. A bare `.card p` outranks the single
   classes above it and would flatten the numeral and the tag line. */
.card p:not([class]) { font-size: .98rem; }
.card__tag {
  margin: 1.2rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}

.note { margin-top: clamp(26px, 4vw, 44px); color: var(--muted); }

/* ── simchas ────────────────────────────────────────────────────────────── */

.simchas { background: linear-gradient(var(--night-2), var(--night)); }
/* 300px keeps this at three across on a desktop, so six tiles land as two
   even rows instead of a row of four and an orphan pair. */
.grid6 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(30px, 4vw, 52px);
}
.tile {
  padding: clamp(22px, 2.6vw, 32px);
  background: rgba(27,32,48,.55);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform .4s var(--ease), background-color .4s var(--ease),
              border-color .4s var(--ease);
}
.tile:hover {
  transform: translateY(-5px);
  background: rgba(27,42,99,.4);
  border-color: rgba(232,180,67,.36);
}
/* dir="rtl" defaults these to the right edge, which left the Hebrew and the
   English transliteration under it on opposite sides of the tile. */
.tile__he {
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.35;
  margin: 0;
  color: var(--gold);
  text-align: left;
}
.tile__en {
  font-family: var(--display);
  font-size: 1.12rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin: .1rem 0 .9rem;
  color: var(--cream);
}
.tile p:last-child { margin: 0; font-size: .96rem; color: #CFC9BB; }

/* ── watch ──────────────────────────────────────────────────────────────── */

.player { margin: clamp(28px, 4vw, 50px) 0 0; }
.player video {
  width: 100%;
  aspect-ratio: 1738 / 1080;
  background: #000;
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: 0 50px 100px -50px #000;
}

/* ── gallery ────────────────────────────────────────────────────────────── */

.gallery { background: linear-gradient(var(--night), var(--night-2)); overflow: hidden; }
.strip {
  display: flex;
  width: max-content;
  margin-top: clamp(28px, 4vw, 46px);
  animation: slide 64s linear infinite;
}
.strip:hover { animation-play-state: paused; }
/* Spacing lives on the item, not in `gap`. The -50% shift only lands
   seamlessly when one copy of the row measures exactly half the track,
   and a flex gap leaves half a gap unaccounted for. */
.strip figure { margin: 0 14px 0 0; flex: 0 0 auto; }
.strip img {
  width: clamp(210px, 26vw, 320px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  filter: saturate(.92);
  transition: filter .4s var(--ease), transform .4s var(--ease);
}
.strip figure:hover img { filter: saturate(1.1); transform: scale(1.03); }

/* ── credits ────────────────────────────────────────────────────────────── */

.credits { padding-bottom: 0; background: var(--night-2); }
.credits__in { max-width: 78ch; }

/* ── contact ────────────────────────────────────────────────────────────── */

.contact { background: linear-gradient(var(--night-2), var(--night) 55%); }
.contact__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

.contact__list { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.1rem; }
/* Two rows per item: the label, then the value on one line. Without the
   wrapping span each text node became its own grid row. */
.contact__list li { display: grid; gap: 2px; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.contact__k { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.contact__v { font-size: 1.02rem; }

.form {
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(160deg, var(--ink-2), var(--ink) 65%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 50px 90px -50px #000;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field > span {
  font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: #BFC6D6;
}
.field > span em { font-style: normal; text-transform: none; letter-spacing: .02em; color: var(--muted); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .85em 1em;
  background: rgba(10,12,18,.6);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--cream);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(10,12,18,.85);
}
.field input::placeholder, .field textarea::placeholder { color: #6C748A; }
/* Dark UA widgets for the date picker and select arrow. */
.field input, .field select, .field textarea { color-scheme: dark; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cf-turnstile { margin: 6px 0 18px; min-height: 65px; }

.form__msg { margin: 1rem 0 0; font-size: .95rem; min-height: 1.2em; }
.form__msg.is-ok { color: #7BD88F; }
.form__msg.is-bad { color: #FF8E8E; }
.form__fine { margin: .9rem 0 0; font-size: .78rem; color: var(--muted); }

button[disabled] { opacity: .55; cursor: progress; }

/* ── footer ─────────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); padding-block: clamp(40px, 5vw, 64px); background: var(--night); }
.foot__in {
  display: grid;
  grid-template-columns: 1.1fr .9fr .9fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 820px) { .foot__in { grid-template-columns: 1fr; } }

.foot__brand img { width: 168px; margin-bottom: 1rem; }
.foot__brand p { color: var(--muted); font-size: .92rem; margin: 0; }
.foot__nav { display: grid; gap: .55rem; }
.foot__nav a { color: var(--cream); font-size: .95rem; }
.foot__nav a:hover { color: var(--gold); }
.foot__meta { display: grid; gap: .55rem; font-size: .95rem; }
.foot__meta p { margin: .4rem 0 0; color: var(--muted); font-size: .84rem; }

/* ── reveal on scroll ───────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
/* Stagger siblings so a row of cards arrives as a phrase, not a block. */
.cards .reveal.is-in:nth-child(2) { transition-delay: .1s; }
.cards .reveal.is-in:nth-child(3) { transition-delay: .2s; }
.grid6 .reveal.is-in:nth-child(2) { transition-delay: .07s; }
.grid6 .reveal.is-in:nth-child(3) { transition-delay: .14s; }
.grid6 .reveal.is-in:nth-child(4) { transition-delay: .21s; }
.grid6 .reveal.is-in:nth-child(5) { transition-delay: .28s; }
.grid6 .reveal.is-in:nth-child(6) { transition-delay: .35s; }

/* ── motion and data preferences ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__mark img { animation: none; }
  /* Marquees become ordinary scrollable rows. */
  .ticker { overflow-x: auto; }
  .strip { animation: none; }
  .gallery { overflow-x: auto; }
  .plate--fixed { background-attachment: scroll; }
}

@media print {
  .head, .hero__media, .ticker, .hero__down, .form { display: none; }
  body { background: #fff; color: #000; }
}