/* ZOYCAR Events: events, entertainment and experiences. Logo gold and black; Bodoni Moda (as in the logo) with Inter.
   Contrast checked: white on button gold #8B6A2B 4.9:1, gold text #765A22 6.1:1 on white,
   bright logo gold #D4AF6A only on the near-black background (9.6:1). */
:root {
  --font-display: "Bodoni Moda", Didot, "Bodoni MT", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 500;
  --display-tracking: 0;
  --eyebrow-tracking: 0.22em;
  --c-bg: #FFFFFF;
  --c-surface: #F7F4EE;
  --c-ink: #141310;
  --c-muted: #5D5951;
  --c-line: rgba(20, 19, 16, 0.12);
  --c-accent: #8B6A2B;
  --c-accent-ink: #FFFFFF;
  --c-accent-text: #765A22;
  --c-dark: #0E0D0B;
  --c-dark-ink: #F3EEE4;
  --c-dark-muted: #C3BBAD;
  --c-dark-line: rgba(243, 238, 228, 0.14);
  --radius: 2px;
  --radius-lg: 4px;
}
.brand__logo { height: 48px; }
.footer-brand__logo { height: 60px; }
.section--dark .eyebrow, .hero .eyebrow::before, .page-hero--image .eyebrow::before, .cta .eyebrow { color: #D4AF6A; }
.hero .eyebrow::before, .page-hero--image .eyebrow::before { background: #D4AF6A; }
.section--dark .stat__value, .section--dark .step::before { color: #D4AF6A; }
.stat__value, .step::before { color: var(--c-accent-text); }
.section--dark a:not(.btn), .site-footer a { color: inherit; }
.section--dark a.link-arrow { color: #D4AF6A; }
.section--dark .ticks li { color: var(--c-dark-ink); }
.hero h1 { letter-spacing: 0.01em; }
/* an h2 that sits at h3 size (cards and blocks without a section title above them) */
h2.h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.25; }
.card h2.h3 { font-size: 1.3rem; }
.card--plain .link-arrow { margin-top: auto; padding-top: 8px; }
/* the group's offices, as a row of city names */
.hubs { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--c-dark-line); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-dark-muted); }

/* service blocks: a gold number, the title and the detail */
.disciplines { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 0; border-top: 1px solid var(--c-line); }
.discipline { padding: 32px 32px 32px 0; border-bottom: 1px solid var(--c-line); }
.discipline:nth-child(odd) { border-right: 1px solid var(--c-line); }
.discipline:nth-child(even) { padding-left: 32px; }
.discipline h2, .discipline h3 { margin-bottom: 10px; }
.discipline h2 a, .discipline h3 a { color: inherit; text-decoration: none; }
.discipline h2 a:hover, .discipline h3 a:hover { color: var(--c-accent-text); }
.discipline p { color: var(--c-muted); margin: 0; }
.discipline .num { display: block; margin-bottom: 14px; font: 600 0.78rem/1 var(--font-body); letter-spacing: 0.2em; color: var(--c-accent-text); }
.section--dark .disciplines, .section--dark .discipline { border-color: var(--c-dark-line); }
.section--dark .discipline p { color: var(--c-dark-muted); }
.section--dark .discipline .num { color: #D4AF6A; }
@media (max-width: 760px) {
  .disciplines { grid-template-columns: 1fr; }
  .discipline, .discipline:nth-child(even) { padding: 28px 0; border-right: 0; }
  .brand__logo { height: 40px; }
}

/* the seven phases */
.phases { counter-reset: phase; display: grid; gap: 0; border-top: 1px solid var(--c-dark-line); }
.phase { display: grid; grid-template-columns: 120px 1fr 1.4fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--c-dark-line); align-items: baseline; }
.phase::before { counter-increment: phase; content: "Phase 0" counter(phase); font: 600 0.78rem/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: #D4AF6A; }
.phase h2, .phase h3 { margin: 0; font-size: 1.35rem; }
.phase p { margin: 0; color: var(--c-dark-muted); }
@media (max-width: 760px) { .phase { grid-template-columns: 1fr; gap: 8px; } }

/* concerts: the date, the artist with the venue, and a line about the event */
.events { border-top: 1px solid var(--c-line); }
.event { display: grid; grid-template-columns: 190px 1fr 1.3fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--c-line); align-items: baseline; }
.event__date { margin: 0; font: 600 0.78rem/1.5 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent-text); }
.event h2, .event h3 { margin: 0 0 6px; font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.event__venue { margin: 0; font-size: 0.92rem; color: var(--c-muted); }
.event > p:last-child { margin: 0; color: var(--c-muted); }
.section--dark .events, .section--dark .event { border-color: var(--c-dark-line); }
.section--dark .event__date { color: #D4AF6A; }
.section--dark .event__venue, .section--dark .event > p:last-child { color: var(--c-dark-muted); }
@media (max-width: 760px) { .event { grid-template-columns: 1fr; gap: 8px; } }

/* concert photos: landscape tiles, portraits two rows high (their image is laid over the tile, so it never sets the row height) */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery__item { position: relative; overflow: hidden; border-radius: var(--radius); background: #1a1814; }
.gallery__item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--tall img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: center 25%; }
.gallery__credit { margin: 14px 0 0; font-size: 0.85rem; color: var(--c-muted); }
.section--dark .gallery__credit { color: var(--c-dark-muted); }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* concert posters, side by side */
.posters { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); gap: clamp(20px, 4vw, 48px); }
.posters figure { margin: 0; }
.posters img { display: block; width: 100%; height: auto; box-shadow: 0 18px 40px rgba(20, 19, 16, 0.18); }
.posters figcaption { margin-top: 14px; font: 600 0.78rem/1.5 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-accent-text); }
@media (max-width: 560px) { .posters { grid-template-columns: 1fr; } }

.quote-line { font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.25; max-width: 30ch; }
.faq { border-top: 1px solid var(--c-line); }
.faq details { border-bottom: 1px solid var(--c-line); padding: 4px 0; }
.faq summary { cursor: pointer; padding: 18px 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--c-accent-text); font-family: var(--font-body); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 18px; max-width: 70ch; color: var(--c-muted); }
.page-hero .eyebrow a { color: inherit; }