/* Senior UI polish — hierarchy, rhythm, responsive behavior and interaction quality. */
:root {
  --ui-gutter: clamp(18px, 4vw, 64px);
  --ui-section: clamp(88px, 8vw, 132px);
  --ui-section-tight: clamp(64px, 6vw, 96px);
  --ui-copy: #54545b;
  --ui-subtle: #76767f;
  --ui-border: rgba(10, 15, 26, .14);
  --ui-focus: 0 0 0 4px rgba(90, 59, 255, .18);
}

/* Base rhythm and accessibility */
html { scroll-padding-top: 96px; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
a, button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--violet) !important;
  outline-offset: 3px;
  box-shadow: var(--ui-focus);
}
.wrap { width: min(var(--reference-wrap), calc(100% - (var(--ui-gutter) * 2))) !important; }

/* Header: stable, consistent and useful on long pages. */
.site-header,
.migrated-page .site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  min-height: 84px !important;
  height: 84px !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  background: rgba(255,255,255,.94) !important;
  border-bottom-color: rgba(10,15,26,.12) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}
.site-header .nav,
.migrated-page .site-header .nav { gap: clamp(22px, 2.6vw, 36px) !important; }
.site-header .nav > a:not(:last-child),
.migrated-page .site-header .nav > a:not(:last-child) {
  position: relative;
  padding: 12px 0;
}
.site-header .nav > a:not(:last-child)::after,
.migrated-page .site-header .nav > a:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .22s ease;
}
.site-header .nav > a:not(:last-child):hover::after,
.migrated-page .site-header .nav > a:not(:last-child):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.site-header .nav a:last-child,
.migrated-page .site-header .nav a:last-child,
.pill-cta,
.migrated-page .btn,
.migrated-page .button,
.case-contact .contact-link {
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease !important;
}
.site-header .nav a:last-child:hover,
.migrated-page .site-header .nav a:last-child:hover,
.pill-cta:hover,
.migrated-page .btn:hover,
.migrated-page .button:hover,
.case-contact .contact-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(10,15,26,.14) !important;
}

/* Typographic hierarchy */
.eyebrow, .section-label, .migrated-page .eyebrow {
  line-height: 1.45 !important;
  margin-bottom: 24px !important;
}
.section-lead,
.long-copy p,
.story-copy p,
.case-deck p,
.migrated-page .lead,
.migrated-page .section-head p {
  color: var(--ui-copy) !important;
  max-width: 62ch;
  font-size: clamp(17px, 1.25vw, 20px) !important;
  line-height: 1.6 !important;
}
.section h2,
.migrated-page .section h2,
.partners-band h2,
.case-contact h2 {
  text-wrap: balance;
}

/* Home hero: retain drama but improve breathing room. */
.home-v2 .home-hero { padding-top: clamp(70px, 7vw, 100px) !important; padding-bottom: 56px !important; }
.home-v2 .home-hero .hero-stage { align-items: center !important; gap: clamp(64px, 7vw, 104px) !important; }
.home-v2 .home-hero h1 { font-size: clamp(62px, 7vw, 104px) !important; max-width: 9.2ch !important; }
.home-v2 .hero-bottom { margin-top: 34px !important; }
.home-v2 .hero-ctas { gap: 14px; align-items: center; }
.home-v2 .founder-video-frame { min-height: 340px; }
.home-v2 .founder-video-meta { margin-top: 16px; align-items: baseline; }
.home-v2 main > .section.compact .metric { padding: 30px 24px !important; }

/* Home sections: consistent vertical rhythm. */
.home-v2 .leak-section,
.home-v2 #system,
.home-v2 #results,
.home-v2 #services,
.home-v2 #explore,
.home-v2 .partners-band,
.home-v2 .why-agencynika,
.home-v2 .fit-section,
.home-v2 .faq-section,
.home-v2 .diagnosis { padding-top: var(--ui-section) !important; padding-bottom: var(--ui-section) !important; }
.home-v2 #results .case-study-row { gap: 16px !important; }
.home-v2 .case-study-card { min-height: 470px; display: flex; flex-direction: column; }
.home-v2 .case-study-card > strong { margin-top: auto; }
.home-v2 .case-study-card:hover { transform: translateY(-4px) !important; filter: none !important; }
.home-v2 #explore .service { transition: background-color .2s ease, transform .2s ease; }
.home-v2 #explore .service:hover { transform: translateY(-3px); }
.home-v2 .partner-grid > * { transition: background-color .2s ease, color .2s ease; }
.home-v2 .partner-grid > *:not(a):hover { background: rgba(255,255,255,.55) !important; }
.home-v2 .comparison > div { min-height: 72px; }
.home-v2 .comparison span, .home-v2 .comparison b { line-height: 1.35; }

/* Migrated landing pages */
.migrated-page .hero { padding-top: clamp(76px, 7vw, 104px) !important; padding-bottom: clamp(76px, 7vw, 104px) !important; }
.migrated-page .hero-grid { align-items: center !important; gap: clamp(52px, 7vw, 96px) !important; }
.migrated-page .hero h1 {
  font-size: clamp(58px, 6.3vw, 94px) !important;
  line-height: .91 !important;
  max-width: 11ch !important;
  text-wrap: balance;
}
.migrated-page .hero .lead { margin-top: 28px !important; font-size: clamp(17px, 1.35vw, 20px) !important; line-height: 1.58 !important; }
.migrated-page .hero-actions,
.migrated-page .actions { gap: 14px !important; margin-top: 28px !important; align-items: center; }
.migrated-page .hero-panel,
.migrated-page .hero-card,
.migrated-page .hero-art,
.migrated-page .booking { min-width: 0; }
.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 { padding-top: var(--ui-section-tight) !important; padding-bottom: var(--ui-section-tight) !important; }
.migrated-page .card,
.migrated-page .engagement,
.migrated-page .case,
.migrated-page .fit-card,
.migrated-page .problem-card,
.migrated-page .offer,
.migrated-page .platform,
.migrated-page .principle,
.migrated-page .contact-card {
  border: 1px solid var(--ui-border) !important;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.migrated-page .card:hover,
.migrated-page .engagement:hover,
.migrated-page .case:hover,
.migrated-page .offer:hover,
.migrated-page .platform:hover {
  transform: translateY(-3px);
  border-color: rgba(90,59,255,.34) !important;
}

/* About needs a quieter, editorial hero than the sales pages. */
.migrated-about .hero h1 { font-size: clamp(54px, 5.25vw, 80px) !important; max-width: 10.5ch !important; }
.migrated-about .hero h1 span { color: var(--ink) !important; }
.migrated-about .hero h1 > .line:first-child > span { color: var(--violet) !important; }
.migrated-about .hero-art { align-self: stretch; min-height: 420px; display: flex; align-items: flex-end; }
.migrated-about .hero-quote { width: 100%; }

/* Contact page: keep the booking useful without letting it overpower the proposition. */
.migrated-contact .hero-grid { grid-template-columns: minmax(0,.9fr) minmax(520px,1.1fr) !important; }
.migrated-contact .hero h1 { font-size: clamp(58px, 5.7vw, 86px) !important; max-width: 9.5ch !important; }
.migrated-contact .booking { overflow: hidden; }
.migrated-contact .booking iframe { width: 100%; border: 0; }

/* Case studies: stop headline/phone collisions and make all three cases behave alike. */
.case-page .case-hero { padding-top: clamp(72px, 6vw, 96px) !important; padding-bottom: clamp(72px, 6vw, 96px) !important; }
.case-page .case-hero-layout {
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .62fr) !important;
  gap: clamp(52px, 7vw, 96px) !important;
  align-items: center !important;
}
.case-page .case-hero-copy { min-width: 0; }
.case-page .case-hero h1 {
  max-width: 8.6ch !important;
  font-size: clamp(58px, 6vw, 88px) !important;
  line-height: .92 !important;
  letter-spacing: -.07em !important;
  text-wrap: balance;
}
.case-page .keep-line { white-space: normal !important; }
.case-page .case-deck { grid-template-columns: 1fr !important; gap: 24px !important; max-width: 640px; margin-top: 34px !important; }
.case-page .case-actions { justify-content: flex-start !important; }
.case-page .case-phone-visual { width: 100%; max-width: 355px; margin: 0 auto -20px !important; }
.case-page .case-phone-visual img { max-height: 560px !important; }
.case-page .section { padding-top: var(--ui-section-tight) !important; padding-bottom: var(--ui-section-tight) !important; }
.case-page .project-facts { margin-top: 64px; }
.case-page .challenge-item,
.case-page .deliverable,
.case-page .outcome-grid article,
.case-page .channel-grid article,
.case-page .expansion-grid article { padding: 28px !important; }
.case-page .case-switcher { padding: 28px 0; }
.case-page .case-switcher-links a { min-height: 58px; }
.case-page .next-case { padding: 72px 0 !important; }
.case-page .next-case h2 { margin-top: 10px; }

/* Wheels is built on the migrated template; align its typography with the other cases. */
.migrated-wheels .hero h1 { font-size: clamp(58px, 6vw, 88px) !important; max-width: 9ch !important; }
.migrated-wheels .hero .lead { max-width: 650px !important; }

/* Forms */
.modal-form input, .modal-form select, .modal-form textarea,
.diagnosis-form input, .diagnosis-form select, .diagnosis-form textarea {
  min-height: 52px;
  padding: 14px 16px !important;
  border-color: var(--ui-border) !important;
  font-size: 16px !important;
}
.modal-form textarea, .diagnosis-form textarea { min-height: 130px; }

/* Footer: deliberate hierarchy instead of loose utility links. */
.footer { min-height: 0 !important; padding: 64px 0 32px !important; }
.footer-row { min-height: 120px; padding-top: 28px !important; gap: 24px 32px; align-items: center; flex-wrap: wrap; }
.footer-row a:not(.footer-brand) { font-weight: 700; }

/* 404 page */
.error-page main { min-height: calc(100dvh - 84px); display: grid; align-items: center; }
.error-page h1 { max-width: 9ch; font-size: clamp(64px, 8vw, 116px); line-height: .88; letter-spacing: -.075em; }

@media (max-width: 1100px) {
  .migrated-contact .hero-grid { grid-template-columns: 1fr !important; }
  .case-page .case-hero-layout { grid-template-columns: minmax(0,1fr) minmax(240px,.5fr) !important; }
  .case-page .case-hero h1 { font-size: clamp(54px, 6.7vw, 78px) !important; }
}

@media (max-width: 800px) {
  :root { --ui-section: 76px; --ui-section-tight: 68px; }
  html { scroll-padding-top: 76px; }
  .site-header, .migrated-page .site-header {
    position: sticky !important;
    height: 76px !important;
    min-height: 76px !important;
    background: rgba(255,255,255,.96) !important;
  }
  .nika-logo { height: 46px; }
  .nika-logo b { font-size: 38px; }
  .nika-logo i { font-size: 9px; }
  .menu-toggle { font-size: 15px; letter-spacing: .04em; }
  .eyebrow, .section-label, .migrated-page .eyebrow {
    margin-bottom: 20px !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
  }
  .home-v2 .home-hero { padding-top: 58px !important; padding-bottom: 54px !important; }
  .home-v2 .home-hero h1,
  .migrated-page .hero h1,
  .case-page .case-hero h1 {
    font-size: clamp(46px, 12.6vw, 60px) !important;
    line-height: .93 !important;
    letter-spacing: -.06em !important;
    max-width: none !important;
  }
  .home-v2 .hero-bottom p,
  .migrated-page .hero .lead,
  .case-page .case-deck p,
  .long-copy p,
  .section-lead {
    font-size: 17px !important;
    line-height: 1.58 !important;
  }
  .home-v2 .hero-ctas,
  .migrated-page .hero-actions,
  .migrated-page .actions,
  .case-page .case-actions { align-items: stretch !important; }
  .pill-cta,
  .migrated-page .btn,
  .migrated-page .button,
  .case-actions a.tag,
  .case-contact .contact-link { justify-content: center; min-height: 50px !important; }
  .home-v2 .founder-video-frame { min-height: 260px; }
  .home-v2 main > .section.compact .metric { padding: 24px 18px !important; }
  .home-v2 .case-study-card { min-height: 340px; padding: 26px !important; }
  .home-v2 .case-study-card h3 { margin-top: 38px !important; }
  .migrated-page .hero { padding-top: 64px !important; padding-bottom: 68px !important; }
  .migrated-page .hero-grid { gap: 42px !important; }
  .migrated-about .hero h1 { font-size: clamp(45px, 11.5vw, 56px) !important; }
  .migrated-about .hero-art { min-height: 300px; }
  .migrated-contact .hero h1 { font-size: clamp(46px, 12vw, 58px) !important; }
  .migrated-contact .booking { margin-top: 12px; }
  .case-page .case-hero { padding-top: 64px !important; padding-bottom: 70px !important; }
  .case-page .case-hero-layout { grid-template-columns: 1fr !important; gap: 44px !important; }
  .case-page .case-phone-visual { max-width: 300px; margin: 0 auto !important; }
  .case-page .case-deck { margin-top: 28px !important; }
  .case-page .case-actions { gap: 12px !important; }
  .case-page .case-switcher-links { gap: 1px; background: var(--ui-border); }
  .case-page .case-switcher-links a { background: #fff; }
  .footer-row { min-height: 0; align-items: flex-start; }
  .page-transition { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Mobile navigation behaves like a deliberate full-screen menu, not a scaled desktop nav. */
@media (max-width: 800px) {
  .site-header .nav.open,
  .migrated-page .site-header .nav.open {
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 112px 26px 34px !important;
    background: rgba(10,15,26,.98) !important;
  }
  .site-header .nav.open > a,
  .migrated-page .site-header .nav.open > a {
    width: 100%;
    padding: 18px 2px !important;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: clamp(24px, 7vw, 32px) !important;
    font-weight: 700 !important;
    line-height: 1.1;
  }
  .site-header .nav.open > a::after,
  .migrated-page .site-header .nav.open > a::after { display: none !important; }
  .site-header .nav.open > a:last-child,
  .migrated-page .site-header .nav.open > a:last-child {
    min-height: 56px;
    margin-top: 24px;
    justify-content: center;
    border: 0 !important;
    border-radius: var(--reference-radius) !important;
    background: linear-gradient(110deg, var(--violet), var(--blue)) !important;
    font-size: 16px !important;
  }
}

/* Content must never depend on animation/IntersectionObserver to be readable. */
.reveal {
  opacity: 1 !important;
  transform: none !important;
}