@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap');

body { background: var(--paper); color: var(--black); font-family: 'DM Sans', Arial, sans-serif; font-size: 1rem; line-height: 1.5; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: 'Space Grotesk', Arial, sans-serif; font-weight: 400; letter-spacing: -0.055em; line-height: 0.95; }
h2 { font-size: clamp(3rem, 6.7vw, 7.25rem); }
h2 em { color: var(--gray); font-style: normal; }
h3 { font-size: clamp(1.35rem, 1.8vw, 2rem); line-height: 1.05; }
p { color: var(--gray); }
.skip-link { background: var(--red); color: var(--white); left: 1rem; padding: .7rem 1rem; position: fixed; top: -4rem; z-index: 100; }
.skip-link:focus { top: 1rem; }
.eyebrow { color: var(--red); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow-light { color: #f2b2ae; }
.section { padding: var(--section-y) var(--gutter); }
.section-paper { background: var(--paper); }
.section-dark, .section-charcoal { color: var(--white); }
.section-dark { background: var(--black); }
.section-charcoal { background: var(--charcoal); }
.section-head { margin: 0 auto clamp(3.5rem, 8vw, 8rem); max-width: var(--container); }
.section-head h2 { margin-top: 1.6rem; }
.section-head-split { align-items: end; display: flex; justify-content: space-between; gap: 4rem; }
.section-intro { max-width: 20rem; padding-bottom: .5rem; }
.button { align-items: center; border: 1px solid currentColor; display: inline-flex; font-size: .82rem; gap: 1.4rem; letter-spacing: .06em; padding: .9rem 1.2rem; text-transform: uppercase; transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease); }
.button:hover, .button:focus-visible { background: var(--red); border-color: var(--red); color: var(--white); transform: translateY(-3px); }
.button-light { background: var(--white); border-color: var(--white); color: var(--black); }
.hero-secondary { border-color: rgba(255,255,255,.78); color: var(--white); justify-content: space-between; min-width: 14rem; }
.hero-secondary:hover, .hero-secondary:focus-visible { background: rgba(255,255,255,.14); border-color: var(--white); color: var(--white); }
.text-link { align-items: center; display: inline-flex; font-size: .8rem; gap: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.text-link::after { background: currentColor; content: ''; height: 1px; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); width: 100%; }
.text-link:hover::after, .text-link:focus-visible::after { transform: scaleX(1); }
.text-link-light { color: var(--white); }
.reveal { opacity: 1; transform: translateY(0); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-image { overflow: hidden; }
.reveal-image img { transform: scale(1); transition: transform 1.2s var(--ease); }
.reveal-image.is-visible img { transform: scale(1); }
.four-col { display: grid; grid-template-columns: repeat(4, 1fr); }