/* Compatibility layer for migrated NIKA pages.
   Keeps the source content/layout while applying the current graphite/cobalt system. */
.migrated-page {
  --pink: var(--brand-accent);
  --violet: var(--brand-accent-hover);
  --blue: var(--brand-surface);
  --lime: #e8ecf5;
  --yellow: #e8ecf5;
  --muted: var(--brand-muted);
  --line: var(--brand-border);
  background: var(--paper);
  color: var(--brand-ink);
  font-family: var(--font-body);
}
.migrated-page .site-header .nav {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none;
}
.migrated-page .site-header .nav a { color: #fff; }
.migrated-page .site-header .nav a:last-child { color: #fff; }
.migrated-page .brand-name { color: #fff !important; }
.migrated-page h1,
.migrated-page h2,
.migrated-page h3,
.migrated-page h4,
.migrated-page .mega-metric,
.migrated-page .number,
.migrated-page .num,
.migrated-page .metric b,
.migrated-page .proof-item b,
.migrated-page .email-number,
.migrated-page .b2b-result,
.migrated-page .case strong {
  font-family: var(--font-display);
  font-stretch: condensed;
}
.migrated-page .hero {
  min-height: 650px !important;
  padding: 140px 0 76px !important;
  background: var(--brand-ink) !important;
  color: #fff !important;
}
.migrated-page .hero h1 {
  max-width: 13ch !important;
  margin: 16px 0 26px !important;
  font-size: clamp(3.2rem, 6vw, 6.5rem) !important;
  line-height: .96 !important;
  letter-spacing: -.035em !important;
  text-transform: none !important;
}
.migrated-page .hero h1 span,
.migrated-page .hero h1 em,
.migrated-page .hero .accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #8fa8ef !important;
  font-style: normal;
}
.migrated-page .hero .lead,
.migrated-page .hero p,
.migrated-page .hero .micro { color: #c8ccd4 !important; }
.migrated-page .hero .eyebrow { color: #9bb0ed !important; }
.migrated-page .hero-panel,
.migrated-page .hero-card,
.migrated-page .hero-art,
.migrated-page .booking {
  background: #20242d !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}
.migrated-page .hero-panel span,
.migrated-page .hero-card span,
.migrated-page .booking-head span { color: #b9bec8 !important; }
.migrated-page .btn,
.migrated-page .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 18px !important;
  border: 1px solid var(--brand-accent) !important;
  border-radius: 4px !important;
  background: var(--brand-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 900;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.migrated-page .btn:hover,
.migrated-page .button:hover { background: var(--brand-accent-hover) !important; border-color: var(--brand-accent-hover) !important; transform: translateY(-2px); }
.migrated-page .btn.ghost,
.migrated-page .button.ghost { background: transparent !important; color: inherit !important; border-color: currentColor !important; }
.migrated-page .btn.light,
.migrated-page .button.light { background: #fff !important; color: var(--brand-ink) !important; border-color: #fff !important; }
.migrated-page .section,
.migrated-page .catalog,
.migrated-page .engagements,
.migrated-page .process,
.migrated-page .deliverables,
.migrated-page .offers,
.migrated-page .platforms,
.migrated-page .problems,
.migrated-page .work,
.migrated-page .principles,
.migrated-page .details,
.migrated-page .team,
.migrated-page .founder,
.migrated-page .story,
.migrated-page .education,
.migrated-page .experience,
.migrated-page .b2b-detail,
.migrated-page .gallery,
.migrated-page .social,
.migrated-page .offline,
.migrated-page .crm,
.migrated-page .email-impact,
.migrated-page .results,
.migrated-page .outcome,
.migrated-page .fit,
.migrated-page .services,
.migrated-page .system,
.migrated-page .founder-section {
  scroll-margin-top: 90px;
}
.migrated-page .section-head h2,
.migrated-page .section h2,
.migrated-page .cta h2,
.migrated-page .final h2,
.migrated-page .contact h2 {
  color: inherit;
  font-size: clamp(2.35rem, 4.2vw, 4.5rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}
.migrated-page .section-head p,
.migrated-page .section-lead,
.migrated-page .lead { color: var(--brand-muted); }
.migrated-page .eyebrow { color: var(--brand-accent) !important; }
.migrated-page .eyebrow::before { background: currentColor !important; }
.migrated-page .card,
.migrated-page .case,
.migrated-page .engagement,
.migrated-page .industry,
.migrated-page .fit-card,
.migrated-page .problem,
.migrated-page .problem-card,
.migrated-page .phase,
.migrated-page .deck-card,
.migrated-page .risk-box,
.migrated-page .deliver,
.migrated-page .contact-card,
.migrated-page .mission-card,
.migrated-page .fact,
.migrated-page .role,
.migrated-page .principle,
.migrated-page .offer,
.migrated-page .platform,
.migrated-page .why,
.migrated-page .case-slot,
.migrated-page .shot,
.migrated-page .social-card,
.migrated-page .stake,
.migrated-page .track,
.migrated-page .node,
.migrated-page .pair,
.migrated-page .story-card,
.migrated-page .google-proof,
.migrated-page .crm-map,
.migrated-page .email-impact,
.migrated-page .b2b-flow,
.migrated-page .b2b-result,
.migrated-page .metric,
.migrated-page .proof-item,
.migrated-page .deliverable,
.migrated-page .step,
.migrated-page .team-photo,
.migrated-page .portrait {
  box-shadow: none !important;
  border-radius: 4px !important;
  border-color: var(--brand-border) !important;
}
.migrated-page .card,
.migrated-page .case,
.migrated-page .engagement,
.migrated-page .fit-card,
.migrated-page .problem-card,
.migrated-page .deck-card,
.migrated-page .deliver,
.migrated-page .contact-card,
.migrated-page .mission-card,
.migrated-page .principle,
.migrated-page .offer,
.migrated-page .platform,
.migrated-page .why,
.migrated-page .case-slot,
.migrated-page .metric,
.migrated-page .proof-item {
  background: #fff !important;
}
.migrated-page .specialized,
.migrated-page .results,
.migrated-page .system,
.migrated-page .founder-section,
.migrated-page .outcome,
.migrated-page .final,
.migrated-page .cta {
  background: var(--brand-ink) !important;
  color: #fff !important;
}
.migrated-page .specialized p,
.migrated-page .results p,
.migrated-page .system p,
.migrated-page .founder-section p,
.migrated-page .outcome p,
.migrated-page .final p,
.migrated-page .cta p { color: #b9bec8 !important; }
.migrated-page .note,
.migrated-page .proof,
.migrated-page .positioning,
.migrated-page .market-entry,
.migrated-page .principles,
.migrated-page .work,
.migrated-page .offline,
.migrated-page .email-impact,
.migrated-page .social,
.migrated-page .platforms,
.migrated-page .deliverables {
  background: var(--brand-surface) !important;
  color: var(--brand-ink) !important;
}
.migrated-page .proof-strip,
.migrated-page .cta-strip { background: var(--brand-surface) !important; color: var(--brand-ink) !important; }
.migrated-page .mega,
.migrated-page .makebox,
.migrated-page .video,
.migrated-page .case-panel {
  box-shadow: none !important;
  border-radius: 4px !important;
}
.migrated-page .makebox,
.migrated-page .video,
.migrated-page .case-panel { background: var(--brand-ink) !important; color: #fff !important; }
.migrated-page .makebox p,
.migrated-page .video p,
.migrated-page .case-panel p { color: #b9bec8 !important; }
.migrated-page .tag,
.migrated-page .chip,
.migrated-page .badge { border-radius: 4px !important; }
.migrated-page .group-row a,
.migrated-page .tags .tag { border-color: var(--brand-border) !important; background: #fff !important; color: var(--brand-ink) !important; }
.migrated-page .case-grid strong,
.migrated-page .proof-item b,
.migrated-page .metric b,
.migrated-page .email-number,
.migrated-page .b2b-result { color: var(--brand-accent) !important; }
.migrated-page .booking iframe { width: 100%; min-height: 650px; border: 0; background: #fff; }
.migrated-page .gallery img,
.migrated-page .shot img { width: 100%; height: auto; display: block; border-radius: 4px; }
.migrated-page .footer { background: var(--brand-ink) !important; color: #fff !important; }
.migrated-page .footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.migrated-page .footer-row a { color: #d8dce5; }
.migrated-page .footer-row a:hover { color: #fff; }
.migrated-page .footer-logo { margin-right: auto; }
.migrated-page .gallery-grid { align-items: stretch; }
.migrated-page .gallery-grid .shot { overflow: hidden; background: #fff; }
.migrated-page .google-table { border-color: var(--brand-border) !important; }
.migrated-page .google-cell { border-color: var(--brand-border) !important; }
.migrated-page details { border-color: var(--brand-border) !important; }
.migrated-page .fit-card.yes,
.migrated-page .fit-card.good { background: #fff !important; color: var(--brand-ink) !important; }
.migrated-page .fit-card.no,
.migrated-page .fit-card.not { background: var(--brand-ink) !important; color: #fff !important; }
.migrated-page .fit-card.no p,
.migrated-page .fit-card.not p,
.migrated-page .fit-card.no li,
.migrated-page .fit-card.not li { color: #d7dbe3 !important; }
.migrated-page .contact { background: #fff !important; color: var(--brand-ink) !important; border-top: 1px solid var(--brand-border); }
.migrated-page .contact p { color: var(--brand-muted) !important; }
.migrated-page .contact-card a { color: var(--brand-accent); }
.migrated-page .final .button.light { background: #fff !important; color: var(--brand-ink) !important; }

@media (max-width: 800px) {
  .migrated-page .site-header .nav {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    padding: 80px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: var(--brand-ink) !important;
    transform: translateY(-100%) !important;
    transition: transform .45s ease !important;
  }
  .migrated-page .site-header .nav.open { transform: translateY(0) !important; }
  .migrated-page .hero { min-height: auto !important; padding-top: 120px !important; }
  .migrated-page .hero h1 { font-size: clamp(3rem, 15vw, 5rem) !important; }
  .migrated-page .footer-row { align-items: flex-start; }
}