/*
 * Zomfy type system
 *
 * The site is intentionally static, so the font variables live here rather
 * than in a framework-specific layout. Every page loads this file last so it
 * can provide one consistent type hierarchy across the older route styles and
 * the premium page shells.
 */
:root {
  --font-sora: "Sora", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-manrope: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-sora);
  --font-body: var(--font-manrope);

  /* Compatibility alias used by the existing CSS layers. */
  --display-font: var(--font-body);
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
}

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

body :where(h1, h2) {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.045em;
}

body :where(h3, h4, h5, h6) {
  font-family: var(--font-body);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* The two premium shells declare their own legacy display alias. Keep the
   interface on Manrope while promoting only the high-impact type to Sora. */
.site-page,
.portfolio-page {
  --display-font: var(--font-body);
}

.site-page :where(h1, h2),
.portfolio-page :where(h1, h2) {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.site-page :where(h3, h4, h5, h6),
.portfolio-page :where(h3, h4, h5, h6) {
  font-family: var(--font-body);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* Short signature phrases and large numeric anchors are display moments too. */
.hero-subline,
.signature-quote,
.case-quote,
.hero__stats strong,
.method-step__number,
.pipeline-step__dot {
  font-family: var(--font-display);
}

@media (max-width: 767px) {
  body :where(h1, h2) {
    line-height: 1.04;
  }
}

/*
 * Shared display scale
 *
 * Marketing is the reference page for the current art direction. The legacy
 * shells used larger, page-specific values, which made Support, Services,
 * Portfolio and the case studies feel disproportionately loud. Keep the
 * same responsive character as Marketing without changing the mobile scale.
 */
:root {
  --display-hero-min: 3.5rem;
  --display-hero-fluid: 6.2vw;
  --display-hero-max: 7.5rem;
  --display-hero-leading: .88;
  --display-hero-tracking: -.055em;
}

@media (min-width: 768px) {
  body .hero h1,
  body .page-hero h1,
  body .services-hero h1,
  body.site-page .legal-hero h1,
  body.portfolio-page .legal-hero h1,
  body .service-detail-hero h1 {
    font-size: clamp(var(--display-hero-min), var(--display-hero-fluid), var(--display-hero-max));
    line-height: var(--display-hero-leading);
    letter-spacing: var(--display-hero-tracking);
  }

  body .services-intro h2 {
    font-size: clamp(2.8rem, 6.2vw, 6.2rem);
  }
}

@media (max-width: 767px) {
  /* Keep grid items shrinkable when a long French or English title has a
     larger intrinsic width than its one-column mobile track. */
  body .service-detail-hero__grid > *,
  body .legal-hero > *,
  body .service-detail__body > .service-section > * {
    min-width: 0;
    max-width: 100%;
  }

  body .service-detail-hero__grid > div,
  body .service-detail-summary,
  body .legal-hero > div,
  body .legal-summary,
  body .service-cta > .container,
  body .service-cta__inner {
    width: 100%;
  }

  body .service-detail-hero h1,
  body .legal-hero h1 {
    max-width: 100%;
  }

  body .service-cta__inner > * {
    min-width: 0;
    max-width: 100%;
  }

  body .service-cta::after {
    right: 0;
  }

  body .service-detail-summary::after {
    right: -1px;
  }

  /* These pages use intentionally cropped halos and rings. Clip only the
     page shell so that the decoration cannot enlarge the document width. */
  body .service-detail,
  body.site-page .legal-main,
  body.portfolio-page .legal-main {
    overflow-x: clip;
  }
}

/*
 * Shared header wordmark
 *
 * The header uses the official transparent Zomfy wordmark on the existing
 * dark gradient. Keeping the asset transparent avoids bringing back a hard
 * white rectangle while preserving the wordmark's proportions and colors.
 */
body .site-header .brand__logo {
  width: clamp(170px, 14vw, 210px);
  height: auto;
  max-width: min(44vw, 210px);
  aspect-ratio: 3 / 1;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 8px rgba(38, 201, 255, .12)) drop-shadow(0 0 14px rgba(164, 255, 54, .06));
}

body .site-footer .footer-brand > .brand {
  width: 88px;
  min-width: 88px;
  height: 88px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(120, 235, 232, .3);
  border-radius: 50%;
  background: #07101d;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(255, 255, 255, .06);
}

body .site-footer .footer-brand > .brand .brand__logo {
  width: 100%;
  max-width: none;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  filter: none;
}

body .site-footer .footer-brand > .brand:hover,
body .site-footer .footer-brand > .brand:focus-visible {
  border-color: rgba(200, 255, 57, .62);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .3), 0 0 0 4px rgba(200, 255, 57, .08);
  transform: translateY(-2px);
}

body .site-footer .footer-brand > .brand:focus-visible {
  outline: 2px solid #c8ff39;
  outline-offset: 4px;
}

@media (max-width: 660px) {
  body .site-header .brand__logo {
    width: min(156px, 45vw);
    height: auto;
  }

  body .site-footer .footer-brand > .brand {
    width: 74px;
    min-width: 74px;
    height: 74px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .site-footer .footer-brand > .brand {
    transition-duration: .01ms !important;
  }
}