/* ========================================================================== TPC — Reset, typography, layout primitives, motion system ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; background: var(--white); color: var(--t-strong); font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } figure { margin: 0; } p { margin: 0; } /* ---- Headings --------------------------------------------------------- */ h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin: 0; color: var(--navy); text-wrap: balance; } h1 { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -.03em; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: 600; } /* ---- Shared text roles ------------------------------------------------ */ .eyebrow { display: flex; align-items: center; gap: .875rem; font-family: var(--f-label); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); line-height: 1.4; text-transform: uppercase; color: var(--red); margin: 0 0 1.25rem; } /* The short crimson rule leads every eyebrow. On dark grounds the words turn light, because Crimson text measures 1.82:1 on Navy. */ .eyebrow::before { content: ''; flex: none; width: 28px; height: 2px; background: var(--red); } .eyebrow--dark { color: var(--t-on-dark-dim); } .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--t-body); } /* ---- Layout primitives ------------------------------------------------ */ .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .band { padding-block: var(--band-y); position: relative; } .band--inset { margin-inline: var(--inset); } .band--navy { background: var(--navy); color: var(--t-on-dark); } .band--ink { background: var(--ink); color: var(--t-on-dark); } .band--fog { background: var(--fog); } .band--navy :is(h2, h3):not(.eyebrow), .band--ink :is(h2, h3):not(.eyebrow) { color: var(--white); } .band--navy .lead, .band--ink .lead { color: var(--t-on-dark); } .section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .section-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 1.5rem clamp(2rem, 6vw, 6rem); } @media (max-width: 860px) { .section-head--split { grid-template-columns: 1fr; } } /* ---- Duotone photography ----------------------------------------------- The guidelines grade all photography Navy–Graphite (contrast +10, saturation −20). Applied in CSS so the source files stay untouched: drop the .duo class to show full colour (open question 7 in CLAUDE.md). */ .duo { position: relative; overflow: hidden; background: var(--ink); isolation: isolate; } .duo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.94); } .duo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, #3E6A9E 0%, #1D4677 50%, #1A2230 100%); mix-blend-mode: color; opacity: .85; } /* ---- Scroll reveal ----------------------------------------------------- Content is only hidden under .js (see the script), so no-JS visitors, a failed script and print all get the whole page. */ .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* No scrolling under the intro curtain. Lifted by .is-loaded, or by the failsafe removing .js. */ html.js:not(.is-loaded):not(.intro-seen) { overflow: hidden; } /* ---- Accessibility ----------------------------------------------------- */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } .hero, .band--navy, .band--ink, .drawer, .loader { --focus-ring: var(--white); } .skip-link { position: fixed; inset-inline-start: 1rem; top: 1rem; z-index: 300; padding: .75rem 1.25rem; background: var(--navy); color: var(--white); translate: 0 -200%; transition: translate var(--dur) var(--ease); } .skip-link:focus { translate: 0 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } .js [data-reveal] { opacity: 1; transform: none; } } @media print { .js [data-reveal] { opacity: 1; transform: none; } }