/* ========================================================================== PLUX FORUM — Design System Layout & motion modelled 1:1 on northlane.partners Brand: Orange #F26717 · Navy #12144A · White #FFFFFF ========================================================================== */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root { /* Brand */ --orange: #F26717; --orange-dark: #D4540A; --orange-soft: #FDF0E7; --navy: #12144A; --navy-800: #1B1E63; --navy-700: #262A7D; --white: #FFFFFF; /* Neutrals derived from brand */ --sand: #EFEDE8; /* warm hero ground (Northlane's beige) */ --sand-dark: #E4E1DA; --ink: #12144A; --ink-muted: #5B5E85; --line: rgba(18, 20, 74, 0.14); --line-light: rgba(255, 255, 255, 0.18); /* Theme slots — overridden per section via [data-theme] */ --bg: var(--white); --fg: var(--navy); --muted: var(--ink-muted); --rule: var(--line); --accent: var(--orange); /* Typography */ --font: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* The vh term matters as much as the vw one: on a wide but short window (a 1440x700 laptop) a purely width-based headline grows tall enough to push the hero button below the fold. min() caps it by height too. */ --fs-display: clamp(3.4rem, min(9.2vw, 13vh), 9.5rem); --fs-h1: clamp(2.6rem, min(5.6vw, 9vh), 5.4rem); --fs-h2: clamp(2rem, 3.6vw, 3.6rem); --fs-h3: clamp(1.35rem, 1.7vw, 1.9rem); --fs-h4: clamp(1.1rem, 1.25vw, 1.35rem); --fs-body-lg: clamp(1.05rem, 1.25vw, 1.375rem); --fs-body: clamp(1rem, 1.05vw, 1.125rem); --fs-small: 0.9375rem; --fs-label: 0.8125rem; /* Layout */ --pad-x: clamp(1.25rem, 4.2vw, 5rem); --maxw: 1680px; --gap: clamp(1.25rem, 2.2vw, 2.5rem); --sec-y: clamp(5rem, 11vh, 10rem); --header-h: 84px; --radius: 4px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --dur: 0.75s; } /* ---------- 2. Reset ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* The gradient wash lives on , not on each section. Most pages stack two or three pale sections directly against each other (the Events page has three), and several use .section--flush-top so there is no gap between them. Painting the gradient per-section would restart it at every boundary and leave a visible horizontal seam. One viewport-anchored layer on the body keeps it continuous, and costs a single paint layer rather than one per section. Pale sections are then set transparent so this shows through; dark and orange sections keep their own solid background and cover it. */ body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: 1.55; color: var(--navy); background-color: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none; overflow-x: hidden; } /* The wash itself. A fixed pseudo-element rather than background-attachment: fixed — the latter repaints on every scroll frame, which the custom smooth scroller would make expensive, and iOS Safari ignores it anyway. A fixed element gets its own composited layer and stays put for free. z-index -1 places it above the page canvas but below section backgrounds, so dark and orange sections still cover it while pale ones show it through. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at 65.44% 45.18%, rgba(242, 103, 23, 0.08) 0%, rgba(242, 103, 23, 0) 45.3%), radial-gradient(circle at 28.2% 73.9%, rgba(18, 20, 74, 0.07) 0%, rgba(18, 20, 74, 0) 56.85%), radial-gradient(circle at 52.5% 19.29%, rgba(239, 237, 232, 0.7) 0%, rgba(239, 237, 232, 0) 68.75%), radial-gradient(circle at 79.87% 84.43%, rgba(242, 103, 23, 0.05) 0%, rgba(242, 103, 23, 0) 80.3%); } body.nav-open { overflow: hidden; } h1, h2, h3, h4, h5 { margin: 0; font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; } img, svg, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; } ul, ol { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--orange); color: var(--white); } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } /* ---------- 3. Theming --------------------------------------------------- */ [data-theme="light"] { --bg: var(--sand); --fg: var(--navy); --muted: var(--ink-muted); --rule: var(--line); --accent: var(--orange); } [data-theme="white"] { --bg: var(--white); --fg: var(--navy); --muted: var(--ink-muted); --rule: var(--line); --accent: var(--orange); } [data-theme="dark"] { --bg: var(--navy); --fg: var(--white); --muted: rgba(255,255,255,0.66); --rule: var(--line-light); --accent: var(--orange); } [data-theme="orange"] { --bg: var(--orange); --fg: var(--navy); --muted: rgba(18,20,74,0.72); --rule: rgba(18,20,74,0.22); --accent: var(--navy); } section[data-theme], footer[data-theme], header[data-theme] { background: var(--bg); color: var(--fg); } /* Pale sections let the body wash through. Higher specificity than the rule above, so it wins regardless of source order. */ section[data-theme="white"], section[data-theme="light"] { background-color: transparent; } /* Dark and orange sections get the same wash treatment in their own colours. They can't use the body layer (their solid background covers it), so the gradients go on the section — but anchored to the viewport rather than the section box. That matters: on the Funding page a dark section sits directly above the dark footer, and a box-anchored gradient restarts at that boundary. Measured, the jump was 9 RGB steps — a visible horizontal line. Viewport-anchored, adjacent same-theme sections sample the same gradient and the seam is exactly zero. It also matches the white wash, which is viewport-fixed for the same reason. Trade-off: background-attachment: fixed repaints on scroll. There are at most three such elements per page, so the cost is small — but if it ever feels heavy, dropping the two background-attachment lines reverts to box-anchored gradients and brings the Funding seam back. */ section[data-theme="dark"], footer[data-theme="dark"] { background-image: radial-gradient(circle at 65.44% 45.18%, rgba(242, 103, 23, 0.10) 0%, rgba(242, 103, 23, 0) 45.3%), radial-gradient(circle at 28.2% 73.9%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 56.85%), radial-gradient(circle at 52.5% 19.29%, rgba(38, 42, 125, 0.55) 0%, rgba(38, 42, 125, 0) 68.75%), radial-gradient(circle at 79.87% 84.43%, rgba(242, 103, 23, 0.06) 0%, rgba(242, 103, 23, 0) 80.3%); background-attachment: fixed; background-repeat: no-repeat; } section[data-theme="orange"] { background-image: radial-gradient(circle at 65.44% 45.18%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 45.3%), radial-gradient(circle at 28.2% 73.9%, rgba(18, 20, 74, 0.10) 0%, rgba(18, 20, 74, 0) 56.85%), radial-gradient(circle at 52.5% 19.29%, rgba(250, 180, 130, 0.40) 0%, rgba(250, 180, 130, 0) 68.75%), radial-gradient(circle at 79.87% 84.43%, rgba(18, 20, 74, 0.06) 0%, rgba(18, 20, 74, 0) 80.3%); background-attachment: fixed; background-repeat: no-repeat; } /* ---------- 4. Layout helpers -------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); } .section { padding-block: var(--sec-y); position: relative; } .section--tight { padding-block: clamp(3rem, 6vh, 5.5rem); } .section--flush-top { padding-top: 0; } .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); } .rule { height: 1px; background: var(--rule); border: 0; margin: 0; } /* Eyebrow / section label (Northlane's small left-hand label) */ .eyebrow { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.01em; color: var(--fg); margin: 0 0 1rem; } .lede { font-size: var(--fs-body-lg); line-height: 1.5; color: var(--muted); max-width: 46ch; letter-spacing: -0.01em; } .text-accent { color: var(--accent); } /* ---------- 5. Header ---------------------------------------------------- */ .header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; color: var(--navy); transition: color 0.45s var(--ease), background-color 0.45s var(--ease); background: transparent; } .header.is-inverted { color: var(--white); } .header.is-stuck { background: color-mix(in srgb, var(--white) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .header.is-stuck.is-inverted { background: color-mix(in srgb, var(--navy) 85%, transparent); } .header__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .logo { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.045em; line-height: 1; display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .logo__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--orange); flex: none; transform: translateY(1px); } .nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.75rem); } .nav__link { position: relative; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.02em; padding-block: 0.35rem; } .nav__link::after { content: ""; position: absolute; left: 0; bottom: 0.1rem; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); } .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; } .nav__link.is-active { color: var(--orange); } .header.is-inverted .nav__link.is-active { color: var(--orange); } .nav__contact { text-decoration: none; } .nav__contact::after { transform: scaleX(1); } .burger { display: none; width: 44px; height: 44px; margin-right: -10px; position: relative; } .burger span { position: absolute; left: 10px; width: 24px; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease), opacity 0.25s; } .burger span:nth-child(1) { top: 18px; } .burger span:nth-child(2) { top: 25px; } body.nav-open .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } body.nav-open .burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); } /* Mobile drawer */ .mobile-nav { position: fixed; inset: 0; z-index: 99; background: var(--navy); color: var(--white); padding: calc(var(--header-h) + 2.5rem) var(--pad-x) 3rem; display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 0.7s var(--ease), visibility 0s linear 0.7s; pointer-events: none; } body.nav-open .mobile-nav { clip-path: inset(0 0 0 0); visibility: visible; pointer-events: auto; transition: clip-path 0.7s var(--ease), visibility 0s; } .mobile-nav__list { display: flex; flex-direction: column; gap: 0.35rem; } .mobile-nav__list a { font-size: clamp(2rem, 8vw, 3rem); font-weight: 500; letter-spacing: -0.04em; padding-block: 0.4rem; display: block; } .mobile-nav__list a:hover { color: var(--orange); } .mobile-nav__foot { font-size: var(--fs-small); color: rgba(255,255,255,0.65); display: flex; flex-wrap: wrap; gap: 1.5rem; } /* ---------- 6. Buttons & arrow links ------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 1.75rem; padding: 1.15rem 1.75rem; border: 1px solid currentColor; border-radius: var(--radius); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.015em; position: relative; overflow: hidden; isolation: isolate; transition: color 0.45s var(--ease), border-color 0.45s var(--ease); } .btn::before { content: ""; position: absolute; inset: 0; background: var(--orange); transform: translateY(101%); transition: transform 0.5s var(--ease); z-index: -1; } /* Navy on orange = 5.49:1 — passes AA for normal text (white on orange does not) */ .btn:hover { color: var(--navy); border-color: var(--orange); } .btn:hover::before { transform: translateY(0); } .btn__arrow { transition: transform 0.5s var(--ease); flex: none; } .btn:hover .btn__arrow { transform: translateX(5px); } /* On the orange CTA bands the button starts solid navy and fills with orange. The fill is the same colour as the section behind it, so on hover the button would vanish completely (1.00:1 against its own background). The navy border is therefore kept on hover — the button reads as a navy outline rather than disappearing. Text goes navy on the orange fill: 5.5:1, where white would only be 3.1:1 and fail. */ [data-theme="orange"] .btn { background: var(--navy); border-color: var(--navy); color: var(--white); } [data-theme="orange"] .btn::before { background: var(--orange); } [data-theme="orange"] .btn:hover { color: var(--navy); border-color: var(--navy); } /* On navy sections the button starts white and fills with orange. Text goes navy on hover — white on orange is only 3.1:1 and would fail at this size. */ [data-theme="dark"] .btn { background: var(--white); border-color: var(--white); color: var(--navy); } [data-theme="dark"] .btn::before { background: var(--orange); } [data-theme="dark"] .btn:hover { color: var(--navy); border-color: var(--orange); } .btn--filled { background: var(--orange); border-color: var(--orange); color: var(--navy); } .btn--filled::before { background: var(--navy); } .btn--filled:hover { border-color: var(--navy); color: var(--white); } .arrow-link { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.015em; padding-bottom: 0.35rem; border-bottom: 1px solid currentColor; transition: color 0.35s var(--ease), gap 0.4s var(--ease); } .arrow-link:hover { color: var(--orange); gap: 1.1rem; } /* ---------- 7. Reveal animations ----------------------------------------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); } .reveal.is-in { opacity: 1; transform: none; } .line-mask { overflow: hidden; display: block; } .line-mask > span { display: block; transform: translateY(105%); transition: transform 1.05s var(--ease); transition-delay: var(--d, 0s); } .is-in .line-mask > span, .line-mask.is-in > span { transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .line-mask > span { opacity: 1 !important; transform: none !important; transition: none !important; } .marquee__track { animation: none !important; } } /* ---------- 7b. Scatter text (scroll-driven character convergence) -------- */ /* Characters start displaced horizontally and rotated on X, then converge into place as the heading passes through the viewport. Ported from the framer-motion CharacterV1 pattern to vanilla transforms. */ .scatter { perspective: 600px; perspective-origin: 50% 50%; } /* The flag is set by an inline script in each , so the unscattered text is hidden before first paint. Without JS the rule never applies and the heading renders as normal text. The failsafe animation is the insurance policy: if main.js fails to load or throws, .is-split is never added and the heading would stay invisible — so after 2.5s it reveals itself regardless. Content is never lost to a broken script. */ .js .scatter { opacity: 0; animation: scatterFailsafe 0.3s linear 2.5s forwards; } .js .scatter.is-split { opacity: 1; animation: none; } @keyframes scatterFailsafe { to { opacity: 1; } } .scatter__word { display: inline-block; white-space: nowrap; transform-style: preserve-3d; } .scatter__char { display: inline-block; backface-visibility: hidden; } @media (prefers-reduced-motion: reduce) { .scatter { perspective: none; } .scatter__char { transform: none !important; opacity: 1 !important; } } /* ---------- 7c. Dia sweep reveal ----------------------------------------- */ /* A colour band travels left-to-right across the text, revealing it as it passes; the word then swaps for the next one in the list. The text is plain and fully visible by default — the transparent/clipped state is only applied once JS adds .is-live, so a script failure leaves readable text rather than an invisible gap. */ .dia { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .dia__text { display: inline-block; transition: opacity 0.26s var(--ease), filter 0.34s var(--ease), transform 0.34s var(--ease); } .dia.is-live .dia__text { color: transparent; -webkit-background-clip: text; background-clip: text; background-size: 100% 100%; background-repeat: no-repeat; will-change: filter, opacity, transform; } /* Starting state for an incoming word — JS removes this on the next frame so the properties above transition back to rest. */ .dia__text.is-entering { opacity: 0.58; filter: blur(8px); transform: translateY(5.5px); transition: none; } @media (prefers-reduced-motion: reduce) { .dia { transition: none; width: auto !important; } .dia.is-live .dia__text { color: inherit; background-image: none !important; filter: none !important; opacity: 1 !important; transform: none !important; } } /* ---------- 8. Hero ------------------------------------------------------ */ .hero { position: relative; /* vh first as a fallback: a browser that doesn't understand svh discards the whole declaration, which would leave the hero with no minimum height at all. svh then wins where supported and avoids the mobile-toolbar jump. */ min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: clamp(2.5rem, 5vh, 5rem); overflow: hidden; } .hero__inner { position: relative; z-index: 2; width: 100%; } .hero__title { font-size: var(--fs-display); font-weight: 500; letter-spacing: -0.045em; line-height: 0.92; max-width: 15ch; margin-bottom: clamp(1.75rem, 3.5vh, 3rem); } .hero__sub { font-size: clamp(1.15rem, 1.7vw, 1.85rem); line-height: 1.28; letter-spacing: -0.025em; max-width: 27ch; margin-bottom: clamp(1.75rem, 3.5vh, 2.75rem); font-weight: 400; } /* Two columns: copy left, media right. Grid rather than flex so the two columns can bottom-align independently of each other's height. */ .hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: clamp(2rem, 4vw, 5rem); align-items: stretch; } /* Both columns fill the row, and the copy spreads through its height, so the headline starts level with the top of the media frame and the CTA sits level with the bottom of the caption bar. The existing margins survive as minimum gaps — space-between only hands out what's left over. */ .hero__copy { display: flex; flex-direction: column; justify-content: space-between; } .hero__copy .btn { align-self: flex-start; } /* The display size is capped by viewport width AND height everywhere on the site; in a half-width column the width term has to come down too, or the headline eats the fold on a short laptop. */ .hero__copy .hero__title { font-size: clamp(2.6rem, min(6.4vw, 11vh), 7rem); } /* ---------- 8b. Hero media panel ----------------------------------------- */ /* One video followed by three photos, cross-fading in a single frame with a caption bar underneath. main.js drives it; see initHeroMedia. */ /* Height cap so the panel can never push the CTA below the fold on a short window. It sits on the column rather than the frame, so the frame can flex to fill whatever height the row ends up with and the two columns stay aligned at both edges. Purely a vh figure, no pixel ceiling: a pixel cap would stop binding on a short window (where it is needed) and start binding on a tall one (where it would leave the panel shorter than the copy beside it, breaking exactly the alignment this is meant to hold). 62vh always clears the available height, which is roughly H - 148px. */ .hero__media { display: flex; max-height: 62vh; } .hmedia { display: flex; flex-direction: column; width: 100%; } .hmedia__stage { position: relative; width: 100%; /* aspect-ratio sets the preferred size; flex lets it give way to the row. */ aspect-ratio: 3 / 2; flex: 1 1 auto; min-height: 200px; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius) var(--radius) 0 0; background: var(--sand); } .hmedia__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease); } .hmedia__slide.is-active { opacity: 1; } .hmedia__slide[hidden] { display: none; } .hmedia__slide img, .hmedia__slide video { width: 100%; height: 100%; object-fit: cover; } /* Placeholder behind the slides. If a file is missing main.js drops that slide entirely, so this only shows while the first asset is still loading. */ .hmedia__stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, rgba(242, 103, 23, 0.16) 0%, rgba(242, 103, 23, 0) 62%), radial-gradient(circle at 72% 78%, rgba(18, 20, 74, 0.12) 0%, rgba(18, 20, 74, 0) 66%), var(--sand); } .hmedia__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(0.8rem, 1.1vw, 1.1rem) clamp(0.95rem, 1.3vw, 1.35rem); border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hmedia__caption { margin: 0; font-size: var(--fs-small); line-height: 1.35; letter-spacing: -0.012em; color: var(--navy); } .hmedia__nav { display: flex; align-items: center; gap: 0.3rem; flex: none; } .hmedia__arrow { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--rule); color: var(--navy); transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); } .hmedia__arrow svg { width: 14px; height: 14px; } .hmedia__arrow:hover { background: var(--navy); border-color: var(--navy); color: var(--white); } .hmedia__dots { display: flex; align-items: center; gap: 0.4rem; flex: none; } /* The visible mark is 3px tall; the button around it is padded out to a 44px-ish tap target. */ .hmedia__dot { position: relative; width: 26px; padding: 0.75rem 0; background: none; } .hmedia__dot::before { content: ""; display: block; height: 3px; border-radius: 2px; background: rgba(18, 20, 74, 0.22); transition: background-color 0.4s var(--ease); } .hmedia__dot[aria-current="true"]::before { background: var(--orange); } .hmedia__dot:hover::before { background: rgba(18, 20, 74, 0.45); } .hmedia__dot[aria-current="true"]:hover::before { background: var(--orange); } @media (prefers-reduced-motion: reduce) { .hmedia__slide { transition: none; } } /* Page hero (interior pages) */ .page-hero { padding-top: calc(var(--header-h) + clamp(3rem, 10vh, 7rem)); padding-bottom: clamp(3rem, 7vh, 6rem); position: relative; overflow: hidden; } .page-hero__title { font-size: var(--fs-h1); max-width: 17ch; } .page-hero__title--wide { max-width: 26ch; } /* ---------- 9. Marquee --------------------------------------------------- */ .marquee { overflow: hidden; position: relative; padding-block: clamp(2rem, 4vh, 3.25rem); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; gap: clamp(2.5rem, 5vw, 5rem); width: max-content; animation: scrollX 42s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes scrollX { to { transform: translateX(-50%); } } .marquee__item { font-size: clamp(1.05rem, 1.4vw, 1.4rem); font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; opacity: 0.55; display: flex; align-items: center; gap: 0.65rem; transition: opacity 0.3s; } .marquee__item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: none; } .marquee:hover .marquee__item { opacity: 0.85; } /* ---------- 10. Split section (label left, big text right) --------------- */ .split { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap); align-items: start; } .split__body { max-width: 60ch; } .split__title { font-size: var(--fs-h2); margin-bottom: clamp(1.75rem, 4vh, 3rem); max-width: 22ch; } .split__text { font-size: var(--fs-body-lg); color: var(--muted); line-height: 1.5; letter-spacing: -0.012em; } .split__text p + p { margin-top: 1.4em; } /* Muted navy on orange lands at 3.8:1 and fails AA at body size, so body copy on orange sections runs at full navy. Hierarchy comes from size instead. */ [data-theme="orange"] .split__text, [data-theme="orange"] .step__text { color: var(--fg); } /* ---------- 11. Pillars (Align / Design / Own) -------------------------- */ .pillars { border-top: 1px solid var(--rule); margin-top: clamp(2.5rem, 6vh, 4.5rem); } .pillar { border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 6rem 1fr 1.35fr; gap: var(--gap); padding-block: clamp(1.75rem, 3.5vh, 2.75rem); align-items: start; transition: background-color 0.5s var(--ease), padding 0.5s var(--ease); } .pillar:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .pillar__num { font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; padding-top: 0.45rem; } .pillar__name { font-size: var(--fs-h3); letter-spacing: -0.035em; } .pillar__desc { color: var(--muted); font-size: var(--fs-body); max-width: 52ch; } /* ---------- 12. Cards ---------------------------------------------------- */ .cards { display: grid; gap: var(--gap); } .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--2 { grid-template-columns: repeat(2, 1fr); } .cards--4 { grid-template-columns: repeat(4, 1fr); } .card { border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.5rem, 2.4vw, 2.25rem); display: flex; flex-direction: column; gap: 1rem; min-height: 100%; background: transparent; transition: background-color 0.45s var(--ease), transform 0.45s var(--ease), border-color 0.45s var(--ease); } .card:hover { transform: translateY(-4px); border-color: var(--accent); } .card__meta { font-size: var(--fs-label); font-weight: 600; color: var(--accent); display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; } .card__title { font-size: var(--fs-h4); letter-spacing: -0.03em; line-height: 1.15; } .card__text { color: var(--muted); font-size: var(--fs-small); margin: 0; } .card__foot { margin-top: auto; padding-top: 1.25rem; font-size: var(--fs-small); font-weight: 500; display: flex; align-items: center; gap: 0.5rem; } .card:hover .card__foot { color: var(--accent); } /* Topic tiles */ .topics { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); } .topic { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 2rem); min-height: clamp(190px, 22vh, 250px); display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; position: relative; overflow: hidden; transition: color 0.5s var(--ease); } .topic:nth-child(3n) { border-right: 0; } .topic::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateY(100%); transition: transform 0.6s var(--ease); z-index: 0; } .topic:hover::before { transform: translateY(0); } .topic:hover { color: var(--navy); } .topic > * { position: relative; z-index: 1; } .topic__num { font-size: var(--fs-label); font-weight: 600; opacity: 0.6; font-variant-numeric: tabular-nums; } .topic__name { font-size: var(--fs-h3); letter-spacing: -0.035em; } .topic__desc { font-size: var(--fs-small); color: var(--muted); margin: 0; } .topic:hover .topic__desc { color: rgba(18, 20, 74, 0.86); } .topic:hover .topic__num { opacity: 0.85; } /* ---------- 13. Testimonials --------------------------------------------- */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .quote { display: flex; flex-direction: column; gap: 1.75rem; border-top: 2px solid var(--accent); padding-top: 1.75rem; } .quote__text { font-size: clamp(1.15rem, 1.5vw, 1.6rem); line-height: 1.24; letter-spacing: -0.03em; font-weight: 500; margin: 0; } .quote__who { margin-top: auto; display: flex; align-items: center; gap: 0.9rem; } .quote__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--navy); display: grid; place-items: center; font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.02em; flex: none; } .quote__name { font-weight: 600; font-size: var(--fs-small); letter-spacing: -0.015em; } .quote__role { font-size: var(--fs-small); color: var(--muted); } /* ---------- 14. Stage tabs ----------------------------------------------- */ .tabs__nav { display: flex; gap: clamp(1rem, 2.5vw, 2.5rem); border-bottom: 1px solid var(--rule); margin-bottom: clamp(2rem, 5vh, 3.5rem); flex-wrap: wrap; } .tabs__btn { font-size: var(--fs-h4); letter-spacing: -0.03em; font-weight: 500; padding: 0 0 1rem; position: relative; color: var(--muted); transition: color 0.35s var(--ease); } .tabs__btn::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); } .tabs__btn.is-active { color: var(--fg); } .tabs__btn.is-active::after { transform: scaleX(1); } .tabs__panel { display: none; } .tabs__panel.is-active { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; animation: fadeUp 0.7s var(--ease); } @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .tabs__visual { aspect-ratio: 4 / 3; background: var(--accent); border-radius: var(--radius); position: relative; overflow: hidden; display: grid; place-items: center; padding: 2rem; } .tabs__visual span { font-size: clamp(2rem, 4.5vw, 4rem); letter-spacing: -0.045em; font-weight: 500; color: var(--white); text-align: center; line-height: 0.95; position: relative; z-index: 1; } .tabs__label { font-size: var(--fs-label); font-weight: 600; color: var(--accent); margin-bottom: 0.9rem; } .tabs__title { font-size: var(--fs-h2); margin-bottom: 1.5rem; max-width: 16ch; } /* ---------- 15. Numbered sticky steps (Method page) ---------------------- */ .steps { border-top: 1px solid var(--rule); } .step { border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--gap); padding-block: clamp(3rem, 8vh, 6rem); } .step__index { position: sticky; top: calc(var(--header-h) + 3rem); align-self: start; font-size: clamp(3rem, 8vw, 7rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.85; color: var(--accent); font-variant-numeric: tabular-nums; } .step__title { font-size: var(--fs-h2); margin-bottom: 1.5rem; max-width: 18ch; } .step__text { font-size: var(--fs-body-lg); color: var(--muted); max-width: 56ch; line-height: 1.5; letter-spacing: -0.012em; } .step__list { margin-top: 2rem; display: grid; gap: 0.85rem; } .step__list li { display: flex; gap: 0.9rem; align-items: baseline; font-size: var(--fs-body); color: var(--muted); padding-bottom: 0.85rem; border-bottom: 1px solid var(--rule); } .step__list li::before { content: "→"; color: var(--accent); flex: none; } /* ---------- 15b. Event case studies -------------------------------------- */ .event__sub { font-size: var(--fs-body-lg); color: var(--muted); letter-spacing: -0.015em; margin: 0 0 1.75rem; } .event__meta { border-top: 1px solid var(--rule); margin-bottom: 2rem; } .event__meta-row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding-block: 0.7rem; border-bottom: 1px solid var(--rule); font-size: var(--fs-small); } .event__meta-k { color: var(--muted); font-weight: 600; letter-spacing: .01em; } .speakers { display: grid; gap: 1rem; margin-bottom: 2rem; } .speaker { border-left: 2px solid var(--accent); padding-left: 1.1rem; } .speaker__name { font-weight: 600; font-size: var(--fs-body); letter-spacing: -0.02em; display: block; } .speaker__note { font-size: var(--fs-small); color: var(--muted); } .event__label { font-size: var(--fs-label); font-weight: 600; color: var(--accent); margin: 0 0 .75rem; display: block; } .pullquote { margin: 2.25rem 0 0; padding: 1.5rem 0 0; border-top: 2px solid var(--accent); font-size: clamp(1.15rem, 1.7vw, 1.7rem); line-height: 1.2; letter-spacing: -0.03em; font-weight: 500; max-width: 34ch; } @media (max-width: 720px) { .event__meta-row { grid-template-columns: 1fr; gap: .2rem; } } /* ---------- 16. Stat band ------------------------------------------------ */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); } .stat { border-top: 2px solid var(--accent); padding-top: 1.25rem; } .stat__num { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.95; display: block; margin-bottom: 0.6rem; } .stat__label { font-size: var(--fs-small); color: var(--muted); max-width: 22ch; } /* ---------- 17. Filter grid (Debates page) ------------------------------ */ .filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: clamp(2rem, 4vh, 3rem); align-items: center; } .filters__label { font-size: var(--fs-label); font-weight: 600; color: var(--muted); margin-right: 0.75rem; } .chip { border: 1px solid var(--rule); border-radius: 100px; padding: 0.5rem 1.1rem; font-size: var(--fs-small); font-weight: 500; letter-spacing: -0.01em; transition: all 0.3s var(--ease); white-space: nowrap; } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--navy); font-weight: 600; } [data-theme="dark"] .chip.is-active { color: var(--navy); } .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .case { display: flex; } .case[hidden] { display: none; } .case-empty { color: var(--muted); font-size: var(--fs-body-lg); padding-block: 3rem; } /* ---------- 18. Team ----------------------------------------------------- */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap) clamp(1rem, 2vw, 2rem); } .team-grid--3 { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); } /* Four across, with the same generous gutter as the 3-up variant rather than .team-grid's tighter one. */ .team-grid--4 { grid-template-columns: repeat(4, 1fr); gap: clamp(1.75rem, 3vw, 3rem); } .member__contact { display: inline-block; margin-top: 0.85rem; font-size: var(--fs-small); font-weight: 500; border-bottom: 1px solid var(--rule); padding-bottom: 2px; transition: color .3s var(--ease), border-color .3s var(--ease); } .member__contact:hover { color: var(--accent); border-color: var(--accent); } .member { display: flex; flex-direction: column; gap: 1rem; } .member__photo { aspect-ratio: 3 / 4; background: var(--sand-dark); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; position: relative; transition: background-color 0.5s var(--ease); } [data-theme="dark"] .member__photo { background: var(--navy-800); } .member:hover .member__photo { background: var(--orange); } /* Photograph fills the tile. grid-area pins it to the single cell so the parent's place-items:center can't shrink-wrap it. */ .member__photo img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; /* bias toward the face, not the torso */ transition: transform 0.7s var(--ease); } .member:hover .member__photo img { transform: scale(1.035); } /* Portraits are capped at every size — a 3:4 image filling a whole grid column dominates the page, and the taller it gets the worse it is on small screens. */ .member__photo { max-width: 260px; } @media (max-width: 1024px) { .member__photo { max-width: 180px; } } /* Single column: photo sits beside the text as a thumbnail. */ @media (max-width: 720px) { .member { display: grid; grid-template-columns: clamp(64px, 18vw, 100px) 1fr; gap: clamp(0.875rem, 3.5vw, 1.25rem); align-items: start; } .member__photo { max-width: none; } } .member__initials { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 500; letter-spacing: -0.04em; color: var(--muted); transition: color 0.5s var(--ease); } .member:hover .member__initials { color: var(--white); } .member__name { font-size: var(--fs-h4); letter-spacing: -0.03em; } .member__role { font-size: var(--fs-small); color: var(--muted); } /* Icon-only links, so each carries an aria-label in the markup. Padded to a ~44px tap target; the negative margin on the row keeps the first glyph optically flush with the name above it rather than indented by its own padding. The padding also supplies the gap between the icons, so there is no `gap` here — adding one would double the spacing. */ .member__socials { display: flex; align-items: center; margin-top: 0.6rem; margin-left: -0.7rem; } .member__social { display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem; color: var(--muted); transition: color 0.3s var(--ease), transform 0.3s var(--ease); } .member__social svg { width: 22px; height: 22px; } .member__social:hover { color: var(--accent); transform: translateY(-2px); } /* ---------- 19. Accordion (FAQ) ------------------------------------------ */ .accordion { border-top: 1px solid var(--rule); } .acc { border-bottom: 1px solid var(--rule); } .acc__btn { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: clamp(1.25rem, 2.5vh, 1.85rem); font-size: var(--fs-h4); letter-spacing: -0.03em; font-weight: 500; transition: color 0.35s var(--ease); } .acc__btn:hover { color: var(--accent); } .acc__icon { position: relative; width: 16px; height: 16px; flex: none; } .acc__icon::before, .acc__icon::after { content: ""; position: absolute; background: currentColor; transition: transform 0.45s var(--ease); } .acc__icon::before { top: 7.25px; left: 0; width: 16px; height: 1.5px; } .acc__icon::after { left: 7.25px; top: 0; width: 1.5px; height: 16px; } .acc.is-open .acc__icon::after { transform: scaleY(0); } .acc.is-open .acc__btn { color: var(--accent); } .acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); } .acc.is-open .acc__body { grid-template-rows: 1fr; } .acc__inner { overflow: hidden; } .acc__inner > div { padding-bottom: 1.75rem; color: var(--muted); max-width: 68ch; font-size: var(--fs-body); } /* ---------- 20. Contact form --------------------------------------------- */ .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .form { display: grid; gap: 1.5rem; } .field { display: grid; gap: 0.5rem; } .field label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.01em; } .field input, .field select, .field textarea { font: inherit; font-size: var(--fs-body); color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 0.85rem 0; border-radius: 0; transition: border-color 0.35s var(--ease); width: 100%; } .field textarea { resize: vertical; min-height: 120px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); } .field select option { color: #12144A; background: #fff; } .field ::placeholder { color: var(--muted); opacity: 0.7; } /* Consent checkbox. The box is nudged down to sit on the first line of the label rather than centring against a two-line block. */ .check { display: flex; align-items: flex-start; gap: 0.7rem; } .check input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0.15rem 0 0; accent-color: var(--orange); } .check label { font-size: var(--fs-small); line-height: 1.45; color: var(--muted); cursor: pointer; } /* Honeypot: off-screen rather than display:none, because some bots skip fields they can tell are hidden. Kept out of the tab order by tabindex="-1". */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__status { font-size: var(--fs-small); line-height: 1.4; margin: 0; min-height: 1.4em; /* reserve the line so the panel doesn't jump */ } .form__status.is-ok { color: var(--accent); } .form__status.is-error { color: var(--orange-dark); } .form.is-sending { opacity: 0.6; pointer-events: none; } .info-list { display: grid; gap: 0; border-top: 1px solid var(--rule); } .info-list__row { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap); padding-block: 1.5rem; border-bottom: 1px solid var(--rule); align-items: start; } .info-list__k { font-size: var(--fs-label); font-weight: 600; color: var(--muted); } .info-list__v { font-size: var(--fs-body); } .info-list__v a:hover { color: var(--accent); } /* ---------- 20b. Contact panels ------------------------------------------ */ .panel { border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.75rem); display: flex; flex-direction: column; } .panel__title { font-size: var(--fs-h3); letter-spacing: -0.03em; margin-bottom: 0.75rem; } .panel__text { color: var(--muted); font-size: var(--fs-small); margin-bottom: 1.75rem; max-width: 38ch; } .contact-links { border-top: 1px solid var(--rule); margin-top: auto; } .contact-link { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 1.05rem; border-bottom: 1px solid var(--rule); transition: color 0.3s var(--ease), padding-left 0.35s var(--ease); } .contact-link:hover { color: var(--accent); padding-left: 0.4rem; } .contact-link__k { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.01em; color: var(--muted); flex: none; } .contact-link:hover .contact-link__k { color: inherit; } .contact-link__v { font-size: var(--fs-body); font-weight: 500; text-align: right; word-break: break-word; } /* Below ~480px the label and the value can't sit on one line without breaking the email address mid-word, so stack them instead. */ @media (max-width: 480px) { .contact-link { display: grid; gap: 0.15rem; justify-items: start; } .contact-link__v { text-align: left; } } /* ---------- 20c. Legal prose --------------------------------------------- */ /* Long-form document body. Narrower measure than the rest of the site — legal text is read line by line, not scanned. */ .legal { max-width: 68ch; } .legal > * + * { margin-top: 1.15em; } .legal h2 { font-size: var(--fs-h3); letter-spacing: -0.03em; margin-top: clamp(2.75rem, 6vh, 4.5rem); padding-top: clamp(1.5rem, 3vh, 2.25rem); border-top: 1px solid var(--rule); } .legal h3 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.02em; margin-top: 2em; } .legal p, .legal li { font-size: var(--fs-body); line-height: 1.65; } .legal ul { list-style: disc; padding-left: 1.3em; } .legal ul li + li { margin-top: 0.5em; } .legal a { text-decoration: underline; text-underline-offset: 3px; } .legal a:hover { color: var(--accent); } .legal strong { font-weight: 600; } .legal__meta { font-size: var(--fs-small); color: var(--muted); } /* Plain-English summary box at the top */ .legal__tldr { border: 1px solid var(--rule); border-left: 3px solid var(--orange); border-radius: var(--radius); padding: clamp(1.25rem, 2.4vw, 1.85rem); background: rgba(255, 255, 255, 0.5); } .legal__tldr p { margin: 0; } .legal__tldr p + p { margin-top: 0.8em; } /* Placeholders the client still has to fill in. Deliberately loud — this should be impossible to publish by accident. */ .legal mark { background: var(--orange-soft); color: var(--navy); padding: 0.1em 0.35em; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(242, 103, 23, 0.45); } .legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); } .legal th, .legal td { text-align: left; vertical-align: top; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--rule); } .legal th { font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.01em; } @media (max-width: 560px) { .legal table, .legal thead, .legal tbody, .legal tr, .legal th, .legal td { display: block; } .legal thead { display: none; } .legal tr { padding-block: 0.9rem; border-bottom: 1px solid var(--rule); } .legal td { border: 0; padding: 0.15rem 0; } .legal td::before { content: attr(data-k) " — "; font-weight: 600; } } /* ---------- 21. CTA band ------------------------------------------------- */ .cta__title { font-size: clamp(2.25rem, 5.2vw, 5rem); letter-spacing: -0.045em; line-height: 0.98; max-width: 20ch; margin-bottom: clamp(2rem, 4vh, 3rem); } /* ---------- 22. Footer --------------------------------------------------- */ .footer { padding-top: clamp(3rem, 7vh, 5rem); padding-bottom: clamp(2.5rem, 6vh, 4rem); } .footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(4rem, 12vh, 9rem); } .footer__cols { display: grid; grid-template-columns: repeat(3, minmax(140px, auto)); gap: clamp(2rem, 5vw, 5rem); } .footer__col h4 { font-size: var(--fs-label); font-weight: 600; margin-bottom: 0.5rem; opacity: 0.65; } /* Padded to a ~44px tap target rather than the 23px the text alone gives. The negative inline margin keeps the text visually flush with the column. */ .footer__col a { font-size: var(--fs-small); font-weight: 500; display: inline-block; padding-block: 0.6rem; padding-inline: 0.25rem; margin-inline: -0.25rem; } .footer__col a:hover { text-decoration: underline; text-underline-offset: 4px; } .footer__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-size: var(--fs-small); } .footer__bar-links { display: flex; gap: 1.75rem; } .footer__bar-links a { display: inline-block; padding-block: 0.6rem; } .footer__bar-links a:hover { text-decoration: underline; text-underline-offset: 4px; } /* ---------- 23. Utilities ------------------------------------------------ */ .stack-sm > * + * { margin-top: 0.75rem; } .stack > * + * { margin-top: 1.5rem; } .stack-lg > * + * { margin-top: clamp(2rem, 4vh, 3rem); } .mt-xl { margin-top: clamp(2.5rem, 6vh, 4.5rem); } .mb-lg { margin-bottom: clamp(2rem, 5vh, 3.5rem); } .max-40 { max-width: 40ch; } .max-55 { max-width: 55ch; } .text-right { text-align: right; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------- 24. Responsive ----------------------------------------------- */ @media (max-width: 1180px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } .team-grid, .team-grid--3, .team-grid--4 { grid-template-columns: repeat(3, 1fr); } .stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1024px) { :root { --header-h: 72px; } .nav { display: none; } .burger { display: block; } .split { grid-template-columns: 1fr; gap: 1.5rem; } .quotes { grid-template-columns: 1fr; gap: 2.5rem; } .cards--3, .case-grid, .topics, .team-grid--3, .team-grid--4 { grid-template-columns: repeat(2, 1fr); } .topic:nth-child(3n) { border-right: 1px solid var(--rule); } .topic:nth-child(2n) { border-right: 0; } .tabs__panel.is-active { grid-template-columns: 1fr; } .step { grid-template-columns: 1fr; gap: 1.5rem; } .step__index { position: static; } .contact-layout { grid-template-columns: 1fr; } .hero__title { max-width: 11ch; } /* Media panel drops under the copy. The hero stops being a single-screen block here — it grows to fit both, which is what the phone layout below already does. */ .hero { min-height: auto; align-items: flex-start; padding-bottom: clamp(3rem, 7vh, 5rem); } .hero__inner { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vh, 4rem); } .hero__copy .hero__title { font-size: var(--fs-h1); } .hero__media { max-width: 620px; max-height: none; } } @media (max-width: 720px) { .pillar { grid-template-columns: 1fr; gap: 0.75rem; } .pillar__num { padding-top: 0; } .cards--3, .cards--2, .cards--4, .case-grid, .topics, .team-grid, .team-grid--3, .team-grid--4 { grid-template-columns: 1fr; } .topic { border-right: 0 !important; } .stats { grid-template-columns: 1fr; } .footer__top { flex-direction: column; } .footer__cols { grid-template-columns: repeat(2, 1fr); } .hero { min-height: auto; padding-top: calc(var(--header-h) + 5rem); padding-bottom: 4rem; } .hmedia__bar { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .hmedia__nav { align-self: stretch; justify-content: space-between; } .hmedia__arrow { width: 44px; height: 44px; } .hero__media { max-width: none; } .info-list__row { grid-template-columns: 1fr; gap: 0.4rem; } .btn { width: 100%; justify-content: space-between; } }