/* ===== fonts/fonts.css ===== */
/* DM Sans and Newsreader, self-hosted: the files Google Fonts served, kept
here so a visitor's IP never reaches Google before they have consented
to anything. Same families, axes and unicode ranges as the link the
static pages carried. */
/* DM Sans normal 400 latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/DMSans-normal-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans normal 500 latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/DMSans-normal-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Newsreader italic 400 latin */
@font-face {
font-family: 'Newsreader';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/fonts/Newsreader-italic-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Newsreader normal 400 latin */
@font-face {
font-family: 'Newsreader';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/Newsreader-normal-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== assets/css/style.css ===== */
/* ==========================================================================
Hilbert Group — Design System
Fonts: Newsreader (headings) + DM Sans (body) via Google Fonts
Built for WordPress + Elementor (section > container > widgets structure)
========================================================================== */
/* ---------- Design tokens ---------- */
:root {
/* Main palette */
--color-black: #090909;
--color-white: #ffffff;
--color-night: #17223a; /* Main/Night */
--color-forest: #173a2c; /* Main/Forest */
--color-almost-white: #efefec; /* Main/Almost White */
--color-surface-1: #141414; /* Surface/Level-1 */
--color-dark-2: #1d2023;
/* Additional */
--color-light-green: #d9e3de;
--color-moss: #516e5f;
--color-light-blue: #d0dceb;
--color-deep-blue: #192c45;
--color-purple: #3d4f7c;
--color-matcha: #deeadc;
/* Blue tints */
--color-blue-5: #e4e5e3;
--color-blue-10: rgba(22, 35, 58, 0.1);
--color-blue-40: rgba(23, 34, 58, 0.4);
--color-blue-50: rgba(23, 34, 58, 0.5);
/* Green tints */
--color-green-5: rgba(23, 58, 44, 0.05);
--color-green-10: rgba(23, 58, 44, 0.1);
--color-green-50: rgba(23, 58, 44, 0.5);
/* Gray tints */
--color-gray-10: rgba(239, 239, 236, 0.1);
--color-gray-20: #c2d1c3;
--color-gray-40: rgba(239, 239, 236, 0.5);
--color-gray-50: rgba(121, 125, 125, 0.5);
--color-gray-60: rgba(222, 234, 220, 0.6);
/* System */
--color-error: #952f2f;
/* Typography */
--font-heading: 'Newsreader', Georgia, 'Times New Roman', serif;
--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Layout / grid */
--container-max: 1440px;
--container-pad: 32px; /* content-width side gutter (= Elementor container padding) */
--section-gap: 120px; /* legacy alias of --sp-120 */
--grid-gap: 8px; /* gap between grid cards (Figma cards use 8px) */
--grid-gap-lg: 32px; /* wider gap between feature columns */
/* Spacing scale (design tokens) */
--sp-4: 4px;
--sp-8: 8px;
--sp-12: 12px;
--sp-16: 16px;
--sp-20: 20px;
--sp-24: 24px;
--sp-28: 28px;
--sp-32: 32px;
--sp-40: 40px;
--sp-64: 64px;
--sp-80: 80px;
--sp-100: 100px;
--sp-120: 120px;
/* Card / block inner padding tokens */
--card-pad: 16px;
--card-pad-x: 32px;
/* Hairline / border tokens */
--hairline: 1px solid var(--color-blue-10);
--hairline-dark: 1px solid var(--color-night);
}
/* Tablet / mobile token overrides */
@media (max-width: 1024px) { :root { --container-pad: 40px; --sp-120: 80px; --sp-100: 64px; --sp-80: 56px; } }
@media (max-width: 768px) { :root { --container-pad: 16px; --sp-120: 56px; --sp-100: 48px; --sp-80: 40px; --sp-64: 40px; } }
/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
overflow-x: hidden;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.375;
color: var(--color-night);
background-color: var(--color-almost-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button {
font-family: inherit;
font-size: inherit;
border: none;
background: none;
cursor: pointer;
color: inherit;
}
input, textarea, select, button { font-family: inherit; }
/* ---------- Typography scale ---------- */
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--font-heading);
font-weight: 400;
color: var(--color-night);
}
.h1 { font-size: 84px; line-height: 0.9; letter-spacing: -1.5px; }
.h2 { font-size: 62px; line-height: 0.9; letter-spacing: -1.5px; }
.h3 { font-size: 40px; line-height: 1; letter-spacing: -1px; }
.h4 { font-size: 28px; line-height: 1; letter-spacing: -1px; }
.h5 { font-size: 24px; line-height: 1; letter-spacing: -1px; }
.h6 { font-size: 20px; line-height: 1.1; letter-spacing: -1px; }
.p1 { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.375; }
.p2 { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.571; }
.p3 { font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1.23; }
.p4 { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 1.333; }
.tag { font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.25; }
.tag2 { font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: 14px; line-height: 1.43; }
.link-text { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.43; }
/* ==========================================================================
Grid system (Elementor-style: container → 12-col grid → columns)
One container width + one 12-col grid shared by every block, so vertical
column lines line up across all sections and pages.
========================================================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--container-pad);
padding-right: var(--container-pad);
}
/* 12-column grid. Gutterless by default so column lines are identical
everywhere; opt into gaps with .grid--gap / .grid--gap-lg. */
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 0;
row-gap: 0;
}
.grid--gap { column-gap: var(--grid-gap); }
.grid--gap-lg { column-gap: var(--grid-gap-lg); }
/* Column spans */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
/* Start position helpers (for right-aligned content blocks) */
.start-5 { grid-column-start: 5; }
.start-4 { grid-column-start: 4; }
/* Canonical label(4) / content(8) split used by most sections */
.split { display: grid; grid-template-columns: 4fr 8fr; column-gap: 0; }
/* Grid/flex items must be allowed to shrink below their content's intrinsic
size, otherwise a fixed-width child forces the track wider than the
viewport and the layout breaks on tablet/mobile. */
.grid > *,
.split > *,
.capabilities__inner > *, .standards__head > *, .sol-grid-head > *,
.syntetika__inner > *, .company-band__inner > *, .ri__head > *,
.publib__inner > *,
.scomplex__head > *, .scomplex__grid > *,
.careers__head > *, .careers__roles > *, .audience__head > *,
.enquiry__inner > *, .offices__inner > *,
.strat__head > *, .strat__subnav > *, .strat__body > *,
.reqdoc__inner > *, .lblsec__inner > *, .statsrow > *,
.onchain__cols > *, .onchain-prow > *, .media__grid > *,
.principles__grid > *, .ri__cols > *, .risk-cols > *,
.site-footer__grid > *, .research__news-form > *,
.ir-contact__form > * { min-width: 0; }
/* Section vertical rhythm */
.section-y { padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.section-y-sm { padding-top: var(--sp-80); padding-bottom: var(--sp-80); }
/* Vertical stacks (replace ad-hoc gaps) */
.stack { display: flex; flex-direction: column; }
.stack-4 { gap: var(--sp-4); }
.stack-8 { gap: var(--sp-8); }
.stack-16 { gap: var(--sp-16); }
.stack-20 { gap: var(--sp-20); }
.stack-24 { gap: var(--sp-24); }
.stack-40 { gap: var(--sp-40); }
.stack-64 { gap: var(--sp-64); }
.stack-80 { gap: var(--sp-80); }
.section { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
/* Collapse grid to a single column on tablet & below */
@media (max-width: 992px) {
.grid, .split { grid-template-columns: 1fr; }
.grid > [class*="col-"] { grid-column: auto; }
.split { row-gap: var(--sp-32); }
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 13px 20px;
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
line-height: 20px;
white-space: nowrap;
border: 1px solid transparent;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.btn--light {
background-color: var(--color-almost-white);
color: var(--color-night);
}
.btn--light:hover { color: var(--color-blue-50); }
.btn--dark {
background-color: var(--color-night);
color: var(--color-almost-white);
}
.btn--dark:hover { background-color: var(--color-deep-blue); }
.btn--ghost {
background-color: transparent;
border-color: var(--color-gray-50);
color: var(--color-matcha);
}
.btn--ghost:hover {
border-color: var(--color-gray-40);
color: var(--color-almost-white);
}
.btn--ghost-dark {
background-color: transparent;
border-color: var(--color-blue-40);
color: var(--color-night);
}
.btn--ghost-dark:hover {
border-color: var(--color-night);
}
.btn--full { width: 100%; }
/* ---------- Text link ---------- */
.link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: var(--color-night);
transition: opacity 0.2s ease;
}
.link:hover { text-decoration: underline; text-underline-position: from-font; }
.link--light { color: var(--color-almost-white); }
/* ---------- Utility ---------- */
.u-italic { font-style: italic; }
.text-center { text-align: center; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ==========================================================================
Logo
========================================================================== */
.logo {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-night);
}
.logo__mark { display: inline-flex; width: 24px; height: 24px; }
.logo__mark svg { width: 100%; height: 100%; }
.logo__word {
font-family: var(--font-body);
font-weight: 500;
font-size: 15px;
line-height: 24px;
letter-spacing: 1.2px;
color: var(--color-night);
text-transform: uppercase;
}
.logo--light { color: var(--color-almost-white); }
.logo--light .logo__word { color: var(--color-almost-white); }
/* ==========================================================================
Header
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background-color: var(--color-almost-white);
border-bottom: 1px solid var(--color-green-10);
}
.site-header__inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
.site-nav {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.site-nav__list {
display: flex;
align-items: center;
gap: 16px;
}
.site-nav__list > li > a,
.site-nav__toggle {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-body);
font-weight: 500;
font-size: 13px;
line-height: 16px;
color: var(--color-green-50);
transition: color 0.2s ease;
}
.site-nav__list > li > a:hover,
.site-nav__toggle:hover { color: var(--color-forest); }
.site-nav__caret { width: 7px; height: 4px; transition: transform 0.2s ease; }
.site-nav__list > li { position: relative; }
.has-dropdown:hover .site-nav__caret,
.has-dropdown:focus-within .site-nav__caret { transform: rotate(180deg); }
/* Desktop dropdown menu */
/* Dropdown is a panel: a section label, a two-up grid of titled items with
a grey hover and a trailing arrow, then a footer link (Figma 421:6456). */
.dropdown {
position: absolute; top: 100%; left: 50%;
transform: translate(-50%, 6px);
width: 640px; background: var(--color-almost-white);
box-shadow: 0 16px 40px rgba(23, 34, 58, 0.1);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 130;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.dropdown__label {
border-top: 1px solid var(--color-green-10); padding: 12px 16px;
font-family: var(--font-heading); font-size: 13px; line-height: 16px;
color: var(--color-green-50); opacity: 0.6;
}
.dropdown__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding-right: 16px; }
.dropdown__item { display: flex; flex-direction: column; gap: 4px; padding: 16px; transition: background-color 0.2s ease; }
.dropdown__item:hover { background: var(--color-green-5); }
.dropdown__item-title { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-forest); white-space: nowrap; }
.dropdown__item-title span { opacity: 0; transition: opacity 0.2s ease; }
.dropdown__item:hover .dropdown__item-title span { opacity: 1; }
.dropdown__item-desc { max-width: 269px; font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-forest); opacity: 0.5; }
.dropdown__more {
position: relative; display: flex; align-items: center; height: 52px;
border-top: 1px solid var(--color-green-10); border-bottom: 1px solid var(--color-green-10);
padding: 4px 32px 4px 16px;
font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-forest);
}
.dropdown__more::after { content: ""; position: absolute; right: -10px; top: -1px; width: 1px; height: 30px; background: var(--color-forest); }
.dropdown li a:hover { color: var(--color-forest); background-color: var(--color-green-5); }
.site-header__actions {
display: flex;
align-items: center;
}
.header-login,
.header-cta {
display: inline-flex;
align-items: center;
font-family: var(--font-body);
font-weight: 500;
font-size: 13px;
line-height: 16px;
color: var(--color-green-50);
padding: 10px 0;
transition: color 0.2s ease;
}
.header-login { padding-right: 16px; border-right: 1px solid var(--color-green-50); }
.header-cta { padding-left: 16px; }
.header-login:hover,
.header-cta:hover { color: var(--color-forest); }
.burger {
display: none;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
}
.burger span {
display: block;
width: 20px;
height: 1.5px;
background-color: var(--color-night);
position: relative;
}
.burger span::before,
.burger span::after {
content: '';
position: absolute;
left: 0;
width: 20px;
height: 1.5px;
background-color: var(--color-night);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
/* ==========================================================================
Mobile menu (slide-in panel)
========================================================================== */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 200;
background-color: var(--color-almost-white);
transform: translateX(100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
visibility: hidden;
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; }
.mobile-menu__top {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 20px;
border-bottom: 1px solid var(--color-blue-10);
}
.mobile-menu__close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.mobile-menu__list { flex: 1; padding: 0 20px; }
.mobile-menu__list > li {
border-bottom: 1px solid var(--color-blue-10);
}
/* Mobile rows: 52px, arrow for leaf pages, plus/minus for sections that
expand (Figma 272:1210 / 272:1350). The frame set these in Newsreader
28; the client asked (September 2026) for the platform's own face here,
the DM Sans the desktop bar and every other link use. */
.mobile-menu__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
height: 52px;
padding: 0 var(--container-pad);
border-bottom: 1px solid var(--color-green-10);
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
line-height: 22px;
color: var(--color-forest);
}
.mobile-menu__link > span { flex-shrink: 0; font-size: 16px; line-height: 1; }
.mobile-menu__bottom {
display: flex;
margin-top: 16px;
border-bottom: 1px solid var(--color-forest);
}
.mobile-menu__bottom a {
flex: 1;
display: flex; align-items: center; justify-content: center;
padding: 10px 16px;
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--color-forest);
}
.mobile-menu__bottom a + a { border-left: 1px solid var(--color-forest); }
body.menu-open { overflow: hidden; }
/* Mobile menu expandable sections */
.mm-toggle { text-align: left; background: none; border: none; cursor: pointer; }
.mm-icon { position: relative; flex-shrink: 0; width: 24px; height: 24px; color: var(--color-forest); }
.mm-icon::before, .mm-icon::after {
content: ""; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); background: currentColor; transition: opacity 0.2s ease;
}
.mm-icon::before { width: 14px; height: 1.5px; }
.mm-icon::after { width: 1.5px; height: 14px; }
.mm-item.is-open .mm-icon::after { opacity: 0; }
/* the open row grows and drops its rule onto the expanded box instead */
.mm-item.is-open .mm-toggle { height: auto; padding-top: 12px; padding-bottom: 0; border-bottom: none; }
.mm-item.is-open { border-bottom: 1px solid var(--color-green-10); }
.mm-sub { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; }
.mm-item.is-open .mm-sub { max-height: 320px; }
.mm-sub__inner { display: flex; flex-direction: column; gap: 16px; padding: 24px var(--container-pad) 24px; }
.mm-sub a {
font-family: var(--font-body); font-size: 14px; line-height: 22px;
color: var(--color-green-50); transition: color 0.2s ease;
}
.mm-sub a:hover { color: var(--color-forest); }
/* ==========================================================================
Footer
========================================================================== */
.site-footer {
background-color: var(--color-night);
color: var(--color-almost-white);
padding: 60px 0 28px;
}
.site-footer--forest { background-color: var(--color-forest); }
.site-footer--deep-blue { background-color: var(--color-deep-blue); }
.site-footer--light { background-color: var(--color-almost-white); color: var(--color-night); }
/* light-green footer (matches the Offices block) — forest logo/text, green muted tones */
.site-footer--light-green { background-color: var(--color-light-green); color: var(--color-forest); border-top: 1px solid var(--color-green-10); }
.site-footer--light-green .logo--light,
.site-footer--light-green .logo--light .logo__word { color: var(--color-forest); }
.site-footer--light-green .footer-brand__tagline { color: var(--color-green-50); }
.site-footer--light-green .footer-col__title { color: var(--color-green-50); }
.site-footer--light-green .footer-col__list a { color: var(--color-forest); }
.site-footer--light-green .footer-social a { color: var(--color-green-50); }
.site-footer--light-green .site-footer__bottom { border-top-color: var(--color-green-10); color: var(--color-green-50); }
/* light-blue footer (matches the Offices block on contact) — the same
treatment on navy tokens */
.site-footer--light-blue { background-color: var(--color-light-blue); color: var(--color-night); border-top: 1px solid var(--color-blue-10); }
.site-footer--light-blue .logo--light,
.site-footer--light-blue .logo--light .logo__word { color: var(--color-night); }
.site-footer--light-blue .footer-brand__tagline { color: var(--color-blue-50); }
.site-footer--light-blue .footer-col__title { color: var(--color-blue-50); }
.site-footer--light-blue .footer-col__list a { color: var(--color-night); }
.site-footer--light-blue .footer-social a { color: var(--color-blue-50); }
.site-footer--light-blue .site-footer__bottom { border-top-color: var(--color-blue-10); color: var(--color-blue-50); }
.site-footer__grid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 40px;
}
.footer-brand__tagline {
margin-top: 16px;
font-family: var(--font-body);
font-size: 14px;
line-height: 20px;
color: var(--color-gray-40);
max-width: 220px;
}
.site-footer--light .footer-brand__tagline { color: var(--color-blue-50); }
.footer-col__title {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 400;
color: var(--color-gray-40);
margin-bottom: 18px;
}
.site-footer--light .footer-col__title { color: var(--color-blue-50); }
.footer-col__list li + li { margin-top: 12px; }
.footer-col__list a {
font-family: var(--font-body);
font-size: 14px;
line-height: 20px;
color: var(--color-almost-white);
transition: opacity 0.2s ease;
}
.site-footer--light .footer-col__list a { color: var(--color-night); }
.footer-col__list a:hover { opacity: 0.6; }
/* desktop: social lives under the tagline inside .footer-brand.
mobile: a duplicate (.footer-social--mobile) shows after the columns. */
.footer-social { display: flex; gap: 14px; margin-top: 28px; }
.footer-social--mobile { display: none; }
.footer-social a { display: inline-flex; width: 20px; height: 20px; color: var(--color-almost-white); }
.site-footer--light .footer-social a { color: var(--color-night); }
.footer-social a:hover { opacity: 0.6; }
.site-footer__bottom {
display: flex;
align-items: center;
gap: 24px;
margin-top: 56px;
padding-top: 20px;
border-top: 1px solid var(--color-gray-10);
font-family: var(--font-body);
font-size: 13px;
color: var(--color-gray-40);
}
.site-footer--light .site-footer__bottom {
border-top-color: var(--color-blue-10);
color: var(--color-blue-50);
}
.site-footer__bottom a { color: inherit; }
.site-footer__bottom a:hover { opacity: 0.7; }
/* Wider legal row for the listed-company footer (name/exchange/adviser on
the left, policy links on the right), instead of the plain 2-item row. */
.site-footer__bottom--wide { justify-content: space-between; flex-wrap: wrap; row-gap: 8px; }
.site-footer__bottom--wide .footer-legal,
.site-footer__bottom--wide .footer-policies { display: flex; flex-wrap: wrap; gap: 24px; }
/* ==========================================================================
Form elements
========================================================================== */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--color-blue-50);
}
.field__control {
width: 100%;
height: 44px;
padding: 12px 0;
font-family: var(--font-body);
font-size: 14px;
color: var(--color-night);
background-color: transparent;
border: none;
border-bottom: 1px solid var(--color-blue-10);
transition: border-color 0.2s ease;
}
.field__control::placeholder { color: var(--color-blue-40); }
.field__control:focus { outline: none; border-bottom-color: var(--color-night); }
textarea.field__control { height: auto; min-height: 88px; resize: vertical; }
.field__hint { font-family: var(--font-body); font-size: 12px; color: var(--color-blue-40); }
/* Dark form context (Night background) */
.form--dark .field__label { color: var(--color-gray-40); }
.form--dark .field__control {
color: var(--color-almost-white);
border-bottom-color: var(--color-gray-10);
}
.form--dark .field__control::placeholder { color: var(--color-gray-40); }
.form--dark .field__control:focus { border-bottom-color: var(--color-almost-white); }
select.field__control { appearance: none; -webkit-appearance: none; cursor: pointer; }
/* ==========================================================================
Cookies banner
========================================================================== */
/* Cookie notice — a 343px light card, not a dark bar (Figma 1051:27838) */
.cookies {
position: fixed; left: 24px; bottom: 24px; z-index: 300;
width: 343px; max-width: calc(100% - 32px);
display: flex; flex-direction: column; gap: 16px;
padding: 16px; overflow: hidden;
background-color: var(--color-almost-white); color: var(--color-forest);
box-shadow: 0 16px 40px rgba(23, 34, 58, 0.12);
}
.cookies__group { display: flex; flex-direction: column; gap: 4px; }
.cookies__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cookies__title { font-family: var(--font-heading); font-weight: 400; font-size: 20px; line-height: 22px; letter-spacing: -0.2px; color: var(--color-forest); }
.cookies__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--color-forest); }
.cookies__text { max-width: 283px; font-family: var(--font-body); font-size: 12px; line-height: 16px; color: var(--color-green-50); }
.cookies__accept { align-self: flex-start; padding: 0; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-forest); text-decoration: underline; text-underline-position: from-font; }
.cookies.is-hidden { display: none; }
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1024px) {
:root { --container-pad: 40px; --section-gap: 80px; }
.h1 { font-size: 64px; }
.h2 { font-size: 48px; }
.h3 { font-size: 34px; }
/* footer: brand full width, menu 2x2, social row below the columns */
.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
.footer-brand { grid-column: 1 / -1; }
.footer-brand .footer-social { display: none; } /* hide desktop copy */
.footer-social--mobile { display: flex; grid-column: 1 / -1; margin-top: 0; }
}
/* Switch to the burger menu once the centered nav no longer fits (tablet). */
@media (max-width: 992px) {
.site-nav,
.site-header__actions { display: none; }
.burger { display: inline-flex; }
}
@media (max-width: 768px) {
:root { --container-pad: 16px; --section-gap: 56px; }
.h1 { font-size: 44px; letter-spacing: -1px; }
.h2 { font-size: 36px; letter-spacing: -1px; }
.h3 { font-size: 28px; }
.h4 { font-size: 24px; }
.site-footer__grid { gap: 32px; }
.site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
.site-footer__bottom--wide .footer-legal,
.site-footer__bottom--wide .footer-policies { flex-direction: column; gap: 8px; }
.cookies { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}
/* ===== assets/css/home.css ===== */
/* ==========================================================================
Home page sections
========================================================================== */
/* ---------- Hero ---------- */
.hero {
position: relative;
overflow: hidden;
background-color: var(--color-forest);
min-height: 736px;
display: flex;
align-items: flex-end;
padding: 32px 0;
}
.hero__bg {
position: absolute;
top: 0;
left: 56px;
width: 1322px;
max-width: none;
pointer-events: none;
user-select: none;
}
/* Home hero artwork — a horizontal video prepared to sit in the block as-is
(no negative offsets). It covers the section; object-fit keeps it filling
whatever the hero's aspect ratio works out to. Muted + loop + playsinline
so autoplay is allowed. pointer-events:none so it never eats clicks. */
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
pointer-events: none;
user-select: none;
}
/* keeps the headline and stats legible over the footage */
.hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, transparent 34%, rgba(23,58,44,0.72) 78%);
}
.hero__inner {
position: relative;
z-index: 1;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
width: 100%;
}
.hero__content {
display: flex;
flex-direction: column;
gap: 76px;
width: 711px;
max-width: 100%;
}
.hero__title {
font-family: var(--font-heading);
font-weight: 400;
font-size: 84px;
line-height: 0.9;
letter-spacing: -1.26px;
color: var(--color-light-green);
}
.hero__text {
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--color-light-green);
max-width: 703px;
}
.hero__text a {
font-size: 14px;
line-height: 20px;
text-decoration: underline;
text-underline-position: from-font;
}
.hero__buttons { display: flex; }
.hero__buttons .btn--ghost { border-color: var(--color-gray-50); color: var(--color-light-green); }
.hero__buttons .btn--ghost:hover { border-color: var(--color-gray-40); color: var(--color-almost-white); }
.hero__stats {
flex-shrink: 0;
width: 201px;
display: flex;
flex-direction: column;
gap: 32px;
padding: 16px 0 16px 32px;
border-left: 1px solid var(--color-gray-50);
}
.hero__stat { width: 162px; }
.hero__stat h3 {
font-family: var(--font-heading);
font-weight: 400;
font-size: 40px;
line-height: 1;
letter-spacing: -0.4px;
color: var(--color-light-green);
}
.hero__stat p {
font-family: var(--font-body);
font-size: 14px;
line-height: 22px;
color: var(--color-light-green);
}
.hero__stat--muted { opacity: 0.1; }
/* ---------- Asset management (Three capabilities) ---------- */
.capabilities {
background-color: var(--color-almost-white);
padding: 120px 0;
}
.capabilities__inner {
display: grid;
grid-template-columns: 4fr 8fr;
align-items: start;
width: 100%;
}
@media (max-width: 992px) { .capabilities__inner { grid-template-columns: 1fr; row-gap: 32px; } }
.capabilities__intro {
max-width: 302px;
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--color-night);
opacity: 0.5;
}
.capabilities__main {
width: 100%;
display: flex;
flex-direction: column;
gap: 80px;
}
@media (max-width: 992px) { .capabilities__intro { margin-bottom: 32px; } }
.capabilities__title {
padding: 0 16px;
font-family: var(--font-heading);
font-weight: 400;
font-size: 62px;
line-height: 0.9;
letter-spacing: -0.93px;
color: var(--color-night);
}
.capabilities__group { display: flex; flex-direction: column; gap: 20px; }
.cap-label {
padding-left: 16px;
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--color-night);
opacity: 0.5;
}
/* dark capability card */
.cap-card {
position: relative;
overflow: hidden;
height: 360px;
padding: 16px 32px 32px 16px;
background-color: var(--color-night);
border-top: 1px solid var(--color-blue-10);
display: flex;
flex-direction: column;
gap: 8px;
}
.cap-card__title {
font-family: var(--font-heading);
font-weight: 400;
font-size: 40px;
line-height: 1;
letter-spacing: -0.4px;
color: var(--color-almost-white);
white-space: nowrap;
}
.cap-card__body {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
color: var(--color-almost-white);
}
.cap-card__desc {
width: 436px;
max-width: 100%;
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
opacity: 0.6;
}
.cap-card__features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 43px;
row-gap: 28px;
width: 426px;
max-width: 100%;
}
.cap-card__features p {
font-family: var(--font-heading);
font-weight: 400;
font-size: 20px;
line-height: 22px;
letter-spacing: -0.2px;
}
.cap-card__graphic {
position: absolute;
top: -1px;
right: 0;
width: 509px;
height: 360px;
pointer-events: none;
}
/* On-Chain / Financing — expand on hover (desktop) / click (mobile) */
.cap-extend { display: flex; align-items: flex-start; }
.cap-extend__col {
flex: 1;
min-width: 0;
padding: 16px 32px 16px 16px;
border-top: 1px solid var(--color-blue-10);
}
.cap-extend__col .cap-label { padding-left: 0; margin-bottom: 16px; }
.cap-extend__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: 0;
background: none;
border: 0;
text-align: left;
cursor: pointer;
color: var(--color-night);
}
.cap-extend__head h3 {
font-family: var(--font-heading);
font-weight: 400;
font-size: 40px;
line-height: 1;
letter-spacing: -0.4px;
color: var(--color-night);
white-space: nowrap;
}
.cap-extend__toggle { flex-shrink: 0; position: relative; width: 40px; height: 40px; }
.cap-extend__arrow { font-family: var(--font-heading); font-size: 40px; line-height: 1; opacity: 0; transition: opacity 0.2s ease; }
.cap-extend__plus { display: none; }
.cap-extend__panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.35s ease, opacity 0.35s ease; }
.cap-extend__panel-inner { padding-top: 24px; }
.cap-extend__desc {
max-width: 383px;
font-family: var(--font-body);
font-size: 14px;
line-height: 22px;
color: var(--color-blue-50);
}
/* Desktop: columns stay side by side; hovering a column reveals its
description + arrow in place (no restacking). */
@media (min-width: 993px) {
.cap-extend__col:hover .cap-extend__panel { max-height: 220px; opacity: 1; }
.cap-extend__col:hover .cap-extend__arrow { opacity: 1; }
}
/* ---------- Strategies (Built for institutional allocators) ---------- */
.strategies {
background-color: var(--color-blue-5);
padding: 120px 0;
}
.strategies__inner {
width: 100%;
display: flex;
flex-direction: column;
gap: 80px;
}
.strategies__head {
padding-left: 16px;
width: 907px;
max-width: 100%;
display: flex;
flex-direction: column;
}
.strategies__head h2,
.strategies__head p {
font-family: var(--font-heading);
font-weight: 400;
font-size: 40px;
line-height: 1;
letter-spacing: -0.4px;
color: var(--color-night);
}
.strategies__head p { opacity: 0.4; width: 763px; max-width: 100%; }
.strategies__body { display: flex; flex-direction: column; gap: 4px; }
.strategies__label {
padding-left: 16px;
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--color-blue-50);
}
.strategies__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--color-blue-10);
padding: 80px 32px 64px 0;
}
.strategy-card {
padding: 16px;
display: flex;
flex-direction: column;
gap: 40px;
}
.strategy-card__head { display: flex; flex-direction: column; gap: 8px; width: 302px; max-width: 100%; }
.strategy-card__tag {
font-family: var(--font-heading);
font-style: italic;
font-size: 16px;
line-height: 20px;
color: var(--color-blue-50);
}
.strategy-card__title {
font-family: var(--font-heading);
font-weight: 400;
font-size: 40px;
line-height: 1;
letter-spacing: -0.4px;
color: var(--color-night);
}
.strategy-card__desc {
width: 302px;
max-width: 100%;
font-family: var(--font-body);
font-size: 14px;
line-height: 22px;
color: var(--color-night);
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 65%);
mask-image: linear-gradient(180deg, #000 0%, transparent 65%);
}
.strategies__all {
width: 470px;
max-width: 100%;
display: inline-flex;
align-items: center;
padding: 4px 32px 4px 0;
border-bottom: 1px solid var(--color-night);
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--color-night);
}
/* ---------- Manifesto (Why institutions choose Hilbert) ---------- */
.manifesto {
position: relative;
overflow: hidden;
background-color: var(--color-forest);
min-height: 800px;
padding: 24px 32px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
color: var(--color-almost-white);
}
.manifesto__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.manifesto__top,
.manifesto__mid,
.manifesto__logo { position: relative; z-index: 1; }
.manifesto__top {
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
width: 305px;
max-width: 100%;
}
.manifesto__mid {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
width: 1185px;
max-width: 100%;
}
.manifesto__mid h2 {
font-family: var(--font-heading);
font-weight: 400;
font-size: 62px;
line-height: 0.9;
letter-spacing: -0.93px;
}
.manifesto__mid p {
font-family: var(--font-heading);
font-style: italic;
font-size: 16px;
line-height: 20px;
}
.manifesto__logo {
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
letter-spacing: 4px;
text-transform: uppercase;
}
/* ---------- Why Hilbert (accordion) ---------- */
.why {
background-color: var(--color-light-green);
padding: 120px 0;
}
.why__label {
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--color-green-50);
}
.why__list { width: 100%; }
.why-item { }
.why-item + .why-item { margin-top: 40px; }
.why-item__title {
font-family: var(--font-heading);
font-weight: 400;
font-size: 40px;
line-height: 1;
letter-spacing: -0.4px;
color: var(--color-forest);
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
text-align: left;
}
.why-item__icon { position: relative; flex-shrink: 0; width: 28px; height: 28px; font-size: 0; align-self: flex-start; }
.why-item__icon::before, .why-item__icon::after {
content: ""; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); background: currentColor;
}
.why-item__icon::before { width: 100%; height: 1.5px; }
.why-item__icon::after { width: 1.5px; height: 100%; transition: opacity 0.2s ease; }
.why-item.is-open .why-item__icon::after { opacity: 0; }
.why-item__panel {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease;
}
.why-item.is-open .why-item__panel { max-height: 320px; }
.why-item__panel-inner {
border-top: 1px solid var(--color-blue-10);
margin-top: 16px;
padding: 24px 32px 16px 0;
display: flex;
flex-direction: column;
gap: 32px;
}
.why-grid { display: flex; gap: 32px; }
.why-sub { width: 302px; max-width: 100%; }
.why-sub h4 {
font-family: var(--font-heading);
font-weight: 400;
font-size: 20px;
line-height: 22px;
letter-spacing: -0.2px;
color: var(--color-forest);
margin-bottom: 8px;
}
.why-sub p {
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--color-forest);
opacity: 0.6;
}
.why__panel-link {
font-family: var(--font-body);
font-size: 14px;
line-height: 20px;
color: var(--color-forest);
text-decoration: underline;
text-underline-position: from-font;
}
/* ---------- Standards (Built to the standards) ---------- */
.standards {
background-color: var(--color-blue-5);
padding: 120px 0;
overflow-x: clip; /* bleeding feature headings don't create a page scrollbar */
}
.standards__inner { display: flex; flex-direction: column; gap: 80px; }
.standards__head { display: grid; grid-template-columns: 4fr 8fr; align-items: start; }
.standards__head .label {
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--color-blue-50);
}
.standards__head h2 {
width: 100%;
max-width: 100%;
font-family: var(--font-heading);
font-weight: 400;
font-size: 62px;
line-height: 0.9;
letter-spacing: -0.93px;
color: var(--color-night);
}
.standards__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 32px;
row-gap: 40px;
padding-right: 32px;
}
.std-feature { max-width: 340px; min-width: 0; }
.std-feature__icon { width: 24px; height: 24px; margin-bottom: 16px; }
.std-feature h3 {
font-family: var(--font-heading);
font-weight: 400;
font-size: 40px;
line-height: 1;
letter-spacing: -0.4px;
color: var(--color-night);
margin-bottom: 8px;
/* keep on one line and let it bleed past the grid cell without
widening the track (min-width:0 above) or scrolling the page */
white-space: nowrap;
}
.std-feature p {
font-family: var(--font-body);
font-size: 14px;
line-height: 22px;
color: var(--color-blue-50);
}
.standards__links {
display: flex;
width: 66.6667%;
max-width: 100%;
margin-left: auto;
border-bottom: 1px solid var(--color-night);
}
@media (max-width: 992px) { .standards__links { width: 100%; } }
.standards__links a {
flex: 1;
padding: 10px 16px;
font-family: var(--font-body);
font-weight: 500;
font-size: 13px;
line-height: 16px;
color: var(--color-night);
transition: opacity 0.2s ease;
}
.standards__links a:first-child { padding-left: 0; border-right: 1px solid var(--color-night); }
.standards__links a:hover { opacity: 0.6; }
/* ---------- Research ---------- */
.research {
background-color: var(--color-almost-white);
padding: 120px 0;
}
.research__label {
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--color-blue-50);
}
.research__main { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 100px; }
.research__block { display: flex; flex-direction: column; gap: 80px; }
.research__title {
width: 690px;
max-width: 100%;
font-family: var(--font-heading);
font-weight: 400;
font-size: 62px;
line-height: 0.9;
letter-spacing: -0.93px;
color: var(--color-night);
}
.research__cards { display: flex; flex-direction: column; align-items: flex-end; width: 100%; }
.research-featured {
position: relative;
overflow: hidden;
width: 955px;
max-width: 100%;
min-height: 276px;
padding: 16px;
background-color: var(--color-night);
display: flex;
flex-direction: column;
justify-content: center;
}
.research-featured__graphic {
position: absolute;
right: -40px;
top: 50%;
transform: translateY(-50%);
height: 100%;
pointer-events: none;
}
.research-featured__content {
position: relative;
z-index: 1;
width: 302px;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 40px;
}
.research-featured__tag {
font-family: var(--font-heading);
font-style: italic;
font-size: 16px;
line-height: 20px;
color: var(--color-gray-40);
margin-bottom: 8px;
}
.research-featured__title {
font-family: var(--font-heading);
font-weight: 400;
font-size: 28px;
line-height: 1;
letter-spacing: -0.28px;
color: var(--color-almost-white);
}
.research-featured__desc {
width: 434px;
max-width: 100%;
font-family: var(--font-body);
font-size: 14px;
line-height: 22px;
color: var(--color-gray-40);
}
.research-articles { display: flex; gap: 32px; width: 955px; max-width: 100%; }
.research-article {
border-left: 1px solid var(--color-blue-10);
padding: 64px 16px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 40px;
}
.research-article:first-child { width: 453px; flex-shrink: 0; }
.research-article:last-child { flex: 1; min-width: 0; }
.research-article__tag {
font-family: var(--font-heading);
font-style: italic;
font-size: 16px;
line-height: 20px;
color: var(--color-blue-50);
margin-bottom: 8px;
}
.research-article__title {
width: 368px;
max-width: 100%;
font-family: var(--font-heading);
font-weight: 400;
font-size: 28px;
line-height: 1;
letter-spacing: -0.28px;
color: var(--color-night);
}
.research-article__desc {
font-family: var(--font-body);
font-size: 14px;
line-height: 22px;
color: var(--color-night);
-webkit-mask-image: linear-gradient(180deg, #000 1%, transparent 67%);
mask-image: linear-gradient(180deg, #000 1%, transparent 67%);
}
.research__visit {
width: 955px;
max-width: 100%;
padding: 4px 32px 4px 0;
border-bottom: 1px solid var(--color-night);
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--color-night);
}
.research__news { display: flex; flex-direction: column; gap: 80px; padding: 120px 0; }
.research__news-head { width: 907px; max-width: 100%; }
.research__news-head h2,
.research__news-head p {
font-family: var(--font-heading);
font-weight: 400;
font-size: 40px;
line-height: 1;
letter-spacing: -0.4px;
}
.research__news-head h2 { color: var(--color-night); }
.research__news-head p { color: var(--color-blue-50); width: 872px; max-width: 100%; }
.research__news-form {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border-bottom: 1px solid var(--color-night);
}
.research__news-form input {
flex: 1;
min-width: 0;
padding: 10px 16px 10px 0;
border: none;
background: transparent;
font-family: var(--font-body);
font-size: 16px;
color: var(--color-night);
}
.research__news-form input::placeholder { color: var(--color-blue-50); }
.research__news-form input:focus { outline: none; }
.research__news-form button {
padding: 10px 16px;
border-left: 1px solid var(--color-night);
font-family: var(--font-body);
font-size: 16px;
color: var(--color-night);
}
/* ---------- CTA ---------- */
.home-cta {
position: relative;
overflow: hidden;
background-color: var(--color-forest);
min-height: 723px;
padding: 0 32px 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 24px;
text-align: center;
}
.home-cta__graphic {
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
width: 1381px;
max-width: none;
pointer-events: none;
}
.home-cta__tag,
.home-cta__title,
.home-cta__buttons { position: relative; z-index: 1; }
.home-cta__tag {
font-family: var(--font-heading);
font-style: italic;
font-size: 16px;
line-height: 20px;
color: var(--color-almost-white);
}
.home-cta__title {
font-family: var(--font-heading);
font-weight: 400;
font-size: 84px;
line-height: 0.9;
letter-spacing: -1.26px;
color: var(--color-almost-white);
}
.home-cta__buttons { display: flex; }
.home-cta__buttons .btn--ghost { border-color: var(--color-gray-50); color: var(--color-almost-white); }
.home-cta__buttons .btn--ghost:hover { border-color: var(--color-gray-40); }
@media (max-width: 1024px) {
.hero__title { font-size: 64px; }
.manifesto__mid h2 { font-size: 44px; }
.standards__head { flex-direction: column; gap: 24px; }
.standards__head h2 { font-size: 44px; width: 100%; }
.standards__grid { grid-template-columns: 1fr 1fr; padding-right: 0; }
.std-feature h3 { white-space: normal; }
.standards__links { width: 100%; }
.research { flex-direction: column; gap: 24px; }
.research__label { width: 100%; }
.research__title { font-size: 44px; }
.research-featured, .research-articles, .research__visit { width: 100%; }
.research-article:first-child { width: 50%; }
.research__news-head h2, .research__news-head p { font-size: 32px; }
.home-cta__title { font-size: 56px; }
.why__inner { flex-direction: column; }
.why__list { width: 100%; }
.strategies__grid { grid-template-columns: 1fr; gap: 40px; padding: 40px 0; }
.strategy-card { padding: 0; }
.strategy-card__desc { color: var(--color-night); background: none; -webkit-background-clip: initial; }
.strategies__head p { font-size: 34px; }
.capabilities__inner { flex-direction: column; width: 100%; gap: 32px; }
.capabilities__main { width: 100%; }
.capabilities__title { font-size: 48px; }
.cap-card__graphic { opacity: 0.5; }
}
@media (max-width: 768px) {
/* Hero — mobile: graphic sits on top, then title/text, stats, buttons.
The tall top padding lifts the content below the volume graphic. */
.hero { min-height: 0; padding: 230px 0 32px; }
.hero__bg { top: -20px; left: 50%; right: auto; transform: translateX(-50%); width: 480px; height: auto; }
.hero__inner { flex-direction: column; align-items: center; text-align: center; gap: 40px; }
/* flatten hero__content so buttons can be ordered after the stats */
.hero__content { display: contents; }
.hero__content > div:first-child { order: 1; width: 100%; }
.hero__stats { order: 2; }
.hero__buttons { order: 3; }
.hero__title { font-size: 40px; letter-spacing: -0.4px; }
.hero__text { font-size: 14px; }
.hero__buttons { width: 100%; display: flex; flex-wrap: nowrap; gap: 0; }
.hero__buttons .btn { flex: 1; min-width: 0; padding: 13px 12px; overflow: hidden; }
.hero__buttons .btn__arrow { display: none; }
.hero__stats { width: 100%; flex-direction: row; text-align: left; gap: 12px; border-left: none; border-bottom: 1px solid var(--color-gray-50); padding: 0 0 16px; }
.hero__stat { width: auto; flex: 1; min-width: 0; }
.hero__stat h3 { font-size: 28px; letter-spacing: -0.28px; }
.hero__stat p { font-size: 12px; line-height: 16px; }
.capabilities { padding: 56px 0; }
.capabilities__title { font-size: 32px; padding: 0; }
.cap-card { height: auto; }
.cap-card__desc, .cap-card__features { width: 100%; }
.cap-card__title { font-size: 28px; }
.cap-card__features p { font-size: 16px; letter-spacing: -0.16px; }
.cap-card__graphic { display: none; }
.cap-extend__head h3 { font-size: 28px; }
}
@media (max-width: 768px) {
.strategies__head h2, .strategies__head p { font-size: 24px; letter-spacing: -0.24px; }
.strategies__head { padding-left: 0; }
.strategies__label { padding-left: 0; }
.cap-label { padding-left: 0; font-size: 14px; }
/* Strategy cards become a horizontal slider (matches mobile design) */
.strategies__grid {
display: flex; grid-template-columns: none;
margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad));
padding: 40px var(--container-pad); gap: 0; overflow-x: auto;
scroll-snap-type: x proximity; scroll-padding-left: var(--container-pad); scrollbar-width: none;
}
.strategies__grid::-webkit-scrollbar { display: none; }
.strategy-card { flex: 0 0 300px; scroll-snap-align: start; padding: 16px 32px 16px 16px; gap: 24px; }
.strategy-card__head { width: 100%; gap: 10px; }
.strategy-card__tag { font-size: 16px; }
.strategy-card__title { font-size: 28px; letter-spacing: -0.28px; }
.strategy-card__desc {
width: 100%; color: var(--color-night);
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}
.manifesto { min-height: 0; padding: 48px 16px; }
.manifesto__mid h2 { font-size: 32px; }
.standards__head h2 { font-size: 32px; }
.standards__grid { grid-template-columns: 1fr; }
.std-feature h3 { font-size: 28px; }
.research__title { font-size: 32px; }
.research-featured__graphic { display: none; }
.research-articles { flex-direction: column; gap: 40px; }
.research-article:first-child { width: 100%; }
.research-article { padding: 32px 0 0; border-left: none; border-top: 1px solid var(--color-blue-10); }
.research-article__title { font-size: 24px; }
.research__news-head h2, .research__news-head p { font-size: 24px; }
.home-cta { min-height: 0; padding: 200px 16px 64px; }
.home-cta__title { font-size: 40px; }
.home-cta__buttons { flex-wrap: wrap; justify-content: center; gap: 12px; }
}
/* ---------- Hero page variant (forest/deep-blue + breadcrumb + labeled stats) ---------- */
.hero--page .hero__title,
.hero--page .hero__text { color: var(--color-almost-white); }
.hero--page .hero__stat h3,
.hero--page .hero__stat p { color: var(--color-almost-white); }
.hero--deep { background-color: var(--color-deep-blue); }
.hero__breadcrumb {
font-family: var(--font-heading);
font-style: italic;
font-size: 16px;
line-height: 20px;
color: var(--color-almost-white);
}
.hero__breadcrumb .muted { color: var(--color-gray-40); }
.hero--wide .hero__content { width: 996px; }
@media (max-width: 1024px) { .hero--wide .hero__content { width: 100%; } }
/* Why-Hilbert accordion — mobile (Figma 375) */
@media (max-width: 768px) {
.why { padding: 56px 0; }
.why-item__title { font-size: 24px; }
.why-item + .why-item { margin-top: 24px; }
.why-item__icon { width: 24px; height: 24px; }
.why-item__panel-inner { padding: 16px 0 0; gap: 24px; }
.why-item.is-open .why-item__panel { max-height: 680px; }
.why-grid { flex-direction: column; gap: 24px; }
.why-sub { width: 100%; }
.why-sub h4 { font-size: 16px; }
.why-sub p { font-size: 14px; }
}
/* Support & Extend — mobile/tablet: click accordion (≤992), stacked, +/− */
@media (max-width: 992px) {
.cap-extend { flex-direction: column; }
.cap-extend__col { padding: 20px 0; }
.cap-extend__head h3 { white-space: normal; }
.cap-extend__arrow { display: none; }
.cap-extend__plus {
display: block; position: absolute; top: 50%; left: 50%;
width: 24px; height: 24px; transform: translate(-50%, -50%);
}
.cap-extend__toggle { width: 24px; height: 24px; }
.cap-extend__plus::before, .cap-extend__plus::after {
content: ""; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); background: var(--color-night);
}
.cap-extend__plus::before { width: 100%; height: 1.5px; }
.cap-extend__plus::after { width: 1.5px; height: 100%; transition: opacity 0.2s ease; }
.cap-extend__col.is-open .cap-extend__plus::after { opacity: 0; }
.cap-extend__col.is-open .cap-extend__panel { max-height: 260px; opacity: 1; }
}
/* ===== assets/css/company.css ===== */
/* Company page */
/* ---------- Structured complexity ---------- */
.scomplex { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-80); }
.scomplex .container { display: flex; flex-direction: column; gap: 44px; }
.scomplex__head { align-items: start; padding-bottom: 40px; }
.scomplex__head .label { max-width: 469px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.scomplex__main { width: 100%; display: flex; flex-direction: column; gap: 44px; }
.scomplex__title { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
.scomplex__paras { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.scomplex__paras p { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.scomplex__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.scomplex-item { border-left: 1px solid var(--color-blue-10); padding: 0 16px; }
.scomplex-item__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.scomplex-item h4 { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); margin: 8px 0 16px; max-width: 302px; }
.scomplex-item p { font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-blue-50); max-width: 302px; }
@media (max-width: 992px) {
.scomplex__title { font-size: 40px; }
.scomplex__paras { grid-template-columns: 1fr; }
.scomplex__grid { grid-template-columns: 1fr; gap: 24px; }
.scomplex-item { border-left: none; border-top: 1px solid var(--color-blue-10); padding: 16px 0 0; }
}
/* ---------- Leadership & team ---------- */
.team { background: var(--color-almost-white); padding-top: var(--sp-80); padding-bottom: var(--sp-120); }
.team .container { display: flex; flex-direction: column; gap: var(--sp-80); }
.team__indent { margin-left: 33.3333%; }
.team__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.team__head p { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-blue-50); max-width: 872px; }
.team__block { display: flex; flex-direction: column; gap: 64px; }
.team__label { margin-left: 33.3333%; border-bottom: 1px solid var(--color-blue-10); padding-bottom: 4px; font-family: var(--font-body); font-size: 16px; color: var(--color-blue-50); }
.team__grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; row-gap: 64px; }
.team-member { display: flex; flex-direction: column; gap: 32px; }
.team-member__avatar { background: var(--color-blue-10); min-height: 260px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.team-member__avatar span { font-family: var(--font-heading); font-size: 40px; letter-spacing: -0.4px; color: var(--color-night); opacity: 0.5; }
.team-member__info { display: flex; flex-direction: column; gap: 16px; }
.team-member__role { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.team-member__name { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.team-member__info > div { display: flex; flex-direction: column; gap: 8px; }
.team-member__desc { font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-blue-50); max-width: 351px; }
.team__viewall { margin-left: 33.3333%; border-bottom: 1px solid var(--color-night); padding: 4px 32px 4px 0; font-family: var(--font-body); font-size: 16px; color: var(--color-night); display: block; }
@media (max-width: 992px) {
.team__indent, .team__label, .team__viewall { margin-left: 0; }
.team__grid { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 40px; }
.team-member { gap: 16px; }
.team-member__avatar { min-height: 150px; }
.team__head p { font-size: 32px; }
}
/* ---------- Deep-blue / forest bands ---------- */
.cband { padding-top: var(--sp-80); padding-bottom: var(--sp-80); }
.cband--deep { background: var(--color-deep-blue); color: var(--color-almost-white); }
.cband--forest { background: var(--color-forest); color: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.cband--center { padding-top: 160px; padding-bottom: 160px; }
.cband--center h2 { max-width: 900px; margin: 0 auto; }
.cband__inner { display: grid; grid-template-columns: 4fr 8fr; align-items: center; gap: 40px; }
.cband--center { text-align: center; }
.cband--center .cband__inner { display: block; }
.cband h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-almost-white); }
.cband--forest h2 { font-size: 40px; }
.cband p { margin-top: 12px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); max-width: 620px; }
.cband--center p { margin-left: auto; margin-right: auto; }
.cband__cta { margin-top: 32px; }
@media (max-width: 992px) { .cband__inner { grid-template-columns: 1fr; } .cband h2 { font-size: 40px; } }
/* ---------- Careers / open roles ---------- */
.careers { background: var(--color-light-green); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.careers .container { display: flex; flex-direction: column; gap: var(--sp-120); }
.careers__head { align-items: start; }
.careers__head .label { max-width: 400px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50); }
.careers__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-forest); }
.careers__roles { align-items: start; }
.careers__roles > .label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50); }
.careers__list { width: 100%; display: flex; flex-direction: column; gap: 40px; }
.role-group__cat { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50); margin-bottom: 4px; }
/* Hover paints the grey panel and the arrow; a click opens the bullets, the
Apply link and the full-length description (Figma 1051:25758 / 1051:25822). */
.role { position: relative; border-top: 1px solid var(--color-green-10); }
.role::before { content: ""; position: absolute; inset: -1px 0 0 -16px; background: var(--color-green-5); opacity: 0; transition: opacity 0.2s ease; }
.role__top {
position: relative; width: 100%; display: grid; grid-template-columns: 478px 1fr 40px;
align-items: start; padding: 16px 32px 16px 0; text-align: left; background: none; border: 0; cursor: pointer;
}
.role__title { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-forest); }
.role__desc {
max-width: 322px; max-height: 0; overflow: hidden; opacity: 0;
font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50);
-webkit-mask-image: linear-gradient(180deg, #000 12%, transparent 93%);
mask-image: linear-gradient(180deg, #000 12%, transparent 93%);
transition: max-height 0.3s ease, opacity 0.2s ease;
}
.role__arrow { justify-self: end; font-family: var(--font-heading); font-size: 40px; line-height: 1; color: var(--color-forest); opacity: 0; transition: opacity 0.2s ease; }
.role__icon { display: none; justify-self: end; position: relative; width: 28px; height: 28px; color: var(--color-forest); }
.role__icon::before, .role__icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: currentColor; transition: opacity 0.2s ease; }
.role__icon::before { width: 100%; height: 1.5px; }
.role__icon::after { width: 1.5px; height: 100%; }
.role__reveal { position: relative; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.2s ease; }
.role__meta { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 43px; padding-bottom: 16px; }
.role__meta p { font-family: var(--font-heading); font-weight: 400; font-size: 20px; line-height: 22px; letter-spacing: -0.2px; color: var(--color-forest); }
.role__apply { display: inline-block; padding-bottom: 16px; font-family: var(--font-body); font-size: 14px; color: var(--color-forest); text-decoration: underline; text-underline-position: from-font; }
/* hover first, so the opened state below wins where the two overlap */
@media (min-width: 993px) {
.role:hover::before { opacity: 1; }
.role:hover .role__arrow { opacity: 1; }
.role:hover .role__desc { max-height: 88px; opacity: 1; }
}
.role.is-open::before { opacity: 1; }
.role.is-open .role__arrow { opacity: 1; }
.role.is-open .role__desc { max-height: 400px; opacity: 1; -webkit-mask-image: none; mask-image: none; }
.role.is-open .role__icon::after { opacity: 0; }
.role.is-open .role__reveal { max-height: 400px; opacity: 1; }
/* Careers page runs the same block on almost-white */
.careers--light { background: var(--color-almost-white); }
.careers--light .careers__head .label,
.careers--light .careers__roles > .label,
.careers--light .role-group__cat,
.careers--light .role__desc { color: var(--color-blue-50); }
.careers--light .careers__head h2,
.careers--light .role__title, .careers--light .role__arrow, .careers--light .role__icon,
.careers--light .role__meta p, .careers--light .role__apply,
.careers--light .careers__viewall { color: var(--color-night); }
.careers--light .role { border-top-color: var(--color-blue-10); }
.careers--light .role::before { background: var(--color-blue-5); }
.careers--light .careers__viewall { border-bottom-color: var(--color-night); }
.careers__viewall { display: block; border-bottom: 1px solid var(--color-forest); padding: 4px 32px 4px 0; font-family: var(--font-body); font-size: 16px; color: var(--color-forest); }
@media (max-width: 992px) {
.careers__head, .careers__roles { grid-template-columns: 1fr; row-gap: 24px; }
.careers__head h2 { font-size: 40px; }
/* mobile is an accordion: panel always on, edge to edge, plus/minus toggle */
.role { margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad)); border-top: none; }
.role::before { inset: 0; opacity: 1; }
.role__top { grid-template-columns: 1fr 28px; padding: 16px var(--container-pad); }
.role__title { grid-area: 1 / 1; }
.role__icon { grid-area: 1 / 2; }
.role__desc { grid-area: 2 / 1 / 3 / -1; max-width: none; }
.role.is-open .role__desc { padding-top: 16px; }
.role__arrow { display: none; }
.role__icon { display: block; }
.role__reveal { padding: 0 var(--container-pad); }
.role__meta { grid-template-columns: 1fr 1fr; row-gap: 16px; column-gap: 16px; }
}
/* ---------- Principles ---------- */
.principles { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.principles__head { align-items: start; margin-bottom: var(--sp-80); }
.principles__head > .label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.principles__intro h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
.principles__intro p { margin-top: 32px; max-width: 588px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
/* Horizontal slider: cards run off the right edge. Scrolls with the wheel or
trackpad natively, and by dragging (see [data-drag-scroll] in main.js). */
.principles__slider {
display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
padding-left: var(--container-pad); padding-right: var(--container-pad);
scrollbar-width: none; cursor: grab;
}
.principles__slider::-webkit-scrollbar { display: none; }
.principles__slider.is-dragging { cursor: grabbing; user-select: none; }
.principle {
position: relative; overflow: hidden; flex: 0 0 448px; height: 316px;
background: var(--color-blue-5); padding-top: 16px;
display: flex; flex-direction: column; justify-content: center;
}
.principle__graphic { position: absolute; left: 120px; top: 117px; width: 708px; height: 708px; max-width: none; opacity: 0.4; pointer-events: none; }
.principle__body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 8px; padding-left: 16px; }
.principle__label { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.principle h3 { max-width: 339px; font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); }
.principle__desc { max-width: 293px; font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-blue-50); }
.principle__num {
position: relative; z-index: 1; background: var(--color-almost-white);
border-top: 1px solid var(--color-blue-10); padding: 4px 8px;
font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-night); opacity: 0.5;
}
@media (max-width: 992px) {
.principles__head { grid-template-columns: 1fr; row-gap: 24px; margin-bottom: 32px; }
.principles__intro h2 { font-size: 40px; }
}
@media (max-width: 768px) { .principle { flex: 0 0 300px; } }
/* ---------- Investor relations contact ---------- */
/* Night band: the wireframe volume sits off the left edge, the copy runs in
the 8-col track with the buttons pinned to the bottom (Figma 1051:14385). */
.ir-contact {
position: relative; overflow: hidden; background: var(--color-night); color: var(--color-almost-white);
min-height: 800px; padding-top: var(--sp-120); padding-bottom: var(--sp-120); display: flex;
}
/* the maze SVG strokes are night-coloured, so invert them onto the dark ground */
.ir-contact__bg { position: absolute; left: -280px; top: -150px; width: 1040px; height: 1040px; max-width: none; opacity: 0.4; filter: invert(1); transform: rotate(-25deg); pointer-events: none; }
.ir-contact__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 4fr 8fr; width: 100%; }
.ir-contact__body { grid-column: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 80px; }
.ir-contact__text { display: flex; flex-direction: column; gap: 32px; }
.ir-contact__label { display: none; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); }
.ir-contact__text h2 { max-width: 622px; font-family: var(--font-heading); font-weight: 400; font-size: 84px; line-height: 0.9; letter-spacing: -1.26px; color: var(--color-almost-white); }
.ir-contact__desc { max-width: 411px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); }
.ir-contact__buttons { display: flex; }
.ir-contact__buttons .btn--ghost { border-color: var(--color-gray-50); color: var(--color-almost-white); }
.ir-contact__buttons .btn--ghost:hover { border-color: var(--color-gray-40); }
/* Brand band: label above, headline centred, wordmark below (Figma 1051:14263) */
.brandband {
position: relative; overflow: hidden; background: var(--color-night);
min-height: 800px; padding: 24px 32px; text-align: center;
display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
.brandband__bg { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1440px; max-width: none; opacity: 0.1; pointer-events: none; }
.brandband__tag, .brandband__title, .brandband__logo { position: relative; z-index: 1; }
.brandband__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-gray-40); }
.brandband__title { max-width: 966px; font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-almost-white); }
.brandband__logo { display: flex; align-items: center; gap: 8px; color: var(--color-almost-white); }
.brandband__logo .logo__mark { width: 24px; height: 24px; }
.brandband__logo .logo__word { color: var(--color-almost-white); }
@media (max-width: 992px) {
.ir-contact__inner { grid-template-columns: 1fr; }
.ir-contact__body { grid-column: 1; }
.ir-contact__label { display: block; }
.ir-contact__text { gap: 16px; }
.ir-contact__text h2 { font-size: 40px; letter-spacing: -0.4px; }
.ir-contact__desc { max-width: none; }
}
@media (max-width: 768px) {
.ir-contact { min-height: 700px; }
.ir-contact__buttons { width: 100%; }
.ir-contact__buttons .btn { flex: 1; min-width: 0; padding: 13px 12px; }
.ir-contact__bg { left: -240px; top: -120px; width: 700px; height: 700px; }
.brandband { min-height: 700px; padding: 16px; }
.brandband__title { font-size: 40px; letter-spacing: -0.4px; }
.brandband__logo { transform: scale(0.75); }
}
/* Mobile type scale — verified against Figma 375 frames */
@media (max-width: 768px) {
.scomplex__title { font-size: 28px; }
.scomplex-item h4 { font-size: 28px; }
.team__head h2, .team__head p { font-size: 24px; }
.team__label { font-size: 14px; }
.team-member__name { font-size: 20px; }
.team-member__role { font-size: 14px; }
.team-member__desc { font-size: 14px; }
.cband--forest h2 { font-size: 40px; }
.cband--deep h2, .cband--center h2 { font-size: 24px; }
.careers__head h2 { font-size: 32px; }
.role__title { font-size: 24px; }
/* Careers page reuses these classes at larger sizes in the mobile design */
.page-careers .scomplex__title { font-size: 32px; }
.page-careers .role__title { font-size: 28px; }
}
/* ===== assets/css/insights.css ===== */
/* Insights page */
/* ---------- News & announcements ---------- */
.news { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-80); }
.news .container { display: flex; flex-direction: column; gap: var(--sp-80); }
.news__head { align-items: center; }
.news__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
.search { display: inline-flex; align-items: center; gap: 4px; width: 320px; height: 44px; padding: 10px 4px; border-bottom: 1px solid var(--color-blue-50); font-family: var(--font-body); font-size: 16px; color: var(--color-blue-50); }
.search svg { width: 20px; height: 20px; }
.news__body { align-items: stretch; }
.news__list { display: flex; flex-direction: column; }
.news-item { border-bottom: 1px solid var(--color-blue-10); padding: 24px 16px 24px 32px; display: flex; flex-direction: column; gap: 8px; }
.news-item__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.news-item__title { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); max-width: 334px; }
.news-item__desc { max-width: 302px; font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-night); -webkit-mask-image: linear-gradient(180deg, #000 1%, transparent 85%); mask-image: linear-gradient(180deg, #000 1%, transparent 85%); }
.news-item .link { margin-top: 4px; }
.news__featured { position: relative; overflow: hidden; background: var(--color-blue-10); min-height: 643px; display: flex; align-items: flex-end; }
.news__featured-maze { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 1030px; max-width: none; opacity: 0.5; pointer-events: none; }
.news__featured-card { position: relative; z-index: 1; background: var(--color-almost-white); margin: 16px; padding: 16px; width: calc(100% - 32px); display: flex; flex-direction: column; gap: 16px; }
.news__featured-card .tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.news__featured-card h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.news__featured-card a { font-family: var(--font-body); font-size: 14px; color: var(--color-night); text-decoration: underline; text-underline-position: from-font; }
@media (max-width: 992px) {
.news__head h2 { font-size: 40px; }
.news__featured { min-height: 420px; }
.news__featured-card { width: auto; }
}
/* ---------- In the media ---------- */
.media { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.media .container { display: flex; flex-direction: column; gap: var(--sp-80); }
.media__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: -0.4px; color: var(--color-night); max-width: 640px; }
.media__head h2 .muted { color: var(--color-blue-50); }
.media__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap-lg); }
.media-card { display: flex; flex-direction: column; gap: 16px; }
.media-card__img { height: 176px; background: var(--color-blue-10); overflow: hidden; position: relative; }
.media-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.media-card__tag { font-family: var(--font-heading); font-style: italic; font-size: 14px; line-height: 20px; color: var(--color-blue-50); }
.media-card__title { font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 1.05; letter-spacing: -0.24px; color: var(--color-night); }
.media-card .link { color: var(--color-night); text-decoration: underline; text-underline-position: from-font; }
@media (max-width: 992px) { .media__grid { grid-template-columns: 1fr; } }
/* ---------- Company news band (deep-blue) ---------- */
.company-band { background: var(--color-deep-blue); color: var(--color-almost-white); padding-top: var(--sp-80); padding-bottom: var(--sp-80); }
.company-band__inner { display: grid; grid-template-columns: 4fr 8fr; align-items: end; column-gap: 40px; }
.company-band__head .label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); }
.company-band__head h2 { margin-top: 40px; font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-almost-white); }
.company-band__desc { margin-top: 12px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); max-width: 520px; }
.company-band__form { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-gray-40); }
.company-band__form input { flex: 1; min-width: 0; padding: 12px 16px 12px 0; border: none; background: transparent; font-family: var(--font-body); font-size: 16px; color: var(--color-almost-white); }
.company-band__form input::placeholder { color: var(--color-gray-40); }
.company-band__form input:focus { outline: none; }
.company-band__form button { flex-shrink: 0; padding: 12px 16px; border: none; border-left: 1px solid var(--color-gray-40); background: none; font-family: var(--font-body); font-size: 16px; color: var(--color-almost-white); cursor: pointer; }
@media (max-width: 992px) { .company-band__inner { grid-template-columns: 1fr; row-gap: 40px; align-items: stretch; } .company-band__head h2 { margin-top: 16px; } }
/* ---------- Research & Insights ---------- */
.ri { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.ri .container { display: flex; flex-direction: column; gap: var(--sp-80); }
.ri__head { display: grid; grid-template-columns: 4fr 8fr; align-items: start; }
.ri__head p { max-width: 220px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.ri__head h2 { text-align: center; font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
/* Night band bleeding past the label column, with a light card set to the
right. Figma 1051:11356 — the ascii sits at 10% over the night ground. */
.ri__featured {
position: relative; overflow: hidden; background: var(--color-night);
display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
padding: 16px 16px 16px 0;
}
.ri__featured-bg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1376px; max-width: none; opacity: 0.1; pointer-events: none; }
.ri__card {
position: relative; z-index: 1; width: 908px; max-width: 100%; min-height: 300px;
background: var(--color-blue-5); padding-top: 16px;
display: flex; flex-direction: column; justify-content: space-between;
}
.ri__card-top { display: flex; align-items: flex-start; gap: 16px; padding: 0 16px; }
.ri__f-title { display: flex; flex-direction: column; gap: 8px; width: 471px; max-width: 100%; }
.ri__f-title .tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.ri__f-title h3 { max-width: 383px; font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
/* the copy fades into the card as it descends */
.ri__f-desc {
width: 309px; font-family: var(--font-body); font-size: 14px; line-height: 22px;
background-image: linear-gradient(179deg, var(--color-night) 2%, var(--color-blue-5) 91%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ri__card-bottom { border-top: 1px solid var(--color-blue-10); display: flex; align-items: center; padding: 8px 16px; }
.ri__card-bottom span { width: 470px; max-width: 60%; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.ri__card-bottom a { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-night); text-decoration: underline; text-underline-position: from-font; }
.ri__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap-lg); }
.ri-col { display: flex; flex-direction: column; gap: 16px; }
.ri-col__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; color: var(--color-blue-50); }
.ri-col h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.ri-col p { font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-blue-50); max-width: 240px; }
.ri-col .link { margin-top: 8px; color: var(--color-night); text-decoration: underline; text-underline-position: from-font; }
@media (max-width: 992px) {
.ri__head { grid-template-columns: 1fr; row-gap: 24px; } .ri__head h2 { text-align: left; font-size: 40px; }
.ri__featured { padding: 16px; }
.ri__card-top { flex-direction: column; }
.ri__f-desc { width: 100%; }
.ri__cols { grid-template-columns: 1fr; }
}
/* ---------- Publication library ---------- */
.publib { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.publib__inner { align-items: start; }
.publib__inner > .label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.publib__main h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); margin-bottom: 80px; }
@media (max-width: 992px) {
.publib__inner { grid-template-columns: 1fr; row-gap: 24px; }
}
@media (max-width: 768px) {
.publib__main h2 { font-size: 32px; margin-bottom: 44px; }
/* Figma 375: rows sit close together, the label carries the separation */
.publib .doc-list { gap: 8px; }
}
/* ---------- Newsletter signup (forest band) ---------- */
.signup { background: var(--color-forest); color: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.signup > .split { align-items: start; }
.signup .label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); }
.signup__main { display: flex; flex-direction: column; gap: 40px; }
.signup__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-almost-white); }
.signup__head p { margin-top: 12px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); max-width: 620px; }
.signup__form { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-gray-40); }
.signup__form input { flex: 1; min-width: 0; padding: 12px 16px 12px 0; border: none; background: transparent; font-family: var(--font-body); font-size: 16px; color: var(--color-almost-white); }
.signup__form input::placeholder { color: var(--color-gray-40); }
.signup__form input:focus { outline: none; }
.signup__form button { flex-shrink: 0; padding: 12px 16px; border: none; border-left: 1px solid var(--color-gray-40); background: none; font-family: var(--font-body); font-size: 16px; color: var(--color-almost-white); cursor: pointer; }
@media (max-width: 768px) { .signup__head h2 { font-size: 32px; } }
/* Mobile type scale — verified against Figma 375 frames */
@media (max-width: 768px) {
.news__head h2 { font-size: 32px; }
.news-item__title { font-size: 28px; }
.news__featured-card h3 { font-size: 28px; }
.media__head h2 { font-size: 24px; }
.media-card__title { font-size: 28px; }
.company-band__head h2 { font-size: 32px; }
.ri__head h2 { font-size: 32px; }
.ri__f-title h3 { font-size: 28px; }
.ri-col h3 { font-size: 28px; }
}
/* ===== assets/css/contact.css ===== */
/* Contact page */
/* ---------- Hero ---------- */
.hero--contact .hero__bg { left: 0; width: 1440px; }
/* Figma "Contact [375]": hero frame 747px incl. the 64px header, volume
graphic 672x672 at -148/-193, content block flush left above a 44px gutter */
@media (max-width: 768px) {
.hero--contact { min-height: 683px; padding: 0 0 44px; }
/* the artwork is centred and drawn at 672/1565 of its desktop scale */
.hero--contact .hero__bg { top: 0; left: 50%; transform: translateX(-50%); width: 618px; height: auto; }
.hero--contact .hero__inner { align-items: flex-start; text-align: left; gap: 0; }
.hero--contact .hero__content { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.hero--contact .hero__title { line-height: 1; }
}
/* ---------- Find the right team (audience cards) ---------- */
.audience { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.audience .container { display: flex; flex-direction: column; gap: var(--sp-80); }
.audience__head { align-items: start; }
.audience__head .label { max-width: 338px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.audience__main h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
.audience__main p { margin-top: 32px; max-width: 383px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.audience__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.contact-card { position: relative; overflow: hidden; min-height: 316px; background: var(--color-blue-5); display: flex; flex-direction: column; justify-content: space-between; }
.contact-card__graphic { position: absolute; left: 120px; top: 117px; width: 708px; height: 708px; opacity: 0.4; pointer-events: none; }
.contact-card__body { position: relative; z-index: 1; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.contact-card__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.contact-card__title { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); }
.contact-card__desc { max-width: 293px; font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-blue-50); }
.contact-card__email { position: relative; z-index: 1; border-top: 1px solid var(--color-blue-10); padding: 8px 16px; font-family: var(--font-body); font-size: 16px; color: var(--color-blue-50); }
@media (max-width: 992px) { .audience__head { grid-template-columns: 1fr; row-gap: 24px; } .audience__main h2 { font-size: 40px; } .audience__grid { grid-template-columns: 1fr; } }
/* ---------- Enquiry form ---------- */
.enquiry { background: var(--color-night); color: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.enquiry__inner { align-items: start; }
.routing { display: flex; flex-direction: column; gap: 32px; padding-left: 32px; border-left: 1px solid var(--color-gray-40); }
.routing__item h4 { font-family: var(--font-heading); font-weight: 400; font-size: 20px; line-height: 1.1; letter-spacing: -0.2px; color: var(--color-almost-white); }
.routing__item p { margin-top: 4px; font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-gray-40); }
.enquiry__form { display: flex; flex-direction: column; gap: 40px; }
.enquiry__intro h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-almost-white); }
.enquiry__intro p { margin-top: 24px; max-width: 831px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); }
.enquiry-form { display: flex; flex-direction: column; gap: 64px; }
/* single-line 44px field, text centred, full-width underline at the bottom */
.enquiry-form .field__control { height: 44px; font-size: 16px; padding: 0 16px 0 0; border-bottom-color: var(--color-gray-40); }
.enquiry-form textarea.field__control { height: 164px; padding: 10px 0 12px 0; }
/* paired fields sit flush with a vertical divider between them */
.enquiry-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: end; }
.enquiry-form .row2 > .field:first-child { border-right: 1px solid var(--color-gray-40); }
.enquiry-form .row2 > .field:last-child .field__control { padding-left: 16px; }
/* chevron on the selects — inset from the field edge */
.enquiry-form select.field__control {
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23efefec' stroke-opacity='0.7' stroke-width='1' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 20px center;
}
.enquiry-form .btn { margin-top: 16px; }
.enquiry-form .consent { display: flex; gap: 12px; align-items: flex-start; }
.enquiry-form .consent input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--color-almost-white); }
.enquiry-form .consent label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); max-width: 570px; }
.enquiry-form .btn { align-self: flex-start; }
@media (max-width: 992px) {
.enquiry__inner { grid-template-columns: 1fr; row-gap: 40px; }
.routing { padding-left: 0; border-left: none; }
.enquiry__intro h3 { font-size: 32px; }
}
/* ---------- Offices ---------- */
.offices { position: relative; overflow: hidden; background: var(--color-light-green); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.offices__graphic { position: absolute; left: -80px; top: 0; width: 800px; height: 800px; opacity: 0.35; pointer-events: none; }
.offices__inner { position: relative; z-index: 1; align-items: start; }
.offices__label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.offices__main h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); margin-bottom: 56px; }
.office-row { border-top: 1px solid var(--color-blue-10); padding: 16px 0; }
.office-row__cat { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); margin-bottom: 16px; }
.office-row__line { display: flex; align-items: baseline; gap: 32px; }
.office-row__city { width: 470px; font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.office-row__addr { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
@media (max-width: 992px) {
.offices__inner { grid-template-columns: 1fr; row-gap: 24px; }
.offices__main h2 { font-size: 40px; }
.office-row__line { flex-direction: column; gap: 4px; } .office-row__city { width: auto; }
.offices__graphic { display: none; }
}
/* Mobile type scale — verified against Figma 375 frames */
@media (max-width: 768px) {
.audience__main h2 { font-size: 40px; }
.contact-card__title { font-size: 28px; }
.enquiry__intro h3 { font-size: 24px; }
.offices__main h2 { font-size: 40px; }
.office-row__city { font-size: 28px; }
/* Enquiry form: fields run edge-to-edge, text padded inside; even spacing */
.enquiry-form { gap: 24px; margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad)); }
.enquiry-form .row2 { display: contents; }
.enquiry-form .row2 > .field:first-child { border-right: none; }
.enquiry-form .field__control { padding-left: var(--container-pad); padding-right: var(--container-pad); }
.enquiry-form textarea.field__control { padding-left: var(--container-pad); padding-right: var(--container-pad); }
.enquiry-form select.field__control { padding-right: 40px; background-position: right var(--container-pad) center; }
.enquiry-form .consent { padding-left: var(--container-pad); padding-right: var(--container-pad); }
.enquiry-form .btn { align-self: stretch; justify-content: center; margin: 8px var(--container-pad) 0; }
/* Audience cards become an edge-to-edge horizontal slider */
.audience__grid {
display: flex; grid-template-columns: none;
margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad));
padding: 0 var(--container-pad); gap: 16px; overflow-x: auto;
scroll-snap-type: x proximity; scroll-padding-left: var(--container-pad); scrollbar-width: none;
}
.audience__grid::-webkit-scrollbar { display: none; }
.contact-card { flex: 0 0 300px; scroll-snap-align: start; }
}
/* ===== assets/css/solutions.css ===== */
/* ==========================================================================
Solutions page — extends shared patterns in home.css
========================================================================== */
/* Hero variant (deep-blue, breadcrumb, numbered stats) */
.hero--deepblue { background-color: var(--color-deep-blue); }
.hero--deepblue .hero__title,
.hero--deepblue .hero__text { color: var(--color-almost-white); }
.hero__breadcrumb {
font-family: var(--font-heading);
font-style: italic;
font-size: 16px;
line-height: 20px;
color: var(--color-almost-white);
}
.hero__breadcrumb .muted { color: var(--color-gray-40); }
.hero--deepblue .hero__stat h3,
.hero--deepblue .hero__stat p { color: var(--color-almost-white); }
/* Generic dark maze card reused (matches .cap-card) */
.sol-section { padding: 120px 0; }
.sol-section--light { background-color: var(--color-almost-white); }
.sol-section--blue5 { background-color: var(--color-blue-5); }
.sol-section--forest { background-color: var(--color-forest); }
.sol-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 80px; }
.sol-head .label {
flex-shrink: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--color-blue-50);
}
.sol-head h2 {
width: 939px;
max-width: 100%;
font-family: var(--font-heading);
font-weight: 400;
font-size: 62px;
line-height: 0.9;
letter-spacing: -0.93px;
color: var(--color-night);
}
@media (max-width: 1024px) {
.sol-head { flex-direction: column; gap: 24px; }
.sol-head h2 { width: 100%; font-size: 44px; }
}
@media (max-width: 768px) {
.sol-head h2 { font-size: 32px; }
}
/* Section 2 — 2x2 capability cards */
.sol-grid-head { display: grid; grid-template-columns: 4fr 8fr; align-items: start; margin-bottom: 80px; }
.sol-grid-head .label { max-width: 338px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-night); opacity: 0.5; }
.sol-grid-head h2 { width: 100%; font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
.sol-grid-head h2 .muted { color: var(--color-blue-50); }
.sol-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); width: 66.6667%; margin-left: auto; }
.sol-card { position: relative; overflow: hidden; height: 316px; background: var(--color-blue-5); padding-top: 16px; display: flex; flex-direction: column; justify-content: flex-start; }
.sol-card__graphic { position: absolute; left: 120px; top: 117px; width: 708px; height: 708px; opacity: 0.5; pointer-events: none; }
.sol-card__body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: flex-start; padding: 16px 16px 0; }
.sol-card__body h3 { font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: -0.32px; color: var(--color-night); }
.sol-card__body p { width: 293px; max-width: 100%; font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-blue-50); }
.sol-card__num { position: relative; z-index: 1; border-top: 1px solid var(--color-blue-10); padding: 4px 8px; font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-night); opacity: 0.5; }
.sol-allrow { display: flex; justify-content: flex-end; margin-top: var(--sp-80); }
.sol-allrow a { width: 66.6667%; max-width: 100%; padding: 4px 32px 4px 0; border-bottom: 1px solid var(--color-night); font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-night); }
@media (max-width: 992px) {
.sol-grid-head { grid-template-columns: 1fr; row-gap: 24px; }
.sol-grid-head h2 { font-size: 44px; }
.sol-cards { width: 100%; }
.sol-allrow a, .onchain__more a { width: 100%; }
}
/* Mobile: cards become a horizontal slider that runs past both screen edges */
@media (max-width: 768px) {
.sol-cards {
display: flex;
width: auto;
margin-left: calc(-1 * var(--container-pad));
margin-right: calc(-1 * var(--container-pad));
padding: 0 var(--container-pad);
overflow-x: auto;
scroll-snap-type: x proximity;
scroll-padding-left: var(--container-pad); /* snap first card to the container, not the screen edge */
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sol-cards::-webkit-scrollbar { display: none; }
.sol-card { flex: 0 0 78%; scroll-snap-align: start; }
.sol-allrow { margin-top: 40px; }
}
/* Section 3 — Risk managed */
/* overflow clips the maze; the padding stops it clipping the ascenders and
descenders, which sit outside the 0.9 line box */
.risk-top { position: relative; overflow: hidden; padding: 8px 0 10px; }
.risk-title { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
.risk-maze { position: absolute; right: 0; top: -10px; width: 660px; height: 190px; object-fit: cover; object-position: top; opacity: 0.35; pointer-events: none; }
.risk-sub { border-top: 1px solid var(--color-blue-10); padding-top: 16px; margin-top: 24px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.risk-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 80px; }
.risk-col__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.risk-col h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); margin: 4px 0 16px; }
.risk-col p { max-width: 320px; font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-blue-50); }
@media (max-width: 768px) {
.risk-title { font-size: 40px; }
.risk-maze { display: none; }
.risk-cols { grid-template-columns: 1fr; gap: 40px; }
.risk-col h3 { font-size: 32px; }
}
/* Section 4 — Institutional access (forest feature) */
.access { position: relative; overflow: hidden; background: var(--color-forest); min-height: 800px; padding: 32px 0; display: flex; align-items: center; }
.access__bg { position: absolute; right: -120px; top: 50%; transform: translateY(-50%); height: 140%; pointer-events: none; }
.access__inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; width: 711px; max-width: 100%; min-height: 736px; }
.access__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-almost-white); }
.access__title { width: 746px; max-width: 100%; font-family: var(--font-heading); font-weight: 400; font-size: 84px; line-height: 0.9; letter-spacing: -1.26px; color: var(--color-almost-white); }
.access .btn--light { color: var(--color-deep-blue); align-self: flex-start; }
@media (max-width: 768px) {
.access { min-height: 0; padding: 56px 0; }
.access__inner { min-height: 0; gap: 40px; width: 100%; }
.access__title { font-size: 44px; letter-spacing: -1px; }
.access__bg { opacity: 0.4; }
}
/* Section 5 — Liquidity & execution (reuses .capabilities/.cap-card) */
/* Each row is a link; the dark panel, its graphic and the feature grid are
the hover state. The panel bleeds 16px left of the text column. */
.liq-list { display: flex; flex-direction: column; gap: 4px; }
.liq-item { display: block; color: inherit; text-decoration: none; }
.liq-item .cap-label { padding-left: 0; }
.liq-card { position: relative; border-top: 1px solid var(--color-blue-10); min-height: 344px; padding: 16px 32px 32px 0; display: flex; flex-direction: column; gap: 8px; }
.liq-card__panel { position: absolute; inset: -1px 0 0 -16px; overflow: hidden; background: var(--color-night); opacity: 0; transition: opacity 0.25s ease; }
.liq-card__panel img { position: absolute; right: -128px; top: 50%; width: 617px; height: 617px; max-width: none; transform: translateY(-50%) rotate(-90deg); pointer-events: none; }
.liq-item:hover .liq-card__panel { opacity: 1; }
.liq-card__title { position: relative; font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); white-space: nowrap; transition: color 0.25s ease; }
.liq-item:hover .liq-card__title { color: var(--color-almost-white); }
.liq-card__features {
position: relative; margin-top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 43px; row-gap: 28px; width: 426px; max-width: 100%;
font-family: var(--font-heading); font-size: 20px; line-height: 22px; letter-spacing: -0.2px;
color: var(--color-almost-white); opacity: 0; transition: opacity 0.25s ease;
}
.liq-item:hover .liq-card__features { opacity: 1; }
.liq-more { display: block; border-bottom: 1px solid var(--color-night); padding: 4px 32px 4px 0; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-night); }
.cap-label--dark { color: var(--color-night); opacity: 0.5; }
@media (max-width: 768px) {
/* no hover on touch: the panel and features are always on, edge to edge */
.liq-card {
min-height: 0; padding: 16px var(--container-pad) 32px;
margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad));
}
.liq-card__panel { inset: -1px 0 0 0; opacity: 1; }
.liq-card__panel img { right: -180px; width: 460px; height: 460px; }
.liq-card__title { color: var(--color-almost-white); font-size: 24px; white-space: normal; }
.liq-card__features { opacity: 1; width: 100%; column-gap: 16px; row-gap: 16px; font-size: 16px; letter-spacing: -0.16px; }
.liq-more { font-size: 14px; }
}
/* Section 6 — Systematic investing, brought on-chain */
.onchain { background: var(--color-light-blue); padding: 120px 0 80px; }
.onchain .container { display: flex; flex-direction: column; gap: 80px; }
.onchain__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.onchain__head .tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-night); opacity: 0.5; }
.onchain__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 64px; line-height: 0.9; letter-spacing: -0.96px; color: var(--color-night); }
.onchain__cols { display: grid; grid-template-columns: 1fr 437px 1fr; gap: 32px; }
.onchain-col { position: relative; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; background: var(--color-blue-10); overflow: hidden; padding: 0 24px; }
.onchain-col__label { position: absolute; top: 0; left: 0; width: 100%; border-bottom: 1px solid var(--color-blue-10); padding: 4px 8px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-night); opacity: 0.5; }
.onchain-col img { height: 84px; width: auto; }
.onchain-col h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); text-align: center; max-width: 339px; }
.onchain-col--dark { background: var(--color-night); }
.onchain-col--dark h3 { color: var(--color-almost-white); }
.onchain-col__caption { position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid var(--color-gray-10); padding: 4px 8px; font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-almost-white); opacity: 0.5; }
.onchain__products { display: flex; flex-direction: column; gap: 40px; }
.onchain-prow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
.onchain-prod { border-bottom: 1px solid var(--color-blue-10); padding: 16px 32px 16px 0; min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.onchain-prod h4 { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); }
.onchain-prod__label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-night); opacity: 0.5; }
.onchain__more { display: flex; justify-content: flex-end; }
.onchain__more a { width: 66.6667%; border-bottom: 1px solid var(--color-night); padding: 4px 32px 4px 0; font-family: var(--font-body); font-size: 16px; color: var(--color-night); }
@media (max-width: 1024px) {
.onchain__head h2 { font-size: 44px; }
.onchain__cols { grid-template-columns: 1fr; }
.onchain-col { height: 320px; }
.onchain-prow { grid-template-columns: 1fr; }
.onchain-prod:first-child { display: none; }
.onchain__more a { width: 100%; }
}
/* Section 7 — Syntetika partner platform */
.syntetika { background: var(--color-light-blue); padding: 80px 0; }
.syntetika__inner { display: grid; grid-template-columns: 4fr 8fr; align-items: start; }
.syntetika__label { width: auto; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.syntetika__main { width: 100%; display: flex; flex-direction: column; gap: 64px; }
.syntetika__head h2, .syntetika__head p { font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: -0.32px; }
.syntetika__head h2 { color: var(--color-night); }
.syntetika__head p { color: var(--color-blue-50); }
.syntetika__cta { display: block; border-bottom: 1px solid var(--color-night); padding: 4px 0; font-family: var(--font-body); font-size: 16px; color: var(--color-night); }
@media (max-width: 1024px) {
.syntetika__inner { grid-template-columns: 1fr; row-gap: 32px; }
.syntetika__label, .syntetika__main { width: 100%; }
}
.home-cta--deepblue { background: var(--color-night); }
/* Mobile type scale — verified against Figma 375 frames */
@media (max-width: 768px) {
.sol-grid-head h2 { font-size: 32px; }
.sol-card__body h3 { font-size: 28px; }
.risk-top { padding: 4px 0 6px; }
.risk-title { font-size: 28px; }
.risk-col h3 { font-size: 24px; }
.access__title { font-size: 40px; letter-spacing: -0.4px; }
.onchain__head h2 { font-size: 28px; }
.onchain-col h3 { font-size: 28px; }
/* Figma 375: the three columns become an edge-to-edge horizontal slider */
.onchain__cols {
display: flex; grid-template-columns: none;
margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad));
padding: 0 var(--container-pad); gap: 32px; overflow-x: auto;
scroll-snap-type: x proximity; scroll-padding-left: var(--container-pad); scrollbar-width: none;
}
.onchain__cols::-webkit-scrollbar { display: none; }
.onchain-col { flex: 0 0 332px; height: 398px; scroll-snap-align: start; }
.syntetika__head h2, .syntetika__head p { font-size: 24px; }
/* Solutions liquidity cap-cards are 24 in the mobile design (Home's are 28) */
.page-solutions .cap-card__title { font-size: 24px; }
}
/* ===== assets/css/detail.css ===== */
/* Detail sub-pages (strategy attributes, documents, article body) */
/* ---------- Centered detail hero (color bg + ascii) ---------- */
.dhero { position: relative; overflow: hidden; min-height: 736px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 32px 0; }
.dhero--purple { background: var(--color-purple); }
.dhero--night { background: var(--color-night); }
.dhero--forest { background: var(--color-forest); }
.dhero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.dhero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 1169px; padding: 0 32px; }
.dhero__crumb { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-almost-white); }
.dhero__crumb .muted { color: var(--color-gray-40); }
.dhero__title { font-family: var(--font-heading); font-weight: 400; font-size: 84px; line-height: 0.9; letter-spacing: -1.26px; color: var(--color-almost-white); }
.dhero__desc { max-width: 469px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-almost-white); }
@media (max-width: 768px) { .dhero { min-height: 0; padding: 100px 0 64px; } .dhero__title { font-size: 40px; letter-spacing: -0.4px; } .dhero__desc { font-size: 14px; } }
/* ---------- Strategy library ---------- */
.strat { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.strat .container { display: flex; flex-direction: column; gap: 40px; }
.strat__head { align-items: start; }
.strat__head .label { max-width: 302px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.strat__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
/* Subnav is a full-bleed bar; the selected strategy tab is filled, not outlined */
.strat__subnav {
align-items: stretch; border-bottom: 1px solid var(--color-blue-10);
margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad));
padding-left: var(--container-pad); padding-right: var(--container-pad);
}
.strat__subnav .label { align-self: center; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.strat-tabs { display: flex; gap: 16px; }
.strat-tab {
flex: 1; min-width: 0; display: flex; align-items: center; height: 36px;
padding: 0 0 0 16px; border: none; background: none; cursor: pointer;
font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50);
}
.strat-tab.is-active { background: var(--color-blue-10); color: var(--color-night); }
.strat-panel { display: flex; flex-direction: column; gap: 40px; }
.strat-panel[hidden] { display: none; }
.strat__body { align-items: start; }
.strat__body > .label { font-family: var(--font-body); font-size: 16px; color: var(--color-blue-50); }
.strat__main { display: flex; flex-direction: column; gap: 40px; }
.strat__intro h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.strat__intro p { margin-top: 8px; max-width: 745px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.strat-attrs__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; color: var(--color-blue-50); margin-bottom: 40px; }
.strat-attrs__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 168px; row-gap: 80px; }
.attr h4 { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); }
.attr p { margin: 16px 0; max-width: 302px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.attr__doc { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--color-blue-50); }
.strat-docs__label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
/* the grid sits 16px left of the text column so the hover panel lines up */
.strat-docs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-left: -16px; padding-bottom: 64px; border-top: 1px solid var(--color-blue-10); }
/* documents are download links: panel and arrow appear on hover */
.doc-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 80px; color: inherit; text-decoration: none; }
.doc-card:hover { background: var(--color-blue-5); }
.doc-card h4 { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); }
.doc-card h4 span { opacity: 0; transition: opacity 0.2s ease; }
.doc-card:hover h4 span { opacity: 1; }
.doc-card p { margin: 0; font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
@media (max-width: 992px) {
.strat__head, .strat__subnav, .strat__body { grid-template-columns: 1fr; row-gap: 24px; }
.strat__head h2 { font-size: 40px; }
.strat-attrs__grid { grid-template-columns: 1fr; column-gap: 32px; row-gap: 40px; }
/* tabs scroll sideways edge to edge; documents are always panelled */
.strat__subnav .label { display: none; }
.strat__subnav { row-gap: 0; }
.strat-tabs { margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad)); overflow-x: auto; scrollbar-width: none; }
.strat-tabs::-webkit-scrollbar { display: none; }
.strat-tab { flex: 0 0 188px; }
.strat-docs__grid {
grid-template-columns: 1fr; gap: 16px; border-top: none; padding-bottom: 0;
margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad));
}
.doc-card { gap: 10px; padding: 16px 32px 40px var(--container-pad); background: var(--color-blue-5); }
.doc-card h4 span { opacity: 1; }
}
/* ---------- Request documentation band (forest) ---------- */
.reqdoc { background: var(--color-forest); color: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.reqdoc--night { background: var(--color-night); }
.reqdoc__inner { align-items: start; }
.reqdoc__inner > .label { font-family: var(--font-body); font-size: 16px; color: var(--color-gray-40); }
.reqdoc__main h2 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-almost-white); }
/* the muted second line is part of the same Newsreader lockup as the heading */
.reqdoc__main p { margin-top: 0; max-width: 716px; font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-gray-40); }
/* the rule runs past the container to the page edge, as in the Figma frame */
.reqdoc__cta {
display: block; margin-top: 80px; margin-right: calc(-1 * var(--container-pad));
padding: 10px 16px 10px 0; border-bottom: 1px solid var(--color-almost-white);
font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-almost-white);
}
@media (max-width: 992px) { .reqdoc__inner { grid-template-columns: 1fr; row-gap: 24px; } }
/* ---------- Long-form article body ---------- */
.article { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.article__body { grid-column: 5 / 13; display: flex; flex-direction: column; gap: 40px; }
.article__lead { max-width: 854px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-night); }
.article__block h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); margin-bottom: 24px; }
.article__block h4 { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); margin-bottom: 24px; }
.article__block p { max-width: 872px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.article__quote { display: flex; flex-direction: column; gap: 46px; }
.article__quote .mark { font-family: var(--font-body); font-size: 16px; color: var(--color-blue-50); }
.article__quote blockquote { max-width: 873px; font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: -0.32px; color: var(--color-night); }
.article__quote cite { font-family: var(--font-body); font-size: 16px; font-style: normal; color: var(--color-blue-50); }
@media (max-width: 992px) { .article__body { grid-column: 1 / 13; } .article__block h3 { font-size: 32px; } }
/* ---------- Report article (Financing / On-Chain) ---------- */
.report { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.report__body { grid-column: 5 / 13; display: flex; flex-direction: column; gap: 40px; }
.report__lead { max-width: 854px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-night); }
.report h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.report h4 { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1.05; letter-spacing: -0.28px; color: var(--color-night); }
.report p { max-width: 872px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.report__sec { display: flex; flex-direction: column; gap: 16px; }
.report__quote { display: flex; flex-direction: column; gap: 24px; margin: 24px 0; }
.report__quote blockquote { max-width: 873px; font-family: var(--font-heading); font-size: 32px; line-height: 1.1; letter-spacing: -0.32px; color: var(--color-night); }
.report__quote cite { font-family: var(--font-body); font-size: 16px; font-style: normal; color: var(--color-blue-50); }
/* Data tables sit on a grey panel: small half-opacity DM Sans head, Newsreader
body rows separated by a hairline. Columns run on a 235px pitch (203 + 32). */
.data-table-wrap { background: var(--color-blue-5); padding: 16px; }
.data-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 4px; font-family: var(--font-body); }
.data-table th, .data-table td { text-align: left; padding-right: 32px; }
.data-table th { font-weight: 400; font-size: 16px; line-height: 22px; color: var(--color-night); opacity: 0.5; }
.data-table td { border-top: 1px solid var(--color-blue-10); padding-top: 16px; padding-bottom: 16px; font-family: var(--font-heading); font-size: 20px; line-height: 22px; letter-spacing: -0.2px; color: var(--color-night); }
.data-table th:nth-child(-n+3), .data-table td:nth-child(-n+3) { width: 235px; }
/* Pre-footer onboarding CTA — ascii field, label on top, single button */
.home-cta--onboard { min-height: 800px; padding: 24px 32px 0; justify-content: space-between; gap: 0; }
.home-cta--onboard .home-cta__graphic { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1800px; }
.home-cta--onboard .home-cta__body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; width: 1185px; max-width: 100%; }
.home-cta--onboard .home-cta__title { font-size: 62px; letter-spacing: -0.93px; }
.home-cta--onboard .home-cta__text { max-width: 456px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-almost-white); }
.home-cta--onboard .btn--light { color: var(--color-forest); }
@media (max-width: 992px) { .report__body { grid-column: 1 / 13; } .report h3 { font-size: 32px; } }
/* ---------- Stats row (investor relations intro) ---------- */
.statsrow { background: var(--color-almost-white); padding-top: var(--sp-80); padding-bottom: var(--sp-80); }
.statsrow__lead { grid-column: 1 / 6; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.statsrow__grid { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap-lg); align-self: start; }
.stat-cell { background: var(--color-blue-5); padding: 24px 16px; }
.stat-cell h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.stat-cell p { margin-top: 8px; font-family: var(--font-body); font-size: 13px; color: var(--color-blue-50); }
@media (max-width: 992px) { .statsrow__lead, .statsrow__grid { grid-column: 1 / 13; } .statsrow__grid { grid-template-columns: 1fr 1fr; margin-top: 24px; } }
/* ---------- Section with label + content-8 (tables / lists) ---------- */
.lblsec { background: var(--color-almost-white); padding-top: var(--sp-80); padding-bottom: var(--sp-80); }
.lblsec__inner { align-items: start; }
.lblsec__inner > .label { font-family: var(--font-body); font-size: 16px; color: var(--color-blue-50); }
.lblsec__main h2 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); margin-bottom: 40px; }
.gov-list__item { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 16px 0; border-top: 1px solid var(--color-blue-10); }
.gov-list__item:last-child { border-bottom: 1px solid var(--color-blue-10); }
.gov-list__item span:first-child { font-family: var(--font-body); font-size: 16px; color: var(--color-night); }
.gov-list__item span:last-child { font-family: var(--font-body); font-size: 13px; color: var(--color-blue-50); flex-shrink: 0; }
/* Reports & documents — download rows. The grey panel and the trailing arrow
are the hover state on desktop; on mobile both are always on. */
.lblsec--docs .lblsec__main h2 { font-size: 64px; line-height: 0.9; letter-spacing: -0.96px; margin-bottom: 80px; }
.doc-list { display: flex; flex-direction: column; gap: 40px; }
.doc-row { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.doc-row__desc { max-width: 398px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.doc-row__body { position: relative; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--color-blue-10); padding: 16px 32px 40px 0; }
/* the panel bleeds 16px to the left of the text column */
.doc-row__body::before { content: ""; position: absolute; left: -16px; right: 0; top: 0; bottom: 0; background: var(--color-blue-5); opacity: 0; transition: opacity 0.2s ease; }
.doc-row__body > * { position: relative; }
.doc-row:hover .doc-row__body::before { opacity: 1; }
.doc-row__title { font-family: var(--font-heading); font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.doc-row__dl { padding-left: 0.2em; opacity: 0; transition: opacity 0.2s ease; }
.doc-row:hover .doc-row__dl { opacity: 1; }
.doc-row__meta { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.doc-row__more { position: relative; display: block; border-bottom: 1px solid var(--color-night); padding: 4px 32px 4px 0; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-night); }
.doc-row__more::after { content: ""; position: absolute; right: -10px; top: 0; width: 1px; height: 30px; background: var(--color-night); }
@media (max-width: 992px) { .lblsec__inner { grid-template-columns: 1fr; row-gap: 24px; } }
/* light-blue centered hero (article) */
.dhero--lightblue { background: var(--color-light-blue); }
.dhero--lightblue .dhero__title { color: var(--color-night); }
.dhero--lightblue .dhero__crumb { color: var(--color-night); }
.dhero--lightblue .dhero__crumb .muted { color: var(--color-blue-50); }
.dhero--lightblue .dhero__desc { color: var(--color-blue-50); }
/* article meta sidebar */
.report__meta { grid-column: 1 / 5; align-self: start; display: flex; flex-direction: column; gap: 24px; padding-right: 32px; }
.report__meta .m-item p:first-child { font-family: var(--font-heading); font-size: 20px; letter-spacing: -0.2px; color: var(--color-night); }
.report__meta .m-item p:last-child { margin-top: 4px; font-family: var(--font-body); font-size: 14px; color: var(--color-blue-50); }
@media (max-width: 992px) { .report__meta { grid-column: 1 / 13; padding-right: 0; margin-bottom: 24px; flex-direction: row; flex-wrap: wrap; gap: 32px; } }
/* deep-blue CTA modifier (shared for detail pages) */
.home-cta--deepblue { background: var(--color-night); }
/* Mobile type scale — verified against Figma 375 frames */
@media (max-width: 768px) {
.strat__head h2 { font-size: 40px; }
.strat__intro h3 { font-size: 24px; }
.attr h4 { font-size: 28px; }
.doc-card h4 { font-size: 28px; }
/* Figma 375: 44px between label, lockup and CTA; CTA runs edge to edge */
.reqdoc { padding-top: 64px; padding-bottom: 80px; }
.reqdoc__inner { row-gap: 44px; }
.reqdoc__main h2 { font-size: 24px; letter-spacing: -0.24px; }
.reqdoc__main p { margin-top: 8px; font-size: 24px; letter-spacing: -0.24px; }
.reqdoc__cta {
margin-top: 44px; margin-left: calc(-1 * var(--container-pad));
padding-left: var(--container-pad); font-size: 14px;
}
.article__block h3, .report h3 { font-size: 40px; }
.article__block h4, .report h4 { font-size: 28px; }
.article__quote blockquote, .report__quote blockquote { font-size: 28px; }
/* Stats are 62px in the Figma mobile frame — stack to one column so the
big numbers get full width and don't overflow. */
.statsrow__grid { grid-template-columns: 1fr; }
.stat-cell h3 { font-size: 62px; }
.lblsec__main h2 { font-size: 28px; }
/* Figma 375: the table is wider than the viewport and scrolls sideways */
.data-table-wrap { overflow-x: auto; }
.data-table { min-width: 704px; }
.data-table th, .data-table td { padding-right: 16px; }
.data-table th { font-size: 12px; line-height: 16px; }
.data-table td { font-family: var(--font-body); font-size: 14px; line-height: 22px; letter-spacing: 0; padding-top: 9px; padding-bottom: 9px; }
.data-table th:nth-child(-n+3), .data-table td:nth-child(-n+3) { width: 180px; }
.home-cta--onboard { min-height: 700px; padding: 16px 16px 0; }
.home-cta--onboard .home-cta__graphic { width: 1350px; }
.home-cta--onboard .home-cta__body { gap: 16px; width: 100%; }
.home-cta--onboard .home-cta__title { font-size: 32px; line-height: 1; letter-spacing: -0.32px; }
.home-cta--onboard .home-cta__text { max-width: 306px; }
/* Figma 375: rows run edge to edge, panel and arrow always visible */
.lblsec--docs { padding-bottom: 80px; }
.lblsec--docs .lblsec__main h2 { font-size: 32px; line-height: 1; letter-spacing: -0.32px; margin-bottom: 52px; }
/* the CTA tick sits 10px past the full-bleed edge; clipped, as in the frame */
.doc-list { margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad)); overflow: hidden; }
.doc-row__desc { max-width: none; padding: 0 var(--container-pad); }
.doc-row__body { border-top-color: var(--color-blue-5); padding-left: var(--container-pad); }
.doc-row__body::before { left: 0; opacity: 1; }
.doc-row__title { font-size: 28px; letter-spacing: -0.28px; }
.doc-row__dl { opacity: 1; }
.doc-row__more { padding-left: var(--container-pad); }
}
/* ===== assets/css/home-v2.css ===== */
/* ==========================================================================
Home page v2 — new sections built from Figma "Hilbert-Group" screenshots
(Dev Mode unavailable, so this is measured/eyeballed against exports, not
exact node specs). Loaded only by index.html, after home.css.
Every rule here targets a class that does not exist in home.css, so this
file adds sections without touching the ones home.css already owns —
blocks.html / index-copy.html / index-anim.html / solutions.html /
financing-solutions.html keep rendering exactly as before.
========================================================================== */
/* ---------- Hero v2: no buttons, full-width stat line instead of a
sidebar. .hero / .hero__video / .hero__content / .hero__title / .hero__text
are reused unmodified from home.css; only the split layout is new. ---------- */
.hero--split .hero__inner { flex-direction: column; align-items: stretch; gap: 76px; }
.hero--split .hero__content { width: 798px; }
.hero--split .hero__title { max-width: 798px; }
.hero--split .hero__text { max-width: 428px; }
/* Figma: the rule sits UNDER the stat line (gray/50), with the first —
active — item carrying its own brighter gray/60 underline. */
.hero-statline {
display: flex;
align-items: stretch;
gap: 32px;
width: 100%;
border-bottom: 1px solid var(--color-gray-50);
}
.hero-statline__item {
flex: 1;
min-width: 0;
padding: 0;
}
.hero-statline__item:first-child {
padding-bottom: 16px;
border-bottom: 1px solid var(--color-gray-60);
}
.hero-statline__item h3 {
font-family: var(--font-heading);
font-weight: 400;
font-size: 26px;
line-height: 1;
letter-spacing: -0.26px;
color: var(--color-almost-white);
}
.hero-statline__item p {
margin-top: 8px;
font-family: var(--font-body);
font-size: 12px;
line-height: 16px;
color: var(--color-almost-white);
}
.hero-statline__item--muted { opacity: 0.4; }
/* ---------- Capability cards (3-up, light) ---------- */
.cap3 { background: var(--color-almost-white); padding: var(--sp-120) 0 0; }
.cap3__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cap3-card {
position: relative;
overflow: hidden;
min-height: 316px;
padding: 16px;
background: var(--color-green-5);
display: flex;
flex-direction: column;
color: var(--color-forest);
text-decoration: none;
}
.cap3-card__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-green-50); }
.cap3-card__title { margin-top: 8px; font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-forest); }
.cap3-card__desc { margin-top: 8px; max-width: 293px; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-green-50); }
/* Figma places the 708px maze at 120/117 from the card's outer edge; the
card has 16px padding, and absolute offsets resolve against the padding
box, so subtract it here. */
.cap3-card__graphic {
position: absolute;
left: 104px;
top: 101px;
right: auto;
bottom: auto;
width: 708px;
/* the global `img { max-width: 100% }` was clamping this to the card's
448px while the height stayed 708px — and card-maze.svg carries
preserveAspectRatio="none", so it stretched to fill, squashing the
pattern horizontally instead of overflowing the card as intended */
max-width: none;
height: 708px;
opacity: 1;
mix-blend-mode: darken;
pointer-events: none;
}
.cap3-card__link { position: relative; margin-top: auto; padding-top: 0; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-forest); transition: opacity 0.2s ease; }
.cap3-card:hover .cap3-card__link { opacity: 0.6; }
.partners { background: var(--color-almost-white); padding: var(--sp-80) 0 var(--sp-120); }
/* the rule runs the full width of the viewport, so it sits on a full-width
band while the label itself stays on the container grid */
.partners__rule { border-bottom: 1px solid var(--color-green-10); padding-bottom: 8px; }
.partners__label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50); }
/* A drag-scrollable strip. Figma runs the row past the right edge (it is
1958px against a 1440 frame), so it bleeds out of the container gutter
on the right while starting flush with it on the left. Slots are the
design's 166.5px on a 132px gutter; --ls scales the whole set down for
the 375 frame, where the same row is drawn at 62.5%. */
.partners__row {
--ls: 1;
display: flex;
align-items: center;
gap: 132px;
/* no fixed height: the marks are up to 36px against the design's 30px
slot, and overflow-x makes this a scroll container that would clip
them vertically too. Let the row size to its tallest logo. */
margin: 52px 0;
padding-block: 4px;
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
cursor: grab;
margin-right: calc(-1 * var(--container-pad));
padding-right: var(--container-pad);
}
.partners__row::-webkit-scrollbar { display: none; }
.partners__row.is-dragging { cursor: grabbing; user-select: none; }
.partners__logo {
flex: 0 0 calc(166.5px * var(--ls));
/* the same figure as a width, not only a flex-basis: the marquee's track
is sized max-content, and WebKit measures a flex item's contribution to
that by its content — the mark, narrower than its slot — rather than by
its basis. Each copy of the set then came out narrower than the slots
it holds, the second copy started inside the first, and on iPhones
Coinbase was drawn over Ripple. A definite width is what it measures. */
width: calc(166.5px * var(--ls));
display: flex;
align-items: center;
justify-content: center;
}
/* the strip starts flush with the container rather than centring its first
mark in a slot, so the row reads as anchored on the left and running out */
.partners__logo:first-child { justify-content: flex-start; }
/* the marks are forest vectors; the design sits them at 40% on the
almost-white ground (sampled straight off the Figma render) */
.partners__logo img { display: block; height: auto; max-width: none; opacity: 0.4; }
.partners__logo:nth-child(1) img { width: calc(146.95px * var(--ls)); }
.partners__logo:nth-child(2) img { width: calc(121.6px * var(--ls)); }
.partners__logo:nth-child(3) img { width: calc(113.78px * var(--ls)); }
.partners__logo:nth-child(4) img { width: calc(157.41px * var(--ls)); }
.partners__logo:nth-child(5) img { width: calc(139.64px * var(--ls)); }
.partners__logo:nth-child(6) img { width: calc(114.25px * var(--ls)); }
/* ---------- How we invest (2x2 icon grid) ---------- */
.hiw { background: var(--color-blue-5); padding: var(--sp-120) 0 160px; }
.hiw__head { align-items: start; }
.hiw__head .label { padding-top: 0; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50); }
.hiw__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: -0.56px; color: var(--color-forest); }
.hiw__grid { margin-top: 80px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 32px; }
/* Figma pins the first grid row at 160px even though its content is 133px. */
.hiw__grid > .hiw-item:nth-child(-n+2) { min-height: 160px; }
.hiw-item__icon { width: 25px; height: 25px; color: var(--color-forest); }
.hiw-item h3 { margin-top: 16px; font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-forest); }
.hiw-item p { margin-top: 8px; max-width: 340px; font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-green-50); }
/* ---------- Who we serve ----------
The rule and the hover ground run edge to edge, so each row — and the
label's rule — is a full-width band that is a direct child of the
section, with the content inside it still on the container grid. That
is also what Figma draws: the row frames are 1440 wide with their text
starting at x=32. Rows open on hover, and all of them start closed. */
.serve { background: var(--color-light-green); padding: var(--sp-120) 0; }
.serve__rule { border-bottom: 1px solid var(--color-green-10); padding-bottom: 8px; }
.serve__label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50); }
.serve-row { border-bottom: 1px solid var(--color-green-10); transition: background-color 0.25s ease; }
.serve-row:last-child { border-bottom: 0; }
/* Hover only where there is a real pointer. Touch devices get the Figma
mobile design instead — a tap accordion with a +/- marker — driven by
.is-open from main.js, since :hover on touch sticks after the tap. */
@media (hover: hover) {
.serve-row:hover,
.serve-row:focus-within { background: var(--color-green-5); }
}
.serve-row.is-open { background: var(--color-green-5); }
.serve-row__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: 0;
background: none;
border: 0;
text-align: left;
color: inherit;
cursor: default;
}
.serve-row__icon { display: none; }
.serve-row__inner {
display: grid;
grid-template-columns: 469px 470px 1fr;
align-items: start;
padding-top: 48px;
padding-bottom: 48px;
}
.serve-row__title { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-forest); }
/* the panel occupies no height while closed, so a row is Figma's 136px
collapsed and grows to fit its copy on hover */
.serve-row__panel {
grid-column: 2 / -1;
display: grid;
grid-template-columns: 470px 1fr;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.35s ease, opacity 0.25s ease;
}
@media (hover: hover) {
.serve-row:hover .serve-row__panel,
.serve-row:focus-within .serve-row__panel { max-height: 300px; opacity: 1; }
}
.serve-row.is-open .serve-row__panel { max-height: 300px; opacity: 1; }
.serve-row__desc { max-width: 345px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50); }
.serve-row__links { display: grid; grid-template-columns: 202px 202px; gap: 28px 0; align-content: start; max-width: 403px; }
.serve-row__links a { font-family: var(--font-heading); font-size: 24px; line-height: 1; letter-spacing: -0.24px; color: var(--color-forest); }
.serve-row__links a:hover { text-decoration: underline; text-underline-position: from-font; }
/* ---------- Cycles: dark CTA band ---------- */
.cycles {
position: relative;
overflow: hidden;
background-color: var(--color-forest);
min-height: 600px;
padding: 24px 32px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.cycles__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cycles__brand,
.cycles__mid,
.cycles__spacer { position: relative; z-index: 1; }
.cycles__brand { display: flex; align-items: center; gap: 8px; color: var(--color-almost-white); }
.cycles__brand .logo__mark { width: 20px; height: 20px; color: var(--color-almost-white); }
.cycles__brand .logo__word { font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: var(--color-almost-white); }
.cycles__mid { flex: 1; display: flex; align-items: center; }
.cycles__title { max-width: 760px; font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-almost-white); }
/* mirrors the brand lockup's height so .cycles__mid centres the title in
the full 600px band, as Figma has it */
.cycles__spacer { height: 22px; }
/* ---------- Signal Over Noise (insights 2x2) ---------- */
.signal { background: var(--color-almost-white); padding: var(--sp-120) 0; }
.signal__head { align-items: start; }
.signal__head .label { max-width: 260px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50); }
.signal__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: -0.56px; color: var(--color-forest); }
/* The grid and the closing link bleed 16px left of the content track and
run to the page edge on the right (Figma: 955px-wide rows). */
.signal__grid,
.signal__more { margin-left: -16px; margin-right: calc(-1 * var(--container-pad)); }
.signal__grid { margin-top: 80px; display: grid; grid-template-columns: 453px 1fr; column-gap: 32px; }
.signal-item { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 16px 0; border-top: 0; border-left: 1px solid var(--color-green-10); }
.signal__grid > .signal-item:nth-child(n+3) { padding-top: 64px; }
.signal-item__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-green-50); }
.signal-item h3 { margin-top: 8px; font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-forest); max-width: 368px; }
.signal-item a { display: inline-block; margin-top: 80px; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-forest); text-decoration: underline; text-underline-position: from-font; }
.signal__more {
position: relative;
display: block;
margin-top: 80px;
border-bottom: 1px solid var(--color-forest);
padding: 4px 32px 4px 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--color-forest);
}
.signal__more::after { content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 30px; background: var(--color-forest); }
/* ---------- News & Media ---------- */
.newsmedia { background: var(--color-light-green); padding: var(--sp-120) 0 var(--sp-80); }
/* Figma left-aligns the heading to the 8-column content track, not centred. */
.newsmedia h2 { padding-left: 469px; text-align: left; font-family: var(--font-heading); font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: -0.56px; color: var(--color-forest); }
.newsmedia__grid { margin-top: 80px; display: grid; grid-template-columns: 437px 1fr; gap: 0; align-items: stretch; }
.newsmedia__list { display: flex; flex-direction: column; }
/* 164px is the design's row, drawn for a headline of two or three lines; a
fixed height sent a four-line one's "Read" below the row's rule, where
the next row's date painted over it and took the click. The row keeps
that height as a floor and grows past it when the headline needs to. */
.nm-row { display: flex; flex-direction: column; min-height: 164px; padding: 24px 16px 24px 32px; border-top: 0; border-bottom: 1px solid var(--color-green-10); }
.nm-row:last-child { border-bottom: 0; }
.nm-row__date { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-green-50); }
.nm-row h3 { margin-top: 8px; max-width: 334px; font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-forest); }
.nm-row a { display: inline-block; margin-top: auto; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-forest); transition: opacity 0.2s ease; }
.nm-row a:hover { text-decoration: underline; text-underline-position: from-font; }
.newsmedia__feature { position: relative; overflow: hidden; min-height: 495px; background: var(--color-green-10); }
.newsmedia__feature img {
position: absolute;
inset: auto;
left: 50%;
top: calc(50% - 20.5px);
transform: translate(-50%, -50%);
width: 1030px;
height: 1030px;
max-width: none;
object-fit: contain;
opacity: 1;
}
.newsmedia__feature-card {
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
background: var(--color-almost-white);
padding: 16px;
}
.newsmedia__feature-card .nm-row__date { color: var(--color-green-50); }
.newsmedia__feature-card h3 { margin-top: 8px; max-width: none; font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-forest); }
.newsmedia__feature-card a { display: inline-block; margin-top: 16px; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-forest); }
.newsmedia__more {
display: block;
margin: var(--sp-80) calc(-1 * var(--container-pad)) 0 469px;
border-bottom: 1px solid var(--color-forest);
padding: 4px 32px 4px 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--color-forest);
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1024px) {
.hero-statline { flex-wrap: wrap; row-gap: 24px; }
.hero-statline__item { flex: 0 0 46%; }
.hero-statline__item:first-child { padding-bottom: 0; border-bottom: 0; }
.hiw__head, .signal__head { grid-template-columns: 1fr; row-gap: 16px; }
.hiw { padding-bottom: var(--sp-120); }
.hiw__grid { column-gap: 32px; }
.signal__grid, .signal__more { margin-left: 0; margin-right: 0; }
.signal__grid { grid-template-columns: 1fr 1fr; column-gap: 32px; }
.signal__head .label { max-width: none; }
.serve-row__inner { grid-template-columns: 1fr; row-gap: 24px; }
.serve-row__panel { grid-column: 1 / -1; grid-template-columns: 1fr; row-gap: 24px; }
.serve-row.is-open .serve-row__panel { max-height: 420px; }
/* below the desktop grid the block becomes Figma's tap accordion: the
whole title row is the hit target, with a plus that turns into a minus */
.serve-row__head { cursor: pointer; }
.serve-row__icon { display: block; position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.serve-row__icon::before,
.serve-row__icon::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--color-forest);
}
.serve-row__icon::before { width: 14px; height: 1.5px; }
.serve-row__icon::after { width: 1.5px; height: 14px; transition: opacity 0.2s ease; }
.serve-row.is-open .serve-row__icon::after { opacity: 0; }
.newsmedia h2 { padding-left: 0; }
.newsmedia__grid { grid-template-columns: 1fr; row-gap: 40px; }
/* the narrow frame leads with the press card and puts the dated
releases under it — the reverse of the desktop column order */
.newsmedia__feature { min-height: 360px; order: -1; }
.newsmedia__more { margin-left: 0; margin-right: 0; }
}
@media (max-width: 768px) {
/* home.css's mobile hero rules flatten .hero__content (display:contents)
and reorder it after .hero__stats/.hero__buttons for the old sidebar
layout. Neither applies to this hero, so undo them: keep content first,
stat line second, in plain source order. */
.hero--split .hero__content { display: flex; flex-direction: column; }
.hero--split .hero__content > div:first-child { order: initial; width: auto; }
.hero--split .hero__inner { align-items: stretch; text-align: left; }
.hero-statline { gap: 16px 24px; }
.hero-statline__item { flex: 0 0 100%; }
.hero-statline__item h3 { font-size: 24px; }
/* the 375 frame clears 80px between the hero and the first card, where
--sp-120 collapses to 56 at this breakpoint */
.cap3 { padding-top: 80px; }
.cap3__grid { grid-template-columns: 1fr; }
.cap3-card { min-height: 316px; }
/* the mobile frame draws the same strip at 62.5% on a 32px gutter — it
stays one scrolling row rather than wrapping */
.partners__row { --ls: 0.625; gap: 32px; margin: 32px 0; }
.partners__logo { flex-basis: 104px; width: 104px; }
.hiw { padding: var(--sp-80) 0; }
.hiw__head h2, .signal__head h2, .newsmedia h2 { font-size: 36px; letter-spacing: -0.36px; }
.hiw__grid { grid-template-columns: 1fr; row-gap: 40px; margin-top: 40px; }
.hiw__grid > .hiw-item:nth-child(-n+2) { min-height: 0; }
.hiw-item h3 { font-size: 28px; letter-spacing: -0.28px; }
.serve-row__inner { padding-top: 24px; padding-bottom: 24px; row-gap: 16px; }
.serve-row__title { font-size: 28px; letter-spacing: -0.28px; }
.serve-row.is-open .serve-row__panel { max-height: 460px; }
.serve-row__links { grid-template-columns: 1fr 1fr; gap: 16px; max-width: none; }
.serve-row__links a { font-size: 20px; }
/* the mobile Figma frame keeps this band at 600px too */
.cycles { min-height: 600px; padding: 24px 16px; }
.cycles__title { font-size: 32px; letter-spacing: -0.48px; }
.signal { padding: var(--sp-80) 0; }
.signal__grid { grid-template-columns: 1fr; margin-top: 40px; }
.signal-item,
.signal__grid > .signal-item:nth-child(n+3) { padding: 24px 0 0; border-left: none; border-top: 1px solid var(--color-green-10); }
.signal-item a { margin-top: 32px; }
.signal__more { margin-top: 40px; }
.newsmedia { padding: 80px 0 var(--sp-80); }
.newsmedia__grid { gap: 40px; margin-top: 44px; }
.nm-row { height: auto; padding: 24px 0; }
.nm-row a { margin-top: 16px; }
.newsmedia__feature-card h3 { font-size: 28px; letter-spacing: -0.28px; }
.newsmedia__more { margin-top: 40px; }
}
/* ---------- Capability card curve ----------
The Hilbert curve on the three cards was a flat ![]()
. It is now one path
in a block referenced twice per card, so the hover can draw along
the line instead of fading a picture in. card-maze.svg is a single
continuous path, which is what makes this work at all: the dash walks one
unbroken stroke from end to end rather than lighting 700 fragments at once.
The track keeps exactly the values the artwork shipped with, including the
darken blend that used to sit on the ![]()
, so the resting card is
unchanged. The blend moves off .cap3-card__graphic and onto the track
alone — otherwise it would darken the lit line into the card as well.
pathLength="1" on the shared path normalises the curve, so the dash values
below are fractions of it rather than user units. All stroke properties are
inherited, so setting them on the