/* ------------------------------------------------------------ */ /* 2. RESET & BASE */ /* ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-navy); background-color: var(--color-white); line-height: 1.6; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ------------------------------------------------------------ */ /* 3. UTILITIES */ /* ------------------------------------------------------------ */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { padding-block: var(--space-xl); } .section--light { background-color: var(--color-light); } .section--navy { background-color: var(--color-navy); color: var(--color-white); } .section--navy-dark { background-color: var(--color-navy-dark); color: var(--color-white); } .section-label { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-red); display: block; margin-bottom: var(--space-xs); } .section-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; line-height: 1.1; color: var(--color-navy); } .section-title--white { color: var(--color-white); } .section-title--center { text-align: center; } .section-divider { width: 48px; height: 4px; background-color: var(--color-red); margin-top: var(--space-sm); } .section-divider--center { margin-inline: auto; } /* Visually hidden (accessibility) */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* ------------------------------------------------------------ */ /* 4. BUTTONS */ /* ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85em 1.75em; border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background-color var(--ease-default), transform var(--ease-default), box-shadow var(--ease-default); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); } .btn--primary { background-color: var(--color-red); color: var(--color-white); } .btn--primary:hover { background-color: var(--color-red-dark); } .btn--outline { background-color: transparent; color: var(--color-white); border: 2px solid var(--color-white); } .btn--outline:hover { background-color: var(--color-white); color: var(--color-navy); } .btn--ghost { background-color: transparent; color: var(--color-navy); padding-inline: 0; gap: 0.4rem; font-size: var(--text-sm); } .btn--ghost .arrow { transition: transform var(--ease-default); } .btn--ghost:hover .arrow { transform: translateX(4px); } .btn--ghost:hover { transform: none; box-shadow: none; } /* ------------------------------------------------------------ */ /* SCROLL REVEAL */ /* ------------------------------------------------------------ */ /* * The original pages each carried these rules in an inline