/*
Theme Name: Hearts United - Salient Child
Theme URI: https://heartsunited.com/
Description: Salient child theme for the Hearts United website.
Author: Omnicom Media
Template: salient
Version: 1.0.0
Text Domain: hearts-united
*/


:root {
  --ruby: #ED0975; --sunset: #FC5E2C; --sunflower: #FF9700;
  --violet: #8F278E; --grape: #472D7F; --blackberry: #002A32; --coconut: #F8F6F0;
  --display: "Fraunces", Georgia, serif;
  --body: "Instrument Sans", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--blackberry); color: var(--coconut); font-family: var(--body); }
a, button { color: inherit; font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--sunflower); outline-offset: 4px; }




.magnetism-section { z-index: 1; display: grid; grid-template-rows: 1fr auto; justify-items: center; min-height: 660px; padding: 70px 24px 54px; text-align: center; background: radial-gradient(circle at 28% 28%, var(--sunflower), transparent 34%), linear-gradient(135deg, var(--sunset), var(--ruby) 64%, var(--violet)); }
.magnetism-section > p { align-self: start; margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.magnetism-section h1 { align-self: center; margin: 20px 0; font-family: var(--display); font-size: clamp(58px, 9vw, 142px); font-weight: 700; line-height: .86; letter-spacing: -.055em; }
.magnetism-section a { align-self: end; min-width: min(100%, 390px); text-decoration: none; font-size: clamp(16px, 2vw, 28px); color: white;}
.magnetism-section a span { display: block; padding-top: 18px; }



@media (max-width: 900px) {
  .site-nav { grid-template-columns: 1fr auto; }
  .site-nav nav { display: none; }
  .menu-button { display: block; }
  .mobile-nav { position: fixed; z-index: 25; inset: 0; display: grid; align-content: center; padding: 90px 24px 40px; background: var(--blackberry); }
  .mobile-nav a { font-family: var(--display); font-size: 52px; line-height: 1; text-decoration: none; }
  .kinetics-intro { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-grid article { min-height: 210px; }
  .services-grid { grid-template-columns: 1fr; }
  .services-grid article { min-height: 340px; }
  .leader-grid { grid-template-columns: repeat(2, 1fr); }
  .leader-grid article:nth-child(2) { border-right: 0; }
  .leader-portrait { height: 410px; }
  .site-footer { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .brand-stage { min-height: 470px; }
  .magnetism-section { min-height: 560px; }
  .kinetics-section, .clients-section, .services-section { padding-inline: 22px; }
  .client-grid { grid-template-columns: repeat(2, 1fr); }
  .row-title { align-items: start; }
  .row-title > span { display: none; }
  .section-title h2 { font-size: 58px; }
  .leader-grid { grid-template-columns: 1fr; }
  .leader-grid article { border-right: 0; }
  .leader-portrait { height: 470px; }
  .work-track { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; padding-inline: 22px; }
  .closing-cta { padding: 100px 16px 110px; }
  .closing-cta > a { gap: 25px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }