/* Shared shell: identity, header, navigation motion and page consistency */

:root {
  --ml-bg: #f8f8f5;
  --ml-ink: #16191c;
  --ml-text: #232527;
  --ml-muted: #62676b;
  --ml-soft: #8d9398;
  --ml-red: #bd2e2a;
  --ml-blue-soft: rgba(196,214,226,.34);
  --ml-beige-soft: rgba(235,218,190,.32);
  --ml-line: rgba(22,24,26,.08);
  --ml-line-strong: rgba(22,24,26,.14);
  --ml-glass: rgba(255,255,255,.58);
  --ml-glass-strong: rgba(255,255,255,.74);
  --ml-glass-soft: rgba(255,255,255,.42);
  --ml-radius-lg: 28px;
  --ml-radius-md: 22px;
  --ml-radius-sm: 16px;
  --ml-shadow-soft: 0 18px 45px rgba(38,44,52,.055);
  --ml-shadow-card: 0 24px 58px rgba(38,44,52,.075);
  --ml-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ml-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

html {
  background: var(--ml-bg);
}

body,
button,
input,
textarea,
select {
  font-family: var(--ml-font);
}

::selection {
  background: rgba(189,46,42,.14);
  color: var(--ml-ink);
}

.site-header {
  position: relative;
  z-index: 30;
}

.site-header .brand,
.site-header .nav {
  font-family: var(--ml-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-header .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0 9px;
  margin: -9px 0;
  border-radius: 999px;
  color: var(--ml-ink);
  font-weight: 760;
  transition:
    transform .2s ease,
    background-color .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;
  transform-origin: center;
  will-change: transform;
}

.site-header .brand-mark:hover {
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 26px rgba(35,42,50,.06);
  transform: translateY(-1px) scale(1.045);
}

.site-header .brand-mark:active {
  transform: translateY(0) scale(.98);
}

.site-header .nav {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #44443f;
}

.site-header .nav a,
.site-header .client-area-button,
.site-header .talk-button,
.site-header .mobile-instagram-button {
  transition:
    transform .18s ease,
    opacity .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
  transform-origin: center;
}

.site-header .nav a:hover,
.site-header .client-area-button:hover,
.site-header .talk-button:hover,
.site-header .mobile-instagram-button:hover {
  transform: translateY(-1px) scale(1.025);
}

.site-header .nav a[aria-current="page"] {
  opacity: .62;
}

.site-header .client-area-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(22,24,26,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.46);
  color: #23272b;
  font-family: var(--ml-mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 720;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.site-header .client-area-button:hover {
  background: #16191c;
  color: #fff;
  border-color: #16191c;
}

.site-header .talk-button,
.site-header .mobile-instagram-button,
.home-action,
.about-action,
.blog-read-link,
.post-back-link,
.portfolio-primary-action,
.portfolio-secondary-note {
  border-radius: 999px;
}

.page-intro h1,
.blog-hero h1,
.post-article h1,
.about-impact-copy h1,
.about-section-head h2,
.portfolio-intro h1,
.home-proof-copy h2 {
  text-wrap: balance;
}

.page-kicker,
.section-eyebrow,
.home-role-line,
.blog-featured-kicker,
.blog-label,
.post-meta-line,
.post-eyebrow,
.portfolio-eyebrow,
.portfolio-modal-kicker {
  color: #7c8287;
  font-family: var(--ml-mono);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.page-lead,
.about-impact-lead,
.blog-featured-card p,
.post-intro,
.portfolio-intro .page-lead {
  color: #4f5559;
}

.glass-card,
.blog-featured-card,
.blog-library,
.blog-categories-panel,
.post-article,
.post-nav-card,
.about-impact-copy,
.about-impact-visual,
.about-manifesto,
.about-offer-card,
.about-principle-card,
.about-project-card,
.about-human-card,
.about-close-card,
.portfolio-card,
.portfolio-modal-shell {
  border-color: rgba(255,255,255,.80);
  box-shadow: var(--ml-shadow-soft), inset 0 1px 0 rgba(255,255,255,.76);
}

.home-role-line {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 11px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  font-size: 8px;
  line-height: 1;
  letter-spacing: .072em;
  opacity: .72;
}

.home-hero-actions {
  display: none !important;
}

.home-action {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid var(--ml-line);
  background: rgba(255,255,255,.58);
  color: var(--ml-ink);
  font-size: 12px;
  line-height: 1;
  font-weight: 720;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.home-action.primary {
  border-color: var(--ml-ink);
  background: var(--ml-ink);
  color: #fff;
}

.home-action:hover {
  transform: translateY(-1px) scale(1.012);
  background: rgba(255,255,255,.84);
}

.home-action.primary:hover {
  background: #0e1012;
}

.home-services-panel {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
}

.home-services-panel::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -100px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--ml-blue-soft), transparent 70%);
  pointer-events: none;
}

.home-service-grid .mac-work-item strong {
  text-wrap: balance;
}

.home-page .mac-footer {
  margin-top: 14px;
}

.mac-work-item,
.blog-card,
.about-offer-card,
.about-principle-card,
.about-project-card,
.portfolio-card {
  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

@media (hover:hover) and (pointer:fine) {
  .mac-work-item:hover,
  .blog-card:hover,
  .about-offer-card:hover,
  .about-principle-card:hover,
  .about-project-card:hover,
  .portfolio-card:hover {
    transform: translateY(-2px);
  }

  .blog-read-link:hover,
  .post-back-link:hover,
  .about-action:hover,
  .home-action:hover {
    transform: translateY(-1px) scale(1.012);
  }
}

.portfolio-filterbar label,
.blog-chip,
.about-impact-mini span,
.home-proof-grid span {
  border-color: var(--ml-line);
  background: rgba(255,255,255,.50);
  color: #42474b;
}

.portfolio-filterbar label,
.blog-chip {
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}

@media (hover:hover) and (pointer:fine) {
  .portfolio-filterbar label:hover,
  .blog-chip:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.76);
  }
}

.internal-footer,
.mac-footer {
  color: #555b60;
}

.internal-footer a,
.mac-footer a,
.socials a {
  transition: transform .16s ease, opacity .16s ease;
}

@media (hover:hover) and (pointer:fine) {
  .internal-footer a:hover,
  .mac-footer a:hover,
  .socials a:hover {
    opacity: .62;
    transform: translateY(-1px);
  }
}

.portfolio-grid,
.blog-list-modern,
.about-offer-grid,
.about-principles-grid,
.about-project-grid,
.home-service-grid {
  content-visibility: auto;
  contain-intrinsic-size: 700px;
}

@media (max-width: 900px) {
  .site-header {
    gap: 14px;
  }

  .site-header .nav {
    gap: 12px;
  }

  .site-header .client-area-button {
    padding: 0 11px;
  }
}

@media (max-width: 760px) {
  .site-header .client-area-button {
    display: none;
  }

  .home-role-line {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    text-align: center;
    white-space: normal;
    font-size: 8px;
  }

  .home-action {
    min-height: 39px;
    font-size: 11px;
  }
}

@media (max-width: 560px) {
  .site-header .brand-mark {
    min-width: 32px;
    min-height: 32px;
  }

  .page-kicker,
  .section-eyebrow,
  .home-role-line,
  .blog-featured-kicker,
  .blog-label,
  .post-meta-line,
  .post-eyebrow {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .brand-mark,
  .site-header .nav a,
  .site-header .client-area-button,
  .site-header .talk-button,
  .site-header .mobile-instagram-button,
  .home-action,
  .mac-work-item,
  .blog-card,
  .blog-read-link,
  .post-back-link,
  .about-action,
  .about-offer-card,
  .about-principle-card,
  .about-project-card,
  .portfolio-card,
  .portfolio-filterbar label,
  .blog-chip,
  .socials a,
  .internal-footer a,
  .mac-footer a {
    transition: none !important;
  }

  .site-header .brand-mark:hover,
  .site-header .nav a:hover,
  .site-header .client-area-button:hover,
  .site-header .talk-button:hover,
  .site-header .mobile-instagram-button:hover,
  .home-action:hover,
  .mac-work-item:hover,
  .blog-card:hover,
  .blog-read-link:hover,
  .post-back-link:hover,
  .about-action:hover,
  .about-offer-card:hover,
  .about-principle-card:hover,
  .about-project-card:hover,
  .portfolio-card:hover,
  .portfolio-filterbar label:hover,
  .blog-chip:hover,
  .socials a:hover,
  .internal-footer a:hover,
  .mac-footer a:hover {
    transform: none !important;
  }
}