/* Restored from MetallicMedia/metallicmediagroup-site
   commit 25066b32c4b57a5314d6ac7f9eb8988d5c2c489b
   (Hero, SocialProof, Header + token system). Light is the default. */

:root {
  --sys-bg: #ffffff;
  --sys-bg-soft: #f8fafc;
  --sys-line: #e2e8f0;
  --sys-ink: #0f172a;
  --sys-prose: #374151;
  --sys-dim: #6b7280;
  --sys-accent: #0891b2;
  --sys-accent-deep: #0369a1;
  --sys-amber: #b45309;
  --sys-amber-deep: #92400e;
  --graphite: #14161b;
  --spark: #a855f7;
  --gold-btn: #f5c542;
  --font: "Space Grotesk", system-ui, sans-serif;
  --max: 80rem;
}

html[data-theme="dark"] {
  --sys-bg: #14161b;
  --sys-bg-soft: #1e2128;
  --sys-line: #2a2e36;
  --sys-ink: #ffffff;
  --sys-prose: #c7cdd6;
  --sys-dim: #8a909c;
  --sys-accent: #3fc9f5;
  --sys-accent-deep: #0ea5e9;
  --sys-amber: #f5c542;
  --sys-amber-deep: #f59e0b;
}

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

html, body { margin: 0; padding: 0; }

html { color-scheme: light; background: var(--sys-bg); }
html[data-theme="dark"] { color-scheme: dark; background: var(--sys-bg); }

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--sys-bg);
  color: var(--sys-prose);
  font-family: var(--font);
  transition: background-color 0.2s ease, color 0.2s ease;
}

img, iframe { max-width: 100%; border: 0; }
a { color: inherit; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, background-color 0.2s ease; }
button { font: inherit; transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, background-color 0.2s ease; }

.announce {
  position: relative;
  background: var(--sys-bg-soft);
  border-bottom: 1px solid var(--sys-line);
  padding: 0.65rem 2.5rem 0.65rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sys-dim);
  text-align: center;
}
.announce[hidden] { display: none; }
/* Kept to a single line at every width: the lead-in sentence drops away on
   phones so the headline link keeps the room, and ellipsis is the backstop
   if a future announcement is longer than the bar. */
.announce__inner {
  max-width: var(--max);
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .announce { font-size: 0.75rem; }
  .announce__lead { display: none; }
}
.announce a { font-weight: 600; color: var(--sys-accent); text-decoration: underline; text-underline-offset: 2px; }
.announce a:hover { opacity: 0.8; }
.announce__close {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--sys-dim) 70%, transparent);
  cursor: pointer;
  padding: 0.25rem;
}
.announce__close:hover { color: var(--sys-prose); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 80;
  background: var(--sys-accent);
  color: var(--graphite);
  padding: 0.5rem 0.75rem;
  font-weight: 700;
}

/* ── Header ─────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: var(--sys-bg);
  border-bottom: 1px solid var(--sys-line);
  transition: box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 1px 8px color-mix(in srgb, var(--sys-line) 70%, transparent);
}

.header-inner {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
}
@media (min-width: 640px) { .header-inner { padding: 0.7rem 1.5rem; } }
@media (min-width: 1100px) {
  .header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 1.75rem;
    padding: 0.7rem 2rem;
  }
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand:hover { opacity: 0.85; }
.brand-logo {
  display: block;
  height: 40px;
  width: 40px;
  max-width: none;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  flex-shrink: 0;
}

.nav-desktop {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 1.5rem;
  min-width: 0;
}
@media (min-width: 1100px) { .nav-desktop { display: flex; } }

.nav-desktop a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sys-dim);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.nav-desktop a:hover,
.nav-desktop a[aria-current="page"] { color: var(--sys-accent); }

.header-right {
  display: none;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.65rem;
  flex-shrink: 0;
}
@media (min-width: 1100px) { .header-right { display: flex; } }

.theme-btn {
  display: inline-flex;
  height: 2.15rem;
  width: 2.15rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid var(--sys-line);
  background: transparent;
  color: var(--sys-dim);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.theme-btn:hover {
  color: var(--sys-accent);
  border-color: color-mix(in srgb, var(--sys-accent) 50%, var(--sys-line));
}
.theme-btn svg { width: 15px; height: 15px; }
.theme-btn .icon-sun { display: none; }
.theme-btn .icon-moon { display: block; }
html[data-theme="dark"] .theme-btn .icon-sun { display: block; }
html[data-theme="dark"] .theme-btn .icon-moon { display: none; }

/* Mobile action group: .header-right (phone + theme + CTA) is display:none
   below 1100px, so the phone and theme controls are re-created here, beside
   the hamburger, as icon-only buttons. Hidden at >=1100px so it never adds a
   cell to the desktop grid. */
.header-bar-actions { display: none; }
@media (max-width: 1099.98px) {
  .header-bar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    margin-right: 0.15rem;
    flex-shrink: 0;
  }
}
/* Icon-only phone button, sized to match .theme-btn exactly. */
.phone-btn--bar {
  display: inline-flex;
  height: 2.15rem;
  width: 2.15rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid var(--sys-line);
  background: transparent;
  color: var(--sys-dim);
  flex-shrink: 0;
}
.phone-btn--bar:hover {
  color: var(--sys-accent);
  border-color: color-mix(in srgb, var(--sys-accent) 50%, var(--sys-line));
}
.phone-btn--bar svg { width: 15px; height: 15px; }
/* Inside the group the toggle is a plain flex item; the group owns the offset. */
.theme-btn--bar { display: inline-flex; }

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sys-dim);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.phone-link:hover { color: var(--sys-prose); }
.phone-link svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Email is an icon in the desktop bar; full address stays in the menu and footer. */
.header-right .email-link {
  height: 2.15rem;
  width: 2.15rem;
  justify-content: center;
  gap: 0;
  border: 1px solid var(--sys-line);
  border-radius: 0.375rem;
}
.header-right .email-link span { display: none; }
.header-right .email-link:hover {
  color: var(--sys-accent);
  border-color: color-mix(in srgb, var(--sys-accent) 50%, var(--sys-line));
}

.btn-chrome {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background: linear-gradient(135deg, #5dd4f8 0%, #3fc9f5 40%, #0ea5e9 100%);
  color: var(--graphite);
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.btn-chrome:hover { opacity: 0.85; }
.btn-chrome--ghost {
  background: transparent;
  border: 1px solid var(--sys-line);
  color: var(--sys-ink);
}
.btn-chrome--ghost:hover { opacity: 1; border-color: var(--sys-accent); color: var(--sys-accent); }

.btn-chrome-lg {
  padding: 0.9rem 2rem;
  text-align: center;
}

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  border: 0;
  background: transparent;
  color: var(--sys-dim);
  cursor: pointer;
}
@media (min-width: 1100px) { .menu-toggle { display: none; } }
.menu-toggle:hover { color: var(--sys-prose); }
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--sys-line);
  background: var(--sys-bg);
  padding: 0.75rem 1rem 1.25rem;
}
.mobile-menu.is-open { display: block; }
@media (min-width: 1100px) { .mobile-menu { display: none !important; } }

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mobile-menu nav a {
  display: block;
  border-radius: 4px;
  padding: 0.65rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sys-dim);
}
.mobile-menu nav a:hover,
.mobile-menu nav a[aria-current="page"] { color: var(--sys-accent); }

.mobile-menu__meta {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sys-line);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mobile-menu__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
}

/* ── Hero ───────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--sys-bg);
}
.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 5rem 1rem;
}
@media (min-width: 640px) { .hero-inner { padding: 7rem 1.5rem; } }
@media (min-width: 1024px) { .hero-inner { padding: 7rem 2rem; } }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--sys-accent) 30%, transparent);
  background: color-mix(in srgb, var(--sys-accent) 10%, transparent);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sys-accent);
}
.eyebrow svg {
  width: 11px;
  height: 11px;
  fill: var(--sys-accent);
  flex-shrink: 0;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--sys-ink);
}

.text-gradient-headline {
  background: linear-gradient(100deg, var(--sys-accent) 0%, var(--sys-accent-deep) 45%, var(--spark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-sub {
  margin: 1.5rem 0 0;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--sys-dim);
}
.hero-sub strong {
  font-weight: 700;
  color: var(--sys-prose);
}

.hero-ctas {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .hero-ctas { flex-direction: row; }
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2px solid var(--sys-line);
  border-radius: 2px;
  padding: 0.85rem 2rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--sys-prose);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-ghost:hover {
  border-color: var(--sys-accent);
  color: var(--sys-accent);
}
.btn-ghost svg { width: 15px; height: 15px; flex-shrink: 0; }

.metrics {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--sys-line);
  border-radius: 0.5rem;
  background: var(--sys-bg-soft);
  overflow: hidden;
}
.metric {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem;
}
.metric + .metric { border-left: 1px solid var(--sys-line); }
.metric-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--sys-accent);
}
.metric-label {
  margin-top: 0.15rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--sys-ink);
}
.metric-note {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--sys-dim);
}

.video-wrap {
  display: flex;
  justify-content: center;
}
@media (min-width: 1024px) { .video-wrap { justify-content: flex-end; } }

.hero-video {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 36rem;
  border: 1px solid var(--sys-line);
  border-radius: 1.25rem;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 20px 48px -18px rgba(0, 0, 0, 0.38);
}
.video-glow {
  position: absolute;
  inset: -0.5rem;
  border-radius: 1.4rem;
  background: color-mix(in srgb, var(--sys-accent) 12%, transparent);
  filter: blur(28px);
  z-index: -1;
}
.hero-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}
.hero-video__poster,
.hero-video__frame iframe {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.hero-video__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.hero-video__play:focus-visible {
  outline: 2px solid var(--sys-accent);
  outline-offset: -6px;
}
.hero-video__play-icon {
  width: 68px;
  height: 68px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--sys-accent);
  color: var(--graphite);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.45);
  padding-left: 3px;
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-video__play:hover .hero-video__play-icon,
.hero-video__play:focus-visible .hero-video__play-icon {
  transform: scale(1.06);
}
.hero-video__caption {
  margin: 0;
  padding: 0.75rem 1rem;
  background: #0a0a0a;
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  line-height: 1.35;
}
.hero-video.is-playing .hero-video__poster,
.hero-video.is-playing .hero-video__play {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-video__play-icon { transition: none; }
  .hero-video__play:hover .hero-video__play-icon,
  .hero-video__play:focus-visible .hero-video__play-icon { transform: none; }
}

/* ── Gold banner ────────────────────────────────────── */
.proof {
  background: linear-gradient(135deg, #f9d96a 0%, #f5c542 45%, #eab308 100%);
}
.proof-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
@media (min-width: 640px) {
  .proof-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    text-align: left;
    padding: 1rem 1.5rem;
  }
}
@media (min-width: 1024px) { .proof-inner { padding: 1rem 2rem; } }

.proof-copy {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--graphite);
}
@media (min-width: 640px) {
  .proof-copy {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
  }
}
.proof-copy svg {
  width: 18px;
  height: 18px;
  fill: var(--graphite);
  flex-shrink: 0;
  margin: 0.15rem auto 0;
}
@media (min-width: 640px) { .proof-copy svg { margin: 0.15rem 0 0; } }

.proof-copy p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--graphite);
}
.proof-copy span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(20, 22, 27, 0.7);
}

.btn-gold {
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--graphite);
  color: var(--gold-btn);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.65rem 1.25rem;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.btn-gold:hover { opacity: 0.8; }

/* ── Inner pages ────────────────────────────────────── */
.page {
  flex: 1;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 3.5rem 1rem 5rem;
}
@media (min-width: 640px) { .page { padding: 4rem 1.5rem 6rem; } }
@media (min-width: 1024px) { .page { padding: 4.5rem 2rem 7rem; } }

.page-kicker {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sys-accent);
}
.page h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--sys-ink);
}
.page-lead {
  margin: 1rem 0 0;
  max-width: 40rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--sys-dim);
}

.work-grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) { .work-grid { grid-template-columns: 1fr 1fr; } }

.work-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1px solid var(--sys-line);
  border-radius: 0.75rem;
  background: var(--sys-bg-soft);
  transition: border-color 0.2s ease;
}
.work-card:hover { border-color: color-mix(in srgb, var(--sys-accent) 45%, var(--sys-line)); }
.work-card h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sys-ink);
}
.work-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sys-dim);
  flex: 1;
}
.work-card .more {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sys-accent);
}

.posts {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--sys-line);
}
.posts li { border-bottom: 1px solid var(--sys-line); }
.posts a {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 1.25rem 0;
}
@media (max-width: 640px) {
  .posts a { grid-template-columns: 1fr auto; }
  .posts .p-date { grid-column: 1 / -1; }
}
.p-date {
  font-size: 0.8rem;
  color: var(--sys-dim);
}
.p-title {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sys-ink);
}
.p-excerpt {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: var(--sys-dim);
}
.p-go { color: var(--sys-accent); }
.posts a:hover .p-title { color: var(--sys-accent); }

.article-head { margin-bottom: 2rem; }
.back {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sys-dim);
}
.back:hover { color: var(--sys-accent); }
.byline {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--sys-dim);
}
.byline time { margin-left: 0.75rem; }

.prose { max-width: 42rem; }
.prose p, .prose li {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--sys-prose);
}
.prose p { margin: 0 0 1.15rem; }
.prose .lead {
  font-size: 1.2rem;
  color: var(--sys-ink);
}
.prose a { color: var(--sys-accent); text-decoration: underline; text-underline-offset: 3px; }
.prose ol { padding-left: 1.25rem; }
.prose img {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.25rem 0 1.75rem;
  border-radius: 12px;
}

.contact-stack {
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;
  max-width: 36rem;
}
.contact-stack a,
.contact-stack p {
  margin: 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--sys-line);
  border-radius: 0.5rem;
  background: var(--sys-bg-soft);
  color: var(--sys-ink);
}
.contact-stack a:hover { border-color: var(--sys-accent); color: var(--sys-accent); }

.calendar-frame {
  margin-top: 2rem;
  border: 1px solid var(--sys-line);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--sys-bg);
  min-height: 620px;
}
.calendar-frame iframe {
  width: 100%;
  min-height: 620px;
}

/* ── Site footer (May 22 MMG layout) ────────────────── */
.site-foot {
  border-top: 1px solid var(--sys-line);
  background: var(--sys-bg);
}
.site-foot__grid-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 3.5rem 1rem;
}
@media (min-width: 640px) { .site-foot__grid-wrap { padding: 3.5rem 1.5rem; } }
@media (min-width: 1024px) { .site-foot__grid-wrap { padding: 3.5rem 2rem; } }
.site-foot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 640px) { .site-foot__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-foot__grid { grid-template-columns: repeat(3, 1fr); } }
.site-foot__brand {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--sys-ink);
}
.site-foot__brand span { color: var(--sys-accent); }
.site-foot__blurb {
  margin: 0.75rem 0 0;
  max-width: 20rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--sys-dim);
}
.site-foot__contact {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.site-foot__contact a,
.site-foot__contact span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--sys-dim);
}
.site-foot__contact a:hover { color: var(--sys-accent); }
.site-foot__contact svg { color: var(--sys-accent); flex-shrink: 0; }
.site-foot__social { margin-top: 1.5rem; display: flex; gap: 0.75rem; }
.site-foot__social a {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  border: 1px solid var(--sys-line);
  color: var(--sys-dim);
}
.site-foot__social a:hover { border-color: color-mix(in srgb, var(--sys-accent) 40%, var(--sys-line)); color: var(--sys-accent); }
.site-foot__col h3 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sys-accent);
}
.site-foot__col ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.site-foot__col a {
  font-size: 0.875rem;
  color: var(--sys-dim);
}
.site-foot__col a:hover { color: var(--sys-accent); }
.site-foot__cities {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.site-foot__all {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sys-accent);
}
.site-foot__all:hover { opacity: 0.8; }
.site-foot__bar {
  border-top: 1px solid var(--sys-line);
}
.site-foot__bar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.15rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--sys-dim) 60%, transparent);
}
@media (min-width: 640px) {
  .site-foot__bar-inner {
    flex-direction: row;
    justify-content: space-between;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .site-foot__bar-inner { padding-left: 2rem; padding-right: 2rem; }
}
.site-foot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.site-foot__legal a { color: inherit; }
.site-foot__legal a:hover { color: var(--sys-accent); }

.section-h {
  margin: 2.5rem 0 1rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sys-ink);
}
.check-list {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 40rem;
}
.check-list li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.5rem;
  color: var(--sys-prose);
  line-height: 1.5;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--sys-accent);
  font-weight: 800;
}
.svc-dir, .city-dir {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
@media (min-width: 720px) {
  .svc-dir { grid-template-columns: 1fr 1fr; }
  .city-dir { grid-template-columns: repeat(3, 1fr); }
}
.svc-dir a, .city-dir a {
  display: block;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--sys-line);
  border-radius: 0.5rem;
  background: var(--sys-bg-soft);
}
.svc-dir a strong { display: block; color: var(--sys-ink); }
.svc-dir a span { display: block; margin-top: 0.25rem; font-size: 0.85rem; color: var(--sys-dim); }
.svc-dir a:hover, .city-dir a:hover { border-color: var(--sys-accent); }

.home-sec {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4.5rem 1rem;
}
@media (min-width: 640px) { .home-sec { padding: 5.5rem 1.5rem; } }
@media (min-width: 1024px) { .home-sec { padding: 5.5rem 2rem; } }
.home-sec--soft { background: var(--sys-bg-soft); }
.home-sec .kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sys-amber);
}
.home-sec h2 {
  margin: 0.75rem 0 0;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--sys-ink);
}
.home-sec .lede {
  margin: 1rem 0 0;
  max-width: 36rem;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--sys-dim);
}
.steps {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { text-align: left; }
.step-n {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--sys-accent);
  border-radius: 999px;
  color: var(--sys-accent);
  font-weight: 800;
  font-size: 0.8rem;
}
.steps h3 { margin: 0.85rem 0 0; color: var(--sys-ink); font-size: 1.1rem; }
.steps p { margin: 0.5rem 0 0; color: var(--sys-dim); line-height: 1.6; }
.why-list { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.why-list h3 { margin: 0; color: var(--sys-ink); }
.why-list p { margin: 0.35rem 0 0; color: var(--sys-dim); }

/* Founders / About — same chrome palette as the rest of the site */
.founders-page {
  background: var(--sys-bg);
  flex: 1;
}
.founders {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4.5rem 1.25rem 5.5rem;
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  grid-template-areas:
    "media copy"
    "cta   copy";
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 1.15rem;
  align-items: start;
}
.founders__media { grid-area: media; position: relative; }
.founders__copy { grid-area: copy; }
.founders__cta { grid-area: cta; }
.founders__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--sys-bg-soft);
  border: 1px solid var(--sys-line);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
}
.founders__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.founders__photo-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  background: var(--graphite);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
}
.founders__badge {
  position: absolute;
  top: -14px;
  right: -10px;
  z-index: 3;
  background: var(--graphite);
  color: #fff;
  border-radius: 0.5rem;
  padding: 14px 18px;
  transform: rotate(3deg);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--sys-line);
}
.founders__badge .n {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--sys-accent);
}
.founders__badge .l {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.7);
}
.founders__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sys-accent);
}
.founders h1 {
  margin: 10px 0 0;
  font-family: inherit;
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-transform: none;
  color: var(--sys-ink);
}
.founders h1 .founders__name-accent { display: block; }
.founders__role {
  margin: 14px 0 0;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sys-dim);
}
.founders__body { margin: 22px 0 0; max-width: 54ch; }
.founders__body p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--sys-dim);
  margin: 0 0 18px;
}
.founders__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.founders-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 0.9rem 1.1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
}
.founders-btn--chrome,
.founders-btn--acid {
  background: linear-gradient(135deg, #5dd4f8 0%, #3fc9f5 40%, #0ea5e9 100%);
  color: var(--graphite);
  border-radius: 999px;
}
.founders-btn--chrome:hover { opacity: 0.85; }
.founders-btn--ghost {
  background: transparent;
  color: var(--sys-prose);
  border: 2px solid var(--sys-line);
}
.founders-btn--ghost:hover {
  border-color: var(--sys-accent);
  color: var(--sys-accent);
}
.hub-hero {
  max-width: 56rem;
  margin: 0 auto;
  padding: 5rem 1.25rem 4.5rem;
  text-align: center;
  border-bottom: 1px solid var(--sys-line);
}
.hub-hero--soft {
  background: var(--sys-bg-soft);
  border-bottom: 1px solid var(--sys-line);
  max-width: none;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.hub-hero__inner {
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
}
.hub-hero--soft > * {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}
.hub-kicker {
  margin: 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sys-accent);
}
.hub-kicker--gold { color: var(--sys-amber); }
.hub-hero h1 {
  margin: 0.75rem auto 0;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--sys-ink);
  text-align: center;
}
.hub-lead {
  margin: 1.25rem auto 0;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--sys-dim);
}
.hub-pills {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.hub-pills span {
  border: 1px solid var(--sys-line);
  background: var(--sys-bg);
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sys-prose);
}

.svc-wrap { max-width: var(--max); margin: 0 auto; padding: 5rem 1.25rem; }
.svc-intro { max-width: 36rem; }
.svc-intro h2 {
  margin: 0.75rem 0 0;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--sys-ink);
}
.svc-intro p { margin: 1rem 0 0; font-size: 1.1rem; line-height: 1.65; color: var(--sys-dim); }
.svc-grid {
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: 1fr 1fr 1fr; } }
.svc-card {
  border: 1px solid var(--sys-line);
  background: var(--sys-bg-soft);
  border-radius: 0.5rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.svc-card:hover {
  border-color: color-mix(in srgb, var(--sys-accent) 40%, var(--sys-line));
  box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--sys-accent) 40%, transparent);
}
.svc-card__link { display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; color: inherit; }
.svc-card__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 0.375rem;
  border: 1px solid color-mix(in srgb, var(--sys-accent) 20%, transparent);
  background: color-mix(in srgb, var(--sys-accent) 10%, transparent);
  color: var(--sys-accent);
}
.svc-card h3 { margin: 0; font-size: 1.125rem; font-weight: 900; color: var(--sys-ink); }
.svc-card p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--sys-dim); }
.svc-card ul { list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--sys-line); display: flex; flex-direction: column; gap: 0.5rem; }
.svc-card li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--sys-dim); }
.svc-card li svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--sys-accent); }
.svc-actions {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 640px) { .svc-actions { flex-direction: row; justify-content: center; } }
.svc-more { font-size: 0.875rem; font-weight: 600; color: var(--sys-dim); }
.svc-more:hover { color: var(--sys-accent); }

.cta-banner {
  background: var(--sys-bg-soft);
  text-align: center;
  padding: 5rem 1.25rem;
  border-top: 1px solid var(--sys-line);
}
.cta-banner h2 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--sys-ink);
}
.cta-banner p {
  margin: 1.25rem auto 0;
  max-width: 36rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--sys-dim);
}
.cta-banner__btns {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) { .cta-banner__btns { flex-direction: row; justify-content: center; } }

/* Homepage CTA: centered MMG block, no extra audit link. */
.cta-banner--mmg {
  background: var(--sys-bg);
  border-top: 1px solid var(--sys-line);
  padding: 5rem 1.25rem 7rem;
}
.cta-banner--mmg .cta-banner__inner { max-width: 48rem; margin: 0 auto; }
.cta-banner--mmg h2 { font-size: clamp(1.875rem, 4vw, 3rem); }
.cta-banner--mmg p { max-width: 36rem; }
@media (min-width: 640px) { .cta-banner--mmg { padding-top: 7rem; padding-bottom: 7rem; } }

.dir-panels {
  max-width: 64rem;
  margin: 0 auto;
  padding: 3rem 1.25rem;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 720px) { .dir-panels { grid-template-columns: 1fr 1fr; } }
.dir-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sys-line);
  border-radius: 0.75rem;
  background: var(--sys-bg);
  overflow: hidden;
}
.dir-panel__head { border-bottom: 1px solid var(--sys-line); padding: 1.25rem 1.5rem; }
.dir-panel__head h2 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--sys-ink); }
.dir-panel__head p { margin: 0.35rem 0 0; font-size: 1.05rem; line-height: 1.5; color: var(--sys-dim); }
.feat-locs {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.75rem 1.25rem 0;
}
.feat-locs h2 {
  margin: 0.65rem 0 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--sys-ink);
}
.feat-locs ul {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}
.feat-locs a {
  display: block;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--sys-line);
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sys-ink);
  text-decoration: none;
}
.feat-locs a:hover { border-color: var(--sys-accent); }
.dir-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 2rem;
}
@media (max-width: 720px) {
  .dir-grid { grid-template-columns: 1fr; }
}
.dir-panel {
  background: var(--sys-bg);
  border: 1px solid var(--sys-line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dir-panel__list {
  list-style: none;
  margin: 0;
  padding: 0.65rem;
}
.dir-panel__list a {
  display: block;
  padding: 0.8rem 0.95rem;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sys-ink);
  text-decoration: none;
}
.dir-panel__list a:hover {
  background: color-mix(in srgb, var(--sys-accent) 8%, transparent);
}
.mmg-dir__list {
  list-style: none;
  margin: 0;
  padding: 0.75rem;
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mmg-dir__list::-webkit-scrollbar { width: 6px; }
.mmg-dir__list::-webkit-scrollbar-thumb { background: var(--sys-line); border-radius: 6px; }
.mmg-dir__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.65rem 0.875rem;
  border: 1px solid transparent;
  border-radius: 8px;
}
.mmg-dir__item:hover {
  border-color: var(--sys-accent);
  background: color-mix(in srgb, var(--sys-accent) 6%, transparent);
}
.mmg-dir__item-name { font-weight: 600; color: var(--sys-ink); font-size: 0.9rem; }
.mmg-dir__item-meta { font-size: 0.78rem; color: var(--sys-dim); }
.dir-back { text-align: center; padding: 0 1rem 3rem; }
.dir-back a { font-size: 0.875rem; font-weight: 600; color: var(--sys-dim); }
.dir-back a:hover { color: var(--sys-accent); }

.contact-page {
  flex: 1;
  background: radial-gradient(ellipse at 50% 0%, #eff6ff 0%, var(--sys-bg) 65%);
}
html[data-theme="dark"] .contact-page {
  background: radial-gradient(ellipse at 50% 0%, #1c1f28 0%, var(--sys-bg) 65%);
}
.contact-split {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4rem 1.25rem 5rem;
  display: grid;
  gap: 3.5rem;
}
@media (min-width: 1024px) {
  .contact-split { grid-template-columns: 1fr 1fr; align-items: start; gap: 5rem; }
}
.contact-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #3FC9F5 0%, #0EA5E9 50%, #A855F7 100%);
}
.contact-copy h1 {
  margin: 1rem 0 0;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.contact-h-ink { color: var(--sys-ink); }
.text-gradient-metallic {
  background: linear-gradient(135deg, var(--sys-ink) 0%, var(--sys-prose) 40%, var(--sys-ink) 70%, var(--sys-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.contact-lead {
  margin: 1.25rem 0 0;
  max-width: 28rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--sys-dim);
}
.contact-links { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.contact-links a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sys-dim);
}
.contact-links a:hover { color: var(--sys-accent); }
.contact-ico {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  border: 1px solid color-mix(in srgb, var(--sys-accent) 20%, transparent);
  background: color-mix(in srgb, var(--sys-accent) 10%, transparent);
  color: var(--sys-accent);
}
.contact-bullets { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.contact-bullets li {
  padding-left: 1.6rem;
  position: relative;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sys-dim);
}
.contact-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--sys-amber);
  font-weight: 800;
}
.contact-metrics {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.cmet {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border: 1px solid var(--sys-line);
  background: var(--sys-bg-soft);
  border-radius: 0.5rem;
  padding: 1rem;
}
.cmet__num { font-size: 1.85rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.cmet__num--chrome { color: var(--sys-accent); }
.cmet__num--spark { color: #c084fc; }
.cmet__num--gold { color: var(--sys-amber); }
.cmet__label { margin: 0.25rem 0 0; font-size: 0.875rem; font-weight: 700; color: var(--sys-ink); }
.cmet__note { margin: 0; font-size: 0.75rem; color: var(--sys-dim); }
.contact-metrics-foot { margin: 0.75rem 0 0; font-size: 11px; color: color-mix(in srgb, var(--sys-dim) 50%, transparent); }
.contact-cal-note { margin: 0.75rem 0 0; font-size: 0.75rem; color: var(--sys-dim); }

.results-wrap { max-width: var(--max); margin: 0 auto; padding: 3rem 1.25rem 1rem; }
.agg-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (min-width: 900px) { .agg-grid { grid-template-columns: repeat(4, 1fr); } }
.agg-grid li {
  border: 1px solid var(--sys-line);
  background: var(--sys-bg-soft);
  border-radius: 0.75rem;
  padding: 1.5rem 1.4rem;
}
.agg-val { margin: 0; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; color: var(--sys-ink); }
.agg-label { margin: 0.4rem 0 0; font-size: 0.875rem; font-weight: 800; color: var(--sys-prose); }
.agg-note { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--sys-dim); }
.result-cards {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 700px) { .result-cards { grid-template-columns: 1fr 1fr; } }
.result-cards li {
  border: 1px solid var(--sys-line);
  background: var(--sys-bg-soft);
  border-radius: 0.5rem;
  padding: 1.75rem;
}
.result-ind { margin: 0 0 1.1rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sys-prose); }
.result-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.result-nums p { margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--sys-ink); }
.result-nums span { display: block; margin-top: 0.15rem; font-size: 0.8rem; font-weight: 600; color: var(--sys-dim); }
.results-foot { margin: 1.5rem 0 0; font-size: 0.75rem; color: color-mix(in srgb, var(--sys-dim) 60%, transparent); }
.cs-list-wrap { max-width: var(--max); margin: 0 auto; padding: 2rem 1.25rem 5rem; }
.cs-list-title { margin: 0.6rem 0 1.25rem; font-size: 1.6rem; font-weight: 900; color: var(--sys-ink); }
.cs-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sys-line);
  background: var(--sys-bg-soft);
  border-radius: 0.75rem;
  padding: 1.75rem;
}
.cs-card:hover { border-color: color-mix(in srgb, var(--sys-accent) 40%, var(--sys-line)); }
.cs-card__meta { display: flex; align-items: center; gap: 0.75rem; }
.cs-tag {
  border: 1px solid color-mix(in srgb, var(--sys-accent) 20%, transparent);
  background: color-mix(in srgb, var(--sys-accent) 10%, transparent);
  color: var(--sys-accent);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.cs-card time { font-size: 0.75rem; color: var(--sys-dim); }
.cs-card h3 { margin: 0.85rem 0 0; font-size: 1.35rem; font-weight: 800; color: var(--sys-ink); }
.cs-card p { margin: 0.6rem 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--sys-dim); }
.cs-card__go { display: inline-block; margin-top: auto; padding-top: 0.9rem; font-size: 0.875rem; font-weight: 700; color: var(--sys-accent); }
.cs-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 800px) { .cs-grid { grid-template-columns: 1fr 1fr; } }
.cs-card__media {
  margin: -1.75rem -1.75rem 1.25rem;
  overflow: hidden;
  border-radius: 0.75rem 0.75rem 0 0;
  background: #0b0c0e;
  aspect-ratio: 16 / 9;
}
.cs-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prose blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--sys-accent);
  background: var(--sys-bg-soft);
}

@media (max-width: 920px) {
  .founders {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "copy"
      "cta";
    max-width: 520px;
    row-gap: 1.5rem;
  }
  .founders__badge { top: -10px; right: 8px; }
}

/* ── Case study detail ──────────────────────────────── */
.cs-detail { padding-bottom: 0; }
.cs-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 2.75rem;
}
@media (min-width: 800px) {
  .cs-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2.5rem;
    align-items: end;
    padding: 3.25rem 1.5rem 3.25rem;
  }
}
.cs-hero__copy .back { margin-bottom: 1.15rem; }
.cs-hero h1 {
  margin: 0.7rem 0 0;
  font-size: clamp(2rem, 4.4vw, 3.35rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--sys-ink);
}
.cs-hero__outcome {
  margin: 1rem 0 0;
  font-size: 1.2rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--sys-ink);
}
.cs-hero__lead {
  margin: 0.85rem 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--sys-dim);
  max-width: 38rem;
}
.cs-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.35rem 0 0;
}
.cs-hero__pills span {
  border: 1px solid var(--sys-line);
  background: var(--sys-bg-soft);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sys-prose);
}
.cs-hero__media {
  margin-top: 1.75rem;
  border: 1px solid var(--sys-line);
  border-radius: 0.85rem;
  overflow: hidden;
  background: #0b0c0e;
}
@media (min-width: 800px) { .cs-hero__media { margin-top: 0; } }
.cs-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}
.cs-hero__caption {
  margin: 0;
  padding: 0.7rem 1rem;
  font-size: 0.75rem;
  color: var(--sys-dim);
  border-top: 1px solid var(--sys-line);
  background: var(--sys-bg-soft);
}

.cs-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem 3.5rem;
}
@media (min-width: 800px) { .cs-section { padding: 0 1.5rem 4rem; } }
.cs-section h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--sys-ink);
}
.cs-section .prose { max-width: 46rem; }
.cs-split {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 800px) { .cs-split { grid-template-columns: 1.4fr 0.8fr; align-items: start; } }
.cs-facts {
  list-style: none;
  margin: 0;
  padding: 1.25rem 1.3rem;
  border: 1px solid var(--sys-line);
  background: var(--sys-bg-soft);
  border-radius: 0.75rem;
}
.cs-facts li {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--sys-line);
  font-size: 0.95rem;
}
.cs-facts li:first-child { border-top: 0; padding-top: 0; }
.cs-facts li:last-child { padding-bottom: 0; }
.cs-facts span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sys-dim);
}
.cs-facts strong { color: var(--sys-ink); font-weight: 700; }

.cs-metrics { padding-top: 0.25rem; }
.cs-metrics .agg-grid { margin-top: 0.25rem; }
.cs-note {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  color: var(--sys-dim);
}
.cs-note strong { color: var(--sys-amber); font-weight: 700; }

.cs-qual {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 700px) { .cs-qual { grid-template-columns: 1fr 1fr; } }
.cs-qual li {
  border: 1px solid var(--sys-line);
  background: var(--sys-bg-soft);
  border-radius: 0.75rem;
  padding: 1.25rem 1.3rem;
}
.cs-qual h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--sys-ink);
}
.cs-qual p {
  margin: 0.45rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sys-dim);
}

.cs-decisions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 700px) { .cs-decisions { grid-template-columns: 1fr 1fr; } }
.cs-decisions li {
  border: 1px solid var(--sys-line);
  background: var(--sys-bg-soft);
  border-radius: 0.75rem;
  padding: 1.35rem 1.35rem 1.4rem;
}
.cs-decisions h3 {
  margin: 0.35rem 0 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--sys-ink);
}
.cs-decisions p {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sys-dim);
}
.cs-step {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sys-accent);
}

.cs-compare {
  display: grid;
  gap: 1rem;
}
@media (min-width: 800px) { .cs-compare { grid-template-columns: 1fr 1fr; } }
.cs-compare__col {
  border: 1px solid var(--sys-line);
  background: var(--sys-bg-soft);
  border-radius: 0.75rem;
  overflow: hidden;
}
.cs-compare__label {
  margin: 0;
  padding: 0.7rem 1.15rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--sys-line);
}
.cs-compare__col--before .cs-compare__label { color: var(--sys-dim); }
.cs-compare__col--after .cs-compare__label { color: var(--sys-accent); }
.cs-compare ul {
  margin: 0;
  padding: 1rem 1.15rem 1.2rem 2rem;
}
.cs-compare li {
  margin: 0.45rem 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--sys-prose);
}
.cs-compare__shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #0b0c0e;
}
.cs-compare__visit {
  display: block;
  padding: 0.85rem 1.15rem 1.15rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sys-accent);
}

.cs-quote {
  max-width: var(--max);
  margin: 0 auto 1rem;
  padding: 0 1.25rem 3.5rem;
}
.cs-quote blockquote {
  margin: 0;
  padding: 1.75rem 1.5rem;
  border-left: 3px solid var(--sys-accent);
  background: var(--sys-bg-soft);
  border-radius: 0 0.75rem 0.75rem 0;
}
.cs-quote p {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--sys-ink);
}
.cs-quote footer {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--sys-dim);
}

.cs-live {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}
.cs-live a { color: var(--sys-accent); font-weight: 700; }

/* ══════════════════════════════════════════════════════
   Homepage rebuild + /pricing.
   Built from the existing token set only — no new colors,
   no new fonts. Mirrors .svc-card / .metrics / .steps
   treatments already in use elsewhere on the site.
   ══════════════════════════════════════════════════════ */

/* ── Hero badge, long-form sentence case ────────────── */
.eyebrow--plain {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}
.eyebrow__stars {
  flex-shrink: 0;
  letter-spacing: 0.08em;
  color: var(--sys-accent);
}

/* Caption under the hero stat cards */
.metrics-foot {
  margin: 0.85rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--sys-dim) 65%, transparent);
}

/* ── What We Do: category label + accented titles ───── */
.svc-card__head {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.svc-card__cat {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--sys-dim);
}
/* Per-card accent: one variable drives the icon tile, the title,
   and the bullet checks. Default is the site accent. */
.svc-card { --card-accent: var(--sys-accent); }
.svc-card--amber { --card-accent: var(--sys-amber); }
.svc-card--spark { --card-accent: var(--spark); }
html[data-theme="dark"] .svc-card--spark { --card-accent: #c084fc; }

.svc-card .svc-card__icon {
  border-color: color-mix(in srgb, var(--card-accent) 20%, transparent);
  background: color-mix(in srgb, var(--card-accent) 10%, transparent);
  color: var(--card-accent);
}
.svc-card .svc-card__head h3 { color: var(--card-accent); }
.svc-card .svc-card__link li svg { color: var(--card-accent); }

/* ── How It Works: closing CTA under the steps ─────── */
.steps-cta {
  margin-top: 3.25rem;
  text-align: center;
}
.steps-cta p {
  margin: 0 0 1.35rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sys-ink);
}

/* ── Why Choose Us: two-column split ───────────────── */
.why-split {
  margin-top: 2.5rem;
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .why-split { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.why-split__copy .lede { margin-top: 1.25rem; }
.why-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.why-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
}
.why-item__ico {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  border: 1.5px solid var(--sys-accent);
  border-radius: 999px;
  color: var(--sys-accent);
}
.why-item__ico svg { width: 11px; height: 11px; }
.why-item h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--sys-ink);
}
.why-item p {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sys-dim);
}
.why-foot {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--sys-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 640px) {
  .why-foot { flex-direction: row; justify-content: center; gap: 1.5rem; }
}
.why-foot__note { margin: 0; font-size: 0.875rem; color: var(--sys-dim); }
.why-foot__note a {
  color: var(--sys-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.why-foot__note a:hover { color: var(--sys-accent); }

/* ── Testimonials ──────────────────────────────────── */
.tst-grid {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) { .tst-grid { grid-template-columns: repeat(3, 1fr); } }
.tst-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--sys-line);
  border-radius: 0.5rem;
  background: var(--sys-bg-soft);
}
.tst-stars {
  display: flex;
  gap: 0.2rem;
  color: var(--sys-amber);
}
.tst-stars svg { width: 13px; height: 13px; fill: currentColor; }
.tst-card blockquote {
  margin: 1.1rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--sys-prose);
}
.tst-card figcaption {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sys-line);
}
.tst-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--sys-ink);
}
.tst-city {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--sys-dim);
}

/* ── Footer: three-column variant ──────────────────── */
@media (min-width: 1024px) {
  .site-foot__grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── /pricing ──────────────────────────────────────── */
.price-grid {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}
@media (min-width: 900px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  border: 1px solid var(--sys-line);
  border-radius: 0.5rem;
  background: var(--sys-bg-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.price-card:hover {
  border-color: color-mix(in srgb, var(--sys-accent) 40%, var(--sys-line));
  box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--sys-accent) 40%, transparent);
}
.price-card--featured {
  border-color: color-mix(in srgb, var(--sys-accent) 55%, var(--sys-line));
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--sys-accent) 45%, transparent);
}
.price-badge {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  background: linear-gradient(135deg, #5dd4f8 0%, #3fc9f5 40%, #0ea5e9 100%);
  color: var(--graphite);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.price-card h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sys-ink);
}
.price-amt {
  margin: 0.75rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.price-amt strong {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--sys-ink);
}
.price-amt span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sys-dim);
}
.price-card ul {
  list-style: none;
  flex: 1;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--sys-line);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.price-card li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sys-dim);
}
.price-card li svg {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--sys-accent);
}
.price-card .btn-chrome { margin-top: 1.75rem; }
.price-note {
  margin: 2.75rem auto 0;
  max-width: 46rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--sys-dim);
}
.price-note a {
  color: var(--sys-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alacarte {
  margin-top: 3rem;
  padding: 1.75rem;
  border: 1px solid var(--sys-line);
  border-radius: 0.5rem;
  background: var(--sys-bg-soft);
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 800px) {
  .alacarte { grid-template-columns: 1fr auto; gap: 2.5rem; padding: 2rem 2.25rem; }
}
/* These four are <p> inside .alacarte, so they must out-specify
   the `.alacarte .alacarte__desc` body rule below. */
.alacarte .alacarte__cat {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sys-accent);
}
.alacarte h2 {
  margin: 0.5rem 0 0;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--sys-ink);
}
.alacarte .alacarte__desc {
  margin: 0.6rem 0 0;
  max-width: 28rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sys-dim);
}
.alacarte__price { text-align: left; }
@media (min-width: 800px) { .alacarte__price { text-align: right; } }
.alacarte .alacarte__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sys-dim);
}
.alacarte .alacarte__amt {
  margin: 0.35rem 0 0;
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--sys-ink);
}
.alacarte .alacarte__term {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--sys-dim);
}
.alacarte .btn-chrome { margin-top: 1.25rem; }

/* Also a <p> inside .cta-banner, which sets its own p font-size. */
.cta-banner .cta-banner__kicker {
  margin: 0 0 0.85rem;
  max-width: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sys-accent);
}

/* ── /services closing block: Free Growth Analysis ──── */
.cta-banner .cta-banner__kicker--gold { color: var(--sys-amber); }
.growth-list {
  list-style: none;
  margin: 2rem auto 0;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
}
.growth-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: center;
  font-size: 0.95rem;
  color: var(--sys-prose);
}
.growth-list li svg {
  flex-shrink: 0;
  color: var(--sys-accent);
}

/* ── /pricing a-la-carte card: inclusions list ──────── */
.alacarte__list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.alacarte__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sys-dim);
}
.alacarte__list li svg {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--sys-accent);
}