/*
Lightview Capital — site styles, built section-by-section from Figma.
Structure:
1. Tokens & reset
2. Typography & shared components
3. Site header (utility bar + glass nav, sticky variant)
4. Site footer
5. Per-page sections — Homepage (hero, stats, about, stay-loop)
6. Mobile @media queries — MUST BE LAST
*/
/* === 0. Self-hosted fonts ================================================ */
/*
Poppins (SIL OFL), self-hosted to remove the external Google Fonts dependency
— see SECURITY.md (SRI finding). woff2 files live in /images/fonts/ (passthrough-
copied). latin + latin-ext subsets per weight, font-display: swap preserves the
prior &display=swap behavior. Weights 300/400/500/600/700 match all usages in CSS.
unicode-ranges copied verbatim from Google's Poppins v24 css2 output.
*/
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('/images/fonts/poppins-300-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;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('/images/fonts/poppins-300-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/images/fonts/poppins-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;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/images/fonts/poppins-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/images/fonts/poppins-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;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/images/fonts/poppins-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/images/fonts/poppins-600-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;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/images/fonts/poppins-600-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/images/fonts/poppins-700-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;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/images/fonts/poppins-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* === 1. Tokens & reset =================================================== */
:root {
/* Lightview brand (Jira CD-1956) */
--color-navy: #00305e;
--color-blue: #1064b4;
--color-blue-light: #e3f1ff;
--color-gray-light: #ededed;
--color-gray-mid: #e0e3e6; /* Figma scrollbar track */
--color-white: #ffffff;
--color-text: #00305e;
--gradient-card: linear-gradient(180deg, rgba(217, 217, 217, 0.07), rgba(217, 217, 217, 0.02));
--border-blue-15: rgba(16, 100, 180, 0.15);
--border-navy-35: rgba(0, 48, 94, 0.35);
--border-white-10: rgba(255, 255, 255, 0.10);
--shadow-text: 0px 6px 10px rgba(0, 0, 0, 0.16);
--font-sans: 'Poppins', system-ui, -apple-system, sans-serif;
--font-display: 'Futura PT', 'Poppins', sans-serif; /* TODO: confirm Futura PT delivery */
--radius-sm: 6.7px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
/* Header heights (utility 40px + nav 100px = 140px overlap on hero) */
--utility-height: 40px;
--nav-height: 100px;
--container-max: 1320px;
/* Figma 1440 reference: content frame x=60, width=1320 → 60px gutter.
Clamp tracks that ratio (60/1440 = 4.17vw) down to a 20px floor. */
--container-pad: clamp(20px, 4.17vw, 60px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1rem);
line-height: 1.5;
color: var(--color-text);
text-wrap: pretty;
background: var(--color-white);
}
main { display: block; }
/* === 2. Typography & shared components =================================== */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em;
font-weight: 600;
text-wrap: balance;
line-height: 1.15;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--color-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img, video, svg { max-width: 100%; height: auto; display: block; }
/* Container helper.
Padding-inline matches the Figma 60px gutter at 1440 (clamped 20–60px).
.utility-bar__inner and .main-nav__inner are full-bleed (just padded), so
they declare their own padding-inline + width directly and aren't included here. */
.container,
.site-footer__inner,
.site-footer__bottom-inner,
.stats__inner,
.about__inner,
.stay-loop__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
/* Buttons (Figma: 20px Poppins Medium, 8px×20px, rounded-10px). Hover swaps fg/bg + adds 1px border. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 20px;
font-family: var(--font-sans);
font-size: 1.25rem; /* 20px */
font-weight: 500;
line-height: 1.8; /* 36px */
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
text-shadow: var(--shadow-text);
transition: background-color 150ms, color 150ms, border-color 150ms;
white-space: nowrap;
}
.btn--primary {
background: var(--color-blue);
color: var(--color-white);
}
.btn--primary:hover {
background: var(--color-white);
color: var(--color-blue);
border-color: var(--color-blue);
text-decoration: none;
text-shadow: none;
}
.btn--outline {
background: transparent;
color: var(--color-blue);
border-color: var(--color-blue);
text-shadow: none;
}
.btn--outline:hover {
background: var(--color-blue);
color: var(--color-white);
text-decoration: none;
}
/* === 3. Site header ====================================================== */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
pointer-events: none;
}
.site-header > * { pointer-events: auto; }
/* Utility bar — Figma 303:808: navy bg, 40px tall, right-aligned links, 14px white Poppins, 40px gap */
.utility-bar {
background: var(--color-navy);
height: var(--utility-height);
display: flex;
align-items: center;
font-size: 14px;
color: var(--color-white);
transition: opacity 250ms ease, height 250ms ease;
}
.utility-bar__inner {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 40px;
width: 100%;
padding-inline: var(--container-pad);
}
.utility-bar__link {
color: var(--color-white);
text-decoration: none;
}
.utility-bar__link:hover { text-decoration: underline; }
/* Main nav — Figma 303:810: glass backdrop (rgba white 3%, blur 1.5px), 100px tall, white logo + nav links + blue CTA */
.main-nav {
height: var(--nav-height);
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(1.5px);
-webkit-backdrop-filter: blur(1.5px);
border-bottom: 1px solid var(--border-white-10);
transition: background-color 250ms ease, height 250ms ease;
}
.main-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 100%;
padding-inline: var(--container-pad);
gap: 24px;
}
.main-nav__logo { display: flex; align-items: center; }
.main-nav__logo img {
/* Figma 303:810: mask is 178 × 71.2px at 1440 reference width.
71/1440 ≈ 4.93vw → hits 71px exactly at 1440, floors at 56px on tablet. */
height: clamp(56px, 4.93vw, 71px);
width: auto;
/* The source PNG is navy on transparent. Figma 303:810 renders the nav logo white;
brightness(0) flattens to black, invert(1) flips to white. */
filter: brightness(0) invert(1);
}
.main-nav__nav ul {
display: flex;
gap: clamp(20px, 2.5vw, 40px);
list-style: none;
margin: 0;
padding: 0;
}
.main-nav__nav a {
color: var(--color-white);
font-weight: 500;
font-size: clamp(1rem, 0.85rem + 0.4vw, 1.25rem);
text-shadow: var(--shadow-text);
text-decoration: none;
padding: 6px 0;
position: relative;
}
.main-nav__nav a[aria-current="page"]::after,
.main-nav__nav a:hover::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 2px;
background: var(--color-white);
}
.main-nav__nav a:hover { text-decoration: none; }
.main-nav__cta { /* uses .btn .btn--primary */ }
.main-nav__toggle {
display: none;
background: transparent;
border: 0;
width: 44px;
height: 44px;
padding: 10px;
cursor: pointer;
position: relative;
z-index: 2;
}
.main-nav__toggle span {
display: block;
height: 2px;
background: var(--color-white);
margin: 5px 0;
transition: transform 250ms ease, opacity 200ms ease;
transform-origin: center;
}
/* Hamburger → X when menu is open. Top bar rotates 45° + drops to center,
middle bar fades out, bottom bar rotates -45° + rises to center. */
body.nav-open .main-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .main-nav__toggle span:nth-child(2) { opacity: 0; }
body.nav-open .main-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Sticky nav variant (Figma 464:1397). Triggered by JS .is-scrolled on .site-header.
Behavior: utility bar collapses, main nav becomes solid navy and shorter. */
.site-header.is-scrolled .utility-bar {
height: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
.site-header.is-scrolled .main-nav {
background: var(--color-navy);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom-color: transparent;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* No-hero pages (news article detail, team/company/case-study detail when visited directly):
the page background is light, so the glass nav + white text would be unreadable.
Default the main nav to solid navy. Utility bar stays at full height (no scroll yet). */
body.no-hero .main-nav {
background: var(--color-navy);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom-color: transparent;
}
/* === 4. Site footer ====================================================== */
/* Light gray strip with logo + 3 columns */
.site-footer__main {
background: var(--color-gray-light);
padding-block: clamp(36px, 2rem + 2vw, 60px);
}
.site-footer__inner {
display: grid;
grid-template-columns: auto auto auto auto;
gap: clamp(24px, 4vw, 90px);
align-items: start;
padding-inline: var(--container-pad);
width: 100%;
}
/* The grid's first column is `auto` so it sizes to the logo anchor; setting
the width here (not on the inner ![]()
) prevents the global img:max-width
100% from collapsing the column. Lifted from clamp(160px, 18vw, 230px):
at intermediate desktop widths (1024-1200) the previous logo bottomed
near 184px and read small (CD-2068 follow-up). New scale reaches ~225
at 1024 and caps at 280 from ~1273 upward. */
.site-footer__logo-wrap { display: flex; flex-direction: column; }
.site-footer__logo { width: clamp(200px, 22vw, 280px); }
.site-footer__logo img { width: 100%; height: auto; }
.site-footer__tagline {
font-size: 20px;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-blue);
margin-top: 12px;
line-height: 1.45;
}
.site-footer__col { color: var(--color-blue); font-size: 20px; line-height: 1.45; min-width: 0; }
.site-footer__heading {
font-weight: 500;
margin-bottom: 16px;
color: var(--color-blue);
}
.site-footer__col p { color: var(--color-blue); }
.site-footer__col a { color: var(--color-blue); }
.site-footer__col a:hover { text-decoration: underline; }
/* Navy bottom bar */
.site-footer__bottom {
background: var(--color-navy);
color: var(--color-white);
padding-block: 18px;
font-size: 18px;
}
.site-footer__bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
padding-inline: var(--container-pad);
width: 100%;
}
.site-footer__copy { margin: 0; }
.site-footer__legal {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 12px;
align-items: center;
}
.site-footer__legal a { color: var(--color-white); }
.site-footer__legal a:hover { text-decoration: underline; }
.site-footer__sep { color: rgba(255,255,255,0.5); }
.site-footer__credit { margin: 0; }
.site-footer__credit a { color: var(--color-white); }
.site-footer__credit a:hover { text-decoration: underline; }
/* === 5. Homepage sections ================================================ */
/* Body has-hero pulls hero up under the fixed header */
body.has-hero .hero { margin-top: 0; }
/* Hero — Figma 189:1552: 900px tall full-width, video bg w/ rgba(0,0,0,0.4) multiply overlay,
centered headline 48px Poppins Regular white text-shadow, scroll-arrow at top:790px */
.hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
max-height: 900px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
background: var(--color-navy); /* Fallback while video/poster load (or when missing) */
}
.hero__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.hero__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
mix-blend-mode: multiply;
z-index: 1;
}
.hero__content {
position: relative;
z-index: 2;
width: min(950px, 90%);
text-align: center;
/* Slight downward bias matches Figma top-[calc(50%+50px)] */
transform: translateY(2vh);
}
.hero__title {
font-family: var(--font-sans);
font-weight: 400; /* Poppins Regular */
font-size: clamp(2rem, 1rem + 2.5vw, 3rem); /* 32px → 48px */
line-height: 1.2;
color: var(--color-white);
text-shadow: var(--shadow-text);
text-wrap: balance;
margin: 0;
}
.hero__scroll {
position: absolute;
left: 50%;
bottom: clamp(40px, 6vh, 80px);
z-index: 2;
transform: translateX(-50%);
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
animation: hero-arrow-bob 2.4s ease-in-out infinite;
}
.hero__scroll img { width: 100%; height: 100%; }
@keyframes hero-arrow-bob {
0%, 100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, 6px); }
}
/* Stats — Figma 189:1568: light blue bg, 449px tall, 3-up + curl dividers + footnote */
.stats {
background: var(--color-blue-light);
padding-block: clamp(48px, 4rem + 2vw, 80px);
position: relative;
overflow: hidden;
}
/* Sunburst decorations sit in opposite corners — Figma 189:1583 mirrored.
The sunburst.njk component positions its rays in the upper-right ~26% of
its artboard, so the container needs to be ~4x the visible burst size
(overflow:hidden on .stats clips the empty portion that hangs offscreen). */
.stats .sunburst--top-right {
position: absolute;
top: 0; right: 0;
width: clamp(1100px, 110vw, 1850px);
aspect-ratio: 470 / 178;
}
.stats .sunburst--bottom-left {
position: absolute;
bottom: 0; left: 0;
width: clamp(1100px, 110vw, 1850px);
aspect-ratio: 470 / 178;
transform: scale(-1, -1); /* mirror to opposite corner */
}
.stats__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
padding-inline: var(--container-pad);
position: relative; /* stack above .stats::before/::after bursts */
z-index: 1;
}
.stats__list {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.stat {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 25px;
color: var(--color-blue);
white-space: nowrap;
}
.stat__num {
font-size: clamp(2.25rem, 1rem + 3.5vw, 3.75rem); /* 36px → 60px (Figma 60px Poppins Medium) */
font-weight: 500;
line-height: 1;
text-shadow: var(--shadow-text);
}
.stat__label {
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem); /* 16px → 22px */
font-weight: 400;
white-space: normal;
}
.stat__divider {
flex: 0 0 auto;
position: relative;
width: 18px;
height: 144px;
overflow: visible;
}
/* Native Figma SVG is horizontal (viewBox 144×17). Rotate 90° in place to vertical.
Override the global img { max-width: 100% } so the 144px width isn't clamped to the
parent's 18px box. */
.stat__divider img {
position: absolute;
top: 50%;
left: 50%;
width: 144px;
height: 18px;
max-width: none;
transform: translate(-50%, -50%) rotate(90deg);
}
.stats__note {
font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.375rem); /* 14 → 22 */
color: var(--color-blue);
text-align: center;
margin: 0;
max-width: 80ch;
}
/* About — Figma 189:1630: 717px copy column + 552px image, 342px tall, white bg */
.about {
background: var(--color-white);
padding-block: clamp(48px, 4rem + 2vw, 80px);
}
.about__inner {
display: grid;
grid-template-columns: 1fr clamp(360px, 40vw, 552px);
gap: clamp(24px, 4vw, 60px);
align-items: center;
padding-inline: var(--container-pad);
}
.about__copy { display: flex; flex-direction: column; gap: 30px; }
.about__title {
font-size: clamp(1.5rem, 0.8rem + 1.4vw, 2rem); /* 24 → 32 (Figma 32px SemiBold blue) */
font-weight: 600;
color: var(--color-blue);
margin: 0;
}
.about__body {
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem); /* 16 → 22 */
color: var(--color-blue);
margin: 0;
max-width: 60ch;
}
.about__body strong { font-weight: 700; }
.about__badges {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
}
.about__badge { width: 165px; height: auto; }
.about__copy .btn { align-self: flex-start; }
.about__media {
border-radius: var(--radius-md);
overflow: hidden;
}
.about__media img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 552 / 342;
}
/* Stay in the Loop — Figma 189:1558: navy bg, 199px tall, headline + button row */
.stay-loop {
background: var(--color-navy);
color: var(--color-white);
padding-block: clamp(40px, 3rem + 2vw, 60px);
position: relative;
overflow: hidden;
}
/* Decorative ellipse outlines — Figma 189:1565 + 189:1566 (1816×1192 each).
Two ellipses cross in the upper-middle of the band: one anchored at design
x=-733 (left ellipse, 189:1566), one at design x=503 (right ellipse,
189:1565). Both share the same SVG flipped via rotate(180deg)scaleY(-1)
and sit at top:-15px. Anchored to viewport center so the design stays
in place horizontally as the viewport grows beyond 1440. */
.stay-loop::before,
.stay-loop::after {
content: "";
position: absolute;
width: 1816px;
height: 1192px;
top: -15px;
background: url("/images/stay-loop-ellipse.svg") center/contain no-repeat;
transform: rotate(180deg) scaleY(-1);
pointer-events: none;
}
.stay-loop::before { left: calc(50% - 1453px); } /* Figma 189:1566 — design left = -733 */
.stay-loop::after { left: calc(50% - 217px); } /* Figma 189:1565 — design left = 503 */
.stay-loop__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-inline: var(--container-pad);
position: relative;
z-index: 1;
}
.stay-loop__copy { display: flex; flex-direction: column; gap: 18px; max-width: 704px; }
.stay-loop__title {
font-size: clamp(1.75rem, 1rem + 2vw, 2.375rem); /* 28 → 38 (Figma 38px Bold) */
font-weight: 700;
color: var(--color-white);
margin: 0;
}
.stay-loop__body {
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem); /* 16 → 22 */
color: var(--color-white);
margin: 0;
}
.stay-loop__cta { flex-shrink: 0; }
/* === 5b. Shared page hero (Approach, Team, Companies, etc.) ============= */
/* Hero — Figma 64:220 / 337:1923 etc.: 460px tall, photo bg + dark overlay + centered text */
.page-hero,
.approach-hero {
position: relative;
width: 100%;
height: clamp(360px, 32vw, 460px);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
background: var(--color-navy);
overflow: hidden;
}
.page-hero__media,
.approach-hero__media {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
}
.page-contact .page-hero__media {
object-position: center top;
}
/* Approach hero source is a beach/sunset photo with the wave horizon in
the middle of the frame. Anchor near the top of the source so the
wave reads in the lower third of the visible band with sunset sky
filling the upper portion behind the headline (CD-2070). */
.approach-hero__media {
object-position: center 20%;
}
.page-hero__overlay,
.approach-hero__overlay {
position: absolute; inset: 0;
background: rgba(0, 0, 0, 0.4);
mix-blend-mode: multiply;
z-index: 1;
}
.page-hero__content,
.approach-hero__content {
position: relative;
z-index: 2;
text-align: center;
padding-inline: var(--container-pad);
transform: translateY(3vh);
display: flex;
flex-direction: column;
gap: 14px;
max-width: min(1313px, 95vw);
}
.page-hero__title,
.approach-hero__title {
font-family: var(--font-sans);
font-weight: 400;
font-size: clamp(2rem, 1rem + 2.5vw, 3rem); /* 32 → 48 */
color: var(--color-white);
text-shadow: var(--shadow-text);
margin: 0;
}
.page-hero__subtitle,
.approach-hero__subtitle {
font-weight: 500;
font-size: clamp(1rem, 0.85rem + 0.7vw, 1.5rem); /* 16 → 24 */
line-height: 1.5;
color: var(--color-white);
text-shadow: var(--shadow-text);
margin: 0;
text-wrap: balance;
}
/* Approach intro — Figma 64:260: white bg, 80px padding, lede block + 4 value-prop cards */
.approach-intro {
background: var(--color-white);
padding-block: clamp(48px, 4rem + 2vw, 80px);
}
.approach-intro__inner {
display: flex;
flex-direction: column;
gap: 40px;
max-width: min(var(--container-max), 100% - 40px);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.approach-intro__lede {
display: flex;
flex-direction: column;
gap: 30px;
text-align: center;
}
.approach-intro__quote {
font-weight: 600;
font-size: clamp(1.25rem, 0.85rem + 1vw, 2rem); /* 20 → 32 */
color: var(--color-blue);
margin: 0;
text-wrap: balance;
}
.approach-intro__rule {
border: 0;
border-top: 1px solid rgba(16, 100, 180, 0.3);
margin: 0;
width: 100%;
}
.approach-intro__tagline {
font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.25rem); /* 15 → 20 */
text-transform: uppercase;
color: var(--color-blue);
margin: 0;
letter-spacing: 0.02em;
text-wrap: balance;
}
/* Value-prop cards — Figma 64:267-314: 315×234 each, gradient bg, blue 15% border, rounded-20px */
.value-props {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.value-prop {
/* Grid keeps the icon row anchored at a fixed height so all four cards
align their icons across the row regardless of how the label wraps
(CD-2080). The previous flex-column-center version drifted vertically
with label height. */
display: grid;
grid-template-rows: 80px 1fr;
justify-items: center;
align-items: start;
gap: 16px;
background: var(--gradient-card);
border: 1px solid var(--border-blue-15);
border-radius: var(--radius-xl);
padding: 32px 24px;
min-height: 234px;
text-align: center;
}
.value-prop__label { align-self: center; }
.value-prop__icon {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(161, 196, 230, 0.1);
border: 1px solid var(--border-blue-15);
border-radius: var(--radius-xl);
}
.value-prop__icon img {
width: 40px;
height: 40px;
}
.value-prop__label {
font-weight: 500;
font-size: 1.25rem; /* 20 */
line-height: 1.5;
color: var(--color-blue);
margin: 0;
letter-spacing: -0.01em;
text-wrap: balance;
}
/* Investment Criteria — Figma 64:382: navy bg, 4-quadrant w/ dashed dividers */
.investment-criteria {
background: var(--color-navy);
color: var(--color-white);
padding-block: clamp(60px, 5rem + 2vw, 80px);
}
.investment-criteria__inner {
max-width: min(var(--container-max), 100% - 40px);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.investment-criteria__title {
font-weight: 600;
font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); /* 24 → 32 */
color: var(--color-white);
text-align: center;
margin: 0 0 clamp(40px, 4vw, 60px);
}
/* 4-quadrant grid with dashed dividers as borders, plus center logo overlap */
.criteria-grid {
display: grid;
grid-template-columns: 1fr 1fr;
/* Equal-height rows so cell 1's border-bottom (the horizontal dashed line)
sits at exactly 50% of grid height, where .criteria-grid__center anchors
the sun's baseline via top:50% + translate(-50%,-100%). Without this,
uneven text wraps between rows shift the crossing off 50% (CD-2081). */
grid-template-rows: 1fr 1fr;
gap: 0;
position: relative;
--line: 1px dashed rgba(255, 255, 255, 0.35);
}
.criteria-cell {
padding: clamp(32px, 4vw, 60px) clamp(20px, 3vw, 60px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.criteria-cell:nth-child(1) { border-right: var(--line); border-bottom: var(--line); }
.criteria-cell:nth-child(2) { border-bottom: var(--line); }
.criteria-cell:nth-child(3) { border-right: var(--line); }
.criteria-cell__title {
font-weight: 500;
font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem); /* 24 → 32 (Figma 31.9-32.2) */
color: var(--color-white);
margin: 0;
line-height: 1.25;
}
.criteria-cell__body {
font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.625rem); /* 18 → 26 */
line-height: 1.45;
color: var(--color-white);
margin: 0;
}
.criteria-grid__center {
position: absolute;
top: 50%; left: 50%;
/* The Lightview sun-divider SVG has rays fanning UP from a baseline at
the bottom of the viewBox. Anchor the container's bottom at the
row+column intersection so the rays sit just above the crossing
lines, matching Figma (CD-2081). */
transform: translate(-50%, -100%);
width: clamp(80px, 9vw, 122px);
height: auto;
background: var(--color-navy);
padding: 6px 14px;
display: grid;
place-items: center;
pointer-events: none;
}
.criteria-grid__center img { width: 100%; height: auto; }
/* Sector focus — Figma 64:315: white bg, 526px tall card, 2-column split */
.sector-focus {
background: var(--color-white);
padding-block: clamp(48px, 4rem + 2vw, 80px);
}
.sector-focus__inner {
max-width: min(var(--container-max), 100% - 40px);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.sector-focus__card {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--color-white);
border: 1px solid var(--border-blue-15);
border-radius: var(--radius-lg);
overflow: hidden;
min-height: 526px;
}
.sector-focus__left {
background: var(--color-blue-light);
border-right: 1px solid var(--border-blue-15);
padding: clamp(24px, 3vw, 39px);
display: flex;
flex-direction: column;
gap: clamp(20px, 2vw, 32px);
}
.sector-focus__heading { display: flex; flex-direction: column; gap: 16px; }
.sector-focus__title {
font-weight: 600;
font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); /* 24 → 32 */
color: var(--color-blue);
margin: 0;
}
.sector-parent-tabs {
list-style: none;
margin: 0;
padding: 0;
width: 228px;
max-width: 100%;
}
.sector-parent-tab {
width: 100%;
text-align: left;
background: transparent;
border: 0;
padding: 13px 0;
font-family: var(--font-sans);
font-size: 1.125rem; /* 18 */
color: var(--color-blue);
cursor: pointer;
height: 60px;
display: flex;
align-items: center;
}
.sector-parent-tabs li + li .sector-parent-tab {
border-top: 1px solid rgba(0, 106, 207, 0.2);
}
.sector-parent-tab.is-active { font-weight: 600; }
.sector-focus__media {
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: var(--radius-xl);
overflow: hidden;
flex: 1 1 auto;
min-height: 200px;
position: relative;
}
.sector-focus__image {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
inset: 0;
}
.sector-focus__right {
display: flex;
flex-direction: column;
}
.sector-tab {
background: var(--color-white);
border: 0;
border-bottom: 1px dashed var(--border-navy-35);
padding: 0 clamp(24px, 3vw, 32px);
height: 114px;
display: flex;
align-items: center;
gap: 16px;
cursor: pointer;
font-family: var(--font-sans);
text-align: left;
width: 100%;
transition: background-color 150ms, color 150ms;
}
.sector-tab:last-child { border-bottom: 0; }
.sector-tab__icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: grid;
place-items: center;
}
.sector-tab__icon img { width: 40px; height: 40px; }
.sector-tab__label { display: flex; flex-direction: column; gap: 2px; }
.sector-tab__name {
font-weight: 500;
font-size: 1.25rem; /* 20 */
color: var(--color-navy);
letter-spacing: -0.01em;
}
.sector-tab__desc {
font-size: 1rem; /* 16 */
color: var(--color-white);
}
.sector-tab.is-active {
background: var(--color-navy);
border-radius: var(--radius-md);
border-bottom-color: transparent;
}
.sector-tab.is-active .sector-tab__name { color: var(--color-white); font-weight: 500; }
.sector-tab.is-active .sector-tab__icon img { filter: brightness(0) invert(1); }
/* Approach FAQs — Figma 390:2127: navy bg, hover-expand accordion */
.approach-faqs {
background: var(--color-navy);
color: var(--color-white);
padding-block: clamp(48px, 4rem + 2vw, 80px);
}
/* Standalone /faq/ page sits flush under the fixed header — extra top padding clears it. */
.approach-faqs.faq-page {
padding-top: calc(var(--utility-height) + var(--nav-height) + 60px);
min-height: 80vh;
}
.approach-faqs__inner {
max-width: min(var(--container-max), 100% - 40px);
margin-inline: auto;
padding-inline: var(--container-pad);
display: flex;
flex-direction: column;
gap: 30px;
}
.approach-faqs__heading {
display: flex;
align-items: center;
gap: 40px;
}
.approach-faqs__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.75rem, 1rem + 2vw, 2.4rem); /* 28 → 38.8 */
color: var(--color-white);
margin: 0;
line-height: 1.55;
}
.approach-faqs__rule {
flex: 1 1 0;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.35);
margin: 0;
}
.faq-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.faq-item {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 13px;
overflow: hidden;
}
.faq-item__toggle {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
background: transparent;
border: 0;
color: var(--color-white);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem; /* 20 */
line-height: 1.3;
padding: 25px 32px;
cursor: pointer;
text-align: left;
}
.faq-item__icon {
flex-shrink: 0;
width: 22px;
height: 22px;
display: grid;
place-items: center;
}
/* Stack the two icons in the same cell and show the one matching state.
Previously a single + was rotated 45° to fake an X — which read as
non-standard and wasn't clickable (CD-2072). Now: + when collapsed,
− when expanded. */
.faq-item__icon-plus,
.faq-item__icon-minus { grid-area: 1 / 1; transition: opacity 150ms ease; }
.faq-item__icon-minus { opacity: 0; }
.faq-item__toggle[aria-expanded="true"] .faq-item__icon-plus { opacity: 0; }
.faq-item__toggle[aria-expanded="true"] .faq-item__icon-minus { opacity: 1; }
.faq-item__panel {
padding: 0 32px 25px;
color: rgba(255, 255, 255, 0.85);
font-size: 1rem;
}
.faq-item__panel[hidden] { display: none; }
.faq-item__placeholder { font-style: italic; opacity: 0.7; }
/* ESG — Figma 64:418: light blue bg, centered title + separator + paragraph */
.esg {
background: var(--color-blue-light);
padding-block: clamp(48px, 4rem + 2vw, 80px);
}
.esg__inner {
max-width: min(var(--container-max), 100% - 40px);
margin-inline: auto;
padding-inline: var(--container-pad);
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
text-align: center;
}
.esg__title {
font-weight: 700;
font-size: clamp(1.75rem, 1rem + 2vw, 2.375rem); /* 28 → 38 */
color: var(--color-blue);
margin: 0;
line-height: 1.5;
}
.esg__rule {
width: 100%;
border: 0;
border-top: 1px solid rgba(16, 100, 180, 0.3);
margin: 0;
}
.esg__body {
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem); /* 16 → 22 */
line-height: 1.65;
color: var(--color-blue);
margin: 0;
max-width: 1228px;
}
/* === 5c. Team page sections ============================================= */
.team-section {
padding-block: clamp(48px, 4rem + 2vw, 80px);
}
.team-section--investment { background: var(--color-blue-light); }
.team-section--ops,
.team-section--advisors { background: var(--color-white); }
.team-section--ops { padding-bottom: 0; }
.team-section--advisors { padding-top: clamp(48px, 4vw, 60px); }
.team-section__inner {
max-width: min(var(--container-max), 100% - 40px);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.team-section__title {
font-weight: 600;
font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); /* 24 → 32 */
color: var(--color-blue);
margin: 0 0 40px;
}
.team-section__lede {
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem); /* 16 → 22 */
color: var(--color-blue);
margin: -10px 0 30px;
max-width: 90ch;
text-wrap: pretty;
}
/* Team card — Figma 337:2114, 337:2329 etc.: 315×326, gradient bg, blue 15% border, photo + name + title */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.team-card {
background: var(--gradient-card);
border: 1px solid var(--border-blue-15);
border-radius: var(--radius-xl);
overflow: hidden;
}
.team-card__inner {
display: flex;
flex-direction: column;
gap: 24px;
padding: 13px;
width: 100%;
background: transparent;
border: 0;
font-family: var(--font-sans);
text-align: left;
cursor: pointer;
}
.team-card__photo {
display: block;
border: 1px solid var(--border-blue-15);
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 1 / 1;
background: var(--color-blue-light);
}
.team-card__photo img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 400ms ease;
}
/* CD-2154 follow-up: same hover-gating as advisor-card / modal arrows.
Safari iOS fires :focus-visible after a tap on elements, so the
scale-up zoom persists as a "stuck" highlight after closing the bio
modal. Gating on (hover: hover) confines this effect to actual hover-
capable devices. Native focus-ring still appears for keyboard users. */
@media (hover: hover) {
.team-card__inner:hover .team-card__photo img,
.team-card__inner:focus-visible .team-card__photo img {
transform: scale(1.04); /* Hover zoom — CD-1958 behavioral note */
}
}
.team-card__inner { -webkit-tap-highlight-color: transparent; }
.team-card__meta {
display: flex;
flex-direction: column;
gap: 4px;
padding-inline: 4px;
}
.team-card__name {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem; /* 16 */
color: var(--color-blue);
letter-spacing: -0.01em;
}
.team-card__title {
font-size: 0.75rem; /* 12 */
color: var(--color-blue);
opacity: 0.8;
}
/* Operating Advisors name-only cards — Figma 337:2869 etc.: 315×139, blue border, centered text */
.advisor-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.advisor-card {
display: flex;
align-items: center;
justify-content: center;
min-height: 139px;
padding: 24px clamp(24px, 4vw, 86px);
border: 1px solid var(--color-blue);
border-radius: var(--radius-md);
font-weight: 500;
font-size: 1.125rem; /* 18 */
color: var(--color-blue);
text-align: center;
letter-spacing: -0.01em;
text-wrap: balance;
text-decoration: none;
transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
cursor: pointer;
/* CD-2154: kill iOS/Safari translucent blue tap overlay on touch. */
-webkit-tap-highlight-color: transparent;
}
/* CD-2154: hover-fill only applies on devices that actually support hover.
iOS keeps :hover stuck on the last-tapped element until you tap something
else, so without this gate the tile remains highlighted after navigating
away. :focus-visible stays outside the wrapper so keyboard focus rings
continue to work everywhere. */
@media (hover: hover) {
.advisor-card:hover {
background: var(--color-blue);
color: var(--color-white);
text-decoration: none;
transform: translateY(-2px);
}
}
/* CD-2154 follow-up: gate :focus-visible fill on hover-capable devices too.
Safari iOS fires :focus-visible after a tap, so without this the navy
fill persisted after closing the bio modal (Steve's "stuck blue box"
on Operating Advisors). Keyboard users on hover-capable devices still
get the highlight; native focus outline still appears for keyboard
users on any device. */
@media (hover: hover) {
.advisor-card:focus-visible {
background: var(--color-blue);
color: var(--color-white);
text-decoration: none;
transform: translateY(-2px);
}
}
/* === 5d. Companies page sections ======================================== */
/* Intro — Figma 9:526: 361px tall, white bg, centered quote/separator/tagline */
.companies-intro {
background: var(--color-white);
padding-block: clamp(48px, 4rem + 2vw, 80px);
}
.companies-intro__inner {
max-width: min(832px, 100% - 40px);
margin-inline: auto;
padding-inline: var(--container-pad);
display: flex;
flex-direction: column;
gap: 30px;
text-align: center;
}
.companies-intro__quote {
font-weight: 600;
font-size: clamp(1.25rem, 0.85rem + 1vw, 2rem);
color: var(--color-blue);
margin: 0;
text-wrap: balance;
}
.companies-intro__rule {
border: 0;
border-top: 1px solid rgba(16, 100, 180, 0.3);
margin: 0;
}
.companies-intro__tagline {
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
color: var(--color-blue);
margin: 0;
text-wrap: balance;
}
/* Portfolio — Figma 239:935 */
.portfolio {
background: var(--color-white);
padding-block: clamp(48px, 4rem + 2vw, 80px);
}
.portfolio__inner {
max-width: min(var(--container-max), 100% - 40px);
margin-inline: auto;
padding-inline: var(--container-pad);
display: flex;
flex-direction: column;
gap: 60px;
}
/* Filter bar */
.portfolio__filter {
display: flex;
align-items: center;
gap: 27px;
flex-wrap: wrap;
}
.status-filter {
display: flex;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(16, 100, 180, 0.1);
border-radius: 14px;
padding: 4px;
gap: 4px;
width: 451px;
max-width: 100%;
backdrop-filter: blur(5.85px);
-webkit-backdrop-filter: blur(5.85px);
}
.status-filter__btn {
flex: 1 1 0;
height: 48px;
padding: 13px 12px;
background: transparent;
border: 0;
border-radius: 12px;
font-family: var(--font-sans);
font-size: 1rem;
color: var(--color-blue);
cursor: pointer;
transition: background-color 150ms;
}
.status-filter__btn.is-active {
background: var(--color-blue-light);
border: 1px solid rgba(0, 106, 207, 0.2);
font-weight: 500;
}
.portfolio__filter-rule {
flex: 1 1 0;
border: 0;
border-top: 1px solid rgba(16, 100, 180, 0.3);
margin: 0;
min-width: 0;
}
.service-filter {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.service-filter__label {
font-weight: 500;
font-size: 1rem;
color: var(--color-blue);
white-space: nowrap;
}
.service-filter__select {
padding: 10px 32px 10px 12px;
background: var(--color-white);
border: 1px solid rgba(16, 100, 180, 0.3);
border-radius: 12px;
font-family: var(--font-sans);
font-size: 0.875rem;
color: rgba(16, 100, 180, 0.8);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
min-width: 122px;
}
/* Card grid */
.portfolio__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.portfolio-card {
background: var(--gradient-card);
border: 1px solid var(--border-blue-15);
border-radius: var(--radius-xl);
height: 234px;
overflow: hidden;
transition: box-shadow 300ms ease-out;
}
/* CD-2154 follow-up: hover/focus shadow on hover-capable devices only.
Safari iOS fires :focus-within after tapping the inner , so the
shadow persisted after closing the company modal. */
@media (hover: hover) {
.portfolio-card:hover,
.portfolio-card:focus-within {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
}
.portfolio-card__inner { -webkit-tap-highlight-color: transparent; }
.portfolio-card[hidden] { display: none; }
.portfolio-card__inner {
width: 100%;
height: 100%;
background: transparent;
border: 0;
cursor: pointer;
display: grid;
place-items: center;
padding: 32px;
font-family: var(--font-sans);
}
.portfolio-card__logo {
display: grid;
place-items: center;
width: 100%;
height: 100%;
}
/* CD-2160: pixel max dimensions live on the img itself, not the wrapper.
Percentage max-height on an img inside a grid-cell wrapper resolves against
the grid track's auto-height, not the wrapper's max-height, so the img
exceeded the wrapper's 127px cap and overflowed downward — pushing the
visible logo below the card's vertical center. */
.portfolio-card__logo img {
max-width: 243px;
max-height: 127px;
object-fit: contain;
filter: grayscale(0); /* Figma shows full-color logos */
transition: transform 300ms ease-out;
}
/* CD-2154 follow-up: same hover-gating as the card shadow. */
@media (hover: hover) {
.portfolio-card:hover .portfolio-card__logo img,
.portfolio-card__inner:focus-visible .portfolio-card__logo img {
transform: scale(1.165);
}
}
.portfolio__empty {
text-align: center;
color: rgba(16, 100, 180, 0.6);
font-style: italic;
margin: 0;
}
/* Case Studies — Figma 317:775. White bg, 2-column 640×308 cards. */
/* Case Studies — Figma 317:775 — navy section, subtle gradient cards with white text. */
.case-studies {
background: var(--color-navy);
padding-block: clamp(48px, 4rem + 2vw, 60px);
}
.case-studies__inner {
max-width: min(var(--container-max), 100% - 40px);
margin-inline: auto;
padding-inline: var(--container-pad);
display: flex;
flex-direction: column;
gap: 36px;
}
.case-studies__heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.case-studies__title {
font-weight: 700;
/* Figma 38.8px @ 1440 → keep responsive */
font-size: clamp(1.75rem, 1rem + 1.5vw, 2.425rem);
color: var(--color-white);
margin: 0;
}
.case-studies__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.case-study {
/* Figma 317:793 — outer wrapper is a subtle gradient on the navy bg with a 1px white-15 border. */
background: linear-gradient(180deg, rgba(217, 217, 217, 0.07) 0%, rgba(217, 217, 217, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
/* CD-2170 (v2): horizontal padding floor 22px so the bottom row doesn't sit
flush against the card edge at narrow widths (was 18 → looked cramped per
Steve's screenshots). Vertical: was a fixed height: 308px (Figma value),
but at narrow widths the name + sector wrap and the meta row overflowed
the bottom by ~5px ("text too close to / extending past the frame edge").
Switch to min-height so cards can grow vertically when content needs it;
grid auto-row keeps the 2-up cards aligned to the tallest sibling. */
padding: 17px clamp(22px, 4%, 30px) 24px;
display: flex;
flex-direction: column;
gap: 24px;
min-height: 308px;
cursor: pointer;
text-decoration: none;
}
.case-study__logo {
/* Figma 317:794 — fixed inner card height 201px, white bg, rounded 14, white-15 border.
Explicit height + min/max + flex-shrink:0 because flex column items default to
min-height:auto and would otherwise grow with intrinsic image size.
CD-2162: overflow:hidden so the img can never bleed past the rounded
edge of the white logo card. */
height: 201px;
min-height: 201px;
max-height: 201px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 14px;
background: var(--color-white);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 24px;
overflow: hidden;
}
/* CD-2162: same pattern as the CD-2160 portfolio-card fix — percentage
max-height on an img inside a grid-cell wrapper resolves against the
grid track's auto-height, not the wrapper's fixed height, so the img
could grow taller than the white logo card and bleed past the rounded
bottom edge. Pixel max dimension on the img closes that gap (the wrapper
has 201px height with 24px top+bottom padding → 153px content area). */
.case-study__logo img {
max-width: 60%;
max-height: 153px;
object-fit: contain;
}
.case-study__meta {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.case-study__title-block {
display: flex;
flex-direction: column;
gap: 4px;
}
.case-study__name {
font-weight: 500;
font-size: 1rem; /* 16px */
letter-spacing: -0.01em;
color: var(--color-white);
margin: 0;
}
.case-study__sector {
font-weight: 400;
font-size: 0.875rem; /* 14px */
letter-spacing: -0.01em;
color: var(--color-white);
margin: 0;
}
.case-study__cta {
background: transparent;
border: 0;
font-family: var(--font-sans);
font-weight: 400;
font-size: 0.875rem;
color: var(--color-white);
letter-spacing: -0.01em;
text-decoration: underline;
cursor: pointer;
}
/* === 5e. News page sections ============================================ */
.news {
background: var(--color-white);
padding-block: clamp(48px, 4rem + 2vw, 80px);
}
.news__inner {
max-width: min(var(--container-max), 100% - 40px);
margin-inline: auto;
padding-inline: var(--container-pad);
}
/* News card — Figma 96:2082: 427×350, gradient bg, blue 15% border, image (393×201) + title + date */
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.news-card {
background: var(--gradient-card);
border: 1px solid var(--border-blue-15);
border-radius: var(--radius-xl);
overflow: hidden;
transition: transform 200ms ease, box-shadow 200ms ease;
}
.news-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 100, 180, 0.08); }
.news-card__inner {
display: flex;
flex-direction: column;
gap: 24px;
padding: 17px;
text-decoration: none;
color: inherit;
height: 100%;
}
.news-card__inner:hover { text-decoration: none; }
.news-card__media {
display: grid;
place-items: center;
background: var(--color-white);
border: 1px solid var(--border-blue-15);
border-radius: var(--radius-lg);
overflow: hidden;
height: 201px;
}
.news-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-card__media img.news-card__media--logo {
width: auto;
max-width: 60%;
height: auto;
max-height: 60%;
object-fit: contain;
}
.news-card__body {
display: flex;
flex-direction: column;
gap: 14px;
}
.news-card__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
line-height: 1.3;
color: var(--color-blue);
letter-spacing: -0.01em;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card__meta {
display: flex;
align-items: center;
gap: 9px;
color: var(--color-blue);
opacity: 0.8;
}
.news-card__icon { width: 22px; height: 22px; flex-shrink: 0; }
.news-card__date {
font-weight: 500;
font-size: 0.875rem;
line-height: 1.3;
}
/* === 5f. Contact page sections ========================================= */
.contact {
background: var(--color-white);
padding-block: clamp(48px, 4rem + 2vw, 80px);
}
.contact__inner {
max-width: min(var(--container-max), 100% - 40px);
margin-inline: auto;
padding-inline: var(--container-pad);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.contact__info { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.contact__intro { display: flex; flex-direction: column; gap: 30px; }
.contact__title {
font-weight: 600;
font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); /* 24 → 32 */
color: var(--color-blue);
margin: 0;
}
.contact__lede {
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem); /* 16 → 22 */
color: var(--color-blue);
margin: 0;
}
.contact-rows {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.contact-row {
display: flex;
align-items: center;
gap: 16px;
height: 114px;
border-top: 1px dashed var(--border-navy-35);
}
.contact-row:last-child { border-bottom: 1px dashed var(--border-navy-35); }
.contact-row__icon { width: 34px; height: 34px; flex-shrink: 0; }
.contact-row__value {
font-size: clamp(1rem, 0.85rem + 0.7vw, 1.25rem);
color: var(--color-blue);
text-decoration: none;
line-height: 1.4;
overflow-wrap: anywhere;
min-width: 0;
}
.contact-row__value:hover { text-decoration: underline; }
/* Form card — Figma 303:1014: light blue bg, 475px tall, 4 underline inputs + Send button */
.contact-form {
background: var(--color-blue-light);
border: 1px solid rgba(204, 204, 204, 0.3);
border-radius: var(--radius-md);
padding: clamp(20px, 3vw, 27px) clamp(20px, 4vw, 39px);
display: flex;
flex-direction: column;
gap: 20px;
min-height: 475px;
min-width: 0;
}
.contact-form__hp { display: none; }
.contact-form__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.contact-form__field label {
font-weight: 600;
font-size: 1rem;
color: var(--color-blue);
text-transform: capitalize;
}
.contact-form__field label span { color: var(--color-blue); }
.contact-form__field input {
background: transparent;
border: 0;
border-bottom: 1px solid rgba(0, 48, 94, 0.15);
padding: 12px 12px 12px 0;
font-family: var(--font-sans);
font-size: 1rem;
color: var(--color-blue);
}
.contact-form__field input::placeholder { color: var(--color-blue); opacity: 0.6; }
.contact-form__field input:focus {
outline: none;
border-bottom-color: var(--color-blue);
}
.contact-form__submit {
align-self: flex-start;
margin-top: auto;
}
/* CD-2147: success message takes over the form card after submission.
Hidden by default; JS adds .is-submitted on /contact/?success=true to
hide all the fields/button and reveal this block as the confirmation. */
.contact-form__success {
display: none;
color: var(--color-blue);
font-weight: 500;
font-size: 1.125rem;
line-height: 1.5;
text-align: center;
margin: 0;
padding: 32px 0;
}
.contact-form.is-submitted > *:not(.contact-form__success) { display: none; }
.contact-form.is-submitted .contact-form__success {
display: block;
}
.contact-form.is-submitted {
justify-content: center;
}
/* Inline error if the fetch POST fails (network down, Netlify unreachable,
or form not yet registered with Netlify on first deploy). Inline so the
user can copy the fallback email without leaving the page. */
.contact-form__error {
color: #b3261e;
font-size: 0.9375rem;
line-height: 1.5;
margin: 8px 0 0;
}
.contact-form__error a { color: inherit; text-decoration: underline; }
/* Map — Figma 303:859. Centered 1320×508 image with rounded corners. */
.contact-map {
background: var(--color-white);
padding-bottom: clamp(48px, 4rem + 2vw, 80px);
}
.contact-map__inner {
max-width: min(var(--container-max), 100% - 40px);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.contact-map__inner img {
width: 100%;
height: auto;
max-height: 508px;
object-fit: cover;
border-radius: var(--radius-md);
}
/* === 5f-2. Modal overlay (bio/company/case-study) ====================== */
/* Backdrop + centering layer that wraps an injected .bio-modal / .company-modal / .case-study-modal. */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 60px);
/* Modal itself stays fixed within the viewport — no outer scroll. */
overflow: hidden;
}
.modal-overlay[hidden] { display: none; }
.modal-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 48, 94, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
cursor: pointer;
}
.modal-overlay__inner {
position: relative;
width: 100%;
display: flex;
justify-content: center;
/* Modal sizes itself; this wrapper just centers horizontally */
}
/* Scroll lock when overlay is open. iOS Safari ignores overflow:hidden on
body for touch-scroll of the underlying page (CD-2034), so for nav-open
we pin the body with position:fixed and JS saves/restores scrollY. Modals
stay on the overflow:hidden path since they don't show this bug. */
html:has(body.modal-open),
html:has(body.nav-open) { overflow: hidden; }
body.modal-open { overflow: hidden; }
body.nav-open {
position: fixed;
inset-inline: 0;
width: 100%;
overflow: hidden;
}
/* === 5h. Legal pages (privacy, terms, text-message privacy) ============ */
.legal-page {
background: var(--color-white);
padding-block: clamp(60px, 5rem + 2vw, 100px);
/* Sit below the fixed header */
padding-top: calc(var(--utility-height) + var(--nav-height) + 60px);
}
.legal-page__inner {
max-width: min(820px, 100% - 40px);
margin-inline: auto;
padding-inline: var(--container-pad);
color: var(--color-text);
font-size: 1rem;
line-height: 1.65;
}
.legal-page__inner h1,
.legal-page__inner h2,
.legal-page__inner h3,
.legal-page__inner h4,
.legal-page__inner h5 {
color: var(--color-blue);
margin: 1.5em 0 0.5em;
text-wrap: balance;
}
.legal-page__inner h1 {
font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
margin-top: 0;
margin-bottom: 0.75em;
}
.legal-page__inner h2 { font-size: clamp(1.25rem, 0.9rem + 1vw, 1.75rem); }
.legal-page__inner h3 { font-size: clamp(1.125rem, 0.85rem + 0.6vw, 1.375rem); }
.legal-page__inner p,
.legal-page__inner ul,
.legal-page__inner ol { margin: 0 0 1em; }
.legal-page__inner ul,
.legal-page__inner ol { padding-left: 1.5em; }
.legal-page__inner a { color: var(--color-blue); text-decoration: underline; }
.legal-page__inner a:hover { text-decoration: none; }
.legal-page__inner strong, .legal-page__inner b { font-weight: 600; }
.legal-page__inner table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.legal-page__inner th,
.legal-page__inner td { padding: 8px 12px; border: 1px solid rgba(16, 100, 180, 0.15); text-align: left; }
/* === 5g. News article detail page ===================================== */
.news-article {
padding-top: calc(var(--utility-height) + var(--nav-height) + 40px);
padding-bottom: clamp(48px, 4rem + 2vw, 80px);
background: var(--color-blue-light);
min-height: 100vh;
}
/* === Bio modal — Figma 481:963 === */
.bio-modal,
.company-modal {
max-width: 860px;
width: 100%;
margin-inline: auto;
background: var(--color-white);
border-radius: 10px;
/* overflow visible so the photo can extend below the navy band per Figma 481:963 */
overflow: visible;
position: relative;
box-shadow: 0 12px 40px rgba(0, 48, 94, 0.15);
}
/* Header is positioned (not flowed): photo, title, close, nav are placed at exact
Figma coordinates so the photo can bleed 44px below the 156px navy band. */
.bio-modal__header,
.company-modal__header {
background: var(--color-navy);
color: var(--color-white);
height: 156px;
position: relative;
border-radius: 10px 10px 0 0;
}
.bio-modal__photo,
.company-modal__logo {
position: absolute;
left: 49px;
top: 23px;
width: 239px;
height: 177px;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-white);
}
.bio-modal__photo img {
width: 100%; height: 100%; object-fit: cover;
}
.company-modal__logo {
display: grid; place-items: center; padding: 24px;
}
.company-modal__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bio-modal__title,
.company-modal__title {
position: absolute;
left: 324px;
top: 23px;
/* CD-2172: reserve room for both the close (35w @ right:49) AND the nav
arrows sitting below it (2× 39.3w + 6.6 gap @ right:49 → reaching
~134px from modal edge). Long names (e.g. Cybersheath) used to wrap
to 2 lines and the sector text below slid under the nav arrows.
144 gives ~10px breathing room past the arrows. */
right: 144px;
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
}
.bio-modal__name,
.company-modal__name {
font-weight: 700;
font-size: clamp(1.75rem, 1rem + 2vw, 2.375rem); /* 28 → 38 */
margin: 0;
color: var(--color-white);
}
.bio-modal__role,
.company-modal__sector {
font-size: 1rem;
margin: 0;
color: var(--color-white);
}
.bio-modal__close,
.company-modal__close {
position: absolute;
top: 23px;
right: 49px;
width: 35px;
height: 35px;
padding: 0;
display: grid;
place-items: center;
background: transparent;
border: 0.666px solid var(--color-white);
border-radius: 6.662px;
cursor: pointer;
text-decoration: none;
font: inherit;
color: inherit;
/* CD-2154: kill iOS translucent blue tap overlay on touch. */
-webkit-tap-highlight-color: transparent;
}
/* CD-2154: hover-fill only fires on hover-capable devices. See .advisor-card
for the full rationale (iOS sticky :hover after tap). */
@media (hover: hover) {
.bio-modal__close:hover,
.company-modal__close:hover { background: rgba(255, 255, 255, 0.1); }
}
/* Suppress the focus ring on the close button (it's auto-focused when the modal
opens, so a focus ring on top of the existing white border reads as a double
outline). Keyboard users still see a focus ring when they tab to other
elements inside the modal. */
.bio-modal__close:focus,
.company-modal__close:focus,
.case-study-modal__close:focus,
.bio-modal__close:focus-visible,
.company-modal__close:focus-visible,
.case-study-modal__close:focus-visible { outline: none; }
.bio-modal__close img,
.company-modal__close img { transform: rotate(45deg); width: 22.649px; height: 22.649px; }
.bio-modal__nav,
.company-modal__nav {
position: absolute;
top: 102px;
right: 49px;
display: flex;
gap: 6.662px;
}
/* Nav arrow buttons: no CSS background/border — the Figma SVG draws its own
circle ring + chevron. Button is just a transparent click-target. */
.bio-modal__nav-arrow,
.company-modal__nav-arrow {
width: 39.303px;
height: 39.303px;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
font: inherit;
color: inherit;
/* CD-2154: kill iOS translucent blue tap overlay (the original ticket symptom). */
-webkit-tap-highlight-color: transparent;
}
/* CD-2154: hover-fill only on hover-capable devices. iOS preserves :hover
on the last-tapped arrow until something else is interacted with, so
without this gate the arrow stays highlighted after navigation. */
@media (hover: hover) {
.bio-modal__nav-arrow:hover,
.company-modal__nav-arrow:hover { background: rgba(255, 255, 255, 0.10); }
}
.bio-modal__nav-arrow img,
.company-modal__nav-arrow img { width: 100%; height: 100%; display: block; }
/* Prev arrow flips the right-pointing Figma asset horizontally */
.bio-modal__nav-arrow--prev img,
.company-modal__nav-arrow--prev img { transform: scaleX(-1); }
.bio-modal__body,
.company-modal__body {
/* Top padding accommodates the 44px photo bleed below the navy header
plus 36px of breathing space (matches Figma divider at y=218 → body at y=236). */
padding: 80px clamp(20px, 4vw, 50px) clamp(20px, 3vw, 36px);
color: var(--color-blue);
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
}
/* Thin gray rule beneath the navy header — Figma 481:974 (y=218, ~762px wide).
Sits behind the bleeding photo on the left. */
.bio-modal__body::before,
.company-modal__body::before {
content: "";
position: absolute;
left: 49px; right: 49px;
top: 62px; /* 218 - 156 = 62px from top of body */
height: 1px;
background: rgba(16, 100, 180, 0.30);
}
.bio-modal__row,
.company-modal__row {
display: flex;
gap: 16px;
align-items: stretch;
}
.bio-modal__col,
.company-modal__col {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.bio-modal__col p,
.company-modal__col p { font-size: 0.875rem; margin: 0; }
.company-modal__col p { font-size: 1rem; }
.bio-modal__divider,
.company-modal__divider {
width: 1px;
background: rgba(16, 100, 180, 0.3);
}
.bio-modal__heading,
.company-modal__heading {
font-weight: 500;
font-size: 1.25rem;
color: var(--color-blue);
margin: 0;
}
.bio-modal__rule,
.company-modal__rule {
border: 0;
border-top: 1px solid rgba(16, 100, 180, 0.3);
margin: 0;
}
.bio-modal__description,
.company-modal__description {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.875rem;
line-height: 1.6;
/* Figma 481:975 — internal scroll with the navy thumb. 412px is the Figma reference;
min() with viewport-available space lets it shrink on shorter viewports so the modal
never overflows the screen. ~525px accounts for the navy header (156), body padding
and gaps, education/board row, separator + heading, plus overlay top+bottom padding. */
max-height: min(412px, calc(100vh - 525px));
overflow-y: auto;
scrollbar-gutter: stable;
/* CD-2151: push the scroll region's right edge outward past the body's
~50px right padding so the scrollbar sits closer to the modal's rounded
edge (~14px instead of ~50px), then add padding-right inside so the bio
text gets ~20px of breathing room before the scrollbar instead of
touching it. The Education/Board row + hr above the scroll region stay
at the body's original 50px inset (only this scroll container shifts). */
margin-right: clamp(-36px, -2.6vw, -20px);
padding-right: clamp(40px, 5vw, 56px);
}
.company-modal__description-text { font-size: 1rem; line-height: 1.5; }
.bio-modal__bio-text p,
.bio-modal__bio-text div,
.company-modal__description-text p,
.company-modal__description-text div { margin: 0 0 0.75em; }
.bio-modal__bio-text p:last-child,
.company-modal__description-text p:last-child { margin-bottom: 0; }
.bio-modal__bio-text :empty { display: none; }
/* Bios pasted from Word/Outlook/CMS bring along legacy tags and inline
font-family/font-size/color/background declarations. Strip them so every
team modal renders with the same Poppins / 0.875rem / blue look as the
Investment Team bios. Bold/italic and link colors still inherit normally. */
.bio-modal__bio-text,
.bio-modal__bio-text * {
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
color: inherit !important;
background-color: transparent !important;
}
/* Custom scrollbar to match Figma navy thumb */
.bio-modal__description::-webkit-scrollbar,
.company-modal__description::-webkit-scrollbar { width: 14px; }
.bio-modal__description::-webkit-scrollbar-track,
.company-modal__description::-webkit-scrollbar-track { background: var(--color-gray-mid); }
.bio-modal__description::-webkit-scrollbar-thumb,
.company-modal__description::-webkit-scrollbar-thumb { background: var(--color-navy); }
/* === Case Study modal — Figma 311:1209 === */
.case-study-modal {
/* Figma 311:1209 — modal is 1060px (sidebar + body) with a 62px close button
visually floating off the right edge. Keep the modal a 2-col grid and
position the close button absolutely outside the rectangle. */
max-width: 1060px;
width: 100%;
margin-inline: auto;
display: grid;
grid-template-columns: 339px 1fr;
background: var(--color-white);
border-radius: var(--radius-xl);
/* overflow:visible so the absolutely positioned close button can stick out
past the rounded right edge. Children (sidebar/body) clip themselves. */
overflow: visible;
position: relative;
box-shadow: 0 12px 40px rgba(0, 48, 94, 0.15);
}
.case-study-modal__sidebar {
background: var(--color-navy);
color: var(--color-white);
padding: 29px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
/* Modal itself uses overflow:visible (so the close button can float out),
so each cell needs its own rounded corners + clipping. */
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
overflow: hidden;
}
.case-study-modal__logo {
background: var(--color-white);
border-radius: 18px;
padding: 32px;
display: grid;
place-items: center;
height: 168px;
overflow: hidden;
}
.case-study-modal__logo img {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* CD-2169 follow-up: reserve room on the right so the absolutely-positioned
X (44w @ right:12, ~56px wide claim) can't sit over the name + sector text
when the sidebar uses row layout at mobile (logo on left, heading on right). */
.case-study-modal__heading {
display: flex;
flex-direction: column;
gap: 10px;
padding-right: 56px;
}
.case-study-modal__name {
font-family: var(--font-sans);
font-weight: 700;
font-size: 2.4rem;
color: var(--color-white);
margin: 0;
}
.case-study-modal__sector {
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--color-white);
margin: 0;
}
.case-study-modal__body {
/* CD-2169 follow-up: bump right padding from 29 to 60 so the body's first
row (.case-study-modal__headline) can't extend under the X button that
floats at top:12 right:12 (44w + 12 right inset = ~56px claim). All
other sides keep the original 29px. */
padding: 29px 60px 29px 29px;
color: var(--color-blue);
/* Figma 311:1178 — body lays out as a flex column: headline, top rule, playbook,
each separated by a 16px gap. No inner scrollbar — modal sizes to content. */
display: flex;
flex-direction: column;
gap: 16px;
/* Match the modal's right-side rounded corners. */
border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
overflow: hidden;
}
.case-study-modal__headline {
font-weight: 600;
font-size: 1.125rem;
color: var(--color-blue);
margin: 0;
}
.case-study-modal__rule {
border: 0;
border-top: 1px solid rgba(16, 100, 180, 0.3);
margin: 0; /* spacing comes from the parent flex gap */
}
/* Figma 311:1195 — stages sit in a tighter 10px gap inside the playbook block. */
.case-study-modal__playbook { display: flex; flex-direction: column; gap: 10px; }
.case-study-stage { display: flex; flex-direction: column; gap: 4px; }
.case-study-stage__title {
font-weight: 600;
font-size: 0.875rem;
color: var(--color-blue);
margin: 0;
}
.case-study-stage__items {
list-style: disc;
margin: 0;
padding-left: 21px;
font-size: 0.875rem;
color: var(--color-blue);
line-height: 1.5;
}
.case-study-modal__close {
/* CD-2169: was a 62x62 navy "tab" floating off the modal's right edge
(Figma 311:1201/1202). At narrow desktop widths the floating offset
clipped off-viewport, and the @media (max-width:768px) override hid
it entirely — so phone users had no Close. Reposition inside the
modal at top-right (16/16 inset), 44x44 touch target, navy pill so
it reads against both the white body (desktop, X over body area) and
the navy sidebar (mobile, where the sidebar stacks on top). */
position: absolute;
top: 12px;
right: 12px;
width: 44px;
height: 44px;
background: var(--color-navy);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 8px;
display: grid;
place-items: center;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
text-decoration: none;
z-index: 1;
/* CD-2154: kill iOS translucent blue tap overlay. */
-webkit-tap-highlight-color: transparent;
}
.case-study-modal__close img { transform: rotate(45deg); filter: brightness(0) invert(1); width: 22px; height: 22px; }
/* === News article — full-text article page === */
.news-article__inner {
max-width: min(900px, 100% - 40px);
margin-inline: auto;
padding-inline: var(--container-pad);
background: var(--color-white);
border-radius: var(--radius-md);
padding: clamp(24px, 4vw, 60px);
}
.news-article__nav {
/* CD-2158: back link on the left, prev/next pair on the right.
space-between separates the two groups; flex-wrap keeps narrow widths
from breaking the layout. */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px 24px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(16, 100, 180, 0.3);
font-size: 0.9375rem;
}
.news-article__pager {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.news-article__back,
.news-article__nav-link {
color: var(--color-blue);
text-decoration: none;
font-weight: 500;
}
.news-article__back:hover,
.news-article__nav-link:hover { text-decoration: underline; }
.news-article__title {
font-weight: 700;
font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
color: var(--color-blue);
margin: 0 0 12px;
text-wrap: balance;
}
.news-article__byline {
color: var(--color-blue);
opacity: 0.8;
font-size: 1rem;
margin: 0 0 30px;
}
.news-article__body {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-text);
}
.news-article__body p,
.news-article__body div { margin: 0 0 1em; }
.news-article__body a { color: var(--color-blue); }
.news-article__body img { max-width: 100%; height: auto; margin: 1em 0; border-radius: 8px; }
/* Sunburst (Figma 189:1583) — 13-ray decoration, layout converted from get_design_context.
Each ray sits at its Figma inset; rotor div applies the shared rotate+skew+mirror; rays use
container-query units (cqw/cqh) so the inner hypot() math scales with the wrapper size. */
.sunburst {
pointer-events: none;
container-type: size;
}
.sunburst__ray {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
container-type: size;
}
.sunburst__rotor {
flex: none;
transform: rotate(179.64deg) skewX(0.73deg) scaleX(-1);
/* 10% was the Figma-extracted value but rendered invisible over the
#e3f1ff Stats background. With the container scaled up to its design
size, the rays now have enough surface area that 20% reads as the
intended subtle background decoration. */
opacity: 0.2;
}
.sunburst__rotor img {
display: block;
width: 100%;
height: 100%;
}
/* Error page (404) */
.error-page { padding: 240px 0 120px; text-align: center; }
/* === 6a. Tablet + narrow desktop (max-width: 1024px) — nav switches to hamburger ===
CD-2035: iPad portrait (~820) and narrow desktop browsers showed the 4-link
desktop nav cramped. Hamburger now kicks in at ≤1024 so iPad portrait + narrow
desktops get the mobile menu. Content layout stays desktop until 768. */
@media (max-width: 1024px) {
/* Hide desktop links + CTA, show hamburger */
.main-nav__nav,
.main-nav__cta { display: none; }
.main-nav__toggle { display: block; }
/* backdrop-filter creates a containing block for position:fixed descendants —
would trap the drawer inside the 100px-tall .main-nav. Drop it on mobile so
the open drawer can fill the viewport. */
.main-nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Drawer sits below the visible header. When scrolled (.is-scrolled
collapses the utility bar to height:0) the drawer's top offset has to
follow, otherwise the strip of page content between the 100px header and
the old 140px drawer top peeks through (CD-2034). */
body.nav-open .main-nav__nav {
display: block;
position: fixed;
top: calc(var(--utility-height) + var(--nav-height));
inset-inline: 0;
bottom: 0;
background: var(--color-navy);
padding: 32px var(--container-pad);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 1;
}
/* When scrolled, the utility bar collapses to height:0 — drawer must drop
to the new header height (just --nav-height) so no page content shows
in the gap between the header and the drawer top (CD-2034). */
body.nav-open .site-header.is-scrolled .main-nav__nav {
top: var(--nav-height);
}
body.nav-open .main-nav__nav ul {
flex-direction: column;
gap: 24px;
}
/* When the menu is open, keep the CTA hidden in the header row so the
logo doesn't get squeezed and the row keeps its closed-state vertical
centering. The drawer exposes all nav targets. */
body.nav-open .main-nav__cta { display: none; }
/* Header background flips to navy when the menu is open so the header
bar reads as part of the drawer rather than transparent glass. */
body.nav-open .main-nav { background: var(--color-navy); }
body.nav-open .utility-bar { background: var(--color-navy); }
/* Utility bar: tighter spacing at narrow widths */
.utility-bar__inner { gap: 20px; font-size: 12px; }
}
/* === 6a-bis. Footer-only intermediate breakpoint (max-width: 1260px) ===
Collapse footer to 2 cols so the badge stack and address columns have room. */
@media (max-width: 1260px) {
.site-footer__inner {
grid-template-columns: auto 1fr;
row-gap: 32px;
}
}
/* === 6b. Phone / narrow tablet (max-width: 768px) — content collapses to 1 col === */
@media (max-width: 768px) {
/* Stats stack to 1 col, hide curl dividers (they only make sense horizontally) */
.stats__list {
flex-direction: column;
gap: 32px;
}
.stat__divider { display: none; }
.stat__num { font-size: clamp(2.25rem, 8vw, 3.75rem); }
/* About stacks: image first, then copy */
.about__inner {
grid-template-columns: 1fr;
}
/* Stay in the Loop: stack title + CTA */
.stay-loop__inner {
flex-direction: column;
align-items: flex-start;
text-align: left;
}
/* Footer: 1 column */
.site-footer__inner {
grid-template-columns: 1fr;
gap: 28px;
}
.site-footer__bottom-inner { justify-content: center; text-align: center; }
/* The desktop scale was tuned for the 4-column layout; on mobile we
stack to 1 column and want a slightly different curve so the logo
reads at a sensible size on phones + iPad portrait (CD-2068). */
.site-footer__logo { width: clamp(180px, 28vw, 260px); }
/* Approach: stack value props 1-up, criteria to 1-up, sector card to single column */
.value-props { grid-template-columns: 1fr; }
.criteria-grid { grid-template-columns: 1fr; }
.criteria-cell:nth-child(1),
.criteria-cell:nth-child(2),
.criteria-cell:nth-child(3) {
border-right: 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
}
.criteria-grid__center { display: none; } /* center logo doesn't apply when stacked */
.sector-focus__card { grid-template-columns: 1fr; }
.sector-focus__left { border-right: 0; border-bottom: 1px solid var(--border-blue-15); }
.approach-faqs__heading { gap: 16px; }
.approach-faqs__rule { display: none; }
/* Companies: stack filter pieces, drop the visual rule between status + dropdown */
.portfolio__filter { gap: 16px; }
.status-filter { width: 100%; }
.portfolio__filter-rule { display: none; }
.service-filter { width: 100%; }
.case-studies__grid { grid-template-columns: 1fr; }
.case-studies__heading { flex-wrap: wrap; }
.case-studies__nav { display: none; }
/* Contact: stack info + form */
.contact__inner { grid-template-columns: 1fr; gap: 40px; }
/* === Modal mobile rules ============================================== */
/* Mobile: switch from absolute Figma-coord layout back to a flow layout —
photo + title stacked side by side, close pinned top-right, nav inline
below. Desktop bleed of the photo is replaced with a contained 96px tile. */
.bio-modal__header,
.company-modal__header {
height: auto;
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
padding: 16px 16px 60px; /* leave room for nav arrows below */
border-radius: 10px 10px 0 0;
}
.bio-modal__photo,
.company-modal__logo {
position: static;
left: auto; top: auto;
width: 96px;
height: 96px;
aspect-ratio: 1;
}
.bio-modal__title,
.company-modal__title {
position: static;
left: auto; top: auto; right: auto;
align-self: center;
margin-top: 0;
gap: 2px;
}
.bio-modal__name,
.company-modal__name { font-size: 1.375rem; }
.bio-modal__role,
.company-modal__sector { font-size: 0.875rem; }
.bio-modal__close,
.company-modal__close { top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 5px; }
.bio-modal__close img,
.company-modal__close img { width: 16px; height: 16px; }
.bio-modal__nav,
.company-modal__nav { position: absolute; top: auto; bottom: 12px; right: 16px; }
.bio-modal__nav-arrow,
.company-modal__nav-arrow { width: 32px; height: 32px; }
.bio-modal__row,
.company-modal__row { flex-direction: column; gap: 12px; }
.bio-modal__divider,
.company-modal__divider { width: 100%; height: 1px; }
/* Mobile body: reset desktop's 80px top padding (no photo bleed on mobile),
and hide the desktop "header→body" rule. */
.bio-modal__body,
.company-modal__body { padding-top: 18px; }
.bio-modal__body::before,
.company-modal__body::before { display: none; }
/* On mobile, the modal fills the viewport and scrolls as one block.
CD-2153: 100vh tracks the "large viewport" on iOS Safari (URL bar
collapsed), so at page top or mid-scroll with the URL bar expanded the
modal overflowed past the visible area and its top got clipped behind
the browser chrome. 100dvh tracks the current visible viewport — modal
resizes smoothly as the URL bar shows/hides. 100vh stays as a fallback
for pre-2022 browsers that don't support dvh. */
.modal-overlay .bio-modal,
.modal-overlay .company-modal {
height: calc(100vh - 32px);
height: calc(100dvh - 32px);
max-height: calc(100vh - 32px);
max-height: calc(100dvh - 32px);
display: flex;
flex-direction: column;
}
.modal-overlay .bio-modal__body,
.modal-overlay .company-modal__body {
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
padding: 18px 16px;
gap: 14px;
}
.modal-overlay .bio-modal__description,
.modal-overlay .company-modal__description {
max-height: none;
overflow: visible;
/* CD-2151: the scrollbar-spacing rules on the desktop selector don't
apply here (no inner scrollbar at this width — the whole body scrolls
as one block). Reset so the description stays inside the body's 16px
padding instead of poking past the modal edge. */
margin-right: 0;
padding-right: 0;
}
/* Case study: stack sidebar + body. Sidebar shrinks (logo+title only); body scrolls. */
.case-study-modal {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
/* CD-2169: keep the X visible on phones (was: display: none). The new
inside-the-modal positioning works at every viewport — no need to
hide it here anymore. */
.case-study-modal__sidebar {
flex-direction: row;
padding: 16px;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.case-study-modal__logo { height: 80px; width: 100px; padding: 8px; flex-shrink: 0; }
.case-study-modal__heading { gap: 4px; }
.case-study-modal__name { font-size: 1.375rem; }
.case-study-modal__sector { font-size: 0.875rem; }
.modal-overlay .case-study-modal {
/* CD-2153: same dvh fix as bio/company modals — see comment above. */
height: calc(100vh - 32px);
height: calc(100dvh - 32px);
max-height: calc(100vh - 32px);
max-height: calc(100dvh - 32px);
display: flex;
flex-direction: column;
}
.modal-overlay .case-study-modal__body {
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
padding: 18px 16px;
}
}