/* ========================================================================== Talvenue: shared styles (every tenant) Shared design system: tones (.tone-ink / .tone-ink2 / .tone-bone / .tone-stone / .tone-white) set --fg / --bg / --muted / --line / --accent, and every component reads those. A tenant's look comes from public/tenants//theme.css, loaded after this file: it declares @font-face rules and overrides the tokens in :root below (and may add small overrides). Never put tenant names or colors here. Sections: tokens (defaults) · base & components · platform additions (end of file). ========================================================================== */ /* Tokens (defaults: system fonts, a neutral palette; tenant themes override) ------------------------------ */ :root { --display: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --ink: #1D2733; --ink-2: #222E3B; --ink-3: #2A3846; --bone: #F4F3F0; --stone: #E8E6E1; --white: #FCFCFB; --text-d: #EEF0F2; --muted-d: #AEB7C0; --label-d: #9DAAB6; --text-l: #1A222B; --muted-l: #4E5964; --label-l: #53616E; --ember: #8FB7E3; --ember-l: #2B5C93; --wrap: 1440px; --gutter: clamp(20px, 4.6vw, 76px); --gap: clamp(16px, 2.2vw, 36px); --sec-y: clamp(96px, 11vw, 184px); --hdr-h: 76px; --ease: cubic-bezier(.22, .7, .12, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --fs-display: clamp(3.4rem, 1.15rem + 7.4vw, 9.6rem); --fs-h1: clamp(2.85rem, 1.45rem + 4.9vw, 6.75rem); --fs-h2: clamp(2.25rem, 1.35rem + 3.1vw, 4.6rem); --fs-h3: clamp(1.45rem, 1.2rem + .75vw, 2rem); --fs-lead: clamp(1.28rem, 1.06rem + .85vw, 1.8rem); --fs-manifesto: clamp(1.85rem, 1.05rem + 2.7vw, 3.85rem); --fs-body: 1.0625rem; --fs-small: .9375rem; --fs-micro: .72rem; } .tone-ink, .tone-ink2, body { --bg: var(--ink); --fg: var(--text-d); --muted: var(--muted-d); --label: var(--label-d); --accent: var(--ember); --line: rgba(238, 233, 223, .13); --line-2: rgba(238, 233, 223, .26); --btn-bg: var(--bone); --btn-fg: var(--ink); --btn-hover: #fff; } color-scheme: dark; } .tone-ink2 { --bg: var(--ink-2); } .tone-bone, .tone-stone, .tone-white { --bg: var(--bone); --fg: var(--text-l); --muted: var(--muted-l); --label: var(--label-l); --accent: var(--ember-l); --line: rgba(17, 24, 22, .13); --line-2: rgba(17, 24, 22, .3); --btn-bg: var(--ink); --btn-fg: var(--bone); --btn-hover: #24302d; --field-bg: var(--white); color-scheme: light; } .tone-stone { --bg: var(--stone); } .tone-white { --bg: var(--white); } [class*='tone-'] { background-color: var(--bg); color: var(--fg); } /* Base ------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: var(--ease); } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } body { margin: 0; background: var(--ink); color: var(--fg); font: 400 var(--fs-body)/1.65 var(--sans); font-feature-settings: 'kern', 'liga'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } main { display: block; } img, svg, video, canvas { display: block; max-width: 100%; } svg { flex: none; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } strong { font-weight: 600; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } ::selection { background: var(--ember); color: var(--ink); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } [hidden] { display: none !important; } address { font-style: normal; } abbr[title] { text-decoration: none; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .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; } .skip { position: fixed; left: 16px; top: -100px; z-index: 200; background: var(--bone); color: var(--ink); padding: 12px 18px; font-weight: 600; border-radius: 4px; } .skip:focus { top: 16px; } /* Grain on dark surfaces */ .grain { position: relative; isolation: isolate; } .grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .05; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .grain > * { position: relative; z-index: 1; } /* Type ------------------------------------------------------------------- */ .display, .h1, .h2, .h3, .lead, .manifesto, .statement, .serif { font-family: var(--display); font-weight: 300; font-feature-settings: 'kern', 'liga', 'pnum'; } .display { font-size: var(--fs-display); line-height: .9; letter-spacing: -.038em; } .h1 { font-size: var(--fs-h1); line-height: .94; letter-spacing: -.034em; } .h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -.03em; } .h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.018em; font-weight: 400; } .h4 { font: 600 1.0625rem/1.35 var(--sans); letter-spacing: -.005em; } .display em, .h1 em, .h2 em, .h3 em, .statement em, .manifesto em, .serif em { font-style: italic; color: var(--accent); } .lead { font-size: var(--fs-lead); line-height: 1.32; letter-spacing: -.012em; font-weight: 300; } .statement { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.75rem); line-height: 1.14; letter-spacing: -.022em; } .body-lg { font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); line-height: 1.6; } .muted { color: var(--muted); } .small { font-size: var(--fs-small); } .kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em 1.1em; font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--label); } .kicker__n { color: var(--accent); } .kicker > span + span::before { content: ''; display: inline-block; width: 16px; height: 1px; margin-right: 1.1em; background: currentColor; opacity: .55; vertical-align: .3em; } /* A kicker that wraps continues under its own text, not under the dash. */ .kicker > span + span { display: inline-flex; align-items: baseline; } .kicker > span + span::before { flex: none; align-self: flex-start; margin-top: .62em; } /* off the baseline, so the kicker keeps its text baseline */ .mono { font-family: var(--mono); font-feature-settings: 'tnum'; } .tnum { font-variant-numeric: tabular-nums; } .prose { max-width: 66ch; } .prose > * + * { margin-top: 1.1em; } .prose p, .prose li { color: var(--muted); } .prose strong { color: var(--fg); } .prose a, .link { color: var(--fg); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; transition: background-size .4s var(--ease), color .2s; } .prose a:hover, .link:hover { color: var(--accent); background-size: 0 1px; background-position: 100% 100%; } .prose--fg p, .prose--fg li, .prose .fg { color: var(--fg); } /* Icons */ .i { width: 1em; height: 1em; } .i-arrow { width: 1.05em; transition: transform .45s var(--ease-out); } /* Buttons ---------------------------------------------------------------- */ .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .btn { --h: 54px; display: inline-flex; align-items: center; justify-content: center; gap: .75em; min-height: var(--h); padding: 0 1.55em; border-radius: 999px; border: 1px solid transparent; font: 500 .95rem/1 var(--sans); letter-spacing: .005em; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .btn:hover .i-arrow, .link-go:hover .i-arrow, a:hover > .i-arrow, .stretch-parent:hover .i-arrow { transform: translateX(4px); } .btn--solid { background: var(--btn-bg); color: var(--btn-fg); } .btn--solid:hover { background: var(--btn-hover); } .btn--line { border-color: var(--line-2); color: var(--fg); } .btn--line:hover { border-color: var(--fg); } .btn--sm { --h: 42px; padding: 0 1.2em; font-size: .875rem; } .link-go { display: inline-flex; align-items: center; gap: .6em; font: 500 .95rem/1.2 var(--sans); color: var(--fg); padding-bottom: 6px; border-bottom: 1px solid var(--line-2); transition: border-color .3s, color .3s; } .link-go:hover { border-color: var(--fg); } .link-go .i-arrow { color: var(--accent); } /* Stretched links: the whole card is clickable, the accessible name stays short */ .stretch-parent { position: relative; } .stretch::after { content: ''; position: absolute; inset: 0; z-index: 2; } /* Header ----------------------------------------------------------------- */ .hdr { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--text-d); transition: transform .5s var(--ease), background-color .4s var(--ease), border-color .4s; border-bottom: 1px solid transparent; } .hdr.is-scrolled { background: rgba(12, 17, 16, .84); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: rgba(238, 233, 223, .08); } .hdr.is-hidden { transform: translateY(-100%); } .hdr:focus-within { transform: none; } .hdr__in { display: flex; align-items: center; gap: 28px; height: var(--hdr-h); } .brand { font: 400 1.7rem/1 var(--display); letter-spacing: -.02em; color: var(--text-d); margin-right: auto; padding: 6px 0; } .brand span { color: var(--ember); } .nav > ul { display: flex; align-items: center; gap: 4px; } .nav__top { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font: 450 .9375rem/1 var(--sans); color: rgba(238, 233, 223, .82); border-radius: 999px; transition: color .25s, background-color .25s; } .nav__top:hover, .nav__item:focus-within > .nav__top { color: #fff; } .nav__top[aria-current='page'], .nav__item.is-section > .nav__top { color: #fff; } .nav__top[aria-current='page']::before, .nav__item.is-section > .nav__top::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ember); margin-right: 2px; } .nav__item { position: relative; display: flex; align-items: center; } .nav__item:has(.nav__btn) > .nav__top { padding-right: 4px; } /* The disclosure button: click (or Enter/Space) opens the panel; hover opens it too, after a short delay. */ .nav__btn { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 6px; border-radius: 50%; color: rgba(238, 233, 223, .72); transition: color .2s, background-color .2s; } .nav__btn:hover, .nav__btn[aria-expanded='true'] { color: #fff; background: rgba(238, 233, 223, .08); } .nav__btn .i-chev { width: 9px; height: 9px; transition: transform .3s var(--ease); } .nav__btn[aria-expanded='true'] .i-chev, .nav__item:hover .nav__btn .i-chev { transform: rotate(180deg); } .drop { position: absolute; top: calc(100% + 10px); left: -12px; min-width: 300px; padding: 10px; background: rgba(17, 24, 22, .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(238, 233, 223, .1); border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s .35s; } .drop::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .nav__item:hover .drop { opacity: 1; visibility: visible; transform: none; transition-delay: .12s; } .nav__item.is-open .drop, .drop:focus-within { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .nav__item--partner .drop { left: auto; right: -12px; } .drop--partner { width: 720px; max-width: calc(100vw - 48px); column-gap: 6px; } .drop__intro { grid-column: 1 / -1; padding: 10px 14px 14px; margin-bottom: 4px; border-bottom: 1px solid rgba(238, 233, 223, .08); font-size: .875rem; line-height: 1.5; color: var(--muted-d); padding-right: 22%; } .drop__intro strong { display: block; font: 400 1.35rem/1.2 var(--display); letter-spacing: -.01em; color: var(--text-d); margin-bottom: 4px; } .drop__ext { color: var(--ember); } .drop .drop__all .drop__cta { display: inline-flex; justify-content: center; gap: 8px; padding: 0 18px; min-height: 40px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); } .drop .drop__all .drop__cta:hover, .drop .drop__all .drop__cta:focus-visible { background: var(--btn-hover); } .drop__all:has(.drop__cta) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; padding-top: 10px; } .drop__all:has(.drop__cta) .drop__cta { margin-left: auto; margin-right: 6px; } .drop__all:has(.drop__cta) a { white-space: nowrap; gap: 10px; } .drop--wide { min-width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .drop a { display: grid; grid-template-columns: 26px 1fr; gap: 2px 8px; padding: 12px 14px; border-radius: 9px; transition: background-color .2s; } .drop a:hover, .drop a:focus-visible { background: rgba(238, 233, 223, .06); } .drop a[aria-current='page'] { background: rgba(227, 154, 107, .1); } .drop__n { font: 500 .7rem/1.9 var(--mono); color: var(--ember); letter-spacing: .06em; } .drop__l { font: 500 .95rem/1.4 var(--sans); color: var(--text-d); } .drop__t { grid-column: 2; font-size: .8rem; line-height: 1.35; color: var(--muted-d); } .drop__all { grid-column: 1 / -1; border-top: 1px solid rgba(238, 233, 223, .08); margin-top: 6px; padding-top: 6px; } .drop__all a { display: flex; justify-content: space-between; align-items: center; font: 500 .875rem/1 var(--sans); color: var(--text-d); } .drop__all:has(a + a) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; } .hdr__cta { margin-left: 8px; } .menu-btn { display: none; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 18px; border: 1px solid rgba(238, 233, 223, .26); border-radius: 999px; font: 500 .875rem/1 var(--sans); color: var(--text-d); } .menu-btn__lines { width: 16px; height: 8px; position: relative; } .menu-btn__lines::before, .menu-btn__lines::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px; } .menu-btn__lines::before { top: 0; } .menu-btn__lines::after { bottom: 0; } /* Mobile menu */ .mmenu { position: fixed; inset: 0; z-index: 150; background: var(--ink); color: var(--text-d); display: flex; flex-direction: column; overflow-y: auto; opacity: 0; transition: opacity .35s var(--ease); } .mmenu.open { opacity: 1; } .mmenu__bar { display: flex; align-items: center; justify-content: space-between; height: var(--hdr-h); flex: none; } .mmenu__close { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border: 1px solid rgba(238, 233, 223, .26); border-radius: 999px; font: 500 .875rem/1 var(--sans); } .mmenu__close svg { width: 12px; height: 12px; } .mmenu nav { padding-top: 12px; padding-bottom: 32px; flex: 1; } .mmenu__list > li { border-bottom: 1px solid rgba(238, 233, 223, .1); } .mmenu__row { display: flex; align-items: center; justify-content: space-between; } .mmenu__link { display: block; padding: 18px 0; font: 300 2.2rem/1.05 var(--display); letter-spacing: -.025em; flex: 1; } .mmenu__link[aria-current='page'] { color: var(--ember); } .mmenu__toggle { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(238, 233, 223, .2); } .mmenu__toggle svg { width: 12px; height: 12px; transition: transform .3s var(--ease); } .mmenu__toggle[aria-expanded='true'] svg { transform: rotate(45deg); } .mmenu__sub { display: none; padding: 0 0 18px; } .mmenu__sub.open { display: block; } .mmenu__sub a { display: flex; gap: 14px; padding: 9px 0; font-size: 1.05rem; color: var(--muted-d); } .mmenu__sub a span { min-width: 2ch; font: 500 .72rem/2.1 var(--mono); color: var(--ember); } .mmenu__sub a b { font-weight: inherit; } .mmenu__sub a b span { font: inherit; color: var(--ember); } .mmenu__sub--rich a { padding: 12px 0; min-height: 48px; } .mmenu__sub a small { display: block; margin-top: 4px; font-size: .85rem; line-height: 1.4; color: var(--muted-d); opacity: .85; } .mmenu__sub a[aria-current='page'] { color: var(--text-d); } .mmenu__foot { padding-bottom: 32px; display: grid; gap: 18px; } .mmenu__foot .btn { width: 100%; } .mmenu__offices { display: flex; gap: 24px; font: 500 var(--fs-micro)/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--label-d); } /* Terrain ---------------------------------------------------------------- */ .terrain { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .terrain canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease); } .terrain canvas.ready { opacity: 1; } .terrain::before { /* ember glow, visible before (and without) JS */ content: ''; position: absolute; width: 70vmax; height: 70vmax; left: calc(var(--cx, .7) * 100% - 35vmax); top: calc(var(--cy, .5) * 100% - 35vmax); background: radial-gradient(closest-side, rgba(217, 120, 70, .16), rgba(217, 120, 70, .05) 45%, transparent 70%); } /* Hero ------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: var(--ink); color: var(--text-d); } .hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(12, 17, 16, .92) 0%, rgba(12, 17, 16, .6) 36%, rgba(12, 17, 16, 0) 66%), linear-gradient(0deg, rgba(12, 17, 16, .9) 0%, rgba(12, 17, 16, 0) 34%), linear-gradient(180deg, rgba(12, 17, 16, .7) 0%, rgba(12, 17, 16, 0) 18%); } .hero__in { position: relative; z-index: 2; } .hero--home { min-height: max(720px, 100svh); display: flex; flex-direction: column; } .hero--home .hero__in { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--hdr-h) + 64px); padding-bottom: clamp(40px, 5vw, 64px); } .hero--home .kicker { margin-bottom: clamp(24px, 3vw, 40px); } .hero__foot { display: grid; grid-template-columns: minmax(0, 34rem) auto; gap: 32px 64px; align-items: end; justify-content: space-between; margin-top: clamp(36px, 4.5vw, 64px); } .hero__lead { font-size: clamp(1.06rem, .98rem + .35vw, 1.25rem); line-height: 1.58; color: rgba(238, 233, 223, .78); max-width: 34rem; } .legend { position: relative; z-index: 2; border-top: 1px solid rgba(238, 233, 223, .12); } .legend__in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 40px; min-height: 64px; padding-block: 14px; font: 500 var(--fs-micro)/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--label-d); } .legend__in > :last-child { margin-left: auto; } .legend b { font-weight: 500; color: var(--text-d); } .legend__scale { display: inline-flex; align-items: center; gap: 12px; } .legend__scale i { display: inline-block; width: 64px; height: 6px; border: 1px solid rgba(238, 233, 223, .5); border-top: 0; } .scroll-cue { display: inline-flex; align-items: center; gap: 12px; color: var(--text-d); } .scroll-cue i { position: relative; width: 1px; height: 28px; background: rgba(238, 233, 223, .2); overflow: hidden; } .scroll-cue i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--ember); animation: cue 2.4s var(--ease) infinite; } @keyframes cue { to { top: 100%; } } .hero--page { min-height: clamp(560px, 82svh, 900px); display: flex; flex-direction: column; justify-content: flex-end; } .hero--page .hero__in { padding-top: calc(var(--hdr-h) + 72px); padding-bottom: clamp(48px, 6vw, 88px); } .hero--page .h1 { max-width: 15ch; margin-top: clamp(18px, 2vw, 28px); } .hero--page .hero__lead { margin-top: clamp(24px, 2.6vw, 36px); } .hero--page .actions { margin-top: 36px; } .hero--short { min-height: clamp(460px, 64svh, 680px); } .hero--legal { min-height: 0; } .hero--legal .hero__in { padding-top: calc(var(--hdr-h) + clamp(72px, 9vw, 140px)); padding-bottom: clamp(48px, 5vw, 80px); } .hero--legal .h1 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5.2rem); } .hero--legal::before { background: linear-gradient(90deg, rgba(12, 17, 16, .9), rgba(12, 17, 16, .3)); } .crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: clamp(28px, 4vw, 56px); font: 500 var(--fs-micro)/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--label-d); } .crumbs li { display: inline-flex; align-items: center; gap: 10px; } .crumbs li + li::before { content: '/'; opacity: .5; } .crumbs a { transition: color .2s; } .crumbs a:hover { color: var(--text-d); } .crumbs [aria-current] { color: var(--text-d); } .hero-facts { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin-top: clamp(44px, 5vw, 72px); border-top: 1px solid rgba(238, 233, 223, .14); } .hero-facts > div { padding: 18px 20px 0 0; } .hero-facts > div + div { padding-left: 20px; border-left: 1px solid rgba(238, 233, 223, .14); } .hero-facts dt { font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--label-d); } .hero-facts dd { margin-top: 10px; font: 300 clamp(1.3rem, 1.05rem + .9vw, 2rem)/1.1 var(--display); letter-spacing: -.02em; color: var(--text-d); } /* Motion control */ .motion { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--label-d); transition: color .2s; } .motion:hover { color: var(--text-d); } .motion .i { width: 9px; height: 9px; } .motion .i-play, .motion.is-paused .i-pause { display: none; } .motion.is-paused .i-play { display: block; } .hero__motion { position: absolute; z-index: 3; left: 0; right: 0; bottom: 18px; display: flex; justify-content: flex-end; pointer-events: none; } .hero__motion .motion { pointer-events: auto; } .legend__end { display: inline-flex; align-items: center; gap: 28px; } .hero--legal .hero__motion { display: none; } /* Sections --------------------------------------------------------------- */ .sec { position: relative; padding-block: var(--sec-y); } .sec--tight { padding-block: clamp(72px, 8vw, 128px); } .sec--flush-top { padding-top: 0; } .sec + .sec.same { padding-top: 0; } .sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 20px; padding-top: 22px; border-top: 1px solid var(--line); margin-bottom: clamp(48px, 6vw, 96px); } .sec-head .kicker { grid-column: 1 / span 3; padding-top: .7em; } .sec-head .h2 { grid-column: 4 / -1; max-width: 16ch; } .sec-head__intro { grid-column: 4 / span 7; max-width: 46rem; color: var(--muted); font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); line-height: 1.6; margin-top: 12px; } .sec-head__intro > * + * { margin-top: .8em; } .sec-head--plain { border-top: 0; padding-top: 0; } .sec-head--wide .h2 { max-width: 22ch; } .sec-head--center { display: block; text-align: center; border: 0; padding: 0; } .sec-head--center .kicker { justify-content: center; } .sec-head--center .h2 { margin: 18px auto 0; } .sec-head--center .sec-head__intro { margin: 22px auto 0; } /* 12-column helpers */ .grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(40px, 5vw, 72px); } .c-aside { grid-column: 1 / span 3; } .c-main { grid-column: 4 / -1; } .c-main-8 { grid-column: 4 / span 8; } .c-left { grid-column: 1 / span 6; } .c-right { grid-column: 7 / -1; } .c-right-5 { grid-column: 8 / -1; } .sticky { position: sticky; top: calc(var(--hdr-h) + 32px); align-self: start; } /* Manifesto (scroll-lit words) */ .manifesto { font-size: var(--fs-manifesto); line-height: 1.12; letter-spacing: -.026em; max-width: 24ch; } .manifesto .w { transition: opacity .5s var(--ease), color .5s var(--ease); } .js .manifesto[data-words].split .w { opacity: .2; } .js .manifesto[data-words].split .w.on { opacity: 1; } .manifesto em { font-style: italic; } /* Aims: three short statements under the manifesto */ .aims-label { margin-top: clamp(64px, 8vw, 128px); } .aims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 22px; } .aims > div { border-top: 1px solid var(--line-2); padding-top: 22px; } .aims h3 { margin-top: 0; } .aims p { margin-top: 12px; color: var(--muted); max-width: 34ch; } /* Stats */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 16px; padding: clamp(28px, 3.2vw, 48px) clamp(16px, 2vw, 32px) clamp(28px, 3.2vw, 44px) 0; } .stat + .stat { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); } .stat dd { font: 300 clamp(3.6rem, 2.4rem + 4.4vw, 7.4rem)/.85 var(--display); letter-spacing: -.05em; font-feature-settings: 'lnum', 'pnum'; } .stat dd sup { font-size: .32em; letter-spacing: 0; vertical-align: top; position: relative; top: .28em; margin-left: .08em; font-family: var(--mono); font-weight: 500; color: var(--accent); } .stat dt { color: var(--muted); font-size: var(--fs-small); line-height: 1.5; max-width: 26ch; } /* Pillar index (home / investments) */ .index { border-top: 1px solid var(--line-2); counter-reset: idx; } .index__row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr) 48px; column-gap: var(--gap); align-items: center; padding: clamp(22px, 2.4vw, 34px) 0; border-bottom: 1px solid var(--line-2); transition: color .35s; } .index__row::before { content: ''; position: absolute; inset: 0 calc(var(--gutter) * -0.5); background: var(--fg); opacity: 0; transform: scaleY(.6); transition: opacity .45s var(--ease), transform .45s var(--ease); z-index: 0; border-radius: 2px; } .index__row > * { position: relative; z-index: 1; } .index__n { font: 500 .78rem/1 var(--mono); letter-spacing: .08em; color: var(--accent); } .index__name { font: 300 clamp(1.9rem, 1.3rem + 2.1vw, 3.6rem)/1 var(--display); letter-spacing: -.03em; transition: transform .5s var(--ease-out), font-style .3s; } .index__desc { color: var(--muted); font-size: var(--fs-small); line-height: 1.5; max-width: 40ch; transition: color .35s; } .index__metric { display: grid; gap: 6px; } .index__metric b { font: 400 1.2rem/1.15 var(--display); letter-spacing: -.01em; } .index__metric span { font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--label); transition: color .35s; } .index__go { width: 48px; height: 48px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; justify-self: end; transition: background-color .35s, border-color .35s, color .35s; } .index__go svg { width: 16px; height: 16px; } @media (hover: hover) { .index__row:hover { color: var(--bg); } .index__row:hover::before { opacity: 1; transform: none; } .index__row:hover .index__name { transform: translateX(10px); font-style: italic; } .index__row:hover .index__desc, .index__row:hover .index__metric span { color: color-mix(in srgb, var(--bg) 72%, transparent); } .index__row:hover .index__n { color: var(--accent); } .index__row:hover .index__go { background: var(--accent); border-color: var(--accent); color: var(--ink); } } .index-note { margin-top: 28px; color: var(--muted); font-size: var(--fs-small); max-width: 62ch; } .index-note strong { color: var(--fg); } /* Principles / reasons: numbered columns with hairlines */ .cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } .cols > * { padding: 0 clamp(18px, 2.4vw, 40px); border-left: 1px solid var(--line); } .cols > :first-child { padding-left: 0; border-left: 0; } .cols > :last-child { padding-right: 0; } .col__n { display: block; font: 300 clamp(3rem, 2.2rem + 2.6vw, 5rem)/.9 var(--display); color: var(--accent); letter-spacing: -.02em; font-style: italic; } .col__n--mono { font: 500 .78rem/1 var(--mono); letter-spacing: .1em; font-style: normal; } .cols .h3 { margin-top: clamp(28px, 3vw, 48px); } .cols p { margin-top: 16px; color: var(--muted); } .cols p + p { margin-top: .8em; } .cols .tag { margin-top: 10px; } .cols--rows { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); row-gap: clamp(40px, 5vw, 72px); } .cols--rows > * { border-left: 0; padding: 26px 0 0; border-top: 1px solid var(--line-2); } .cols--rows { column-gap: var(--gap); } .tag { font: 500 var(--fs-micro)/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--label); } /* Steps (process) */ .steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: var(--gap); counter-reset: step; } .steps li { position: relative; padding-top: 34px; } .steps li::before { content: ''; position: absolute; left: 0; right: calc(var(--gap) * -1); top: 6px; height: 1px; background: var(--line-2); } .steps li:last-child::before { right: 0; } .steps li::after { content: ''; position: absolute; left: 0; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--accent); } .steps li:first-child::after { background: var(--accent); } .steps__n { font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: .12em; color: var(--label); } .steps h3 { margin-top: 18px; font: 400 1.45rem/1.15 var(--display); letter-spacing: -.015em; } .steps p { margin-top: 10px; color: var(--muted); font-size: var(--fs-small); line-height: 1.55; } .steps strong { color: var(--fg); font-weight: 600; } /* Vertical timeline */ .timeline { border-left: 1px solid var(--line-2); margin-left: 4px; } .timeline li { position: relative; padding: 0 0 30px 32px; } .timeline li:last-child { padding-bottom: 0; } .timeline li::before { content: ''; position: absolute; left: -5px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--accent); } .timeline li:first-child::before { background: var(--accent); } .timeline h4 { font: 600 1rem/1.4 var(--sans); } .timeline p { margin-top: 4px; color: var(--muted); font-size: var(--fs-small); } /* Quote */ .quote blockquote p { max-width: 19ch; } .quote blockquote p { font: 300 clamp(2.2rem, 1.3rem + 3.6vw, 5.4rem)/1.02 var(--display); letter-spacing: -.035em; text-indent: -.42em; } .quote blockquote em { font-style: italic; color: var(--accent); } .quote figcaption { margin-top: 36px; } /* Values (large rows) */ .values { border-top: 1px solid var(--line-2); } .value { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: clamp(32px, 4vw, 56px) 0; border-bottom: 1px solid var(--line-2); align-items: baseline; } .value__n { grid-column: 1 / span 1; font: 500 .78rem/1 var(--mono); color: var(--accent); letter-spacing: .08em; } .value__name { grid-column: 2 / span 4; font: 300 clamp(2.4rem, 1.6rem + 2.8vw, 4.6rem)/1 var(--display); letter-spacing: -.035em; } .value__body { grid-column: 7 / -1; color: var(--muted); font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); } /* Doors (two calls to action) */ .doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .door { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: clamp(380px, 34vw, 520px); padding: clamp(28px, 3.4vw, 56px); border-radius: 4px; isolation: isolate; } .door .terrain { opacity: .9; } .door__body { position: relative; z-index: 2; margin-top: auto; } .door .h2 { font-size: clamp(2.1rem, 1.4rem + 2.3vw, 3.7rem); max-width: 12ch; } .door p { margin-top: 18px; color: var(--muted); max-width: 40ch; } .door .link-go { margin-top: 30px; } .door .kicker { position: relative; z-index: 2; } .door--light { border: 1px solid var(--line-2); } .door::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, var(--bg) 6%, rgba(12, 17, 16, .4) 55%, transparent 90%); pointer-events: none; } .door--light::before { display: none; } @media (hover: hover) { .door:hover .i-arrow { transform: translateX(4px); } } /* Term sheet (criteria at a glance) */ .sheet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .sheet__head { grid-column: 1 / span 4; } .sheet__head .h2 { margin-top: 18px; max-width: 9ch; } .sheet__note { margin-top: 22px; color: var(--muted); max-width: 30ch; } .sheet__rows { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--line-2); } .sheet__row { padding: 22px 20px 26px 0; border-bottom: 1px solid var(--line); } .sheet__row:not(:nth-child(3n + 1)) { padding-left: 20px; border-left: 1px solid var(--line); } .sheet__row dt { font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--label); } .sheet__row dd { margin-top: 14px; } .sheet__v { display: block; font: 300 clamp(1.45rem, 1.15rem + 1vw, 2.15rem)/1.08 var(--display); letter-spacing: -.022em; font-feature-settings: 'lnum'; } .sheet__s { display: block; margin-top: 8px; color: var(--muted); font-size: .875rem; line-height: 1.45; } .sheet__foot { grid-column: 5 / -1; margin-top: 26px; display: flex; gap: 14px; align-items: baseline; color: var(--fg); font-size: var(--fs-small); } .sheet__foot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-1px); } /* Approach split */ .lede { font: 300 clamp(1.7rem, 1.15rem + 2vw, 3rem)/1.1 var(--display); letter-spacing: -.026em; max-width: 22ch; } .lede em { font-style: italic; color: var(--accent); } .levers { margin-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--line-2); } .levers li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px var(--gap); padding: 22px 0; border-bottom: 1px solid var(--line); } .levers .n { font: 500 .78rem/1.9 var(--mono); color: var(--accent); letter-spacing: .08em; } .levers h3 { font: 600 1.0625rem/1.4 var(--sans); } .levers p { grid-column: 2; color: var(--muted); } .callouts { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(40px, 4vw, 56px); } .callout { padding: 26px 28px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 4.5%, transparent); border: 1px solid var(--line); } .callout h3 { font: 400 1.35rem/1.2 var(--display); letter-spacing: -.012em; } .callout p { margin-top: 10px; color: var(--muted); font-size: var(--fs-small); } /* Sectors (where we invest) */ .sectors { border-top: 1px solid var(--line-2); } .sector { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: clamp(40px, 5vw, 80px) 0; border-bottom: 1px solid var(--line-2); } .sector__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--hdr-h) + 32px); } .sector__n { display: block; font: 300 italic clamp(3.2rem, 2.4rem + 2.8vw, 5.6rem)/.85 var(--display); color: var(--accent); letter-spacing: -.03em; } .sector__head .h3 { margin-top: 22px; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.5rem); max-width: 14ch; } .sector__head .tag { margin-top: 14px; } .sector__facts { grid-column: 6 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap); } .sector__facts > div { padding: 18px 0 26px; border-top: 1px solid var(--line); } .sector__facts > div.full { grid-column: 1 / -1; } .sector__facts dt { font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--label); } .sector__facts dd { margin-top: 10px; color: var(--muted); } .sector__facts dd strong { color: var(--fg); } .sector__facts dd p + p { margin-top: .7em; } /* Brokers (what to send + next steps) */ .desk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; } .desk__notes { grid-column: 1 / span 6; } .desk__steps { grid-column: 8 / -1; } .notes > p { color: var(--muted); } .notes > p + p { margin-top: 1em; } .notes strong { color: var(--fg); } .desk h3 { font: 400 1.6rem/1.15 var(--display); letter-spacing: -.015em; margin-bottom: 22px; } .desk__send { margin-top: 48px; } .dash li { position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid var(--line); color: var(--fg); } .dash li:first-child { border-top: 1px solid var(--line); } .dash li::before { content: ''; position: absolute; left: 0; top: 1.45em; width: 18px; height: 1px; background: var(--accent); } /* CTA band */ .cta { position: relative; overflow: hidden; padding-block: clamp(120px, 14vw, 220px); } .cta::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(12, 17, 16, .9) 0%, rgba(12, 17, 16, .5) 45%, rgba(12, 17, 16, .1) 100%); } .cta__in { position: relative; z-index: 2; } .cta .h2 { font-size: clamp(2.6rem, 1.5rem + 4.2vw, 6.2rem); max-width: 14ch; margin-top: 22px; letter-spacing: -.035em; } .cta__text { margin-top: 26px; max-width: 40rem; color: var(--muted); font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); } .cta .actions { margin-top: 40px; } /* Next page link */ .next { border-top: 1px solid var(--line); } .next a { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px 32px; padding-block: clamp(48px, 6vw, 96px); } .next__name { display: block; margin-top: 18px; font: 300 clamp(2.6rem, 1.4rem + 4.6vw, 7rem)/.95 var(--display); letter-spacing: -.04em; transition: transform .6s var(--ease-out); } .next__go { width: clamp(64px, 6vw, 96px); height: clamp(64px, 6vw, 96px); border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: background-color .4s, border-color .4s, color .4s; } .next__go svg { width: 22px; height: 22px; } @media (hover: hover) { .next a:hover .next__name { transform: translateX(12px); font-style: italic; } .next a:hover .next__go { background: var(--accent); border-color: var(--accent); color: var(--ink); } } /* Tracks (careers cards) */ .tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .track { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 40px); min-height: 400px; border: 1px solid var(--line-2); border-radius: 4px; transition: background-color .4s var(--ease), border-color .4s; } .track__n { font: 300 italic 3.2rem/.9 var(--display); color: var(--accent); } .track .h3 { margin-top: clamp(40px, 5vw, 72px); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem); } .track .tag { margin-top: 12px; } .track p { margin-top: 16px; color: var(--muted); } .track .link-go { margin-top: auto; align-self: flex-start; } .track > p:last-of-type { margin-bottom: 30px; } @media (hover: hover) { .track:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); border-color: var(--fg); } } .tracks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .track ul { margin-top: 22px; border-top: 1px solid var(--line); } .track li { padding: 11px 0 11px 28px; border-bottom: 1px solid var(--line); position: relative; font-size: var(--fs-small); } .track li::before { content: ''; position: absolute; left: 0; top: 1.25em; width: 14px; height: 1px; background: var(--accent); } /* Pillar plates (investments) */ .pillars { display: grid; gap: clamp(88px, 11vw, 176px); } .pillar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; scroll-margin-top: calc(var(--hdr-h) + 24px); } .pillar__plate { grid-column: 1 / span 5; grid-row: 1; position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--ink); color: var(--text-d); isolation: isolate; } .pillar__plate .terrain::before { display: none; } .pillar__plate::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(12, 17, 16, .85), transparent 40%); } .pillar__fig { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; display: flex; justify-content: space-between; gap: 12px; font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--label-d); } .pillar__num { position: absolute; z-index: 2; left: 22px; top: 14px; font: 300 italic clamp(4rem, 3rem + 4vw, 7.5rem)/1 var(--display); color: var(--ember); letter-spacing: -.04em; } .pillar__body { grid-column: 7 / -1; grid-row: 1; } .pillar:nth-child(even) .pillar__plate { grid-column: 8 / -1; } .pillar:nth-child(even) .pillar__body { grid-column: 1 / span 6; } .pillar__body .h2 { margin-top: 18px; } .pillar__sub { margin-top: 12px; font: 300 italic clamp(1.25rem, 1.1rem + .6vw, 1.7rem)/1.25 var(--display); color: var(--accent); letter-spacing: -.01em; } .pillar__role { margin-top: 30px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); } .pillar__role dt { font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--label); } .pillar__role dd { font-weight: 500; } .pillar__body .prose { margin-top: 26px; } .pillar__body .link-go { margin-top: 30px; } .listed { margin-top: clamp(88px, 10vw, 160px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-top: 26px; border-top: 1px solid var(--line-2); } .listed .kicker { grid-column: 1 / span 3; } .listed p:last-child { grid-column: 4 / span 7; font: 300 clamp(1.35rem, 1.1rem + .9vw, 1.9rem)/1.3 var(--display); letter-spacing: -.012em; } .hero-facts a { transition: color .2s; } .hero-facts a:hover { color: var(--ember); } /* Lists of short items (benefits, traits) */ .items { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(36px, 4vw, 64px) var(--gap); } .item { border-top: 1px solid var(--line-2); padding-top: 22px; } .item .h3, .item h3 { margin-top: 12px; } .item h3:not(.h3) { font: 400 1.5rem/1.15 var(--display); letter-spacing: -.015em; } .item p { margin-top: 10px; color: var(--muted); } .item .tag + h3 { margin-top: 14px; } /* Checklist with labels (program details, "what you'll do") */ .points { border-top: 1px solid var(--line-2); } .points li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 8px var(--gap); padding: 24px 0; border-bottom: 1px solid var(--line); } .points h3 { font: 400 1.4rem/1.2 var(--display); letter-spacing: -.012em; } .points p { color: var(--muted); } /* Directory table (teams) */ .dir { width: 100%; border-collapse: collapse; } .dir caption { text-align: left; } .dir th, .dir td { text-align: left; vertical-align: top; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--line); } .dir thead th { font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--label); border-bottom: 1px solid var(--line-2); padding-top: 0; } .dir tbody th[scope='row'] { font: 400 1.25rem/1.25 var(--display); letter-spacing: -.01em; width: 30%; } .dir td { color: var(--muted); } .dir td:last-child { white-space: nowrap; color: var(--fg); font: 500 .8rem/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding-right: 0; } .dir .dir__group th { padding-top: 44px; font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--line-2); } .dir tbody:first-of-type .dir__group th { padding-top: 26px; } /* FAQ */ .faq { border-top: 1px solid var(--line-2); } .faq details { border-bottom: 1px solid var(--line-2); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font: 400 clamp(1.25rem, 1.1rem + .5vw, 1.6rem)/1.25 var(--display); letter-spacing: -.012em; transition: color .25s; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--accent); } .faq__icon { position: relative; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 50%; flex: none; transition: transform .4s var(--ease), background-color .3s, border-color .3s; } .faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: currentColor; translate: -50% -50%; } .faq__icon::after { rotate: 90deg; transition: rotate .4s var(--ease); } .faq details[open] .faq__icon { background: var(--fg); border-color: var(--fg); color: var(--bg); } .faq details[open] .faq__icon::after { rotate: 0deg; } .faq__a { padding: 0 0 30px; max-width: 64ch; color: var(--muted); } .faq__a p + p { margin-top: .8em; } .faq__a a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* Offices */ .offices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .office { border-top: 1px solid var(--line-2); padding-top: 26px; } .office__top { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; } .office__city { font: 300 clamp(2.4rem, 1.6rem + 2.6vw, 4.2rem)/1 var(--display); letter-spacing: -.035em; } .clock { font: 500 .8rem/1 var(--mono); letter-spacing: .08em; color: var(--label); white-space: nowrap; } .clock b { font-weight: 500; color: var(--fg); } .office p { margin-top: 22px; color: var(--muted); max-width: 46ch; } .office address { margin-top: 26px; display: grid; gap: 4px; justify-items: start; } .office .coords { margin-top: 18px; } /* One office: a single full-width card, its description beside the address rather than a half-empty two-column grid. */ .offices--one { grid-template-columns: 1fr; } .offices--one .office { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); align-items: start; } .offices--one .office__top { grid-column: 1 / -1; } .offices--one .office > p:not(.coords) { grid-column: 1; grid-row: 2 / span 2; } .offices--one .office address { grid-column: 2; margin-top: 22px; } .offices--one .office .coords { grid-column: 2; } /* Forms ------------------------------------------------------------------ */ .form-shell { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; } .form-shell__aside { grid-column: 1 / span 4; } .form-shell__main { grid-column: 6 / -1; } .form-card { background: var(--white); color: var(--text-l); border-radius: 6px; padding: clamp(24px, 3.4vw, 56px); border: 1px solid rgba(17, 24, 22, .08); box-shadow: 0 40px 80px -48px rgba(17, 24, 22, .35); } .form-card__head { margin-bottom: 36px; } .form-card__head .h3 { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); } .form-card__head p { margin-top: 10px; color: var(--muted-l); font-size: var(--fs-small); } .form { display: block; } .form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; } .form .full { grid-column: 1 / -1; } .field { margin: 0 0 26px; padding: 0; border: 0; min-width: 0; } .field > label, .field > legend { display: block; margin-bottom: 9px; padding: 0; font: 600 .875rem/1.35 var(--sans); color: var(--text-l); } .req { color: var(--ember-l); margin-left: 3px; } .opt { margin-left: 6px; font-weight: 400; color: var(--muted-l); } .box-in { position: relative; display: flex; align-items: center; background: var(--white); border: 1px solid rgba(17, 24, 22, .22); border-radius: 4px; transition: border-color .2s, box-shadow .2s; } .box-in:hover { border-color: rgba(17, 24, 22, .45); } .box-in:focus-within { border-color: var(--text-l); box-shadow: 0 0 0 2px var(--ember-l); } /* a solid 2px ring at 5.6:1 (WCAG 2.4.13), not a faint glow */ .box-in input, .box-in select, .box-in textarea { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; padding: 14px 15px; font-size: 1rem; line-height: 1.4; color: var(--text-l); outline: none; border-radius: 4px; } .box-in select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; } .box-in .chev { position: absolute; right: 15px; top: 50%; translate: 0 -50%; width: 12px; height: 12px; pointer-events: none; color: var(--muted-l); } .box-in--area textarea { min-height: 160px; resize: vertical; } .box-in input::placeholder, .box-in textarea::placeholder { color: #6A736F; } .phone .cc { position: relative; display: flex; align-items: center; gap: 7px; padding: 0 12px 0 14px; align-self: stretch; border-right: 1px solid rgba(17, 24, 22, .14); } .phone .cc img { width: 20px; height: auto; border-radius: 2px; } .phone .cc .dial { font-size: .95rem; color: var(--text-l); font-variant-numeric: tabular-nums; } .phone .cc .chev { position: static; translate: none; width: 10px; height: 10px; } .phone .cc select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; } .hint { margin-top: 8px; font-size: .84rem; line-height: 1.5; color: var(--muted-l); } .hint a { color: var(--text-l); text-decoration: underline; text-underline-offset: 2px; } .error { display: none; margin-top: 8px; font-size: .84rem; font-weight: 600; color: #A3311F; } .field.invalid .error { display: block; } .field.invalid .box-in { border-color: #A3311F; } .field.invalid .choice > span { border-color: rgba(163, 49, 31, .55); } .choices { display: grid; grid-template-columns: 1fr; gap: 8px; } .choices--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .choice { position: relative; display: grid; cursor: pointer; } .choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .choice > span { display: grid; grid-template-columns: 18px 1fr; column-gap: 14px; padding: 15px 16px; border: 1px solid rgba(17, 24, 22, .18); border-radius: 4px; transition: border-color .2s, background-color .2s; } .choice > span::before { content: ''; grid-row: 1 / span 2; width: 18px; height: 18px; margin-top: 2px; border: 1px solid rgba(17, 24, 22, .4); border-radius: 50%; transition: border-color .2s, box-shadow .2s, background-color .2s; } .choice strong { font-weight: 600; font-size: .95rem; line-height: 1.4; } .choice small { color: var(--muted-l); font-size: .84rem; line-height: 1.45; } .choice:hover > span { border-color: rgba(17, 24, 22, .45); } .choice input:checked + span { border-color: var(--text-l); background: rgba(17, 24, 22, .035); } .choice input:checked + span::before { border-color: var(--text-l); background: var(--text-l); box-shadow: inset 0 0 0 4px var(--white); } .choice input:focus-visible + span { outline: 2px solid var(--ember-l); outline-offset: 2px; } .careers-note .hint { margin: -10px 0 22px; } .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } .ts { margin: 6px 0 18px; min-height: 65px; } .consent { font-size: .84rem; line-height: 1.55; color: var(--muted-l); max-width: 60ch; } .consent a { color: var(--text-l); text-decoration: underline; text-underline-offset: 2px; } .submit { margin-top: 26px; display: inline-flex; align-items: center; gap: .75em; min-height: 56px; padding: 0 1.8em; border-radius: 999px; background: var(--ink); color: var(--bone); font: 500 1rem/1 var(--sans); transition: background-color .3s var(--ease); } .submit:hover { background: #24302d; } .submit:hover .i-arrow { transform: translateX(4px); } .submit:disabled { opacity: .6; cursor: progress; } .status { display: none; margin-top: 22px; padding: 18px 20px; border-radius: 4px; font-size: .95rem; } .status.show { display: block; } .status--ok { background: #E6EDE7; border: 1px solid #A9BFB0; color: #173322; } .status--err { background: #F6E4DE; border: 1px solid #DDA08E; color: #6B1F10; } .status h3 { font: 400 1.4rem/1.2 var(--display); margin-bottom: 6px; } .status p + p { margin-top: .5em; } /* Legal documents -------------------------------------------------------- */ .legal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .legal__toc { grid-column: 1 / span 3; } .legal__toc .sticky { padding-top: 6px; } .legal__body { grid-column: 5 / span 7; max-width: 72ch; } .toc { border-top: 1px solid var(--line-2); margin-top: 16px; } .toc li { border-bottom: 1px solid var(--line); } .toc a { display: block; padding: 10px 0; font-size: .9rem; color: var(--muted); transition: color .2s; } .toc a:hover { color: var(--fg); } .legal__body .updated { font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--label); margin-bottom: 28px; } .legal__body > p, .legal__body li { color: var(--muted); } .legal__body > * + * { margin-top: 1.1em; } .legal__body h2 { font: 400 clamp(1.6rem, 1.3rem + 1vw, 2.2rem)/1.15 var(--display); letter-spacing: -.02em; color: var(--fg); margin-top: 2.4em; padding-top: 1.1em; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hdr-h) + 24px); } .legal__body h3 { font: 600 1.05rem/1.4 var(--sans); color: var(--fg); margin-top: 1.8em; } .legal__body ul { display: grid; gap: .7em; } .legal__body ul li { position: relative; padding-left: 26px; } .legal__body ul li::before { content: ''; position: absolute; left: 0; top: .8em; width: 12px; height: 1px; background: var(--accent); } .legal__body strong { color: var(--fg); } .legal__body a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .legal__body a:hover { color: var(--accent); } .legal__body address { color: var(--muted); } .legal__body .legal-nav { display: none; } /* Footer ----------------------------------------------------------------- */ .ftr { position: relative; overflow: hidden; padding-top: clamp(80px, 9vw, 140px); } .ftr__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; } .ftr__intro { grid-column: 1 / span 4; } .ftr__intro p { font: 300 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.18 var(--display); letter-spacing: -.02em; max-width: 18ch; } .ftr__intro .actions { margin-top: 32px; } .ftr__nav { grid-column: 6 / span 4; display: grid; grid-template-columns: 1fr 1fr; gap: 32px var(--gap); } .ftr h2 { font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--label-d); margin-bottom: 18px; } .ftr__nav li + li { margin-top: 10px; } .ftr__nav a, .ftr__offices a { color: rgba(238, 233, 223, .78); transition: color .2s; } .ftr__nav a:hover, .ftr__offices a:hover { color: #fff; } .ftr__offices { grid-column: 10 / -1; display: grid; gap: 30px; align-content: start; } .ftr__offices address { color: rgba(238, 233, 223, .78); font-size: var(--fs-small); line-height: 1.6; } .ftr__offices .clock { display: block; margin-bottom: 10px; } .ftr__city { display: block; color: var(--text-d); font-weight: 600; font-size: 1rem; margin-bottom: 4px; } .ftr__mark { margin-top: clamp(64px, 8vw, 128px); font: 300 clamp(5rem, 1rem + 21.6vw, 25rem)/.74 var(--display); letter-spacing: -.055em; color: rgba(238, 233, 223, .075); white-space: nowrap; user-select: none; transform: translateX(-.045em); } .ftr__mark span { color: var(--ember); } .ftr__legal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 20px; border-top: 1px solid rgba(238, 233, 223, .12); padding-block: 32px 40px; margin-top: clamp(28px, 3vw, 44px); font-size: .82rem; color: var(--muted-d); } .ftr__disclaimer { grid-column: 1 / span 7; line-height: 1.6; max-width: 80ch; } .ftr__meta { grid-column: 9 / -1; display: grid; gap: 14px; justify-items: end; text-align: right; } .ftr__meta ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; } .ftr__meta a { color: rgba(238, 233, 223, .78); } .ftr__meta a:hover { color: #fff; } .ftr__socials { display: inline-flex; flex-wrap: wrap; gap: 8px 22px; } .ftr__social { display: inline-flex; align-items: center; gap: 10px; } .ftr__social svg { width: 16px; height: 16px; } .to-top { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(17, 24, 22, .9); color: var(--text-d); border: 1px solid rgba(238, 233, 223, .18); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .to-top.show { opacity: 1; transform: none; pointer-events: auto; } /* Hidden: not tappable, not focusable, not read (visibility switches after the fade; site.js also sets aria-hidden) */ .to-top:not(.show) { visibility: hidden; transition: opacity .3s, transform .3s var(--ease), visibility 0s linear .3s; } @media (prefers-reduced-motion: reduce) { .to-top, .to-top:not(.show) { transition: none; transform: none; } } .to-top svg { width: 16px; height: 16px; } /* 404 */ .lost { min-height: 100svh; display: flex; align-items: flex-end; } .lost .hero__in { padding-bottom: clamp(56px, 8vw, 120px); } .lost .display { max-width: 9ch; } .lost .hero__lead { margin-top: 32px; } .lost .actions { margin-top: 36px; } /* Counts and delays set by the components */ .n2 { --n: 2; } .n3 { --n: 3; } .n4 { --n: 4; } .n5 { --n: 5; } .n6 { --n: 6; } [data-d='1'] { --d: 1; } [data-d='2'] { --d: 2; } [data-d='3'] { --d: 3; } [data-d='4'] { --d: 4; } [data-d='5'] { --d: 5; } [data-d='6'] { --d: 6; } .nav__item.is-closed .drop { opacity: 0 !important; visibility: hidden !important; } /* Misc layout helpers */ .mt-s { margin-top: 20px; } .mt-m { margin-top: clamp(32px, 3.4vw, 48px); } .mt-l { margin-top: clamp(56px, 6vw, 96px); } .mt-xl { margin-top: clamp(80px, 9vw, 144px); } .max-40 { max-width: 40rem; } .max-50 { max-width: 50rem; } .rule { border: 0; border-top: 1px solid var(--line); margin: 0; } .center { text-align: center; } /* Reveal ----------------------------------------------------------------- */ .js .rv { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); } .js .rv.in { opacity: 1; transform: none; } .hero .rise { opacity: 0; transform: translateY(24px); animation: rise 1.2s var(--ease-out) forwards; animation-delay: calc(120ms + var(--d, 0) * 110ms); } .hero .rise-line { display: block; overflow: visible; padding-bottom: .08em; margin-bottom: -.08em; padding-top: .12em; margin-top: -.12em; } /* headroom for ascenders at line-height .9 */ .hero .rise-line > span { display: block; transform: translateY(105%); animation: line 1.3s var(--ease-out) forwards; animation-delay: calc(80ms + var(--d, 0) * 120ms); } @keyframes rise { to { opacity: 1; transform: none; } } /* The h1, the lead and the home hero foot are the largest-contentful-paint candidates. They rise from a visible, half-faded start (opacity 0 would hide them from first paint until the animation ends), a little sooner. The display lines on the home page are never masked: they start fully readable, a little low and slightly faded, and settle in under a second, so the headline can be read at every moment of the entrance (also on phones). */ .hero .h1.rise, .hero .hero__lead.rise, .hero .hero__foot.rise { animation-name: rise-lcp; animation-duration: 1s; animation-fill-mode: both; animation-delay: calc(60ms + var(--d, 0) * 70ms); } @keyframes rise-lcp { from { opacity: .75; transform: translateY(12px); } to { opacity: 1; transform: none; } } .hero .rise-line > span { transform: translateY(.14em); animation-fill-mode: both; animation-name: line-lcp; animation-duration: .8s; animation-delay: calc(40ms + var(--d, 0) * 80ms); } @keyframes line-lcp { from { transform: translateY(.14em); opacity: .85; } to { transform: none; opacity: 1; } } @keyframes line { to { transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js .rv, .hero .rise, .hero .rise-line > span, .hero .h1.rise, .hero .hero__lead.rise, .hero .hero__foot.rise { opacity: 1; transform: none; animation: none; } .js .manifesto[data-words].split .w { opacity: 1; } } /* Responsive ------------------------------------------------------------- */ @media (max-width: 1180px) { .nav { display: none; } .hdr__cta { display: none; } .menu-btn { display: inline-flex; } .index__row { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr) 48px; row-gap: 10px; } .index__desc { grid-column: 2 / 4; grid-row: 2; } .index__metric { grid-column: 3; grid-row: 1; } .index__go { grid-column: 4; grid-row: 1 / span 2; } .sheet__head { grid-column: 1 / -1; margin-bottom: 40px; } .sheet__head .h2 { max-width: none; } .sheet__rows, .sheet__foot { grid-column: 1 / -1; } .ftr__intro { grid-column: 1 / -1; } .ftr__nav { grid-column: 1 / span 7; } .ftr__offices { grid-column: 8 / -1; } .co-grid, .routes { grid-template-columns: 1fr 1fr; } } @media (max-width: 960px) { :root { --hdr-h: 68px; } .sec-head { display: block; } .sec-head .kicker { padding-top: 0; } .sec-head .h2 { margin-top: 22px; } .sec-head__intro { margin-top: 22px; } .grid12 > [class^='c-'], .grid12 > [class*=' c-'] { grid-column: 1 / -1; } .sticky { position: static; } .hero__foot { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { padding-left: 0; border-left: 0; } .stat:nth-child(n + 3) { border-top: 1px solid var(--line); } .aims { grid-template-columns: 1fr; gap: 36px; } .cols, .cols--rows { grid-template-columns: 1fr; row-gap: 48px; } .cols > * { padding: 0; border-left: 0; } .cols > * + * { padding-top: 40px; border-top: 1px solid var(--line); } .cols--rows > * + * { padding-top: 26px; } .steps { grid-template-columns: 1fr; row-gap: 0; border-left: 1px solid var(--line-2); margin-left: 4px; } .steps li { padding: 0 0 34px 32px; } .steps li::before { display: none; } .steps li::after { left: -5px; top: 4px; } .steps h3 { margin-top: 10px; } .value { grid-template-columns: 1fr; row-gap: 14px; } .value__n, .value__name, .value__body { grid-column: 1; } .doors { grid-template-columns: 1fr; } .sheet__rows { --n: 2 !important; } .sheet__row:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; } .sheet__row:nth-child(2n) { padding-left: 18px; border-left: 1px solid var(--line); } .sector { display: block; } .sector__head { position: static; margin-bottom: 28px; } .desk { display: block; } .desk__steps { margin-top: 64px; } .callouts { grid-template-columns: 1fr; } .tracks, .tracks--2 { grid-template-columns: 1fr; } .pillar { display: block; } .pillar__plate { aspect-ratio: 16 / 10; margin-bottom: 36px; } .listed { display: block; } .listed p:last-child { margin-top: 16px; } .track { min-height: 0; } .items { grid-template-columns: 1fr 1fr; } .points li { grid-template-columns: 1fr; } .offices { grid-template-columns: 1fr; row-gap: 56px; } .offices--one .office { display: block; } .offices--one .office address { margin-top: 26px; } .form-shell { display: flex; flex-direction: column; } .form-shell__main { order: -1; margin-bottom: 72px; } /* The form card comes first once the layout stacks, ahead of its section's "01": its "02" would read as a missing step, so the card's number (and the dash after it) is dropped here. */ .form-card__head .kicker__n { display: none; } .form-card__head .kicker__n + span::before { display: none; } .legal { display: block; } .legal__toc { margin-bottom: 48px; } .ftr__nav, .ftr__offices, .ftr__disclaimer, .ftr__meta { grid-column: 1 / -1; } .ftr__meta { justify-items: start; text-align: left; } .ftr__meta ul { justify-content: flex-start; } .hero-facts { grid-template-columns: 1fr 1fr; } .hero-facts > div:nth-child(3) { padding-left: 0; border-left: 0; } .hero-facts > div:nth-child(n + 3) { border-top: 1px solid rgba(238, 233, 223, .14); margin-top: 18px; } .dir thead { display: none; } .dir, .dir tbody, .dir tr, .dir th, .dir td { display: block; width: auto !important; } .dir tr { padding: 18px 0; border-bottom: 1px solid var(--line); } .dir th, .dir td { padding: 0; border: 0; } .dir td { margin-top: 8px; } .dir td:last-child { margin-top: 10px; } .dir .dir__group { padding: 0; border: 0; } .dir .dir__group th { padding: 40px 0 14px; border-bottom: 1px solid var(--line-2); } } @media (max-width: 640px) { :root { --fs-body: 1rem; } .hdr .brand { font-size: 1.5rem; } .hero::before { background: linear-gradient(0deg, rgba(12, 17, 16, .96) 0%, rgba(12, 17, 16, .72) 48%, rgba(12, 17, 16, .1) 82%), linear-gradient(180deg, rgba(12, 17, 16, .6) 0%, rgba(12, 17, 16, 0) 16%); } .hero--home .display { font-size: clamp(3.1rem, 1.6rem + 7.6vw, 4.6rem); } .legend__in { font-size: .66rem; gap: 8px 22px; } .legend__in > .hide-sm { display: none; } .actions { width: 100%; } .actions .btn { flex: 1 1 auto; } .stats { grid-template-columns: 1fr 1fr; } .index__row { grid-template-columns: 36px minmax(0, 1fr) 40px; } .index__metric { grid-column: 2; grid-row: 2; } .index__desc { grid-column: 2; grid-row: 3; } .index__go { grid-column: 3; grid-row: 1; width: 40px; height: 40px; } .items { grid-template-columns: 1fr; } .sheet__rows { --n: 1 !important; grid-template-columns: 1fr; } .sheet__row:nth-child(2n) { padding-left: 0; border-left: 0; } .sector__facts { grid-template-columns: 1fr; } .form .grid { grid-template-columns: 1fr; } .choices--row { grid-template-columns: 1fr; } .hero-facts { grid-template-columns: 1fr 1fr; } .next a { grid-template-columns: 1fr; } .next__go { display: none; } .ftr__nav { grid-template-columns: 1fr 1fr; } .to-top { right: 14px; bottom: 14px; } .co-grid, .routes { grid-template-columns: 1fr; } .route { min-height: 0; } } @media print { .hdr, .mmenu, .to-top, .terrain, .ftr__mark, .actions, .cta, .next, .hero__motion, .motion, .skip { display: none !important; } body, [class*='tone-'], .hero { background: #fff !important; color: #000 !important; } /* Text styled for dark sections (hero lead, ink sections) would print pale grey on white. */ body * { color: #111 !important; border-color: #bbb !important; box-shadow: none !important; text-shadow: none !important; } em, .kicker__n, .sector__n { color: #8a3d1f !important; } .hero::before, .grain::after { display: none; } .hero--page, .hero--home { min-height: 0; } .hero__in { padding-block: 0 12px !important; } .sec { padding-block: 28px !important; } .js .rv, .js [data-stagger] > * { opacity: 1 !important; transform: none !important; } .sheet__row, .sector, .item, .faq, .timeline li, .callout { break-inside: avoid; } h1, h2, h3, .sec-head { break-after: avoid; } /* Where printed criteria came from. */ .fit-sec { display: none !important; } /* the interactive fit check prints as empty inputs */ } /* ---- FAQ: keep the "+" icon clear of the fixed back-to-top button (.to-top: 48px, 20px from the edge; 14px at ≤640px) ---- */ :root { --to-top-reach: 76px; } @media (max-width: 640px) { :root { --to-top-reach: 70px; } } .faq summary { padding-inline-end: max(0px, calc(var(--to-top-reach) - var(--gutter) - max(0px, (100vw - var(--wrap)) / 2))); } /* ---- Line breaks: balanced headings and FAQ questions, no one-word last lines in running text ---- */ /* Not the headings set line by line in .rise-line masks (home hero, 404), whose breaks are chosen by hand. */ h2, h3, .h1, .h2, .h3, .display, .faq summary > span:first-child, .gloss__item dt, .sheet__v, .crit-table__v { text-wrap: balance; } .display:has(.rise-line), h1:has(.rise-line) { text-wrap: wrap; } p, .lead, .hero__lead, .cta__text, .faq__a p, li { text-wrap: pretty; } .kicker { text-wrap: wrap; } /* mono labels keep their usual breaks */ /* ---- form drafts & states ---- */ /* Draft recovery notice (the [data-draft-note] live region is empty and takes no space until site.js fills it). */ .draft-note__box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 0 0 28px; padding: 14px 16px; border: 1px solid rgba(17, 24, 22, .16); border-left: 3px solid var(--ember-l); border-radius: 4px; background: #F7F4EE; color: var(--text-l); font-size: .92rem; line-height: 1.5; } .draft-note__box p { flex: 1 1 16rem; min-width: 0; } .draft-note__reset { flex: none; min-height: 44px; padding: 0 16px; border: 1px solid rgba(17, 24, 22, .35); border-radius: 999px; background: var(--white); color: var(--text-l); font: 600 .875rem/1 var(--sans); cursor: pointer; transition: border-color .2s, background-color .2s; } .draft-note__reset:hover { border-color: var(--text-l); background: rgba(17, 24, 22, .04); } .draft-note__reset:focus-visible { outline: 2px solid var(--ember-l); outline-offset: 2px; } .draft-note__done { margin: 0 0 22px; font-size: .84rem; color: var(--muted-l); } /* "Your answers are saved on this device until you send them." */ .draft-device { margin-top: 10px; font-size: .84rem; line-height: 1.55; color: var(--muted-l); max-width: 60ch; } /* Offline: the answers are safe, so a calmer tone than an error. */ .status--warn { background: #F6EEDD; border: 1px solid #D9C08E; color: #4A3510; } /* Turnstile: api.js didn't load (message instead of an empty gap); a solved widget left too wide after rotating. */ .ts.ts--failed { min-height: 0; } .ts-fail { font-size: .84rem; line-height: 1.55; color: #6B1F10; max-width: 60ch; } .ts.ts--clip { max-width: 100%; overflow: hidden; } /* Sending: the button stays focusable (aria-disabled) and a quiet "Sending…" line shows in the status region. */ .submit[aria-disabled="true"] { opacity: .6; cursor: progress; } .status--sending { background: transparent; border: 1px solid rgba(17, 24, 22, .14); color: var(--muted-l); } /* No JavaScript: the