.page-header{position:relative;min-height:76svh;display:flex;align-items:flex-end;padding:150px var(--pad) 70px;overflow:hidden;color:#fff;background:#171717}.page-header-media{position:absolute;inset:0;background:url('assets/hero-original.jpg') center/cover no-repeat;filter:grayscale(1)}.page-header-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.16)),linear-gradient(to top,rgba(0,0,0,.7),transparent 65%)}.page-header-content{position:relative;z-index:1;width:min(1180px,100%)}.page-header h1{font-size:clamp(68px,12vw,188px);margin-bottom:18px}.page-header .intro{max-width:760px;font-size:clamp(20px,2.6vw,36px);line-height:1.16;letter-spacing:-.03em}.page-header.credits-hero{background:radial-gradient(circle at 78% 22%,#ee6aa6,#5837cc 45%,#111 82%)}.bio-section{display:grid;grid-template-columns:.65fr 1.35fr;gap:clamp(50px,10vw,160px);align-items:start}.bio-facts{position:sticky;top:100px}.bio-fact{padding:18px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}.bio-fact strong{display:block;color:var(--ink);font-size:clamp(28px,3vw,48px);letter-spacing:-.05em}.bio-copy .lead{font-size:clamp(30px,4vw,58px);line-height:1.08;letter-spacing:-.045em}.bio-copy>p:not(.lead){font-size:clamp(17px,1.7vw,23px);max-width:820px;color:#46423d;margin:0 0 1.5em}.statement{margin:80px calc(var(--pad)*-1);padding:80px var(--pad);background:var(--acid);font-size:clamp(60px,10vw,150px);font-weight:800;line-height:.84;letter-spacing:-.07em}.career-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.career-card{min-height:320px;padding:30px;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between}.career-card:nth-child(2){background:var(--acid)}.career-card:nth-child(3){background:#b9d5e3;color:var(--ink)}.career-card h3{font-size:clamp(28px,3vw,48px);letter-spacing:-.05em;line-height:.95}.career-card p{margin:0;font-size:13px}.credits-section{padding-top:70px}.credit-filters{position:sticky;top:0;z-index:40;display:flex;gap:9px;flex-wrap:wrap;padding:18px var(--pad);background:rgba(243,240,233,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.filter-button{border:1px solid var(--ink);border-radius:999px;background:transparent;padding:10px 14px;font:700 11px Inter,Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.filter-button.active,.filter-button:hover{background:var(--ink);color:#fff}.credit-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:26px}.credit-card{position:relative;grid-column:span 6;min-height:clamp(320px,40vw,560px);padding:30px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:#111}.credit-card:nth-child(4n+1){background:linear-gradient(145deg,#dce9ff,#ff6d56 48%,#ffd85a)}.credit-card:nth-child(4n+2){background:linear-gradient(145deg,#ffcc65,#8ed8ee 55%,#2493a9)}.credit-card:nth-child(4n+3){background:linear-gradient(145deg,#d82375,#ffb300 55%,#fff06e)}.credit-card:nth-child(4n+4){background:linear-gradient(145deg,#6ed3ff,#8dd874 55%,#f2d67c)}.credit-card:nth-child(3n){grid-column:span 5}.credit-card:nth-child(3n+1){grid-column:span 7}.credit-card::before{content:attr(data-category);position:absolute;top:28px;left:30px;text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:800}.credit-card .number{position:absolute;right:-.02em;top:-.18em;font-size:clamp(130px,18vw,270px);font-weight:900;letter-spacing:-.1em;line-height:1;color:rgba(255,255,255,.26)}.credit-card h2{position:relative;font-size:clamp(40px,5.5vw,82px);max-width:9ch;margin-bottom:18px}.credit-card .network{position:relative;align-self:flex-start;border:1px solid currentColor;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.credit-card[hidden]{display:none}.credits-note{margin-top:80px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:30px;font-size:13px}.site-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}@media(max-width:820px){.page-header{min-height:70svh;padding-bottom:42px}.bio-section{grid-template-columns:1fr}.bio-facts{position:static}.career-grid{grid-template-columns:1fr}.credit-grid{display:block}.credit-card{min-height:390px;margin-bottom:20px}.credits-note{flex-direction:column}}

/* Artwork sits above a solid caption so titles stay readable on every image. */
.credit-card { padding:0; justify-content:flex-start; min-height:0; background:#171717 !important; color:#fff; }
.credit-art { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:#171717; }
.credit-card h2 { font-size:clamp(26px,3.2vw,48px); max-width:none; margin:24px 24px 16px; }
.credit-card .network { margin:0 24px 24px; }
.credit-card::before { display:none; }
.credit-card .number { top:12px; right:12px; font-size:14px; letter-spacing:0; color:#fff; background:rgba(0,0,0,.75); padding:8px; border-radius:4px; }


/* Photographs follow the biography in a quiet, aligned editorial layout. */
.bio-photo-duo { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0 0 48px; }
.bio-photo-duo figure { margin:0; min-width:0; }
.bio-photo-duo img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center; }
.bio-photo-duo figcaption { margin-top:12px; font-size:11px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.bio-pair-photo { margin:36px 0 0; max-width:320px; }
.bio-pair-photo img { display:block; width:100%; height:auto; }
@media(max-width:480px) { .bio-photo-duo { gap:12px; } }

.bio-photo-duo .bio-on-stage img { object-position:left center; }

.bio-photo-duo img[src="assets/about-bass.webp"] { filter:grayscale(1); }

.awards-intro { font-size:13px; color:var(--muted); max-width:28ch; margin-bottom:24px; }
.bio-fact strong { font-size:clamp(24px,2.5vw,38px); margin-bottom:8px; }

.bio-fact .award-heading { display:flex; align-items:center; gap:12px; font-size:clamp(21px,2vw,30px); line-height:1.1; }
.award-mark { flex:0 0 56px; display:flex; align-items:center; justify-content:center; height:56px; }
.award-mark img { display:block; width:100%; height:100%; object-fit:contain; }
.award-broadcast { background:#191919; padding:6px; border-radius:3px; }
.award-rts { background:#191919; padding:5px; border-radius:3px; }
.award-bafta img { width:27px; height:52px; }

.range-section { background:#ff6b35; color:var(--ink); }

.award-rts { padding:3px; flex-basis:62px; height:62px; }

.bio-testimonial { font-size:clamp(36px,5vw,72px); line-height:1.06; letter-spacing:-.045em; }
.bio-testimonial p { margin:0; }
.bio-testimonial footer { margin-top:30px; font-size:14px; line-height:1.5; letter-spacing:0; font-weight:600; }
.bio-testimonial footer span { font-weight:400; }

/* Project artwork forms a full-bleed backdrop to the credits introduction. */
.page-header.credits-hero { background:#171717; isolation:isolate; }
.credits-collage { position:absolute; inset:-25px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:8px; transform:rotate(-3deg) scale(1.08); pointer-events:none; }
.credits-collage img { width:100%; height:100%; min-height:0; object-fit:cover; }
.page-header.credits-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,8,15,.88),rgba(8,8,15,.4)),linear-gradient(0deg,rgba(8,8,15,.78),rgba(8,8,15,.1) 85%); pointer-events:none; }
.credits-hero .page-header-content { z-index:2; }
@media(max-width:600px) {
 .credits-collage { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); }
}

.award-sony { flex-basis:62px; }

.credits-collage img[src="assets/credit-15.webp"] { object-position:68% center; }

.credits-collage img[src="assets/credit-01.webp"] { object-position:25% top; }

/* Consistent, compact credits grid. */
.credit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 24px; }
.credit-grid .credit-card { grid-column:auto; min-height:0; margin:0; background:transparent !important; color:var(--ink); }
.credit-grid .credit-art { aspect-ratio:16/9; object-fit:cover; }
.credit-grid .credit-card h2 { font-size:clamp(22px,2.1vw,30px); line-height:1.08; letter-spacing:-.035em; margin:16px 0 8px; max-width:none; }
.credit-grid .credit-card .network { margin:0; padding:0; border:0; border-radius:0; font-size:11px; color:var(--muted); letter-spacing:.06em; }
@media(max-width:1000px) { .credit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .credit-grid { grid-template-columns:1fr; gap:32px; } }

.credit-grid .credit-art[src="assets/credit-14.webp"] { object-position:center top; }

/* Give the credits artwork more presence while retaining the consistent grid. */
.credits-section { padding-left:clamp(20px,3.5vw,64px); padding-right:clamp(20px,3.5vw,64px); }
.credit-grid { gap:30px 16px; }
.credit-grid .credit-card { overflow:hidden; }
.credit-grid .credit-art { transition:transform .35s ease; transform-origin:center; }
.credit-grid .credit-card h2 { position:relative; padding-bottom:8px; }
.credit-grid .credit-card h2::after { content:""; position:absolute; left:0; bottom:0; width:44px; height:3px; background:#ff6b35; transform:scaleX(1); transform-origin:left; }
@media(hover:hover) and (pointer:fine) {
 .credit-grid .credit-card:hover .credit-art { transform:scale(1.035); }
 .credit-grid .credit-card:hover h2::after { transform:scaleX(1); }
}
@media(prefers-reduced-motion:reduce) {
 .credit-grid .credit-art,.credit-grid .credit-card h2::after { transition:none; }
 .credit-grid .credit-card:hover .credit-art { transform:none; }
}

.range-section { padding-top:clamp(44px,5vw,72px); padding-bottom:clamp(44px,5vw,72px); }
.range-section .career-card { min-height:210px; padding:24px; }
.range-section .career-card h3 { font-size:clamp(26px,2.7vw,40px); }
@media(max-width:820px) { .range-section .career-card { min-height:170px; padding:22px; } }

.credit-grid .credit-card h2 { align-self:flex-start; }
.credit-grid .credit-card h2::after { width:100%; height:2px; }

.credit-grid .credit-card h2::after { display:none; }
.credit-grid .credit-card h2 { padding-bottom:0; }

/* Genre-specific artwork sits behind each Range label. */
.range-section .career-grid { gap:14px; background:transparent; }
.range-section .career-card { position:relative; isolation:isolate; overflow:hidden; min-height:250px; color:#fff; background:#171717; }
.range-collage { position:absolute; inset:-20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:5px; transform:rotate(-5deg) scale(1.08); z-index:-2; }
.range-collage img { display:block; width:100%; height:100%; min-height:0; object-fit:cover; }
.range-section .career-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.35)); z-index:-1; }
.range-collage img[src="assets/credit-01.webp"] { object-position:25% top; }
.range-collage img[src="assets/credit-15.webp"] { object-position:68% center; }
.range-collage img[src="assets/credit-14.webp"] { object-position:center top; }
@media(max-width:820px) { .range-section .career-card { min-height:220px; } }

.range-collage img[src="assets/credit-20.webp"] { object-position:center top; }

.range-section a.career-card { text-decoration:none; }
.range-section a.career-card:hover h3 { text-decoration:underline; text-underline-offset:5px; }
.range-section a.career-card:focus-visible { outline:3px solid #fff; outline-offset:4px; }

@media(max-width:600px) {
 .page-header:not(.credits-hero) { display:block; min-height:0; padding:0; }
 .page-header:not(.credits-hero) .page-header-media { position:relative; inset:auto; height:clamp(260px,42svh,380px); }
 .page-header:not(.credits-hero) .page-header-media::after { background:rgba(0,0,0,.12); }
 .page-header:not(.credits-hero) .page-header-content { padding:28px var(--pad) 36px; }
 .page-header h1 { font-size:clamp(48px,14vw,72px); }
 .page-header.credits-hero { min-height:440px; padding:80px var(--pad) 36px; }
 .bio-section { gap:36px; }
 .statement { margin:36px 0; padding:30px 22px; }
 .bio-testimonial { font-size:clamp(28px,8vw,40px); }
 .bio-testimonial footer { margin-top:20px; font-size:12px; }
 .bio-photo-duo { margin-bottom:30px; }
 .range-section { padding-top:36px; padding-bottom:36px; }
 .range-section .career-card { min-height:190px; }
 .credits-section { padding-top:36px; }
 .credits-note { margin-top:40px; }
 .credit-filters { position:static; padding-top:14px; padding-bottom:14px; }
 .filter-button { min-height:44px; }
}

@media(max-width:600px) {
 .credits-collage { inset:0; transform:none; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:4px; }
 .credits-collage img:nth-child(n+5) { display:none; }
 /* A single row preserves the landscape compositions in the genre cards. */
 .range-collage { inset:0; transform:none; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:1fr; gap:4px; }
 .range-collage img:nth-child(n+3) { display:none; }
 .range-section .career-card { min-height:170px; }
}

.bio-copy > .bio-testimonial:last-child { margin-bottom:0; }
@media(max-width:600px) {
 .bio-section { padding-bottom:28px; }
 .credits-collage { inset:-8px; transform:rotate(-3deg) scale(1.04); }
 .range-collage { inset:-8px; transform:rotate(-3deg) scale(1.04); }
}

@media(min-width:821px) {
 .page-header h1 { font-size:clamp(34px,6vw,94px); }
 .bio-testimonial { font-size:clamp(24px,2.5vw,36px); }
}

@media(min-width:601px) { .page-header.credits-hero h1 { font-size:clamp(34px,6vw,94px); } }

@media(min-width:601px) { .about-page .page-header h1 { font-size:clamp(34px,6vw,94px); } }

@media(min-width:821px) {
 .about-page .page-header { padding-bottom:28px; }
 .about-page .page-header h1 { margin-bottom:12px; }
 .about-page .page-header .eyebrow { margin-bottom:12px; }
 .about-page .page-header .intro { max-width:650px; font-size:clamp(18px,2vw,26px); margin-bottom:0; }
}

@media(max-width:600px) { .bio-section .bio-copy { order:1; } .bio-section .bio-facts { order:2; } }



.credits-section { padding-bottom:clamp(60px,8vw,120px); }
@media(max-width:600px) { .credits-section { padding-bottom:35px; } }

.bio-testimonial { margin-top:60px; margin-bottom:60px; padding-top:60px; padding-bottom:60px; }
.bio-copy > .bio-testimonial:last-child { margin-bottom:0; }
.credits-note { margin-top:60px; }
@media(max-width:600px) {
 .bio-testimonial { margin-top:28px; margin-bottom:28px; padding-top:24px; padding-bottom:24px; }
 .credits-note { margin-top:30px; }
}

/* Match About portrait framing to the homepage. */
@media (max-width: 600px) {
  .about-page .page-header .page-header-media { height: clamp(340px, 78vw, 470px); background-position: center; }
}
@media (min-width: 821px) {
  .about-page .page-header { min-height: 100svh; }
  .about-page .page-header-media { background-position: 35% center; }
}

@media (max-width: 820px) {
  .about-page .page-header { display: block; min-height: 0; padding: 0; }
  .about-page .page-header .page-header-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(340px, 78vw, 470px);
    background-size: cover;
    background-position: center;
  }
  .about-page .page-header .page-header-content { padding: 28px var(--pad) 36px; }
}

/* Studio portrait for About. */
.about-page .page-header-media {
  background-image: url('assets/showreel-studio.webp');
  background-position: center;
}
@media (max-width: 820px) {
  .about-page .page-header .page-header-media { background-position: 58% center; }
}

/* Subtle photographic grain and a little more lift for About copy. */
.about-page .page-header-media::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
@media (min-width: 821px) {
  .about-page .page-header { padding-bottom: 64px; }
}
@media (max-width: 820px) {
  .about-page .page-header .page-header-content { padding-top: 18px; }
}

.about-page .page-header .page-header-media::after { background: none; }

.about-page .page-header-media { filter: none; }