@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap");

:root { --ink:#11100f; --paper:#e7e2d7; --bone:#c8c0b2; --wine:#9b4d42; --smoke:#201e1b; --mono:"DM Mono",monospace; --sans:"DM Sans",sans-serif; --serif:"Playfair Display",Georgia,serif; }
* { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; } body { overflow-x:hidden; background:var(--ink); color:var(--paper); font-family:var(--sans); } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } ::selection { background:var(--wine); color:var(--paper); } a:focus-visible,button:focus-visible { outline:2px solid var(--wine); outline-offset:5px; } .script-hook { display:none; }

.site-header { position:absolute; top:0; left:0; z-index:5; width:100%; color:var(--paper); } .site-nav { display:flex; align-items:center; justify-content:space-between; width:min(1500px,94vw); min-height:78px; margin:auto; } .nav__header { display:flex; align-items:center; } .brand { font:500 1rem/1 var(--mono); letter-spacing:.06em; } .nav__menu__btn { display:none; color:inherit; border:0; background:none; font-size:1.35rem; cursor:pointer; } .nav__links { display:flex; align-items:center; gap:1.6rem; list-style:none; font:.6rem/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; } .nav__links a { opacity:.8; transition:opacity .25s ease; } .nav__links a:hover { opacity:1; } .nav__links .quiet-link { color:var(--bone); }

.hero { position:relative; min-height:100svh; background:var(--smoke); isolation:isolate; } .hero-image { position:absolute; inset:0; z-index:-1; overflow:hidden; } .hero-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgb(9 8 8 / 78%) 0%,rgb(10 9 9 / 27%) 45%,rgb(10 9 9 / 10%) 100%),linear-gradient(0deg,rgb(10 9 9 / 58%),transparent 38%); } .hero-image img { width:100%; height:100%; object-fit:cover; object-position:center 60%; filter:saturate(.72) contrast(1.07) brightness(.72); transform:scale(1.02); } .hero-image figcaption { position:absolute; right:3vw; bottom:2rem; z-index:1; color:var(--paper); font:.56rem/1.4 var(--mono); letter-spacing:.1em; writing-mode:vertical-rl; transform:rotate(180deg); }
.hero-title-wrap { position:absolute; top:50%; left:clamp(1.5rem,8vw,10rem); transform:translateY(-38%); max-width:780px; } .hero-note,.kicker,.contact-label { color:var(--bone); font:.6rem/1.5 var(--mono); letter-spacing:.12em; } .hero h1 { margin-top:1.4rem; font:500 clamp(5rem,12.2vw,12.5rem)/.75 var(--serif); letter-spacing:-.075em; } .hero h1 em,.work-heading em { color:var(--wine); font-weight:500; } .hero-intro { width:min(100%,300px); margin-top:2.2rem; color:var(--bone); font-size:.9rem; line-height:1.5; } .hero-scroll { position:absolute; bottom:2rem; left:clamp(1.5rem,8vw,10rem); font:.58rem/1 var(--mono); letter-spacing:.1em; } .hero-scroll span { margin-left:.7rem; color:var(--wine); font-size:1rem; }

.work { padding:clamp(6rem,14vw,15rem) 6vw clamp(7rem,12vw,12rem); background:var(--paper); color:var(--ink); } .work-heading { display:grid; grid-template-columns:17% 1fr; align-items:start; margin-bottom:clamp(4rem,9vw,9rem); } .side-note { padding-top:.6rem; color:var(--wine); font:.6rem/1.45 var(--mono); letter-spacing:.1em; } .work-heading h2 { max-width:800px; font:500 clamp(4rem,8.8vw,9rem)/.8 var(--serif); letter-spacing:-.07em; } .work-list { display:grid; grid-template-columns:1.25fr .78fr .7fr; align-items:start; gap:clamp(1rem,3vw,3.5rem); max-width:1380px; margin:auto; } .work-piece { position:relative; display:block; overflow:hidden; } .photo-piece { margin-top:0; } .film-piece { margin-top:clamp(4rem,13vw,13rem); } .design-piece { min-height:360px; margin-top:clamp(1.5rem,6vw,7rem); padding:1.4rem; background:var(--wine); color:var(--paper); } .photo-piece img,.film-piece img { width:100%; object-fit:cover; filter:grayscale(100%) contrast(1.08); transition:transform .65s cubic-bezier(.2,.6,.2,1),filter .65s ease; } .photo-piece img { aspect-ratio:4/5; } .film-piece img { aspect-ratio:3/4; } .photo-piece:hover img,.film-piece:hover img { transform:scale(1.045); filter:grayscale(45%) contrast(1.04); } .piece-copy { padding-top:1rem; } .photo-piece .piece-copy,.film-piece .piece-copy { color:var(--ink); } .piece-copy p,.piece-copy small { display:block; font:.58rem/1.45 var(--mono); letter-spacing:.1em; } .piece-copy h3 { margin-top:.5rem; font:500 clamp(1.7rem,2.7vw,3.2rem)/.93 var(--serif); letter-spacing:-.04em; } .piece-copy h3 span { color:var(--wine); } .piece-copy small { margin-top:1rem; color:inherit; opacity:.72; } .type-composition { position:absolute; inset:0; overflow:hidden; pointer-events:none; font:500 clamp(3.8rem,6vw,7rem)/.7 var(--serif); letter-spacing:-.08em; color:rgb(255 255 255 / 22%); } .type-composition span { position:absolute; } .type-composition span:nth-child(1) { top:12%; left:-12%; } .type-composition span:nth-child(2) { top:39%; right:-16%; font-style:italic; } .type-composition span:nth-child(3) { bottom:9%; left:-14%; } .design-piece .piece-copy { position:absolute; bottom:1.5rem; left:1.4rem; }

.practice { position:relative; min-height:740px; padding:clamp(7rem,13vw,13rem) 10vw; overflow:hidden; background:var(--ink); } .vertical-note { position:absolute; top:5rem; left:2.4rem; color:var(--wine); font:.58rem/1 var(--mono); letter-spacing:.12em; writing-mode:vertical-rl; } .practice-text { position:relative; z-index:1; max-width:740px; margin-left:12%; } .practice h2 { margin-top:1.5rem; font:500 clamp(3.8rem,7vw,7.4rem)/.86 var(--serif); letter-spacing:-.065em; } .practice-copy { max-width:440px; margin:2.5rem 0 0 24%; color:var(--bone); font-size:1rem; line-height:1.65; } .practice-image { position:absolute; right:8vw; bottom:0; width:clamp(140px,18vw,270px); transform:rotate(5deg); filter:sepia(.2) contrast(1.12); box-shadow:0 20px 45px rgb(0 0 0 / 35%); }

.story-comparison { padding:clamp(6rem,12vw,12rem) 6vw; background:var(--smoke); color:var(--paper); } .story-comparison__heading { display:grid; grid-template-columns:17% 1fr; align-items:start; gap:1rem; max-width:1380px; margin:0 auto clamp(3rem,6vw,6rem); } .story-comparison__heading h2 { font:500 clamp(4.2rem,8vw,8.5rem)/.82 var(--serif); letter-spacing:-.07em; } .story-comparison__heading > div > p { margin-top:1.2rem; color:var(--bone); font-size:1rem; } .comparison { position:relative; width:min(100%,760px); aspect-ratio:9 / 16; margin:auto; overflow:hidden; background:var(--ink); cursor:ew-resize; isolation:isolate; touch-action:pan-y; user-select:none; } .comparison:focus-within { outline:2px solid var(--paper); outline-offset:7px; } .comparison__image { position:absolute; inset:0; } .comparison__image img { width:100%; height:100%; max-width:none; object-fit:contain; object-position:center; } .comparison__image--raw { z-index:2; clip-path:inset(0 calc(100% - var(--comparison-position)) 0 0); } .comparison__image--edited { z-index:1; } .comparison__divider { position:absolute; z-index:4; top:0; bottom:0; left:var(--comparison-position); width:1px; background:var(--paper); transform:translateX(-50%); pointer-events:none; } .comparison__handle { position:absolute; top:50%; left:50%; display:grid; width:clamp(3.5rem,5vw,4.7rem); aspect-ratio:1; place-items:center; border:1px solid rgb(231 226 215 / 80%); border-radius:50%; background:var(--wine); box-shadow:0 0 0 7px rgb(17 16 15 / 16%); transform:translate(-50%,-50%); } .comparison__handle svg { width:58%; height:auto; fill:none; stroke:var(--paper); stroke-linecap:round; stroke-linejoin:round; stroke-width:1.35; } .comparison__label,.comparison__instruction { position:absolute; z-index:3; margin:0; color:var(--paper); font:.6rem/1.25 var(--mono); letter-spacing:.13em; text-shadow:0 1px 12px rgb(0 0 0 / 50%); pointer-events:none; } .comparison__label { top:1.35rem; padding:.5rem .6rem; border:1px solid rgb(231 226 215 / 42%); transition:opacity .18s ease; } .comparison__label--raw { left:1.35rem; opacity:var(--raw-label-opacity,1); } .comparison__label--edited { right:1.35rem; opacity:var(--edited-label-opacity,1); } .comparison__instruction { bottom:1.4rem; left:50%; transform:translateX(-50%); white-space:nowrap; } .comparison__instruction--mobile { display:none; } .comparison__range { position:absolute; z-index:5; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; } .comparison.is-demonstrating .comparison__image--raw { transition:clip-path 300ms ease; } .comparison.is-demonstrating .comparison__divider { transition:left 300ms ease; }

.contact { display:flex; flex-direction:column; align-items:center; padding:clamp(6rem,12vw,11rem) 6vw; background:var(--smoke); text-align:center; } .contact-label { color:var(--wine); } .contact h2 { margin-top:1.4rem; font:500 clamp(5rem,11vw,12rem)/.76 var(--serif); letter-spacing:-.08em; } .contact-links { display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem 1.8rem; margin-top:3.5rem; font:.63rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; } .contact-links a { padding-bottom:.45rem; border-bottom:1px solid var(--wine); transition:color .25s ease; } .contact-links a:hover { color:var(--wine); } .site-footer { display:flex; justify-content:space-between; padding:1.4rem 3vw; border-top:1px solid rgb(231 226 215 / 16%); color:var(--bone); font:.57rem/1.3 var(--mono); letter-spacing:.08em; }

@media (max-width:800px) { .site-header { position:relative; background:var(--ink); } .site-nav { display:block; min-height:0; } .nav__header { justify-content:space-between; min-height:70px; } .nav__menu__btn { display:block; } .nav__links { display:none; align-items:flex-start; flex-direction:column; gap:1.15rem; padding:0 0 1.4rem; } .nav__links.open { display:flex; } .hero { min-height:calc(100svh - 70px); } .hero-title-wrap { top:auto; bottom:13%; left:7vw; transform:none; } .hero h1 { font-size:clamp(4.3rem,16vw,7rem); } .hero-image figcaption { right:4vw; bottom:1.5rem; } .hero-scroll { left:7vw; bottom:1.5rem; } .work { padding-inline:7vw; } .work-heading { grid-template-columns:1fr; gap:1.4rem; } .work-list { grid-template-columns:1fr 1fr; gap:1.2rem; } .photo-piece { grid-column:1 / -1; } .photo-piece img { aspect-ratio:16/10; } .film-piece { margin-top:0; } .design-piece { min-height:300px; margin-top:4rem; } .practice { min-height:650px; padding:6rem 12vw 14rem; } .vertical-note { left:1rem; top:3rem; } .practice-text { margin-left:7%; } .practice-copy { margin-left:8%; } .practice-image { right:10vw; } }
@media (max-width:800px) { .story-comparison { padding-inline:7vw; } .story-comparison__heading { grid-template-columns:1fr; gap:1.35rem; } .comparison__label { top:1rem; } .comparison__label--raw { left:1rem; } .comparison__label--edited { right:1rem; } .comparison__instruction--desktop { display:none; } .comparison__instruction--mobile { display:inline; } .comparison__divider span { width:4rem; } }
@media (max-width:500px) { .hero h1 { font-size:clamp(4rem,18vw,5.5rem); } .hero-note { max-width:220px; } .hero-intro { max-width:240px; font-size:.83rem; } .work-heading h2 { font-size:clamp(3.8rem,17vw,5.2rem); } .work-list { grid-template-columns:1fr; } .photo-piece { grid-column:auto; } .film-piece { margin:2rem 14vw 0 0; } .design-piece { margin:0 0 0 12vw; } .practice { min-height:700px; padding:5.5rem 14vw 15rem; } .practice-text { margin-left:0; } .practice h2 { font-size:clamp(3.5rem,15vw,4.6rem); } .practice-copy { margin-left:0; font-size:.92rem; } .contact h2 { font-size:clamp(4.8rem,19vw,6.8rem); } .site-footer { flex-direction:column; gap:.8rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }

/* Motion layer: transforms only, so the editorial layout remains unchanged. */
.hero-image img { transform:translate3d(0,var(--hero-shift,0),0) scale(1.05); will-change:transform; }
.hero-scroll::before { content:""; display:inline-block; width:22px; height:1px; margin:0 .65rem .2rem 0; background:var(--wine); transform:scaleX(calc(.55 + var(--scroll-progress,0) * .45)); transform-origin:left; }
.hero-scroll span { display:inline-block; transform:translateY(calc(var(--scroll-progress,0) * 10px)); }
.photo-piece img,.film-piece img { transform:translate3d(0,var(--image-shift,0),0) scale(1.025); will-change:transform; }
.photo-piece:hover img,.film-piece:hover img { transform:translate3d(0,var(--image-shift,0),0) scale(1.055); }
.type-composition,.practice h2 { transform:translate3d(0,var(--drift-y,0),0); will-change:transform; }
html.motion-ready [data-reveal] { opacity:0; transform:translate3d(0,32px,0); transition:opacity 800ms ease,transform 900ms cubic-bezier(.2,.65,.2,1); }
html.motion-ready [data-reveal].is-visible { opacity:1; transform:translate3d(0,0,0); }
html.motion-ready .practice-image[data-reveal] { transform:rotate(5deg) translate3d(0,32px,0); }
html.motion-ready .practice-image[data-reveal].is-visible { transform:rotate(5deg) translate3d(0,0,0); }
html.motion-ready .work-list [data-reveal]:nth-child(2) { transition-delay:100ms; }
html.motion-ready .work-list [data-reveal]:nth-child(3) { transition-delay:180ms; }
@media (max-width:800px) { .hero-image img,.photo-piece img,.film-piece img { transform:scale(1.02); will-change:auto; } .type-composition,.practice h2 { transform:none; will-change:auto; } html.motion-ready .practice-image[data-reveal],html.motion-ready .practice-image[data-reveal].is-visible { transform:rotate(5deg) translate3d(0,0,0); } }

/* Medium weight for creative navigation, captions, and editorial micro-type. */
.nav__links,.hero-image figcaption,.hero-note,.kicker,.contact-label,.hero-scroll,.side-note,.work-index,.work-type,.piece-copy p,.piece-copy small,.vertical-note,.contact-links,.site-footer { font-weight:500; }

/* Phone crop: hold the Cardiff building low and central, leaving poster copy outside the frame. */
@media (max-width:600px) {
  .hero-image img { object-position:52% 88%; transform:scale(1.38); }
}

/* Portrait phones: crop from the bottom-anchored photograph rather than showing its poster header. */
@media (max-width:600px) and (orientation:portrait) {
  .hero-image img { object-position:52% 100%; transform-origin:center bottom; transform:scale(1.72); }
}

/* The display SVG has a tight viewBox; the source artwork remains untouched. */
.brand { display:block; width:108px; } .brand .creative-logo { display:block; width:108px; height:auto; }
@media (max-width:800px) { .brand { width:78px; } .brand .creative-logo { width:78px; } }

/* A quiet anchored layer keeps the masthead legible over the opening image. */
.site-header { position:fixed; z-index:20; background:transparent; border-bottom:1px solid transparent; transition:background-color .28s ease,border-color .28s ease; }
.site-header.is-scrolled { background:rgb(17 16 15 / 90%); border-color:rgb(231 226 215 / 16%); backdrop-filter:blur(10px) saturate(110%); -webkit-backdrop-filter:blur(10px) saturate(110%); }

@media (max-width:800px) { .site-header { position:sticky; background:transparent; } .site-header.is-scrolled { background:rgb(17 16 15 / 94%); } }