/* ============================================
AUTOMATE IBIZA — SITE STYLESHEET
v1.1 — Editorial Discipline Pass
============================================ */
/* ─── TOKENS ─────────────────────────────── */
:root {
--bk: #0a0a0a;
--bk-grain: #111111;
--paper: #f7f4ee;
--paper-warm: #efebe1;
--ink: #1a1a1a;
--ink-soft: #3a3a38;
--mute: #6e6e6c;
--mute-2: #9a9a98;
--line: rgba(10, 10, 10, .1);
--line-soft: rgba(10, 10, 10, .06);
--line-dark: rgba(247, 244, 238, .1);
--sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--display: 'Inter Tight', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* 8px baseline grid */
--u: 8px;
--gutter: clamp(24px, 5vw, 80px);
--section-y: clamp(96px, 14vh, 176px);
--nav-h: 64px;
--ease: cubic-bezier(.2, .8, .2, 1);
--t-fast: 200ms;
--t-med: 400ms;
--t-slow: 700ms;
}
/* ─── PLACEHOLDER FALLBACK BEHAVIOUR ────────────
Placeholders sit behind images using absolute positioning. By default they
should be hidden, only appearing when an image's onerror handler explicitly
sets display:flex. This prevents placeholder text from showing through
successfully loaded images. */
.scenario-placeholder,
.journal-placeholder,
.entry-image-placeholder,
.team-portrait-placeholder,
.badge-placeholder {
display: none;
}
/* ─── RESET ──────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-weight: 300;
font-size: 15px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
p, .recog-q, .advantage-h, .scenario-q, .why-h, .testimonial-q, .close-sub {
text-wrap: pretty;
}
h1, h2, .hero-line, .possible-h, .close-h, .journal-title {
text-wrap: balance;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
/* ─── NAVIGATION ─────────────────────────── */
/* mix-blend-mode: difference — nav reads white over dark, dark over light, no JS scroll tracking needed. */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--nav-h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--gutter);
z-index: 100;
color: var(--paper);
mix-blend-mode: difference;
pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav-left, .nav-right {
display: flex;
align-items: center;
gap: 28px;
}
.nav-toggle {
display: flex;
flex-direction: column;
gap: 5px;
padding: 10px 0;
cursor: pointer;
}
.nav-toggle span {
display: block;
width: 22px;
height: 1.5px;
background: currentColor;
}
.nav-logo {
font-family: var(--display);
font-weight: 700;
font-size: 13px;
letter-spacing: .14em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 10px;
}
/* Nav logo mark — inline SVG, inherits parent color via currentColor.
Sized via width/height. The SVG already contains the circle outline
and inner mark, so no border styling needed. */
.nav-logo-mark {
width: 28px;
height: 28px;
display: inline-block;
flex-shrink: 0;
vertical-align: middle;
}
/* Nav logo wordmark — inline SVG of "AUTOMATE IBIZA" text.
Height proportioned to match the original brand lockup ratio
(wordmark height ~30% of emblem height). */
.nav-logo-wordmark {
height: 10px;
width: auto;
display: inline-block;
flex-shrink: 0;
vertical-align: middle;
}
/* Responsive: hide wordmark below 768px (mobile shows emblem only) */
@media (max-width: 767px) {
.nav-logo-wordmark { display: none; }
}
/* Footer wordmark — same proportional ratio to emblem as the nav lockup,
visible at all screen sizes per brand spec. */
.footer-logo-wordmark {
height: 10px;
width: auto;
display: inline-block;
flex-shrink: 0;
vertical-align: middle;
}
.lang-switch {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--display);
font-weight: 400;
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
}
.lang-switch a { opacity: .55; transition: opacity var(--t-fast) var(--ease); }
.lang-switch a.is-active { opacity: 1; }
.lang-switch a:hover { opacity: 1; }
.lang-switch .divider { opacity: .35; }
/* ─── MENU OVERLAY ───────────────────────── */
.menu {
position: fixed;
inset: 0;
background: var(--bk);
color: var(--paper);
z-index: 200;
display: flex;
flex-direction: column;
transform: translateY(-101%);
transition: transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
pointer-events: none;
visibility: hidden;
}
.menu.is-open {
transform: translateY(0);
pointer-events: auto;
visibility: visible;
transition: transform var(--t-slow) var(--ease), visibility 0s linear 0s;
}
.menu-head {
height: var(--nav-h);
padding: 0 var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line-dark);
}
.menu-close {
font-family: var(--display);
font-weight: 400;
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
}
.menu-body {
flex: 1;
display: grid;
grid-template-columns: 1fr;
align-content: center;
padding: 0 var(--gutter);
overflow-y: auto;
}
@media (min-width: 900px) {
.menu-body {
grid-template-columns: 1fr 1fr;
gap: 96px;
}
}
.menu-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 2px;
padding: 24px 0;
}
.menu-list a {
display: inline-block;
font-family: var(--display);
font-weight: 300;
font-size: clamp(28px, 4vw, 48px);
line-height: 1.1;
letter-spacing: -.02em;
padding: 4px 0;
transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease), font-weight var(--t-fast) var(--ease);
transform: translateY(16px);
opacity: 0;
}
.menu.is-open .menu-list a {
transform: translateY(0);
opacity: 1;
}
.menu.is-open .menu-list li:nth-child(1) a { transition-delay: 160ms; }
.menu.is-open .menu-list li:nth-child(2) a { transition-delay: 210ms; }
.menu.is-open .menu-list li:nth-child(3) a { transition-delay: 260ms; }
.menu.is-open .menu-list li:nth-child(4) a { transition-delay: 310ms; }
.menu.is-open .menu-list li:nth-child(5) a { transition-delay: 360ms; }
.menu.is-open .menu-list li:nth-child(6) a { transition-delay: 410ms; }
.menu.is-open .menu-list li:nth-child(7) a { transition-delay: 460ms; }
.menu-list a:hover { font-weight: 800; }
.menu-aside {
display: none;
}
@media (min-width: 900px) {
.menu-aside {
display: flex;
flex-direction: column;
gap: 40px;
align-self: center;
padding: 24px 0;
}
}
.menu-aside-block {
font-family: var(--sans);
font-weight: 300;
font-size: 13px;
line-height: 1.6;
color: var(--mute-2);
max-width: 280px;
}
.menu-aside-block .lbl {
font-family: var(--display);
font-weight: 400;
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--paper);
display: block;
margin-bottom: 8px;
}
.menu-aside-block a {
color: var(--paper);
border-bottom: 1px solid rgba(247, 244, 238, .2);
transition: border-color var(--t-fast) var(--ease);
}
.menu-aside-block a:hover { border-color: var(--paper); }
.menu-foot {
height: var(--nav-h);
padding: 0 var(--gutter);
border-top: 1px solid var(--line-dark);
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--display);
font-weight: 400;
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--mute-2);
}
.menu-foot .lang-mobile {
display: flex;
gap: 12px;
}
@media (min-width: 900px) {
.menu-foot .lang-mobile { display: none; }
}
/* ─── HERO ───────────────────────────────── */
.hero {
position: relative;
height: 100vh;
min-height: 600px;
width: 100%;
overflow: hidden;
background: var(--bk);
color: var(--paper);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--nav-h) var(--gutter) clamp(56px, 9vh, 112px);
}
/* On mobile, switch from pinning content to bottom-with-padding to a more
forgiving centred-lower-third approach. This way headline + whisper sit
visually balanced regardless of phone height, and the whisper never gets
pushed off-screen on tall viewports. */
@media (max-width: 768px) {
.hero {
justify-content: center;
padding-top: calc(var(--nav-h) + 8vh);
padding-bottom: 8vh;
}
}
.hero-media {
position: absolute;
inset: 0;
z-index: 0;
background-color: var(--bk);
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
}
.hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.08) brightness(.85);
}
/* Bottom-weighted overlay — image breathes in the upper-middle portion,
shadow gives the headline its legibility floor.
Top has a soft fade-in from black to protect against grainy placeholder
imagery and to give the nav clean visual real-estate. */
.hero-media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(10,10,10,.55) 0%,
rgba(10,10,10,.18) 12%,
rgba(10,10,10,.05) 40%,
rgba(10,10,10,.45) 75%,
rgba(10,10,10,.92) 100%
);
}
.hero-inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 1600px;
}
.hero-line {
font-family: var(--display);
font-weight: 900;
font-size: clamp(72px, 11vw, 168px);
line-height: .94;
letter-spacing: -.04em;
margin-bottom: clamp(48px, 7vh, 88px);
}
/* On narrower viewports, large words like "Outcomes" overflow the screen.
Scale the hero line down so long words break naturally within the column.
Also tighten the gap to the whisper so headline and subtitle sit as one block. */
@media (max-width: 480px) {
.hero-line {
font-size: clamp(56px, 14vw, 88px);
word-wrap: break-word;
overflow-wrap: break-word;
margin-bottom: clamp(20px, 3vh, 32px);
}
}
.hero-whisper {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(14px, 1vw, 16px);
line-height: 1.7;
color: rgba(247, 244, 238, .7);
max-width: 420px;
letter-spacing: .005em;
}
/* GEO page whisper is longer than other pages and needs a wider column
to flow on one line at desktop widths */
[aria-labelledby="geo-headline"] .hero-whisper { max-width: 620px; }
/* ─── SECTIONS ──────────────────────────── */
.section {
padding: var(--section-y) var(--gutter);
position: relative;
}
.section-inner {
max-width: 1400px;
margin: 0 auto;
}
.section.is-dark {
background: var(--bk);
color: var(--paper);
}
.section.is-warm {
background: var(--paper-warm);
}
/* ─── SECTION 2 · RECOGNITION ──────────────── */
.recog {
display: grid;
grid-template-columns: 1fr;
gap: clamp(32px, 5vh, 64px);
}
@media (min-width: 900px) {
.recog {
grid-template-columns: 5fr 7fr;
gap: clamp(48px, 6vw, 96px);
}
}
.recog-q {
font-family: var(--display);
font-weight: 300;
font-size: clamp(26px, 3vw, 42px);
line-height: 1.18;
letter-spacing: -.02em;
color: var(--ink);
max-width: 16ch;
}
.recog-q strong {
font-weight: 800;
}
.recog-body {
font-family: var(--sans);
font-weight: 300;
font-size: 15px;
line-height: 1.85;
color: var(--ink-soft);
max-width: 52ch;
padding-top: 12px;
}
.recog-body p + p { margin-top: 1.4em; }
.recog-body em { font-style: italic; color: var(--ink); }
.recog-body .recog-turn {
font-style: italic;
color: var(--ink);
}
/* ─── INTERSTITIAL · BREATH ─────────────── */
.interstitial {
background: var(--bk);
color: var(--paper);
padding: clamp(80px, 16vh, 200px) var(--gutter);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
}
/* Interstitial variant with parallax background image.
When .interstitial-parallax is used, the parallax-strip-img / overlay /
content elements take over. The original grain/light treatment below this
stays in place as the fallback when no image loads. */
.interstitial-parallax {
min-height: 60vh;
padding: clamp(96px, 16vh, 200px) var(--gutter);
}
.interstitial-parallax .parallax-strip-img {
position: absolute;
inset: -20% 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
filter: grayscale(100%) contrast(1.05) brightness(.55);
}
@media (max-width: 900px) {
.interstitial-parallax .parallax-strip-img { background-attachment: scroll; }
}
/* Layered atmosphere on the standard (non-parallax) interstitial:
1. SVG grain — tactile, like printed paper held under low light
2. Radial light — a soft hint of illumination from above, giving the
section a sense of physical space rather than a flat slab */
.interstitial::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
opacity: .55;
pointer-events: none;
mix-blend-mode: overlay;
}
.interstitial::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 0%,
rgba(247, 244, 238, .06) 0%,
transparent 70%);
pointer-events: none;
}
.interstitial-parallax::before,
.interstitial-parallax::after {
/* The parallax variant uses its own overlay treatment, not the grain layers */
display: none;
}
.interstitial-q {
font-family: var(--display);
font-weight: 200;
font-size: clamp(32px, 5vw, 72px);
line-height: 1.05;
letter-spacing: -.025em;
color: var(--paper);
position: relative;
z-index: 1;
}
/* ─── SECTION 3 · ADVANTAGE ─────────────── */
.advantage {
display: grid;
grid-template-columns: 1fr;
gap: clamp(32px, 5vh, 64px);
}
@media (min-width: 900px) {
.advantage {
grid-template-columns: 6fr 6fr;
gap: clamp(56px, 7vw, 112px);
}
}
.advantage-h {
font-family: var(--display);
font-weight: 300;
font-size: clamp(30px, 3.6vw, 52px);
line-height: 1.12;
letter-spacing: -.022em;
color: var(--ink);
max-width: 18ch;
}
.advantage-h strong { font-weight: 800; }
.advantage-body {
font-family: var(--sans);
font-weight: 300;
font-size: 15px;
line-height: 1.85;
color: var(--ink-soft);
max-width: 52ch;
}
.advantage-body p + p { margin-top: 1.4em; }
.advantage-body em { font-style: italic; color: var(--ink); }
.advantage-cta {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 12px;
padding-top: clamp(32px, 4vh, 56px);
border-top: 1px solid var(--line);
margin-top: clamp(24px, 3vh, 40px);
transition: opacity var(--t-fast) var(--ease);
}
@media (min-width: 900px) {
.advantage-cta {
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}
}
.advantage-cta-line {
font-family: var(--display);
font-weight: 800;
font-size: clamp(22px, 2.6vw, 38px);
line-height: 1.1;
letter-spacing: -.02em;
color: var(--ink);
}
.advantage-cta-link {
font-family: var(--display);
font-weight: 400;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mute);
transition: color var(--t-fast) var(--ease);
}
.advantage-cta:hover .advantage-cta-link { color: var(--ink); }
/* ─── SECTION 4 · WHAT'S POSSIBLE ──────── */
.section-inner-wide { max-width: 1600px; margin: 0 auto; }
.possible-intro {
margin-bottom: clamp(64px, 10vh, 128px);
max-width: 720px;
}
.possible-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(64px, 10vw, 160px);
line-height: .95;
letter-spacing: -.04em;
color: var(--ink);
margin-bottom: 24px;
}
.possible-h .punct { font-weight: 200; }
.possible-sub {
font-family: var(--sans);
font-weight: 300;
font-size: 16px;
line-height: 1.7;
color: var(--mute);
max-width: 560px;
text-wrap: pretty;
}
.scenario {
display: grid;
grid-template-columns: 1fr;
gap: clamp(32px, 5vw, 80px);
margin-bottom: clamp(80px, 12vh, 160px);
align-items: center;
}
/* Mobile: ensure consistent image-then-text stacking regardless of HTML source
order. On desktop these alternate side-by-side; on mobile they must always
stack the same way for predictable scroll rhythm. */
.scenario-2 .scenario-image { order: 0; }
.scenario-2 .scenario-text { order: 1; }
@media (min-width: 900px) {
.scenario { grid-template-columns: 7fr 5fr; }
.scenario-2 { grid-template-columns: 5fr 7fr; }
.scenario-2 .scenario-image { order: 2; }
.scenario-2 .scenario-text { order: 1; padding-right: clamp(24px, 4vw, 80px); padding-left: 0; }
}
.scenario:last-of-type { margin-bottom: 0; }
.scenario-image {
aspect-ratio: 4 / 3;
background-color: #1a1a1a;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
position: relative;
overflow: hidden;
}
.scenario-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.05);
}
.scenario-placeholder {
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
font-family: var(--display);
font-weight: 300;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(247, 244, 238, .3);
}
.scenario-text {
padding: clamp(8px, 2vw, 32px) 0;
}
.scenario-num {
font-family: var(--display);
font-weight: 300;
font-size: clamp(32px, 3.6vw, 52px);
line-height: 1;
letter-spacing: -.02em;
color: var(--ink);
margin-right: .4em;
vertical-align: baseline;
}
.scenario-q {
font-family: var(--display);
font-weight: 200;
font-size: clamp(26px, 3vw, 44px);
line-height: 1.18;
letter-spacing: -.02em;
color: var(--ink);
}
.scenario-q strong { font-weight: 800; }
.possible-foot {
padding-top: clamp(48px, 6vh, 80px);
border-top: 1px solid var(--line);
display: flex;
justify-content: flex-end;
}
.cta-link {
display: inline-flex;
align-items: center;
gap: 16px;
font-family: var(--display);
font-weight: 400;
font-size: 13px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink);
padding: 12px 0;
border-bottom: 1px solid var(--ink);
transition: gap var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);
}
.cta-link .arrow {
display: inline-block;
transition: transform var(--t-med) var(--ease);
}
.cta-link:hover { gap: 24px; }
.cta-link:hover .arrow { transform: translateX(4px); }
/* ─── SECTION 5 · WHY US ─────────────────── */
.why {
display: flex;
flex-direction: column;
gap: clamp(40px, 6vh, 64px);
}
.why-h {
font-family: var(--display);
font-weight: 200;
font-size: clamp(32px, 4vw, 64px);
line-height: 1.08;
letter-spacing: -.025em;
color: var(--paper);
max-width: 20ch;
}
.why-h strong { font-weight: 800; }
.why-body {
font-family: var(--sans);
font-weight: 300;
font-size: 16px;
line-height: 1.75;
color: rgba(247, 244, 238, .7);
max-width: 56ch;
}
.why-accreds {
margin-top: clamp(24px, 4vh, 48px);
display: flex;
flex-direction: column;
gap: clamp(48px, 6vh, 80px);
}
/* Featured tier — three Make Partner of the Year awards */
.accreds-featured {
display: grid;
grid-template-columns: 1fr;
gap: clamp(32px, 4vh, 56px);
padding-bottom: clamp(40px, 5vh, 64px);
border-bottom: 1px solid var(--line-dark);
}
@media (min-width: 700px) {
.accreds-featured {
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 3vw, 56px);
}
}
.badge {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.badge-img {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.badge-img img {
width: 100%;
max-width: 180px;
height: auto;
display: block;
filter: grayscale(100%) brightness(1.1);
opacity: .85;
transition: opacity var(--t-fast) var(--ease);
}
.badge:hover .badge-img img { opacity: 1; }
.badge-featured .badge-img {
min-height: 140px;
}
.badge-featured .badge-img img { max-width: 160px; }
.badge-placeholder {
width: 140px;
height: 140px;
border: 1px solid var(--line-dark);
align-items: center;
justify-content: center;
font-family: var(--display);
font-weight: 300;
font-size: 14px;
letter-spacing: .08em;
color: rgba(247, 244, 238, .35);
text-transform: uppercase;
}
.badge-cap {
font-family: var(--sans);
font-weight: 300;
font-size: 13px;
line-height: 1.5;
letter-spacing: .01em;
color: rgba(247, 244, 238, .7);
max-width: 22ch;
}
/* Supporting tier — five smaller partnerships */
.accreds-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(28px, 3vw, 40px) clamp(20px, 2vw, 32px);
}
/* When 5 badges sit in a 2-column grid, the 5th is alone on the last row.
Span it across both columns and centre its inner content so it sits centred. */
.accreds-row > :nth-child(5):last-child {
grid-column: 1 / -1;
justify-self: center;
max-width: 50%;
}
@media (min-width: 700px) {
.accreds-row { grid-template-columns: repeat(5, 1fr); }
/* On larger screens the row fills fully, no centering needed */
.accreds-row > :nth-child(5):last-child {
grid-column: auto;
justify-self: stretch;
max-width: none;
}
}
.badge-small {
gap: 12px;
}
.badge-small .badge-img {
min-height: 64px;
}
.badge-small .badge-img img {
max-width: 88px;
opacity: .6;
}
.badge-small:hover .badge-img img { opacity: .9; }
.badge-small .badge-placeholder {
width: 80px;
height: 64px;
font-size: 11px;
}
.badge-cap-small {
font-family: var(--display);
font-weight: 400;
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(247, 244, 238, .55);
line-height: 1.4;
}
/* ─── SECTION 6 · TESTIMONIAL SLIDER ─────── */
.section-testimonial {
padding-top: clamp(80px, 14vh, 160px);
padding-bottom: clamp(80px, 14vh, 160px);
}
.testimonial-title {
font-family: var(--display);
font-weight: 900;
font-size: clamp(36px, 5vw, 72px);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
max-width: 900px;
margin: 0 auto clamp(64px, 9vh, 112px);
text-align: left;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.testimonial-slider {
max-width: 900px;
margin: 0 auto;
position: relative;
}
.testimonial-track {
position: relative;
min-height: 320px;
}
.testimonial.slide {
position: absolute;
inset: 0;
opacity: 0;
transform: scale(1.02);
filter: blur(14px);
visibility: hidden;
transition:
opacity 900ms var(--ease),
transform 1100ms var(--ease),
filter 1000ms var(--ease),
visibility 0s linear 1100ms;
text-align: left;
}
.testimonial.slide.is-active {
opacity: 1;
transform: scale(1);
filter: blur(0);
visibility: visible;
transition:
opacity 900ms var(--ease) 200ms,
transform 1100ms var(--ease) 200ms,
filter 1000ms var(--ease) 200ms,
visibility 0s linear 0s;
}
/* The text inside an entering slide gets a slight cascade reveal */
.testimonial.slide.is-active .testimonial-q {
animation: testimonialIn 1300ms var(--ease) both;
}
.testimonial.slide.is-active .testimonial-attr {
animation: testimonialIn 1300ms var(--ease) both;
animation-delay: 300ms;
}
@keyframes testimonialIn {
from {
opacity: 0;
transform: translateY(12px);
letter-spacing: -.005em;
}
to {
opacity: 1;
transform: translateY(0);
letter-spacing: -.012em;
}
}
.testimonial-q {
font-family: var(--display);
font-weight: 200;
font-size: clamp(22px, 2.4vw, 34px);
line-height: 1.35;
letter-spacing: -.012em;
color: var(--ink);
margin-bottom: clamp(32px, 5vh, 56px);
}
.testimonial-attr {
display: flex;
align-items: baseline;
gap: 16px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.testimonial-name {
font-family: var(--display);
font-weight: 700;
font-size: 14px;
letter-spacing: .04em;
color: var(--ink);
}
.testimonial-co {
font-family: var(--display);
font-weight: 300;
font-size: 13px;
letter-spacing: .04em;
color: var(--mute);
}
.slider-controls {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 24px;
margin-top: clamp(48px, 6vh, 80px);
padding-top: 24px;
border-top: 1px solid var(--line-soft);
}
.slider-btn {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
background: transparent;
color: var(--ink);
font-size: 16px;
cursor: pointer;
transition:
background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
.slider-btn:hover:not(:disabled) {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.slider-btn:disabled {
opacity: .3;
cursor: not-allowed;
}
.slider-count {
font-family: var(--display);
font-weight: 400;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--mute);
min-width: 80px;
text-align: center;
}
.slider-count-sep {
margin: 0 6px;
color: var(--mute-2);
}
/* ─── SECTION 7 · JOURNAL ────────────────── */
.journal-head {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 16px;
margin-bottom: clamp(48px, 8vh, 96px);
padding-bottom: clamp(24px, 4vh, 40px);
border-bottom: 1px solid var(--line);
}
.journal-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(36px, 5vw, 72px);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
}
.journal-all {
font-family: var(--display);
font-weight: 400;
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--mute);
transition: color var(--t-fast) var(--ease);
}
.journal-all:hover { color: var(--ink); }
.journal-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(48px, 6vh, 64px);
}
@media (min-width: 700px) {
.journal-grid { grid-template-columns: repeat(2, 1fr); }
.journal-entry-feature { grid-column: 1 / -1; }
.journal-entry-feature .journal-image { aspect-ratio: 21 / 9; }
}
@media (min-width: 1100px) {
.journal-grid {
grid-template-columns: repeat(12, 1fr);
}
.journal-entry-feature {
grid-column: 1 / 8;
}
.journal-entry-feature .journal-image { aspect-ratio: 4 / 3; }
.journal-entry:not(.journal-entry-feature) {
grid-column: span 3;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.journal-entry:nth-child(2) { grid-column: 9 / 13; }
.journal-entry:nth-child(3) { grid-column: 9 / 13; }
.journal-entry:not(.journal-entry-feature) .journal-image { aspect-ratio: 16 / 9; }
}
.journal-entry {
position: relative;
}
.journal-link {
display: block;
transition: opacity var(--t-fast) var(--ease);
}
.journal-link:hover { opacity: .85; }
.journal-image {
background-color: #1a1a1a;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
position: relative;
overflow: hidden;
margin-bottom: clamp(20px, 3vh, 32px);
}
.journal-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.05);
}
.journal-placeholder {
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
font-family: var(--display);
font-weight: 300;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(247, 244, 238, .3);
}
.journal-meta {
display: flex;
gap: 12px;
align-items: baseline;
margin-bottom: 12px;
}
.journal-cat, .journal-date {
font-family: var(--display);
font-weight: 400;
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--mute);
}
.journal-cat::after {
content: "·";
margin-left: 12px;
color: var(--mute);
}
.journal-title {
font-family: var(--display);
font-weight: 800;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.15;
letter-spacing: -.02em;
color: var(--ink);
margin-bottom: 12px;
}
.journal-entry-feature .journal-title {
font-size: clamp(32px, 3.6vw, 56px);
line-height: 1.05;
}
.journal-dek {
font-family: var(--sans);
font-weight: 300;
font-size: 14px;
line-height: 1.65;
color: var(--ink-soft);
max-width: 48ch;
}
.journal-entry-feature .journal-dek {
font-size: 16px;
max-width: 56ch;
}
/* ─── SECTION 8 · CLOSING CTA ────────────── */
.section-close {
padding-top: clamp(112px, 18vh, 224px);
padding-bottom: clamp(112px, 18vh, 224px);
position: relative;
overflow: hidden;
}
.section-close::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 90% 70% at 30% 0%,
rgba(247, 244, 238, .08) 0%,
transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 100%,
rgba(247, 244, 238, .04) 0%,
transparent 60%);
pointer-events: none;
}
.section-close::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: .4;
pointer-events: none;
mix-blend-mode: overlay;
}
.section-close .section-inner { position: relative; z-index: 1; }
.close {
max-width: 720px;
}
.close-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(52px, 8vw, 128px);
line-height: .95;
letter-spacing: -.035em;
color: var(--paper);
margin-bottom: clamp(24px, 4vh, 40px);
}
.close-sub {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(16px, 1.3vw, 20px);
line-height: 1.6;
color: rgba(247, 244, 238, .7);
margin-bottom: clamp(40px, 6vh, 64px);
max-width: 480px;
}
.close-cta {
display: inline-flex;
align-items: center;
gap: 16px;
font-family: var(--display);
font-weight: 800;
font-size: clamp(20px, 2vw, 32px);
letter-spacing: -.01em;
color: var(--paper);
padding: 16px 0;
border-bottom: 1px solid var(--paper);
transition: gap var(--t-med) var(--ease);
}
.close-cta .arrow {
transition: transform var(--t-med) var(--ease);
}
.close-cta:hover { gap: 28px; }
.close-cta:hover .arrow { transform: translateX(6px); }
/* ─── FOOTER ─────────────────────────────── */
.footer {
background: var(--bk);
color: var(--paper);
padding: clamp(64px, 10vh, 112px) var(--gutter) clamp(32px, 4vh, 56px);
border-top: 1px solid var(--line-dark);
position: relative;
overflow: hidden;
}
.footer::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 100% 80% at 50% 100%,
rgba(247, 244, 238, .025) 0%,
transparent 70%);
pointer-events: none;
}
.footer::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
opacity: .3;
pointer-events: none;
mix-blend-mode: overlay;
}
.footer-inner {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.footer-main {
display: grid;
grid-template-columns: 1fr;
gap: clamp(48px, 8vh, 80px);
padding-bottom: clamp(48px, 6vh, 80px);
margin-bottom: clamp(32px, 4vh, 48px);
border-bottom: 1px solid var(--line-dark);
}
@media (min-width: 900px) {
.footer-main {
grid-template-columns: 1.4fr 2fr;
gap: clamp(64px, 8vw, 128px);
}
}
.footer-brand { max-width: 360px; }
.footer-logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--display);
font-weight: 700;
font-size: 13px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--paper);
margin-bottom: 20px;
}
.footer-logo .nav-logo-mark {
border-color: var(--paper);
color: var(--paper);
}
.footer-tagline {
font-family: var(--sans);
font-weight: 300;
font-size: 13px;
line-height: 1.65;
color: rgba(247, 244, 238, .55);
}
.footer-nav {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(32px, 4vw, 64px);
}
@media (max-width: 540px) {
.footer-nav { grid-template-columns: 1fr; gap: 32px; }
}
.footer-col-h {
font-family: var(--display);
font-weight: 400;
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(247, 244, 238, .45);
margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col li {
font-family: var(--sans);
font-weight: 300;
font-size: 14px;
line-height: 1.7;
color: rgba(247, 244, 238, .8);
padding: 3px 0;
}
.footer-col a {
transition: color var(--t-fast) var(--ease);
}
.footer-col a:hover { color: var(--paper); }
.footer-base {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
/* On mobile, the back-to-top button sits in the bottom-right of the viewport
and can overlap the legal text. Add extra padding-bottom on smaller screens
so the footer extends below the button position. */
@media (max-width: 768px) {
.footer-base { padding-bottom: 72px; }
}
@media (min-width: 700px) {
.footer-base {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.footer-legal {
font-family: var(--display);
font-weight: 400;
font-size: 11px;
letter-spacing: .12em;
color: rgba(247, 244, 238, .4);
}
.footer-dtso {
color: rgba(247, 244, 238, .65);
border-bottom: 1px solid rgba(247, 244, 238, .25);
transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.footer-dtso:hover {
color: var(--paper);
border-bottom-color: var(--paper);
}
.footer-lang {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--display);
font-weight: 400;
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
}
.footer-lang a {
opacity: .55;
transition: opacity var(--t-fast) var(--ease);
}
.footer-lang a.is-active { opacity: 1; }
.footer-lang a:hover { opacity: 1; }
.footer-lang .divider { opacity: .3; }
/* ============================================
ABOUT PAGE
============================================ */
/* ─── ABOUT · FOUNDER NOTE ──────────────── */
.about-founder {
display: grid;
grid-template-columns: 1fr;
gap: clamp(40px, 6vh, 80px);
}
@media (min-width: 900px) {
.about-founder {
grid-template-columns: 5fr 7fr;
gap: clamp(56px, 7vw, 112px);
}
}
.founder-eyebrow {
/* Re-using a tracking-out label here is fine — it's a section marker for a
long, structural page, not a decorative eyebrow. Functional, not ornamental. */
font-family: var(--display);
font-weight: 400;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--mute);
}
.founder-h {
font-family: var(--display);
font-weight: 200;
font-size: clamp(32px, 4vw, 60px);
line-height: 1.08;
letter-spacing: -.025em;
color: var(--ink);
margin-top: 24px;
max-width: 14ch;
}
.founder-body {
font-family: var(--sans);
font-weight: 300;
font-size: 15px;
line-height: 1.85;
color: var(--ink-soft);
max-width: 56ch;
}
.founder-body p + p { margin-top: 1.4em; }
.founder-body em { font-style: italic; color: var(--ink); }
.founder-three-h {
font-family: var(--display);
font-weight: 200;
font-size: clamp(26px, 3vw, 38px);
line-height: 1.18;
letter-spacing: -.02em;
color: var(--ink);
margin: clamp(48px, 6vh, 72px) 0 clamp(24px, 3vh, 32px);
}
.founder-three-h strong { font-weight: 800; }
.founder-three-list {
list-style: none;
display: flex;
flex-direction: column;
gap: clamp(28px, 3vh, 40px);
}
.founder-three-list li {
display: grid;
grid-template-columns: 56px 1fr;
gap: clamp(16px, 2vw, 32px);
align-items: baseline;
font-family: var(--sans);
font-weight: 300;
font-size: 15px;
line-height: 1.75;
color: var(--ink-soft);
}
.founder-three-list .three-num {
font-family: var(--display);
font-weight: 200;
font-size: clamp(32px, 3.6vw, 52px);
line-height: 1;
letter-spacing: -.02em;
color: var(--ink);
}
.founder-three-list .three-text strong {
font-weight: 800;
color: var(--ink);
}
.founder-closing {
margin-top: clamp(48px, 6vh, 72px);
padding-top: clamp(24px, 3vh, 32px);
border-top: 1px solid var(--line);
font-family: var(--display);
font-weight: 200;
font-size: clamp(18px, 1.8vw, 24px);
line-height: 1.4;
letter-spacing: -.012em;
color: var(--ink);
font-style: italic;
}
/* ─── ABOUT · TEAM CARDS ─────────────────── */
.team-intro {
margin-bottom: clamp(64px, 9vh, 112px);
max-width: 720px;
}
.team-intro-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(40px, 5vw, 72px);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
margin-bottom: 24px;
}
.team-intro-sub {
font-family: var(--sans);
font-weight: 300;
font-size: 16px;
line-height: 1.7;
color: var(--mute);
max-width: 540px;
text-wrap: pretty;
}
.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(48px, 6vh, 80px);
}
@media (min-width: 800px) {
.team-grid {
grid-template-columns: repeat(2, 1fr);
gap: clamp(40px, 4vw, 80px);
}
}
.team-card {
display: flex;
flex-direction: column;
}
.team-portrait {
aspect-ratio: 1 / 1;
max-width: 252px;
width: 100%;
background-color: #1a1a1a;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
position: relative;
overflow: hidden;
margin-bottom: clamp(24px, 4vh, 40px);
}
.team-portrait img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.05);
}
.team-portrait-placeholder {
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
font-family: var(--display);
font-weight: 300;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(247, 244, 238, .3);
}
.team-name {
font-family: var(--display);
font-weight: 900;
font-size: clamp(28px, 3vw, 44px);
line-height: 1;
letter-spacing: -.025em;
color: var(--ink);
margin-bottom: 8px;
}
.team-role {
font-family: var(--display);
font-weight: 400;
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--mute);
margin-bottom: clamp(20px, 2.5vh, 28px);
}
.team-bio {
font-family: var(--sans);
font-weight: 300;
font-size: 15px;
line-height: 1.8;
color: var(--ink-soft);
max-width: 50ch;
}
/* ─── ABOUT · PARTNERSHIP SECTION ────────── */
.partnership {
display: grid;
grid-template-columns: 1fr;
gap: clamp(40px, 6vh, 64px);
}
@media (min-width: 900px) {
.partnership {
grid-template-columns: 5fr 7fr;
gap: clamp(56px, 7vw, 112px);
}
}
.partnership-h {
font-family: var(--display);
font-weight: 200;
font-size: clamp(32px, 4vw, 56px);
line-height: 1.08;
letter-spacing: -.025em;
color: var(--paper);
max-width: 14ch;
}
.partnership-h strong { font-weight: 800; }
.partnership-body {
font-family: var(--sans);
font-weight: 300;
font-size: 15px;
line-height: 1.85;
color: rgba(247, 244, 238, .75);
max-width: 56ch;
}
.partnership-body p + p { margin-top: 1.4em; }
.partnership-body em { font-style: italic; color: var(--paper); }
.partnership-quote {
font-family: var(--display);
font-weight: 200;
font-size: clamp(20px, 2.2vw, 30px);
line-height: 1.3;
letter-spacing: -.015em;
color: var(--paper);
margin-top: clamp(40px, 5vh, 56px);
padding-top: clamp(24px, 3vh, 32px);
border-top: 1px solid var(--line-dark);
font-style: italic;
}
/* Badges block sits below the partnership grid */
.partnership-accreds {
margin-top: clamp(64px, 9vh, 112px);
padding-top: clamp(48px, 6vh, 80px);
border-top: 1px solid var(--line-dark);
display: flex;
flex-direction: column;
gap: clamp(48px, 6vh, 80px);
}
/* ─── PARALLAX STRIP ─────────────────────── */
/* A subtle photographic break between sections.
The image is fixed in viewport while the section scrolls past, creating a
parallax effect. The section itself is short (50vh) so the image always feels
like a glimpse, never a full hero. Grain texture fallback if image missing. */
.parallax-strip {
position: relative;
height: 50vh;
min-height: 320px;
overflow: hidden;
background-color: var(--bk);
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
display: flex;
align-items: center;
justify-content: center;
}
.parallax-strip-img {
position: absolute;
inset: -20% 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
filter: grayscale(100%) contrast(1.05) brightness(.6);
/* If the URL fails, the strip just shows the grain backdrop underneath */
}
.parallax-strip-overlay {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 70% at 50% 50%,
rgba(10, 10, 10, .45) 0%,
rgba(10, 10, 10, .75) 100%);
pointer-events: none;
}
.parallax-strip-content {
position: relative;
z-index: 1;
padding: 0 var(--gutter);
max-width: 1200px;
margin: 0 auto;
text-align: center;
width: 100%;
}
.parallax-quote {
font-family: var(--display);
font-weight: 200;
font-size: clamp(28px, 4vw, 60px);
line-height: 1.1;
letter-spacing: -.025em;
color: var(--paper);
text-wrap: balance;
}
.parallax-strip-quote {
height: 60vh;
min-height: 400px;
}
/* On mobile, background-attachment: fixed has performance / iOS bug issues.
Fall back to scroll so the image still shows but without parallax. */
@media (max-width: 900px) {
.parallax-strip-img { background-attachment: scroll; }
.parallax-strip { height: 40vh; min-height: 280px; }
.parallax-strip-quote { height: 50vh; min-height: 360px; }
}
/* ─── DARK SECTION BACKGROUND IMAGES ──────── */
/* Optional background image slots for dark sections. If an image is supplied
via inline style, it appears with grain layered over it. If not, the section
simply uses the existing grain treatment with no break in design. */
.section.is-dark[data-bg-img] {
background-image: var(--bg-img);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.section.is-dark[data-bg-img]::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(10, 10, 10, .82) 0%,
rgba(10, 10, 10, .9) 100%);
pointer-events: none;
}
.section.is-dark[data-bg-img] .section-inner { position: relative; z-index: 1; }
/* ─── BACK TO TOP ─────────────────────────── */
.back-to-top {
position: fixed;
bottom: clamp(20px, 3vh, 32px);
right: clamp(20px, 3vw, 32px);
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: rgba(10, 10, 10, .85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--paper);
font-family: var(--display);
font-weight: 400;
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
border: 1px solid var(--line-dark);
cursor: pointer;
z-index: 90;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition:
opacity var(--t-med) var(--ease),
transform var(--t-med) var(--ease),
visibility 0s linear var(--t-med),
background var(--t-fast) var(--ease);
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition:
opacity var(--t-med) var(--ease),
transform var(--t-med) var(--ease),
visibility 0s linear 0s,
background var(--t-fast) var(--ease);
}
.back-to-top:hover { background: var(--bk); }
.back-to-top-arrow {
display: flex;
align-items: center;
justify-content: center;
}
.back-to-top-arrow svg {
width: 12px;
height: 12px;
}
/* ─── ABOUT · WHO WE'RE FOR ─────────────── */
.whofor {
display: grid;
grid-template-columns: 1fr;
gap: clamp(40px, 6vh, 64px);
}
@media (min-width: 900px) {
.whofor {
grid-template-columns: 5fr 7fr;
gap: clamp(56px, 7vw, 112px);
}
}
.whofor-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(40px, 5vw, 72px);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
max-width: 12ch;
}
.whofor-body {
font-family: var(--sans);
font-weight: 300;
font-size: 15px;
line-height: 1.85;
color: var(--ink-soft);
max-width: 56ch;
}
.whofor-body p + p { margin-top: 1.4em; }
.whofor-cta {
font-family: var(--display);
font-weight: 800;
font-size: clamp(20px, 2.2vw, 30px);
line-height: 1.35;
letter-spacing: -.015em;
color: var(--ink);
margin-top: clamp(32px, 4vh, 48px);
padding-top: clamp(24px, 3vh, 32px);
border-top: 1px solid var(--line);
}
/* ─── ABOUT · PROCESS (Layout B) ─────────── */
.process-intro {
margin-bottom: clamp(64px, 9vh, 112px);
max-width: 720px;
}
.process-intro-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(40px, 5vw, 72px);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
margin-bottom: 12px;
}
.process-intro-sub {
font-family: var(--display);
font-weight: 300;
font-style: italic;
font-size: clamp(16px, 1.5vw, 22px);
line-height: 1.5;
color: var(--mute);
}
.process-stage {
padding: clamp(64px, 9vh, 112px) 0;
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: 1fr;
gap: clamp(32px, 4vh, 56px);
}
.process-stage:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
.process-stage {
grid-template-columns: 4fr 8fr;
gap: clamp(48px, 6vw, 96px);
align-items: baseline;
}
}
.process-stage-head {
display: flex;
flex-direction: column;
gap: 16px;
}
.process-stage-num {
font-family: var(--display);
font-weight: 200;
font-size: clamp(64px, 8vw, 128px);
line-height: 1;
letter-spacing: -.04em;
color: var(--ink);
}
.process-stage-name {
font-family: var(--display);
font-weight: 800;
font-size: clamp(28px, 3vw, 42px);
line-height: 1.1;
letter-spacing: -.025em;
color: var(--ink);
}
.process-stage-body {
font-family: var(--sans);
font-weight: 300;
font-size: 15px;
line-height: 1.85;
color: var(--ink-soft);
max-width: 56ch;
}
.process-stage-body p + p { margin-top: 1.4em; }
.process-stage-body em { font-style: italic; color: var(--ink); }
/* ─── ABOUT · FAQS ────────────────────────── */
.faqs-intro {
margin-bottom: clamp(48px, 7vh, 96px);
max-width: 720px;
}
.faqs-intro-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(40px, 5vw, 72px);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
}
.faqs-list {
border-top: 1px solid var(--line);
}
.faq {
border-bottom: 1px solid var(--line);
}
.faq-q {
width: 100%;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: clamp(28px, 4vh, 40px) 0;
font-family: var(--display);
font-weight: 400;
font-size: clamp(18px, 2vw, 26px);
line-height: 1.3;
letter-spacing: -.015em;
color: var(--ink);
cursor: pointer;
transition: color var(--t-fast) var(--ease);
}
.faq-q:hover { color: var(--mute); }
.faq.is-open .faq-q { font-weight: 800; }
.faq-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--t-med) var(--ease);
}
.faq.is-open .faq-icon { transform: rotate(180deg); }
.faq-icon svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 1.5;
fill: none;
}
.faq-a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--t-med) var(--ease);
}
.faq.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner {
overflow: hidden;
font-family: var(--sans);
font-weight: 300;
font-size: 15px;
line-height: 1.85;
color: var(--ink-soft);
max-width: 60ch;
}
.faq-a-inner p {
padding-bottom: clamp(24px, 3vh, 36px);
}
.faq-a-inner em { font-style: italic; color: var(--ink); }
.faq-a-inner strong { font-weight: 900; color: var(--ink); }
/* ============================================
CONTACT PAGE
============================================ */
/* ─── CONTACT HERO (dark with grain) ──────────── */
.contact-hero {
position: relative;
min-height: 60vh;
width: 100%;
overflow: hidden;
background-color: var(--bk);
color: var(--paper);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: calc(var(--nav-h) + clamp(80px, 14vh, 160px)) var(--gutter) clamp(64px, 10vh, 120px);
}
.contact-hero-media {
position: absolute;
inset: 0;
z-index: 0;
background-color: var(--bk);
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
}
.contact-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.08) brightness(.65);
}
.contact-hero-media::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 90% 70% at 30% 0%, rgba(247, 244, 238, .06) 0%, transparent 60%),
linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.2) 30%, rgba(10,10,10,.7) 100%);
pointer-events: none;
}
.contact-hero-inner {
position: relative;
z-index: 2;
max-width: 1600px;
width: 100%;
}
.contact-hero-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(56px, 9vw, 144px);
line-height: .95;
letter-spacing: -.035em;
color: var(--paper);
margin-bottom: clamp(24px, 3vh, 40px);
text-wrap: balance;
}
/* Narrow viewports: scale down for long words like "conversation" */
@media (max-width: 480px) {
.contact-hero-h {
font-size: clamp(48px, 12vw, 80px);
word-wrap: break-word;
overflow-wrap: break-word;
}
}
.contact-hero-sub {
font-family: var(--display);
font-weight: 200;
font-style: italic;
font-size: clamp(18px, 2vw, 28px);
line-height: 1.3;
letter-spacing: -.015em;
color: rgba(247, 244, 238, .75);
max-width: 40ch;
text-wrap: pretty;
}
/* ─── CHANNELS STRIP ────────────────────────── */
.contact-channels-strip {
padding: clamp(64px, 9vh, 112px) var(--gutter);
border-bottom: 1px solid var(--line);
}
.contact-channels-strip.is-warm {
background: var(--paper-warm);
}
.channels-row {
display: grid;
grid-template-columns: 1fr;
gap: clamp(24px, 3vh, 40px);
}
@media (min-width: 800px) {
.channels-row {
grid-template-columns: repeat(3, 1fr);
gap: clamp(32px, 4vw, 64px);
}
}
/* Each channel link is an editorial row with arrow-slide hover */
.channel-link-row {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 4px 0;
cursor: pointer;
position: relative;
}
.channel-link-row-static { cursor: default; }
.channel-link-arrow {
display: inline-block;
font-family: var(--display);
font-size: 16px;
font-weight: 300;
color: var(--mute);
line-height: 1.4;
flex-shrink: 0;
width: 22px;
/* The arrow sits idle, slides on hover. Uses opacity + translateX combo so it
enters from the left visually but never reflows the layout. */
opacity: 0;
transform: translateX(-12px);
transition:
opacity var(--t-med) var(--ease),
transform var(--t-med) var(--ease),
color var(--t-fast) var(--ease);
}
.channel-link-row:not(.channel-link-row-static):hover .channel-link-arrow,
.channel-link-row:not(.channel-link-row-static):focus-visible .channel-link-arrow {
opacity: 1;
transform: translateX(0);
color: var(--ink);
}
/* The hidden arrow on the static Response row exists for spacing alignment
with the active rows above. Keep it permanently invisible. */
.channel-link-arrow-hidden { visibility: hidden; }
.channel-link-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
transition: transform var(--t-med) var(--ease);
}
.channel-link-row:not(.channel-link-row-static):hover .channel-link-content {
transform: translateX(4px);
}
.channel-link-label {
font-family: var(--display);
font-weight: 400;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--mute);
}
.channel-link-value {
font-family: var(--display);
font-weight: 800;
font-size: clamp(18px, 1.8vw, 24px);
line-height: 1.25;
letter-spacing: -.012em;
color: var(--ink);
position: relative;
display: inline-block;
align-self: flex-start;
/* The underline draws itself from left-to-right on hover.
Pseudo-element sits beneath the text, scales from transform-origin: left. */
}
.channel-link-row:not(.channel-link-row-static) .channel-link-value::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 1px;
background: var(--ink);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--t-med) var(--ease);
}
.channel-link-row:not(.channel-link-row-static):hover .channel-link-value::after,
.channel-link-row:not(.channel-link-row-static):focus-visible .channel-link-value::after {
transform: scaleX(1);
}
.channel-link-value-quiet {
font-weight: 300;
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.45;
color: var(--ink-soft);
font-family: var(--sans);
}
/* ─── FORM SECTION ─────────────────────────── */
.contact-form-section {
padding-top: clamp(80px, 12vh, 160px);
padding-bottom: clamp(112px, 18vh, 224px);
}
.contact-form-stage {
max-width: 720px;
margin: 0 auto;
}
.contact-form-head {
margin-bottom: clamp(48px, 7vh, 96px);
text-align: left;
}
.contact-form-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(36px, 5vw, 64px);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
margin-bottom: 16px;
}
.contact-form-sub {
font-family: var(--display);
font-weight: 200;
font-style: italic;
font-size: clamp(16px, 1.6vw, 22px);
line-height: 1.4;
color: var(--mute);
}
.contact-form {
display: flex;
flex-direction: column;
gap: clamp(36px, 5vh, 56px);
}
.field {
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.field label {
font-family: var(--display);
font-weight: 400;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--mute);
transition: color var(--t-fast) var(--ease);
}
.field-optional {
letter-spacing: .04em;
text-transform: none;
color: var(--mute-2);
}
.field input,
.field textarea {
font-family: var(--sans);
font-weight: 300;
font-size: 16px;
line-height: 1.5;
color: var(--ink);
background: transparent;
border: 0;
border-bottom: 1px solid var(--line);
padding: 12px 0;
outline: none;
width: 100%;
resize: vertical;
position: relative;
z-index: 1;
}
.field textarea { min-height: 120px; }
/* Animated underline: a second line element sits below the static border.
On focus it draws itself from left to right. */
.field-underline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--ink);
transform: scaleX(0);
transform-origin: left center;
transition: transform 400ms var(--ease);
pointer-events: none;
z-index: 2;
}
.field:has(input:focus) .field-underline,
.field:has(textarea:focus) .field-underline {
transform: scaleX(1);
}
.field:has(input:focus) label,
.field:has(textarea:focus) label {
color: var(--ink);
}
.contact-submit {
display: inline-flex;
align-items: center;
gap: 16px;
background: var(--ink);
color: var(--paper);
font-family: var(--display);
font-weight: 800;
font-size: 15px;
letter-spacing: .04em;
padding: 20px 32px;
margin-top: clamp(16px, 2vh, 24px);
align-self: flex-start;
cursor: pointer;
border: 1px solid var(--ink);
transition:
background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.contact-submit-label {
display: inline-flex;
gap: 0;
}
.contact-submit-label > span {
display: inline-block;
transition: transform 300ms var(--ease);
}
/* Each letter lifts 2px on hover, staggered 30ms apart, creating a typographic
wave that moves left-to-right across the label. */
.contact-submit:hover .contact-submit-label > span { transform: translateY(-2px); }
.contact-submit:hover .contact-submit-label > span:nth-child(1) { transition-delay: 0ms; }
.contact-submit:hover .contact-submit-label > span:nth-child(2) { transition-delay: 30ms; }
.contact-submit:hover .contact-submit-label > span:nth-child(3) { transition-delay: 60ms; }
.contact-submit:hover .contact-submit-label > span:nth-child(4) { transition-delay: 90ms; }
.contact-submit:hover .contact-submit-label > span:nth-child(5) { transition-delay: 120ms; }
.contact-submit:hover .contact-submit-label > span:nth-child(6) { transition-delay: 150ms; }
.contact-submit:hover .contact-submit-label > span:nth-child(7) { transition-delay: 180ms; }
.contact-submit:hover .contact-submit-label > span:nth-child(8) { transition-delay: 210ms; }
.contact-submit:hover .contact-submit-label > span:nth-child(9) { transition-delay: 240ms; }
.contact-submit:hover .contact-submit-label > span:nth-child(10) { transition-delay: 270ms; }
.contact-submit:hover .contact-submit-label > span:nth-child(11) { transition-delay: 300ms; }
.contact-submit:hover .contact-submit-label > span:nth-child(12) { transition-delay: 330ms; }
.contact-submit .arrow {
display: inline-block;
/* Arrow translates after the letter wave finishes, so it punctuates the end
of the animation rather than competing with it. */
transition: transform 400ms var(--ease) 350ms;
}
.contact-submit:hover .arrow { transform: translateX(6px); }
/* Honeypot field — hidden from humans, visible to bots that auto-fill forms.
If this field gets a value on submit, Web3Forms rejects the submission. */
.honeypot {
position: absolute !important;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
/* Form status message — appears after submit attempts */
.form-status {
font-family: var(--sans);
font-weight: 300;
font-size: 14px;
line-height: 1.5;
margin-top: 16px;
min-height: 1.5em;
color: var(--mute);
transition: color var(--t-fast) var(--ease);
}
.form-status.is-success { color: var(--ink); }
.form-status.is-error { color: #b94c4c; }
.form-status.is-loading { color: var(--mute); font-style: italic; }
/* ============================================
JOURNAL INDEX PAGE
============================================ */
.journal-hero {
/* Inherits .hero base styles. Just a slightly shorter min-height since
this isn't a homepage hero. */
min-height: 540px;
}
.section-journal-list {
padding-top: clamp(96px, 14vh, 176px);
padding-bottom: clamp(96px, 14vh, 176px);
}
.journal-list {
display: flex;
flex-direction: column;
gap: clamp(56px, 8vh, 96px);
}
/* Each entry is a row. Featured (first/latest) entry gets larger treatment.
The entries stagger left/right via :nth-child to give the list visual rhythm. */
.journal-row {
position: relative;
}
.journal-row-link {
display: grid;
grid-template-columns: 1fr;
gap: clamp(24px, 4vh, 48px);
align-items: center;
text-decoration: none;
color: inherit;
transition: opacity var(--t-fast) var(--ease);
}
.journal-row-link:hover { opacity: .88; }
@media (min-width: 800px) {
.journal-row-link {
grid-template-columns: 5fr 7fr;
gap: clamp(48px, 6vw, 96px);
}
/* Stagger every other entry to the opposite side for visual rhythm. */
.journal-row:nth-child(even) .journal-row-link {
grid-template-columns: 7fr 5fr;
}
.journal-row:nth-child(even) .journal-row-image { order: 2; }
.journal-row:nth-child(even) .journal-row-content { order: 1; }
}
/* The featured/latest entry gets larger imagery and bigger title. */
.journal-row-feature .journal-row-link {
grid-template-columns: 1fr;
}
@media (min-width: 800px) {
.journal-row-feature .journal-row-link {
grid-template-columns: 6fr 6fr;
}
}
.journal-row-image {
aspect-ratio: 4 / 3;
background-color: #1a1a1a;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
position: relative;
overflow: hidden;
}
.journal-row-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.05);
transition: transform 700ms var(--ease);
}
.journal-row-link:hover .journal-row-image img {
transform: scale(1.03);
}
.journal-row-feature .journal-row-image {
aspect-ratio: 5 / 4;
}
.journal-row-content {
display: flex;
flex-direction: column;
position: relative;
}
.journal-meta {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: clamp(16px, 2vh, 24px);
flex-wrap: wrap;
}
.journal-meta > span {
font-family: var(--display);
font-weight: 400;
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--mute);
}
.journal-meta > span + span::before {
content: "·";
margin-right: 14px;
color: var(--mute-2);
}
.journal-readtime {
color: var(--mute-2);
}
.journal-row-title {
font-family: var(--display);
font-weight: 900;
font-size: clamp(32px, 4vw, 56px);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
margin-bottom: clamp(16px, 2vh, 24px);
text-wrap: balance;
}
.journal-row-feature .journal-row-title {
font-size: clamp(40px, 5.5vw, 80px);
}
.journal-row-dek {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.7;
color: var(--ink-soft);
max-width: 52ch;
margin-bottom: clamp(20px, 3vh, 32px);
text-wrap: pretty;
}
.journal-row-arrow {
font-family: var(--display);
font-weight: 300;
font-size: 18px;
color: var(--ink);
display: inline-block;
opacity: 0;
transform: translateX(-8px);
transition:
opacity var(--t-med) var(--ease),
transform var(--t-med) var(--ease);
align-self: flex-start;
}
.journal-row-link:hover .journal-row-arrow {
opacity: 1;
transform: translateX(0);
}
.journal-placeholder {
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
font-family: var(--display);
font-weight: 300;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(247, 244, 238, .3);
}
/* Load more — currently hidden until needed */
.journal-loadmore {
display: flex;
justify-content: center;
margin-top: clamp(64px, 9vh, 112px);
padding-top: clamp(48px, 6vh, 80px);
border-top: 1px solid var(--line);
}
.loadmore-btn {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 18px 36px;
border: 1px solid var(--ink);
background: transparent;
color: var(--ink);
font-family: var(--display);
font-weight: 400;
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
cursor: pointer;
transition:
background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
gap var(--t-med) var(--ease);
}
.loadmore-btn:hover {
background: var(--ink);
color: var(--paper);
gap: 22px;
}
.loadmore-btn .arrow {
transition: transform var(--t-med) var(--ease);
}
.loadmore-btn:hover .arrow { transform: translateY(2px); }
/* ============================================
JOURNAL ENTRY PAGE
============================================ */
/* Entry hero — shorter than the page hero, content-led, on dark with grain */
.entry-hero {
position: relative;
width: 100%;
overflow: hidden;
background-color: var(--bk);
color: var(--paper);
padding: calc(var(--nav-h) + clamp(96px, 14vh, 160px)) var(--gutter) clamp(80px, 12vh, 144px);
}
.entry-hero-media {
position: absolute;
inset: 0;
z-index: 0;
background-color: var(--bk);
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
}
.entry-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.05) brightness(.55);
}
.entry-hero-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(10,10,10,.5) 0%,
rgba(10,10,10,.3) 40%,
rgba(10,10,10,.85) 100%);
pointer-events: none;
}
.entry-hero-inner {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto;
}
.entry-breadcrumb {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--display);
font-weight: 400;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(247, 244, 238, .6);
margin-bottom: clamp(32px, 5vh, 48px);
}
.entry-breadcrumb a {
color: var(--paper);
border-bottom: 1px solid rgba(247, 244, 238, .3);
padding-bottom: 2px;
transition: border-color var(--t-fast) var(--ease);
}
.entry-breadcrumb a:hover {
border-bottom-color: var(--paper);
}
.entry-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(48px, 8vw, 128px);
line-height: .95;
letter-spacing: -.035em;
color: var(--paper);
margin-bottom: clamp(24px, 4vh, 40px);
text-wrap: balance;
}
.entry-dek {
font-family: var(--display);
font-weight: 200;
font-style: italic;
font-size: clamp(18px, 2.2vw, 28px);
line-height: 1.35;
letter-spacing: -.015em;
color: rgba(247, 244, 238, .85);
max-width: 36ch;
margin-bottom: clamp(32px, 5vh, 48px);
text-wrap: pretty;
}
.entry-meta {
display: flex;
align-items: baseline;
gap: 14px;
font-family: var(--display);
font-weight: 400;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(247, 244, 238, .55);
}
.entry-meta .entry-sep {
color: rgba(247, 244, 238, .35);
}
/* Article body — narrow reading column, generous typography */
.entry-body {
padding: clamp(80px, 12vh, 160px) var(--gutter);
background: var(--paper);
}
.entry-stage {
max-width: 720px;
margin: 0 auto;
}
.entry-section {
margin-bottom: clamp(48px, 7vh, 80px);
}
.entry-section:last-child { margin-bottom: 0; }
.entry-h2 {
font-family: var(--display);
font-weight: 800;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.1;
letter-spacing: -.025em;
color: var(--ink);
margin-bottom: clamp(24px, 3vh, 36px);
text-wrap: balance;
}
/* Lede — the article's opening paragraph gets slightly heavier treatment */
.entry-lede {
font-family: var(--display);
font-weight: 300;
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.4;
letter-spacing: -.015em;
color: var(--ink);
margin-bottom: clamp(24px, 3vh, 36px);
text-wrap: pretty;
}
.entry-section p {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(16px, 1.4vw, 18px);
line-height: 1.75;
color: var(--ink-soft);
margin-bottom: 1.2em;
text-wrap: pretty;
}
.entry-section p:last-child { margin-bottom: 0; }
.entry-section p em { font-style: italic; color: var(--ink); }
.entry-section p strong { font-weight: 900; color: var(--ink); }
.entry-section p em { font-style: italic; color: var(--ink); }
.entry-inline-link {
color: var(--ink);
border-bottom: 1px solid var(--line);
padding-bottom: 1px;
transition: border-color var(--t-fast) var(--ease);
}
.entry-inline-link:hover { border-bottom-color: var(--ink); }
.entry-closing p {
font-family: var(--display);
font-weight: 300;
font-size: clamp(20px, 2vw, 26px);
line-height: 1.4;
letter-spacing: -.015em;
color: var(--ink);
}
.entry-closing p em {
font-style: italic;
color: var(--ink);
}
/* Image breaks between sections — full-width, atmospheric */
.entry-image {
margin: clamp(64px, 9vh, 112px) calc(50% - 50vw);
/* Negative margin to break out of the reading column to full viewport width */
}
.entry-image-frame {
width: 100vw;
max-width: 1400px;
margin: 0 auto;
aspect-ratio: 21 / 9;
background-color: #1a1a1a;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
position: relative;
overflow: hidden;
}
.entry-image-frame img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.05);
}
.entry-image-placeholder {
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
font-family: var(--display);
font-weight: 300;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(247, 244, 238, .3);
}
@media (max-width: 900px) {
.entry-image-frame { aspect-ratio: 4 / 3; }
}
/* Pull quote — sits inside the reading flow but breaks the rhythm visually */
.entry-pullquote {
margin: clamp(48px, 7vh, 80px) 0;
padding: clamp(32px, 4vh, 48px) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.entry-pullquote p {
font-family: var(--display);
font-weight: 200;
font-size: clamp(24px, 3vw, 40px);
line-height: 1.2;
letter-spacing: -.02em;
color: var(--ink);
text-wrap: balance;
font-style: italic;
}
/* Article CTA — between body and related entries */
.entry-cta {
padding: clamp(64px, 9vh, 112px) var(--gutter);
background: var(--paper);
border-top: 1px solid var(--line);
text-align: center;
}
.entry-cta-line {
font-family: var(--display);
font-weight: 800;
font-size: clamp(22px, 2.6vw, 36px);
line-height: 1.25;
letter-spacing: -.02em;
color: var(--ink);
margin-bottom: clamp(24px, 3vh, 32px);
max-width: 24ch;
margin-left: auto;
margin-right: auto;
text-wrap: balance;
}
.entry-cta .cta-link {
justify-content: center;
}
/* Related entries footer */
.section-related {
padding: clamp(96px, 14vh, 160px) var(--gutter);
}
.related-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(32px, 4vw, 56px);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
margin-bottom: clamp(48px, 7vh, 80px);
padding-bottom: clamp(24px, 3vh, 32px);
border-bottom: 1px solid var(--line);
}
.related-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(48px, 6vh, 64px);
margin-bottom: clamp(64px, 9vh, 96px);
}
@media (min-width: 700px) {
.related-grid {
grid-template-columns: repeat(2, 1fr);
gap: clamp(40px, 5vw, 80px);
}
}
.related-entry {
position: relative;
}
.related-link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: opacity var(--t-fast) var(--ease);
}
.related-link:hover { opacity: .88; }
.related-image {
aspect-ratio: 16 / 9;
background-color: #1a1a1a;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
position: relative;
overflow: hidden;
margin-bottom: clamp(20px, 3vh, 28px);
}
.related-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.05);
transition: transform 700ms var(--ease);
}
.related-link:hover .related-image img {
transform: scale(1.03);
}
.related-meta {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 12px;
}
.related-meta > span {
font-family: var(--display);
font-weight: 400;
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--mute);
}
.related-meta > span + span::before {
content: "·";
margin-right: 14px;
color: var(--mute-2);
}
.related-title {
font-family: var(--display);
font-weight: 800;
font-size: clamp(24px, 2.6vw, 36px);
line-height: 1.1;
letter-spacing: -.025em;
color: var(--ink);
margin-bottom: 12px;
}
.related-dek {
font-family: var(--sans);
font-weight: 300;
font-size: 15px;
line-height: 1.65;
color: var(--ink-soft);
max-width: 48ch;
}
.related-back {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--display);
font-weight: 400;
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink);
padding-top: clamp(32px, 4vh, 48px);
border-top: 1px solid var(--line);
width: 100%;
transition: gap var(--t-med) var(--ease);
}
.related-back:hover { gap: 18px; }
.related-back .arrow {
transition: transform var(--t-med) var(--ease);
}
.related-back:hover .arrow { transform: translateX(-4px); }
/* ============================================
WHAT'S POSSIBLE PAGE
============================================ */
.section-possible-full {
padding-top: clamp(96px, 14vh, 176px);
padding-bottom: clamp(96px, 14vh, 176px);
}
.possible-scenario {
display: grid;
grid-template-columns: 1fr;
gap: clamp(32px, 5vw, 80px);
margin-bottom: clamp(96px, 14vh, 176px);
align-items: center;
}
.possible-scenario:last-of-type { margin-bottom: 0; }
/* Mobile: force image-then-text stacking regardless of HTML source order */
.possible-scenario-flip .possible-scenario-image { order: 0; }
.possible-scenario-flip .possible-scenario-text { order: 1; }
@media (min-width: 900px) {
.possible-scenario {
grid-template-columns: 6fr 6fr;
}
/* Flip variant: text left, image right */
.possible-scenario-flip {
grid-template-columns: 6fr 6fr;
}
.possible-scenario-flip .possible-scenario-image { order: 2; }
.possible-scenario-flip .possible-scenario-text {
order: 1;
padding-right: 0;
}
}
.possible-scenario-image {
aspect-ratio: 4 / 3;
background-color: #1a1a1a;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
position: relative;
overflow: hidden;
}
.possible-scenario-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.05);
}
.possible-scenario-text {
padding: clamp(8px, 2vw, 32px) 0;
display: flex;
flex-direction: column;
gap: clamp(20px, 3vh, 32px);
}
/* The question sits at scenario-q size — same as homepage but tighter
since it shares column with the body paragraph beneath it */
.possible-scenario-text .scenario-q {
font-family: var(--display);
font-weight: 200;
font-size: clamp(24px, 2.6vw, 36px);
line-height: 1.2;
letter-spacing: -.02em;
color: var(--ink);
text-wrap: pretty;
}
.possible-scenario-text .scenario-q strong { font-weight: 800; }
.possible-scenario-text .scenario-num {
font-family: var(--display);
font-weight: 300;
font-size: clamp(28px, 3vw, 44px);
line-height: 1;
letter-spacing: -.02em;
color: var(--ink);
margin-right: .4em;
vertical-align: baseline;
}
/* Scenario body — sits beneath the question, describes the actual automation */
.scenario-body {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.75;
color: var(--ink-soft);
max-width: 50ch;
text-wrap: pretty;
}
.scenario-body strong { font-weight: 900; color: var(--ink); }
/* ============================================
AI SEARCH OPTIMIZATION PAGE
============================================ */
/* ─── THE SHIFT (editorial open) ──────────── */
.section-shift {
padding-top: clamp(112px, 16vh, 192px);
padding-bottom: clamp(96px, 14vh, 160px);
}
.shift-stage {
max-width: 880px;
margin: 0 auto;
}
.shift-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(36px, 5vw, 72px);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
margin-bottom: clamp(40px, 6vh, 64px);
text-wrap: balance;
max-width: 18ch;
}
.shift-body {
max-width: 65ch;
}
.shift-body p {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(16px, 1.4vw, 18px);
line-height: 1.75;
color: var(--ink-soft);
margin-bottom: 1.4em;
text-wrap: pretty;
}
.shift-body p:last-child { margin-bottom: 0; }
.shift-body em { font-style: italic; color: var(--ink); }
.shift-body strong { font-weight: 900; color: var(--ink); }
.shift-lede {
font-family: var(--display) !important;
font-weight: 300 !important;
font-size: clamp(20px, 2.2vw, 28px) !important;
line-height: 1.4 !important;
letter-spacing: -.015em;
color: var(--ink) !important;
margin-bottom: 1.4em !important;
}
/* ─── METHODOLOGY (5 stages) ───────────────── */
.section-methodology {
padding-top: clamp(112px, 16vh, 192px);
padding-bottom: clamp(112px, 16vh, 192px);
}
.methodology-intro {
max-width: 720px;
margin-bottom: clamp(80px, 12vh, 144px);
}
.methodology-intro-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(36px, 5vw, 72px);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
margin-bottom: clamp(20px, 3vh, 32px);
text-wrap: balance;
}
.methodology-intro-sub {
font-family: var(--display);
font-weight: 200;
font-style: italic;
font-size: clamp(18px, 2vw, 24px);
line-height: 1.4;
letter-spacing: -.015em;
color: var(--mute);
max-width: 48ch;
text-wrap: pretty;
}
.methodology-list {
display: flex;
flex-direction: column;
}
.methodology-stage {
display: grid;
grid-template-columns: 1fr;
gap: clamp(16px, 2vh, 24px);
padding: clamp(40px, 5vh, 56px) 0;
border-top: 1px solid var(--line);
align-items: start;
}
.methodology-stage:last-child {
border-bottom: 1px solid var(--line);
}
@media (min-width: 800px) {
.methodology-stage {
grid-template-columns: 120px 1fr;
gap: clamp(40px, 5vw, 80px);
}
}
.methodology-num {
font-family: var(--display);
font-weight: 200;
font-size: clamp(48px, 6vw, 80px);
line-height: 1;
letter-spacing: -.025em;
color: var(--ink);
}
.methodology-content {
max-width: 56ch;
}
.methodology-h {
font-family: var(--display);
font-weight: 800;
font-size: clamp(24px, 2.6vw, 36px);
line-height: 1.15;
letter-spacing: -.02em;
color: var(--ink);
margin-bottom: clamp(16px, 2vh, 24px);
text-wrap: balance;
}
.methodology-content p {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.75;
color: var(--ink-soft);
text-wrap: pretty;
}
.methodology-content p strong { font-weight: 900; color: var(--ink); }
/* ─── TIERS ───────────────────────────────── */
.section-tiers {
padding-top: clamp(112px, 16vh, 192px);
padding-bottom: clamp(112px, 16vh, 192px);
}
.tiers-intro {
max-width: 720px;
margin-bottom: clamp(64px, 9vh, 112px);
}
.tiers-intro-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(36px, 5vw, 72px);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
margin-bottom: clamp(20px, 3vh, 32px);
text-wrap: balance;
}
.tiers-intro-sub {
font-family: var(--display);
font-weight: 200;
font-style: italic;
font-size: clamp(18px, 2vw, 24px);
line-height: 1.4;
letter-spacing: -.015em;
color: var(--mute);
max-width: 48ch;
text-wrap: pretty;
}
.tiers-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(32px, 4vh, 48px);
margin-bottom: clamp(64px, 9vh, 96px);
}
@media (min-width: 1000px) {
.tiers-grid {
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 2.5vw, 40px);
align-items: stretch;
}
}
.tier-card {
border: 1px solid var(--line);
padding: clamp(40px, 5vh, 56px) clamp(32px, 4vw, 48px);
display: flex;
flex-direction: column;
background: var(--paper);
transition:
background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
.tier-card:hover {
background: var(--paper-warm);
}
/* The featured (middle) tier gets the inverted treatment so it stands as
the recommended commitment level visually, without explicit "popular" tagging */
.tier-card-feature {
background: var(--bk);
color: var(--paper);
border-color: var(--bk);
}
.tier-card-feature:hover {
background: #1a1a1a;
border-color: #1a1a1a;
}
.tier-header {
margin-bottom: clamp(28px, 4vh, 40px);
}
.tier-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(32px, 3.6vw, 48px);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
}
.tier-card-feature .tier-h { color: var(--paper); }
.tier-summary {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(15px, 1.3vw, 16px);
line-height: 1.7;
color: var(--ink-soft);
margin-bottom: clamp(28px, 4vh, 40px);
text-wrap: pretty;
flex-grow: 0;
}
.tier-summary strong { font-weight: 900; color: var(--ink); }
.tier-card-feature .tier-summary {
color: rgba(247, 244, 238, .8);
}
.tier-card-feature .tier-summary strong { color: var(--paper); }
.tier-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: clamp(10px, 1.5vh, 14px);
padding-top: clamp(24px, 3vh, 32px);
border-top: 1px solid var(--line);
margin-top: auto;
}
.tier-card-feature .tier-list {
border-top-color: var(--line-dark);
}
.tier-list li {
font-family: var(--sans);
font-weight: 300;
font-size: 14px;
line-height: 1.5;
color: var(--ink-soft);
padding-left: 20px;
position: relative;
}
.tier-list li::before {
content: "";
position: absolute;
left: 4px;
top: 0.7em;
width: 5px;
height: 5px;
background: var(--ink);
border-radius: 50%;
}
.tier-card-feature .tier-list li {
color: rgba(247, 244, 238, .85);
}
.tier-card-feature .tier-list li::before {
background: var(--paper);
}
/* Tiers footer — single CTA, no preamble line */
.tiers-footer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(24px, 3vh, 32px);
padding-top: clamp(48px, 6vh, 80px);
border-top: 1px solid var(--line);
max-width: 720px;
}
.tiers-footer-cta {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--display);
font-weight: 400;
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink);
border-bottom: 1px solid var(--ink);
padding-bottom: 4px;
transition: gap var(--t-med) var(--ease);
}
.tiers-footer-cta:hover { gap: 22px; }
.tiers-footer-cta .arrow {
transition: transform var(--t-med) var(--ease);
}
.tiers-footer-cta:hover .arrow { transform: translateX(4px); }
/* ============================================
THE WORK — INDEX PAGE
============================================ */
.section-work-list {
padding-top: clamp(112px, 16vh, 192px);
padding-bottom: clamp(112px, 16vh, 192px);
}
.work-list {
display: flex;
flex-direction: column;
gap: clamp(72px, 10vh, 128px);
}
/* Each case study is a typography-led row. No imagery on the index page —
editorial discipline. Stagger via :nth-child(even) for visual rhythm. */
.work-row {
position: relative;
border-top: 1px solid var(--line);
padding-top: clamp(40px, 6vh, 64px);
}
.work-row:first-child {
border-top: 0;
padding-top: 0;
}
.work-row-link {
display: grid;
grid-template-columns: 1fr;
gap: clamp(16px, 2vh, 24px);
text-decoration: none;
color: inherit;
transition: opacity var(--t-fast) var(--ease);
}
.work-row-link:hover { opacity: .88; }
/* Featured (first/latest) row gets larger title treatment */
.work-row-content {
display: flex;
flex-direction: column;
max-width: 920px;
}
@media (min-width: 800px) {
/* Stagger even-numbered rows to the right side */
.work-row:nth-child(even) .work-row-content {
margin-left: auto;
text-align: left;
}
}
.work-row-title {
font-family: var(--display);
font-weight: 900;
font-size: clamp(28px, 3.6vw, 52px);
line-height: 1.05;
letter-spacing: -.025em;
color: var(--ink);
margin-bottom: clamp(20px, 3vh, 28px);
text-wrap: balance;
max-width: 22ch;
}
.work-row-feature .work-row-title {
font-size: clamp(36px, 5vw, 72px);
max-width: 18ch;
}
.work-row-dek {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.7;
color: var(--ink-soft);
max-width: 58ch;
margin-bottom: clamp(20px, 3vh, 28px);
text-wrap: pretty;
}
.work-row-dek strong { font-weight: 900; color: var(--ink); }
/* See the work CTA - matches the cta-link pattern (small editorial chip
with text + arrow, gap-widens on hover). Active cards only. */
.work-row-cta {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--display);
font-weight: 400;
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink);
border-bottom: 1px solid var(--ink);
padding-bottom: 4px;
align-self: flex-start;
margin-top: 8px;
transition: gap var(--t-med) var(--ease);
}
.work-row-link:hover .work-row-cta { gap: 22px; }
.work-row-cta .arrow {
transition: transform var(--t-med) var(--ease);
}
.work-row-link:hover .work-row-cta .arrow { transform: translateX(4px); }
/* ============================================
CASE STUDY PAGE
============================================ */
/* Case hero — same dark-with-grain pattern as journal entries */
.case-hero {
position: relative;
width: 100%;
overflow: hidden;
background-color: var(--bk);
color: var(--paper);
padding: calc(var(--nav-h) + clamp(96px, 14vh, 160px)) var(--gutter) clamp(80px, 12vh, 144px);
}
.case-hero-media {
position: absolute;
inset: 0;
z-index: 0;
background-color: var(--bk);
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
}
.case-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.05) brightness(.55);
}
.case-hero-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(10,10,10,.5) 0%,
rgba(10,10,10,.3) 40%,
rgba(10,10,10,.85) 100%);
pointer-events: none;
}
.case-hero-inner {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto;
}
.case-breadcrumb {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--display);
font-weight: 400;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(247, 244, 238, .6);
margin-bottom: clamp(32px, 5vh, 48px);
}
.case-breadcrumb a {
color: var(--paper);
border-bottom: 1px solid rgba(247, 244, 238, .3);
padding-bottom: 2px;
transition: border-color var(--t-fast) var(--ease);
}
.case-breadcrumb a:hover {
border-bottom-color: var(--paper);
}
.case-h {
font-family: var(--display);
font-weight: 900;
font-size: clamp(40px, 6vw, 96px);
line-height: 1;
letter-spacing: -.035em;
color: var(--paper);
margin-bottom: clamp(32px, 5vh, 48px);
text-wrap: balance;
max-width: 18ch;
}
.case-headline-metric {
font-family: var(--display);
font-weight: 200;
font-size: clamp(18px, 2vw, 26px);
line-height: 1.3;
letter-spacing: -.015em;
color: rgba(247, 244, 238, .8);
}
.case-headline-metric strong {
font-family: var(--display);
font-weight: 900;
color: var(--paper);
letter-spacing: -.02em;
}
/* Case body — narrow reading column on paper */
.case-body {
padding: clamp(80px, 12vh, 160px) var(--gutter);
background: var(--paper);
}
.case-stage {
max-width: 720px;
margin: 0 auto;
}
.case-section {
margin-bottom: clamp(64px, 9vh, 96px);
}
.case-section:last-child { margin-bottom: 0; }
.case-h2 {
font-family: var(--display);
font-weight: 800;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.1;
letter-spacing: -.025em;
color: var(--ink);
margin-bottom: clamp(24px, 3vh, 36px);
text-wrap: balance;
}
.case-section p {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(16px, 1.4vw, 18px);
line-height: 1.75;
color: var(--ink-soft);
margin-bottom: 1.2em;
text-wrap: pretty;
}
.case-section p:last-child { margin-bottom: 0; }
.case-section p strong { font-weight: 900; color: var(--ink); }
.case-section p em { font-style: italic; color: var(--ink); }
/* Metrics grid — design treatment for the headline outcomes */
.case-metrics {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(24px, 3vh, 40px);
margin: clamp(40px, 6vh, 64px) 0;
padding: clamp(32px, 5vh, 48px) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
@media (min-width: 700px) {
.case-metrics {
grid-template-columns: repeat(4, 1fr);
gap: clamp(20px, 2vw, 32px);
}
}
.case-metric {
display: flex;
flex-direction: column;
gap: 8px;
}
.case-metric-value {
font-family: var(--display);
font-weight: 900;
font-size: clamp(40px, 4.5vw, 64px);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
}
/* Word-based metric values (e.g. "Multi-country", "Tens of thousands") need a
smaller treatment so they sit visually consistent with numeric values and
don't overflow their column at the larger size. */
.case-metric-value-word {
font-size: clamp(24px, 2.6vw, 36px);
line-height: 1.1;
letter-spacing: -.02em;
text-wrap: balance;
}
.case-metric-label {
font-family: var(--sans);
font-weight: 300;
font-size: 13px;
line-height: 1.45;
color: var(--mute);
text-wrap: pretty;
max-width: 24ch;
}
/* Case CTA — between body and related */
.case-cta {
padding: clamp(64px, 9vh, 112px) var(--gutter);
background: var(--paper);
border-top: 1px solid var(--line);
text-align: center;
}
.case-cta-line {
font-family: var(--display);
font-weight: 800;
font-size: clamp(22px, 2.6vw, 36px);
line-height: 1.25;
letter-spacing: -.02em;
color: var(--ink);
margin-bottom: clamp(24px, 3vh, 32px);
max-width: 32ch;
margin-left: auto;
margin-right: auto;
text-wrap: balance;
}
.case-cta .cta-link {
justify-content: center;
}
/* Related entries can have a text-only variant for case studies
(no imagery on the index = no imagery on related either) */
.related-link-text {
border-top: 1px solid var(--line);
padding-top: clamp(24px, 3vh, 32px);
}
/* ─── PREFERS REDUCED MOTION ─────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ─── MOBILE ─────────────────────────────── */
@media (max-width: 768px) {
.lang-switch { display: none; }
.hero { min-height: 560px; padding-bottom: 56px; }
}