:root { --navy: #223260; --navy-dark: #172740; --navy-deep: #101c2e; --amber: #ffba00; --amber-dark: #f6a409; --ink: #161922; --body: #5b6274; --muted: #929292; --line: #e6e9f0; --bg-soft: #f5f7fb; --white: #ffffff; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 4px 16px rgba(34, 50, 96, .06); --shadow: 0 14px 40px rgba(34, 50, 96, .10); --shadow-lg: 0 26px 70px rgba(34, 50, 96, .18); --ease: cubic-bezier(.22, 1, .36, 1); --container: 1260px; --header-h: 112px; /* Montserrat for headings, Poppins for body copy */ --ff: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; --ff-heading: "Montserrat", "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); } body { margin: 0; font-family: var(--ff); font-size: 16px; line-height: 1.75; color: var(--body); background: var(--white); -webkit-font-smoothing: antialiased; /* `clip` — not `hidden`. overflow-x:hidden forces overflow-y to compute to auto, which turns into a scroll container and stops the sticky header from pinning to the viewport. `clip` trims the same overflow without creating a scroll container. */ overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; border: 0; background: none; } h1, h2, h3, h4, h5 { font-family: var(--ff-heading); color: var(--navy); margin: 0 0 .6em; line-height: 1.22; font-weight: 700; letter-spacing: -.01em; } /* The clamp minimums only bind on narrow screens, so lowering them shrinks headings on phones without touching the desktop scale. */ h1 { font-size: clamp(1.72rem, 1.05rem + 3.1vw, 3.55rem); font-weight: 800; } h2, .as-h2 { font-size: clamp(1.38rem, .95rem + 1.85vw, 2.5rem); } h3, h4, .as-h3 { font-size: clamp(1.02rem, .92rem + .55vw, 1.45rem); } /* The page carries a single H1 and a single H2 for SEO; every other heading is demoted to H3/H4 and re-sized with these classes so the visual scale is kept. */ .as-h2 { font-weight: 700; } p { margin: 0 0 1.1rem; } ::selection { background: var(--amber); color: var(--navy-dark); } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; } .section { padding: clamp(60px, 7vw, 110px) 0; position: relative; /* Reveal animations park elements 52px to the side until they scroll into view, which extends the scrollable area past the viewport. Clip that on the X axis only — `clip`, not `hidden`, so no scroll container is made and overflow-y stays visible. */ overflow-x: clip; } .stats { overflow-x: clip; } .section--soft { background: var(--bg-soft); } .section--navy { background: var(--navy-dark); color: rgba(255, 255, 255, .78); } .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; } .sec-head { max-width: 780px; margin: 0 auto clamp(36px, 4vw, 62px); text-align: center; } .sec-head p { font-size: 1.03rem; margin-bottom: 0; } .sec-head--left { margin-inline: 0; text-align: left; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-dark); margin-bottom: 14px; } /* Flooring-tile marker in place of the old dash. Masked so it picks up the eyebrow's own colour — amber-dark on light sections, amber on navy ones. */ .eyebrow::before { content: ""; flex: none; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='3' width='8' height='8' rx='2'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='3' width='8' height='8' rx='2'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2'/%3E%3C/svg%3E") center / contain no-repeat; } .section--navy .eyebrow { color: var(--amber); } .grid { display: grid; gap: 26px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* A `1fr` track is minmax(auto, 1fr), so its floor is the item's min-content. A