/* =========================================================
   BZA PR — Redesign Mockup
   Brand: navy + electric volt-yellow + heavy condensed caps
   ========================================================= */

:root {
  --c-navy-deep: #050B1A;
  --c-navy: #0A1428;
  --c-navy-2: #0F1B33;
  --c-navy-3: #16243F;
  --c-line: rgba(255, 255, 255, 0.08);
  --c-line-strong: rgba(255, 255, 255, 0.18);
  --c-volt: #D4FF3F;
  --c-volt-soft: #B8E135;
  --c-text: #FFFFFF;
  --c-muted: #94A3B8;
  --c-muted-2: #64748B;

  --f-display: 'Anton', 'Bebas Neue', 'Oswald', sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1280px;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--f-body);
  background: var(--c-navy);
  color: var(--c-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Layout primitives ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
/* Narrower wrap variant for single-column forms (credentials, contact). */
.wrap--narrow { max-width: 880px; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.bg-navy-2 { background: var(--c-navy-2); }
.bg-navy-3 { background: var(--c-navy-3); }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-volt);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--c-volt);
}

.h-display {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--c-text);
}

.h1 { font-size: clamp(3.2rem, 9vw, 7.5rem); }
.h2 { font-size: clamp(2.4rem, 6vw, 5rem); }
.h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
  max-width: 60ch;
}

.muted { color: var(--c-muted); }

.accent { color: var(--c-volt); }

mark {
  background: var(--c-volt);
  color: var(--c-navy);
  padding: 0 0.2em;
}

/* Volt brushstroke underline used under wordmark/headlines */
.brush {
  position: relative;
  display: inline-block;
}
.brush::after {
  content: '';
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -0.18em;
  height: 0.18em;
  background: var(--c-volt);
  border-radius: 999px;
  transform: skewX(-10deg);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn--volt {
  background: var(--c-volt);
  color: var(--c-navy);
  border-color: var(--c-volt);
}
.btn--volt:hover { transform: translateY(-1px); background: #E2FF6E; border-color: #E2FF6E; }
.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-line-strong);
}
.btn--ghost:hover { border-color: var(--c-volt); color: var(--c-volt); }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 20, 40, 0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--c-line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1.1rem;
  gap: 2rem;
}
.brandmark {
  display: inline-flex; align-items: center; gap: 0.85rem;
  text-decoration: none;
}
.brandmark__logo {
  border: 1.5px solid #fff;
  background: #000;
  padding: 0.32rem 0.72rem;
  font-family: var(--f-display);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1;
}
.brandmark__tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
}
.nav__links {
  display: flex; align-items: center; gap: 1.6rem;
  list-style: none;
}
.nav__links a {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  position: relative;
  padding: 0.4rem 0;
  transition: color 0.15s ease;
}
.nav__links a:hover { color: var(--c-volt); }
.nav__links a.is-active { color: #fff; }
.nav__links a.is-active::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--c-volt); border-radius: 999px;
}
.nav__cta { display: inline-flex; }

.nav__menu {
  display: none;
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  color: #fff;
}

@media (max-width: 980px) {
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: inline-flex; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(5rem, 10vw, 9rem);
  overflow: hidden;
  /* Layered background, front to back:
     1. volt-yellow ambient glow accent
     2. dark navy overlay (heavier at top + bottom for text readability)
     3. the LA skyline / Dodger Stadium photo, full-bleed
     4. fallback navy color */
  background:
    radial-gradient(ellipse at 75% 25%, rgba(212, 255, 63, 0.12), transparent 55%) center / auto no-repeat,
    linear-gradient(180deg,
      rgba(5, 11, 26, 0.85) 0%,
      rgba(5, 11, 26, 0.55) 35%,
      rgba(5, 11, 26, 0.30) 60%,
      rgba(5, 11, 26, 0.92) 100%
    ) center / cover no-repeat,
    url('img/hero-la-dodger-stadium.jpg') center / cover no-repeat,
    var(--c-navy);
}
/* Bottom fade so the hero blends seamlessly into the next section */
.hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  background: linear-gradient(180deg, transparent 0%, var(--c-navy) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero__inner { position: relative; z-index: 1; }
.hero__eyebrow { margin-bottom: 1.4rem; }
.hero__title {
  font-family: var(--f-display);
  font-size: clamp(3.4rem, 11vw, 9.5rem);
  line-height: 0.88;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.hero__title .line-2 { color: var(--c-volt); display: block; }
.hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(255, 255, 255, 0.78);
  max-width: 56ch;
  margin-bottom: 2.4rem;
}
.hero__cta { display: flex; gap: 0.85rem; flex-wrap: wrap; }

.hero__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem 2.5rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--c-line);
}
.hero__meta dt {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  color: var(--c-volt);
  line-height: 1;
}
.hero__meta dd {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 0.45rem;
}

/* ---------- Section header pattern ---------- */
.sec-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sec-head__title { max-width: 18ch; }
.sec-head__lede { max-width: 55ch; }

@media (min-width: 880px) {
  .sec-head--split {
    grid-template-columns: 1.1fr 1fr;
    align-items: end;
    gap: 3rem;
  }
}

/* ---------- Service buckets ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
}
.svc-card {
  background: var(--c-navy-2);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  padding: 2rem 1.85rem 2.15rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.svc-card:hover {
  border-color: var(--c-volt);
  transform: translateY(-3px);
}
.svc-card__num {
  font-family: var(--f-display);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: var(--c-volt);
  margin-bottom: 1.1rem;
}
.svc-card__title {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
.svc-card__list {
  list-style: none;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.svc-card__list li {
  font-size: 0.97rem;
  color: rgba(255, 255, 255, 0.82);
  padding-left: 1.1rem;
  position: relative;
}
.svc-card__list li::before {
  content: '';
  position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--c-volt);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* ---------- Services stack (deck-style compact layout) ---------- */
.svc-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem 3rem;
}
.svc-block {
  position: relative;
  padding-left: 1.4rem;
  border-left: 2px solid rgba(212, 255, 63, 0.18);
}
.svc-block__title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-volt);
  margin-bottom: 1.2rem;
  line-height: 1.05;
}
.svc-block__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.svc-block__list li {
  font-size: 1.04rem;
  color: rgba(255, 255, 255, 0.92);
  padding-left: 1.3rem;
  position: relative;
  line-height: 1.4;
}
.svc-block__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--c-volt);
  border-radius: 1px;
  transform: rotate(45deg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.svc-block__list li:hover::before {
  transform: rotate(45deg) scale(1.3);
  box-shadow: 0 0 8px rgba(212, 255, 63, 0.6);
}

/* ---------- Stats strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border-block: 1px solid var(--c-line);
}
.stats__cell {
  background: var(--c-navy);
  padding: 2.2rem 1.5rem;
}
.stats__num {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 4.5vw, 3.6rem);
  color: var(--c-volt);
  line-height: 1;
}
.stats__lbl {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ---------- Client / logo grid ---------- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  overflow: hidden;
}
.logo-cell {
  background: var(--c-navy);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  padding: 0.75rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.logo-cell:hover {
  background: var(--c-navy-3);
  color: var(--c-volt);
}
.logo-cell small {
  display: block;
  font-family: var(--f-body);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  margin-top: 0.3rem;
  color: var(--c-muted-2);
  font-weight: 500;
}

/* ---------- Clients (logo grid) ---------- */
@property --rb-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  /* `overflow: visible` lets the volt hover ring on edge cells render past
     the grid's straight outer edge instead of getting clipped on the top
     and left of corner cells (e.g. LA Rams). The four outer-corner cells
     get matching border-radius via .is-tl/.is-tr/.is-bl/.is-br (assigned
     in render.js) to preserve the rounded grid look. */
  overflow: visible;
  isolation: isolate; /* keeps z-index lifts contained */
}
.client-cell.is-tl { border-top-left-radius: 17px; }
.client-cell.is-tr { border-top-right-radius: 17px; }
.client-cell.is-bl { border-bottom-left-radius: 17px; }
.client-cell.is-br { border-bottom-right-radius: 17px; }
.client-cell {
  background: var(--c-navy);
  position: relative;
  min-height: 130px;
  outline: 1px solid var(--c-line);
  outline-offset: -1px;
  transition:
    background 0.3s ease,
    transform 0.3s cubic-bezier(0.5, 0, 0, 1),
    filter 0.35s ease,
    opacity 0.35s ease,
    box-shadow 0.35s ease;
  z-index: 1;
}
/* Inner box holds the logo so the rotating ring + name overlay stay clean */
.client-cell__inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.6rem 1.2rem;
  transition: transform 0.35s cubic-bezier(0.5, 0, 0, 1);
}
.client-cell img {
  max-width: 100%;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.35s ease;
}
/* Per-client size overrides */
.client-cell.is-large img { max-height: 100px; max-width: 88%; }
.client-cell.is-large .client-cell__inner { padding: 1.2rem 0.9rem; }
.client-cell.is-small img { max-height: 50px; max-width: 70%; }
.client-cell__wordmark {
  font-family: var(--f-display);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

/* Rotating volt ring — appears on hover, sweeps around the cell perimeter.
   `border-radius: inherit` makes the ring follow the cell's rounded outer
   corner on the four corner cells (.is-tl/.is-tr/.is-bl/.is-br). */
.client-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--rb-angle),
    rgba(212, 255, 63, 0) 0deg,
    rgba(212, 255, 63, 0) 220deg,
    rgba(212, 255, 63, 0.55) 280deg,
    var(--c-volt) 320deg,
    rgba(212, 255, 63, 0.55) 340deg,
    rgba(212, 255, 63, 0) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 3;
}

/* Client name overlay — fades up from the bottom on hover */
.client-cell__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.7rem 0.8rem 0.85rem;
  font-family: var(--f-display);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-volt);
  text-align: center;
  background: linear-gradient(to top, rgba(5, 11, 26, 0.96) 30%, transparent);
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.5, 0, 0, 1),
    opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
  line-height: 1.1;
}

/* While the grid is being hovered, dim every cell… */
.client-grid:hover .client-cell {
  opacity: 0.32;
  filter: grayscale(40%);
}
/* …and then fully restore + light up the actual hovered cell */
.client-grid:hover .client-cell:hover,
.client-cell:hover {
  opacity: 1;
  filter: none;
  background: var(--c-navy-3);
  transform: scale(1.04);
  z-index: 4;
  box-shadow:
    0 8px 32px -8px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(212, 255, 63, 0.18);
}
.client-cell:hover::before {
  opacity: 1;
  animation: client-cell-rotate 1.8s linear infinite;
}
.client-cell:hover .client-cell__inner { transform: translateY(-12px); }
.client-cell:hover img {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(212, 255, 63, 0.45));
}
.client-cell:hover .client-cell__name {
  transform: translateY(0);
  opacity: 1;
}

@keyframes client-cell-rotate {
  to { --rb-angle: 360deg; }
}

/* Honor reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .client-cell, .client-cell__inner, .client-cell__name, .client-cell img {
    transition: none;
  }
  .client-cell:hover::before { animation: none; opacity: 1; }
  .client-cell:hover { transform: none; }
}

@media (max-width: 700px) {
  .client-grid { grid-template-columns: repeat(3, 1fr); }
  .client-cell { min-height: 100px; }
  .client-cell__inner { padding: 1.1rem 0.8rem; }
  .client-cell img { max-height: 50px; }
  .client-cell__name { font-size: 0.78rem; padding: 0.5rem 0.6rem 0.65rem; }
}
@media (max-width: 420px) {
  .client-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.team-card {
  background: var(--c-navy-2);
  border: 1px solid var(--c-line);
  border-radius: 20px;
  padding: 1.8rem 1.4rem 1.6rem;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.team-card:hover { border-color: var(--c-volt); transform: translateY(-3px); }
.team-card__avatar {
  width: 130px; height: 130px;
  margin: 0 auto 1.1rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #1c2c4a, #0f1b33);
  border: 3px solid var(--c-volt);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-size: 2.1rem;
  color: var(--c-volt);
  letter-spacing: 0.05em;
  overflow: hidden;
  position: relative;
}
.team-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Unify look: every headshot renders in monochrome */
  filter: grayscale(100%) contrast(1.02);
  transition: transform 0.4s ease;
}
.team-card:hover .team-card__avatar img { transform: scale(1.04); }
.team-card__name {
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}
.team-card__role {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.team-card__location {
  margin-top: 0.55rem;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.team-card__location::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--c-volt);
  border-radius: 999px;
  display: inline-block;
}
.team-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-volt);
  text-decoration: none;
  transition: color 0.15s ease;
}
.team-card__link:hover { color: #E2FF6E; }
.team-card__link.is-disabled {
  color: #000;
  cursor: default;
  pointer-events: none;
  opacity: 0.85;
}
.team-card__link.is-disabled:hover { color: #000; }

/* Team tier section header */
.team-tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 3.5rem 0 1.6rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--c-line);
}
.team-tier:first-of-type { margin-top: 0; }
.team-tier__label {
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: 0.01em;
  color: var(--c-text);
}
.team-tier__count {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-volt);
}

/* ---------- Testimonial cards ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.quote {
  background: var(--c-navy-2);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-volt);
  border-radius: 0 18px 18px 0;
  padding: 2rem 1.9rem;
  position: relative;
}
.quote::before {
  content: '“';
  font-family: var(--f-display);
  position: absolute;
  top: 0.3rem; right: 1.5rem;
  font-size: 5rem;
  color: var(--c-volt);
  /* Was 0.18 — basically invisible. Bumped to full so the quote mark
     actually reads as the volt-yellow accent. */
  opacity: 1;
  line-height: 1;
}
.quote__text {
  font-size: 1.04rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.4rem;
}
.quote__author {
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.quote__role {
  font-size: 0.78rem;
  color: var(--c-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}

/* Logo block sits above the quote text. Image is shrunk to a fixed
   height and slightly desaturated so the assorted client wordmarks
   read consistently against the navy card background. */
.quote__logo {
  height: 60px;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
}
.quote__logo img {
  max-height: 100%;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.85);
}

/* ---------- Upcoming events marquee (auto-scroll) ---------- */
.event-marquee {
  position: relative;
  overflow: hidden;
  /* Soft fades on the left & right edges so cards float in/out, not pop */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.event-marquee__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: event-marquee-scroll 60s linear infinite;
}
.event-marquee__set {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
  padding-right: 1rem; /* gap between the two duplicated sets */
}
.event-marquee:hover .event-marquee__track,
.event-marquee:focus-within .event-marquee__track {
  animation-play-state: paused;
}

@keyframes event-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.event-tile {
  flex-shrink: 0;
  width: clamp(260px, 28vw, 340px);
  background: var(--c-navy-2);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-volt);
  border-radius: 14px;
  padding: 1.2rem 1.3rem 1.25rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.2s ease, transform 0.25s ease, background 0.25s ease;
}
.event-tile:hover {
  border-color: var(--c-volt);
  background: var(--c-navy-3);
  transform: translateY(-3px);
}
.event-tile:hover .event-tile__bg-logo {
  /* Subtle wake-up on hover so the watermark gets a little more visible */
  opacity: 0.18;
  transform: translate(15%, -50%) scale(1.05);
}
.event-tile__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
/* Dark-gray opaque event logo watermark, anchored to the right side */
.event-tile__bg-logo {
  position: absolute;
  top: 50%;
  right: -8%;
  width: 70%;
  max-width: 240px;
  height: auto;
  transform: translate(15%, -50%);
  /* Watermark is intentionally near-invisible — just a hint of texture
     behind the text. Hover bumps it up a touch. */
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease, transform 0.4s ease;
}
.event-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.event-tile__tag {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-volt);
  font-weight: 600;
  background: rgba(212, 255, 63, 0.10);
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.event-tile__date {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.70);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.event-tile__name {
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin-top: 0.2rem;
  color: var(--c-text);
}
.event-tile__loc {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.15rem;
}
.event-tile__loc-dot {
  width: 5px;
  height: 5px;
  background: var(--c-volt);
  border-radius: 999px;
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .event-marquee__track { animation: none; }
}

/* ---------- Homepage client photo strip ---------- */
/* When the photo grid lives in its own "page break" section between the
   hero and the Who-We-Are intro, override the default .section padding so
   it reads as a divider rather than a full section. */
.section--photos {
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

/* ---------- Homepage client photo grid ---------- */
/* Six 3:2 photos in a 3-up grid on desktop, 2-up on tablet, 1-up mobile.
   Slight rounded corners + subtle hover zoom to nod toward editorial feel. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .photo-grid { grid-template-columns: 1fr; }
}
.photo-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 3 / 2;
  background: var(--c-navy-2);
  border: 1px solid var(--c-line);
}
.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Dimmed + slightly desaturated by default — photos "wake up" on hover. */
  filter: brightness(0.65) saturate(0.85);
  transition: transform 600ms ease, filter 350ms ease;
}
.photo-card:hover img {
  transform: scale(1.04);
  filter: brightness(1.05) saturate(1.1);
}

/* ---------- Marquee event highlight ---------- */
.event-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border-block: 1px solid var(--c-line);
}
.event-strip__cell {
  background: var(--c-navy);
  padding: 2rem 1.5rem;
  text-align: center;
}
.event-strip__cell strong {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.event-strip__cell span {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ---------- Form ---------- */
.form {
  display: grid;
  gap: 1rem;
  max-width: 620px;
}
/* Wider variant — used on the credentials page where the form needs
   room for 3-up address rows and a horizontal event detail card. */
.form--wide { max-width: 760px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__row--3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 600px) {
  .form__row,
  .form__row--3 { grid-template-columns: 1fr; }
}
.form__section {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  color: var(--c-volt);
  margin: 1.6rem 0 0.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--c-line);
}
/* The first section heading immediately follows the Event field — drop
   the top border/padding there so it doesn't read as a double rule. */
.form__section:first-of-type {
  border-top: 0;
  padding-top: 0.4rem;
  margin-top: 0.6rem;
}
.form__submit { margin-top: 0.6rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.field__hint {
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-muted-2);
  font-size: 0.72rem;
  margin-left: 0.4rem;
}
.field input, .field textarea, .field select {
  background: var(--c-navy-2);
  border: 1px solid var(--c-line-strong);
  color: #fff;
  border-radius: 12px;
  padding: 0.95rem 1rem;
  font: inherit;
  transition: border-color 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--c-volt);
}
.field textarea { min-height: 140px; resize: vertical; }

/* Checkbox group — branded square checkbox with a volt checkmark. */
.checkboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}
@media (max-width: 600px) {
  .checkboxes { grid-template-columns: 1fr; }
}
.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: center;
  padding: 0.85rem 1rem;
  background: var(--c-navy-2);
  border: 1px solid var(--c-line-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  user-select: none;
}
.checkbox:hover { border-color: var(--c-line-strong); background: var(--c-navy-3); }
.checkbox input[type="checkbox"] {
  /* Hide the native checkbox; we render a custom box via the span sibling.
     But we keep it positioned at the start so it remains keyboard-focusable. */
  appearance: none;
  -webkit-appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid var(--c-line-strong);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  margin: 0;
}
.checkbox input[type="checkbox"]::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--c-navy);
  transform: scale(0);
  transition: transform 0.12s ease;
}
.checkbox input[type="checkbox"]:checked {
  background: var(--c-volt);
  border-color: var(--c-volt);
}
.checkbox input[type="checkbox"]:checked::after { transform: scale(1); }
.checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--c-volt);
  outline-offset: 2px;
}
.checkbox span { font-size: 0.95rem; color: #fff; }
.checkbox:has(input:checked) {
  border-color: var(--c-volt);
  background: var(--c-navy-3);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-navy-deep);
  border-top: 1px solid var(--c-line);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-col h4 {
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  color: var(--c-volt);
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.foot-col a { color: rgba(255, 255, 255, 0.78); font-size: 0.92rem; }
.foot-col a:hover { color: var(--c-volt); }
.foot-col p { color: rgba(255, 255, 255, 0.78); font-size: 0.92rem; line-height: 1.65; }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.8rem;
  color: var(--c-muted-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Page header (interior pages) ---------- */
.page-head {
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(ellipse at 80% 20%, rgba(212, 255, 63, 0.07), transparent 60%),
    var(--c-navy-deep);
  border-bottom: 1px solid var(--c-line);
}
.page-head__crumbs {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 1.2rem;
}
.page-head__crumbs span { color: var(--c-volt); }
.page-head__title {
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 8vw, 6rem);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
}
.page-head__lede {
  margin-top: 1.4rem;
  max-width: 65ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
}

/* ---------- About: prose + facts ---------- */
.prose {
  max-width: 70ch;
}
.prose p { margin-bottom: 1.2rem; color: rgba(255, 255, 255, 0.86); font-size: 1.03rem; line-height: 1.75; }
.prose p:first-of-type::first-line { font-weight: 600; }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  overflow: hidden;
  margin-top: 2.5rem;
}
.facts__cell {
  background: var(--c-navy-2);
  padding: 1.6rem 1.5rem;
}
.facts__lbl {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-volt);
  margin-bottom: 0.5rem;
}
.facts__val {
  font-family: var(--f-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  line-height: 1.05;
}

/* ---------- Two-column section (about page) ---------- */
.two-col {
  display: grid;
  gap: 3rem;
}
/* Use minmax(0, …fr) directly so the columns can shrink below their
   intrinsic content size. Plus explicit min-width:0 on children as a
   defensive layer — IE/Safari are sometimes flaky with the implicit
   min-content sizing of grid items. The right column is also capped at
   420px so a portrait poster never visually overpowers the form. */
@media (min-width: 920px) {
  .two-col {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: 4rem;
  }
}
.two-col > * { min-width: 0; }
.two-col > .event-detail { max-width: 420px; justify-self: end; }

.locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.locations span {
  background: var(--c-navy-2);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Credentials: event detail card ---------- */
/* Reveals between the Event picker and the rest of the form once an
   event is chosen. The renderer toggles the [hidden] attribute. */
.event-detail[hidden] { display: none; }
.event-detail {
  display: grid;
  gap: 1.6rem;
  align-content: start;
}

/* Inline variant: horizontal mini-card — 50/50 split between poster
   and info. Lives between the dropdown and the Applicant section. */
.event-detail--inline {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  background: var(--c-navy-2);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 1rem;
  margin: 0.4rem 0;
}
@media (max-width: 640px) {
  .event-detail--inline { grid-template-columns: 1fr; }
}
.event-detail--inline .event-detail__poster {
  /* Placeholder (letter-mark) keeps a portrait aspect. Image variant
     overrides below to let the image's natural ratio drive height. */
  aspect-ratio: 3 / 4;
  padding: 0.9rem;
  font-size: 0.9rem;
  border-radius: 10px;
  box-shadow: none;
  min-height: 0;
  max-height: none;
}
.event-detail--inline .event-detail__poster-mark {
  font-size: clamp(2.6rem, 6vw, 4rem);
}
.event-detail--inline .event-detail__poster-name {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  max-width: 14ch;
}
.event-detail--inline .event-detail__poster-date,
.event-detail--inline .event-detail__poster-sport {
  font-size: 0.7rem;
}
.event-detail--inline .event-detail__poster--image {
  /* Image variant: container has no forced aspect — natural ratio of
     the uploaded image dictates height. */
  aspect-ratio: auto;
  min-height: 0;
  max-height: none;
  /* Subtle backdrop so any letterbox space from object-fit:contain
     blends with the surrounding card. */
  background: var(--c-navy-3);
  cursor: zoom-in;
  position: relative;
  border: 0;
  padding: 0;
}
.event-detail--inline .event-detail__poster--image img {
  /* Override the parent's height: 100% so aspect-ratio: auto can drive
     the container size from the image's natural ratio. */
  height: auto;
  object-fit: contain;
}
.event-detail--inline .event-detail__poster--image::before {
  /* Small "zoom" hint badge in the corner. */
  content: "⤢";
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: var(--c-volt);
  border-radius: 6px;
  font-size: 0.9rem;
  pointer-events: none;
}

/* ---------- Lightbox (poster click-to-expand) ---------- */
.poster-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  z-index: 1000;
  cursor: zoom-out;
}
.poster-lightbox[hidden] { display: none; }
.poster-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.poster-lightbox__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1.4rem;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.poster-lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }
.event-detail--inline .event-detail__rows {
  align-self: start;
}
.event-detail--inline .event-detail__row {
  /* Stacked — label on top, value below — fits the narrower info column. */
  grid-template-columns: 1fr;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
}
.event-detail--inline .event-detail__row dd {
  font-size: 1rem;
}

/* Placeholder poster — 3:4 portrait card with brand navy gradient,
   condensed mark + event name. Swap with a real image later by
   targeting .event-detail__poster as a wrapper. */
.event-detail__poster {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  padding: 1.6rem;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 0.6rem;
  color: #fff;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(212, 255, 63, 0.18), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(212, 255, 63, 0.10), transparent 55%),
    linear-gradient(160deg, var(--c-navy-3) 0%, var(--c-navy) 60%, var(--c-navy-deep) 100%);
  border: 1px solid var(--c-line-strong);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.event-detail__poster::after {
  /* Subtle volt corner accent — keeps it on-brand without overpowering. */
  content: "";
  position: absolute;
  inset: auto -20% -30% auto;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(212, 255, 63, 0.22), transparent 60%);
  pointer-events: none;
}
.event-detail__poster-sport {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-volt);
  font-weight: 600;
}
.event-detail__poster-mark {
  align-self: center;
  font-family: var(--f-display);
  font-size: clamp(4.5rem, 10vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}
.event-detail__poster-name {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  max-width: 16ch;
}
.event-detail__poster-date {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Info rows under the poster (date / location / deadline). */
.event-detail__rows {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-navy-2);
}
.event-detail__row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--c-line);
}
.event-detail__row:last-child { border-bottom: 0; }
.event-detail__row dt {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.event-detail__row dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}
.event-detail__row--deadline dd { color: var(--c-volt); }

/* Real-poster variant: posters can be any aspect ratio (square,
   portrait, landscape). Drop the fixed 3:4 lock and let the image
   dictate its own ratio. If the image fails to load or is slow, a
   min-height keeps the card from collapsing and the navy gradient
   shows through. Max-height caps how tall a portrait poster can get
   so it doesn't tower over the form. */
.event-detail__poster--image {
  aspect-ratio: auto;
  min-height: 280px;
  max-height: 560px;
  padding: 0;
  display: block;
  overflow: hidden;
}
.event-detail__poster--image::after { display: none; }
.event-detail__poster--image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .event-detail__row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(212, 255, 63, 0.12), transparent 60%),
    var(--c-navy-3);
  border-block: 1px solid var(--c-line);
  padding-block: clamp(3.5rem, 6vw, 5rem);
}
.cta-band__inner {
  display: grid;
  gap: 1.4rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .cta-band__inner { grid-template-columns: 1.4fr auto; } }
.cta-band h2 { max-width: 22ch; }

/* ---------- Style guide page ---------- */
.swatch-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
}
.swatch {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--c-line);
}
.swatch__chip { aspect-ratio: 4 / 3; }
.swatch__meta { padding: 0.85rem 1rem; background: var(--c-navy-2); }
.swatch__name { font-family: var(--f-display); text-transform: uppercase; font-size: 1rem; }
.swatch__hex { font-size: 0.82rem; color: var(--c-muted); margin-top: 0.2rem; letter-spacing: 0.04em; }

/* ---------- Utility ---------- */
.flex { display: flex; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }