/* ========================================================================== DAMPCORE: Design System Phase 1 deliverable. Every other page in the build consumes this file. Palette, type, spacing and component rules are defined once, as custom properties + BEM-ish utility classes, so later phases stay consistent without redesigning per page. ========================================================================== */ /* SELF-HOSTED FONTS: activate once the .woff2 files exist in assets/fonts/ (see assets/fonts/README.md; this could not be completed in this build session because the font CDN and package registries were both unreachable). Uncomment this block and remove the Google Fonts tags from every page's once the files are in place. @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/montserrat-600.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/montserrat-700.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/montserrat-800.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-600.woff2') format('woff2'); } */ /* -------------------------------- Tokens -------------------------------- */ :root { /* Brand colour: from the approved identity board (brief §4) */ --navy: #0B2740; --navy-800: #0E2F4D; --navy-700: #133A5E; --navy-600: #1C4A73; --orange: #D65A2E; --orange-600: #C04E25; --orange-100: #FBE7DD; --slate: #6B7280; --slate-300: #A3AAB3; --stone: #E8ECEF; --stone-50: #F4F6F7; --white: #FFFFFF; --ink: #10202E; /* body copy colour: near-navy, softer than pure navy for long text */ --line: #DDE2E6; /* hairline borders on light surfaces */ --line-dark: rgba(255,255,255,.14); /* hairline borders on navy surfaces */ /* Typography */ --font-display: 'Montserrat', 'Arial Narrow', Arial, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem); --step-2: clamp(1.5rem, 1.35rem + 0.7vw, 1.85rem); --step-3: clamp(1.9rem, 1.6rem + 1.3vw, 2.5rem); --step-4: clamp(2.4rem, 1.9rem + 2.2vw, 3.4rem); --step-5: clamp(3rem, 2.2rem + 3.6vw, 4.5rem); /* Spacing scale (8pt-ish base) */ --sp-1: 0.5rem; --sp-2: 0.75rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-5: 2rem; --sp-6: 3rem; --sp-7: 4.5rem; --sp-8: 6.5rem; --sp-9: 9rem; --container-max: 1280px; --container-pad: clamp(1.25rem, 4vw, 3rem); --radius-sm: 2px; /* deliberately near-square, brief §6 */ --radius-md: 3px; --shadow-card: 0 1px 2px rgba(11,39,64,0.06), 0 8px 24px -12px rgba(11,39,64,0.18); --shadow-raised: 0 16px 40px -16px rgba(11,39,64,0.35); --ease: cubic-bezier(.4,0,.2,1); --dur: 200ms; } /* -------------------------------- Reset ---------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--white); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--navy); } p { margin: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Focus states: never rely on colour alone (brief §37) */ :focus-visible { outline: 2.5px solid var(--orange); outline-offset: 2px; } a:focus-visible, button:focus-visible { border-radius: var(--radius-sm); } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: var(--white); padding: .75rem 1.25rem; z-index: 1000; } .skip-link:focus { left: var(--sp-3); top: var(--sp-3); } /* -------------------------------- Layout ---------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { padding-block: var(--sp-8); } .section--tight { padding-block: var(--sp-6); } .section--navy { background: var(--navy); color: var(--white); } .section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); } .section--stone { background: var(--stone-50); } .section--stone-strong { background: var(--stone); } .grid { display: grid; gap: var(--sp-5); } @media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1100px) { .grid-6 { grid-template-columns: repeat(6, 1fr); } } .split { display: grid; gap: var(--sp-6); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } .split--reverse { direction: rtl; } .split--reverse > * { direction: ltr; } } /* -------------------------------- Type -------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--orange); display: block; } .section--navy .eyebrow, .section--navy .eyebrow::before { color: var(--orange); } h1, .h1 { font-size: var(--step-5); line-height: 1.05; } h2, .h2 { font-size: var(--step-4); line-height: 1.1; } h3, .h3 { font-size: var(--step-3); line-height: 1.2; } h4, .h4 { font-size: var(--step-2); line-height: 1.3; } h5, .h5 { font-size: var(--step-1); line-height: 1.4; } .lede { font-size: var(--step-1); line-height: 1.6; color: var(--slate); max-width: 62ch; } .section--navy .lede { color: #C7D3DD; } .small { font-size: var(--step--1); } .text-slate { color: var(--slate); } .text-orange { color: var(--orange); } .text-white { color: var(--white); } .brand-line { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; font-size: var(--step--1); color: var(--slate); } .section--navy .brand-line { color: #93A5B5; } /* -------------------------------- Buttons -------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 0.95em 1.7em; font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.04em; text-transform: uppercase; border: 1.5px solid transparent; border-radius: var(--radius-sm); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn svg { width: 1.1em; height: 1.1em; flex: none; } .btn--primary { background: var(--orange); color: var(--white); border-color: var(--orange); } .btn--primary:hover { background: var(--orange-600); border-color: var(--orange-600); } .btn--navy { background: var(--navy); color: var(--white); border-color: var(--navy); } .btn--navy:hover { background: var(--navy-700); } .btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); } .btn--outline:hover { background: var(--navy); color: var(--white); } .btn--outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); } .btn--outline-light:hover { background: var(--white); color: var(--navy); border-color: var(--white); } .btn--ghost { background: transparent; color: var(--navy); border-color: transparent; padding-inline: 0; text-transform: none; letter-spacing: 0; font-weight: 600; font-family: var(--font-body); font-size: var(--step-0); } .btn--ghost svg { color: var(--orange); transition: transform var(--dur) var(--ease); } .btn--ghost:hover svg { transform: translateX(3px); } .btn--block { width: 100%; } .btn--sm { padding: .7em 1.2em; font-size: 0.78rem; } /* Text link with orange underline treatment */ .link-arrow { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; color: var(--navy); border-bottom: 1.5px solid var(--orange); padding-bottom: 2px; } .link-arrow svg { width: 1em; height: 1em; color: var(--orange); transition: transform var(--dur) var(--ease); } .link-arrow:hover svg { transform: translateX(3px); } /* -------------------------------- Header / Nav -------------------------------- */ .site-header { position: sticky; top: 0; z-index: 500; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.1) blur(6px); border-bottom: 1px solid var(--line); } .header-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: 0.85rem; } .header-logo { display: flex; align-items: center; } .header-logo img { height: 38px; width: auto; } .primary-nav { display: none; } @media (min-width: 1080px) { .primary-nav { display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.75rem); margin-inline: auto; flex: 1; justify-content: center; } } .primary-nav > li { position: relative; } .nav-link { display: flex; align-items: center; gap: .35em; font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.01em; color: var(--navy); padding: 1.6rem 0; border-bottom: 2px solid transparent; white-space: nowrap; } .nav-link svg { width: 14px; height: 14px; color: var(--slate); transition: transform var(--dur) var(--ease); } .nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--orange-600); } .nav-link[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--orange-600); } .header-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; } .header-phone { display: none; align-items: center; gap: .5em; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--navy); white-space: nowrap; } .header-phone svg { width: 18px; height: 18px; color: var(--orange); } @media (min-width: 860px) { .header-phone { display: inline-flex; } } .nav-toggle { display: inline-flex; padding: .4rem; } .nav-toggle svg { width: 26px; height: 26px; color: var(--navy); } @media (min-width: 1080px) { .nav-toggle { display: none; } } /* Mega menu */ .mega-menu { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; width: min(760px, 90vw); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-raised); padding: var(--sp-5); display: none; gap: var(--sp-6); grid-template-columns: repeat(2, 1fr); } .mega-menu.is-open { display: grid; } .mega-col-title { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); margin-bottom: var(--sp-2); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--line); } .mega-col ul li a { display: block; padding: 0.5rem 0; font-size: 0.92rem; color: var(--ink); border-bottom: 1px solid transparent; } .mega-col ul li a:hover { color: var(--orange-600); } .mega-col ul li a.is-highlight { color: var(--navy); font-weight: 700; } /* Mobile drawer */ .mobile-nav { position: fixed; inset: 0; z-index: 600; background: var(--white); transform: translateX(100%); transition: transform var(--dur) var(--ease); overflow-y: auto; display: flex; flex-direction: column; } .mobile-nav.is-open { transform: translateX(0); } .mobile-nav__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--container-pad); border-bottom: 1px solid var(--line); } .mobile-nav__head img { height: 30px; } .mobile-nav__body { padding: var(--sp-4) var(--container-pad) var(--sp-8); } .mobile-nav__body > li { border-bottom: 1px solid var(--line); } .mobile-nav-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--navy); } .mobile-nav-link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); } .mobile-nav-link[aria-expanded="true"] svg { transform: rotate(180deg); } .mobile-submenu { display: none; padding-bottom: var(--sp-3); } .mobile-submenu.is-open { display: block; } .mobile-submenu li a { display: block; padding: .6rem 0 .6rem 1rem; color: var(--slate); border-left: 2px solid var(--line); font-size: .95rem; } .mobile-nav__foot { margin-top: auto; padding: var(--sp-4) var(--container-pad); border-top: 1px solid var(--line); display: grid; gap: .75rem; } /* Sticky mobile action bar (brief §35) */ .mobile-cta-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 400; display: grid; grid-template-columns: 1fr 1fr; background: var(--navy); } .mobile-cta-bar a { display: flex; align-items: center; justify-content: center; gap: .5em; padding: .9rem 1rem; font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .02em; text-transform: uppercase; color: var(--white); } .mobile-cta-bar a svg { width: 16px; height: 16px; } .mobile-cta-bar a:first-child { background: rgba(255,255,255,.08); } .mobile-cta-bar a:last-child { background: var(--orange); } @media (min-width: 720px) { .mobile-cta-bar { display: none; } } body.has-mobile-cta { padding-bottom: 56px; } @media (min-width: 720px) { body.has-mobile-cta { padding-bottom: 0; } } /* -------------------------------- Breadcrumbs -------------------------------- */ .breadcrumbs { padding-block: var(--sp-3); } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; font-size: .82rem; color: var(--slate); } .breadcrumbs a { color: var(--slate); } .breadcrumbs a:hover { color: var(--orange-600); } .breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .5em; color: var(--line); } .breadcrumbs li[aria-current] { color: var(--navy); font-weight: 600; } /* -------------------------------- Cards -------------------------------- */ .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card:hover { box-shadow: var(--shadow-card); border-color: var(--stone); transform: translateY(-2px); } .service-card { display: flex; flex-direction: column; padding: var(--sp-5); gap: var(--sp-3); } .service-card__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--stone-50); border: 1px solid var(--line); color: var(--navy); } .service-card__icon svg { width: 30px; height: 30px; } .service-card h3 { font-size: var(--step-1); } .service-card p { color: var(--slate); font-size: .95rem; } .service-card .link-arrow { margin-top: auto; } .problem-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--line); background: var(--white); text-align: left; width: 100%; height: 100%; } .problem-card:hover { border-color: var(--orange); background: var(--orange-100); } .problem-card__icon { width: 42px; height: 42px; color: var(--navy); } .problem-card__icon svg { width: 100%; height: 100%; } .problem-card span.link-arrow { margin-top: var(--sp-1); } .stat-strip { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 760px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } } .stat-strip__item { background: var(--white); padding: var(--sp-4) var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); } .stat-strip__item svg { width: 26px; height: 26px; color: var(--orange); flex: none; } .stat-strip__item span { font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .02em; color: var(--navy); text-transform: uppercase; line-height: 1.3; } /* Sector / audience card */ .sector-card { padding: var(--sp-5); border-top: 3px solid var(--orange); background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--orange); } /* Case study card */ .case-card { display: flex; flex-direction: column; } .case-card__media { aspect-ratio: 4/3; } .case-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); } .case-card__tag { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-600); } .case-card__loc { color: var(--slate); font-size: .88rem; display: flex; align-items: center; gap: .4em; } .case-card__loc svg { width: 14px; height: 14px; } /* Advice / article card */ .article-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); } .article-card__cat { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-600); } /* Process steps */ .process-steps { display: grid; gap: var(--sp-4); counter-reset: step; } @media (min-width: 900px) { .process-steps { grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); } } .process-step { position: relative; padding-top: var(--sp-5); } .process-step__num { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--line); position: relative; display: block; margin-bottom: var(--sp-2); } .section--navy .process-step__num { color: var(--navy-600); } .process-step__num em { color: var(--orange); font-style: normal; } .process-step h4 { font-size: 1.05rem; } .process-step p { color: var(--slate); font-size: .92rem; margin-top: .35rem; } .section--navy .process-step p { color: #A9B9C6; } .process-step:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--step-2) / 2 + var(--sp-5) - 6px); left: calc(100% - 8px); width: calc(var(--sp-3) + 4px); height: 1px; background: var(--line); display: none; } .section--navy .process-step:not(:last-child)::after { background: var(--line-dark); } @media (min-width: 900px) { .process-step:not(:last-child)::after { display: block; } } /* -------------------------------- Photography treatment -------------------------------- */ /* No approved photography has been supplied for this build. Every image slot below is a clearly-marked placeholder describing the real shot required (brief §7/§41), NOT a stock or AI-generated substitute. Flagged for the client to supply genuine UK site photography before launch. */ .photo { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy) 55%, var(--navy-700) 100%); color: var(--white); display: flex; align-items: flex-end; } .photo::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); opacity: .5; } .photo__tag { position: relative; margin: var(--sp-3); padding: .6em .9em; background: rgba(11,39,64,.72); border: 1px solid rgba(255,255,255,.25); font-size: .72rem; line-height: 1.4; max-width: 26em; } .photo__tag strong { display: block; font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--orange); font-size: .66rem; margin-bottom: .3em; } .photo--light { background: linear-gradient(135deg, var(--stone) 0%, #D7DEE3 55%, var(--stone) 100%); color: var(--navy); } .photo--light .photo__tag { background: rgba(255,255,255,.85); border-color: var(--line); color: var(--navy); } .photo--light .photo__tag strong { color: var(--orange-600); } .photo--16-9 { aspect-ratio: 16/9; } .photo--4-3 { aspect-ratio: 4/3; } .photo--3-4 { aspect-ratio: 3/4; } .photo--1-1 { aspect-ratio: 1/1; } .photo--hero { aspect-ratio: 4/3; } @media (min-width: 900px) { .photo--hero { aspect-ratio: 16/10; } } /* Real photography fills the same treatment box as the placeholder did */ .photo img, .photo picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .photo { position: relative; } .photo__credit { position: absolute; right: 0; bottom: 0; margin: var(--sp-2); padding: .3em .6em; background: rgba(11,39,64,.55); color: rgba(255,255,255,.85); font-size: .68rem; letter-spacing: .04em; } /* -------------------------------- Forms -------------------------------- */ .field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--sp-3); } .field label { font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: .02em; color: var(--navy); } .field .hint { font-size: .78rem; color: var(--slate); } .field input, .field select, .field textarea { padding: .8em .9em; border: 1.5px solid var(--line); background: var(--white); border-radius: var(--radius-sm); font-size: .95rem; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); } .field textarea { resize: vertical; min-height: 6em; } .radio-group { display: flex; flex-wrap: wrap; gap: .6rem; } .radio-chip { position: relative; } .radio-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .radio-chip span { display: inline-flex; align-items: center; padding: .55em 1em; border: 1.5px solid var(--line); font-size: .88rem; font-weight: 600; color: var(--navy); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .radio-chip input:checked + span { border-color: var(--orange); background: var(--orange-100); color: var(--orange-600); } .radio-chip input:focus-visible + span { outline: 2.5px solid var(--orange); outline-offset: 2px; } .form-required-note { font-size: .78rem; color: var(--slate); margin-top: var(--sp-2); } /* -------------------------------- Footer -------------------------------- */ .site-footer { background: var(--navy); color: #C7D3DD; } .footer-top { padding-block: var(--sp-7); display: grid; gap: var(--sp-6); } @media (min-width: 900px) { .footer-top { grid-template-columns: 1.3fr repeat(4, 1fr); gap: var(--sp-5); } } .footer-brand img { height: 34px; margin-bottom: var(--sp-3); } .footer-brand p { color: #93A5B5; font-size: .9rem; max-width: 30ch; } .footer-col h5 { color: var(--white); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--sp-3); } .footer-col ul { display: grid; gap: .65rem; } .footer-col a { font-size: .92rem; color: #B9C7D2; } .footer-col a:hover { color: var(--orange); } .footer-contact { display: grid; gap: .7rem; margin-top: var(--sp-2); } .footer-contact a, .footer-contact span { display: flex; align-items: center; gap: .6em; font-size: .92rem; color: #B9C7D2; } .footer-contact svg { width: 16px; height: 16px; color: var(--orange); flex: none; } .footer-audience { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--sp-3); } .footer-audience a { border: 1px solid var(--line-dark); padding: .4em .8em; font-size: .8rem; } .footer-bottom { border-top: 1px solid var(--line-dark); padding-block: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; font-size: .82rem; color: #8298A8; } .footer-legal { display: flex; flex-wrap: wrap; gap: 1.2rem; } .footer-legal a { color: #8298A8; } .footer-legal a:hover { color: var(--white); } /* -------------------------------- Misc components -------------------------------- */ .tag-pill { display: inline-flex; align-items: center; padding: .35em .8em; border: 1px solid var(--line); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--navy); cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary svg { width: 18px; height: 18px; color: var(--orange); flex: none; transition: transform var(--dur) var(--ease); } .faq-item[open] summary svg { transform: rotate(45deg); } .faq-item .faq-body { padding-bottom: var(--sp-3); color: var(--slate); max-width: 68ch; } .callout-flag { border: 1.5px dashed #C7B48A; background: #FBF7EE; color: #6B5B2E; padding: var(--sp-3); font-size: .85rem; display: flex; gap: .7em; } .callout-flag strong { color: #4A3D1D; } .legal-body p { margin-top: 1rem; color: var(--ink); } .legal-body p:first-child { margin-top: 0; } .legal-body ul { margin-top: .5rem; } .legal-body a { color: var(--orange-600); font-weight: 600; } .legal-body code { background: var(--stone-50); padding: .1em .4em; border-radius: 2px; font-size: .9em; } .divider { height: 1px; background: var(--line); border: 0; } .divider--dark { background: var(--line-dark); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Utility spacing */ .mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)} .mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)} .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .text-center { text-align: center; } .max-w-prose { max-width: 68ch; } .mx-auto { margin-inline: auto; }