/* ============================================
NTM — Nick The Marketer
Design System / Mockup
============================================ */
/* Fonts are loaded via + in each
page (parallel fetch, no @import request chain). Instrument Sans was
imported but never used in the site, and has been dropped. */
/* ---------- TOKENS ---------- */
:root {
/* Palette — white + orange + ink (PCMP green) */
--bg: #ffffff;
--bg-warm: #efefef;
--bg-card: #FFFFFF;
--ink: #161513;
--ink-soft: #2A2724;
--ink-muted: #7A7468;
--line: #D9D1BF;
--line-soft: #E5DDC9;
--accent: #ED5B3E; /* NTM orange (from official brand SVG) — large text / fills / borders only */
--accent-deep: #E04A0E;
--accent-soft: #FFE7DA;
--accent-ink: #ED5B3E; /* matches brand orange so labels/markers read consistently (not burnt) — note: below AA 4.5:1 on white for small text */
--accent-cta: #ED5B3E; /* brand orange for full-bleed CTA panels (Careers CTA, Values block) — restored to the brighter brand tone */
--green-mute: #a0c138; /* PCMP green — decorative use */
--green-pill-ink: #34500F; /* PCMP pill label text on the light pill (AA on #DDE8DF) */
--green-pill-bg: #DDE8DF;
--surface-slate: #60737F; /* stats marquee surface */
--dark-deep: #0E1614; /* deepest near-black panel (dark-mode marquee/teaser/footer) */
/* Typography */
--f-display: 'Teko', 'Helvetica Neue', Arial, sans-serif;
--f-serif: 'Instrument Serif', Georgia, serif;
--f-mono: 'JetBrains Mono', ui-monospace, monospace;
--f-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
/* Spacing scale */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4rem;
--s-9: 6rem;
--s-10: 8rem;
--s-11: 12rem;
/* Layout */
--max-w: 1440px;
--gutter: clamp(1.25rem, 4vw, 3rem);
--radius: 4px;
--scale-heading: 0.95;
--scale-serif: 1.05;
--scale-body: 1;
--fw-heading: 900;
--fw-body: 400;
--fw-serif: 900;
}
/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--f-body);
font-weight: 400;
font-size: calc(17px * var(--scale-body, 1));
font-weight: var(--fw-body, 400);
line-height: 1.55;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
/* ---------- TYPE SYSTEM ---------- */
.eyebrow,
.section-tag {
font-family: var(--f-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-muted);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.section-tag::before {
content: "/";
color: var(--accent);
font-weight: 600;
font-style: italic;
font-family: var(--f-serif);
font-size: 1.1rem;
}
h1, h2, h3, h4 {
font-family: var(--f-display);
font-weight: var(--fw-heading, 500);
line-height: 0.98;
letter-spacing: -0.025em;
margin: 0;
color: var(--ink);
}
h1 { font-size: calc(clamp(3.5rem, 9vw, 8.5rem) * var(--scale-heading, 1)); }
h2 { font-size: calc(clamp(2.5rem, 5.5vw, 5rem) * var(--scale-heading, 1)); line-height: 1; letter-spacing: -0.03em; }
h3 { font-size: calc(clamp(1.5rem, 2.5vw, 2.25rem) * var(--scale-heading, 1)); line-height: 1.05; }
h4 { font-size: calc(clamp(1.125rem, 1.5vw, 1.375rem) * var(--scale-heading, 1)); line-height: 1.2; }
.italic-accent,
em.acc {
font-family: var(--f-serif);
font-size: calc(1em * var(--scale-serif, 1));
font-style: italic;
font-weight: 400; /* match the plain accents — Instrument Serif is single-weight, 900 faux-bolds it */
letter-spacing: -0.01em;
color: var(--accent);
}
/* Hand-style accent underline — applied to called-out words */
.with-underline {
background-image: linear-gradient(var(--accent), var(--accent));
background-position: 0 100%;
background-size: 100% 0.09em;
background-repeat: no-repeat;
padding-bottom: 0.04em;
}
/* On orange-background sections the accent underline would vanish — use light */
.careers-cta .with-underline,
.values-block .with-underline {
background-image: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9));
}
p { margin: 0 0 1rem; max-width: 60ch; }
p.lead {
font-size: clamp(1.125rem, 1.45vw, 1.4rem);
line-height: 1.5;
color: var(--ink-soft);
max-width: 60ch;
}
/* ---------- LAYOUT ---------- */
.container {
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
}
section { padding: var(--s-10) 0; }
.section-head { margin-bottom: var(--s-8); max-width: 100%; }
.section-head h2 { margin-top: var(--s-3); max-width: 18ch; }
/* ---------- BUTTONS ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.125rem 1.75rem;
font-family: var(--f-display);
font-weight: 500;
font-size: 0.95rem;
letter-spacing: -0.005em;
border-radius: 999px;
transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
border: 1px solid transparent;
white-space: nowrap;
}
.btn .arrow {
width: 18px; height: 18px;
display: inline-block;
transition: transform 0.25s ease;
}
.btn:hover .arrow { transform: translateX(4px); }
.btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.btn-primary {
background: var(--ink);
color: var(--bg);
}
.btn-primary:hover {
background: var(--accent);
color: #fff;
}
.btn-accent {
background: var(--accent);
color: #fff;
}
.btn-accent:hover {
background: var(--accent-deep);
}
.btn-ghost {
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
.btn-ghost:hover {
background: var(--ink);
color: var(--bg);
}
.btn-text {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--f-display);
font-weight: 500;
font-size: 0.95rem;
color: var(--ink);
padding-bottom: 0.25rem;
border-bottom: 1px solid var(--ink);
transition: gap 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-text:hover { gap: 0.85rem; color: var(--accent); border-color: var(--accent); }
/* ---------- SKIP LINK ---------- */
.skip-link {
position: absolute;
left: 0.75rem;
top: -3.5rem;
z-index: 1000;
background: var(--ink);
color: var(--bg);
font-family: var(--f-display);
font-weight: 500;
font-size: 0.95rem;
padding: 0.7rem 1.1rem;
border-radius: 0 0 8px 8px;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 0;
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ---------- HEADER / NAV ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
border-bottom: 1px solid transparent;
transition: border-color 0.3s ease, background 0.3s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header.scrolled .nav { padding-top: 0.65rem; padding-bottom: 0.65rem; }
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.1rem var(--gutter);
max-width: var(--max-w);
margin: 0 auto;
}
.nav-brand {
display: flex;
align-items: center;
gap: 0.6rem;
font-family: var(--f-display);
font-weight: 600;
font-size: 1rem;
letter-spacing: -0.01em;
}
.nav-brand .logo-mark {
width: 32px; height: 32px;
background: var(--ink);
border-radius: 6px;
display: grid; place-items: center;
color: var(--accent);
font-family: var(--f-serif);
font-style: italic;
font-size: 1.1rem;
line-height: 1;
}
.nav-brand .brand-text {
display: flex; flex-direction: column; line-height: 1;
}
.nav-brand .brand-text span:first-child {
font-size: 0.95rem; font-weight: 600;
}
.nav-brand .brand-text span:last-child {
font-family: var(--f-mono);
font-size: 0.65rem;
color: var(--ink-muted);
margin-top: 3px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.nav-links {
display: flex;
gap: 0.4rem;
align-items: center;
}
.nav-links a {
font-size: 0.92rem;
font-weight: 500;
padding: 0.55rem 0.95rem;
border-radius: 999px;
transition: background 0.2s ease, color 0.2s ease;
color: var(--ink-soft);
}
.nav-links a:hover { background: rgba(22,21,19,0.06); color: var(--ink); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::before {
content: "•"; color: var(--accent); margin-right: 0.35rem;
}
.nav-cta {
display: flex; align-items: center; gap: 0.75rem;
}
.nav-cta .btn { padding: 0.7rem 1.1rem; font-size: 0.88rem; }
.mobile-nav-toggle { display: none; }
/* ---------- HERO ---------- */
.hero {
padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 7vw, 6rem);
position: relative;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-7);
align-items: end;
}
.hero-headline {
font-family: var(--f-display);
font-weight: var(--fw-heading, 500);
font-size: calc(clamp(3.5rem, 10.5vw, 11rem) * var(--scale-heading, 1));
line-height: 0.94;
letter-spacing: -0.035em;
margin: 0;
}
.hero-headline em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
letter-spacing: -0.01em;
}
.hero-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-7);
align-items: end;
margin-top: var(--s-5);
padding-top: var(--s-5);
border-top: 1px solid var(--line);
}
.hero-sub {
font-family: var(--f-body);
font-size: clamp(1.05rem, 1.35vw, 1.3rem);
color: var(--ink-soft);
max-width: 38ch;
line-height: 1.45;
margin: 0;
}
.hero-actions {
display: flex;
gap: 0.85rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.hero-scroll-hint {
margin-top: var(--s-7);
font-family: var(--f-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-muted);
display: inline-flex; align-items: center; gap: 0.55rem;
}
.hero-scroll-hint::after {
content: "";
width: 24px; height: 1px;
background: var(--ink-muted);
display: inline-block;
animation: line-pulse 2.4s ease-in-out infinite;
}
@keyframes line-pulse {
0%, 100% { transform: scaleX(1); opacity: 0.4; }
50% { transform: scaleX(2); opacity: 1; }
}
/* ---------- MARQUEE / STATS BAR ---------- */
.marquee {
background: var(--surface-slate);
color: #fff;
padding: 1.5rem 0;
overflow: hidden;
position: relative;
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
}
.marquee-track {
display: flex;
white-space: nowrap;
animation: scroll 38s linear infinite;
font-family: var(--f-display);
font-size: clamp(1.05rem, 1.4vw, 1.3rem);
font-weight: 700;
align-items: center;
}
/* inline-block keeps each phrase's words flowing with normal word-spacing;
the separator dot carries equal margins so it sits centered between phrases */
.marquee-item {
display: inline-block;
}
.marquee-item::after {
content: "●";
color: #fff;
font-size: 0.6rem;
margin: 0 1.75rem;
vertical-align: middle;
}
.marquee-item em {
font-family: var(--f-display);
font-style: normal;
font-weight: 700;
color: inherit;
}
@keyframes scroll {
to { transform: translateX(-50%); }
}
/* ---------- WHAT WE DO ---------- */
.what-we-do .section-head,
.working-on .section-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-7);
align-items: end;
margin-bottom: var(--s-8);
}
.what-we-do h2 { max-width: 14ch; }
.what-we-do .head-aside p,
.working-on .head-aside p { color: var(--ink-soft); max-width: 36ch; margin-left: auto; }
.services-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-5);
}
.service-card {
position: relative;
background: var(--bg-card);
border: 1px solid var(--line-soft);
border-radius: 8px;
padding: var(--s-6);
min-height: 320px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease, border-color 0.3s ease;
overflow: hidden;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: 0 22px 40px -20px rgba(22,21,19,0.18);
border-color: var(--accent);
}
.service-card .num {
font-family: var(--f-mono);
font-size: 0.75rem;
color: var(--ink-muted);
letter-spacing: 0.04em;
}
.service-card h3 {
margin-top: var(--s-7);
margin-bottom: var(--s-3);
font-size: clamp(1.6rem, 2.2vw, 2rem);
}
.service-card h3 em {
font-family: var(--f-serif);
font-style: italic;
color: var(--accent);
font-weight: 400;
}
.service-card p {
color: var(--ink-muted);
font-size: 0.95rem;
margin: 0;
}
.service-card .icon-blob {
position: absolute;
bottom: -30px; right: -30px;
width: 140px; height: 140px;
background: var(--accent-soft);
border-radius: 50%;
opacity: 0;
transition: opacity 0.4s ease, transform 0.5s ease;
z-index: 0;
}
.service-card:hover .icon-blob {
opacity: 1;
transform: scale(1.1);
}
.service-card > * { position: relative; z-index: 1; }
/* ---------- FEATURED BRAND ---------- */
.featured {
background: var(--bg-warm);
margin: 0 var(--gutter);
border-radius: 16px;
padding: clamp(2.5rem, 5vw, 4.5rem);
}
.featured .container { padding: 0; }
.featured-inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--s-8);
align-items: center;
}
.featured-copy h2 { margin: var(--s-3) 0 var(--s-5); max-width: 14ch; }
.featured-copy h2 em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.featured-copy .tagline {
font-size: 1.1rem;
color: var(--ink-soft);
font-style: italic;
font-family: var(--f-serif);
margin-bottom: var(--s-5);
font-weight: 400;
}
.featured-copy .tagline.tagline-strong {
font-family: var(--f-body);
font-style: normal;
font-weight: 700;
color: var(--ink);
}
.featured-actions {
display: flex;
gap: 0.85rem;
flex-wrap: wrap;
margin-top: var(--s-5);
}
.featured-copy .feature-list {
margin: var(--s-5) 0 var(--s-6);
display: grid;
gap: 0.6rem;
}
.featured-copy .feature-list li {
font-size: 0.95rem;
color: var(--ink-soft);
padding-left: 1.25rem;
position: relative;
}
.featured-copy .feature-list li::before {
content: "→";
color: var(--accent-ink);
position: absolute;
left: 0;
font-family: var(--f-mono);
}
.featured-visual {
aspect-ratio: 4/5;
background: linear-gradient(135deg, #2E4A3D 0%, #1E3329 100%);
border-radius: 12px;
position: relative;
overflow: hidden;
box-shadow: 0 30px 60px -30px rgba(22,21,19,0.3);
}
.featured-visual::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 20%, rgba(255,91,31,0.25), transparent 50%);
}
.featured-visual .placeholder-label {
position: absolute;
bottom: 1.5rem; left: 1.5rem;
color: rgba(255,255,255,0.75);
font-family: var(--f-mono);
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.featured-visual .brand-mark {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
}
.featured-visual .brand-mark .pcmp-icon {
width: 88px; height: 88px;
border: 2px solid #fff;
border-radius: 50%;
display: grid; place-items: center;
margin: 0 auto 1rem;
font-family: var(--f-serif);
font-style: italic;
font-size: 2rem;
}
.featured-visual .brand-mark .pcmp-name {
font-family: var(--f-display);
font-weight: 500;
font-size: 1.3rem;
letter-spacing: -0.01em;
}
.featured-visual .brand-mark .pcmp-sub {
font-family: var(--f-mono);
font-size: 0.7rem;
color: rgba(255,255,255,0.6);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 0.4rem;
}
/* ---------- HOW WE WORK ---------- */
.how-we-work {
background: var(--bg);
}
.how-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-5);
margin-top: var(--s-6);
}
.how-item {
padding: var(--s-6) 0;
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.how-item .how-num {
font-family: var(--f-mono);
font-size: 0.78rem;
color: var(--accent-ink);
}
.how-item h3 {
font-size: 1.4rem;
font-weight: 500;
letter-spacing: -0.02em;
}
.how-item p {
font-size: 0.95rem;
color: var(--ink-muted);
margin: 0;
}
/* ---------- PEOPLE / TEAM TEASER ---------- */
.people-teaser {
background: var(--ink);
color: var(--bg);
border-radius: 16px;
margin: 0 var(--gutter);
padding: clamp(2.5rem, 5vw, 5rem);
position: relative;
overflow: hidden;
}
.people-teaser .section-tag { color: rgba(244,239,230,0.6); }
.people-teaser .section-tag::before { color: var(--accent); }
.people-teaser h2 { color: var(--bg); max-width: 18ch; margin-top: var(--s-3); }
.people-teaser h2 em {
font-family: var(--f-serif);
font-style: italic;
color: var(--accent);
font-weight: 400;
}
.people-teaser p {
color: rgba(244,239,230,0.7);
margin: var(--s-5) 0;
max-width: 50ch;
font-size: 1.05rem;
}
.team-grid {
margin-top: var(--s-7);
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--s-3);
}
.team-tile {
aspect-ratio: 1;
background: rgba(244,239,230,0.06);
border: 1px solid rgba(244,239,230,0.1);
border-radius: 8px;
position: relative;
overflow: hidden;
transition: transform 0.4s ease, background 0.3s ease;
}
.team-tile:hover {
transform: scale(1.03);
background: rgba(255,91,31,0.15);
}
.team-tile .initials {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--f-serif);
font-style: italic;
font-size: 2rem;
color: rgba(244,239,230,0.7);
}
.team-tile .photo-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(15%);
transition: transform 0.5s cubic-bezier(.2,.7,.2,1), filter 0.4s ease;
}
.team-tile:hover .photo-img {
transform: scale(1.06);
filter: grayscale(0%);
}
/* Gradient so the name stays legible over a photo */
.team-tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(12,11,10,0.6) 0%, transparent 45%);
pointer-events: none;
}
.team-tile-more::after { background: none; }
.team-tile .name {
position: absolute;
bottom: 0.75rem;
left: 0.75rem;
z-index: 1;
font-family: var(--f-mono);
font-size: 0.7rem;
color: rgba(244,239,230,0.5);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.team-tile .photo-img ~ .name { color: rgba(255,255,255,0.95); }
.people-cta {
display: flex;
justify-content: space-between;
align-items: end;
margin-top: var(--s-7);
flex-wrap: wrap;
gap: var(--s-4);
}
.people-cta .btn-text { color: var(--bg); border-color: var(--bg); }
.people-cta .btn-text:hover { color: var(--accent); border-color: var(--accent); }
.people-cta .small-note {
font-family: var(--f-serif);
font-style: italic;
color: rgba(244,239,230,0.6);
font-size: 1rem;
}
/* ---------- WHATS NEXT ---------- */
.whats-next {
padding: var(--s-10) 0;
}
.whats-next-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: var(--s-8);
align-items: start;
}
.whats-next h2 { max-width: 12ch; }
.whats-next h2 em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.whats-next .copy { font-size: 1.15rem; color: var(--ink-soft); line-height: 1.55; max-width: 52ch; }
.whats-next .copy p + p { margin-top: 1rem; }
/* ---------- CAREERS CTA ---------- */
.careers-cta {
background: var(--accent-cta);
color: #fff;
padding: clamp(3rem, 6vw, 6rem) 0;
position: relative;
overflow: hidden;
}
.careers-cta::before {
content: "JOIN THE TEAM • JOIN THE TEAM • JOIN THE TEAM • JOIN THE TEAM • ";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-family: var(--f-display);
font-style: normal;
font-size: clamp(8rem, 18vw, 22rem);
line-height: 1;
white-space: nowrap;
color: rgba(255,255,255,0.08);
font-weight: 700;
letter-spacing: -0.01em;
pointer-events: none;
animation: scroll-slow 60s linear infinite;
}
@keyframes scroll-slow {
to { transform: translate(-30%, -50%); }
}
.careers-cta .container { position: relative; z-index: 1; }
.careers-cta .section-tag { color: rgba(255,255,255,0.92); }
.careers-cta .section-tag::before { color: var(--ink); }
.careers-cta h2 {
color: #fff;
max-width: 16ch;
margin-top: var(--s-3);
}
.careers-cta h2 em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--ink);
}
.careers-cta p {
color: #fff;
font-size: 1.1rem;
max-width: 55ch;
margin: var(--s-5) 0 var(--s-6);
}
.careers-cta .btn-ghost {
color: #fff;
border-color: #fff;
}
.careers-cta .btn-ghost:hover {
background: #fff;
color: var(--accent);
}
/* ---------- FOOTER ---------- */
.site-footer {
background: var(--ink);
color: var(--bg);
padding: var(--s-9) 0 var(--s-5);
}
.footer-top {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--s-7);
padding-bottom: var(--s-8);
border-bottom: 1px solid rgba(244,239,230,0.12);
}
.footer-top h3 {
font-family: var(--f-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(244,239,230,0.5);
margin-bottom: var(--s-4);
}
.footer-top ul li {
margin-bottom: 0.6rem;
}
.footer-top ul li a {
color: rgba(244,239,230,0.85);
font-size: 0.95rem;
transition: color 0.2s ease;
}
.footer-top ul li a:hover { color: var(--accent); }
.footer-brand .footer-tagline {
font-family: var(--f-serif);
font-style: italic;
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.1;
color: var(--bg);
margin-top: var(--s-3);
max-width: 16ch;
}
.footer-brand .footer-tagline span { color: var(--accent); }
.footer-logo { display: inline-block; }
.footer-logo img {
height: 52px;
width: auto;
opacity: 0.95;
transition: opacity 0.2s ease;
}
.footer-logo:hover img { opacity: 1; }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--s-5);
font-family: var(--f-mono);
font-size: 0.75rem;
color: rgba(244,239,230,0.5);
letter-spacing: 0.04em;
flex-wrap: wrap;
gap: 1rem;
}
.footer-bottom .socials { display: flex; gap: 0.5rem; align-items: center; }
.footer-bottom .socials a {
color: rgba(244,239,230,0.7);
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px; /* 20px icon + padding → 44px tap target */
margin: -0.5rem 0; /* keep the row visually compact */
transition: color 0.2s ease;
}
.footer-bottom .socials a svg { width: 20px; height: 20px; display: block; }
.footer-bottom .socials a:hover { color: var(--accent); }
.contact-socials { display: flex; gap: 0.35rem; align-items: center; }
.contact-socials a {
color: var(--ink-muted);
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px; /* 22px icon + padding → 44px tap target */
margin: -0.5rem 0;
transition: color 0.2s ease;
}
.contact-socials a svg { width: 22px; height: 22px; display: block; }
.contact-socials a:hover { color: var(--accent); }
/* ---------- PAGE: OUR BRANDS ---------- */
.page-hero {
padding: clamp(5rem, 9vw, 8rem) 0 clamp(3rem, 5vw, 5rem);
}
.page-hero h1 {
font-size: calc(clamp(3rem, 8vw, 7rem) * var(--scale-heading, 1));
letter-spacing: -0.035em;
margin-top: var(--s-4);
max-width: 14ch;
}
.page-hero h1 em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
}
/* Heading whose two lines are controlled by an explicit
, not by wrapping —
the default 14ch cap would force extra mid-line breaks. */
.page-hero h1.headline-2line { max-width: none; }
.page-hero .page-sub {
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
color: var(--ink-soft);
max-width: 50ch;
margin-top: var(--s-5);
line-height: 1.45;
}
.brand-block {
padding: var(--s-9) 0;
border-top: 1px solid var(--line);
}
.brand-block-inner {
display: grid;
grid-template-columns: 0.4fr 1fr;
gap: var(--s-7);
align-items: start;
}
.brand-block .index-num {
font-family: var(--f-mono);
font-size: 0.78rem;
color: var(--ink-muted);
letter-spacing: 0.06em;
}
.brand-block .index-num strong {
font-family: var(--f-serif);
font-style: italic;
font-size: 2.4rem;
display: block;
color: var(--accent);
font-weight: 400;
margin-top: 0.4rem;
letter-spacing: -0.02em;
}
.brand-logo {
background: #fff;
border: 1px solid var(--line-soft);
border-radius: 12px;
padding: 1.1rem 1.25rem;
margin-bottom: var(--s-4);
}
.brand-logo img { width: 100%; height: auto; display: block; }
.brand-logo.is-cover { padding: 0; overflow: hidden; aspect-ratio: 1; }
.brand-logo.is-cover img { width: 100%; height: 100%; object-fit: cover; }
.brand-block h2 { margin-bottom: var(--s-3); }
.brand-block h2 em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.brand-block .tagline {
font-family: var(--f-display);
font-style: normal;
font-weight: 500;
font-size: 1.45rem;
letter-spacing: -0.01em;
color: var(--ink-soft);
margin-bottom: var(--s-5);
}
.brand-block .features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem 1.5rem;
margin: var(--s-5) 0;
font-size: 0.95rem;
color: var(--ink-soft);
}
.brand-block .features li {
padding-left: 1.25rem;
position: relative;
}
.brand-block .features li::before {
content: "+";
color: var(--accent-ink);
position: absolute;
left: 0;
font-family: var(--f-mono);
}
/* ---------- PAGE: OUR JOURNEY (TIMELINE - ZEEFRAMES STYLE) ---------- */
.story-intro {
padding: clamp(3rem, 6vw, 6rem) 0;
}
.story-intro-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--s-8);
align-items: start;
}
.story-intro h2 { max-width: 12ch; }
.story-intro h2 em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.story-photo { margin: var(--s-6) 0 0; }
.story-photo img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
box-shadow: 0 20px 40px -24px rgba(22,21,19,0.3);
}
.story-photo figcaption {
font-family: var(--f-mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-muted);
margin-top: var(--s-3);
}
.story-photo-sm { margin-top: var(--s-4); max-width: 62%; }
.story-block {
margin-top: var(--s-7);
padding-top: var(--s-6);
border-top: 1px solid var(--line);
}
.story-block h3 {
font-family: var(--f-display);
font-weight: 500;
font-size: 1.5rem;
margin-bottom: var(--s-3);
}
.story-block h3 em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.story-block p {
color: var(--ink-soft);
font-size: 1.05rem;
line-height: 1.6;
max-width: 55ch;
}
.story-block .quote {
font-family: var(--f-serif);
font-style: italic;
font-size: clamp(1.4rem, 2.2vw, 1.8rem);
line-height: 1.25;
color: var(--ink);
margin: var(--s-5) 0;
padding-top: var(--s-4);
max-width: 32ch;
position: relative;
}
/* Short accent rule above the quote — editorial lead-in, not a side stripe */
.story-block .quote::before {
content: "";
display: block;
width: 2.5rem;
height: 3px;
border-radius: 2px;
background: var(--accent);
margin-bottom: var(--s-4);
}
/* Timeline (Zeeframes style) */
.timeline-section {
background: var(--bg-warm);
padding: clamp(4rem, 7vw, 7rem) 0;
}
.timeline-head {
margin-bottom: var(--s-8);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-7);
align-items: end;
}
.timeline-head h2 { max-width: 14ch; }
.timeline-head h2 em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.timeline-head p {
max-width: 38ch;
color: var(--ink-soft);
margin-left: auto;
}
/* Horizontal scroll/click timeline */
.timeline-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
margin-bottom: var(--s-5);
flex-wrap: wrap;
}
.timeline-hint {
font-family: var(--f-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-muted);
}
.timeline-nav { display: flex; gap: 0.6rem; }
.tl-nav {
width: 48px;
height: 48px;
border-radius: 999px;
border: 1px solid var(--ink);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.tl-nav:hover { background: var(--ink); color: var(--bg); }
.tl-nav:disabled { opacity: 0.3; cursor: default; }
.tl-nav:disabled:hover { background: transparent; color: var(--ink); }
.timeline {
position: relative;
display: flex;
flex-direction: row;
gap: var(--s-5);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding-bottom: var(--s-4);
}
.timeline::-webkit-scrollbar { height: 6px; }
.timeline::-webkit-scrollbar-track { background: transparent; }
.timeline::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.timeline-row {
display: flex;
flex-direction: column;
flex: 0 0 clamp(280px, 78vw, 360px);
scroll-snap-align: start;
padding: var(--s-6) var(--s-5);
background: var(--bg-card);
border: 1px solid var(--line);
border-top: 3px solid var(--accent);
border-radius: 12px;
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.timeline-row:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -28px rgba(22,21,19,0.4);
}
.tl-year {
font-family: var(--f-display);
font-weight: 500;
font-size: clamp(2rem, 4vw, 3.5rem);
letter-spacing: -0.03em;
line-height: 1;
color: var(--ink);
transition: color 0.3s ease;
}
.timeline-row:hover .tl-year { color: var(--accent); }
.tl-num {
font-family: var(--f-mono);
font-size: 0.78rem;
color: var(--ink-muted);
letter-spacing: 0.04em;
padding-top: 0.4rem;
margin-bottom: var(--s-3);
}
.tl-content h3 {
font-family: var(--f-display);
font-weight: 500;
font-size: clamp(1.35rem, 2vw, 1.75rem);
letter-spacing: -0.02em;
margin-bottom: var(--s-3);
line-height: 1.15;
}
.tl-content h3 em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.tl-content ul {
display: grid;
gap: 0.6rem;
margin-top: var(--s-3);
}
.tl-content ul li {
font-size: 1rem;
color: var(--ink-soft);
display: flex;
align-items: flex-start;
gap: 0.75rem;
line-height: 1.5;
}
.brand-pill {
display: inline-flex;
align-items: center;
font-family: var(--f-mono);
font-size: 0.65rem;
font-weight: 500;
padding: 0.2rem 0.55rem;
border-radius: 999px;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
margin-top: 0.15rem;
}
.brand-pill.ntm {
background: var(--accent-soft);
color: var(--accent-ink);
}
.brand-pill.pcmp {
background: var(--green-pill-bg);
color: var(--green-pill-ink);
}
/* Impact section */
.impact-section {
padding: clamp(4rem, 7vw, 7rem) 0;
}
.impact-head h2 { max-width: 14ch; }
.impact-head h2 em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.impact-grid {
margin-top: var(--s-7);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-4);
}
.impact-card {
padding: var(--s-6) 0;
border-top: 1px solid var(--ink);
display: flex;
flex-direction: column;
}
.impact-card .impact-num {
font-family: var(--f-display);
font-weight: 500;
font-size: clamp(3rem, 6vw, 5rem);
letter-spacing: -0.04em;
line-height: 0.95;
color: var(--ink);
}
.impact-card .impact-num em {
font-family: var(--f-serif);
font-style: italic;
color: var(--accent);
font-weight: 400;
}
.impact-card .impact-label {
margin-top: var(--s-4);
font-size: 0.95rem;
color: var(--ink-muted);
max-width: 22ch;
}
/* ---------- PAGE: TEAM ---------- */
.team-page-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-5);
margin-top: var(--s-7);
}
.team-card {
background: var(--bg-card);
border: 1px solid var(--line-soft);
border-radius: 12px;
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.team-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 40px -20px rgba(22,21,19,0.15);
}
.team-card .photo {
aspect-ratio: 4/5;
background: linear-gradient(135deg, var(--bg-warm) 0%, var(--line-soft) 100%);
display: grid;
place-items: center;
position: relative;
}
.team-card .photo .initials {
font-family: var(--f-serif);
font-style: italic;
font-size: 3rem;
color: var(--ink-muted);
}
.team-card .photo .placeholder-note {
position: absolute;
top: 0.75rem; right: 0.75rem;
font-family: var(--f-mono);
font-size: 0.6rem;
color: var(--ink-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.team-card .info {
padding: var(--s-5);
}
.team-card .info h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.25rem;
}
.team-card .info .role {
font-family: var(--f-mono);
font-size: 0.75rem;
color: var(--ink-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Values block */
.values-block {
padding: var(--s-9) 0;
background: var(--accent-cta);
color: #fff;
}
.values-block .section-tag { color: rgba(255,255,255,0.92); }
.values-block .section-tag::before { color: var(--ink); }
.values-block h2 { color: #fff; margin-top: var(--s-3); }
.values-block h2 em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--ink);
}
.values-grid {
margin-top: var(--s-7);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
}
.value-item {
padding: var(--s-6) var(--s-5);
border-top: 1px solid rgba(255,255,255,0.22);
display: flex;
align-items: flex-start;
gap: var(--s-5);
}
.value-item:nth-child(odd) { padding-left: 0; }
.value-item:nth-child(even) { padding-right: 0; border-left: 1px solid rgba(255,255,255,0.22); padding-left: var(--s-7); }
.value-item .v-num {
font-family: var(--f-mono);
font-size: 0.75rem;
color: #fff;
flex-shrink: 0;
padding-top: 0.5rem;
}
.value-item h3 {
color: #fff;
font-size: 1.4rem;
font-weight: 500;
margin-bottom: var(--s-3);
}
.value-item p {
color: #fff;
font-size: 0.95rem;
margin: 0;
}
/* ---------- PAGE: NEWS ---------- */
.news-grid {
margin-top: var(--s-7);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--s-6);
}
.news-item {
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: var(--bg-card);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
cursor: pointer;
}
.news-item:hover {
transform: translateY(-4px);
box-shadow: 0 24px 48px -30px rgba(22,21,19,0.4);
border-color: var(--accent);
}
.news-item:hover .news-title { color: var(--accent); }
.news-thumb {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--bg-warm);
}
.news-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-item:hover .news-thumb img { transform: scale(1.04); }
.news-thumb .brand-pill {
position: absolute;
top: 0.75rem;
left: 0.75rem;
}
.news-body {
display: flex;
flex-direction: column;
gap: var(--s-3);
padding: var(--s-5);
flex: 1;
}
.news-date {
font-family: var(--f-mono);
font-size: 0.78rem;
color: var(--ink-muted);
letter-spacing: 0.04em;
}
.news-title {
font-size: clamp(1.05rem, 1.4vw, 1.3rem);
font-weight: 500;
letter-spacing: -0.015em;
color: var(--ink);
transition: color 0.3s ease;
line-height: 1.25;
margin: 0;
}
.news-arrow {
margin-top: auto;
font-family: var(--f-serif);
font-style: italic;
color: var(--accent-ink);
font-size: 1.3rem;
}
/* ---------- PAGE: CAREERS / CONTACT ---------- */
.career-block {
padding: clamp(3rem, 5vw, 5rem) 0;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--s-8);
}
.career-block h2 em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.career-form {
background: var(--bg-card);
border: 1px solid var(--line-soft);
border-radius: 12px;
padding: var(--s-7);
}
.form-row {
display: grid;
gap: var(--s-2);
margin-bottom: var(--s-5);
}
.form-row label {
font-family: var(--f-mono);
font-size: 0.72rem;
color: var(--ink-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.form-row input,
.form-row textarea,
.form-row select {
font-family: var(--f-display);
font-size: 1rem;
padding: 0.85rem 1rem;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--bg);
color: var(--ink);
transition: border-color 0.2s ease, background 0.2s ease;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-color: var(--accent);
background: #fff;
}
.form-row textarea {
resize: vertical;
min-height: 140px;
font-family: var(--f-display);
}
.placeholder-disclaimer {
background: var(--accent-soft);
border: 1px dashed var(--accent);
border-radius: 6px;
padding: var(--s-4);
font-family: var(--f-mono);
font-size: 0.78rem;
color: var(--accent);
margin-bottom: var(--s-5);
line-height: 1.5;
}
.job-list {
margin-top: var(--s-7);
display: grid;
gap: 0;
}
.job-row {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 80px;
gap: var(--s-4);
padding: var(--s-5) var(--s-4);
border-top: 1px solid var(--line);
align-items: center;
transition: background 0.3s ease, padding 0.3s ease;
cursor: pointer;
}
.job-row:last-child { border-bottom: 1px solid var(--line); }
.job-row:hover {
background: rgba(255,91,31,0.04);
padding-left: var(--s-6);
}
.job-row .job-title {
font-size: 1.1rem;
font-weight: 500;
letter-spacing: -0.01em;
}
.job-row .job-meta {
font-family: var(--f-mono);
font-size: 0.78rem;
color: var(--ink-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.job-row .job-arrow {
text-align: right;
font-family: var(--f-serif);
font-style: italic;
color: var(--accent-ink);
font-size: 1.3rem;
}
/* ---------- BRANDS CONNECT BLOCK ---------- */
.brands-connect {
padding: var(--s-9) 0;
background: var(--bg-warm);
}
.brands-connect-inner {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--s-8);
align-items: start;
}
.brands-connect h2 { max-width: 14ch; }
.brands-connect h2 em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.connect-flow {
display: grid;
gap: var(--s-5);
}
.connect-item {
padding: var(--s-5);
background: var(--bg-card);
border-radius: 10px;
border: 1px solid var(--line-soft);
}
.connect-item h3 {
font-family: var(--f-mono);
font-size: 0.78rem;
font-weight: 500;
color: var(--accent-ink);
letter-spacing: 0.04em;
margin-bottom: 0.6rem;
text-transform: uppercase;
}
.connect-item p {
font-size: 1.1rem;
color: var(--ink);
margin: 0;
line-height: 1.35;
}
.connect-item p em {
font-family: var(--f-serif);
font-style: italic;
color: var(--ink);
font-weight: 400;
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
.hero-meta { grid-template-columns: 1fr; gap: var(--s-5); }
.hero-actions { justify-content: flex-start; }
.what-we-do .section-head,
.working-on .section-head { grid-template-columns: 1fr; }
.what-we-do .head-aside p,
.working-on .head-aside p { margin-left: 0; }
.services-row { grid-template-columns: repeat(2, 1fr); }
.featured-inner { grid-template-columns: 1fr; }
.how-grid { grid-template-columns: repeat(2, 1fr); }
.team-grid { grid-template-columns: repeat(4, 1fr); }
.impact-grid { grid-template-columns: repeat(2, 1fr); }
.team-page-grid { grid-template-columns: repeat(3, 1fr); }
.footer-top { grid-template-columns: 1fr 1fr; }
.brand-block-inner { grid-template-columns: 1fr; }
.story-intro-grid { grid-template-columns: 1fr; }
.timeline-head { grid-template-columns: 1fr; }
.timeline-head p { margin-left: 0; }
.career-block { grid-template-columns: 1fr; }
.whats-next-grid { grid-template-columns: 1fr; }
.brands-connect-inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
section { padding: var(--s-9) 0; }
.nav-links { display: none; }
.mobile-nav-toggle {
display: grid;
place-items: center;
width: 44px; height: 44px;
background: var(--ink);
color: var(--bg);
border-radius: 50%;
}
.services-row { grid-template-columns: 1fr; }
.how-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: repeat(3, 1fr); }
.impact-grid { grid-template-columns: 1fr; }
.team-page-grid { grid-template-columns: repeat(2, 1fr); }
.footer-top { grid-template-columns: 1fr; }
.values-grid { grid-template-columns: 1fr; }
.value-item { padding-left: 0 !important; padding-right: 0 !important; border-left: none !important; }
.job-row { grid-template-columns: 1fr 40px; }
.job-row .job-meta:nth-of-type(2) { display: none; }
.featured { margin: 0; border-radius: 0; }
.people-teaser { margin: 0; border-radius: 0; }
}
/* ---------- UTILITIES & ANIMATIONS ---------- */
/* Reveal is progressive enhancement: hidden state is scoped to html.js, which an
inline head script sets before paint. Without JS (or if it fails to boot) the
content renders visible by default — never gated blank. */
html.js .reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
}
html.js .reveal.in {
opacity: 1;
transform: translateY(0);
}
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
/* ============================================
DARK MODE — Option C (warm dark + green-grey)
============================================ */
html { transition: background-color 0.4s ease; }
body,
.site-header, .marquee, .featured, .featured-wrapper,
.people-teaser, .careers-cta, .site-footer, .service-card, .featured-visual,
.team-tile, .team-card, .career-form, .placeholder-disclaimer, .timeline-row,
.news-item, .job-row, .brand-block, .timeline-section, .brands-connect,
.impact-card, .values-block, .form-row input, .form-row textarea, .form-row select,
.connect-item, .theme-toggle, .nav-links a,
.btn-primary, .btn-accent, .btn-ghost, .nav-brand .logo-mark, .news-thumb {
transition: background-color 0.4s ease, border-color 0.4s ease, color 0.3s ease;
}
[data-theme="dark"] {
--bg: #1A2422;
--bg-warm: #1F2C29;
--bg-card: #243430;
--ink: #ECE5D3;
--ink-soft: #C8C2B2;
--ink-muted: #8A938F;
--line: #324643;
--line-soft: #2A3A38;
--accent: #F26E51;
--accent-deep: #FF8060;
--accent-soft: #3A2418;
--green-mute: #a0c138;
}
/* Header in dark mode */
[data-theme="dark"] .site-header {
background: rgba(26, 36, 34, 0.78);
}
[data-theme="dark"] .nav-brand .logo-mark {
background: var(--ink);
color: var(--bg);
}
/* Sections that should always feel "dark" — override the auto-flip */
[data-theme="dark"] .marquee {
background: var(--dark-deep);
color: var(--ink);
}
[data-theme="dark"] .people-teaser {
background: var(--dark-deep);
}
[data-theme="dark"] .people-teaser h2 { color: var(--ink); }
[data-theme="dark"] .values-block {
background: var(--accent-cta);
}
[data-theme="dark"] .values-block h2,
[data-theme="dark"] .values-block h3 { color: #fff; }
[data-theme="dark"] .site-footer {
background: var(--dark-deep);
}
[data-theme="dark"] .site-footer .footer-tagline { color: var(--ink); }
/* Featured visual gradient in dark mode */
[data-theme="dark"] .featured-visual {
background: linear-gradient(135deg, #2E4A3D 0%, #14211C 100%);
}
/* Form fields */
[data-theme="dark"] .form-row input,
[data-theme="dark"] .form-row textarea,
[data-theme="dark"] .form-row select {
background: var(--bg);
border-color: var(--line);
color: var(--ink);
}
[data-theme="dark"] .form-row input:focus,
[data-theme="dark"] .form-row textarea:focus,
[data-theme="dark"] .form-row select:focus {
background: var(--bg-card);
border-color: var(--accent);
}
/* Disclaimer in dark mode */
[data-theme="dark"] .placeholder-disclaimer {
background: var(--accent-soft);
color: var(--accent);
border-color: var(--accent);
}
/* Brand pill in dark mode */
[data-theme="dark"] .brand-pill.ntm {
background: rgba(255,107,53,0.18);
color: var(--accent);
}
[data-theme="dark"] .brand-pill.pcmp {
background: rgba(107,143,128,0.18);
color: var(--green-mute);
}
/* Mobile nav toggle */
[data-theme="dark"] .mobile-nav-toggle {
background: var(--ink);
color: var(--bg);
}
/* Service card hover glow */
[data-theme="dark"] .service-card:hover {
box-shadow: 0 22px 40px -20px rgba(0,0,0,0.5);
}
/* Selection */
[data-theme="dark"] ::selection {
background: var(--accent);
color: #fff;
}
/* ============================================
THEME TOGGLE BUTTON
============================================ */
.theme-toggle {
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
background: transparent;
border: 1px solid var(--line);
color: var(--ink);
cursor: pointer;
flex-shrink: 0;
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.4s cubic-bezier(.4,1.4,.5,1);
}
.theme-toggle:hover {
border-color: var(--accent);
color: var(--accent);
}
.theme-toggle svg {
width: 16px;
height: 16px;
display: block;
}
/* display now handled by opacity crossfade in v2 additions below */
/* ============================================
LOGO IMG (NTM) — real logo with theme swap
============================================ */
.nav-brand {
display: inline-flex;
align-items: center;
}
.nav-brand .logo-img {
width: auto;
height: 48px;
max-width: 240px;
object-fit: contain;
display: block;
transition: height 0.35s cubic-bezier(.4,0,.2,1), max-width 0.35s ease;
}
.site-header.scrolled .nav-brand .logo-img {
height: 32px;
max-width: 180px;
}
.nav-brand .logo-dark { display: none; }
[data-theme="dark"] .nav-brand .logo-light { display: none; }
[data-theme="dark"] .nav-brand .logo-dark { display: block; }
.nav-brand .brand-text { display: none; } /* logo handles brand display */
/* ============================================
FEATURED BLOCK — image enhancement
============================================ */
/* Card visual as a CSS background image (renders reliably across browsers,
unlike an absolutely-positioned ![]()
sized against an aspect-ratio box). */
.featured-visual.bg-photo {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.featured-visual.bg-photo::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,0.38) 100%);
}
/* Brand logo on a white plate, centered in front of the background */
.featured-visual .brand-plate {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
padding: clamp(1.75rem, 12%, 3.5rem);
}
.featured-visual .brand-plate img {
width: 100%;
max-width: 240px;
height: auto;
background: #fff;
border-radius: 14px;
padding: 1.25rem 1.4rem;
box-shadow: 0 24px 55px -22px rgba(0,0,0,0.55);
}
/* ============================================
WHAT WE'RE WORKING ON — brand carousel
============================================ */
.working-on {
padding: var(--s-9) 0;
}
.work-carousel {
position: relative;
margin-top: var(--s-7);
}
.work-track {
display: flex;
gap: var(--gutter);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
padding-bottom: var(--s-2);
}
.work-track::-webkit-scrollbar { display: none; } /* WebKit */
.work-card {
flex: 0 0 100%;
scroll-snap-align: center;
background: var(--bg-warm);
border-radius: 16px;
padding: clamp(2rem, 4vw, 4rem);
}
.work-card .featured-inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--s-8);
align-items: center;
}
.card-brand {
font-family: var(--f-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
}
.work-card h3 {
font-size: clamp(1.9rem, 3.5vw, 2.9rem);
line-height: 1.02;
letter-spacing: -0.02em;
margin: var(--s-3) 0 var(--s-4);
}
.work-card h3 em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
}
/* NTM card — logo centered on a dark branded gradient (no photo) */
.featured-visual.visual-ntm {
background: linear-gradient(150deg, #2A2724 0%, #161513 100%);
}
.featured-visual.visual-ntm::before {
background: radial-gradient(circle at 70% 25%, rgba(237,91,62,0.32), transparent 55%);
}
.featured-visual .brand-logo-mark {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: clamp(1.5rem, 5%, 3rem);
z-index: 2;
}
.featured-visual .brand-logo-mark img {
width: 100%;
max-width: 230px;
height: auto;
}
/* Controls + dots */
.work-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
margin-top: var(--s-5);
}
.work-dots {
display: inline-flex;
gap: 0.5rem;
}
.work-dots button {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--line);
border: none;
padding: 0;
cursor: pointer;
position: relative;
transition: width 0.3s ease, background 0.3s ease;
}
/* Extend the tap target to ~44px without changing the visual dot */
.work-dots button::before {
content: "";
position: absolute;
inset: -18px;
}
.work-dots button.active {
width: 26px;
background: var(--accent);
}
.working-cta {
margin-top: var(--s-6);
display: flex;
justify-content: center;
}
@media (max-width: 860px) {
.work-card .featured-inner { grid-template-columns: 1fr; gap: var(--s-6); }
.work-card .featured-visual { aspect-ratio: 16/10; order: -1; }
}
/* ============================================================
NTM v2 ADDITIONS — Microanimations, Widget, Team Photos
============================================================ */
/* ── MOBILE NAV (improved) ── */
@media (max-width: 720px) {
.nav-links.mobile-open {
display: flex !important;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
background: var(--bg);
padding: 1rem 1.5rem;
border-top: 1px solid var(--line);
z-index: 100;
gap: 0.25rem;
}
.nav-links.mobile-open a {
display: flex;
align-items: center;
min-height: 44px; /* comfortable touch target */
}
}
/* ── HERO WORD STAGGER ── */
.hero-headline.words-ready .word {
display: inline-block;
opacity: 0;
transform: translateY(16px);
animation: ntm-word-in 0.85s cubic-bezier(.2,.7,.2,1) forwards;
animation-delay: calc(var(--i, 0) * 0.065s + 0.05s);
}
@keyframes ntm-word-in {
to { opacity: 1; transform: translateY(0); }
}
/* ── THEME TOGGLE — dramatic crossfade ── */
.theme-toggle {
position: relative;
overflow: hidden;
}
.theme-toggle svg {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(.4,1.4,.5,1);
}
.theme-toggle .icon-sun { opacity: 1; transform: translate(-50%,-50%) rotate(0deg); }
.theme-toggle .icon-moon { opacity: 0; transform: translate(-50%,-50%) rotate(-180deg); display: block !important; }
[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: translate(-50%,-50%) rotate(180deg); display: block !important; }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: translate(-50%,-50%) rotate(0deg); }
.theme-toggle.spinning {
animation: ntm-spin 0.45s cubic-bezier(.4,1.2,.6,1);
}
@keyframes ntm-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ── IMAGE CLIP-PATH REVEAL ── */
.img-clip-target {
clip-path: inset(0 0 100% 0);
transition: clip-path 0.9s cubic-bezier(0.7, 0, 0.3, 1) 0.1s;
}
.img-clip-target.img-clip-in {
clip-path: inset(0 0 0% 0);
}
/* ── TEAM PHOTOS — editorial grayscale hover ── */
.team-card .photo {
overflow: hidden;
}
.team-card .photo-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
filter: saturate(0.72);
transition: transform 0.6s cubic-bezier(.2,.7,.2,1), filter 0.5s ease;
}
.team-card:hover .photo-img {
transform: scale(1.05);
filter: saturate(1);
}
/* ── HERO BG MOUSE REVEAL ── */
/* Dark hero — full-bleed skyline backdrop + cursor spotlight.
Text tokens are flipped to light, scoped to the hero only. */
.hero {
--mx: 50%;
--my: 32%;
--ink: #F7F3EC;
--ink-soft: #E7E0D4;
--ink-muted: #B9B1A2;
--bg: #1A2422;
--line: rgba(255,255,255,0.18);
background: #1A2422;
isolation: isolate;
}
.hero-bg-reveal {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(45%) contrast(1.0) brightness(0.55);
opacity: 1;
}
/* Dark-teal veil (matches dark-mode tone) + left-heavy legibility gradient */
.hero-bg-reveal::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(105deg,
rgba(20,28,26,0.62) 0%,
rgba(20,28,26,0.20) 60%,
transparent 100%),
rgba(26,36,34,0.55);
}
/* Additive warm spotlight that follows the cursor — brightens the skyline */
.hero-spotlight {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
mix-blend-mode: screen;
background: radial-gradient(circle 360px at var(--mx) var(--my),
rgba(255,224,196,0.45) 0%,
rgba(255,210,180,0.16) 38%,
transparent 70%);
transition: background 80ms linear;
}
[data-theme="dark"] .hero { background: #131C1A; --bg: #131C1A; }
/* Touch / no-hover: static dark backdrop + scrim, no moving spotlight */
@media (hover: none) {
.hero-spotlight { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero-spotlight { transition: none; }
/* Show revealed content instantly — no slide, no fade-in delay */
html.js .reveal,
html.js .reveal.in { opacity: 1; transform: none; transition: none; }
/* Silence the always-running decorative loops */
.hero-scroll-hint::after { animation: none; }
.careers-cta::before { animation: none; }
.marquee-track { animation: none; }
.img-clip-target { transition: none; clip-path: none; }
.hero-headline.words-ready .word { opacity: 1; transform: none; animation: none; }
.theme-toggle.spinning { animation: none; }
html { scroll-behavior: auto; }
}
/* Ensure hero content sits above the bg + spotlight layers */
.hero .container { position: relative; z-index: 1; }
/* ── COLOR WIDGET ── */
.cw {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 998;
display: flex;
align-items: center; /* center-align: trigger stays vertically centered at panel midpoint */
font-family: var(--f-display);
}
.cw-panel {
order: 1;
width: 0;
overflow-x: hidden; /* clips during width animation */
overflow-y: auto; /* allows vertical scroll when taller than viewport */
max-height: 82vh;
background: var(--bg-card);
/* Closed state: no visible chrome — border + shadow only appear when open,
otherwise a 1px sliver and the box-shadow leak out at width:0 */
border: 1px solid transparent;
border-right: none;
border-radius: 10px 0 0 10px;
transition: width 0.32s cubic-bezier(.4,0,.2,1), border-color 0.32s ease, box-shadow 0.32s ease;
box-shadow: none;
}
.cw[data-open] .cw-panel {
width: 268px;
border-color: var(--line);
box-shadow: -8px 0 32px -12px rgba(22,21,19,0.18);
}
.cw-trigger {
order: 2;
width: 40px;
height: 40px;
flex-shrink: 0;
align-self: center;
background: var(--bg-card);
border: 1px solid var(--line);
border-right: none;
border-radius: 8px 0 0 8px;
display: grid;
place-items: center;
cursor: pointer;
color: var(--ink-muted);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
padding: 0;
}
.cw-trigger:hover {
background: var(--accent-soft);
color: var(--accent);
border-color: var(--accent);
}
.cw-trigger svg { display: block; }
/* Panel inner */
.cw-panel-inner {
width: 268px;
min-width: 268px;
padding: 1.25rem 1.1rem 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
max-height: 90vh;
overflow-y: auto;
overflow-x: hidden;
}
.cw-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.4rem;
}
.cw-title {
font-family: var(--f-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink-muted);
}
.cw-close {
width: 26px; height: 26px;
border-radius: 50%;
display: grid; place-items: center;
background: transparent;
border: 1px solid var(--line);
color: var(--ink-muted);
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.cw-close:hover { background: var(--ink); color: var(--bg); }
.cw-controls {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.cw-ctrl-label {
display: block;
font-family: var(--f-mono);
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 0.35rem;
}
.cw-ctrl-row {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0.25rem 0.5rem;
transition: border-color 0.2s;
}
.cw-ctrl-row:focus-within { border-color: var(--accent); }
.cw-swatch {
width: 28px; height: 28px;
border-radius: 4px;
flex-shrink: 0;
cursor: pointer;
border: 1px solid rgba(0,0,0,0.1);
transition: transform 0.2s;
}
.cw-swatch:hover { transform: scale(1.1); }
.cw-native {
position: absolute;
opacity: 0;
width: 0; height: 0;
pointer-events: none;
}
.cw-hex {
flex: 1;
background: transparent;
border: none;
font-family: var(--f-mono);
font-size: 0.8rem;
color: var(--ink);
outline: none;
min-width: 0;
padding: 0.2rem 0;
}
.cw-warn {
font-family: var(--f-mono);
font-size: 0.7rem;
color: #E85454;
background: rgba(232,84,84,0.1);
border: 1px solid rgba(232,84,84,0.25);
border-radius: 4px;
padding: 0.4rem 0.6rem;
line-height: 1.4;
}
.cw-reset {
width: 100%;
padding: 0.65rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: transparent;
font-family: var(--f-display);
font-size: 0.85rem;
font-weight: 500;
color: var(--ink-soft);
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
text-align: center;
}
.cw-reset:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cw-note {
font-family: var(--f-mono);
font-size: 0.65rem;
color: var(--ink-muted);
text-align: center;
margin: 0;
letter-spacing: 0.04em;
opacity: 0.8;
}
/* Mobile: hide on very small screens, show as mini button */
@media (max-width: 480px) {
.cw { top: auto; bottom: 1rem; transform: none; }
.cw[data-open] .cw-panel { width: calc(100vw - 60px); max-width: 268px; }
}
/* ── HERO BG reveal — make sure hero has proper position ── */
.hero { overflow: hidden; }
/* ── TEAM "MORE" TILE ── */
.team-card .team-more {
background: linear-gradient(135deg, var(--ink) 0%, var(--green-mute) 100%);
}
.team-card .team-more .initials {
color: var(--accent);
font-size: 3.5rem;
}
/* ── TEAM GRID — 4 cols for 14 cards ── */
@media (min-width: 1024px) {
.team-page-grid { grid-template-columns: repeat(4, 1fr); }
}
/* ── FONT WIDGET ── */
.cw-section-divider {
border: none;
border-top: 1px solid var(--line);
margin: 0.6rem 0 0.75rem;
}
.cw-section-title {
font-family: var(--f-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink-muted);
display: block;
margin-bottom: 0.6rem;
}
.cw-font-ctrl {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.cw-font-select {
width: 100%;
padding: 0.5rem 0.65rem;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
font-family: var(--f-display);
font-size: 0.85rem;
color: var(--ink);
cursor: pointer;
transition: border-color 0.2s ease;
-webkit-appearance: auto;
appearance: auto;
}
.cw-font-select:focus {
border-color: var(--accent);
outline: none;
}
.cw-font-preview {
font-size: 1.05rem;
color: var(--ink-muted);
padding: 0.2rem 0 0.35rem;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.01em;
transition: font-family 0.2s ease;
}
.cw-font-ctrl[data-font-key="serif"] .cw-font-preview {
font-style: italic;
font-size: 1.15rem;
}
/* ── FONT SIZE SLIDER ── */
.cw-size-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.2rem 0 0;
}
.cw-size-row label {
font-family: var(--f-mono);
font-size: 0.63rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-muted);
white-space: nowrap;
flex-shrink: 0;
}
.cw-size-slider {
flex: 1;
height: 2px;
accent-color: var(--accent);
cursor: pointer;
min-width: 0;
}
.cw-size-val {
font-family: var(--f-mono);
font-size: 0.72rem;
font-weight: 500;
color: var(--ink);
min-width: 2.8rem;
text-align: right;
flex-shrink: 0;
}
/* ── EXTRA COLOR CONTROLS — split in two columns ── */
.cw-colors-extra {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.cw-colors-extra .cw-ctrl-label {
font-size: 0.62rem;
}
.cw-colors-extra .cw-ctrl-row {
padding: 0.18rem 0.35rem;
gap: 0.35rem;
}
.cw-colors-extra .cw-swatch {
width: 22px;
height: 22px;
}
.cw-colors-extra .cw-hex {
font-size: 0.72rem;
}
/* ── FONT WEIGHT SLIDER ── */
.cw-weight-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.15rem 0 0;
}
.cw-weight-row label {
font-family: var(--f-mono);
font-size: 0.63rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-muted);
white-space: nowrap;
flex-shrink: 0;
min-width: 3rem;
}
.cw-weight-slider {
flex: 1;
height: 2px;
accent-color: var(--accent);
cursor: pointer;
min-width: 0;
}
.cw-weight-val {
font-family: var(--f-mono);
font-size: 0.72rem;
font-weight: 500;
color: var(--ink);
min-width: 2.2rem;
text-align: right;
flex-shrink: 0;
}
/* ── EXPORT / IMPORT ── */
.cw-io-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.cw-io-btn {
padding: 0.55rem 0.4rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: transparent;
font-family: var(--f-mono);
font-size: 0.72rem;
font-weight: 500;
color: var(--ink-muted);
cursor: pointer;
text-align: center;
transition: background 0.2s, color 0.2s, border-color 0.2s;
white-space: nowrap;
}
.cw-io-btn:hover {
background: var(--accent-soft);
color: var(--accent);
border-color: var(--accent);
}
.cw-io-btn.import-btn:hover {
background: var(--green-mute);
color: var(--bg);
border-color: var(--green-mute);
}
/* ── EXPORT / IMPORT TEXTAREA ── */
.cw-io-textarea {
width: 100%;
min-height: 90px;
max-height: 180px;
resize: vertical;
font-family: var(--f-mono);
font-size: 0.67rem;
line-height: 1.45;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--ink);
padding: 0.55rem;
outline: none;
display: none;
box-sizing: border-box;
transition: border-color 0.2s;
}
.cw-io-textarea:focus { border-color: var(--accent); }
.cw-io-textarea.visible { display: block; }