/* Fonts are loaded via in index.html (preconnect + stylesheet)
to avoid the render-blocking request chain a CSS @import creates. */
@import url("tokens.css");
* {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
html,
body {
margin: 0;
padding: 0;
background: var(--deep-green);
overflow-x: hidden;
}
body {
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
}
/* Visually hidden but available to assistive tech */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Keyboard skip link — hidden until focused */
.skip-link {
position: fixed;
top: 0.75rem;
left: 0.75rem;
z-index: 100;
padding: 0.5rem 1rem;
background: var(--sand);
color: var(--deep-green);
font-family: var(--sans);
font-weight: 600;
border-radius: 4px;
text-decoration: none;
transform: translateY(-150%);
transition: transform 0.2s ease;
}
.skip-link:focus {
transform: translateY(0);
outline: 2px solid var(--deep-green);
outline-offset: 2px;
}
/* ==========================================================================
Fixed, scroll-aware section nav
One nav lives outside every section and stays pinned to the viewport.
nav.js observes each section and toggles which link is "current" and
what color the whole rail renders in, so it always reads against
whatever section is behind it.
========================================================================== */
.site-nav {
position: fixed;
left: clamp(1.5rem, 5vw, 6.25rem);
top: 50%;
transform: translateY(-50%);
z-index: 20;
color: var(--sand);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, color 0.3s ease;
}
.site-nav.is-visible {
opacity: 1;
pointer-events: auto;
}
.site-nav.is-at-end {
opacity: 0;
pointer-events: none;
}
.site-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.site-nav a {
display: flex;
align-items: center;
gap: 15px;
text-decoration: none;
color: inherit;
}
.site-nav__dash {
display: block;
width: 22px;
height: 1px;
flex: 0 0 auto;
background: currentColor;
opacity: 0.4;
transition: width 0.25s ease, opacity 0.25s ease;
}
.site-nav__label {
display: block;
font-family: var(--sans);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.6px;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
max-width: 0;
overflow: hidden;
transition: opacity 0.25s ease, max-width 0.3s ease;
}
.site-nav a.is-current .site-nav__dash {
width: 32px;
opacity: 1;
}
.site-nav a.is-current .site-nav__label {
opacity: 1;
max-width: 12rem;
}
/* ==========================================================================
Slide-in menu panel (opened by the hero menu button)
========================================================================== */
.menu {
position: fixed;
inset: 0;
z-index: 100;
visibility: hidden;
pointer-events: none;
}
.menu.is-open {
visibility: visible;
pointer-events: auto;
}
.menu__backdrop {
position: absolute;
inset: 0;
background: rgba(9, 17, 13, 0.5);
opacity: 0;
transition: opacity 0.4s ease;
}
.menu.is-open .menu__backdrop {
opacity: 1;
}
.menu__panel {
position: absolute;
top: clamp(0.75rem, 2vw, 1.75rem);
right: clamp(0.75rem, 2vw, 1.75rem);
max-height: calc(100% - clamp(1.5rem, 4vw, 3.5rem));
width: min(27.5rem, calc(100vw - 1.5rem));
display: flex;
flex-direction: column;
padding: clamp(1.5rem, 3vw, 2.5rem);
border-radius: clamp(20px, 3vw, 40px);
background: var(--cream);
color: var(--deep-green);
box-shadow: 0 40px 80px rgba(9, 17, 13, 0.35);
transform: translateX(calc(100% + 2rem));
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
overflow-y: auto;
}
.menu.is-open .menu__panel {
transform: translateX(0);
}
.menu__close {
align-self: flex-end;
display: flex;
padding: 0.25rem;
border: 0;
background: none;
color: var(--deep-green);
cursor: pointer;
}
.menu__close svg {
display: block;
}
.menu__body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(2rem, 5vw, 3rem);
}
.menu__nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(1.25rem, 2.5vw, 2rem);
}
.menu__nav a {
font-family: var(--sans);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--deep-green);
text-decoration: none;
transition: color 0.2s ease;
}
.menu__nav a:hover,
.menu__nav a:focus-visible {
color: var(--muted-green);
}
.menu__divider {
width: clamp(6rem, 12vw, 9rem);
height: 1px;
background: var(--sand);
}
.menu__cta {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(1.25rem, 3vw, 1.75rem);
}
.menu__cta-text {
max-width: 20ch;
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
line-height: 1.2;
letter-spacing: -0.01em;
text-align: center;
}
.menu__cta-text em {
font-style: italic;
}
.menu__cta-link {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
line-height: 1.2;
color: var(--deep-green);
text-decoration: underline;
text-underline-offset: 4px;
padding: 0.05em 0.2em;
background-image: linear-gradient(var(--deep-green), var(--deep-green));
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 100%;
transition: color 0.25s ease, background-size 0.35s ease;
}
.menu__cta-link:hover,
.menu__cta-link:focus-visible {
color: #fff;
text-decoration: none;
background-size: 100% 100%;
}
@media (prefers-reduced-motion: reduce) {
.menu__panel,
.menu__backdrop {
transition: none;
}
}
/* ==========================================================================
Shared section scaffolding
Every section below the hero is a full-bleed color block with rounded
top corners (the "peel" between sections) and a centered content
column. Nothing here uses a fixed canvas or JS-driven scale — spacing,
type, and radii all flex with clamp()/vw so the layout just reflows at
any width.
========================================================================== */
.section {
position: relative;
padding-block: clamp(3rem, 9vw, 7rem);
}
.section__inner {
/* Shared inset for indented content columns. Applied to content elements
(headlines, grids, card stacks) — never to __inner itself — so every
section's inner uses the same base padding. */
--content-pl: clamp(1.5rem, 21vw, 18rem);
position: relative;
z-index: 1;
max-width: 1600px;
margin-inline: auto;
padding-inline: clamp(1.5rem, 6vw, 5rem);
}
/* ==========================================================================
Scroll reveal — fade/rise-in as blocks enter the viewport (see reveal.js)
========================================================================== */
[data-reveal] {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-reveal].is-revealed {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
[data-reveal] {
transition: none;
}
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 15px;
margin: 0 0 clamp(2rem, 6vw, 4rem);
font-family: var(--sans);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
display: block;
width: 32px;
height: 1px;
background: currentColor;
}
/* ==========================================================================
Hero
========================================================================== */
.hero {
position: relative;
min-height: 100svh;
background: var(--deep-green);
overflow: hidden;
color: var(--sand);
}
.hero__wave {
position: absolute;
inset: 0;
width: 120%;
height: 120%;
display: block;
left: -10%;
margin-top: -10%;
pointer-events: none;
}
.hero__content {
position: relative;
z-index: 1;
min-height: 100svh;
max-width: 1600px;
margin-inline: auto;
display: flex;
flex-direction: column;
padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 6vw, 6.25rem);
}
.hero__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.hero__mark {
display: block;
width: clamp(140px, 14vw, 205px);
height: auto;
}
/* Animated hero logo: "Bureau of" fades in first, then "Brand Innovation",
then the spark fades in and grows slightly. The wordmark is one image
shown twice — each copy is clipped to its line (top/bottom half) so the
two lines can fade in one after the other. */
.hero__logo {
position: relative;
aspect-ratio: 206 / 63;
}
.hero__logo-line,
.hero__logo-star {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
/* Top line = top half of the image; bottom line = bottom half.
The wordmark shows immediately; only the spark animates in. */
.hero__logo-line1 {
clip-path: inset(0 0 50% 0);
}
.hero__logo-line2 {
clip-path: inset(50% 0 0 0);
}
.hero__logo-star {
/* Grow from the spark's own position (top-right of the wordmark) */
transform-origin: 88% 30%;
animation: logo-star 0.6s ease 0.4s both;
}
@keyframes logo-star {
from { opacity: 0; transform: scale(0.6); }
to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.hero__logo-line,
.hero__logo-star {
animation: none;
opacity: 1;
}
.hero__logo-star {
transform: none;
}
}
.hero__menu {
display: block;
width: 22px;
height: 14px;
border: 0;
background: none;
padding: 0;
cursor: pointer;
color: inherit;
}
.hero__menu svg,
.hero__menu img {
display: block;
width: 100%;
height: 100%;
}
.hero__main {
flex: 1;
display: flex;
align-items: flex-end;
padding-block: clamp(2rem, 6vw, 4rem);
}
.hero__row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: clamp(1.5rem, 6vw, 4rem);
width: 100%;
}
.hero__headline {
flex: 1 1 480px;
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(2.75rem, 1.5rem + 8vw, 10rem);
line-height: 0.85;
letter-spacing: -0.02em;
color: var(--sand);
}
.hero__headline em {
font-style: italic;
}
/* Each line fades up subtly and slowly, second line just after the first. */
.hero__headline-line {
display: block;
animation: hero-title-in 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero__headline-line:nth-child(1) {
animation-delay: 0.3s;
}
.hero__headline-line:nth-child(2) {
animation-delay: 0.75s;
}
@keyframes hero-title-in {
from { opacity: 0; transform: translateY(0.35em); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.hero__headline-line {
animation: none;
opacity: 1;
transform: none;
}
}
.hero__aside {
flex: 0 1 340px;
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 4vw, 2.5rem);
}
.hero__subtext {
margin: 0;
font-family: var(--sans);
font-weight: 300;
font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.5rem);
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--sand);
}
.hero__chevron {
display: block;
width: 23px;
height: 12px;
cursor: pointer;
}
.hero__chevron svg,
.hero__chevron img {
display: block;
width: 100%;
height: 100%;
}
/* Arrow drifts down and fades out, then repeats */
.hero__chevron img {
animation: chevron-bob 1.8s ease-in-out infinite;
}
@keyframes chevron-bob {
0% { transform: translateY(0); opacity: 1; }
60% { opacity: 0; }
100% { transform: translateY(12px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero__chevron img {
animation: none;
}
}
/* ==========================================================================
Challenge section — "Growth is getting harder to find."
========================================================================== */
.section--challenge {
background: var(--deep-green);
color: var(--deep-green);
padding-block: clamp(3rem, 10vw, 10rem);
}
.section--challenge::before {
content: "";
position: absolute;
inset: 0;
background: var(--sand);
z-index: 0;
border-radius: clamp(24px, 6vw, 100px) clamp(24px, 6vw, 100px) 0 0;
}
.challenge__headline {
max-width: 24ch;
margin: 0;
padding-left: var(--content-pl);
font-family: var(--serif);
font-weight: 400;
font-size: clamp(2.25rem, 1.4rem + 4.5vw, 5rem);
line-height: 1;
letter-spacing: -0.02em;
}
.challenge__headline em {
font-style: italic;
}
.challenge__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
gap: clamp(1.5rem, 4vw, 6rem);
margin-top: clamp(2.5rem, 7vw, 4.5rem);
padding-left: var(--content-pl);
}
.challenge__grid p {
margin: 0;
font-family: var(--sans);
font-weight: 500;
font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
line-height: 1.5;
letter-spacing: -0.01em;
}
.challenge__grid strong {
display: block;
margin-top: 1.5em;
font-weight: 600;
}
/* ==========================================================================
Offering section — headline + Owned Growth + 3 stages
========================================================================== */
.section--offering {
position: relative;
background: var(--sand);
color: var(--navy);
padding-block: clamp(3rem, 10vw, 10rem);
}
/* Cream panel inset from the top/bottom so the sand section background
peeks out above and below it */
.section--offering::before {
content: "";
position: absolute;
inset: 0;
background: var(--cream);
z-index: 0;
border-radius: clamp(24px, 6vw, 100px) clamp(24px, 6vw, 100px) 0 0;
}
/* The 1440-wide stack of headline / Owned Growth / stages, spaced at a
consistent 120px rhythm (at the 1600px reference canvas) */
.offering__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(3rem, 8vw, 7.5rem);
position: relative;
z-index: 1;
}
.offering__headline {
margin: 0;
padding-left: var(--content-pl);
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.75rem, 1.2rem + 3vw, 4rem);
line-height: 1.1;
letter-spacing: -0.02em;
}
/* Owned Growth card, full width within the offering stack */
.owned-growth {
width: 100%;
padding: clamp(2.5rem, 8vw, 7.5rem) clamp(1.5rem, 6vw, 4rem);
border-radius: clamp(20px, 3vw, 40px);
background: var(--navy);
color: var(--sand);
}
.owned-growth__inner {
max-width: 48.75rem;
margin-inline: auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(1.5rem, 4vw, 2.5rem);
}
.owned-growth__title {
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(2.5rem, 1.5rem + 6vw, 7.5rem);
line-height: 1.05;
letter-spacing: -0.01em;
}
.owned-growth__body {
margin: 0;
font-family: var(--sans);
font-weight: 400;
font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
line-height: 1.5;
letter-spacing: -0.01em;
}
.owned-growth__stages {
margin: 0;
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: clamp(1.5rem, 1.1rem + 2.5vw, 3rem);
line-height: 1.05;
letter-spacing: -0.01em;
}
/* Three stage rows, connected by a dotted rail running through the gap
between each icon and its copy */
.stages {
--icon-col: clamp(180px, 26vw, 25.625rem);
--stage-gap: clamp(1.5rem, 16vw, 15.875rem);
--stage-pl: clamp(1rem, 6vw, 6.25rem);
position: relative;
width: 100%;
display: flex;
flex-direction: column;
gap: clamp(3rem, 10vw, 9.75rem);
}
/* The whole rail (track, progress line, start marker, nodes) is nudged up
by this amount so it reads higher against the stage copy. */
.stages {
--rail-offset: 120px;
}
/* Dotted "track" the progress line and nodes ride on */
.stages::before {
content: "";
position: absolute;
left: 50%;
top: calc(-1 * var(--rail-offset));
bottom: 0;
border-left: 2px dotted var(--sand);
z-index: 0;
}
/* Solid line that grows from the top as you scroll (height set in stages.js) */
.stages__progress {
position: absolute;
left: 50%;
top: calc(-1 * var(--rail-offset));
width: 0;
height: 0;
border-left: 2px solid var(--sand);
z-index: 1;
transition: height 0.15s linear;
}
/* Filled "start" target where the rail begins */
.stages::after {
content: "";
position: absolute;
left: 50%;
top: calc(-1 * var(--rail-offset));
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sand);
transform: translate(-50%, -50%);
box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--sand);
z-index: 2;
}
.stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: var(--stage-gap);
padding-left: var(--stage-pl);
}
/* Circle node centered on the rail for each stage — open by default,
filled once the scroll progress line reaches it (see stages.js) */
.stage__node {
position: absolute;
left: 50%;
top: calc(50% - var(--rail-offset));
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--sand);
background: var(--cream);
transform: translate(-50%, -50%);
z-index: 2;
transition: background 0.3s ease;
}
.stage.is-active .stage__node {
background: var(--sand);
}
.stage__icon {
flex: 0 0 var(--icon-col);
width: var(--icon-col);
}
.stage__icon svg,
.stage__icon img {
display: block;
width: 100%;
height: auto;
}
.stage__copy {
flex: 0 1 31.875rem;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1.75rem;
/* Dimmed until the stage scrolls toward the viewport centre — the exact
value is driven per-frame by stages.js as it comes into focus. */
opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) {
.stage__copy {
opacity: 1;
}
}
.stage-copy__eyebrow {
margin: 0;
font-family: var(--sans);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.stage-copy__heading {
margin: 0;
font-family: var(--serif);
font-style: normal;
font-weight: 400;
font-size: clamp(2.5rem, 1.1rem + 2vw, 4rem);
line-height: 1;
letter-spacing: -0.02em;
}
.stage-copy__heading em {
font-style: italic;
}
.stage-copy__body {
margin: 0;
font-family: var(--sans);
font-weight: 500;
font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
line-height: 1.5;
letter-spacing: -0.01em;
}
/* --------------------------------------------------------------------------
Stage illustration draw-in (Stages 01–03)
Each SVG is inlined so its parts can be targeted individually. Parts start
hidden and animate in — in sequence — whenever the illustration scrolls
into view. stages.js toggles .is-playing on/off as each one enters/leaves
the viewport, so scrolling back up and down replays the animation.
-------------------------------------------------------------------------- */
.stage__illo [class^="illo-"] {
opacity: 0;
}
/* Anything that scales grows from its own bounding-box */
.stage__illo .illo-star,
.stage__illo .illo-arcs,
.stage__illo .illo-orbit,
.stage__illo .illo-dot,
.stage__illo .illo-ray {
transform-box: fill-box;
transform-origin: center;
}
/* Lines/rays grow outward from their anchored (compass-side) end */
.stage__illo .illo-line {
transform-box: fill-box;
transform-origin: left bottom;
}
.stage__illo--02 .illo-ray--h {
transform-origin: left center;
}
.stage__illo--02 .illo-ray--up {
transform-origin: left bottom;
}
.stage__illo--02 .illo-ray--down {
transform-origin: left top;
}
/* Strokes that "draw" themselves via dash offset (--dash ≈ path length) */
.stage__illo .illo-ring {
--dash: 75;
stroke-dasharray: var(--dash);
stroke-dashoffset: var(--dash);
}
.stage__illo--02 .illo-frame {
--dash: 760;
stroke-dasharray: var(--dash);
stroke-dashoffset: var(--dash);
}
.stage__illo--03 .illo-triangle {
--dash: 790;
stroke-dasharray: var(--dash);
stroke-dashoffset: var(--dash);
}
.stage__illo--03 .illo-lines {
--dash: 470;
stroke-dasharray: var(--dash);
stroke-dashoffset: var(--dash);
}
/* Stage 01 — compass, orbits, connector out to the node */
.stage__illo--01.is-playing .illo-star {
animation: illo-pop 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
}
.stage__illo--01.is-playing .illo-arcs {
animation: illo-fade 1.1s ease 0.25s both;
}
.stage__illo--01.is-playing .illo-orbit {
animation: illo-fade 1.2s ease 0.5s both;
}
.stage__illo--01.is-playing .illo-line {
animation: illo-grow 0.9s ease 0.9s both;
}
.stage__illo--01.is-playing .illo-ring {
animation: illo-draw 0.9s ease 1.5s both;
}
.stage__illo--01.is-playing .illo-dot {
animation: illo-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) 2s both;
}
/* Stage 02 — compass pops, frame draws, rays shoot out */
.stage__illo--02.is-playing .illo-star {
animation: illo-pop 1s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
}
.stage__illo--02.is-playing .illo-frame {
animation: illo-draw 1.3s ease 0.35s both;
}
.stage__illo--02.is-playing .illo-ray--h {
animation: illo-grow 0.9s ease 1.15s both;
}
.stage__illo--02.is-playing .illo-ray--up {
animation: illo-grow 0.9s ease 1.35s both;
}
.stage__illo--02.is-playing .illo-ray--down {
animation: illo-grow 0.9s ease 1.55s both;
}
/* Stage 03 — compass pops, triangle draws, medians draw, helper fades */
.stage__illo--03.is-playing .illo-star {
animation: illo-pop 1s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
}
.stage__illo--03.is-playing .illo-triangle {
animation: illo-draw 1.4s ease 0.35s both;
}
.stage__illo--03.is-playing .illo-lines {
animation: illo-draw 1.1s ease 1.4s both;
}
.stage__illo--03.is-playing .illo-helper {
animation: illo-appear 0.9s ease 1.9s both;
}
@keyframes illo-pop {
from { opacity: 0; transform: scale(0.4); }
to { opacity: 1; transform: scale(1); }
}
@keyframes illo-fade {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}
@keyframes illo-grow {
from { opacity: 0; transform: scale(0); }
to { opacity: 1; transform: scale(1); }
}
@keyframes illo-draw {
from { opacity: 1; stroke-dashoffset: var(--dash); }
to { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes illo-appear {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.stage__illo [class^="illo-"] {
opacity: 1;
transform: none;
animation: none !important;
}
.stage__illo .illo-ring,
.stage__illo--02 .illo-frame,
.stage__illo--03 .illo-triangle,
.stage__illo--03 .illo-lines {
stroke-dashoffset: 0;
}
}
/* ==========================================================================
Selected Work section — case study cards
========================================================================== */
.section--work {
background: var(--cream);
color: var(--sand);
padding-block: clamp(3rem, 10vw, 10rem);
}
.section--work::before {
content: "";
position: absolute;
inset: 0;
background: var(--navy);
z-index: 0;
border-radius: clamp(24px, 6vw, 100px) clamp(24px, 6vw, 100px) 0 0;
}
/* Header row + card stack, spaced at the 49px rhythm from Figma */
.section--work .section__inner {
display: flex;
flex-direction: column;
gap: clamp(2rem, 5vw, 3.0625rem);
}
/* Header + cards indented to the shared content column */
.work__header,
.work-cards {
padding-left: var(--content-pl);
}
.work__header {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: clamp(1rem, 4vw, 2rem);
}
.work__credit {
margin: 0;
font-family: var(--sans);
font-weight: 400;
font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
line-height: 1.5;
letter-spacing: -0.01em;
text-align: right;
}
.work__credit em {
font-style: italic;
}
.work__headline {
max-width: 12ch;
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(2.25rem, 1.4rem + 4.5vw, 5rem);
line-height: 1;
letter-spacing: -0.02em;
}
.work__headline em {
font-style: italic;
}
.work-cards {
display: flex;
flex-direction: column;
gap: clamp(0.5rem, 1.5vw, 0.6875rem);
}
/* Every card behaves identically: a fixed-size photo band on top (the media)
with the eyebrow, title and arrow pinned over it, and a collapsible body
below. The media never changes size, so the photo never zooms or grows —
opening only fades the photo, reveals the body, and rotates the arrow. */
.work-card {
--card-px: clamp(1.5rem, 6vw, 6.875rem);
--card-py: clamp(1.5rem, 5vw, 5.625rem);
position: relative;
border-radius: clamp(20px, 3vw, 40px);
overflow: hidden;
color: var(--cream);
cursor: pointer;
background:#0F161F;
}
.work-card:focus-visible {
outline: 2px solid var(--sand);
outline-offset: 4px;
}
/* Fixed-height photo band. Its height comes from the aspect-ratio (with a
floor), independent of how tall the body makes the card, so the image
stays exactly as-is when the card opens. */
.work-card__media {
position: relative;
aspect-ratio: 3 / 1;
min-height: 220px;
}
.work-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.work-card__img--bottom {
object-position: center bottom;
}
/* Base gradient keeps the title legible over the photo when closed. */
.work-card__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 22, 31, 0.2) 0%, rgba(15, 22, 31, 1) 100%);
}
/* Opening fades a navy wash over the photo so it recedes behind the copy. */
.work-card__scrim::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 22, 31, 0.2) 0%, rgba(15, 22, 31, 1) 100%);
opacity: 0;
transition: opacity 0.5s ease;
}
.work-card.is-expanded .work-card__scrim::after {
opacity: 1;
}
.work-card__head {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--card-py) var(--card-px);
}
.work-card__eyebrow {
margin: 0;
font-family: var(--sans);
font-weight: 500;
font-size: 0.75rem;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--sand);
}
.work-card__title {
max-width: 18ch;
margin: 1.875rem 0 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.75rem, 1.2rem + 3vw, 4rem);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--cream);
}
/* Collapsed by default (grid-template-rows: 0fr is the CSS-only way to
animate to/from an intrinsic "auto" height); .is-expanded opens it.
The body sits below the photo band over the navy card background. */
.work-card__body {
display: grid;
grid-template-rows: 0fr;
max-width: 80ch;
padding: 0 var(--card-px);
opacity: 0;
font-family: var(--sans);
font-weight: 400;
font-size: clamp(0.9375rem, 0.85rem + 0.25vw, 1.25rem);
line-height: 1.5;
letter-spacing: -0.01em;
color: var(--cream);
transition: grid-template-rows 0.5s ease, opacity 0.4s ease, padding 0.5s ease;
}
.work-card.is-expanded .work-card__body {
grid-template-rows: 1fr;
opacity: 1;
padding-top: clamp(1.5rem, 5vw, 3.9375rem);
padding-bottom: var(--card-py);
}
.work-card__body-inner {
min-height: 0;
overflow: hidden;
}
.work-card__body p {
margin: 0 0 1.5em;
}
.work-card__body p:last-child {
margin-bottom: 0;
}
.work-card__body em {
font-style: italic;
}
/* Arrow stays vertically centered on the photo band in every state —
opening only rotates it in place, it never jumps position. */
.work-card__arrow {
position: absolute;
top: 50%;
right: var(--card-px);
z-index: 2;
display: block;
width: 17px;
height: 34px;
transform: translateY(-50%) rotate(90deg);
transition: transform 0.4s ease;
}
.work-card.is-expanded .work-card__arrow {
transform: translateY(-50%) rotate(-90deg);
}
.work-card__arrow svg,
.work-card__arrow img {
display: block;
width: 100%;
height: 100%;
}
/* ==========================================================================
About section — team bios
========================================================================== */
.section--about {
background: var(--navy);
color: var(--deep-green);
padding-block: clamp(3rem, 10vw, 10rem);
}
.section--about::before {
content: "";
position: absolute;
inset: 0;
background: var(--sand);
z-index: 0;
border-radius: clamp(24px, 6vw, 100px) clamp(24px, 6vw, 100px) 0 0;
}
.bio-list {
display: flex;
flex-direction: column;
gap: clamp(3rem, 8vw, 6.25rem);
padding-left: var(--content-pl);
}
.bio-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.5rem, 8vw, 8.0625rem);
align-items: center;
}
@media (min-width: 800px) {
.bio-row {
grid-template-columns: 1.1fr 0.9fr;
}
.bio-row--reverse .bio-row__photo {
order: -1;
}
}
.bio-row__info {
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 4vw, 3rem);
}
.bio-row__photo {
border-radius: clamp(14px, 2vw, 20px);
overflow: hidden;
aspect-ratio: 471.563 / 668.815;
background: var(--deep-green);
}
.bio-row__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bio-row__name {
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(2rem, 1.2rem + 4vw, 5rem);
line-height: 1;
letter-spacing: -0.02em;
}
.bio-row__text {
margin: 0;
max-width: 36rem;
font-family: var(--sans);
font-weight: 500;
font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
line-height: 1.5;
letter-spacing: -0.01em;
}
.bio-row__text strong {
font-weight: 700;
}
/* ==========================================================================
Origin / CTA / Footer section
========================================================================== */
.section--origin {
background: var(--sand);
color: var(--sand);
padding-block: clamp(3rem, 10vw, 10rem);
overflow: hidden;
}
.section--origin::before {
content: "";
position: absolute;
inset: 0;
background: var(--deep-green);
z-index: 0;
border-radius: clamp(24px, 6vw, 100px) clamp(24px, 6vw, 100px) 0 0;
}
/* Same particle-wave canvas as the hero (see wave.js), oversized and
rotated 90deg clockwise so it still fully covers the section once
turned on its side. */
.origin__wave {
position: absolute;
top: 50%;
left: 50%;
width: 150%;
height: 150%;
transform: translate(-50%, -50%) rotate(90deg);
display: block;
pointer-events: none;
z-index: 0;
}
.section--origin .section__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(2.5rem, 6vw, 4.3125rem);
}
.origin__ribbon {
position: absolute;
max-width: none;
width: min(120vw, 1600px);
opacity: 0.16;
pointer-events: none;
}
.origin__ribbon--1 {
top: -8%;
left: 50%;
transform: translateX(-50%) rotate(6deg);
}
.origin__ribbon--2 {
bottom: -12%;
left: 50%;
transform: translateX(-50%) rotate(-8deg);
}
/* Quote block: indented to the same 365px text column as the other
sections (with a smaller inset on the right), stacked at an 80px rhythm */
.origin__quote-block {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(2rem, 5vw, 5rem);
padding-left: var(--content-pl);
padding-right: clamp(0, 7.5vw, 7.5rem);
}
.origin__sparkle {
display: block;
width: clamp(90px, 12vw, 152px);
transform: scaleY(-1);
}
.origin__sparkle svg,
.origin__sparkle img {
display: block;
width: 100%;
height: auto;
}
.origin__quote {
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.5rem, 1.1rem + 2.2vw, 3.375rem);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--sand);
}
.origin__quote p {
margin: 0 0 1em;
}
/* Words start dim and light up as they scroll through the reveal band
(see origin-reveal.js, which wraps each word in a .word span) */
.origin__quote .word {
color: var(--muted-green);
opacity: 0.45;
transition: color 0.6s ease, opacity 0.6s ease;
}
.origin__quote .word.is-revealed {
color: var(--sand);
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.origin__quote .word {
transition: none;
}
}
.origin__sig {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.origin__signature {
display: block;
width: clamp(110px, 10vw, 9.5438rem);
height: auto;
margin-bottom: 0.75rem;
}
.origin__attribution {
margin: 0;
font-family: var(--sans);
font-weight: 700;
font-size: 0.875rem;
line-height: 1.4;
letter-spacing: 0.7px;
text-transform: uppercase;
color: var(--sand);
}
.origin__attribution span {
font-family: var(--sans);
font-weight: 500;
}
.origin-cta {
position: relative;
width: 100%;
padding: clamp(2.5rem, 12vw, 9.375rem);
border-radius: clamp(20px, 3vw, 40px);
background: var(--cream);
color: var(--deep-green);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(1.5rem, 4vw, 2.75rem);
}
.origin-cta__text {
max-width: 32ch;
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.5rem, 1.1rem + 2vw, 3.75rem);
line-height: 1.15;
letter-spacing: -0.01em;
}
.origin-cta__text em {
font-style: italic;
}
.origin-cta__email {
margin: 0;
font-family: var(--sans);
font-weight: 700;
font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 1.0625rem);
letter-spacing: 0.85px;
text-transform: uppercase;
}
.origin-cta__email a {
color: inherit;
text-decoration: underline;
padding: 0.05em 0.2em;
background-image: linear-gradient(var(--deep-green), var(--deep-green));
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 100%;
transition: color 0.25s ease, background-size 0.35s ease;
}
.origin-cta__email a:hover,
.origin-cta__email a:focus-visible {
color: #fff;
text-decoration: none;
background-size: 100% 100%;
}
.origin-footer {
width: 100%;
max-width: 75rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.footer-mark {
display: block;
width: clamp(150px, 15vw, 231px);
height: auto;
}
.footer-mark svg,
.footer-mark img {
display: block;
width: 100%;
height: auto;
}
.footer-tagline {
margin: 0;
font-family: var(--sans);
font-weight: 500;
font-size: 0.875rem;
line-height: 1.4;
letter-spacing: 0.7px;
text-transform: uppercase;
color: var(--sand);
}
@media (max-width: 640px) {
/* Hide the floating side navigation on mobile */
.site-nav {
display: none;
}
/* Drop the shared content indent so section text is full-width both sides */
.section__inner {
--content-pl: 0 !important;
}
/* Remove the animated particle background in the Origin section */
.origin__wave {
display: none;
}
/* Flip the hero wave animation 90° clockwise; a centered square keeps it
covering the tall mobile hero after the rotation. */
.hero__wave {
inset: auto;
top: 50%;
left: 50%;
width: 150vmax;
height: 150vmax;
margin: 0;
transform: translate(-50%, -50%) rotate(90deg);
opacity: 0.5;
}
/* Offering stages: drop the vertical rail and stack each illustration
above its text, all in a single column. */
.stages::before,
.stages__progress,
.stages::after,
.stage__node {
display: none;
}
.stage {
flex-direction: column;
align-items: center;
gap: clamp(1.5rem, 6vw, 2.5rem);
padding-left: 0 !important;
}
.stage__icon {
flex: none;
width: clamp(180px, 60vw, 280px);
}
.stage__copy {
flex: none !important;
width: 100%;
opacity: 1;
}
.work-cards .work-card__media {
min-height: 150px;
aspect-ratio: 2 / 1;
}
.work-cards .work-card__head {
padding-right: calc(var(--card-px) + 2.25rem);
}
}