/* ============================================================= REM PERFORMANCE — design system Palette sampled directly from the REM logo artwork. ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Saira:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ------------------------------------------------------------- 1. TOKENS ------------------------------------------------------------- */ :root { /* Brand ramp — navy -> blue -> azure -> teal -> green, as it runs around the logo's broken ring from upper-left to lower-right. */ --navy-950: #00091c; --navy-900: #001235; --navy-800: #012047; --navy-700: #012c6b; --blue-600: #023e88; --blue-500: #035ead; --azure-400: #0074da; --azure-300: #3b9bee; --teal-600: #03646c; --teal-500: #10765b; --green-600: #1a744e; --green-500: #51a457; --green-400: #7ec143; /* Neutrals */ --paper: #ffffff; --bone: #f4f7fa; --mist: #e6ecf3; --line: #d6dfe9; --ink: #001235; --ink-mid: #45566f; /* 4.8:1 on white — the old #78859a only reached 3.7:1 at label sizes */ --ink-soft: #66738a; /* On-dark neutrals */ --on-dark: #ffffff; --on-dark-mid: #b6c4d8; --on-dark-soft: #7e8ea7; --line-dark: rgba(255, 255, 255, 0.14); /* Per-pillar accents */ --recover: var(--blue-600); --recover-lift: #3b7fd4; --energize: var(--azure-400); --energize-lift: #5fb0f5; --move: var(--green-400); --move-lift: #9ad469; /* The signature sweep */ --sweep: linear-gradient(135deg, #001235 0%, #012c6b 20%, #023e88 34%, #035ead 48%, #0074da 60%, #03646c 72%, #1a744e 84%, #7ec143 100%); --sweep-flat: linear-gradient(90deg, #001235 0%, #023e88 26%, #0074da 52%, #10765b 78%, #7ec143 100%); /* Type */ --font-display: 'Saira', 'Arial Narrow', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem); --step-0: clamp(0.98rem, 0.95rem + 0.15vw, 1.06rem); --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem); --step-2: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem); --step-3: clamp(1.75rem, 1.45rem + 1.45vw, 2.6rem); --step-4: clamp(2.15rem, 1.6rem + 2.6vw, 3.7rem); --step-5: clamp(2.7rem, 1.6rem + 5vw, 5.6rem); /* Layout */ --wrap: 1280px; --wrap-narrow: 880px; --gutter: clamp(1rem, 4vw, 2.5rem); --band: clamp(4.5rem, 9vw, 9rem); --radius: 4px; --radius-lg: 10px; /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.6s; } /* ------------------------------------------------------------- 2. RESET / BASE ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Any class that sets `display` outranks the UA's `[hidden] { display: none }`, so state the intent once and mean it. Without this, elements hidden from script (the video controls when no video is configured) still render. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; /* Do NOT set overflow-x here. On the root element any non-visible overflow-x forces overflow-y to compute to clip/auto as well, which turns into a scroll container and stops the page scrolling at all. Sideways overflow is contained on instead, which propagates to the viewport. */ } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video, svg { display: block; max-width: 100%; } img, video { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--azure-400); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; left: 50%; top: -100px; transform: translateX(-50%); z-index: 200; background: var(--navy-900); color: #fff; padding: 0.85rem 1.5rem; font-weight: 600; transition: top 0.2s var(--ease); } .skip-link:focus { top: 0.75rem; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------- 3. TYPOGRAPHY ------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 0.6em; text-wrap: balance; } h1 { font-size: var(--step-5); font-weight: 800; letter-spacing: -0.03em; } h2 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.025em; } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } p { margin: 0 0 1.1em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } .lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-mid); max-width: 62ch; } .on-dark .lede { color: var(--on-dark-mid); } /* Small tracked label — echoes the logo's "RECOVER | ENERGIZE | MOVE" */ .eyebrow { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-500); display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1.4rem; } .eyebrow::before { content: ''; width: 2.2rem; height: 3px; flex: none; background: var(--sweep-flat); border-radius: 2px; } .on-dark .eyebrow { color: var(--azure-300); } .data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } /* ------------------------------------------------------------- 4. LAYOUT ------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: var(--wrap-narrow); } .band { padding-block: var(--band); position: relative; } .band-tight { padding-block: clamp(3rem, 6vw, 5.5rem); } .bg-bone { background: var(--bone); } .bg-mist { background: var(--mist); } .on-dark { background: var(--navy-900); color: var(--on-dark); } .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; } .on-deep { background: var(--navy-950); color: var(--on-dark); } /* The gradient hairline that opens most dark bands — the ring, unrolled */ .on-dark::before, .on-deep::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--sweep-flat); } .grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } .section-head { max-width: 66ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } /* ------------------------------------------------------------- 5. BRAND DEVICES — the ring and the three bars of the "E" ------------------------------------------------------------- */ /* Rotating / drawing ring, used as gauge, badge and watermark */ .ring { display: block; overflow: visible; } .ring .ring-track { fill: none; stroke: currentColor; opacity: 0.14; stroke-width: 7; } .ring .ring-arc { fill: none; stroke-width: 7; stroke-linecap: round; } .ring-spin { animation: ring-spin 26s linear infinite; transform-origin: 50% 50%; } @keyframes ring-spin { to { transform: rotate(360deg); } } /* Draw-on when revealed. The dash values are set per-arc from JS, because each arc has its own path length; here we only describe the easing. Without JS the arcs simply render fully drawn, which is the correct fallback. */ .ring-draw .ring-arc { transition: stroke-dashoffset 1.6s var(--ease-out); } /* Watermark ring behind sections */ .ring-mark { position: absolute; pointer-events: none; opacity: 0.05; z-index: 0; } /* The three bars of the E — a reusable rhythm device */ .bars { display: grid; gap: 5px; width: 44px; flex: none; } .bars span { display: block; height: 5px; border-radius: 1px; background: var(--blue-500); transform-origin: left center; transform: scaleX(var(--s, 1)); transition: transform 0.55s var(--ease-out); } .bars span:nth-child(1) { --s: 1; } .bars span:nth-child(2) { --s: 0.72; background: var(--azure-400); } .bars span:nth-child(3) { --s: 0.86; background: var(--green-400); } .bars-lg { width: 72px; gap: 7px; } .bars-lg span { height: 7px; } /* Card hover animates the bars like a live readout */ .card:hover .bars span:nth-child(1) { --s: 0.82; } .card:hover .bars span:nth-child(2) { --s: 1; } .card:hover .bars span:nth-child(3) { --s: 0.68; } /* Gradient rule */ .rule { height: 3px; border: 0; margin: 0; background: var(--sweep-flat); border-radius: 2px; } /* ------------------------------------------------------------- 6. BUTTONS ------------------------------------------------------------- */ .btn { --btn-bg: var(--navy-900); --btn-fg: #fff; display: inline-flex; align-items: center; gap: 0.7rem; padding: 1.05rem 1.9rem; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; border: 0; border-radius: var(--radius); cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sweep); opacity: 0; transition: opacity 0.4s var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 18, 53, 0.28); } .btn:hover::before { opacity: 1; } .btn:active { transform: translateY(0); } .btn .arrow { transition: transform 0.35s var(--ease); } .btn:hover .arrow { transform: translateX(5px); } .btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); box-shadow: inset 0 0 0 2px var(--line); } .btn-ghost:hover { --btn-fg: #fff; box-shadow: inset 0 0 0 2px transparent; } .on-dark .btn-ghost, .hero .btn-ghost { --btn-fg: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4); } .btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; } /* Text link with animated underline */ .link-u { position: relative; font-weight: 600; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 30px; padding-block: 0.3rem 0.35rem; } .link-u::after { content: ''; position: absolute; left: 0; bottom: 0.3rem; width: 100%; height: 2px; background: var(--sweep-flat); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); } .link-u:hover::after { transform: scaleX(1); } /* Same underline treatment when the trigger has to be a button (it opens a dialog rather than navigating) */ button.link-u { background: none; border: 0; padding-inline: 0; font: inherit; color: inherit; cursor: pointer; } /* ------------------------------------------------------------- 7. NAVIGATION ------------------------------------------------------------- */ .nav { position: fixed; inset-inline: 0; top: 0; z-index: 100; transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease); } .nav::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--sweep-flat); transform: scaleX(var(--progress, 0)); transform-origin: left; } .nav.is-stuck { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(0, 18, 53, 0.07); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 78px; } .nav-logo { display: flex; align-items: center; } .nav-logo img { width: auto; height: 46px; transition: height 0.35s var(--ease); } .nav.is-stuck .nav-logo img { height: 40px; } /* Reverse mark over the dark hero, full-colour once the bar goes white */ .nav-logo .logo-rev { display: block; } .nav-logo .logo-col { display: none; } .nav.is-stuck .logo-rev { display: none; } .nav.is-stuck .logo-col { display: block; } .nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); } .nav-links a { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.13em; text-transform: uppercase; color: #fff; position: relative; padding: 0.4rem 0; transition: color 0.3s var(--ease); } .nav.is-stuck .nav-links a { color: var(--ink); } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--sweep-flat); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out); } .nav-links a:hover::after, .nav-links a[aria-current='page']::after { transform: scaleX(1); } .nav-cta { padding: 0.85rem 1.4rem; } .nav .nav-cta { --btn-bg: var(--azure-400); } .nav.is-stuck .nav-cta { --btn-bg: var(--navy-900); } .nav-toggle { display: none; width: 46px; height: 46px; background: transparent; border: 0; cursor: pointer; padding: 11px 8px; border-radius: var(--radius); } .nav-toggle span { display: block; height: 3px; background: #fff; border-radius: 2px; margin-bottom: 5px; transition: transform 0.4s var(--ease), opacity 0.25s var(--ease), background 0.3s; } .nav-toggle span:last-child { margin-bottom: 0; width: 70%; } .nav.is-stuck .nav-toggle span { background: var(--ink); } .nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded='true'] span:nth-child(3) { width: 100%; transform: translateY(-8px) rotate(-45deg); } /* ------------------------------------------------------------- 8. HERO ------------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; background: var(--navy-950); overflow: hidden; isolation: isolate; } .hero-media { position: absolute; inset: 0; z-index: -2; } .hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; } /* Legibility scrim: vertical darkening plus a navy brand wash */ .hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 9, 28, 0.78) 0%, rgba(0, 9, 28, 0.32) 32%, rgba(0, 9, 28, 0.55) 62%, rgba(0, 9, 28, 0.94) 100%), linear-gradient(115deg, rgba(0, 18, 53, 0.72) 0%, rgba(1, 44, 107, 0.28) 45%, rgba(26, 116, 78, 0.22) 100%); } .hero-inner { position: relative; width: 100%; padding-block: clamp(7rem, 15vh, 10rem) clamp(3rem, 7vh, 5rem); } .hero h1 { margin-bottom: 0.35em; } /* The three pillar words, colour-coded exactly as the logo tagline is */ .hero-words { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35em; font-family: var(--font-display); font-weight: 800; font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.03em; text-transform: uppercase; margin: 0 0 0.45em; } .hero-words .w { display: inline-block; } .hero-words .sep { color: var(--azure-300); font-weight: 400; opacity: 0.55; } .hero-words .w-1 { color: #fff; } .hero-words .w-2 { color: #fff; } .hero-words .w-3 { background: linear-gradient(92deg, #7ec143 0%, #51a457 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-lede { max-width: 54ch; color: rgba(255, 255, 255, 0.86); font-size: var(--step-1); } /* Video controls + scroll cue */ .hero-utils { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid rgba(255, 255, 255, 0.16); } .vid-btn { display: inline-flex; align-items: center; gap: 0.65rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; padding: 0.6rem 1.1rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); transition: background 0.3s var(--ease), border-color 0.3s var(--ease); } .vid-btn:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); } /* Ticker of capabilities — a live instrument readout */ .ticker { position: relative; overflow: hidden; background: var(--navy-950); border-block: 1px solid var(--line-dark); padding-block: 0.9rem; } .ticker-track { display: flex; gap: 2.5rem; width: max-content; animation: ticker 38s linear infinite; } .ticker-track span { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-dark-soft); display: flex; align-items: center; gap: 2.5rem; white-space: nowrap; } .ticker-track span::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green-400); flex: none; } @keyframes ticker { to { transform: translateX(-50%); } } .ticker:hover .ticker-track { animation-play-state: paused; } /* ------------------------------------------------------------- 9. CARDS ------------------------------------------------------------- */ .card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); overflow: hidden; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease); } .card::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--accent, var(--sweep-flat)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); } .card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(0, 18, 53, 0.12); border-color: transparent; } .card:hover::before { transform: scaleX(1); } .on-dark .card { background: rgba(255, 255, 255, 0.035); border-color: var(--line-dark); } .on-dark .card:hover { background: rgba(255, 255, 255, 0.07); } .card-num { font-family: var(--font-display); font-size: var(--step-3); font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--line); margin-bottom: 1.2rem; transition: -webkit-text-stroke-color 0.45s var(--ease); } .card:hover .card-num { -webkit-text-stroke-color: var(--accent-solid, var(--azure-400)); } .on-dark .card-num { -webkit-text-stroke-color: rgba(255, 255, 255, 0.25); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } /* Pillar colour coding, straight off the logo tagline */ .pillar-1 { --accent: linear-gradient(90deg, #012c6b, #023e88); --accent-solid: #023e88; } .pillar-2 { --accent: linear-gradient(90deg, #035ead, #0074da); --accent-solid: #0074da; } .pillar-3 { --accent: linear-gradient(90deg, #1a744e, #7ec143); --accent-solid: #51a457; } .pillar-1 .bars span { background: #023e88; } .pillar-1 .bars span:nth-child(2) { background: #012c6b; } .pillar-1 .bars span:nth-child(3) { background: #3b7fd4; } .pillar-2 .bars span { background: #0074da; } .pillar-2 .bars span:nth-child(2) { background: #035ead; } .pillar-2 .bars span:nth-child(3) { background: #5fb0f5; } .pillar-3 .bars span { background: #51a457; } .pillar-3 .bars span:nth-child(2) { background: #1a744e; } .pillar-3 .bars span:nth-child(3) { background: #7ec143; } .card h3 { margin-bottom: 0.5rem; } .card p { color: var(--ink-mid); font-size: 0.97rem; } .on-dark .card p { color: var(--on-dark-mid); } .card-stat { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-solid, var(--blue-500)); } .on-dark .card-stat { border-top-color: var(--line-dark); } /* Media card (image + text) */ .card-media { padding: 0; } /* 16:9 matches the source frames and the YouTube player, so the photo cards and the video card line up and nothing gets cropped. */ .card-media .shot { aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist); } .card-media .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); } .card-media:hover .shot img { transform: scale(1.06); } .card-media .body { padding: clamp(1.4rem, 2.6vw, 2rem); } /* Diagram card. A labelled spec drawing, not a photograph — so it is fitted whole rather than cropped, and sits on a light panel. Its callouts are too small to read at card size, so the whole thing opens full size on click. */ .card-media .shot-diagram { background: var(--bone); border-bottom: 1px solid var(--line); } .shot-diagram .diagram-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; } /* Needs .card-media to outrank `.card-media .shot img { object-fit: cover }`, which would otherwise crop the callouts straight off the drawing. */ .card-media .shot-diagram img { width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; transition: transform 0.6s var(--ease-out); } .card-media:hover .shot-diagram img { transform: scale(1.04); } .diagram-open:focus-visible { outline: 3px solid var(--azure-400); outline-offset: -3px; } .diagram-hint { position: absolute; right: 0.6rem; bottom: 0.6rem; background: rgba(0, 18, 53, 0.86); color: #fff; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; } /* Full-size image viewer (shares the lightbox shell with the story video) */ /* The source is 447px square, so cap the upscale — a little larger reads better, a lot larger just looks soft. */ .lightbox img.lightbox-img { display: block; width: min(92vw, 620px); max-height: 84vh; object-fit: contain; margin-inline: auto; background: #fff; padding: 1rem; border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); } /* Video card. The YouTube player is only fetched once someone clicks, so the page makes no third-party request — and sets no third-party cookie — until the visitor asks for it. */ .card-media .shot-video { aspect-ratio: 16 / 9; background: var(--navy-950); } .shot-video .video-play { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; } .shot-video .video-play img { width: 100%; height: 100%; object-fit: cover; } .shot-video .video-play::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0, 18, 53, 0.45) 0%, rgba(0, 9, 28, 0.25) 100%); transition: opacity 0.4s var(--ease); } .shot-video .video-play:hover::after { opacity: 0.6; } .video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 74px; height: 74px; border-radius: 50%; background: var(--sweep); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 9, 28, 0.45); transition: transform 0.4s var(--ease-out); } .video-play:hover .video-play-btn { transform: translate(-50%, -50%) scale(1.09); } .video-play-btn::before { content: ''; width: 0; height: 0; margin-left: 5px; border-left: 19px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; } .video-play:focus-visible { outline: 3px solid var(--azure-400); outline-offset: -3px; } .shot-video iframe { width: 100%; height: 100%; border: 0; display: block; } /* ------------------------------------------------------------- 10. METRIC TILES ------------------------------------------------------------- */ .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); overflow: hidden; } .metric { background: var(--navy-900); padding: clamp(1.5rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: 0.35rem; } .metric-v { font-family: var(--font-display); font-size: var(--step-4); font-weight: 800; line-height: 1; letter-spacing: -0.03em; background: var(--sweep-flat); -webkit-background-clip: text; background-clip: text; color: transparent; } .metric-k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-soft); } .metrics-light { background: var(--line); border-color: var(--line); } .metrics-light .metric { background: var(--paper); } .metrics-light .metric-k { color: var(--ink-soft); } /* ------------------------------------------------------------- 11. STEPS (assessment protocol) ------------------------------------------------------------- */ .steps { counter-reset: step; position: relative; } .step { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); } .on-dark .step { border-top-color: var(--line-dark); } .step:last-child { border-bottom: 1px solid var(--line); } .on-dark .step:last-child { border-bottom-color: var(--line-dark); } .step-badge { position: relative; width: 96px; height: 96px; display: grid; place-items: center; } .step-badge .ring { position: absolute; inset: 0; width: 100%; height: 100%; } .step-badge .n { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; line-height: 1; } .step-body h3 { margin-bottom: 0.45rem; } .step-body .kicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-500); margin-bottom: 0.7rem; } .on-dark .step-body .kicker { color: var(--azure-300); } .step-body p { color: var(--ink-mid); max-width: 62ch; } .on-dark .step-body p { color: var(--on-dark-mid); } /* ------------------------------------------------------------- 12. PRICING ------------------------------------------------------------- */ .tiers { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); grid-template-columns: repeat(3, 1fr); } .tier { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.8rem, 3vw, 2.6rem); transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); } .tier:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(0, 18, 53, 0.12); } .tier.is-featured { background: var(--navy-900); color: #fff; border-color: transparent; box-shadow: 0 26px 60px rgba(0, 18, 53, 0.3); } .tier.is-featured::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--sweep-flat); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .tier.is-featured h3 { color: #fff; } .tier-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--sweep-flat); color: #fff; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.38rem 1rem; border-radius: 999px; white-space: nowrap; } .tier-k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.4rem; } .tier.is-featured .tier-k { color: var(--on-dark-soft); } .tier-price { display: flex; align-items: baseline; gap: 0.3rem; font-family: var(--font-display); font-weight: 800; line-height: 1; margin-bottom: 0.3rem; } .tier-price .amt { font-size: var(--step-4); letter-spacing: -0.03em; } .tier-price .per { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase; } .tier.is-featured .tier-price .per { color: var(--on-dark-soft); } .tier p { color: var(--ink-mid); font-size: 0.96rem; } .tier.is-featured p { color: var(--on-dark-mid); } .tier-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.7rem; } .tier-list li { position: relative; padding-left: 1.7rem; font-size: 0.93rem; color: var(--ink-mid); } .tier.is-featured .tier-list li { color: var(--on-dark-mid); } .tier-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 11px; height: 3px; border-radius: 1px; background: var(--green-500); } .tier .btn { margin-top: auto; justify-content: center; } .tier-foot { margin-top: 1.8rem; } /* ------------------------------------------------------------- 13. FAQ ------------------------------------------------------------- */ .faq { border-top: 1px solid var(--line); } .on-dark .faq { border-top-color: var(--line-dark); } .faq-item { border-bottom: 1px solid var(--line); } .on-dark .faq-item { border-bottom-color: var(--line-dark); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: none; border: 0; padding: 1.5rem 0; text-align: left; cursor: pointer; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: inherit; transition: color 0.3s var(--ease); } .faq-q:hover { color: var(--blue-500); } .on-dark .faq-q:hover { color: var(--azure-300); } .faq-icon { position: relative; width: 20px; height: 20px; flex: none; } .faq-icon::before, .faq-icon::after { content: ''; position: absolute; inset: 50% 0 auto 0; height: 2px; background: currentColor; border-radius: 1px; transform: translateY(-50%); transition: transform 0.4s var(--ease); } .faq-icon::after { transform: translateY(-50%) rotate(90deg); } .faq-q[aria-expanded='true'] .faq-icon::after { transform: translateY(-50%) rotate(0deg); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-out); } .faq-q[aria-expanded='true'] + .faq-a { grid-template-rows: 1fr; } .faq-a > div { overflow: hidden; } .faq-a p { color: var(--ink-mid); padding-bottom: 1.6rem; max-width: 70ch; } .on-dark .faq-a p { color: var(--on-dark-mid); } /* ------------------------------------------------------------- 14. FORMS ------------------------------------------------------------- */ .form { display: grid; gap: 1.15rem; } .field { display: grid; gap: 0.45rem; } .field-2 { grid-template-columns: 1fr 1fr; gap: 1.15rem; display: grid; } .field label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .on-dark .field label { color: var(--on-dark-soft); } .field input, .field select, .field textarea { width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.95rem 1.05rem; color: var(--ink); transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .field textarea { min-height: 128px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--azure-400); box-shadow: 0 0 0 3px rgba(0, 116, 218, 0.16); } .on-dark .field input, .on-dark .field select, .on-dark .field textarea { background: rgba(255, 255, 255, 0.05); border-color: var(--line-dark); color: #fff; } .on-dark .field input::placeholder, .on-dark .field textarea::placeholder { color: var(--on-dark-soft); } .req { color: var(--green-500); } .form-note { font-size: 0.82rem; color: var(--ink-soft); } .on-dark .form-note { color: var(--on-dark-soft); } .form-status { display: none; padding: 1rem 1.15rem; border-radius: var(--radius); background: rgba(26, 116, 78, 0.12); border: 1px solid var(--green-500); font-size: 0.92rem; } .form-status.is-shown { display: block; } .form-status a { text-decoration: underline; } /* Something went wrong — warm amber, not alarm red: the visitor did nothing wrong */ .form-status.is-error { background: rgba(214, 144, 42, 0.14); border-color: #d6902a; } .btn:disabled { opacity: 0.6; cursor: progress; } .btn:disabled:hover { transform: none; box-shadow: none; } /* Pillar interest — segmented control using the pillar colours */ .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .seg input { position: absolute; opacity: 0; pointer-events: none; } .seg label { display: block; text-align: center; padding: 0.85rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mid); transition: all 0.3s var(--ease); } .on-dark .seg label { border-color: var(--line-dark); color: var(--on-dark-mid); } .seg input:checked + label { color: #fff; border-color: transparent; background: var(--seg-c, var(--navy-900)); } .seg input:focus-visible + label { outline: 3px solid var(--azure-400); outline-offset: 2px; } .seg .s-1 { --seg-c: linear-gradient(120deg, #012c6b, #023e88); } .seg .s-2 { --seg-c: linear-gradient(120deg, #035ead, #0074da); } .seg .s-3 { --seg-c: linear-gradient(120deg, #1a744e, #7ec143); } /* ------------------------------------------------------------- 15. CONTACT / INFO BLOCKS ------------------------------------------------------------- */ .info-list { display: grid; gap: 2rem; } .info-item { display: grid; gap: 0.4rem; } .info-item .k { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--azure-300); } .info-item .v { font-size: var(--step-1); font-weight: 600; line-height: 1.5; } .info-item .v a { display: inline-block; padding-block: 0.2rem; } .info-item .v a:hover { color: var(--green-400); } /* ------------------------------------------------------------- 15b. BOOKING PANEL ------------------------------------------------------------- */ .book-panel { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 3.2rem); overflow: hidden; box-shadow: 0 26px 60px rgba(0, 18, 53, 0.1); } .book-panel::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 5px; background: var(--sweep-flat); } .book-panel .btn { font-size: 0.95rem; padding: 1.25rem 2.4rem; } .book-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: bstep; } .book-steps li { position: relative; padding-left: 3rem; color: var(--ink-mid); min-height: 2rem; } .book-steps li::before { counter-increment: bstep; content: counter(bstep, decimal-leading-zero); position: absolute; left: 0; top: -0.1rem; font-family: var(--font-display); font-size: 0.95rem; font-weight: 800; color: transparent; -webkit-text-stroke: 1.4px var(--blue-500); } .book-steps strong { color: var(--ink); font-weight: 600; } /* "opens in a new tab" marker */ .ext::after { content: ''; display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.15em; border: 2px solid currentColor; border-left-width: 0; border-bottom-width: 0; transform: rotate(45deg) translateY(-0.1em); } /* ------------------------------------------------------------- 16. CTA BAND ------------------------------------------------------------- */ .cta { position: relative; background: var(--navy-950); color: #fff; overflow: hidden; isolation: isolate; text-align: center; } .cta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 100% at 50% 120%, rgba(26, 116, 78, 0.4) 0%, transparent 70%), radial-gradient(ellipse 60% 90% at 15% -20%, rgba(2, 62, 136, 0.55) 0%, transparent 70%); } .cta .ring-mark { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(620px, 90vw); opacity: 0.08; } .cta h2 { margin-bottom: 0.4em; } .cta .btn-row { justify-content: center; } /* ------------------------------------------------------------- 17. FOOTER ------------------------------------------------------------- */ .footer { position: relative; background: var(--navy-900); color: var(--on-dark-mid); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; overflow: hidden; } .footer::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--sweep-flat); } .footer .ring-mark { right: -8%; bottom: -34%; width: min(520px, 70vw); opacity: 0.045; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); position: relative; z-index: 1; } .footer-logo img { height: 62px; width: auto; margin-bottom: 1.4rem; } .footer h2 { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: 1.2rem; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; } .footer li { line-height: 1.6; } /* Generous hit area — these are the links people reach for on a phone */ .footer a { display: inline-block; padding-block: 0.35rem; transition: color 0.3s var(--ease); } .footer a:hover { color: #fff; } .footer p { font-size: 0.93rem; max-width: 42ch; } .footer-base { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.8rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; position: relative; z-index: 1; } .footer-base p { font-size: 0.78rem; color: var(--on-dark-soft); margin: 0; max-width: none; } .disclaimer { font-size: 0.76rem; line-height: 1.6; color: var(--on-dark-soft); max-width: 78ch; margin-top: 1.6rem; } /* Live status chip — echoes the original site's "STATUS: ACTIVE" note */ .status-chip { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-soft); } .status-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-400); box-shadow: 0 0 0 0 rgba(126, 193, 67, 0.7); animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(126, 193, 67, 0); } 100% { box-shadow: 0 0 0 0 rgba(126, 193, 67, 0); } } /* ------------------------------------------------------------- 18. PAGE HEADER (inner pages) ------------------------------------------------------------- */ .page-head { position: relative; background: var(--navy-900); color: #fff; padding-block: clamp(9rem, 18vh, 13rem) clamp(4rem, 8vw, 7rem); overflow: hidden; isolation: isolate; } .page-head::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 120% at 85% 0%, rgba(2, 62, 136, 0.7) 0%, transparent 65%), radial-gradient(ellipse 60% 100% at 10% 110%, rgba(26, 116, 78, 0.35) 0%, transparent 70%); } .page-head .ring-mark { right: -4%; top: 50%; transform: translateY(-50%); width: min(460px, 60vw); opacity: 0.07; } .page-head h1 { font-size: var(--step-4); margin-bottom: 0.3em; } .page-head .lede { color: rgba(255, 255, 255, 0.82); } .crumb { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: 1.4rem; } .crumb a:hover { color: var(--green-400); } /* ------------------------------------------------------------- 19. SPLIT / FEATURE ROWS ------------------------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .split .shot { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--mist); } .split .shot img { width: 100%; height: 100%; object-fit: cover; } .split .shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(0, 18, 53, 0.34) 0%, transparent 55%); pointer-events: none; } /* A video in a split row wants the player's own 16:9, and no brand scrim over it — the facade already carries its own overlay. Declared after the .split rules above so it actually wins. */ .split .shot-video { aspect-ratio: 16 / 9; background: var(--navy-950); } .split .shot-video::after { display: none; } .split.flip .col-media { order: 2; } /* ------------------------------------------------------------- 20. VIDEO LIGHTBOX ------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--gutter); background: rgba(0, 9, 28, 0.94); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox-inner { width: min(1100px, 100%); transform: scale(0.96); transition: transform 0.45s var(--ease-out); } .lightbox.is-open .lightbox-inner { transform: scale(1); } .lightbox video { width: 100%; border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); background: #000; } .lightbox-close { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background 0.3s var(--ease), transform 0.3s var(--ease); } .lightbox-close:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); } .lightbox-cap { margin-top: 1rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-soft); text-align: center; } body.is-locked { overflow: hidden; } /* ------------------------------------------------------------- 21. REVEAL MOTION ------------------------------------------------------------- */ .r { opacity: 0; transform: translateY(26px); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); transition-delay: var(--d, 0s); will-change: opacity, transform; } .r.is-in { opacity: 1; transform: none; } .r-l { transform: translateX(-28px); } .r-r { transform: translateX(28px); } .r-s { transform: scale(0.96); } /* ------------------------------------------------------------- 21b. DARK SURFACE PARITY .on-deep, .page-head, .cta and .hero are dark surfaces too, but the component rules above are written against .on-dark. Without this block they inherit the light-theme colours and produce dark-on-dark text — and, worse, white cards carrying white text. ------------------------------------------------------------- */ :where(.on-deep, .page-head, .cta, .hero) { --dark-surface: 1; } .on-deep .lede, .page-head .lede, .cta .lede { color: var(--on-dark-mid); } .on-deep .eyebrow, .page-head .eyebrow, .cta .eyebrow, .hero .eyebrow { color: var(--azure-300); } .on-deep h1, .on-deep h2, .on-deep h3, .on-deep h4, .cta h1, .cta h2, .cta h3 { color: #fff; } /* Cards on a near-black band must not keep the white light-theme surface */ .on-deep .card, .cta .card { background: rgba(255, 255, 255, 0.045); border-color: var(--line-dark); } .on-deep .card:hover, .cta .card:hover { background: rgba(255, 255, 255, 0.08); } .on-deep .card p, .cta .card p { color: var(--on-dark-mid); } .on-deep .card-num, .cta .card-num { -webkit-text-stroke-color: rgba(255, 255, 255, 0.25); } .on-deep .card-stat, .cta .card-stat { border-top-color: var(--line-dark); } .on-deep .step { border-top-color: var(--line-dark); } .on-deep .step:last-child { border-bottom-color: var(--line-dark); } .on-deep .step-body .kicker { color: var(--azure-300); } .on-deep .step-body p { color: var(--on-dark-mid); } .on-deep .faq { border-top-color: var(--line-dark); } .on-deep .faq-item { border-bottom-color: var(--line-dark); } .on-deep .faq-q:hover { color: var(--azure-300); } .on-deep .faq-a p { color: var(--on-dark-mid); } .on-deep .field label, .page-head .field label { color: var(--on-dark-soft); } .on-deep .field input, .on-deep .field select, .on-deep .field textarea { background: rgba(255, 255, 255, 0.05); border-color: var(--line-dark); color: #fff; } .on-deep .seg label { border-color: var(--line-dark); color: var(--on-dark-mid); } .on-deep .form-note { color: var(--on-dark-soft); } /* Ghost buttons sit on every dark band, not just .on-dark and .hero */ .on-deep .btn-ghost, .cta .btn-ghost, .page-head .btn-ghost { --btn-fg: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4); } .on-deep .btn-ghost:hover, .cta .btn-ghost:hover, .page-head .btn-ghost:hover { box-shadow: inset 0 0 0 2px transparent; } /* The nav CTA is a filled button in both nav states, so its label is always white. `.nav.is-stuck .nav-links a` sets var(--ink) at (0,3,1) and would otherwise win, painting navy text on the navy stuck-state button. */ .nav .nav-links a.nav-cta, .nav.is-stuck .nav-links a.nav-cta { color: #fff; } /* On dark bands a plain .card is translucent over navy, so lists inside it need the on-dark ink as well. */ .on-dark .card .tier-list li, .on-deep .card .tier-list li { color: var(--on-dark-mid); } /* Breadcrumbs are a real navigation control — give them a real hit area */ .crumb a { display: inline-block; padding-block: 0.35rem; min-height: 26px; } /* ------------------------------------------------------------- 22. RESPONSIVE ------------------------------------------------------------- */ @media (max-width: 1000px) { .g-4 { grid-template-columns: repeat(2, 1fr); } .tiers { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } .tier.is-featured { order: -1; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-logo { grid-column: 1 / -1; } } @media (max-width: 860px) { .nav-toggle { display: block; } .nav-links { position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); background: var(--navy-900); flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.4rem; padding: 5rem 2rem 2rem; transform: translateX(100%); /* visibility keeps the closed drawer out of the layout and out of the tab order; without it the page reports sideways overflow */ visibility: hidden; transition: transform 0.45s var(--ease-out), visibility 0.45s; box-shadow: -20px 0 60px rgba(0, 9, 28, 0.4); } .nav-links.is-open { transform: none; visibility: visible; } .nav-links a, .nav.is-stuck .nav-links a { color: #fff; font-size: 1.1rem; padding: 0.9rem 0; width: 100%; } .nav-links .nav-cta, .nav.is-stuck .nav-links .nav-cta { --btn-bg: var(--azure-400); margin-top: 1.2rem; width: 100%; justify-content: center; } .nav-links .nav-cta::after { display: none; } .g-3, .g-2 { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; } .split.flip .col-media { order: 0; } .field-2 { grid-template-columns: 1fr; } .step { grid-template-columns: 1fr; gap: 1.25rem; } .step-badge { width: 74px; height: 74px; } .step-badge .n { font-size: 1.4rem; } } @media (max-width: 620px) { :root { --gutter: 1rem; } .g-4 { grid-template-columns: 1fr; } .hero { min-height: 92svh; } .hero-utils { gap: 1rem; } .footer-grid { grid-template-columns: 1fr; } .metrics { grid-template-columns: 1fr 1fr; } .seg { grid-template-columns: 1fr; } .btn { width: 100%; justify-content: center; } .btn-row { flex-direction: column; } .vid-btn { width: 100%; justify-content: center; } } /* ------------------------------------------------------------- 23. REDUCED MOTION + PRINT ------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .r { opacity: 1 !important; transform: none !important; } .ring-draw .ring-arc { stroke-dashoffset: 0 !important; } .ticker-track { animation: none; } .card:hover, .tier:hover, .btn:hover { transform: none; } } @media print { .nav, .hero-media, .lightbox, .ticker, .btn-row { display: none !important; } body { color: #000; background: #fff; } .on-dark, .on-deep, .page-head, .footer, .cta { background: #fff !important; color: #000 !important; } }