/* ========================================================================== Base — reset, document defaults, typography primitives, layout helpers ========================================================================== */ /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Anchor targets must clear the fixed header. */ scroll-padding-top: calc(var(--header-h) + var(--sp-4)); } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[class], ol[class] { padding: 0; list-style: none; } body { min-height: 100vh; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--c-ink-muted); background-color: var(--c-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* The hero and CTA waves are wider than the viewport by design. */ overflow-x: hidden; } img, picture, svg { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } /* --- Focus ---------------------------------------------------------------- */ :focus-visible { outline: 3px solid var(--c-blue-bright); outline-offset: 3px; border-radius: var(--r-sm); } /* Dark surfaces need a light ring to stay visible. */ .site-header :focus-visible, .hero :focus-visible, .why :focus-visible, .cta :focus-visible, .site-footer :focus-visible { outline-color: var(--c-sky); } /* --- Typography ----------------------------------------------------------- */ h1, h2, h3, h4 { color: var(--c-ink); font-weight: var(--fw-semibold); line-height: var(--lh-heading); text-wrap: balance; } h1 { font-size: var(--fs-display); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.02em; } h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; } h3 { font-size: var(--fs-h3); } p { text-wrap: pretty; } .eyebrow { display: block; margin-bottom: var(--sp-3); /* The design's #2C8BBF is 3.78:1 on white; at 14px that misses AA, so the eyebrow alone steps down to the 4.55:1 shade. */ color: var(--c-blue-ink); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; } .lead { font-size: var(--fs-lead); line-height: var(--lh-body); } /* --- Layout --------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { position: relative; padding-block: var(--section-y); } /* --- Utilities ------------------------------------------------------------ */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: var(--z-drawer); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); background-color: var(--c-white); color: var(--c-navy); font-weight: var(--fw-semibold); transform: translateY(-160%); transition: transform var(--dur) var(--ease); } .skip-link:focus-visible { transform: translateY(0); } /* Icon sprite host — present in the DOM but never painted. */ .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* `.icon` and `.icon-svg` are owned by icons.css. */ /* --- Scroll reveal -------------------------------------------------------- */ /* Elements start hidden only when JS is available to reveal them; the .js hook on keeps content visible for no-script and crawlers. */ .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transition-delay: var(--reveal-delay, 0ms); } .js [data-reveal].is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } }