/* EHM Site — global + responsive layer (loaded after colors_and_type.css) */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
#root { overflow-x: hidden; }
a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

/* Client logo marquee — seamless infinite horizontal scroll */
.ehm-marquee-track { animation: ehm-marquee-scroll 70s linear infinite; }
.ehm-marquee:hover .ehm-marquee-track { animation-play-state: paused; }
@keyframes ehm-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ehm-marquee-fade { position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.ehm-marquee-fade-l { left: 0; }
.ehm-marquee-fade-r { right: 0; }
@media (prefers-reduced-motion: reduce) {
  .ehm-marquee-track { animation: none; flex-wrap: nowrap; transform: none; }
}
@media (max-width: 600px) { .ehm-marquee-fade { width: 56px; } }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235d6f78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px !important; cursor: pointer;
}

/* Display face: the design-system Palermo .ttf fails browser font sanitization (OTS),
   so we substitute Cinzel — a classical inscriptional all-caps serif that matches the
   engraved-caps EHM logo wordmark. Marcellus is offered as a Tweaks alternative. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Marcellus&display=swap');
:root { --font-display: 'Cinzel', 'Cormorant Garamond', Georgia, serif; }

@media (max-width: 1120px) {
  .ehm-desktop-nav { display: none !important; }
  .ehm-mobile-toggle { display: inline-flex !important; }
  .ehm-mobile-menu { display: block !important; }
  .ehm-hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .ehm-hero-badge { left: auto !important; right: 18px !important; bottom: -22px !important; }
  .ehm-services-grid { grid-template-columns: 1fr 1fr !important; }
  .ehm-approach-grid, .ehm-contact-grid, .ehm-faq-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
  .ehm-faq-grid > div:first-child { position: static !important; }
  .ehm-trust-grid { grid-template-columns: 1fr 1fr !important; }
  .ehm-trust-grid > div:nth-child(3) { border-left: none !important; }
  .ehm-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .ehm-logo-strip { grid-template-columns: repeat(3, 1fr) !important; }
  .ehm-team-grid { grid-template-columns: 1fr 1fr !important; }
  .ehm-more-grid { grid-template-columns: 1fr 1fr !important; }
  .ehm-bcorp-stats { grid-template-columns: 1fr 1fr !important; gap: 4px 0 !important; }
  .ehm-bcorp-stats > div { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; padding-bottom: 22px !important; }
  .ehm-impact-stats { grid-template-columns: 1fr 1fr !important; }
  .ehm-pillar-grid { grid-template-columns: 1fr !important; }
  .ehm-metrics-grid { grid-template-columns: 1fr 1fr !important; }
  .ehm-metrics-grid > div { border-left: none !important; border-top: 1px solid var(--line) !important; }
  .ehm-metrics-grid > div:first-child { border-top: none !important; }
}
@media (max-width: 600px) {
  .ehm-services-grid { grid-template-columns: 1fr !important; }
  .ehm-trust-grid { grid-template-columns: 1fr 1fr !important; }
  .ehm-form-2col { grid-template-columns: 1fr !important; }
  .ehm-logo-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .ehm-team-grid { grid-template-columns: 1fr !important; }
  .ehm-more-grid { grid-template-columns: 1fr !important; }
  .ehm-bcorp-stats { grid-template-columns: 1fr !important; }
  .ehm-impact-stats { grid-template-columns: 1fr !important; }
  .ehm-pair-grid { grid-template-columns: 1fr !important; }
  .ehm-pillar-grid { grid-template-columns: 1fr !important; }
  .ehm-metrics-grid { grid-template-columns: 1fr !important; }
  .ehm-step-label { display: none !important; }
  .ehm-deliver-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ehm-modal-grid { grid-template-columns: 1fr !important; }
  .ehm-page-pad { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Hero headline: on small screens, hard-cap the size and tighten tracking with
   !important so long uppercase words (e.g. "PROFESSIONALLY") always fit whole
   instead of clipping off-screen. Overrides the inline clamp() font-size. */
@media (max-width: 600px) {
  .ehm-hero-h1 {
    font-size: clamp(24px, 7vw, 34px) !important;
    letter-spacing: .01em !important;
    overflow-wrap: break-word;
    hyphens: none;
  }
}
@media (max-width: 380px) {
  .ehm-hero-h1 {
    font-size: 25px !important;
    letter-spacing: 0 !important;
  }
}