/* ============================================================
CURRENT - currentstudio.nz
Video marketing partner, Auckland
============================================================ */
/* Fonts are loaded via in each page's , not @import here:
an @import inside the stylesheet serialises the request behind the CSS. */
/* ---------- Tokens ----------
The Grading Suite. See CLAUDE.md for the binding rules. Amber is the only
accent and must not exceed roughly 10% of any screen. No serif, no mono,
no shadow, no glass. */
:root {
--ink: #100e0c; /* warm-dark base */
--off-white: #ede9e2; /* warm off-white text */
--amber: #e8a33d; /* Graded Amber, the only accent */
--amber-hover: #f0b457; /* Amber Glow */
--stone: #918b82; /* captions, micro-labels, meta. 5.7:1 on base */
--ink-2: #a89f92; /* secondary body copy. 7.3:1 on base, passes AA */
/* stepped warm-dark surfaces */
--surface-1: #17140f;
--surface-2: #1e1a14;
--surface-3: #28231b;
/* derived */
--hairline: rgba(237, 233, 226, 0.10);
--hairline-2: rgba(237, 233, 226, 0.18);
--font-head: 'Bricolage Grotesque', system-ui, sans-serif; /* 700-800, upright */
--font-body: 'Hanken Grotesk', system-ui, sans-serif;
--font-label: 'Hanken Grotesk', system-ui, sans-serif; /* tracked caps, never mono */
--maxw: 1240px;
--gutter: clamp(20px, 5vw, 64px);
--radius: 2px;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
background: var(--ink);
color: var(--off-white);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Keyboard focus: visible ring, never removed without replacement */
:focus-visible {
outline: 2px solid var(--amber);
outline-offset: 3px;
border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }
/* ---------- Grain overlay ---------- */
.grain {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: 0.35;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- Layout helpers ---------- */
.wrap {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
}
section { position: relative; }
.section-pad { padding-block: clamp(72px, 11vw, 160px); }
.rule { height: 1px; background: var(--hairline); border: 0; }
/* ---------- Typography ---------- */
.label {
font-family: var(--font-label);
font-weight: 600;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--amber);
display: inline-block;
}
.label--stone { color: var(--stone); }
.label--bright { color: var(--off-white); }
.display {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(48px, 9vw, 116px);
line-height: 0.98;
letter-spacing: -0.02em;
text-wrap: balance;
}
.section-title {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(32px, 5vw, 54px);
line-height: 1.05;
letter-spacing: -0.01em;
text-wrap: balance;
}
.section-title em { font-style: normal; font-weight: 700; color: var(--amber); }
h1, .h1 {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(26px, 3.4vw, 36px);
line-height: 1.1;
letter-spacing: -0.01em;
}
.lede {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.65;
color: var(--off-white);
max-width: 56ch;
}
p { max-width: 64ch; text-wrap: pretty; }
p + p { margin-top: 1.1em; }
.muted { color: var(--ink-2); }
.eyebrow-gap { margin-bottom: 22px; }
.title-gap { margin-bottom: 26px; }
/* ---------- Buttons ---------- */
.btn {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 0.6em;
padding: 14px 24px;
border-radius: var(--radius);
border: 1px solid transparent;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
background: var(--off-white);
color: var(--ink);
}
.btn--primary:hover { background: #f7f4ee; }
.btn--ghost {
background: transparent;
color: var(--off-white);
border-color: var(--hairline-2);
}
.btn--ghost:hover { border-color: var(--off-white); }
.btn--accent {
background: var(--amber);
color: var(--ink);
}
.btn--accent:hover { background: var(--amber-hover); }
.link-arrow {
font-family: var(--font-label);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
display: inline-flex;
align-items: center;
gap: 0.5em;
color: var(--off-white);
border-bottom: 1px solid var(--amber);
padding-bottom: 3px;
transition: gap 0.25s ease, color 0.25s ease;
}
.link-arrow:hover { gap: 0.9em; color: var(--amber); }
/* ---------- Navigation ---------- */
.nav {
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid transparent;
transition: background 0.3s ease, border-color 0.3s ease;
}
/* Flat opaque ink on scroll. No blur: the Grading Suite has no glass. */
.nav.scrolled {
background: var(--ink);
border-bottom-color: var(--hairline);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.wordmark {
font-family: var(--font-head);
font-weight: 700;
font-size: 22px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--off-white);
}
.wordmark .dot { color: var(--amber); }
.nav__links {
display: flex;
align-items: center;
gap: 34px;
list-style: none;
}
.nav__links a {
font-family: var(--font-label);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--off-white);
opacity: 0.78;
transition: opacity 0.2s ease;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { opacity: 1; }
.nav__links a[aria-current="page"] { color: var(--amber); }
.nav__cta {
font-family: var(--font-label);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--off-white);
border-bottom: 1px solid var(--amber);
padding-bottom: 3px;
transition: color 0.2s ease;
}
.nav__cta:hover { color: var(--amber); }
/* Mobile dropdown is hidden by default; the toggle/media query reveal it on small screens */
.nav__menu { display: none; }
.nav__toggle {
display: none;
background: none;
border: 0;
color: var(--off-white);
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
}
/* ---------- Hero ---------- */
.hero { padding-block: clamp(40px, 6vw, 84px) clamp(48px, 7vw, 96px); }
.hero__eyebrow { margin-bottom: 28px; }
.hero__title {
font-family: var(--font-head);
font-weight: 800;
font-size: clamp(44px, 8.5vw, 104px);
line-height: 0.98;
letter-spacing: -0.02em;
max-width: 16ch;
text-wrap: balance;
}
.hero__sub {
margin-top: 32px;
max-width: 60ch;
font-size: clamp(16px, 1.5vw, 19px);
color: var(--off-white);
}
.hero__actions {
margin-top: 40px;
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
}
/* ---------- Logos bar ---------- */
.logos {
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
padding-block: clamp(28px, 4vw, 44px);
}
.logos__label { margin-bottom: 24px; }
/* Marquee viewport: clips overflow and fades both edges. */
.logos__row {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logos__track {
display: flex;
align-items: center;
width: max-content;
animation: logos-marquee 42s linear infinite;
}
.logos__row:hover .logos__track { animation-play-state: paused; }
@keyframes logos-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.logos__item {
flex: none;
display: inline-flex;
align-items: center;
/* trailing margin on every item makes the -50% loop seamless */
margin-right: clamp(44px, 6vw, 84px);
}
@media (prefers-reduced-motion: reduce) {
.logos__row { -webkit-mask-image: none; mask-image: none; }
.logos__track { animation: none; flex-wrap: wrap; }
.logos__item { margin-bottom: 22px; }
}
/* Logo wall, two modes.
DEFAULT (mono): the file is already a white or single-colour mark on
transparency. Its silhouette IS the logo, so flattening it to off-white is
safe and gives a uniform wall.
.logos__item img--colour: the file is full-colour brand art whose meaning
depends on knocked-out detail, like white type inside a coloured badge.
Flattening that to a silhouette destroys it: Tegel would render as a solid
white hexagon. These are desaturated and lifted instead, which keeps the
internal structure readable on the ink base. */
.logos__item img {
height: 34px;
width: auto;
max-width: 165px;
object-fit: contain;
filter: grayscale(1) brightness(0) invert(0.92);
opacity: 0.6;
transition: opacity 0.25s ease, filter 0.25s ease;
}
.logos__item img.img--colour {
filter: grayscale(1) brightness(1.45) contrast(0.9);
opacity: 0.7;
}
/* Squarish marks get more height so they carry similar visual weight to the
wide wordmarks sitting next to them. Set from JS once dimensions are known. */
.logos__item img.img--squarish { height: 48px; }
.logos__item:hover img { opacity: 1; }
.logos__item:hover img.img--colour { filter: grayscale(0.25) brightness(1.1); }
/* Text wordmark shown until a logo file is dropped in. */
.logos__text {
font-family: var(--font-head);
font-weight: 600;
font-size: 17px;
letter-spacing: 0.01em;
color: var(--stone);
white-space: nowrap;
opacity: 0.9;
transition: color 0.25s ease, opacity 0.25s ease;
}
.logos__item:hover .logos__text { color: var(--off-white); opacity: 1; }
/* ---------- Generic grid ---------- */
.grid { display: grid; gap: clamp(20px, 3vw, 40px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* ---------- Split header ---------- */
.split {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(28px, 5vw, 72px);
align-items: start;
}
/* ---------- Pillars ---------- */
.pillar {
border-top: 1px solid var(--hairline-2);
padding-top: 26px;
}
.pillar__mark {
display: block;
width: 28px;
height: 2px;
background: var(--amber);
margin-bottom: 18px;
}
.pillar__title { margin-bottom: 14px; }
.pillar__body { color: var(--ink-2); font-size: 15px; }
/* ---------- Timeline ---------- */
.timeline { display: grid; gap: 0; }
.tl-row {
display: grid;
grid-template-columns: 140px 1fr;
gap: clamp(16px, 3vw, 48px);
padding-block: 28px;
border-top: 1px solid var(--hairline);
align-items: baseline;
}
.tl-row:last-child { border-bottom: 1px solid var(--hairline); }
.tl-week {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--amber);
}
.tl-body h3 {
font-family: var(--font-head);
font-weight: 700;
font-size: 24px;
margin-bottom: 6px;
}
.tl-body p { color: var(--ink-2); font-size: 15px; }
/* ---------- Packages ---------- */
.packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(20px, 3vw, 32px); }
.pkg {
background: var(--surface-1);
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: clamp(28px, 4vw, 44px);
display: flex;
flex-direction: column;
}
.pkg--featured {
background: var(--surface-2);
border-color: var(--amber);
}
.pkg__tag {
align-self: flex-start;
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--amber);
border: 1px solid var(--amber);
padding: 4px 10px;
border-radius: var(--radius);
margin-bottom: 22px;
}
.pkg__name {
font-family: var(--font-head);
font-weight: 700;
font-size: 30px;
margin-bottom: 8px;
}
.pkg__price {
font-family: var(--font-head);
font-weight: 700;
font-size: 40px;
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.pkg__price span { font-size: 15px; color: var(--stone); font-family: var(--font-body); }
.pkg__list { list-style: none; margin: 24px 0 28px; display: grid; gap: 12px; }
.pkg__list li {
font-size: 15px;
padding-left: 22px;
position: relative;
color: var(--off-white);
}
.pkg__list li::before {
content: "";
position: absolute;
left: 0; top: 0.62em;
width: 8px; height: 1px;
background: var(--amber);
}
.pkg__for { color: var(--ink-2); margin-bottom: 24px; font-family: var(--font-body); font-size: 16px; }
.pkg .btn { margin-top: auto; justify-content: center; }
.pkg__note { margin-top: 24px; font-size: 13px; color: var(--ink-2); max-width: 70ch; }
/* ---------- Risk reversal ---------- */
.risk {
background: var(--surface-1);
border: 1px solid var(--hairline-2);
border-top: 2px solid var(--amber);
border-radius: var(--radius);
padding: clamp(36px, 6vw, 72px);
}
.risk .section-title { max-width: 22ch; margin-bottom: 20px; }
.risk p { max-width: 62ch; color: var(--off-white); }
.risk .btn { margin-top: 34px; }
/* ---------- Image placeholder ---------- */
.ph {
background:
repeating-linear-gradient(45deg, rgba(240,235,227,0.014) 0 14px, transparent 14px 28px),
var(--surface-2);
border: 1px solid var(--hairline);
border-radius: var(--radius);
display: flex;
align-items: flex-end;
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
}
.ph__label {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--stone);
padding: 16px;
}
/* Filled slot: the real photo replaces the hatched placeholder entirely. */
.ph--filled { background: var(--surface-1); }
.ph__img { width: 100%; height: 100%; object-fit: cover; }
/* Logo slot. A brand mark has to sit inside the frame whole, so it is
contained and inset rather than cropped to fill. Logos need to be off-white
or mono to read on this surface, same requirement as the logo wall. */
.ph--logo { background: var(--surface-2); }
.ph--logo.ph--filled { background: var(--surface-2); }
.ph--logo .ph__img { object-fit: contain; padding: 16% 18%; }
.ph--tall { aspect-ratio: 4 / 5; }
.ph--wide { aspect-ratio: 21 / 9; }
.ph--square { aspect-ratio: 1 / 1; }
/* ---------- Case study cards ---------- */
.case {
background: var(--surface-1);
border: 1px solid var(--hairline);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.case:hover { border-color: var(--hairline-2); transform: translateY(-3px); }
.case__body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.case__name { font-family: var(--font-head); font-weight: 700; font-size: 26px; }
.case__desc { color: var(--ink-2); font-size: 14px; }
.case__soon {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--amber);
margin-top: 6px;
}
/* ---------- Pull quote ---------- */
.pullquote {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(30px, 5vw, 56px);
line-height: 1.12;
letter-spacing: -0.01em;
max-width: 20ch;
}
.pullquote .mark { color: var(--amber); }
/* ---------- Hero reel ---------- */
/* Background showreel sits behind the hero copy. If the video file is
missing the section simply shows the ink base, so nothing breaks. */
.hero--reel { position: relative; overflow: hidden; }
.hero--reel .wrap { position: relative; }
.hero__media { position: absolute; inset: 0; }
.hero__media video {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.45;
}
/* Legibility scrim: type always reads against the reel. */
.hero__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16,14,12,0.6), rgba(16,14,12,0.35) 45%, var(--ink));
}
.hero__trust {
margin-top: 26px;
color: var(--ink-2);
font-size: 15px;
max-width: 56ch;
}
/* ---------- Testimonials ---------- */
.quote {
background: var(--surface-1);
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: clamp(28px, 4vw, 40px);
display: flex;
flex-direction: column;
gap: 24px;
}
.quote__text {
font-family: var(--font-head);
font-weight: 600;
font-size: 19px;
line-height: 1.35;
letter-spacing: -0.005em;
}
.quote__who { margin-top: auto; font-size: 13px; color: var(--stone); }
.quote__who strong {
display: block;
color: var(--off-white);
font-weight: 600;
font-size: 14px;
margin-bottom: 2px;
}
/* ---------- FAQ ---------- */
/* Native : no JS, keyboard accessible for free. */
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
padding-block: 24px;
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(18px, 2vw, 24px);
line-height: 1.2;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
color: var(--amber);
font-weight: 600;
flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq__a { padding-bottom: 26px; color: var(--ink-2); max-width: 62ch; }
/* ---------- Contact / form ---------- */
/* No auto-numbered markers. A short amber rule marks each item instead. */
.qlist { list-style: none; display: grid; gap: 20px; margin-top: 40px; }
.qlist li {
border-top: 1px solid var(--hairline);
padding-top: 18px;
position: relative;
padding-left: 30px;
}
.qlist li::before {
content: "";
position: absolute;
left: 0; top: 30px;
width: 14px; height: 1px;
background: var(--amber);
}
.qlist strong { font-weight: 500; }
.qlist .sub { display: block; color: var(--ink-2); font-size: 13px; margin-top: 6px; }
/* ---------- Portfolio ---------- */
.filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 40px;
}
.filter {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--stone);
background: transparent;
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: 9px 16px;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.filter:hover { color: var(--off-white); border-color: var(--hairline-2); }
.filter.active { color: var(--ink); background: var(--off-white); border-color: var(--off-white); }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.work-empty {
grid-column: 1 / -1;
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.8rem;
color: var(--stone);
padding: clamp(48px, 8vw, 96px) 0;
text-align: center;
}
.work-card {
text-align: left;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 14px;
font: inherit;
color: inherit;
}
.work-card .ph { transition: border-color 0.25s ease; }
.work-card:hover .ph { border-color: var(--amber); }
.work-card__meta { display: flex; flex-direction: column; gap: 4px; }
.work-card__title { font-family: var(--font-head); font-weight: 700; font-size: 21px; line-height: 1.1; }
.work-card__client { color: var(--stone); font-size: 13px; }
.work-card__cat {
font-family: var(--font-label);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--amber);
margin-top: 4px;
}
/* ---------- Modal / lightbox ---------- */
.modal {
position: fixed;
inset: 0;
z-index: 5000;
display: none;
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 48px);
}
.modal.open { display: flex; }
.modal__backdrop {
position: absolute;
inset: 0;
/* Near-opaque ink, no blur. Flat surfaces only. */
background: rgba(16, 14, 12, 0.94);
}
.modal__panel {
position: relative;
z-index: 1;
width: min(880px, 100%);
max-height: 90vh;
overflow-y: auto;
background: var(--surface-1);
border: 1px solid var(--hairline-2);
border-radius: var(--radius);
padding: clamp(20px, 3vw, 36px);
}
.modal__close {
position: absolute;
top: 16px; right: 16px;
background: none;
border: 1px solid var(--hairline-2);
color: var(--off-white);
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.12em;
padding: 7px 12px;
border-radius: var(--radius);
cursor: pointer;
z-index: 2;
}
.modal__close:hover { border-color: var(--off-white); }
.modal__player {
background: var(--ink);
border: 1px solid var(--hairline);
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 26px;
border-radius: var(--radius);
}
.modal__player .label { color: var(--stone); }
.modal__cat { margin-bottom: 12px; }
.modal__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(28px, 4vw, 40px); margin-bottom: 6px; }
.modal__client { color: var(--stone); font-size: 14px; margin-bottom: 20px; }
.modal__desc { color: var(--off-white); }
/* ---------- Footer ---------- */
.footer {
border-top: 1px solid var(--hairline);
padding-block: clamp(48px, 7vw, 88px);
}
.footer__top {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: 40px;
margin-bottom: 56px;
}
.footer__brand .wordmark { font-size: 26px; display: inline-block; margin-bottom: 14px; }
.footer__tag { color: var(--stone); font-family: var(--font-head); font-weight: 600; font-size: 20px; max-width: 22ch; }
.footer__col .footer__h {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--stone);
margin-bottom: 18px;
font-weight: 400;
}
.footer__col ul { list-style: none; display: grid; gap: 12px; }
.footer__col a { font-size: 15px; color: var(--off-white); opacity: 0.82; transition: opacity 0.2s ease, color 0.2s; }
.footer__col a:hover { opacity: 1; color: var(--amber); }
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
border-top: 1px solid var(--hairline);
padding-top: 26px;
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--stone);
}
/* ============================================================
MOTION
Native, dependency-free scroll-driven motion. Built to match
"The Grading Suite": restrained, weighted, every move earns its
place. No animation library. CSS transitions, IntersectionObserver,
and (where supported) scroll-driven animation-timeline.
============================================================ */
/* ---------- Reveal on scroll (staggered) ---------- */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
/* --reveal-i set per-sibling in main.js so grouped items cascade in */
transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
.reveal.in { opacity: 1; transform: none; }
/* ---------- Hero headline: word-by-word clip reveal ---------- */
/* main.js wraps each word of .hero__title in .word > .word__inner.
Each word's slab clips up from below with a weighted cascade. */
.hero__title .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.04em; }
.hero__title .word__inner {
display: inline-block;
transform: translateY(110%);
transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(0.18s + var(--word-i, 0) * 0.06s);
}
.hero__title.words-in .word__inner { transform: none; }
/* ---------- Timeline: scroll-driven progress spine ---------- */
.timeline { position: relative; padding-left: clamp(20px, 3vw, 34px); }
.timeline::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: var(--hairline-2);
}
.timeline::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 2px;
height: 100%;
background: var(--amber);
transform-origin: top;
transform: scaleY(0);
}
/* Where scroll-driven animation is supported, the amber spine fills as
the timeline travels through the viewport. Elsewhere it stays full
(a static amber rule), so the layout never depends on the effect. */
@supports (animation-timeline: view()) {
@keyframes tl-spine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.timeline::after {
animation: tl-spine linear both;
animation-timeline: view();
animation-range: entry 10% cover 65%;
}
}
@supports not (animation-timeline: view()) {
.timeline::after { transform: scaleY(1); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.timeline:not(.in)::after { transform: scaleY(0); }
}
.tl-week { transition: color 0.4s ease; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.hero__title .word__inner { transform: none; transition: none; }
.timeline::after { animation: none; transform: scaleY(1); transition: none; }
html { scroll-behavior: auto; }
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.split { grid-template-columns: 1fr; }
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
.packages { grid-template-columns: 1fr; }
.work-grid { grid-template-columns: repeat(2, 1fr); }
.footer__top { grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
.nav__links, .nav__cta { display: none; }
.nav__toggle { display: inline-block; }
.nav.menu-open .nav__menu { display: flex; }
.nav__menu {
display: none;
flex-direction: column;
gap: 20px;
padding: 18px var(--gutter) 28px;
background: rgba(16,14,12,0.96);
border-bottom: 1px solid var(--hairline);
}
.nav__menu a {
font-family: var(--font-label);
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--off-white);
}
.grid-3, .grid-4, .work-grid { grid-template-columns: 1fr; }
.tl-row { grid-template-columns: 1fr; gap: 6px; }
.footer__top { grid-template-columns: 1fr; }
}
/* ============================================================
COMPONENTS ADDED FOR LAUNCH
USP bar, sticky mobile CTA, consent notice, forms, case study
pages, events, showcase, legal prose. All flat, hairline-bounded,
2px radius. Amber only where it earns attention.
============================================================ */
/* ---------- USP bar (sits directly under the hero) ---------- */
.usp {
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
background: var(--surface-1);
}
.usp__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.usp__item {
padding: clamp(22px, 3vw, 32px) clamp(16px, 2.4vw, 32px);
border-left: 1px solid var(--hairline);
}
.usp__item:first-child { border-left: 0; padding-left: 0; }
.usp__item:last-child { padding-right: 0; }
.usp__key {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(17px, 1.9vw, 21px);
line-height: 1.15;
letter-spacing: -0.01em;
margin-bottom: 8px;
}
.usp__note { color: var(--ink-2); font-size: 13px; line-height: 1.5; max-width: 30ch; }
@media (max-width: 900px) {
.usp__row { grid-template-columns: repeat(2, 1fr); }
.usp__item:nth-child(odd) { border-left: 0; padding-left: 0; }
.usp__item:nth-child(3), .usp__item:nth-child(4) { border-top: 1px solid var(--hairline); }
.usp__item:last-child { padding-right: clamp(16px, 2.4vw, 32px); }
}
@media (max-width: 560px) {
.usp__row { grid-template-columns: 1fr; }
.usp__item { border-left: 0; padding-left: 0; padding-right: 0; }
.usp__item + .usp__item { border-top: 1px solid var(--hairline); }
}
/* ---------- Sticky CTA, mobile only ----------
Hidden at 641px and up. The body gets matching bottom padding on
small screens so the bar never sits over the last line of content. */
.sticky-cta { display: none; }
@media (max-width: 640px) {
.sticky-cta {
display: flex;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 900;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: var(--surface-1);
border-top: 1px solid var(--hairline-2);
}
.sticky-cta__text {
font-family: var(--font-head);
font-weight: 700;
font-size: 14px;
line-height: 1.2;
}
.sticky-cta .btn { padding: 12px 18px; font-size: 11px; flex: none; }
body { padding-bottom: 76px; }
.footer { padding-bottom: clamp(48px, 7vw, 88px); }
}
/* ---------- Consent notice ----------
Only shown when GA4 is live. Small, on brand, no third party script. */
.consent {
display: none;
position: fixed;
left: clamp(16px, 3vw, 28px);
bottom: clamp(16px, 3vw, 28px);
z-index: 950;
width: min(380px, calc(100vw - 32px));
background: var(--surface-2);
border: 1px solid var(--hairline-2);
border-radius: var(--radius);
padding: 20px 22px;
}
.consent.show { display: block; }
.consent p { font-size: 13px; color: var(--ink-2); max-width: none; margin-bottom: 16px; }
.consent a { border-bottom: 1px solid var(--hairline-2); }
.consent a:hover { color: var(--amber); }
.consent__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent .btn { padding: 10px 16px; font-size: 11px; }
@media (max-width: 640px) {
.consent { bottom: 86px; }
}
/* ---------- Forms ---------- */
.form { display: grid; gap: 22px; margin-top: 36px; }
.field { display: grid; gap: 8px; }
.field label {
font-family: var(--font-label);
font-weight: 600;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--stone);
}
.field input,
.field select,
.field textarea {
font-family: var(--font-body);
font-size: 15px;
color: var(--off-white);
background: var(--surface-1);
border: 1px solid var(--hairline-2);
border-radius: var(--radius);
padding: 13px 14px;
width: 100%;
transition: border-color 0.2s ease;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--amber); outline: none; }
.field input::placeholder,
.field textarea::placeholder { color: var(--stone); opacity: 0.7; }
/* Native select arrow is a UA control; keep it, just match the surface. */
.field select { appearance: none; background-image: none; cursor: pointer; }
.field select option { background: var(--surface-1); color: var(--off-white); }
.form__note { font-size: 13px; color: var(--stone); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ---------- Editor note ----------
Marks copy Mitchell still has to confirm. Stone dashed, never amber:
an unfinished slot should not spend the accent budget. */
.note {
border: 1px dashed var(--stone);
border-radius: var(--radius);
padding: 14px 16px;
font-size: 13px;
color: var(--stone);
max-width: 62ch;
}
.note strong { color: var(--off-white); font-weight: 600; }
/* ---------- Case study pages ---------- */
.cs-hero { padding-block: clamp(56px, 10vw, 120px) clamp(28px, 4vw, 48px); }
.cs-hero h1 {
font-family: var(--font-head);
font-weight: 800;
font-size: clamp(38px, 6.5vw, 78px);
line-height: 1.0;
letter-spacing: -0.02em;
max-width: 16ch;
margin-top: 24px;
}
.cs-hero__sub { margin-top: 26px; max-width: 58ch; font-size: clamp(16px, 1.5vw, 19px); }
.cs-meta {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 3vw, 40px);
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
padding-block: 26px;
margin-top: clamp(32px, 5vw, 56px);
}
.cs-meta dt {
font-family: var(--font-label);
font-weight: 600;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--stone);
margin-bottom: 8px;
}
.cs-meta dd { font-size: 15px; line-height: 1.4; }
@media (max-width: 700px) { .cs-meta { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
/* Chapters. The eyebrow names the chapter, no auto-numbering. */
.cs-chapter {
display: grid;
grid-template-columns: 0.72fr 1.28fr;
gap: clamp(24px, 5vw, 72px);
padding-block: clamp(40px, 6vw, 72px);
border-top: 1px solid var(--hairline);
align-items: start;
}
.cs-chapter:first-of-type { border-top: 0; }
.cs-chapter h2 {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(26px, 3.4vw, 38px);
line-height: 1.08;
letter-spacing: -0.01em;
margin-top: 14px;
max-width: 16ch;
}
.cs-chapter__body > p { color: var(--off-white); }
.cs-chapter__body > p + p { margin-top: 1.1em; }
@media (max-width: 900px) { .cs-chapter { grid-template-columns: 1fr; } }
.cs-list { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.cs-list li { font-size: 15px; padding-left: 22px; position: relative; color: var(--off-white); }
.cs-list li::before {
content: "";
position: absolute;
left: 0; top: 0.62em;
width: 8px; height: 1px;
background: var(--amber);
}
/* Pending badge for case studies awaiting data. Stone, not amber. */
.cs-pending {
display: inline-block;
font-family: var(--font-label);
font-weight: 600;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--stone);
border: 1px solid var(--hairline-2);
border-radius: var(--radius);
padding: 5px 11px;
}
/* Prev / next between case studies */
.cs-next {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
border-top: 1px solid var(--hairline);
padding-top: 30px;
margin-top: clamp(40px, 6vw, 72px);
}
/* ---------- Showcase grid ---------- */
.showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 32px); }
.showcase__item {
background: var(--surface-1);
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: clamp(22px, 3vw, 30px);
}
.showcase__item h3 { font-family: var(--font-head); font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.showcase__item p { color: var(--ink-2); font-size: 14px; }
@media (max-width: 900px) { .showcase { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .showcase { grid-template-columns: 1fr; } }
/* External-link marker on portfolio cards: work that lives on someone
else's platform, so the card links out instead of opening the player. */
.work-card__ext {
font-family: var(--font-label);
font-weight: 600;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--stone);
margin-top: 4px;
}
/* Plays in the lightbox rather than leaving the site. Amber, because this is
the one action on the card worth spending accent on. */
.work-card__ext--play { color: var(--amber); }
.work-card__ext--play::before { content: "\25B6"; margin-right: 0.5em; font-size: 8px; }
.modal__link { margin-top: 22px; }
/* ---------- Legal / prose pages ---------- */
.prose { max-width: 70ch; }
.prose h2 {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(22px, 2.6vw, 28px);
letter-spacing: -0.01em;
margin-top: 48px;
margin-bottom: 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
font-family: var(--font-head);
font-weight: 700;
font-size: 18px;
margin-top: 28px;
margin-bottom: 10px;
}
.prose p, .prose li { color: var(--ink-2); font-size: 15px; }
.prose ul { list-style: none; display: grid; gap: 10px; margin: 16px 0; }
.prose ul li { padding-left: 22px; position: relative; }
.prose ul li::before {
content: "";
position: absolute;
left: 0; top: 0.68em;
width: 8px; height: 1px;
background: var(--stone);
}
.prose a { color: var(--off-white); border-bottom: 1px solid var(--hairline-2); }
.prose a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.prose .note { margin: 18px 0; }
.prose__updated {
font-family: var(--font-label);
font-weight: 600;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--stone);
margin-bottom: 40px;
}
/* ---------- Thank you page ---------- */
.thanks { padding-block: clamp(80px, 14vw, 180px); }
.thanks__title {
font-family: var(--font-head);
font-weight: 800;
font-size: clamp(40px, 7.5vw, 88px);
line-height: 0.98;
letter-spacing: -0.02em;
max-width: 14ch;
}
.thanks__mark { width: 44px; height: 2px; background: var(--amber); margin-bottom: 30px; }
.thanks__next { list-style: none; display: grid; gap: 0; margin-top: 44px; border-top: 1px solid var(--hairline); }
.thanks__next li {
border-bottom: 1px solid var(--hairline);
padding-block: 20px;
display: grid;
grid-template-columns: 190px 1fr;
gap: clamp(14px, 3vw, 40px);
align-items: baseline;
}
.thanks__when {
font-family: var(--font-label);
font-weight: 600;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--stone);
}
.thanks__what { font-size: 15px; color: var(--off-white); }
@media (max-width: 640px) { .thanks__next li { grid-template-columns: 1fr; gap: 6px; } }
/* ---------- Case study numbered blocks ----------
The source copy numbers these blocks as part of the writing, so the numeral
is content, not chrome. Set inline and quiet: no counter(), no oversized
decorative digits. */
.cs-step { border-top: 1px solid var(--hairline); padding-top: 22px; margin-top: 30px; }
.cs-step:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.cs-step h3 {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(18px, 2.1vw, 22px);
line-height: 1.2;
margin-bottom: 12px;
}
.cs-step h3 .n { color: var(--amber); margin-right: 0.5em; }
.cs-step p { color: var(--ink-2); font-size: 15px; }
.cs-step p + p { margin-top: 0.9em; }
.cs-step em { font-style: normal; color: var(--off-white); font-weight: 600; }
/* Quote slot sits in the template ready for a client quote. Stone, not amber:
an empty slot must not spend the accent budget. */
.cs-quote {
border-left: 2px solid var(--hairline-2);
padding: 4px 0 4px 24px;
margin-top: clamp(32px, 5vw, 52px);
}
.cs-quote blockquote {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(19px, 2.4vw, 26px);
line-height: 1.3;
max-width: 40ch;
}
.cs-quote figcaption { margin-top: 14px; font-size: 13px; color: var(--stone); }
/* ---------- Hero collage ----------
Fills the empty .hero__media layer left behind when the showreel was
dropped. Twelve stills from work already published on this site, laid out
as an asymmetric mosaic with ink showing through the gaps as hairlines.
Deliberately still. DESIGN.md forbids decorative motion, so there is no
drift or crossfade: the collage is texture, not an animation.
Everything here serves legibility of the h1 sitting on top: the tiles are
desaturated and darkened, and the scrim below adds a vertical and a
horizontal pass so the headline never lands on a bright patch. */
.hero-collage {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 2px;
}
.hero-collage img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.25) brightness(0.78) contrast(1.04);
}
/* Asymmetric spans so it reads as a composition, not a contact sheet. */
.hero-collage img:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.hero-collage img:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 2; }
.hero-collage img:nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 3; }
.hero-collage img:nth-child(4) { grid-column: 5 / 7; grid-row: 1 / 2; }
.hero-collage img:nth-child(5) { grid-column: 3 / 4; grid-row: 2 / 3; }
.hero-collage img:nth-child(6) { grid-column: 5 / 6; grid-row: 2 / 3; }
.hero-collage img:nth-child(7) { grid-column: 6 / 7; grid-row: 2 / 4; }
.hero-collage img:nth-child(8) { grid-column: 1 / 2; grid-row: 3 / 4; }
.hero-collage img:nth-child(9) { grid-column: 2 / 3; grid-row: 3 / 4; }
.hero-collage img:nth-child(10) { grid-column: 3 / 5; grid-row: 3 / 4; }
.hero-collage img:nth-child(11) { grid-column: 5 / 6; grid-row: 3 / 4; }
.hero-collage img:nth-child(12) { grid-column: 4 / 5; grid-row: 2 / 3; }
/* Two-pass scrim: vertical so the section melts into the page below, and a
left-weighted horizontal pass because that is where the type sits. */
.hero--reel .hero__media::after {
background:
linear-gradient(90deg, rgba(16,14,12,0.90) 0%, rgba(16,14,12,0.78) 30%, rgba(16,14,12,0.30) 62%, rgba(16,14,12,0.38) 100%),
linear-gradient(180deg, rgba(16,14,12,0.50), rgba(16,14,12,0.22) 45%, var(--ink) 96%);
}
@media (max-width: 900px) {
/* Fewer, larger tiles on small screens: a 12-cell mosaic turns to mush. */
.hero-collage { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
.hero-collage img:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 2; }
.hero-collage img:nth-child(2) { grid-column: 3 / 5; grid-row: 1 / 2; }
.hero-collage img:nth-child(3) { grid-column: 1 / 2; grid-row: 2 / 3; }
.hero-collage img:nth-child(4) { grid-column: 2 / 4; grid-row: 2 / 3; }
.hero-collage img:nth-child(5) { grid-column: 4 / 5; grid-row: 2 / 3; }
.hero-collage img:nth-child(6) { grid-column: 1 / 3; grid-row: 3 / 4; }
.hero-collage img:nth-child(7) { grid-column: 3 / 5; grid-row: 3 / 4; }
.hero-collage img:nth-child(n+8) { display: none; }
.hero--reel .hero__media::after {
background: linear-gradient(180deg, rgba(16,14,12,0.66), rgba(16,14,12,0.52) 40%, var(--ink) 96%);
}
}