/* site.css - TheSparks.Group layout. Tokens only; no literal colors or fonts. (SG-34) */

/* ---- Launch visibility: items hidden until after launch (outline) ---- */
[data-launch="hidden"] { display: none !important; }

/* ---- Header ---- */
.site-header { padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.site-logo img { width: 240px; height: auto; }
.site-logo--footer img { width: 200px; }
.site-header .site-nav { margin-inline: auto; }
.site-header .site-nav ul { gap: var(--space-6); }
.site-header__cta { padding-block: var(--space-2); }
@media (max-width: 47.99em) {
  .site-header__inner { justify-content: center; text-align: center; }
  .site-logo img { width: 200px; }
  .site-header .site-nav ul { justify-content: center; gap: var(--space-5); }
  .site-header__cta { display: none; }
}

/* ---- Hero ---- */
.hero--home { padding-block: clamp(var(--space-7), 9vw, 7rem); }
.hero--home .hero__media img { object-position: 65% 50%; }
.hero--home h1 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); letter-spacing: -0.01em; }
.hero__lede { margin-top: var(--space-5); max-width: 34rem; font-size: var(--text-lg); color: var(--color-text); }
@media (min-width: 48em) { .hero--home .hero__content { max-width: 60%; } }
@media (max-width: 47.99em) {
  .hero--home .hero__media::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--band-dark-bg) 88%, transparent) 0%,
      color-mix(in srgb, var(--band-dark-bg) 72%, transparent) 100%);
  }
  .hero__lede { font-size: var(--text-base); }
}

/* ---- Light bands ---- */
.band--light { background: var(--color-bg); }
.band--tight { padding-top: 0; }
.section-heading { margin-bottom: var(--space-5); }

/* ---- Capabilities | Markets split ---- */
.split { display: grid; gap: var(--space-7); }
@media (min-width: 64em) {
  .split--cap-mkt { grid-template-columns: 1fr 1.08fr; }
  .split--cap-mkt > .split__col + .split__col { border-left: 1px solid var(--color-border); padding-left: var(--space-7); }
}
.cap-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
@media (min-width: 64em) { .cap-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } .cap { padding: var(--space-3); } }
.cap {
  min-height: 7.75rem;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.cap__icon { width: 2rem; height: 2rem; fill: none; stroke: var(--color-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--space-4); }
.cap__title { font-size: 0.72rem; font-weight: var(--weight-heading-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; line-height: 1.35; }

.market-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr)); }
.market img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.market__label { display: block; margin-top: var(--space-2); font-family: var(--font-heading); font-size: 0.72rem; font-weight: var(--weight-heading-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; line-height: 1.35; }
@media (min-width: 80em) { .market-grid { grid-template-columns: repeat(5, 1fr); } }

/* ---- Brands | Leadership ---- */
.pair { display: grid; gap: var(--space-7); }
@media (min-width: 64em) {
  .pair { grid-template-columns: 2fr 1fr; gap: var(--space-6); }
  .pair > .pair__col + .pair__col { border-left: 1px solid var(--color-border); padding-left: var(--space-6); }
}
.brand-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 40em) { .brand-grid { grid-template-columns: repeat(3, 1fr); } }
.brand-tile { display: block; border-radius: var(--radius-card); }
.brand-tile__logo { display: block; width: 100%; aspect-ratio: 5 / 2; object-fit: contain; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
@media (min-width: 40em) { .brand-tile__logo { aspect-ratio: 3 / 2; } }
.brand-tile__logo-dark { background: var(--band-dark-surface); border-color: var(--band-dark-surface); }
.brand-tile:hover .brand-tile__logo { border-color: var(--color-accent); }

/* Horizontal card: image left, text right */
.hcard {
  display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  text-decoration: none;
}
.hcard:hover { text-decoration: none; border-color: var(--color-accent); }
.hcard__media { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.hcard__media--portrait { aspect-ratio: 4 / 5; object-position: 50% 20%; }
.hcard__body { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); min-width: 0; }
.hcard__headline { font-family: var(--font-heading); font-size: 0.95rem; font-weight: var(--weight-heading-sm); line-height: 1.3; }
.hcard--static { grid-template-columns: 7.5rem 1fr; }
.hcard__caption { font-size: var(--text-sm); font-weight: 600; line-height: 1.35; }
.hcard__caption span { font-weight: 400; color: var(--color-text-muted); }
.rule-link {
  display: inline-block; margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 2px solid var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-heading); font-size: 0.72rem; font-weight: var(--weight-heading-sm);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.rule-link:hover { color: var(--color-accent); text-decoration: none; }

/* ---- Get in Touch band ---- */
.cta-band { padding-block: var(--space-6); border-bottom: 1px solid var(--color-border); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.cta-band .section-heading { margin-bottom: var(--space-2); }
.cta-band__title { font-size: clamp(var(--text-xl), 3vw, 2.25rem); }

/* ---- Footer ---- */
.site-footer { margin-top: 0; padding-block: var(--space-6) var(--space-4); border-top: 0; }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.site-footer .site-nav ul { gap: var(--space-5); }
.site-footer .site-nav a { font-size: 0.72rem; }
.cross-sites { display: flex; gap: var(--space-5); }
.cross-site { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; }
.cross-site:hover { text-decoration: none; color: var(--color-accent); }
.cross-site__mark { display: grid; place-items: center; width: 6.5rem; height: 2.75rem; overflow: hidden; }
/* Placeholder look only when a block has no logo yet */
.cross-site__mark--placeholder { border: 1px solid var(--color-text); border-radius: var(--radius-sm); background: var(--band-dark-surface); }
.cross-site__mark img { height: 2.75rem; width: auto; border-radius: 0; }
.cross-site__mark--pp img, .cross-site__mark--podcast img { height: auto; width: 5.5rem; border-radius: 0; }
.cross-site__mark--dark img { background: transparent; }
.cross-site__label { font-family: var(--font-heading); font-size: 0.62rem; font-weight: var(--weight-heading-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.site-footer__legal { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 47.99em) {
  .site-footer__inner { flex-direction: column; align-items: center; text-align: center; }
  .site-footer .site-nav ul { justify-content: center; }
}

/* ---- Contact page ---- */
.contact { display: grid; gap: var(--space-7); max-width: 56rem; }
@media (min-width: 48em) { .contact { grid-template-columns: 1fr 1.4fr; } }
.contact__intro h1 { font-size: clamp(var(--text-2xl), 4vw, 3rem); margin-bottom: var(--space-4); }
.contact__lede { font-size: var(--text-lg); color: var(--color-text-muted); }
.contact__form { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.field-row { display: grid; gap: var(--space-4); }
@media (min-width: 40em) { .field-row { grid-template-columns: 1fr 1fr; } .field-row .field + .field { margin-top: 0; } }
.field-row + .field, .field-row + .field-row { margin-top: var(--space-4); }
.contact__form label { font-weight: 600; }
.req { color: var(--color-accent); }
.contact__note { margin-block: var(--space-4); }