. The trailing
background + color lines are CRITICAL: without them the section
stays transparent and the body's dark bg shows through, defeating
the entire light treatment. */
/* No .btn-primary colour override here on purpose — base.css sets #0F0F0F on
field green (5.45:1). This file forced #fff, which is 3.52:1 and fails AA;
axe never caught it because a pseudo element made the background
undeterminable, so it landed in `incomplete` rather than `violations`.
The hover rule beside it only restated base.css's background. */
/* Light-mode overrides for components that use hardcoded lime rgba.
These tones are .section-light analogs of treatments baked into the
base (dark) rules below. */
.section-light .tl-item.is-major::before {
box-shadow: 0 0 0 3px rgba(121,152,45,.22);
}
.section-light.careers::before {
background: radial-gradient(700px 400px at 12% 100%, rgba(121,152,45,.06), transparent 60%);
}
.section-light .role:hover { background: rgba(15,15,15,.04); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg);
color: var(--text);
font-family: var(--body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* Tokens ------------------------------------------------------------- */
.mono {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
}
.label-lime { color: var(--accent); }
.label-dim { color: var(--dim); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px); }
.display {
font-family: 'Oswald', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: -0.012em;
line-height: .98;
}
.rule {
height: 1px;
background: var(--hair);
}
.accent-bar {
display: inline-block;
width: 36px;
height: 2px;
background: var(--accent);
margin-right: 14px;
vertical-align: middle;
}
/* Nav ---------------------------------------------------------------- */
/* Adaptive theme: invert to dark glyphs when a .section-light crosses
the top of the viewport (toggled by IntersectionObserver below). */
/* Logo recolor on light bg: hide the lime original and paint a
field-green wordmark on the parent anchor via background-image. */
/* =====================================================================
HERO — case file / specimen card
===================================================================== */
.hero {
position: relative;
min-height: 90vh;
display: flex;
align-items: center;
padding: 12vh 0 6vh;
border-top: 1px solid var(--hair);
border-bottom: 1px solid var(--hair);
overflow: hidden;
}
/* Decorative "Own the moment" art — large right-side treatment that bleeds
off the right edge, vertically centred. The SVG ships full-colour (electric
green + white); the low opacity mutes it to dark grey/olive over the black
hero, the way the comp shows it. */
.hero-bg-art {
position: absolute;
top: 50%;
right: 10vw; /* inset from the right edge toward centre, with clear
clearance so the rightmost glyph is never tight */
left: auto;
transform: translateY(-50%);
/* Scale the whole lockup to fit inside the hero — auto dimensions inside a
max box preserve the 608×654 aspect ratio, so nothing is cropped. */
height: auto;
width: auto;
/* vh (not %) so the cap resolves even though .hero has only min-height —
otherwise the art overflows vertically and the top row gets clipped. */
max-height: 72vh;
max-width: 46vw;
opacity: .5;
pointer-events: none;
user-select: none;
z-index: 0;
}
@media (max-width: 900px) {
.hero-bg-art { height: auto; width: 82vw; right: -12vw; top: auto; bottom: 0; transform: none; }
}
.hero-inner {
width: 100%;
max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px);
display: grid;
grid-template-columns: 52fr 48fr;
gap: 64px;
position: relative;
z-index: 1;
}
.hero-left { min-width: 0; padding-top: 8px; }
.hero-right {
position: relative;
min-width: 0;
align-self: start; /* don't stretch to .hero-left's height — stamp anchors to card bottom */
}
/* Specimen card ----------------------------------------------------- */
.specimen {
position: relative;
background: #EEEEE8;
color: #0F0F0F;
padding: 36px 32px;
box-shadow: 0 30px 60px rgba(0,0,0,.45);
}
.specimen::before {
content: "";
position: absolute; inset: 9px;
border: 1px dashed rgba(15,15,15,.18);
pointer-events: none;
}
.specimen-tag {
position: absolute; top: 18px; right: 18px;
font-family: var(--mono); font-size: 9px;
letter-spacing: .25em; text-transform: uppercase;
color: rgba(15,15,15,.62);
border: 1px solid rgba(15,15,15,.32);
padding: 4px 8px;
}
.specimen-pron {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .12em;
color: rgba(15,15,15,.55);
margin-bottom: 10px;
}
.specimen-headline {
display: flex;
align-items: center;
gap: 14px;
}
.specimen-mark {
display: block;
width: 44px; height: 44px;
flex-shrink: 0;
/* Optical centering: Oswald descenders ('g','y') push the text's visible
midline below its line-box midline, so the icon needs a small downward
nudge to share an optical center with the heading. */
transform: translateY(2px);
}
.specimen-name {
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: clamp(34px, 3.6vw, 42px);
letter-spacing: -0.02em;
line-height: 1;
color: #0F0F0F;
}
.specimen-pos {
margin-top: 12px;
font-family: 'Source Serif 4', Georgia, serif;
font-style: italic;
font-size: 14px;
color: rgba(15,15,15,.7);
}
.specimen-defs { margin-top: 20px; }
.specimen-def {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 17px;
line-height: 1.5;
color: #0F0F0F;
}
.specimen-def .specimen-num {
font-family: 'Oswald', sans-serif;
font-weight: 500;
color: #75932C;
margin-right: 8px;
}
.specimen-rule {
height: 1px;
background: rgba(15,15,15,.13);
border: 0;
margin: 16px 0;
}
.specimen-def-2 {
font-size: 16px;
color: rgba(15,15,15,.82);
}
.specimen-meta {
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid rgba(15,15,15,.13);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
}
.specimen-meta dt {
font-family: var(--mono);
font-size: 9px;
letter-spacing: .25em;
text-transform: uppercase;
color: rgba(15,15,15,.45);
margin-bottom: 4px;
}
.specimen-meta dd {
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-size: 13px;
letter-spacing: .01em;
text-transform: uppercase;
color: #0F0F0F;
}
.specimen-meta dd em {
font-family: 'Source Serif 4', Georgia, serif;
font-style: italic;
font-weight: 400;
text-transform: none;
color: rgba(15,15,15,.7);
letter-spacing: 0;
}
.specimen-foot {
margin-top: 22px;
padding-top: 14px;
border-top: 1px solid rgba(15,15,15,.13);
display: flex; justify-content: space-between; gap: 20px;
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(15,15,15,.5);
}
/* The stamp --------------------------------------------------------- */
.specimen-stamp {
position: absolute;
bottom: 18px;
right: -28px;
width: 144px; height: 144px;
display: block;
transform: rotate(-9deg);
transform-origin: center;
mix-blend-mode: multiply;
opacity: .92;
pointer-events: none;
z-index: 2;
}
@media (max-width: 900px) {
.hero { padding-top: 16vh; }
.hero-inner {
grid-template-columns: 1fr;
gap: 56px;
padding-bottom: 6vh;
}
.specimen { box-shadow: none; }
.specimen-mark { width: 36px; height: 36px; }
.specimen-stamp { width: 104px; height: 104px; right: -18px; bottom: 14px; }
}
/* =====================================================================
ORIGIN — story + timeline
===================================================================== */
.origin {
position: relative;
padding: 14vh 0;
border-bottom: 1px solid var(--hair);
}
.origin-inner {
max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px);
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 100px;
align-items: start;
}
.origin-head {
position: sticky; top: 18vh;
}
.origin-head .mono { color: var(--accent); margin-bottom: 24px; display: inline-block; }
.origin-head h2 {
font-size: clamp(40px, 5.4vw, 80px);
max-width: 22ch;
}
/* All prose in this section uses one family (Barlow Condensed, the
body default) at one size (18px). Hierarchy comes from color and
weight only: --text for primary copy, --dim for secondary. */
.origin-body p {
font-size: 18px;
line-height: 1.55;
color: var(--dim);
margin-bottom: 22px;
}
.origin-body p strong {
color: var(--text);
font-weight: 500;
}
.origin-body p.origin-lede {
color: var(--text);
margin-bottom: 28px;
}
/* Quote — hairline above + mono attribution below. Same body type and
size as everything else; quotation marks alone signal that it's a
quote. */
.origin-quote {
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid var(--hair);
max-width: 50ch;
}
.origin-quote p {
font-size: 18px;
line-height: 1.55;
color: var(--text);
margin-bottom: 16px;
}
.origin-quote cite {
display: block;
font-style: normal;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--dim);
}
/* DEI accent block — used in careers section */
.dei-block {
font-size: 15px;
color: var(--dim-2);
border-left: 2px solid var(--accent);
padding-left: 16px;
max-width: 64ch;
}
.timeline {
position: relative;
margin-top: 14px;
}
.timeline::before {
content: "";
position: absolute;
left: 7px; top: 8px; bottom: 8px;
width: 1px;
background: var(--hair);
}
.tl-item {
position: relative;
padding: 0 0 30px 38px;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
content: "";
position: absolute;
left: 3px; top: 6px;
width: 9px; height: 9px;
background: var(--bg);
border: 1px solid var(--accent);
transform: rotate(45deg);
}
.tl-item.is-major::before {
background: var(--accent);
box-shadow: 0 0 0 3px rgba(182,245,0,.22);
}
.tl-year {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .22em;
color: var(--accent);
margin-bottom: 4px;
}
.tl-title {
font-weight: 500;
font-size: 18px;
color: var(--text);
margin-bottom: 4px;
}
.tl-body { color: var(--dim); font-size: 15px; line-height: 1.45; }
@media (max-width: 900px) {
.origin-inner { grid-template-columns: 1fr; gap: 60px; }
.origin-head { position: static; }
}
/* =====================================================================
PRINCIPLES — hex-numbered tenet cards
===================================================================== */
.principles {
padding: 14vh 0;
border-bottom: 1px solid var(--hair);
background: var(--bg-2);
position: relative;
}
.principles::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(800px 400px at 80% 0%, rgba(182,245,0,.06), transparent 60%);
pointer-events: none;
}
.principles-inner {
max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px);
position: relative; z-index: 1;
}
.principles-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 40px;
margin-bottom: 56px;
}
.principles-head h2 {
font-size: clamp(40px, 5.6vw, 84px);
max-width: 26ch;
}
.principles-head .mono { color: var(--dim); }
.principles-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border: 1px solid var(--hair);
}
.principle {
position: relative;
padding: 38px 36px 38px 36px;
border-right: 1px solid var(--hair);
border-bottom: 1px solid var(--hair);
transition: background .25s var(--ease);
}
.principle:nth-child(2n) { border-right: 0; }
.principle:nth-last-child(-n+2) { border-bottom: 0; }
.principle:hover { background: rgba(255,255,255,.02); }
.principle-num {
position: absolute;
top: 28px; right: 28px;
width: 56px; height: 64px;
display: flex; align-items: center; justify-content: center;
font-family: var(--mono);
font-size: 12px;
letter-spacing: .15em;
color: var(--accent);
}
.principle-num svg {
position: absolute; inset: 0;
width: 100%; height: 100%;
}
.principle h3 {
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: clamp(26px, 2.4vw, 34px);
letter-spacing: -0.005em;
line-height: 1.04;
max-width: 14ch;
margin-bottom: 18px;
margin-top: 8px;
}
.principle p {
color: var(--dim);
font-size: 16px;
line-height: 1.5;
max-width: 56ch;
}
.principle .mono {
display: block;
color: var(--dim-2);
margin-bottom: 18px;
}
@media (max-width: 720px) {
.principles-head { grid-template-columns: 1fr; }
.principles-grid { grid-template-columns: 1fr; }
.principle { border-right: 0; }
.principle:nth-child(2n) { border-right: 0; }
.principle:not(:last-child) { border-bottom: 1px solid var(--hair); }
}
/* =====================================================================
STATS — by the numbers
===================================================================== */
/* Stats — adopts the homepage-v2 pattern:
stats-headline (single sentence, word-stagger reveal) + 4 stat cells
with count-up numbers, mono labels, and hover-revealed details. */
.stats {
padding: 110px 0 64px;
border-bottom: 1px solid var(--hair);
}
.stats-inner { max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px); }
.stats-headline {
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-size: clamp(28px, 3.2vw, 42px);
line-height: 1.12;
letter-spacing: -0.015em;
text-transform: uppercase;
color: var(--dim);
max-width: 40ch;
margin-bottom: 56px;
}
.stats-headline em {
font-style: normal;
color: var(--accent);
font-weight: 600;
}
/* Word-stagger reveal — words wrapped in .word spans, played on scroll-in */
.stats-headline .word {
display: inline-block;
opacity: 0;
transform: translateY(14px);
transition:
opacity .55s var(--ease-out) calc(var(--i, 0) * 55ms),
transform .55s var(--ease-out) calc(var(--i, 0) * 55ms);
}
.stats-headline.is-in .word { opacity: 1; transform: translateY(0); }
/* Hairline grid — top+left on container, right+bottom on each cell */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--hair);
border-left: 1px solid var(--hair);
}
.stat {
border-right: 1px solid var(--hair);
border-bottom: 1px solid var(--hair);
padding: 36px 32px 32px;
min-height: 220px;
position: relative;
overflow: hidden;
}
.stat-num {
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-size: clamp(48px, 5vw, 76px);
line-height: 1;
letter-spacing: -0.025em;
color: var(--text);
font-variant-numeric: tabular-nums;
margin-bottom: 18px;
transition: color .25s var(--ease);
}
.stat-num .unit {
font-size: .42em;
color: var(--dim);
margin-left: 4px;
font-weight: 400;
transition: color .25s var(--ease);
}
.stat-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--dim);
margin-bottom: 14px;
transition: color .25s var(--ease);
}
.stat-detail {
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: var(--dim);
text-transform: none;
letter-spacing: 0;
opacity: 0;
transform: translateY(8px);
transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.stat:hover .stat-detail { opacity: 1; transform: translateY(0); }
.stat:hover .stat-num,
.stat:hover .stat-num .unit,
.stat:hover .stat-label { color: var(--accent); }
@media (max-width: 900px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); }
}
/* =====================================================================
LEADERSHIP
===================================================================== */
.team {
padding: 14vh 0;
border-bottom: 1px solid var(--hair);
background: var(--bg-2);
}
.team-inner { max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px); }
.team-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 40px;
margin-bottom: 56px;
}
.team-head .mono { color: var(--accent); margin-bottom: 18px; display: inline-block; }
.team-head h2 {
font-size: clamp(40px, 5.4vw, 80px);
max-width: 26ch;
}
.team-head a.btn-ghost { align-self: end; }
.team-grid {
display: grid;
/* 7 leaders + the careers tile → 4 columns for a symmetric 4×2 (no empty
hairline cells). 8 divides evenly into the 2- and 1-column fallbacks
below, so no row is ever left short. */
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--hair);
border: 1px solid var(--hair);
}
.person {
background: var(--bg-2);
padding: 24px 22px 22px;
transition: background .25s var(--ease);
position: relative;
cursor: pointer;
}
.person:hover { background: var(--bg-3); }
/* Card is role="button" tabindex="0" — keyboard focus needs a visible ring. */
.person:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.person-bio { display: none; }
/* Careers tile — fills the leadership grid's final cell (reuses .person). */
.person-join {
display: flex;
flex-direction: column;
justify-content: space-between;
text-decoration: none;
min-height: 100%;
}
.person-join .mono { color: var(--accent); }
.person-join-title {
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: clamp(24px, 2.2vw, 34px);
line-height: 1.06;
letter-spacing: -0.012em;
color: var(--text);
margin-top: auto;
}
.person-join-link {
display: inline-block;
margin-top: 14px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
}
.person-join .arrow { display: inline-block; transition: transform .25s var(--ease); }
.person-join:hover .arrow { transform: translateX(4px); }
/* =====================================================================
PERSON BIO MODAL — opens when a leader's card is clicked. Two-column
layout (portrait + text) on desktop; stacks on mobile. Dark themed
with hairline edges and lime accents to match the rest of the site.
===================================================================== */
.person-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 4vh 4vw;
background: rgba(8, 12, 10, 0.86);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
pointer-events: none;
/* visibility, not opacity alone: an opacity-0 dialog keeps its close
button and LinkedIn link in the tab order, so a keyboard user tabbed
into an invisible dialog and focus disappeared (axe: aria-hidden-focus).
visibility:hidden removes the subtree from the tab order and the
accessibility tree in every browser; delaying it by the fade duration
keeps the existing transition looking the same. */
visibility: hidden;
transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.person-modal.is-open {
opacity: 1;
pointer-events: auto;
visibility: visible;
transition: opacity 240ms ease, visibility 0s linear 0s;
}
.person-modal-card {
position: relative;
width: min(1100px, 100%);
height: min(92vh, 720px);
background: var(--bg-2);
border: 1px solid var(--hair);
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
overflow: hidden;
}
.person-modal-photo {
background: var(--bg-3);
width: 100%;
height: 100%;
overflow: hidden;
}
.person-modal-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center top;
}
.person-modal-text {
padding: 44px 48px;
overflow-y: auto;
min-height: 0;
max-height: 100%;
}
.person-modal-name {
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: clamp(28px, 2.6vw, 38px);
letter-spacing: -0.005em;
line-height: 1.04;
color: var(--text);
margin-bottom: 8px;
}
.person-modal-role {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 28px;
}
.person-modal-bio {
color: var(--dim);
font-size: 17px;
line-height: 1.55;
margin-bottom: 28px;
}
/* Multi-paragraph bios (js/company.js copies the source s in). The last
paragraph drops its margin so the block keeps the 28px above LinkedIn. */
.person-modal-bio p { margin: 0 0 1em; }
.person-modal-bio p:last-child { margin-bottom: 0; }
/* A card with no .person-bio yet leaves this element empty, and the 28px
would read as a gap someone forgot to fill rather than a bio that hasn't
been written. Collapse it so the modal closes up around name, role and
LinkedIn. Every leader has a bio as of Josh's, so nothing exercises this
today — it's kept for the next card that lands ahead of its copy. */
.person-modal-bio:empty { margin-bottom: 0; }
.person-modal-linkedin {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 1px solid var(--hair);
color: var(--text);
text-decoration: none;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.person-modal-linkedin:hover {
border-color: var(--accent);
color: var(--accent);
}
.person-modal-linkedin[hidden] { display: none; }
.person-modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 40px;
height: 40px;
background: transparent;
border: 1px solid var(--hair);
color: var(--text);
font-size: 18px;
cursor: pointer;
z-index: 2;
transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.person-modal-close:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.person-modal-close:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(255,255,255,.04);
}
body.is-person-modal-open { overflow: hidden; }
@media (max-width: 760px) {
.person-modal { padding: 0; }
.person-modal-card {
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr);
max-height: 100vh;
width: 100%;
height: 100%;
border: 0;
}
.person-modal-photo {
aspect-ratio: 4 / 3;
height: auto;
}
.person-modal-text { padding: 28px 22px 40px; max-height: 100%; }
}
.person-portrait {
width: 100%;
aspect-ratio: 1 / 1;
background: var(--bg-3);
border: 1px solid var(--hair);
margin-bottom: 18px;
position: relative;
overflow: hidden;
}
.person-photo {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center 18%;
transition: transform .5s var(--ease), filter .25s var(--ease);
}
.person:hover .person-photo {
transform: scale(1.03);
}
.person-role {
font-family: var(--mono);
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--dim-2);
margin-bottom: 6px;
}
.person-name {
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: 22px;
letter-spacing: -0.005em;
}
@media (max-width: 900px) {
.team-grid { grid-template-columns: repeat(2, 1fr); }
.team-head { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
.team-grid { grid-template-columns: 1fr; }
}
/* =====================================================================
PARTNERS — technology / channel partner wall + overview
Replaces the Principles slot in the dark+elevated rhythm: cream
Origin (light) → Partners (dark, --bg-2) → Stats (light).
===================================================================== */
.partners {
padding: 14vh 0;
border-bottom: 1px solid var(--hair);
background: var(--bg-2);
position: relative;
}
.partners::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(720px 420px at 88% 0%, rgba(182,245,0,.05), transparent 60%);
pointer-events: none;
}
.partners-inner {
max-width: var(--max);
margin: 0 auto;
padding: 0 min(5vw, 72px);
position: relative;
z-index: 1;
}
.partners-head {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
grid-template-areas:
"title title"
"body body";
gap: 32px 80px;
align-items: end;
margin-bottom: 56px;
}
.partners-head-title { grid-area: title; }
.partners-head-body { grid-area: body; }
.partners-head .mono { color: var(--accent); margin-bottom: 22px; display: inline-block; }
.partners-head h2 {
font-size: clamp(40px, 5.4vw, 80px);
}
.partners-head p {
color: var(--dim);
font-family: 'Source Serif 4', Georgia, serif;
font-size: 17px;
line-height: 1.55;
max-width: 76ch;
}
.partners-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--hair);
border-left: 1px solid var(--hair);
}
.partner-cell {
height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border-right: 1px solid var(--hair);
border-bottom: 1px solid var(--hair);
color: var(--dim);
padding: 0 18px;
transition: color .2s var(--ease), background .2s var(--ease);
}
.partner-cell:hover { color: var(--text); background: rgba(255,255,255,.02); }
.partner-cell .partner-name {
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .04em;
font-size: 18px;
line-height: 1.05;
}
.partner-cell .partner-cat {
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--dim-2);
margin-top: 8px;
transition: color .2s var(--ease);
}
.partner-cell:hover .partner-cat { color: var(--accent); }
.partner-cell .partner-logo {
max-height: 30px;
max-width: 78%;
width: auto;
height: auto;
object-fit: contain;
opacity: .62;
filter: brightness(0) invert(1);
transition: opacity .2s var(--ease);
}
.partner-cell .partner-logo.tall { max-height: 55px; }
.partner-cell:hover .partner-logo { opacity: 1; }
@media (max-width: 900px) {
.partners-head {
grid-template-columns: 1fr;
grid-template-areas:
"title"
"body";
gap: 32px;
align-items: start;
}
.partners-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.partners-grid { grid-template-columns: 1fr; }
}
/* =====================================================================
BACKED BY — investors / customers logos strip
===================================================================== */
.backed {
padding: 12vh 0;
border-bottom: 1px solid var(--hair);
}
.backed-inner { max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px); }
.backed-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 32px;
border-bottom: 1px solid var(--hair);
padding-bottom: 18px;
}
.backed-head .mono { color: var(--accent); }
.backed-head .meta { color: var(--dim-2); }
.backed-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid var(--hair);
}
.backed-cell {
height: 110px;
display: flex; align-items: center; justify-content: center;
border-right: 1px solid var(--hair);
border-bottom: 1px solid var(--hair);
color: var(--dim);
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .05em;
font-size: 18px;
transition: color .2s var(--ease), background .2s var(--ease);
}
.backed-cell:hover { color: var(--text); background: rgba(255,255,255,.02); }
.backed-cell:nth-child(4n) { border-right: 0; }
.backed-cell:nth-last-child(-n+4) { border-bottom: 0; }
/* Investors sub-row — tighter, dimmer than customer cells */
.backed-divider {
margin-top: 40px;
padding-bottom: 14px;
border-bottom: 1px solid var(--hair);
color: var(--accent);
}
.backed-investors {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
border-left: 1px solid var(--hair);
border-right: 1px solid var(--hair);
border-bottom: 1px solid var(--hair);
}
.invest-cell {
height: 70px;
display: flex; align-items: center; justify-content: center;
text-align: center;
border-right: 1px solid var(--hair);
color: var(--dim-2);
font-family: 'Oswald', sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .05em;
font-size: 13px;
padding: 0 12px;
transition: color .2s var(--ease), background .2s var(--ease);
}
.invest-cell:last-child { border-right: 0; }
.invest-cell:hover { color: var(--text); background: rgba(255,255,255,.02); }
@media (max-width: 900px) {
.backed-investors { grid-template-columns: repeat(3, 1fr); }
.invest-cell { border-bottom: 1px solid var(--hair); }
.invest-cell:nth-child(3n) { border-right: 0; }
.invest-cell:nth-last-child(-n+3) { border-bottom: 0; }
}
@media (max-width: 520px) {
.backed-investors { grid-template-columns: repeat(2, 1fr); }
.invest-cell:nth-child(3n) { border-right: 1px solid var(--hair); }
.invest-cell:nth-child(2n) { border-right: 0; }
.invest-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--hair); }
.invest-cell:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 900px) {
.backed-grid { grid-template-columns: repeat(2, 1fr); }
.backed-cell { border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.backed-cell:nth-child(4n) { border-right: 1px solid var(--hair); }
.backed-cell:nth-child(2n) { border-right: 0; }
.backed-cell:nth-last-child(-n+4) { border-bottom: 1px solid var(--hair); }
.backed-cell:nth-last-child(-n+2) { border-bottom: 0; }
}
/* =====================================================================
CAREERS
===================================================================== */
.careers {
padding: 18vh 0;
min-height: 85vh; /* taller section, content vertically centred */
display: grid;
place-items: center;
border-bottom: 1px solid var(--hair);
background: var(--bg-2);
position: relative;
}
.careers::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(700px 400px at 12% 100%, rgba(182,245,0,.06), transparent 60%);
pointer-events: none;
}
/* Centered single-column pitch (no role list — kept intentionally vague). */
.careers-inner {
max-width: 1100px; margin: 0 auto; padding: 0 min(5vw, 72px);
position: relative; z-index: 1;
text-align: center;
}
.careers-pitch .mono { color: var(--accent-ink); margin-bottom: 22px; display: inline-block; }
.careers-pitch h2 {
font-size: clamp(40px, 5.6vw, 88px);
max-width: 30ch; /* wider so the title spreads onto fewer lines */
margin: 0 auto 28px;
}
.careers-pitch p {
color: var(--dim);
font-size: 18px;
line-height: 1.5;
margin: 0 auto 22px;
max-width: 60ch;
}
.careers-pitch .careers-actions {
display: flex; gap: 14px; flex-wrap: wrap;
justify-content: center;
margin-top: 28px;
}
/* =====================================================================
CLOSE — reused from the homepage close section.
(.typewriter/.typewriter-caret/keyframes already defined above for the
hero; here the rotating word is white, not accent, to match the homepage.)
===================================================================== */
.close {
padding: 22vh 5vw 20vh;
text-align: center;
position: relative;
overflow: hidden;
}
.close::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(182,245,0,.06), transparent 60%);
pointer-events: none;
}
.close-inner {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.close-stack {
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
}
.close-line {
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-transform: uppercase;
letter-spacing: -0.015em;
font-size: clamp(40px, 6.6vw, 104px);
line-height: 1;
color: var(--dim);
opacity: 0;
transform: translateY(30px);
transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), color .5s var(--ease);
}
.close-line.reveal { opacity: 1; transform: translateY(0); }
.close-line.final {
color: var(--text);
margin-top: 28px;
}
.close-line.final .accent { color: var(--accent); }
.close-typing-line { color: var(--text); }
.close .typewriter-word { color: var(--text); text-shadow: none; }
.close-ctas {
margin-top: 68px;
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.careers-pitch .careers-meta {
margin-top: 36px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
border-top: 1px solid var(--hair);
padding-top: 24px;
}
.careers-pitch .careers-meta dt { color: var(--dim-2); margin-bottom: 6px; }
.careers-pitch .careers-meta dd {
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-size: 20px;
text-transform: uppercase;
}
.roles {
border: 1px solid var(--hair);
}
.role {
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
padding: 26px 28px;
border-bottom: 1px solid var(--hair);
align-items: center;
transition: background .2s var(--ease);
}
.role:last-child { border-bottom: 0; }
.role:hover { background: rgba(255,255,255,.025); }
.role-title {
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: clamp(18px, 1.7vw, 22px);
letter-spacing: -0.003em;
}
.role-cta {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .22em;
color: var(--accent);
transition: transform .2s var(--ease);
white-space: nowrap;
}
.role:hover .role-cta { transform: translateX(3px); }
@media (max-width: 900px) {
.careers-inner { grid-template-columns: 1fr; gap: 56px; }
.careers-pitch .careers-meta { grid-template-columns: repeat(2, 1fr); }
.role { grid-template-columns: 1fr; gap: 12px; }
}
/* =====================================================================
LIFE AT GREENFLY — scroll-pinned horizontal strip.
The frame (.life-pin) is fixed at 100vh while the user scrolls
through the taller .life-track. JS reads scroll progress through
the track and writes --strip-x; CSS uses translate3d for GPU.
Mobile and reduced-motion drop the pin and fall back to native
horizontal scroll-snap.
===================================================================== */
.life {
position: relative;
border-bottom: 1px solid var(--hair);
}
.life-track {
position: relative;
height: 240vh; /* outer scroll distance */
}
.life-pin {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.life-head {
flex: 0 0 auto;
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 8vh min(5vw, 72px) 4vh;
display: flex;
flex-direction: column;
gap: 12px;
}
.life-head .mono { color: var(--accent); }
.life-head h2 {
font-size: clamp(36px, 4vw, 56px);
max-width: 18ch;
}
.life-strip-wrap {
flex: 1 1 auto;
display: flex;
align-items: center;
overflow: hidden;
}
.life-strip {
display: flex;
gap: 18px;
padding: 0 5vw;
align-items: center;
transform: translate3d(var(--strip-x, 0px), 0, 0);
will-change: transform;
}
.life-card {
flex: 0 0 auto;
height: 60vh;
aspect-ratio: 4 / 5;
background: var(--bg-3);
border: 1px solid var(--hair);
overflow: hidden;
cursor: pointer;
}
.life-card img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* =====================================================================
LIFE LIGHTBOX — full-screen carousel that opens when a card is clicked.
Always rendered with a dark backdrop regardless of section theme so the
image is the focus. Closed by clicking the backdrop, the close button,
pressing Esc, or tapping outside the image.
===================================================================== */
.life-lightbox {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
background: rgba(8, 12, 10, 0.94);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
pointer-events: none;
transition: opacity 240ms ease;
}
.life-lightbox.is-open {
opacity: 1;
pointer-events: auto;
}
.life-lightbox-stage {
margin: 0;
max-width: 92vw;
max-height: 86vh;
display: flex;
align-items: center;
justify-content: center;
}
.life-lightbox-stage img {
max-width: 92vw;
max-height: 86vh;
display: block;
object-fit: contain;
}
.life-lightbox button {
position: absolute;
background: transparent;
border: 1px solid rgba(255,255,255,.20);
color: #fff;
font-family: inherit;
cursor: pointer;
transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.life-lightbox button:hover {
border-color: #B6F500;
color: #B6F500;
}
.life-lightbox-close {
top: 24px;
right: 24px;
padding: 10px 14px;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
}
.life-lightbox-prev,
.life-lightbox-next {
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 56px;
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.life-lightbox-prev { left: 24px; }
.life-lightbox-next { right: 24px; }
.life-lightbox-counter {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,.55);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
}
body.is-lightbox-open { overflow: hidden; }
@media (max-width: 720px) {
.life-lightbox-prev, .life-lightbox-next {
width: 44px; height: 44px; font-size: 18px;
}
.life-lightbox-prev { left: 12px; }
.life-lightbox-next { right: 12px; }
.life-lightbox-close { top: 14px; right: 14px; }
}
/* Mobile / reduced-motion fallback: drop the pin, use native swipe */
@media (max-width: 720px), (prefers-reduced-motion: reduce) {
.life-track { height: auto; }
.life-pin {
position: static;
height: auto;
overflow: visible;
padding-bottom: 6vh;
}
.life-strip-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
}
.life-strip {
transform: none;
padding: 0 5vw;
}
.life-card {
height: auto;
width: clamp(220px, 78vw, 360px);
scroll-snap-align: start;
}
}
/* =====================================================================
CTA STRIP
===================================================================== */
.cta-strip {
padding: 12vh 0;
border-bottom: 1px solid var(--hair);
text-align: center;
position: relative;
overflow: hidden;
}
.cta-strip::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(900px 500px at 50% 50%, rgba(182,245,0,.10), transparent 60%);
pointer-events: none;
}
.cta-inner {
position: relative; z-index: 1;
max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px);
}
.cta-strip .mono { color: var(--accent); display: inline-block; margin-bottom: 22px; }
.cta-strip h2 {
font-size: clamp(46px, 7.2vw, 120px);
max-width: 26ch;
margin: 0 auto 34px;
line-height: .96;
}
.cta-strip h2 em { font-style: normal; color: var(--accent); }
.cta-actions {
display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center;
}
/* =====================================================================
FOOTER — editorial dispatch
Layout: wordmark · 3-col nav · legal+status, atop an interactive
hex grid that fades to black.
===================================================================== */
/* Interactive hex grid — generated via JS, faded smoothly to pure black */
.hex-cell-shape {
fill: transparent;
stroke: var(--accent);
stroke-opacity: .13;
stroke-width: 1;
transition: stroke-opacity .25s var(--ease), fill .25s var(--ease);
cursor: pointer;
pointer-events: all;
}
.hex-fly {
opacity: 0;
pointer-events: none;
transition: opacity .25s var(--ease-out), transform .35s var(--ease-out);
transform-origin: center;
transform: scale(.75);
}
.hex-cell:hover .hex-cell-shape {
fill: var(--accent);
stroke-opacity: 1;
}
.hex-cell:hover .hex-fly {
opacity: 1;
transform: scale(1);
}
/* Hover reach-through: content containers ignore pointer events so empty
space passes clicks to the hex grid behind. Only the visible/interactive
leaf elements re-enable events. */
/* Canonical pulse keyframe — used by hero eyebrow dot AND footer status dot. */
@keyframes pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(182,245,0,.5); }
50% { opacity: .55; box-shadow: 0 0 0 6px rgba(182,245,0,0); }
}
/* Reveal-on-scroll utility ------------------------------------------- */
/* Shares the hero's load vocabulary: each block lifts into place, and its
headline wipes in left→right (the hero's signature move). Grouped cards
cascade rather than firing all at once. */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity .8s var(--ease-out), transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.is-in { opacity: 1; transform: none; }
/* Section headlines wipe in left→right on reveal — echoes the hero. The
wipe layers on top of the block's lift, starting just after it. */
.reveal .display,
.reveal .os-about-title {
/* Negative top/bottom/left insets leave room for glyph + text-stroke
overflow (the about title uses line-height .9), so the settled state
never crops the letters; only the right edge wipes from 100% → open. */
clip-path: inset(-0.2em 100% -0.35em -0.1em);
transition: clip-path .85s cubic-bezier(.16,1,.3,1) .1s;
}
.reveal.is-in .display,
.reveal.is-in .os-about-title { clip-path: inset(-0.2em -0.1em -0.35em -0.1em); }
/* The about lede ripples up just behind its title. */
.reveal .os-about-lede {
opacity: 0;
transform: translateY(16px);
transition: opacity .7s var(--ease-out) .18s, transform .8s cubic-bezier(.16,1,.3,1) .18s;
}
.reveal.is-in .os-about-lede { opacity: 1; transform: none; }
/* Principle cards (2-col grid) cascade top-left → bottom-right. */
.principles-grid .principle:nth-child(2) { transition-delay: .08s; }
.principles-grid .principle:nth-child(3) { transition-delay: .16s; }
.principles-grid .principle:nth-child(4) { transition-delay: .24s; }
/* Leadership cards (4-col grid) cascade across each row, resetting per row
so lower rows don't lag — the stagger repeats every 4th cell. */
.team-grid .reveal:nth-child(3n+2) { transition-delay: .07s; }
.team-grid .reveal:nth-child(3n+3) { transition-delay: .14s; }
@media (prefers-reduced-motion: reduce) {
.reveal,
.reveal .display,
.reveal .os-about-title,
.reveal .os-about-lede {
opacity: 1;
transform: none;
clip-path: none;
transition: none;
}
}
/* =====================================================================
HERO entrance — "The Filing"
One-shot ~1.4s choreography on page load.
html.js — added synchronously in
before first paint, so
the staging styles below land on initial render and
there is no FOUC between page render and animation start.
body.is-loaded — added on rAF after parse; activates the keyframes.
— if JS is disabled neither class is added, no staging
applies, and the page renders at its natural at-rest
state.
===================================================================== */
/* Ported from solutions-sports: headline lines wipe in left→right,
staggered top to bottom; the decorative tagline "prints" in beneath
the same load. Staging (opacity 0 / clipped) lands under html.js before
first paint so there is no FOUC; body.is-loaded fires the keyframes. */
@media (prefers-reduced-motion: no-preference) {
html.js .hero-eyebrow,
html.js .hero-headline .hl-line { opacity: 0; }
html.js .hero-bg-art { clip-path: inset(0 100% 0 0); }
}
body.is-loaded .hero-eyebrow { animation: hero-text-in .7s var(--ease-out) .15s both; }
body.is-loaded .hero-headline .hl-line { animation: hero-text-in .7s var(--ease-out) both; }
body.is-loaded .hero-headline .hl-line:nth-child(1) { animation-delay: .30s; }
body.is-loaded .hero-headline .hl-line:nth-child(2) { animation-delay: .42s; }
body.is-loaded .hero-headline .hl-line:nth-child(3) { animation-delay: .54s; }
/* Tagline prints top→...→right edge, easing in over the text reveal. */
body.is-loaded .hero-bg-art { animation: hero-print-reveal 1.5s cubic-bezier(.45,0,.12,1) .5s both; }
/* Each line clips open left→right while sliding in from the left. */
/* Negative inset on the settled state so the wipe doesn't shave the ink of
the display type (see the same note in css/solutions-sports.css). */
@keyframes hero-text-in {
from { opacity: 0; clip-path: inset(-0.4em 100% -0.4em -0.4em); transform: translateX(-18px); }
to { opacity: 1; clip-path: inset(-0.4em); transform: translateX(0); }
}
@keyframes hero-print-reveal {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
body.is-loaded .hero-eyebrow,
body.is-loaded .hero-headline .hl-line,
body.is-loaded .hero-bg-art { animation: none; }
}
/* =====================================================================
HERO interaction — "Pointer Trace" (Option C)
Cursor parallax tilts the specimen card + stamp as a single unit
via a wrapper element. JS writes --mx/--my (clamped -1..1); CSS
transitions smooth the change. Headline lines shift on hover via
the `translate` longhand so they compose with the entrance keyframe's
`transform` cleanly.
===================================================================== */
.specimen-tilt {
position: relative;
/* Paper-on-desk physics: a flat sheet that twists slightly as the
cursor passes through the hero. Pure 2D rotateZ — no 3D tilt, so
the card never reads as a skewed parallelogram. */
transform: rotate(calc(var(--mx, 0) * -4deg));
transition: transform .45s var(--ease-out);
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.specimen-tilt { transform: none; transition: none; }
}
/* =====================================================================
COMPANY COPY REWORK (June 2026)
Hero headline + ticking vertical qualifier, About lede, leadership
taglines, and the close signature. Appended last to take precedence.
===================================================================== */
.accent { color: var(--accent); }
/* Hero — headline with ticking vertical word (Sports → … → Brands) */
.hero-eyebrow { color: var(--accent); display: inline-block; margin-bottom: 22px; }
.hero-headline {
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: clamp(30px, 4.6vw, 72px);
line-height: .96;
letter-spacing: -0.018em;
color: var(--text);
margin: 0;
}
.hero-headline .hl-line { display: block; }
.hero-headline .hero-for { color: var(--text); }
/* Verticals — single rotating word, typed/deleted on a loop (matches the
platform + solutions typewriter treatment). */
.typewriter { display: inline-block; white-space: nowrap; }
.typewriter-word {
color: var(--accent);
font-variant-ligatures: none;
text-shadow: 0 0 26px rgba(182,245,0,.20);
}
.typewriter-caret {
display: inline-block;
width: .06em; height: .82em;
margin-left: .07em; vertical-align: -0.04em;
background: var(--accent);
animation: typewriter-blink 1.05s steps(2, end) infinite;
}
@keyframes typewriter-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.typewriter-caret { animation: none; opacity: .6; }
}
/* ===================================================================
ORIGIN — About statement opening + small story eyebrow,
then interactive scrollytelling (sticky stage + scrolling steps)
=================================================================== */
.origin-scrolly { padding: 14vh 0 0; }
/* About statement — large outlined display title (left) + body copy (right) */
.os-about {
max-width: var(--max);
margin: 0 auto;
padding: 0 min(5vw, 72px);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
column-gap: clamp(40px, 6vw, 96px);
}
/* outlined "ABOUT" — same treatment as platform's .seq-numeral */
.os-about-title {
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: clamp(64px, 9vw, 150px);
line-height: 0.9;
letter-spacing: -.02em;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px var(--accent);
text-stroke: 1px var(--accent);
user-select: none;
margin: 0;
}
/* design-system body style (canonical lives in solutions-sports.css; company
doesn't load it, so mirror it here) */
.s-body {
font-family: var(--body);
font-weight: 400;
font-size: clamp(16px, 1.35vw, 19px);
line-height: 1.6;
color: var(--dim);
max-width: 52ch;
}
.os-about-lede { margin: 0; max-width: 52ch; }
/* small eyebrow heading the origin story */
.os-storyhead {
max-width: var(--max);
margin: clamp(64px, 11vh, 130px) auto 0;
padding: clamp(40px, 6vh, 72px) min(5vw, 72px) 5vh;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
border-top: 1px solid var(--hair);
}
.os-storyhead .mono { color: var(--accent-ink); }
.os-cue { color: var(--dim-2); letter-spacing: .2em; display: inline-flex; align-items: center; gap: 9px; }
.os-cue-arrow { display: inline-block; animation: os-bob 1.8s ease-in-out infinite; }
@keyframes os-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
/* two-column scrolly region: sticky visual stage (left) + scrolling text
(right). */
.os-scrolly {
--os-step-h: 78vh;
/* shared square footprint for every scene visual (the gap illustration's
size), so all five beats read at the same larger square format */
--os-media: clamp(280px, 34vw, 440px);
max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px);
display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
}
.os-stage-col { position: relative; }
.os-stage { position: sticky; top: 0; height: 100vh; }
/* Pad the text column by half the gap between a step and the viewport, so the
centred content of the locked block lands on the viewport centre — i.e. on
the same line as the (also centred) sticky stage scene. */
.os-steps { padding-block: calc((100vh - var(--os-step-h)) / 2); }
/* timeline rail */
.os-rail { position: absolute; left: 0; top: 18%; bottom: 18%; display: flex; }
.os-rail-track { position: absolute; left: 7px; top: 7px; bottom: 7px; width: 2px; background: var(--hair-strong); }
.os-rail-fill { position: absolute; left: 0; top: 0; width: 2px; background: var(--accent); height: 0%; transition: height .18s linear; }
.os-rail-marks { list-style: none; margin: 0; padding: 0; position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.os-mark { display: flex; align-items: center; gap: 14px; color: var(--dim-2); transition: color .35s var(--ease); }
.os-mark-dot {
flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
background: var(--bg); border: 2px solid var(--hair-strong);
transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* 13px, up from 11px. The rail is the only running index of the story and
11px mono at .18em was easy to skip past. Tracking eases to .16em to buy
back the width the larger size costs: the labels start 30px from the rail
(16px dot + 14px gap) and the scene stage begins at left:150px, so a mark
has ~120px before it collides with the artwork. "12 YEARS" is the longest
string here and measures well inside that. */
.os-mark-label { font-family: var(--mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
/* The years-in-business count, stacked under "Today" on the last mark.
--accent-ink, not --accent: field green is 3.02:1 on this cream section,
which only clears AA for large text. At 12px this is emphatically not
large text. green-900 is 7.26:1 and is what .os-step-eyebrow already
uses a few rules down. */
.os-mark-since {
display: block; margin-top: 5px;
font-size: 12px; letter-spacing: .12em;
color: var(--accent-ink);
}
/* The dot for Today sits beside a two-line label; centre on the whole
block rather than letting flex align to the taller line's middle. */
.os-mark[data-i="4"] { align-items: center; }
.os-mark.is-done { color: var(--dim); }
.os-mark.is-done .os-mark-dot { border-color: var(--accent); }
.os-mark.is-active { color: var(--text); }
.os-mark.is-active .os-mark-dot { border-color: var(--accent); background: var(--accent); transform: scale(1.3); box-shadow: 0 0 0 5px rgba(121,152,45,.16); }
/* scenes — absolutely stacked, only the active one shown */
.os-scenes { position: absolute; inset: 0; }
.os-scene {
position: absolute; left: 150px; right: 0; top: 0; bottom: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
opacity: 0; transform: translateY(18px); pointer-events: none;
transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.os-scene.is-active { opacity: 1; transform: none; pointer-events: auto; }
.os-scene-cap { color: var(--dim); letter-spacing: .16em; }
/* Scene figures — full-bleed compositions (player / founders / today). Each
image carries its own off-white field that matches the section bg, so no
frame is needed; cap the width and let the stage center it. */
.os-figure-img {
width: var(--os-media);
aspect-ratio: 1 / 1;
object-fit: contain; /* landscape comps letterbox into the square; their
baked-in off-white field matches the section bg */
display: block;
}
/* scene 2 — the "reach gap" illustration (animated; dots generated in JS) */
.reachgap {
width: var(--os-media);
aspect-ratio: 1 / 1;
background: #E6E6DE;
overflow: hidden;
}
.rg-svg { display: block; width: 100%; height: 100%; }
/* camera — zoom IN on the node, pull back to reveal the crowd, hold, loop */
.rg-camera { transform-box: view-box; transform-origin: 500px 500px; transform: scale(3); will-change: transform; }
.os-scene.is-active .rg-camera { animation: rg-camera 5s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes rg-camera {
0%, 9% { transform: scale(3); }
58% { transform: scale(.6); }
84% { transform: scale(.6); }
100% { transform: scale(3); }
}
/* the crowd — light-green tint, low opacity; a subset twinkles on random timing */
.rg-crowd { fill: #75932C; opacity: .15; }
.os-scene.is-active .rg-twinkle { animation: rg-twinkle var(--tw-dur, 4s) ease-in-out var(--tw-del, 0s) infinite; }
@keyframes rg-twinkle { 0%, 100% { opacity: .12; } 50% { opacity: .5; } }
/* boundary — faint dashed limit of reach */
.rg-boundary { fill: none; stroke: #75932C; stroke-width: 2; stroke-dasharray: 6 7; opacity: .45; }
/* node — the only full-saturation element + soft pulsing halo */
.rg-node { fill: #75932C; }
.rg-halo { fill: #75932C; transform-box: fill-box; transform-origin: center; opacity: .3; }
.os-scene.is-active .rg-halo { animation: rg-halo 2.4s ease-in-out infinite; }
@keyframes rg-halo { 0%, 100% { opacity: .32; transform: scale(1); } 50% { opacity: 0; transform: scale(2.4); } }
/* sonar ping — spreads from the node, fades and dies at the boundary */
.rg-ping { fill: none; stroke: #75932C; stroke-width: 3; opacity: 0; }
.os-scene.is-active .rg-ping { animation: rg-ping 5s cubic-bezier(.2, .6, .2, 1) infinite; }
@keyframes rg-ping {
0% { r: 14px; opacity: 0; stroke-width: 5px; }
3% { opacity: .6; }
20% { r: 120px; opacity: 0; stroke-width: 1px; }
100% { r: 120px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.rg-camera { transform: scale(.78); animation: none; }
.rg-halo, .rg-ping, .rg-twinkle { animation: none; }
.rg-ping { opacity: 0; }
}
/* scene 3 — the name (definition card) */
.os-defcard { background: #E6E6DE; border-radius: 8px; padding: 36px; width: var(--os-media); aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; }
.os-def-word { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: clamp(32px, 4vw, 46px); letter-spacing: -0.02em; color: #0F0F0F; line-height: 1; }
.os-def-pron { font-family: var(--mono); font-size: 12px; color: rgba(15,15,15,.55); margin-top: 8px; letter-spacing: .04em; }
.os-def-rule { height: 1px; background: var(--hair-strong); margin: 18px 0; }
.os-def-body { font-size: 17px; line-height: 1.5; color: #2a2a2a; }
/* right — scrolling text steps. Each block is one viewport-ish tall and
vertically centers its content, so as you scroll the block nearest the
centre aligns with the (sticky, centered) stage scene. JS sets each block's
opacity by its distance from centre: the focused block locks to full
opacity while its neighbours dim into a scroll trail. */
.os-step {
min-height: var(--os-step-h);
display: flex; flex-direction: column; justify-content: center;
max-width: 32em;
opacity: .14; /* JS overrides per-scroll; this is the at-rest dim state */
}
.os-step-eyebrow { color: var(--accent-ink); display: inline-block; margin-bottom: 22px; }
.os-step h3 {
font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase;
font-size: clamp(28px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -0.014em;
color: var(--text); margin-bottom: 22px; max-width: 16ch;
}
.os-step p { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--dim); max-width: 42ch; }
/* The years-in-business figure, set inside the headline rather than on a
line of its own — it was a separate green kicker above the h3 and read as
a second, competing headline. Only the numeral takes the accent; the
words stay in --text with the rest of the sentence.
--accent (not --accent-ink) is right HERE and nowhere else in this block:
the h3 floors at 28px, over the 24px large-text threshold where field
green's 3.02:1 on cream clears 1.4.3. The 12px rail label a few rules up
is small text and uses --accent-ink for exactly that reason.
Matches the .hl convention the four Solutions pages use for a green word
in a headline; company.css has no .hl of its own (.hl-line here is the
hero's line-splitter, unrelated), hence the local name. */
.os-step h3 .os-years { color: var(--accent); font-variant-numeric: tabular-nums; }
.os-step p strong { color: var(--text); font-weight: 500; }
.os-step p em { font-style: italic; }
/* in-step CTA — closes the Today step (replaces the old standalone close block) */
.os-step-cta { align-self: flex-start; margin-top: 34px; }
@media (max-width: 860px) {
.os-scrolly { grid-template-columns: 1fr; gap: 0; }
.os-stage-col { display: none; }
.os-steps { padding-block: 0; }
/* no trail on mobile — every block fully legible (JS also skips the fade) */
.os-step { min-height: auto; padding: 7vh 0; max-width: none; opacity: 1; }
/* tighter opening on narrow screens — about stacks: title over body */
.origin-scrolly { padding-top: 11vh; }
.os-about {
grid-template-columns: 1fr;
row-gap: clamp(20px, 5vw, 34px);
align-items: start;
}
.os-about-title { font-size: clamp(56px, 16vw, 110px); }
.os-storyhead { flex-wrap: wrap; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.os-scene { transition: none; }
.os-rail-fill { transition: none; }
.os-cue-arrow { animation: none; }
}
/* Close — careers row: label + ghost button */
.cta-careers {
margin-top: 34px;
display: inline-flex; align-items: center; gap: 18px;
flex-wrap: wrap; justify-content: center;
}
.cta-careers-label {
font-family: var(--mono); font-size: 13px;
letter-spacing: .03em; color: var(--dim);
}
@media (max-width: 600px) {
.cta-careers { flex-direction: column; gap: 14px; }
}