/* Brand typography and interaction states. System fonts keep the demo offline-ready. */
:root {
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "Bahnschrift", "Aptos Display", "Franklin Gothic Medium", sans-serif;
  --interactive-red: #c91722;
  font-family: var(--font-body);
}
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; }
h1 { letter-spacing: -.035em; line-height: 1.08; }
h2 { letter-spacing: -.025em; line-height: 1.16; }
h3 { letter-spacing: -.012em; line-height: 1.35; }
p { line-height: 1.75; }
.eyebrow, .hero-bottom, .panel-top { font-family: var(--font-display); letter-spacing: .12em; }
nav a, .account, .button, .menu-button, .text-link { font-weight: 650; }
.button { letter-spacing: .015em; background: var(--interactive-red); border-color: var(--interactive-red); }
.button.outline { background: transparent; border-color: #9d9fa1; }
.eyebrow, .number, nav a[aria-current] { color: var(--interactive-red); }
nav { gap: 12px; flex-wrap: wrap; }
nav a { position: relative; padding: 10px 4px; border-radius: 3px; }
nav a::after { content: ""; position: absolute; height: 2px; background: var(--interactive-red); bottom: 3px; left: 4px; right: 4px; transform: scaleX(0); transform-origin: left; transition: transform 180ms ease; }
nav a[aria-current]::after, nav a:focus-visible::after { transform: scaleX(1); }
a, button, summary, input, select, textarea { transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.service-card, a.card { transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
nav a:focus-visible, .account:focus-visible, .text-link:focus-visible, .tabs a:focus-visible { color: var(--interactive-red); background-color: #fff0f1; }
.button:focus-visible, .menu-button:focus-visible { box-shadow: 0 4px 0 #8c1019; }
.service-card:focus-visible, a.card:focus-visible { border-color: var(--interactive-red); box-shadow: 0 8px 24px #17191c18; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--interactive-red); background: #fffafb; }
a.thread:focus-visible, .service-faq summary:focus-visible { background: #fff0f1; color: var(--interactive-red); }
.service-faq summary { padding: 8px; border-radius: 3px; }
select { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  nav a:hover { color: var(--interactive-red); background: #fff0f1; }
  nav a:hover::after { transform: scaleX(1); }
  .account:hover, .text-link:hover, .tabs a:hover { color: var(--interactive-red); }
  .text-link:hover { border-bottom-width: 2px; padding-bottom: 4px; }
  .button:not(:disabled):hover { background: #a9111a; border-color: #a9111a; color: white; transform: translateY(-2px); box-shadow: 0 6px 16px #c9172226; }
  .button.outline:hover { color: var(--interactive-red); background: #fff0f1; border-color: var(--interactive-red); }
  .join-band .button.outline:hover { color: white; background: #3c2428; border-color: #ff6570; }
  .menu-button:hover { background: #fff0f1; border-color: var(--interactive-red); color: var(--interactive-red); }
  .service-card:hover, a.card:hover { transform: translateY(-5px); border-color: var(--interactive-red); box-shadow: 0 12px 28px #17191c14; }
  .service-card:hover h3, a.card:hover h3 { color: var(--interactive-red); }
  a.thread:hover { background: #fff5f5; box-shadow: inset 3px 0 var(--interactive-red); }
  .service-faq summary:hover { color: var(--interactive-red); background: #fff0f1; }
  input:hover, select:hover, textarea:hover { border-color: var(--interactive-red); }
  .footer-grid a:not(.brand-logo):hover { color: #fff; text-decoration: underline; text-decoration-color: #ff6570; text-underline-offset: 5px; }
  .brand-logo:hover { transform: scale(1.035); }
}
.button:not(:disabled):active, .menu-button:active, .service-card:active, a.card:active { transform: translateY(0); box-shadow: none; }
@media (max-width: 760px) { nav a { padding: 12px 8px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .service-card:hover, a.card:hover, .button:hover, .brand-logo:hover { transform: none; }
}