/* ==============================================================
TOKENS | off-white base, deep ink, copper used like rare punctuation
============================================================== */
:root {
--bg: #F5F2EA;
--bg-tint: #EDE9DD;
--bg-deep: #E4DECD;
--ink: #16130D;
--ink-soft: #4A4337;
--ink-mute: #8A8170;
--rule: #DCD3BD;
--rule-soft: #E5DDC9;
--copper: #E15A03;
--copper-soft: #F47A30;
/* White: reserved for header (scrolled state) and footer only.
Sections never use white as a background per the design constitution
in CLAUDE.md. */
--bg-white: #FFFFFF;
--gut: clamp(20px, 4vw, 50px);
--max: 1280px;
--section: clamp(80px, 12vw, 168px);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Wider content on large screens so it doesn't feel marooned */
@media (min-width: 1700px) { :root { --max: 1420px; } }
@media (min-width: 2200px) { :root { --max: 1620px; --gut: 60px; } }
@media (min-width: 2800px) { :root { --max: 1820px; --gut: 68px; } }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; scrollbar-gutter: stable; }
body {
font-family: 'Onest', system-ui, sans-serif;
font-size: 16px;
line-height: 1.55;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--ink); color: var(--bg); }
/* ==============================================================
CURSOR-FOLLOWING HOVER IMAGE
============================================================== */
.cursor-img {
--rotate: 0deg;
position: fixed;
top: 0;
left: 0;
width: clamp(220px, 20vw, 320px);
aspect-ratio: 4 / 3;
pointer-events: none;
z-index: 200;
opacity: 0;
transform: translate(-50%, -50%) scale(0.92) rotate(var(--rotate));
transition: opacity 0.35s var(--ease), transform 0.55s var(--ease);
will-change: transform, opacity, left, top;
overflow: hidden;
border-radius: 2px;
box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.4);
}
.cursor-img.is-active {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(var(--rotate));
}
.cursor-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Disable on touch devices */
@media (hover: none) {
.cursor-img { display: none; }
}
/* Subtle hover signal on triggers */
[data-hover-img] {
cursor: pointer;
}
/* ==============================================================
TYPOGRAPHY | serif for soul, sans for everything operational
============================================================== */
.serif {
font-family: 'Fraunces', Georgia, serif;
font-weight: 300;
letter-spacing: -0.02em;
line-height: 1;
font-variation-settings: "opsz" 144, "SOFT" 30;
}
.display-xl {
font-family: 'Fraunces', Georgia, serif;
font-weight: 300;
font-size: clamp(3rem, 11vw, 11rem);
line-height: 0.92;
letter-spacing: -0.035em;
font-variation-settings: "opsz" 144, "SOFT" 30;
}
.display-l {
font-family: 'Fraunces', Georgia, serif;
font-weight: 300;
font-size: clamp(2.4rem, 7vw, 5.5rem);
line-height: 1;
letter-spacing: -0.025em;
font-variation-settings: "opsz" 144, "SOFT" 30;
}
.display-m {
font-family: 'Fraunces', Georgia, serif;
font-weight: 300;
font-size: clamp(1.9rem, 4.4vw, 3.3rem);
line-height: 1.04;
letter-spacing: -0.02em;
}
.display-s {
font-family: 'Fraunces', Georgia, serif;
font-weight: 400;
font-size: clamp(1.15rem, 1.6vw, 1.35rem);
line-height: 1.2;
letter-spacing: -0.01em;
}
.italic {
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-weight: 400;
letter-spacing: -0.005em;
}
.micro {
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
}
.label {
font-family: 'Onest', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 500;
color: var(--ink);
}
p.lead {
font-size: clamp(1rem, 1.3vw, 1.15rem);
color: var(--ink-soft);
line-height: 1.55;
max-width: 52ch;
}
/* Balance wrapping on headings and short subtitle blocks so single words
don't strand on their own line at narrow viewports. Browsers limit
balance to a few lines, so it's safe to apply broadly. */
h1, h2, h3,
.page-hero-blurb,
.hero-after .blurb,
.home-work-title,
.home-work-client,
.why-statement,
.why-lead,
.why-detail,
.why-data-stat,
.why-data-gloss,
.stage-title,
.stage-desc,
.stage-outcome,
.insight-card-title,
.post-meta,
.about-portrait .tag,
.about-creds .k {
text-wrap: balance;
}
/* ==============================================================
LAYOUT
============================================================== */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: var(--section) 0; }
hr.rule { border: 0; height: 1px; background: var(--rule); }
/* ==============================================================
HEADER
============================================================== */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 50;
transition: background 0.35s var(--ease), border-color 0.35s var(--ease), transform 250ms ease;
border-bottom: 1px solid transparent;
}
/* Class toggled by scripts/main.js on mobile (<920px) when the user
scrolls down past a 4px threshold. Removed on any upward scroll, near
the top of the page, or when the mobile menu is open. */
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.scrolled {
background: var(--bg-white);
border-bottom-color: var(--rule);
}
/* Note: no backdrop-filter when the mobile menu is open. backdrop-filter
turns the header into a containing block for `position: fixed` children,
which would constrain the mobile menu's box to just the header's 72px
and leave most of its background unpainted. */
body.menu-open .site-header {
background: var(--bg);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom-color: var(--rule);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0;
color: var(--copper);
text-decoration: none;
}
.brand-logo {
height: 28px;
width: auto;
display: block;
flex-shrink: 0;
}
.brand-text { display: none; }
/* Primary desktop nav. Hidden below 920px; mobile uses .menu-toggle + overlay. */
.nav-links {
display: none;
gap: 36px;
list-style: none;
align-items: center;
}
.nav-links a {
font-family: 'Onest', sans-serif;
font-size: 0.86rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--ink);
position: relative;
padding: 4px 0;
}
.nav-links a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 0; height: 1px;
background: var(--ink);
transition: width 0.4s var(--ease);
}
.nav-links a:hover::after { width: 100%; }
/* Active page: underline persists, recoloured to --copper. JS in
scripts/main.js sets aria-current="page" on the matching anchor. */
.nav-links a[aria-current="page"]::after {
width: 100%;
background: var(--copper);
}
.nav-links a[aria-current="page"]:hover::after {
background: var(--copper);
}
.nav-cta { display: none; }
/* Mobile menu trigger. Hidden at >=920px by the media query below.
Fixed-size square so the hamburger / X icon swap doesn't change the
button's width and shift "Let's talk" to the left as the menu opens.
The visible "Menu"/"Close" text was the cause of the shift; we hide
it visually but the button's aria-label still announces state. */
.menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
flex-shrink: 0;
}
.menu-toggle-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.menu-toggle-bars {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
width: 22px;
height: 14px;
}
.menu-toggle-bars span {
display: block;
width: 22px; height: 1px;
background: var(--ink);
transition: transform 0.4s var(--ease), opacity 0.3s;
}
body.menu-open .menu-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.menu-open .menu-toggle-bars span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
/* Desktop breakpoint: reveal the inline nav and the CTA, hide the hamburger. */
@media (min-width: 920px) {
.nav-links, .nav-cta { display: flex; }
.menu-toggle { display: none !important; }
}
.mobile-menu {
position: fixed;
inset: 72px 0 0 0;
background: var(--bg);
padding: 16px var(--gut) 24px;
transform: translateY(-12px);
opacity: 0;
visibility: hidden;
z-index: 49;
transition: transform 0.45s var(--ease), opacity 0.3s var(--ease), visibility 0s linear 0.3s;
display: flex;
flex-direction: column;
justify-content: space-between;
}
body.menu-open .mobile-menu {
transform: translateY(0);
opacity: 1;
visibility: visible;
transition: transform 0.45s var(--ease), opacity 0.3s var(--ease), visibility 0s;
}
.mobile-menu ol {
list-style: none;
counter-reset: m;
padding-top: 12px;
}
.mobile-menu li {
border-top: 1px solid var(--rule);
counter-increment: m;
}
.mobile-menu li:last-child { border-bottom: 1px solid var(--rule); }
.mobile-menu a {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 14px 0;
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.4rem, 5vw, 1.85rem);
letter-spacing: -0.02em;
}
.mobile-menu a::before {
content: "0" counter(m);
font-family: 'Onest', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.18em;
color: var(--ink-mute);
font-weight: 500;
}
.mobile-menu a span { flex: 1; padding-left: 24px; }
.mobile-menu .menu-foot {
padding-top: 24px;
font-size: 0.85rem;
color: var(--ink-soft);
}
.mobile-menu .menu-foot a { padding: 0; font-family: 'Onest', sans-serif; font-size: 0.95rem; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; display: inline; }
.mobile-menu .menu-foot a::before { display: none; }
@media (min-width: 920px) { .mobile-menu { display: none; } }
/* ==============================================================
BUTTONS
============================================================== */
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 22px;
font-size: 0.86rem;
font-weight: 500;
border-radius: 999px;
border: 1px solid var(--ink);
transition: all 0.3s var(--ease);
white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn .arr {
width: 14px; height: 8px;
transition: transform 0.3s var(--ease);
}
.btn:hover .arr { transform: translateX(4px); }
.btn-light { border-color: var(--bg); color: var(--bg); }
.btn-light:hover { background: var(--bg); color: var(--ink); }
.text-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.92rem;
padding: 6px 0;
position: relative;
color: var(--ink);
}
.text-link:hover svg { color: var(--copper); transition: color 0.25s var(--ease); }
.text-link::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 1px;
background: var(--ink);
transform-origin: right;
transition: transform 0.4s var(--ease);
}
.text-link:hover::after { transform: scaleX(0.6); transform-origin: left; }
.text-link svg { transition: transform 0.3s var(--ease); }
.text-link:hover svg { transform: translate(2px, -2px); }
/* ==============================================================
HERO | two-column layout (copy + image), full-width stats below
============================================================== */
.hero {
min-height: 100svh;
padding-top: clamp(88px, 11vw, 124px);
padding-bottom: clamp(28px, 3.5vw, 48px);
position: relative;
display: flex;
flex-direction: column;
isolation: isolate;
}
/* Fallback for browsers without svh support. */
@supports not (min-height: 100svh) {
.hero { min-height: 100vh; }
}
/* Three rows on desktop:
Row 1: meta tags band (full hero width; flex space-between pins
Copper Jetty left and Wayfinding Strategy right).
Row 2: copy column (~55%) and square image (~45%), both vertically
centred against each other.
Row 3: stats band spanning the full hero width.
align-items: center on the grid centres both row-2 items vertically
so the page no longer feels hollow on tall viewports. */
.hero > .wrap {
position: relative;
flex: 1;
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
grid-template-rows: auto 1fr auto;
column-gap: clamp(40px, 5vw, 80px);
row-gap: clamp(28px, 3.5vw, 48px);
align-items: center;
}
.hero-meta {
grid-column: 1 / -1;
grid-row: 1;
}
.hero-content {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
gap: clamp(28px, 4vw, 44px);
min-width: 0;
}
/* Square image panel sits in row 2 column 2. width: min(100%, 55vh)
guarantees a true square at every viewport: the panel takes the
smaller of the column width or 55vh, and aspect-ratio fills the
matching height. Previously max-height defeated aspect-ratio on
wide-but-short displays and the image came out wider than tall. */
.hero-image-panel {
grid-column: 2;
grid-row: 2;
position: relative;
aspect-ratio: 1 / 1;
width: min(100%, 55vh);
height: auto;
max-width: 100%;
align-self: center;
justify-self: center;
border-radius: 2px;
overflow: hidden;
background: var(--bg-tint);
}
.hero-image-panel img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.hero-image-panel img.is-active { opacity: 1; }
.hero-image-panel:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }
/* Reduced motion: hero-cycle.js bails so only the first frame shows;
arrows still work but transitions are instant. */
@media (prefers-reduced-motion: reduce) {
.hero-image-panel img { transition: none; }
}
/* Left/right manual nav arrows over the image. */
.hero-image-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(245, 242, 234, 0.86);
color: var(--ink);
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 2;
transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.hero-image-prev { left: 12px; }
.hero-image-next { right: 12px; }
.hero-image-nav:hover {
background: var(--copper);
color: #ffffff;
}
.hero-image-nav:focus-visible {
outline: 2px solid var(--copper);
outline-offset: 2px;
}
.hero-image-nav svg { display: block; }
@media (max-width: 880px) {
/* Mobile drops the desktop grid in favour of a flex column with
explicit `order` values, so no grid-row rule downstream can win
the cascade and shuffle the sections out of place. The order is:
meta -> copy -> stats -> image. */
.hero > .wrap {
display: flex;
flex-direction: column;
gap: clamp(28px, 5vw, 40px);
}
.hero-meta { order: 1; }
.hero-content { order: 2; }
.hero-foot { order: 3; }
.hero-image-panel {
order: 4;
width: min(100%, 56svh);
height: auto;
max-width: 100%;
align-self: center;
}
.hero-image-nav { width: 38px; height: 38px; }
}
.hero-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 16px;
margin: 0;
}
.hero-meta .left,
.hero-meta .right {
display: flex;
gap: 24px;
align-items: baseline;
flex-wrap: wrap;
}
.hero-main {
display: flex;
flex-direction: column;
gap: clamp(28px, 4vw, 48px);
}
.hero h1 {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(2.5rem, 6vw, 4.75rem);
line-height: 1.04;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 144, "SOFT" 30;
max-width: 18ch;
margin: 0;
text-wrap: balance;
}
/* Wide desktops (1700px+): widen the text column ratio and let the
headline use the full width. Three-line wrap at 1280-1440 stays,
but at 1920 the headline can settle into two balanced lines. The
image column shrinks a touch (the user accepted this tradeoff). */
@media (min-width: 1700px) {
.hero > .wrap {
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
.hero h1 {
max-width: none;
font-size: clamp(3rem, 4vw, 4rem);
}
}
/* "clarity" emphasis: Instrument Serif italic accent. Inherits the
headline colour so it sits on the light hero background. */
.hero h1 .it {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
letter-spacing: -0.005em;
}
/* Blurb + CTA stack vertically on every viewport so the CTA sits
beneath the text copy and the text column can use its full width. */
.hero-after {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.5vw, 32px);
margin: 0;
}
.hero-after .blurb {
max-width: 56ch;
margin: 0;
}
.hero-after .actions {
display: flex;
flex-direction: column;
gap: 14px;
align-items: flex-start;
}
/* Hero footer band — spans the full hero width (row 3 of .hero > .wrap). */
.hero-foot {
grid-column: 1 / -1;
grid-row: 3;
padding-top: clamp(28px, 4vw, 56px);
border-top: 1px solid var(--rule);
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 16px;
margin: 0;
}
.hero-foot .stats {
display: flex;
gap: clamp(20px, 3.5vw, 48px);
flex-wrap: wrap;
align-items: flex-start;
}
.hero-foot .stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.hero-foot .stat strong {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.3rem, 1.75vw, 1.6rem);
letter-spacing: -0.02em;
}
.hero-foot .stat span {
font-size: 0.74rem;
color: var(--ink-mute);
letter-spacing: 0.06em;
text-wrap: balance;
}
/* Compact mobile: hero grows beyond 100svh if needed; image and stats
sit clear of the viewport edge. */
@media (max-width: 700px) {
.hero {
padding-top: 84px;
padding-bottom: clamp(32px, 6vw, 48px);
}
.hero > .wrap { row-gap: clamp(24px, 5vw, 36px); }
.hero-main { gap: 22px; }
.hero h1 { font-size: clamp(2rem, 7.5vw, 2.6rem); line-height: 1.08; }
.hero-after { gap: 20px; }
.hero-after .blurb { font-size: 0.92rem; line-height: 1.5; }
.hero-after .actions { gap: 10px; }
.btn { padding: 12px 20px; font-size: 0.84rem; }
.hero-foot {
padding-top: 22px;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.hero-foot > .micro { display: none; }
.hero-foot .stat strong { font-size: 1.1rem; }
.hero-foot .stat span { font-size: 0.66rem; line-height: 1.3; letter-spacing: 0.04em; }
}
/* Mobile stats: four columns in a single row, top-aligned. Labels at
0.7rem so they read cleanly; multi-word labels (NHS Guidance author,
FRIN Royal Inst. of Navigation) wrap to two balanced lines via the
text-wrap: balance set on .hero-foot .stat span above. The bigger
column-gap keeps adjacent labels from colliding when they wrap. */
@media (max-width: 640px) {
.hero-foot .stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 1rem;
row-gap: 0;
align-items: start;
width: 100%;
}
.hero-foot .stat strong { font-size: 1rem; }
.hero-foot .stat span {
font-size: 0.7rem;
line-height: 1.35;
letter-spacing: 0.03em;
}
/* Hide the meta micros on mobile to clear the headline area; give
the headline extra top space so it doesn't crowd the nav. */
.hero .hero-meta { display: none; }
.hero { padding-top: clamp(108px, 22vw, 132px); }
}
/* The late-cascade grid-row override block is gone — mobile uses flex
+ order now, so grid-row values inherited from the desktop rule
don't apply when .hero > .wrap isn't a grid. */
/* ==============================================================
INDEX | numbered pillars list, editorial pacing
============================================================== */
.index { background: var(--bg); }
.index-head {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: clamp(48px, 7vw, 96px);
align-items: end;
}
@media (min-width: 880px) {
.index-head { grid-template-columns: 1fr 1fr; }
}
.index-head h2 {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.9rem, 4.6vw, 3.6rem);
line-height: 1;
letter-spacing: -0.025em;
max-width: 14ch;
}
.index-list { list-style: none; }
.index-row {
display: grid;
grid-template-columns: 60px 1fr auto;
gap: 24px;
padding: clamp(28px, 4vw, 48px) 0;
align-items: baseline;
border-top: 1px solid var(--rule);
cursor: pointer;
transition: padding 0.4s var(--ease);
position: relative;
}
.index-row:last-child { border-bottom: 1px solid var(--rule); }
.index-row:hover { padding-left: 16px; }
.index-row .num {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 1rem;
color: var(--ink-mute);
letter-spacing: 0;
}
.index-row .ttl {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.65rem, 4.2vw, 3.15rem);
line-height: 1.05;
letter-spacing: -0.02em;
}
.index-row .ttl em {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
}
.index-row .meta {
font-size: 0.78rem;
color: var(--ink-mute);
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: right;
align-self: center;
transition: color 0.4s var(--ease);
}
.index-row:hover .meta { color: var(--copper); }
@media (max-width: 720px) {
.index-row { grid-template-columns: 40px 1fr; gap: 16px; }
.index-row .meta { grid-column: 2; text-align: left; padding-top: 4px; }
}
/* ==============================================================
FEATURED PROJECT | full bleed dark hero
============================================================== */
.featured {
background: var(--ink);
color: var(--bg);
padding: var(--section) 0;
}
.featured-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(32px, 5vw, 80px);
align-items: end;
}
@media (min-width: 980px) {
.featured-grid { grid-template-columns: 1.1fr 1fr; }
}
.featured-art {
aspect-ratio: 4 / 5;
position: relative;
overflow: hidden;
border-radius: 2px;
background:
radial-gradient(ellipse at 25% 15%, rgba(176, 94, 44, 0.22) 0%, transparent 55%),
linear-gradient(180deg, #221912 0%, #0E0B07 100%);
padding: clamp(24px, 4vw, 44px);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
}
/* Subtle film grain via SVG noise */
.featured-art::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.18;
mix-blend-mode: overlay;
}
.featured-art::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 50%;
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.25));
pointer-events: none;
}
.featured-art > * { position: relative; z-index: 1; }
.featured-art .doc-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
font-family: 'Onest', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(239, 232, 215, 0.55);
font-weight: 500;
}
.featured-art .doc-meta.top { padding-bottom: 14px; border-bottom: 1px solid rgba(239, 232, 215, 0.12); }
.featured-art .doc-meta.bottom { padding-top: 14px; border-top: 1px solid rgba(239, 232, 215, 0.12); }
.featured-art .doc-meta .copper-soft { color: var(--copper-soft); }
.featured-art .doc-title {
display: flex;
flex-direction: column;
gap: 2px;
margin: auto 0;
}
.featured-art .doc-line {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.85rem, 4.8vw, 3.5rem);
line-height: 1.05;
letter-spacing: -0.025em;
color: rgba(239, 232, 215, 0.96);
font-variation-settings: "opsz" 144, "SOFT" 30;
}
.featured-art .doc-line.is-italic {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
color: var(--copper-soft);
letter-spacing: -0.005em;
}
.featured-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: clamp(48px, 6vw, 96px);
flex-wrap: wrap;
gap: 16px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(239, 232, 215, 0.15);
}
.featured-content h2 {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(2rem, 5vw, 3.8rem);
line-height: 1.02;
letter-spacing: -0.025em;
}
.featured-content h2 em {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
color: var(--copper-soft);
}
.featured-content p {
margin-top: 24px;
max-width: 50ch;
color: rgba(239, 232, 215, 0.7);
font-size: 1rem;
line-height: 1.6;
}
.featured-content .project-meta {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid rgba(239, 232, 215, 0.12);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 24px;
}
.featured-content .project-meta div {
display: flex; flex-direction: column; gap: 4px;
}
.featured-content .project-meta .v {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 1rem;
}
.featured-content .project-meta .k {
font-size: 0.72rem;
color: rgba(239, 232, 215, 0.5);
letter-spacing: 0.08em;
}
.featured-cta {
margin-top: 40px;
display: inline-flex;
}
.featured-content .btn { border-color: var(--bg); color: var(--bg); }
.featured-content .btn:hover { background: var(--bg); color: var(--ink); }
/* ==============================================================
APPROACH
============================================================== */
.approach-head {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
margin-bottom: clamp(56px, 7vw, 96px);
align-items: end;
}
@media (min-width: 880px) {
.approach-head { grid-template-columns: 1.4fr 1fr; }
}
.approach-head h2 {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.9rem, 4.6vw, 3.6rem);
line-height: 1;
letter-spacing: -0.025em;
max-width: 16ch;
}
.approach-head h2 em {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
color: var(--copper);
}
.approach-grid {
display: grid;
gap: 1px;
background: var(--rule);
grid-template-columns: 1fr;
}
@media (min-width: 820px) {
.approach-grid { grid-template-columns: repeat(3, 1fr); }
}
.approach-cell {
background: var(--bg);
padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px);
display: flex;
flex-direction: column;
gap: 20px;
min-height: 280px;
}
/* Outer cells lose their outer-edge padding so content lines up with the section heading */
@media (min-width: 820px) {
.approach-cell:first-child { padding-left: 0; }
.approach-cell:last-child { padding-right: 0; }
}
@media (max-width: 819px) {
.approach-cell { padding-left: 0; padding-right: 0; }
}
.approach-cell .num-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.approach-cell .num {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 0.95rem;
color: var(--ink-mute);
}
.approach-cell .num em {
font-family: 'Instrument Serif', serif;
font-style: italic;
color: var(--copper);
}
.approach-cell h3 {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.45rem, 2.4vw, 2rem);
line-height: 1.1;
letter-spacing: -0.02em;
}
.approach-cell h3 em {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
}
.approach-cell p {
font-size: 0.95rem;
color: var(--ink-soft);
max-width: 36ch;
}
/* ==============================================================
CLIENTS | type-set list, magazine-style
============================================================== */
.clients {
padding: clamp(80px, 10vw, 140px) 0;
background: var(--bg-tint);
}
.clients-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-bottom: clamp(40px, 5vw, 64px);
}
.clients-head h2 {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.55rem, 2.8vw, 2.25rem);
letter-spacing: -0.02em;
}
.clients-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
@media (min-width: 720px) { .clients-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .clients-grid { grid-template-columns: 1fr 1fr 1fr; } }
.clients-grid li {
list-style: none;
padding: 22px 0;
border-top: 1px solid var(--rule);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
position: relative;
}
/* Mobile: closing border below the last item to anchor the list. */
.clients-grid li:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 720px) {
.clients-grid li {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 22px clamp(16px, 2vw, 28px) 22px 0;
transition: padding 0.4s var(--ease);
}
/* Desktop: border-top only on each cell creates a single 1px line
between every row. No closing border below the last row, so the
line below "Brighton & Hove" disappears and weights stay even. */
.clients-grid li:last-child { border-bottom: 0; }
}
.clients-grid li:hover { padding-left: 8px; transition: padding 0.3s var(--ease); }
.clients-grid li .name {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.05rem, 1.5vw, 1.25rem);
letter-spacing: -0.01em;
transition: color 0.3s var(--ease);
}
.clients-grid li:hover .name { color: var(--copper); }
.clients-grid li .cat {
font-size: 0.72rem;
color: var(--ink-mute);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ==============================================================
ABOUT
============================================================== */
.about-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: start;
}
@media (min-width: 980px) {
.about-grid { grid-template-columns: 1fr 1.3fr; }
}
.about-portrait {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--bg-tint);
border-radius: 2px;
margin: 0;
}
.about-portrait img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.about-portrait .tag {
position: absolute;
bottom: 16px; left: 16px;
font-family: 'Onest', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
background: rgba(239, 232, 215, 0.92);
padding: 8px 14px;
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
margin: 0;
}
.about-body h2 {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.9rem, 4.4vw, 3.3rem);
line-height: 1.04;
letter-spacing: -0.025em;
max-width: 14ch;
}
.about-body h2 em {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
color: var(--copper);
}
.about-body .lead { margin-top: 32px; max-width: 50ch; font-size: 1.05rem; color: var(--ink-soft); }
/* Apply paragraph spacing + width/treatment to EVERY after the
.lead, not just the adjacent one — otherwise paragraphs 3+ run
together as one block because the global * { margin: 0 } reset
removes the browser default. */
.about-body .lead ~ p { margin-top: 16px; max-width: 50ch; font-size: 1.05rem; color: var(--ink-soft); }
.about-creds {
list-style: none;
margin-top: 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.about-creds li {
padding: 20px 0;
border-top: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: 4px;
}
.about-creds li:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
.about-creds li:nth-child(odd) { padding-right: 16px; }
.about-creds li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule); }
.about-creds .v {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
letter-spacing: -0.01em;
}
.about-creds .k {
font-size: 0.74rem;
color: var(--ink-mute);
letter-spacing: 0.08em;
}
/* ==============================================================
PRESS / RECOGNITION | editorial cards
============================================================== */
.press-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: clamp(40px, 5vw, 64px);
flex-wrap: wrap;
gap: 16px;
}
.press-head h2 {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.7rem, 3.4vw, 2.55rem);
letter-spacing: -0.02em;
}
.press-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media (min-width: 720px) { .press-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .press-grid { grid-template-columns: repeat(3, 1fr); } }
.press-card {
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 24px;
border-top: 1px solid var(--ink);
}
.press-card .pub {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 1rem;
letter-spacing: 0;
color: var(--ink-mute);
}
.press-card .pub em {
font-family: 'Instrument Serif', serif;
font-style: italic;
color: var(--copper);
}
.press-card blockquote {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.25rem, 2vw, 1.55rem);
line-height: 1.25;
letter-spacing: -0.015em;
}
.press-card blockquote em {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
}
.press-card cite {
font-style: normal;
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--ink-mute);
}
/* ==============================================================
BIG CTA
============================================================== */
.cta {
background: var(--bg-tint);
color: var(--ink);
padding: clamp(96px, 14vw, 200px) 0;
position: relative;
overflow: hidden;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
/* Radial gradient overlay from the prompt-N dark version removed.
On the sky band the headline + copper hairline carry the emphasis. */
.cta::before { content: none; }
.cta-inner {
position: relative;
display: grid;
gap: clamp(32px, 5vw, 64px);
grid-template-columns: 1fr;
align-items: end;
}
@media (min-width: 880px) {
.cta-inner { grid-template-columns: 1fr auto; }
}
.cta h2 {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(2.3rem, 7.2vw, 6.2rem);
line-height: 0.95;
letter-spacing: -0.03em;
max-width: 14ch;
}
.cta h2 em {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
color: var(--copper);
}
.cta-actions {
display: flex;
flex-direction: column;
gap: 14px;
align-items: flex-start;
}
.cta .email {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.15rem, 1.85vw, 1.55rem);
color: var(--ink);
border-bottom: 1px solid rgba(22, 19, 13, 0.25);
padding-bottom: 4px;
letter-spacing: -0.015em;
transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.cta .email:hover { border-color: var(--copper); color: var(--copper); }
.cta .copy-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
letter-spacing: 0.04em;
color: var(--ink-soft);
padding: 4px 0;
transition: color 0.25s var(--ease);
}
.cta .copy-btn:hover { color: var(--ink); }
.cta .copy-btn .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--copper); }
/* ==============================================================
FOOTER
============================================================== */
footer {
padding: clamp(64px, 8vw, 112px) 0 28px;
background: var(--bg-white);
color: var(--ink);
border-top: 1px solid var(--rule);
}
.footer-top {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
padding-bottom: 64px;
border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) {
.footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.footer-brand .brand-text { font-size: 1.25rem; }
.footer-brand p {
margin-top: 18px;
font-size: 0.92rem;
color: var(--ink-soft);
max-width: 32ch;
line-height: 1.55;
}
.footer-col h4 {
font-family: 'Onest', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 18px;
font-weight: 500;
}
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 1.05rem;
letter-spacing: -0.01em;
color: var(--ink);
transition: color 0.2s var(--ease);
display: inline-flex;
align-items: center;
gap: 8px;
}
.footer-col a:hover { color: var(--copper); }
.footer-bottom {
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 16px;
font-size: 0.78rem;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.footer-bottom .links {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.footer-bottom a { color: var(--ink-mute); transition: color 0.2s var(--ease); }
.footer-bottom a:hover { color: var(--ink); }
/* ==============================================================
COOKIECONSENT (v3) theme overrides — match the site palette
and typography. The library's own stylesheet ships first
in
; these CSS variables retheme it.
============================================================== */
#cc-main {
--cc-bg: var(--bg);
--cc-primary-color: var(--ink);
--cc-secondary-color: var(--ink-soft);
--cc-btn-primary-bg: var(--ink);
--cc-btn-primary-color: var(--bg);
--cc-btn-primary-hover-bg: var(--copper);
--cc-btn-primary-hover-color: var(--bg);
--cc-btn-secondary-bg: transparent;
--cc-btn-secondary-color: var(--ink);
--cc-btn-secondary-border-color: var(--rule);
--cc-btn-secondary-hover-bg: var(--bg-tint);
--cc-btn-secondary-hover-color: var(--ink);
--cc-btn-secondary-hover-border-color: var(--ink);
--cc-separator-border-color: var(--rule);
--cc-toggle-on-bg: var(--copper);
--cc-toggle-off-bg: var(--ink-mute);
--cc-toggle-on-knob-bg: var(--bg);
--cc-toggle-off-knob-bg: var(--bg);
--cc-toggle-readonly-bg: var(--rule);
--cc-toggle-readonly-knob-bg: var(--bg);
--cc-link-color: var(--copper);
--cc-modal-border-radius: 4px;
--cc-btn-border-radius: 999px;
--cc-font-family: 'Onest', sans-serif;
}
/* Modal headings use Fraunces to match the rest of the site. */
#cc-main .cm__title,
#cc-main .pm__title,
#cc-main .pm__section-title {
font-family: 'Fraunces', serif;
font-weight: 300;
letter-spacing: -0.015em;
}
#cc-main .cm__title { font-size: 1.45rem; }
/* ==============================================================
REVEAL
============================================================== */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
.reveal { opacity: 1; transform: none; }
html { scroll-behavior: auto; }
}
.skip {
position: absolute;
left: -9999px;
top: 8px;
padding: 10px 16px;
background: var(--ink);
color: var(--bg);
border-radius: 4px;
z-index: 100;
}
.skip:focus { left: 8px; }
/* ==============================================================
ABOUT PAGE
============================================================== */
.page-hero .micro { display: inline-block; margin-bottom: 24px; }
.page-hero h1 {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(2.4rem, 7vw, 5.25rem);
line-height: 1.02;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 144, "SOFT" 30;
margin: 0;
max-width: 18ch;
color: var(--ink);
}
.page-hero h1 em {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
letter-spacing: -0.005em;
color: var(--copper);
}
.page-hero-blurb {
margin-top: 36px;
max-width: 52ch;
font-size: 1.1rem;
color: var(--ink-soft);
}
.principles { background: var(--bg-tint); }
.principles-head { margin-bottom: clamp(40px, 6vw, 72px); max-width: 720px; }
.principles-head h2 {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.9rem, 4.6vw, 3.6rem);
line-height: 1;
letter-spacing: -0.025em;
margin-top: 18px;
max-width: 14ch;
}
.principles-head h2 em {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
color: var(--copper);
}
.principles-list { display: flex; flex-direction: column; }
.principle {
display: grid;
grid-template-columns: 56px 1fr;
gap: clamp(20px, 3vw, 40px);
align-items: baseline;
padding: clamp(28px, 4vw, 48px) 0;
border-top: 1px solid var(--rule);
}
.principle:last-child { border-bottom: 1px solid var(--rule); }
.principle-num {
font-family: 'Onest', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
}
.principle-statement {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.5rem, 3.6vw, 2.6rem);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0;
}
/* ==============================================================
DOT-LINK | small text link/button with a copper-dot prefix
============================================================== */
.dot-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.86rem;
padding: 4px 0;
position: relative;
color: var(--ink);
transition: color 0.25s var(--ease);
}
.dot-link::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--copper);
flex-shrink: 0;
}
.dot-link:hover { color: var(--ink); }
/* ==============================================================
CONTACT FORM
============================================================== */
.contact-form {
display: grid;
gap: clamp(28px, 4vw, 40px);
max-width: 760px;
}
.contact-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 3vw, 32px);
}
@media (max-width: 640px) {
.contact-form .form-row { grid-template-columns: 1fr; }
}
.contact-form .field { display: flex; flex-direction: column; }
.contact-form label {
font-family: 'Onest', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 12px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
background: var(--bg-tint);
border: 1px solid var(--rule);
padding: 14px 16px;
font-family: 'Onest', sans-serif;
font-weight: 300;
font-size: 1rem;
line-height: 1.4;
color: var(--ink);
border-radius: 2px;
transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--ink);
background: var(--bg);
box-shadow: 0 0 0 4px rgba(42, 41, 38, 0.08);
}
.contact-form textarea {
resize: vertical;
min-height: 180px;
}
.contact-form select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2316130D' stroke-width='1.2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 44px;
}
.contact-form .submit-row { margin-top: 8px; }
.contact-form .form-submit {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 1rem;
padding: 10px 0;
}
/* ==============================================================
WORK INDEX | vertical list of client projects on /work/
============================================================== */
.work-list { display: flex; flex-direction: column; }
.work-row {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: start;
gap: clamp(20px, 3vw, 40px);
padding: clamp(28px, 3.5vw, 44px) 0;
border-top: 1px solid var(--rule);
color: var(--ink);
text-decoration: none;
transition: padding-left 0.35s var(--ease);
}
.work-num,
.work-year,
.work-thumb {
align-self: start;
}
/* The number badge sits on its own grid line; nudge it down a touch so
its baseline aligns with the title's first line of cap height. */
.work-num { padding-top: 0.55em; }
.work-row:last-child { border-bottom: 1px solid var(--rule); }
a.work-row:hover { padding-left: 10px; }
a.work-row:hover .work-title { color: var(--copper); }
a.work-row:hover .work-arr {
transform: translateX(6px);
color: var(--copper);
}
.work-num {
font-family: 'Onest', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
min-width: 28px;
}
.work-text { min-width: 0; }
.work-title {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.4rem, 3.4vw, 2.4rem);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0;
color: inherit;
transition: color 0.3s var(--ease);
}
.work-desc {
font-family: 'Onest', sans-serif;
font-size: 0.95rem;
color: var(--ink-soft);
margin: 8px 0 0;
max-width: 40ch;
}
.work-year {
font-family: 'Onest', sans-serif;
font-size: 0.86rem;
color: var(--ink-mute);
font-variant-numeric: tabular-nums;
}
.work-thumb {
width: 64px;
height: 64px;
border-radius: 2px;
overflow: hidden;
background: var(--bg-tint);
flex-shrink: 0;
}
.work-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.work-arr {
width: 18px;
height: 10px;
color: var(--ink);
transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
/* Narrow viewports: drop the year column; thumb sits to the right. */
@media (max-width: 720px) {
.work-row {
grid-template-columns: auto 1fr auto;
column-gap: 16px;
}
.work-year { display: none; }
.work-thumb { grid-column: 3; grid-row: 1; }
.work-arr { grid-column: 2 / 4; grid-row: 2; justify-self: end; }
}
/* Single-column at the narrowest widths: num + title on the top row,
description fills under the title, thumb stacks below as a wider
16:9 strip so the image isn't squished. */
@media (max-width: 640px) {
.work-row {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 14px;
row-gap: 14px;
padding: clamp(20px, 5vw, 28px) 0;
align-items: start;
}
.work-num {
grid-column: 1;
grid-row: 1;
align-self: start;
padding-top: 0.25em;
}
.work-text { grid-column: 2; grid-row: 1; }
.work-thumb {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border-radius: 4px;
}
.work-title { font-size: clamp(1.25rem, 5vw, 1.6rem); }
.work-desc { font-size: 0.92rem; }
}
/* ==============================================================
CASE STUDY | primitives used by work/_template.html and the
per-project pages it gets copied to
============================================================== */
/* Hero meta (Client / Year / Discipline) under the page-hero h1. */
.case-meta {
display: flex;
flex-wrap: wrap;
gap: clamp(28px, 4vw, 56px);
margin: 40px 0 0;
}
.case-meta > div { display: flex; flex-direction: column; gap: 6px; }
.case-meta dt {
font-family: 'Onest', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
}
.case-meta dd {
font-family: 'Onest', sans-serif;
font-size: 0.95rem;
color: var(--ink);
margin: 0;
}
/* Full-bleed lead image: lives outside .wrap, so it spans the viewport. */
.case-lead-image { margin: 0; width: 100%; }
.case-lead-image img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
background: var(--bg-tint);
}
/* Numbered section heads (01 Brief, 02 Approach, 03 Outcome). */
.case-section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.case-section-head .micro { display: inline-block; margin-bottom: 12px; }
.case-section-head h2 {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.9rem, 4.6vw, 3.4rem);
line-height: 1.05;
letter-spacing: -0.025em;
margin: 0;
max-width: 14ch;
}
/* Body prose inside a case-study section. */
.case-prose p {
font-family: 'Onest', sans-serif;
font-size: 1.05rem;
line-height: 1.55;
color: var(--ink-soft);
max-width: 50ch;
margin: 0 0 18px;
}
.case-prose p:last-child { margin-bottom: 0; }
/* Pull-quote inside the Approach section. */
.case-pullquote {
margin: clamp(48px, 6vw, 80px) 0;
padding: clamp(28px, 4vw, 48px) 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.case-pullquote p {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(1.5rem, 3.6vw, 2.4rem);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0;
max-width: 28ch;
}
.case-pullquote cite {
display: block;
margin-top: 24px;
font-family: 'Onest', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
font-style: normal;
}
/* 2-up gallery, 1-up below 720px. */
.case-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 2.5vw, 32px);
}
.case-gallery figure { margin: 0; }
.case-gallery img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 4 / 3;
object-fit: cover;
background: var(--bg-tint);
border-radius: 2px;
}
.case-gallery figcaption {
margin-top: 12px;
font-family: 'Onest', sans-serif;
font-size: 0.86rem;
color: var(--ink-mute);
}
@media (max-width: 720px) {
.case-gallery { grid-template-columns: 1fr; }
}
/* "Next case study" link block at the end of each case-study page. */
.case-next { background: var(--bg-tint); }
.case-next-link {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 24px;
text-decoration: none;
color: var(--ink);
padding: clamp(24px, 4vw, 48px) 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
transition: padding-left 0.35s var(--ease);
}
.case-next-link:hover { padding-left: 10px; }
.case-next-link:hover .case-next-title { color: var(--copper); }
.case-next-link:hover .case-next-arrow {
transform: translateX(8px);
color: var(--copper);
}
.case-next-link .micro { display: block; margin-bottom: 12px; }
.case-next-title {
display: block;
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.5rem, 3.6vw, 2.6rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: inherit;
transition: color 0.3s var(--ease);
}
.case-next-arrow {
width: 20px;
height: 12px;
color: var(--ink);
align-self: end;
margin-bottom: 14px;
transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
/* ==============================================================
APPROACH PAGE
Adjacent page-hero blurbs tighten up — first one keeps its
36px gap from the h1, second one sits closer to the first.
============================================================== */
.page-hero-blurb + .page-hero-blurb { margin-top: 16px; }
/* Why this matters: tinted band, three statement+detail pairs, hairlines. */
.why-section { background: var(--bg-tint); }
/* Two-column layout at >= 880px: section heading on the left, three
statement blocks on the right, separated by a hairline divider. The
divider is the border-left on .why-list. Mobile stacks vertically
(heading above list, no divider). */
@media (min-width: 880px) {
.why-grid {
display: grid;
grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
column-gap: clamp(48px, 6vw, 80px);
align-items: start;
}
.why-grid > .why-list {
border-left: 1px solid var(--rule);
padding-left: clamp(40px, 5vw, 64px);
}
/* Drop the top border on the first item so it doesn't double up with
the divider's start. */
.why-grid > .why-list > .why-item:first-child {
border-top: 0;
padding-top: 0;
}
}
.why-list { display: flex; flex-direction: column; }
.why-item {
padding: clamp(28px, 4vw, 48px) 0;
border-top: 1px solid var(--rule);
}
.why-item:last-child { border-bottom: 1px solid var(--rule); }
.why-statement {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.5rem, 3.6vw, 2.6rem);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0;
max-width: 28ch;
}
.why-detail {
margin: 16px 0 0;
font-family: 'Onest', sans-serif;
font-size: 1rem;
line-height: 1.55;
color: var(--ink-soft);
max-width: 50ch;
}
/* Six-stage process: numbered title + Onest description per row. */
/* Six-stage process as a 3-column × 2-row grid on desktop, 2-col at
<880px, 1-col at <560px. Used on the homepage 'How we work' teaser
and on /approach/. Borders form the grid hairlines. */
.process-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 0.5px solid var(--rule);
border-left: 0.5px solid var(--rule);
}
.process-cell {
padding: 24px 22px 26px;
border-right: 0.5px solid var(--rule);
border-bottom: 0.5px solid var(--rule);
display: flex;
flex-direction: column;
}
.process-cell .stage-num {
font-family: 'Onest', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 14px;
}
.process-cell .stage-title {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.1rem, 1.6vw, 1.25rem);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 6px;
}
.process-cell .stage-desc {
font-family: 'Onest', sans-serif;
font-weight: 300;
font-size: 0.92rem;
line-height: 1.5;
color: var(--ink-mute);
margin: 0;
}
.process-cell .stage-outcome {
margin-top: auto;
padding-top: 18px;
font-family: 'Onest', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--copper);
}
/* Display headings inside the process section balance their wrap so no
single word strands on its own line. */
.process-section h2 { text-wrap: balance; }
@media (max-width: 880px) {
.process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.process-grid { grid-template-columns: 1fr; }
}
/* Services grid: 2x2 desktop, 1-up on mobile. Each card holds a
capability list styled as compact items separated by hairlines
(no bullet markers). */
.services-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 5vw, 72px);
}
@media (max-width: 720px) {
.services-grid { grid-template-columns: 1fr; }
}
.service-card { display: flex; flex-direction: column; }
.service-num {
font-family: 'Onest', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 16px;
}
.service-title {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.5rem, 3vw, 2.2rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 24px;
}
.service-caps {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.service-caps li {
padding: 14px 0;
font-family: 'Onest', sans-serif;
font-size: 0.95rem;
color: var(--ink-soft);
border-top: 1px solid var(--rule);
}
.service-caps li:last-child { border-bottom: 1px solid var(--rule); }
/* Quiet end-of-page CTA — single dot-link, no surrounding furniture. */
.approach-cta { padding-top: 0; }
/* Approach credentials row: two labelled accreditation marks (SDS
Honorary Member + RIN Fellow) side by side on desktop, stacked on
narrow mobile. Logos modest height. */
.approach-credentials-list {
display: grid;
grid-template-columns: 1fr;
gap: clamp(28px, 4vw, 48px);
align-items: start;
}
@media (min-width: 720px) {
.approach-credentials-list {
grid-template-columns: repeat(2, auto);
column-gap: clamp(48px, 6vw, 80px);
}
}
.approach-cred {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.approach-cred img {
height: 56px;
width: auto;
max-width: 100%;
display: block;
}
/* ==============================================================
INSIGHTS | hub list cards + per-post long-form prose
============================================================== */
/* Hub: vertical stack of cards, each a 2-col row that collapses
below 720px. The whole card is a single so the click target
covers the entire row. */
.insights-list {
display: flex;
flex-direction: column;
gap: clamp(40px, 5vw, 72px);
}
.insight-card a {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(28px, 4vw, 56px);
align-items: start;
text-decoration: none;
color: var(--ink);
padding-top: clamp(24px, 3vw, 40px);
border-top: 1px solid var(--rule);
transition: padding-left 0.35s var(--ease);
}
.insight-card:last-child a { border-bottom: 1px solid var(--rule); padding-bottom: clamp(24px, 3vw, 40px); }
.insight-card a:hover { padding-left: 10px; }
.insight-card a:hover .insight-card-title { color: var(--copper); }
.insight-card a:hover .insight-card-cta { color: var(--copper); }
.insight-card a:hover .insight-card-arr { transform: translateX(6px); }
.insight-card-image {
aspect-ratio: 16 / 9;
background: var(--bg-tint);
border-radius: 2px;
overflow: hidden;
}
.insight-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.insight-card-text { display: flex; flex-direction: column; }
.insight-card-date {
font-family: 'Onest', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 14px;
}
.insight-card-title {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.5rem, 3.6vw, 2.4rem);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 16px;
color: inherit;
transition: color 0.3s var(--ease);
}
.insight-card-excerpt {
font-family: 'Onest', sans-serif;
font-size: 1rem;
line-height: 1.55;
color: var(--ink-soft);
margin: 0 0 24px;
max-width: 52ch;
}
.insight-card-cta {
font-family: 'Onest', sans-serif;
font-size: 0.86rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.3s var(--ease);
}
.insight-card-arr {
width: 14px;
height: 8px;
transition: transform 0.3s var(--ease);
}
@media (max-width: 720px) {
.insight-card a { grid-template-columns: 1fr; gap: 20px; }
}
/* Per-post page: meta line under the h1 — Onest small-caps. */
.post-meta {
margin-top: 32px;
font-family: 'Onest', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
}
/* Author byline directly under the post-meta, only used on Feature posts. */
.post-author-byline {
margin-top: 18px;
font-family: 'Onest', sans-serif;
font-style: italic;
font-size: 0.95rem;
line-height: 1.5;
color: var(--ink-mute);
max-width: 52ch;
}
/* Full-bleed lead image placeholder for posts (same shape as
.case-lead-image but a pure colour block — no inline SVG). */
.post-lead-image {
margin: 0;
width: 100%;
max-width: 720px;
}
.post-lead-image-block {
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bg-tint);
}
/* Long-form post prose: max-width column, Fraunces body, generous
leading. Headings inside reuse Fraunces. Blockquotes get the
hairlined Instrument Serif italic pull-quote treatment. */
.post-prose {
max-width: 640px;
margin: 0 auto;
}
.post-prose p {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 1.0625rem;
line-height: 1.65;
color: var(--ink-soft);
margin: 0 0 1.4em;
}
.post-prose p:last-child { margin-bottom: 0; }
.post-prose h2,
.post-prose h3 {
font-family: 'Fraunces', serif;
font-weight: 300;
letter-spacing: -0.02em;
color: var(--ink);
margin: 1.8em 0 0.6em;
}
.post-prose h2 { font-size: 1.65rem; line-height: 1.15; }
.post-prose h3 { font-size: 1.3rem; line-height: 1.2; }
.post-prose blockquote {
margin: 2em 0;
padding: 1.4em 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.post-prose blockquote p {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.3;
color: var(--ink);
margin: 0;
max-width: none;
}
/* Inline links inside post prose: hover shifts to --copper for visible
interactivity; resting state inherits the ambient body colour. */
.post-prose a {
color: var(--copper);
text-decoration: underline;
text-underline-offset: 2px;
}
.post-prose a:hover { color: var(--copper); }
/* Inline figure inside a post (constrained to post-prose column). */
.post-prose .post-figure {
margin: 2em 0;
}
.post-prose .post-figure img {
width: 100%;
height: auto;
display: block;
background: var(--bg-tint);
}
.post-prose .post-figure figcaption {
margin-top: 12px;
font-family: 'Onest', sans-serif;
font-style: italic;
font-size: 0.9rem;
line-height: 1.5;
color: var(--ink-mute);
}
/* Onest stat-list pattern: bulleted source content rendered as spaced
lines with hairlines (no bullet markers). */
.post-prose .post-stat-list {
list-style: none;
padding: 0;
margin: 1.6em 0;
}
.post-prose .post-stat-list li {
font-family: 'Onest', sans-serif;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
color: var(--ink);
padding: 1em 0;
margin: 0;
border-top: 1px solid var(--rule);
}
.post-prose .post-stat-list li:last-child {
border-bottom: 1px solid var(--rule);
}
.post-prose .post-stat-list li strong {
font-weight: 500;
color: var(--ink);
}
/* Post footer block (About the author / Further reading on the long
Feature pieces). Tinted band with hairline top, max-width matches
post-prose so the reading rhythm is preserved. */
.post-footer {
background: var(--bg-tint);
border-top: 1px solid var(--rule);
padding: clamp(40px, 5vw, 64px) 0;
}
.post-footer-inner {
max-width: 640px;
margin: 0 auto;
}
.post-footer h2 {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 1.5rem;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink);
margin: 1.6em 0 0.6em;
}
.post-footer h2:first-child { margin-top: 0; }
.post-footer p {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 1rem;
line-height: 1.6;
color: var(--ink-soft);
margin: 0 0 1em;
}
.post-footer p:last-child { margin-bottom: 0; }
.post-footer a {
color: var(--copper);
text-decoration: underline;
text-underline-offset: 2px;
}
.post-footer a:hover { color: var(--copper-soft); }
.post-footer em { font-style: italic; }
/* ==============================================================
LEGAL PAGES | long-form prose for /privacy/, /terms/,
/accessibility/, /cookies/. No decorative elements; uses
Fraunces body like post-prose but slightly wider column and
structured list support (legal docs need bullets).
============================================================== */
.legal-prose {
max-width: 680px;
margin: 0 auto;
}
.legal-prose p {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 1.0625rem;
line-height: 1.65;
color: var(--ink-soft);
margin: 0 0 1.4em;
}
.legal-prose h2 {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 1.65rem;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink);
margin: 2em 0 0.6em;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose h3 {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 1.25rem;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--ink);
margin: 1.6em 0 0.5em;
}
.legal-prose ul,
.legal-prose ol {
margin: 0 0 1.4em;
padding-left: 1.2em;
}
.legal-prose li {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--ink-soft);
margin-bottom: 0.4em;
}
.legal-prose strong {
font-weight: 400;
color: var(--ink);
}
.legal-prose a {
color: var(--copper);
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.25s var(--ease);
}
.legal-prose a:hover { color: var(--copper-soft); }
/* Cross-link block at the bottom of each legal page. */
.legal-also {
max-width: 680px;
margin: 0 auto;
padding-top: clamp(40px, 5vw, 64px);
border-top: 1px solid var(--rule);
}
.legal-also .micro {
display: block;
margin-bottom: 16px;
color: var(--ink-mute);
}
.legal-also ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 14px 24px;
}
.legal-also a {
font-family: 'Onest', sans-serif;
font-size: 0.95rem;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--rule);
padding-bottom: 2px;
transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.legal-also a:hover {
color: var(--copper);
border-color: var(--copper);
}
/* ==============================================================
HOMEPAGE | primitives for the restructured index.html
============================================================== */
/* WHY THIS MATTERS lead — sized between .hero h1 and section h2. */
.why-lead {
margin-top: 28px;
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.6rem, 3.6vw, 2.6rem);
line-height: 1.18;
letter-spacing: -0.02em;
color: var(--ink);
max-width: 32ch;
}
/* Three-column data block (1-col mobile). Each column has hairline-top + Fraunces stat + Onest gloss. */
/* minmax(0, 1fr) tracks let columns shrink to the container width
instead of inflating to fit their content (which was clipping the
third stat off the right edge on narrower desktops). */
.why-data {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(28px, 4vw, 56px);
margin: clamp(40px, 5vw, 72px) 0;
}
@media (max-width: 720px) {
.why-data { grid-template-columns: 1fr; gap: 28px; }
}
.why-data-col {
border-top: 1px solid var(--rule);
padding-top: 20px;
min-width: 0;
}
.why-data-stat {
display: block;
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(2.6rem, 5vw, 4rem);
line-height: 1;
letter-spacing: -0.025em;
color: var(--ink);
}
/* Supporting line under each stat wraps naturally within its column
at every viewport. (Was nowrap which clipped the third label off
the right edge on narrower-desktop widths, and on mobile pushed
the page wider than the viewport.) */
.why-data-gloss {
margin: 16px 0 0;
font-family: 'Onest', sans-serif;
font-size: 0.95rem;
line-height: 1.5;
color: var(--ink-soft);
overflow-wrap: break-word;
}
.why-closing {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.3rem, 2.6vw, 1.9rem);
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--ink);
max-width: 44ch;
margin: 0;
}
.why-cta {
margin-top: clamp(32px, 5vw, 56px);
}
/* SELECTED WORK 3x2 grid (2x3 tablet, 1-col mobile). Each card holds a
solid-colour 4:3 placeholder block with an italic Onest caption inside,
plus a Fraunces title and an Onest client attribution below. */
.home-work-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(28px, 4vw, 56px);
margin-top: clamp(48px, 6vw, 80px);
}
@media (max-width: 960px) {
.home-work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.home-work-grid { grid-template-columns: 1fr; }
}
.home-work-card { display: flex; flex-direction: column; }
.home-work-image {
aspect-ratio: 4 / 3;
border-radius: 2px;
margin: 0;
display: flex;
align-items: flex-end;
padding: 14px;
background: var(--bg-tint);
}
.home-work-image[data-tone="A"] { background: var(--bg-tint); }
.home-work-image[data-tone="B"] { background: var(--rule); }
.home-work-image[data-tone="C"] { background: var(--bg-deep); }
.home-work-image figcaption {
font-family: 'Onest', sans-serif;
font-style: italic;
font-size: 0.8rem;
color: var(--ink-mute);
}
.home-work-title {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.2rem, 2vw, 1.45rem);
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--ink);
margin: 20px 0 6px;
}
.home-work-client {
font-family: 'Onest', sans-serif;
font-size: 0.86rem;
color: var(--ink-mute);
margin: 0;
}
/* Optional meta line above the title — used on the Work page (Number
and year, e.g. "01 · 2018") so the homepage card component can
carry that Work-specific data without changing its main structure.
Replaces the title's default top margin when present. */
.home-work-meta {
font-family: 'Onest', sans-serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 20px 0 0;
}
.home-work-meta + .home-work-title { margin-top: 6px; }
.home-work-cta {
margin-top: clamp(32px, 5vw, 56px);
text-align: left;
}
/* LATEST INSIGHTS row — three vertical cards (image top, text below). */
.home-insights-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(28px, 4vw, 56px);
margin-top: clamp(48px, 6vw, 80px);
}
@media (max-width: 720px) {
.home-insights-row { grid-template-columns: 1fr; }
}
.home-insight-card a {
display: flex;
flex-direction: column;
gap: 18px;
text-decoration: none;
color: var(--ink);
transition: opacity 0.25s var(--ease);
}
.home-insight-card a:hover { opacity: 0.82; }
.home-insight-card a:hover .home-insight-title { color: var(--copper); }
.home-insight-image {
aspect-ratio: 16 / 9;
background: var(--bg-tint);
border-radius: 2px;
overflow: hidden;
}
.home-insight-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.home-insight-date {
font-family: 'Onest', sans-serif;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
}
.home-insight-title {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.2rem, 2vw, 1.55rem);
line-height: 1.18;
letter-spacing: -0.02em;
margin: 0;
color: inherit;
transition: color 0.3s var(--ease);
}
.home-insight-excerpt {
font-family: 'Onest', sans-serif;
font-size: 0.95rem;
line-height: 1.5;
color: var(--ink-soft);
margin: 0;
}
.home-insight-cta {
font-family: 'Onest', sans-serif;
font-size: 0.86rem;
font-weight: 500;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 6px;
}
/* ==============================================================
IMAGE PLACEHOLDERS | solid-colour blocks with italic Onest
captions, used as visible 'image goes here' stand-ins until
real photography is delivered. Swap-friendly: replace the
with an ![]()
tag (drop the data-* attrs), and
the same dimensions carry over via the same wrapping element.
============================================================== */
.image-placeholder {
display: flex;
align-items: flex-end;
width: 100%;
margin: 0;
padding: clamp(14px, 2vw, 22px);
background: var(--bg-tint);
border-radius: 2px;
min-height: 180px;
}
.image-placeholder[data-aspect="16x9"] { aspect-ratio: 16 / 9; }
.image-placeholder[data-aspect="4x3"] { aspect-ratio: 4 / 3; }
.image-placeholder[data-aspect="21x9"] { aspect-ratio: 21 / 9; }
.image-placeholder[data-tone="A"] { background: var(--bg-tint); }
.image-placeholder[data-tone="B"] { background: var(--rule); }
.image-placeholder[data-tone="C"] { background: var(--ink-mute); }
.image-placeholder figcaption {
font-family: 'Onest', sans-serif;
font-style: italic;
font-size: clamp(0.8rem, 1.2vw, 0.9rem);
letter-spacing: 0.01em;
color: var(--ink-mute);
}
/* Caption flips to a light colour on the dark tone. */
.image-placeholder[data-tone="C"] figcaption {
color: var(--bg-tint);
}
/* Inside a service card, placeholder sits above the card content. */
.service-card .image-placeholder { margin-bottom: 24px; }
/* When the placeholder holds a real image, drop the inner padding so the
image fills the rounded tile edge to edge. */
.image-placeholder:has(img),
.home-work-image:has(img) {
padding: 0;
overflow: hidden;
}
.image-placeholder img,
.home-work-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ==============================================================
SLIM COOKIE BANNER | custom first-visit UI driven by our own
buttons. CookieConsent v3 v3.1.0 is the underlying logic; the
library's own consent modal is hidden via CSS below (preferences
modal stays available, opened via the Manage button).
============================================================== */
.cookie-banner {
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
max-width: 480px;
padding: 22px 24px 20px;
background: var(--bg);
color: var(--ink);
border: 1px solid var(--rule);
border-radius: 4px;
box-shadow: 0 30px 80px -20px rgba(22, 19, 13, 0.18);
z-index: 70;
transform: translateY(140%);
transition: transform 0.55s var(--ease);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 1.05rem;
line-height: 1.35;
letter-spacing: -0.01em;
margin-bottom: 18px;
}
.cookie-banner p a {
font-family: 'Onest', sans-serif;
font-size: 0.85rem;
color: var(--copper);
border-bottom: 1px solid var(--copper);
padding-bottom: 1px;
}
.cookie-banner .actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.cookie-banner button {
font-size: 0.82rem;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid var(--ink);
background: transparent;
color: var(--ink);
transition: all 0.2s var(--ease);
}
.cookie-banner button:hover { background: var(--ink); color: var(--bg); }
.cookie-banner button.primary { background: var(--ink); color: var(--bg); }
.cookie-banner button.primary:hover { background: var(--copper); border-color: var(--copper); color: var(--bg); }
/* Suppress CookieConsent's default consent modal. Our slim
.cookie-banner drives consent on first visit; the library's
preferences modal (.pm) stays visible when triggered via the
Manage button. */
#cc-main .cm { display: none !important; }
/* Preferences modal corner-rounding + padding overrides. The library's
defaults clip body content near the top corners on narrow viewports.
Class names verified against the v3.1.0 stylesheet shipped in
styles/cookieconsent.css. */
#cc-main .pm { border-radius: 12px; }
#cc-main .pm__body { padding: 24px 28px; }
#cc-main .pm__section { padding: 16px 0; }
#cc-main .pm__btn { border-radius: 6px; }
/* Mobile: add extra breathing room above the page-hero eyebrow so it
doesn't sit too close to the fixed header at < 720px. Desktop unchanged. */
@media (max-width: 720px) {
.page-hero {
padding-top: calc(var(--section) + clamp(56px, 12vw, 96px));
}
}
/* Recognition placeholder row on /about/: three 4:3 blocks side by side,
collapsing to single column at <720px. Used in place of the previous
single-figure layout. */
.recognition-images {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 32px);
margin-bottom: clamp(40px, 5vw, 64px);
}
@media (max-width: 720px) {
.recognition-images { grid-template-columns: 1fr; }
}
/* Recognition section sits on a continuous white band so the credential
logos' white artwork reads cleanly against the cream page. Includes
the heading + eyebrow and all three credential cards. */
.recognition { background: var(--bg-white); }
/* Logo paired inside each press card, above its title. Left-aligned,
modest height, even spacing. */
.press-logo {
height: 64px;
width: auto;
max-width: 100%;
display: block;
align-self: flex-start;
margin-bottom: 4px;
}
@media (max-width: 720px) {
.press-logo { height: 56px; }
}
/* ==============================================================
WORK PAGE LIGHTBOX
Single reusable overlay appended by scripts/work-lightbox.js when
a project tile with a real image is clicked. Shows the uncropped
image contained inside the viewport on a dark backdrop.
============================================================== */
body.lightbox-open { overflow: hidden; }
.lightbox {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(24px, 4vw, 56px);
background: rgba(8, 6, 4, 0.92);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open {
opacity: 1;
pointer-events: auto;
}
.lightbox img {
max-width: 90vw;
max-height: 90vh;
width: auto;
height: auto;
object-fit: contain;
display: block;
border-radius: 2px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
position: absolute;
top: max(16px, env(safe-area-inset-top, 16px));
right: max(16px, env(safe-area-inset-right, 16px));
width: 44px;
height: 44px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.55);
color: #ffffff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lightbox-close:hover {
background: rgba(255, 255, 255, 0.12);
border-color: #ffffff;
}
.lightbox-close:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
.lightbox-close svg { width: 16px; height: 16px; display: block; }
/* Clickable tile affordance — applied by scripts/work-lightbox.js only
to tiles with a real (non-placeholder) image. */
.work-thumb.is-clickable { cursor: zoom-in; }
.work-thumb.is-clickable:focus-visible {
outline: 2px solid var(--copper);
outline-offset: 3px;
}
/* ==============================================================
TESTIMONIALS | two-column quote pair on the homepage
============================================================== */
/* "What clients say." sits on a single line; trim the heading's own
block whitespace so the eyebrow + heading don't leave an extra
returned line above the quote pair. */
.testimonials-section .case-section-head h2 {
white-space: nowrap;
margin: 0;
}
.testimonials-list {
display: grid;
grid-template-columns: 1fr;
gap: clamp(40px, 5vw, 64px);
margin-top: clamp(40px, 5vw, 64px);
}
@media (min-width: 880px) {
.testimonials-list { grid-template-columns: 1fr 1fr; }
}
.testimonial {
margin: 0;
padding-top: clamp(24px, 3vw, 36px);
border-top: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: 24px;
}
.testimonial-quote {
margin: 0;
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.02rem, 1.35vw, 1.2rem);
line-height: 1.55;
color: var(--ink);
letter-spacing: -0.005em;
text-wrap: pretty;
}
.testimonial-quote p { margin: 0; }
.testimonial-attr {
font-family: 'Onest', sans-serif;
font-size: 0.86rem;
line-height: 1.45;
color: var(--ink-mute);
font-style: normal;
text-wrap: balance;
}
/* ==============================================================
CAROUSEL | per-project Work card image carousel
Track holds N slides side by side; container clips to one slide
at a time, JS translates the track left/right. Controls are
arrow buttons and a plain-text "n / total" counter.
============================================================== */
.carousel {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--bg-tint);
border-radius: inherit;
}
.carousel-track {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.45s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
will-change: transform;
}
.carousel-slide {
flex: 0 0 100%;
width: 100%;
height: 100%;
}
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
user-select: none;
}
.carousel-prev,
.carousel-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(245, 242, 234, 0.86);
color: var(--ink);
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 2;
transition: background 0.25s ease-out, color 0.25s ease-out;
}
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
.carousel-prev:hover,
.carousel-next:hover {
background: var(--copper);
color: #ffffff;
}
.carousel-prev:focus-visible,
.carousel-next:focus-visible {
outline: 2px solid var(--copper);
outline-offset: 2px;
}
.carousel-prev svg,
.carousel-next svg { display: block; }
.carousel-counter {
position: absolute;
right: 12px;
bottom: 12px;
background: rgba(245, 242, 234, 0.86);
padding: 4px 10px;
border-radius: 999px;
font-family: 'Onest', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--ink);
z-index: 2;
font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
.carousel-track { transition: none; }
}
@media (max-width: 600px) {
.carousel-prev,
.carousel-next { width: 32px; height: 32px; }
}