/* =====================================================
  GOOD BOY PRODUCTIONS
  STYLE.CSS — V4.11 / SOFT EDGE DOBERMAN
  2026-10-29
  ===================================================== */
 
/* 01 — DESIGN SYSTEM */
 
:root {
 --paper: #f7f2e7;
 --ink: #28352e;
 --muted: #626c60;
 --line: #28352e2b;
 --accent: #a6563f;
 --motion: 380ms;
 --ease: cubic-bezier(.2,.75,.2,1);
 --header-height: 100px;
 --page-gutter: 3.4vw;
}
 
*,
*::before,
*::after {
 box-sizing: border-box;
}
 
html {
 scroll-behavior: smooth;
 scroll-padding-top: 110px;
}
 
body {
 margin: 0;
 min-width: 0;
 background: var(--paper);
 color: var(--ink);
 font-family: 'Space Grotesk', Arial, sans-serif;
 line-height: 1.45;
 -webkit-font-smoothing: antialiased;
}
 
body.menu-open {
 overflow: hidden;
}
 
[hidden] {
 display: none !important;
}
 
a {
 color: inherit;
 text-decoration: none;
}
 
a:hover {
 color: var(--accent);
}
 
button {
 font: inherit;
 color: inherit;
 cursor: pointer;
 border: 0;
}
 
button,
a,
input {
 -webkit-tap-highlight-color: transparent;
 touch-action: manipulation;
}
 
button:focus-visible,
a:focus-visible,
input:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 5px;
}
 
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip-path: inset(50%);
 white-space: nowrap;
}
 
.skip-link {
 position: fixed;
 top: -100px;
 left: 20px;
 z-index: 100;
 padding: 14px 20px;
 background: var(--ink);
 color: var(--paper);
}
 
.skip-link:focus {
 top: 12px;
}
 
h1:focus {
 outline: none;
}
 
em {
 font-style: normal;
 color: #929780;
}
 
/* 02 — HEADER */
 
header {
 height: var(--header-height);
 position: fixed;
 inset: 0 0 auto;
 z-index: 30;
 display: flex;
 align-items: center;
 gap: clamp(20px, 3vw, 55px);
 padding: 0 var(--page-gutter);
 background: var(--paper);
 transition:
   background-color 300ms ease,
   color 300ms ease;
}
 
header .logo,
.home-mode header:not(.scrolled) .logo {
 display: block;
 visibility: visible;
 opacity: 1;
 flex: 0 0 auto;
 font-size: 36px;
 letter-spacing: -2.8px;
 font-weight: 700;
 line-height: 1;
 white-space: nowrap;
}
 
header .logo:hover {
 color: var(--ink);
}
 
.home-mode header:not(.scrolled) {
 background: var(--paper);
}
 
nav {
 display: flex;
 flex: 1;
 align-items: center;
 justify-content: flex-end;
 gap: clamp(28px, 3.2vw, 68px);
 min-width: 0;
 padding-left: clamp(24px, 5vw, 120px);
}
 
nav a {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 44px;
 padding: 10px 0;
 font-size: 14px;
 font-weight: 700;
 letter-spacing: 0;
 white-space: nowrap;
 text-transform: uppercase;
}
 
nav a.active::after {
 content: '';
 position: absolute;
 bottom: 3px;
 left: 0;
 right: 0;
 height: 1px;
 background: currentColor;
}
 
.language-switch {
 width: 44px;
 height: 44px;
 flex: 0 0 44px;
 border: 1px solid var(--line);
 border-radius: 50%;
 background: none;
 font-size: 11px;
 font-weight: 600;
}
 
.language-switch:hover {
 background: var(--ink);
 color: var(--paper);
}
 
.mobile-menu,
.current-page {
 display: none;
}
 
/* 03 — PAGE STRUCTURE */
 
.page {
 min-height: 90svh;
 padding: 160px var(--page-gutter) 90px;
 animation: enter .55s ease both;
}
 
.page.landing {
 padding: 0;
}
 
.eyebrow {
 font-size: 12px;
 line-height: 1.6;
 letter-spacing: .08em;
}
 
.text-link {
 display: inline-block;
 font-size: 13px;
 padding-bottom: 8px;
 border-bottom: 1px solid currentColor;
}
 
/* 04 — HERO */
 
.hero-sequence {
 position: relative;
 width: 100%;
}
 
.hero-scene,
.story-motion .hero-scene {
 --look-x: 0deg;
 --look-y: 0deg;
 --light-x: 50%;
 --light-y: 50%;
 
 position: relative;
 top: auto;
 width: 100%;
 height: 100svh;
 min-height: 740px;
 overflow: hidden;
 isolation: isolate;
 perspective: 1200px;
}
 
.story-motion .hero-sequence {
 height: auto;
 min-height: 0;
}
 
/* Large GOOD BOY headline */
 
.hero-wordmark {
 position: absolute;
 top: calc(var(--header-height) + 48px);
 left: var(--page-gutter);
 right: var(--page-gutter);
 z-index: 2;
 
 margin: 0;
 color: var(--ink);
 font-size: clamp(64px, 16.4vw, 290px);
 font-weight: 700;
 line-height: .84;
 letter-spacing: -.075em;
 white-space: nowrap;
 
 pointer-events: none;
}
 
.story-motion .hero-wordmark {
 transform: translateY(var(--title-lift, 0px));
 opacity: var(--title-opacity, 1);
}
 
/* Old duplicate coordinate is no longer needed */
 
.hero-coordinate {
 display: none !important;
}
 
/* Ambient lighting */
 
.hero-halo {
 position: absolute;
 inset: 20% 10% 12%;
 z-index: 0;
 background: radial-gradient(
   ellipse at var(--light-x) var(--light-y),
   #cbd0ba66,
   transparent 58%
 );
 opacity: .65;
 pointer-events: none;
 transition: opacity 800ms ease;
}
 
.reel-intent .hero-halo {
 opacity: 1;
}
 
/* Doberman artwork — contained within the visual centre, clear of CTAs */
 
.hero-scene .art {
 position: absolute;
 top: 30%;
 right: 23%;
 bottom: 10%;
 left: 13%;
 z-index: 1;
 display: flex;
 justify-content: center;
 align-items: center;
 min-width: 0;
 pointer-events: none;
 transform: rotateY(var(--look-x)) rotateX(var(--look-y));
 transition: transform 850ms var(--ease);
}
 
.chrome-dog {
 display: block;
 width: 100%;
 height: 100%;
 max-width: 100%;
 object-fit: contain;
 object-position: center;
 backface-visibility: hidden;
 mix-blend-mode: multiply;
 filter: contrast(1.08) saturate(.2);
 /* Wide, seamless fade: preserve the central sculpture and its scroll transform.
    Both masks intersect: the image reaches full transparency at every border. */
 -webkit-mask-image:
   linear-gradient(to right, transparent 0%, #000 19%, #000 81%, transparent 100%),
   linear-gradient(to bottom, transparent 0%, #000 9%, #000 79%, transparent 100%);
 -webkit-mask-composite: source-in;
 mask-image:
   linear-gradient(to right, transparent 0%, #000 19%, #000 81%, transparent 100%),
   linear-gradient(to bottom, transparent 0%, #000 9%, #000 79%, transparent 100%);
 mask-composite: intersect;
 animation: sculpture 16s ease-in-out infinite alternate;
 transition: filter 800ms var(--ease);
}
 
.story-motion .chrome-dog {
 animation: none;
 /* app.js already changes scroll-scale from 1 to .95 as the page scrolls.
    Invert that value into a subtle approach (1 to 1.10) instead of shrinking.
    The 3D yaw is a visual simulation on the image; not a true 3D model. */
 transform:
   translateY(calc(var(--scroll-lift, 0px) * .55))
   scale(calc(3 - 2 * var(--scroll-scale, 1)))
   rotateY(calc(var(--scroll-tilt, 0deg) * 2.6))
   rotateZ(calc(var(--scroll-tilt, 0deg) * -.35));
 transform-origin: 52% 58%;
 will-change: transform, opacity;
 opacity: var(--dog-opacity, 1);
}
 
.reel-intent .chrome-dog {
 filter: contrast(1.22) saturate(.1) brightness(1.04);
}
 
/* Discover films */
 
.hero-reel-link {
 position: absolute;
 top: 56%;
 right: 4vw;
 z-index: 4;
 
 display: flex;
 flex-direction: column;
 gap: 14px;
 
 width: clamp(180px, 19vw, 250px);
 padding: 18px 0;
 border-top: 1px solid var(--line);
}
 
.hero-reel-link > span,
.hero-reel-link small {
 font-size: 10px;
 letter-spacing: .08em;
}
 
.hero-reel-link strong {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 
 font-family: 'Barlow Condensed', sans-serif;
 font-size: clamp(25px, 2.5vw, 34px);
 line-height: 1;
 letter-spacing: -.025em;
 font-weight: 600;
}
 
.hero-reel-link strong span {
 font-family: 'Space Grotesk', sans-serif;
 transition: transform var(--motion) var(--ease);
}
 
.hero-reel-link:hover strong span {
 transform: translate(4px, 4px);
}
 
.hero-reel-link small {
 color: var(--muted);
 font-size: 9px;
}
 
.story-motion .hero-reel-link,
.story-motion .home-footer {
 opacity: var(--detail-opacity, 1);
}
 
/* Hero bottom navigation */
 
.home-footer {
 position: absolute;
 left: var(--page-gutter);
 right: var(--page-gutter);
 bottom: 30px;
 z-index: 5;
 
 display: flex;
 align-items: end;
 justify-content: space-between;
 gap: 18px;
 
 font-size: 12px;
}
 
.home-footer > div {
 display: flex;
 flex-wrap: wrap;
 gap: 18px;
}
 
.home-footer > .hero-discover {
 display: flex;
 align-items: center;
 gap: 20px;
 
 font-size: 12px;
 font-weight: 700;
}
 
.hero-discover span {
 display: grid;
 place-items: center;
 width: 46px;
 height: 46px;
 border: 1px solid var(--line);
 border-radius: 50%;
 font-size: 23px;
}
 
/* 05 — SELECTED FILMS */
 
.journal {
 padding: 70px var(--page-gutter);
 background: #1c2821;
 color: var(--paper);
}
 
.section-heading {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 30px;
 margin-bottom: 42px;
}
 
.section-heading h2 {
 margin: 0;
 font-size: 21px;
 font-weight: 500;
 letter-spacing: -.035em;
}
 
.section-heading h2 span {
 margin-left: 12px;
 color: #adb69b;
 font-size: 11px;
 vertical-align: top;
}
 
.section-heading > a {
 font-size: 13px;
}
 
.journal .section-heading {
 padding-bottom: 25px;
 border-bottom: 1px solid #ffffff30;
 margin-bottom: 45px;
}
 
.journal .section-heading h2 {
 font-size: clamp(23px, 3vw, 45px);
 letter-spacing: -.045em;
}
 
.journal-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 85px 4vw;
}
 
.journal article:first-child,
.journal article:last-child {
 grid-column: 1 / -1;
}
 
.journal article:nth-child(2) {
 padding-top: 40px;
}
 
.journal article:nth-child(3) {
 padding-top: 160px;
}
 
.journal article:nth-child(4) {
 padding-right: 14%;
}
 
.journal article:nth-child(5) {
 padding-top: 110px;
}
 
.journal article .film,
.journal article .film:hover {
 color: var(--paper);
}
 
.journal article .image {
 aspect-ratio: 1.55;
}
 
.journal article:first-child .image,
.journal article:last-child .image {
 aspect-ratio: 2.12;
}
 
.journal .image img {
 width: 100%;
 height: 100%;
 aspect-ratio: auto;
}
 
.selection-number {
 display: block;
 margin-bottom: 15px;
 color: #b6beab;
 font-size: 11px;
 letter-spacing: .13em;
}
 
.journal .caption {
 padding-top: 22px;
}
 
.journal .caption strong {
 font-size: clamp(24px, 2.3vw, 36px);
 font-weight: 500;
 letter-spacing: -.045em;
}
 
.journal .campaign-name {
 margin-top: 5px;
 color: #c6cbbd;
 font-size: 15px;
}
 
.journal .category {
 color: #c6cbbd;
}
 
.journal .film .play {
 width: 58px;
 height: 58px;
 background: transparent;
 color: var(--paper);
 border: 1px solid #f7f2e799;
 backdrop-filter: blur(10px);
}
 
.story-motion #featured article {
 transform: translateY(var(--entry-y, 0px));
 transition: transform 180ms ease-out;
}
 
.see-more {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 
 margin-top: 95px;
 padding: 45px 0 25px;
 border-top: 1px solid #ffffff30;
 
 font-size: clamp(40px, 8vw, 120px);
 letter-spacing: -.065em;
 line-height: 1;
}
 
.journal-footer {
 display: none;
}
 
/* 06 — SHOWREEL */
 
.showreel-section {
 position: relative;
 z-index: 2;
 padding: 50px var(--page-gutter) 45px;
 background: var(--paper);
}
 
.showreel-section .section-heading {
 margin-bottom: 25px;
}
 
.reel-state {
 font-size: 11px;
 letter-spacing: .06em;
}
 
.showreel-stage {
 position: relative;
 overflow: hidden;
 isolation: isolate;
 aspect-ratio: 2.15;
 background: #17221c;
 color: var(--paper);
}
 
.showreel-stage:not(.has-video) {
 aspect-ratio: 3.2;
}
 
.story-motion .showreel-stage {
 clip-path: inset(0 var(--reel-inset, 0%));
}
 
.reel-poster {
 position: absolute;
 inset: 0;
 display: grid;
 grid-template-columns: 1fr 1.5fr 1fr;
 opacity: .33;
 filter: saturate(.45);
}
 
.story-motion .reel-poster {
 transform: scale(var(--reel-scale, 1));
}
 
.reel-poster img {
 width: 100%;
 height: 100%;
 min-width: 0;
 object-fit: cover;
}
 
.showreel-stage::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(
   90deg,
   #0c151d66,
   transparent,
   #0c151d55
 );
 pointer-events: none;
}
 
.reel-copy {
 position: absolute;
 inset: 0;
 z-index: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 4vw;
 text-align: center;
}
 
.showreel-stage:not(.has-video) .reel-copy {
 align-items: flex-start;
 text-align: left;
 padding: 35px 4vw;
}
 
.reel-copy h2 {
 margin: 0;
 font-family: 'Barlow Condensed', sans-serif;
 font-size: clamp(70px, 11vw, 180px);
 font-weight: 600;
 letter-spacing: -.035em;
 line-height: .8;
}
 
.showreel-stage:not(.has-video) .reel-copy h2 {
 font-size: clamp(50px, 6.2vw, 95px);
 line-height: .9;
}
 
.reel-copy em {
 color: var(--paper);
}
 
.reel-copy p {
 margin: 20px 0;
 font-size: 13px;
}
 
.reel-coming {
 padding: 10px 15px;
 border: 1px solid #f7f2e74d;
 border-radius: 25px;
 font-size: 9px;
 letter-spacing: .13em;
}
 
.reel-alternative {
 display: flex;
 justify-content: space-between;
 align-items: center;
 min-height: 60px;
 border-bottom: 1px solid var(--line);
 font-size: 12px;
}
 
.has-video {
 aspect-ratio: 16 / 9;
}
 
.has-video .reel-poster,
.has-video .reel-copy,
.has-video::after {
 display: none;
}
 
.has-video video {
 display: block;
 width: 100%;
 height: 100%;
 aspect-ratio: 16 / 9;
}
 
/* 07 — INTRO */
 
.intro {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 40px 10vw;
 
 padding: 65px 7vw 80px;
 border-top: 0;
}
 
.intro > .eyebrow {
 grid-column: 1 / -1;
}
 
.intro h2 {
 margin: 0;
 font-family: 'Barlow Condensed', sans-serif;
 font-size: clamp(65px, 7vw, 105px);
 line-height: .92;
 letter-spacing: -.025em;
 font-weight: 600;
}
 
.intro p {
 margin: 0 0 35px;
 padding-top: 8px;
 max-width: 480px;
 font-size: 20px;
 line-height: 1.55;
 letter-spacing: -.035em;
}
 
/* 08 — HOME CONTACT */
 
.home-contact {
 padding: 90px 4vw 65px;
 border-top: 1px solid var(--line);
 background: var(--paper);
 color: var(--ink);
}
 
.home-contact > a {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 30px;
 padding: 35px 0 45px;
}
 
.home-contact h2 {
 margin: 0;
 font-family: 'Barlow Condensed', sans-serif;
 font-size: clamp(64px, 9vw, 145px);
 font-weight: 600;
 line-height: .94;
 letter-spacing: -.035em;
}
 
.home-contact h2 em {
 color: var(--muted);
}
 
.contact-arrow {
 font-size: clamp(60px, 10vw, 150px);
 transition: transform var(--motion) var(--ease);
}
 
.home-contact > a:hover .contact-arrow {
 transform: translate(8px, -8px);
}
 
.home-contact > div {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 24px;
 font-size: 12px;
}
 
.home-contact .text-link {
 display: flex;
 align-items: center;
 min-height: 44px;
}
 
/* 09 — DIRECTORS */
 
.director-tabs {
 display: flex;
 align-items: center;
 gap: 35px;
 margin: 10px 0 55px;
 font-size: 15px;
 font-weight: 500;
}
 
.director-tabs a {
 display: flex;
 align-items: center;
 min-height: 44px;
}
 
.director-tabs .selected {
 color: #717760;
 text-decoration: underline;
 text-underline-offset: 7px;
}
 
.director-tabs #projects-tab {
 border-bottom: 1px solid var(--line);
}
 
.director-tabs .division-mark {
 font-family: Georgia, serif;
 font-style: italic;
 font-size: 42px;
 color: var(--accent);
 line-height: 1;
}
 
.division-location {
 margin-left: auto;
 font-size: 12px;
}
 
.roster-stage {
 position: relative;
 min-height: 0;
 isolation: isolate;
}
 
.director-index {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 30px 4vw;
 width: 100%;
 position: relative;
 z-index: 2;
}
 
.director-name {
 position: relative;
 display: block;
 min-width: 0;
 padding-bottom: 15px;
 border-bottom: 1px solid var(--line);
 
 font-size: clamp(22px, 2.2vw, 34px);
 font-weight: 600;
 letter-spacing: -.055em;
 line-height: 1.15;
 
 transition: color var(--motion) var(--ease);
}
 
.director-name-text {
 display: block;
 line-height: 1.15;
 letter-spacing: -.045em;
}
 
.director-name sup {
 font-size: 9px;
 margin-left: 10px;
 vertical-align: top;
 opacity: 0;
}
 
.director-name:hover sup,
.director-name:focus-visible sup {
 opacity: 1;
}
 
.director-index.names-only {
 width: 100%;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 0 7vw;
 min-height: 0;
 padding-bottom: 45px;
}
 
.director-index.names-only .director-name {
 display: flex;
 align-items: flex-start;
 min-height: 85px;
 padding: 22px 0;
 
 font-family: 'Space Grotesk', sans-serif;
 font-size: clamp(26px, 3vw, 44px);
 font-weight: 500;
 letter-spacing: -.05em;
}
 
.names-only .director-name-text {
 font-family: inherit;
 font-size: inherit;
 text-transform: none;
 transition: transform 300ms var(--ease);
}
 
.names-only .director-name:hover .director-name-text,
.names-only .director-name:focus-visible .director-name-text {
 transform: translateX(8px);
}
 
.director-index.names-only.small-roster {
 max-width: 1100px;
 gap: 0 5vw;
}
 
.director-index.compact-roster {
 display: grid;
 width: 100%;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 35px;
 min-height: 0;
}
 
.compact-roster .director-name {
 border: 0;
 padding: 0;
}
 
.compact-roster .director-name-text {
 font-family: 'Barlow Condensed', sans-serif;
 font-size: clamp(29px, 3.5vw, 54px);
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: -.02em;
}
 
.director-count {
 display: block;
 margin-top: 12px;
 color: var(--muted);
 font-size: 11px;
 font-weight: 400;
}
 
.director-arrow {
 position: absolute;
 right: 0;
 bottom: 0;
 font-size: 24px;
}
 
.director-cover {
 margin-bottom: 22px;
 aspect-ratio: 1.6;
 overflow: hidden;
 background: #e3ded1;
}
 
.director-cover img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 600ms var(--ease);
}
 
.director-name:hover .director-cover img {
 transform: scale(1.04);
}
 
.director-index.compact-roster:has(> a:only-child) {
 grid-template-columns: minmax(0, 720px);
}
 
.roster-context,
.directors .roster-context {
 max-width: 600px;
 margin: 30px 0 55px;
 color: var(--muted);
 font-size: 14px;
 line-height: 1.7;
}
 
.roster-preview {
 position: absolute;
 top: 0;
 right: 0;
 width: 46%;
 opacity: 0;
 pointer-events: none;
 transition: opacity .4s, transform .5s;
}
 
.roster-preview.visible {
 opacity: .6;
}
 
.roster-preview img {
 width: 100%;
 aspect-ratio: 1.5;
 object-fit: cover;
}
 
/* 10 — WORKS ARCHIVE */
 
.project-breadcrumb {
 display: flex;
 flex-wrap: wrap;
 gap: 30px;
 margin-bottom: 55px;
 font-size: 13px;
}
 
.archive-heading {
 margin-bottom: 55px;
}
 
.archive-heading h1 {
 margin: 24px 0;
 font-size: clamp(50px, 7.8vw, 115px);
 line-height: 1;
 letter-spacing: -.075em;
 font-weight: 500;
}
 
.archive-heading p {
 color: var(--muted);
 font-size: 16px;
}
 
.archive-tools {
 display: flex;
 align-items: end;
 gap: 28px;
 padding: 25px 0 28px;
 border-top: 1px solid var(--line);
}
 
.search-label {
 display: flex;
 flex-direction: column;
 gap: 10px;
 flex: 1;
 max-width: 380px;
 font-size: 11px;
}
 
.search-label input {
 width: 100%;
 padding: 11px 0;
 border: 0;
 border-bottom: 1px solid var(--ink);
 border-radius: 0;
 background: transparent;
 color: var(--ink);
 font: inherit;
 font-size: 17px;
}
 
.category-filters {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-left: auto;
}
 
.category-filters button,
#clear-filters {
 min-height: 44px;
 padding: 12px 16px;
 border: 1px solid var(--line);
 border-radius: 30px;
 background: none;
 font-size: 10px;
}
 
.category-filters button[aria-pressed="true"] {
 background: var(--ink);
 color: var(--paper);
 border-color: var(--ink);
}
 
#clear-filters {
 padding: 12px 0;
 border: 0;
 text-decoration: underline;
}
 
.section-bar {
 display: flex;
 align-items: center;
 gap: 25px;
 padding-top: 20px;
 margin-bottom: 32px;
 font-size: 12px;
}
 
.section-bar #project-count {
 margin-left: auto;
 color: var(--muted);
 font-size: 12px;
}
 
.index-button {
 min-height: 44px;
 padding: 0 0 4px;
 background: none;
 border-bottom: 1px solid;
 font-size: 10px;
}
 
.grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 55px 25px;
}
 
.film {
 display: block;
 width: 100%;
 padding: 0;
 background: none;
 text-align: left;
}
 
.image {
 position: relative;
 aspect-ratio: 16 / 9;
 overflow: hidden;
 background: #e2dece;
}
 
.image img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: var(--focal-desktop, 50% 50%);
 transition: transform 600ms var(--ease);
}
 
.film:hover .image img {
 transform: scale(1.035);
}
 
.play {
 position: absolute;
 right: 20px;
 bottom: 20px;
 
 display: grid;
 place-items: center;
 width: 45px;
 height: 45px;
 
 border-radius: 50%;
 background: var(--paper);
 font-size: 24px;
 
 opacity: 0;
 transform: translateY(8px);
 transition:
   opacity var(--motion) var(--ease),
   transform var(--motion) var(--ease);
}
 
.film:hover .play,
.film:focus-visible .play {
 opacity: 1;
 transform: none;
}
 
.caption {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 gap: 18px;
 padding-top: 16px;
}
 
.caption-names {
 min-width: 0;
}
 
.caption strong,
.caption-names strong {
 display: block;
 font-size: 18px;
 line-height: 1.35;
 font-weight: 600;
 letter-spacing: -.035em;
}
 
.campaign-name {
 display: block;
 margin-top: 4px;
 color: var(--muted);
 font-size: 13px;
 line-height: 1.5;
}
 
.category {
 padding-top: 5px;
 color: var(--muted);
 font-size: 11px;
 white-space: nowrap;
}
 
.image-unavailable::before {
 content: 'GOOD BOY';
 position: absolute;
 inset: 0;
 display: grid;
 place-items: center;
 color: var(--muted);
 font-size: 24px;
 font-weight: 700;
}
 
.grid.list {
 display: block;
}
 
.list .film {
 padding: 25px 0;
 border-bottom: 1px solid var(--line);
}
 
.list .image {
 display: none;
}
 
.list .caption {
 padding: 0;
}
 
.list .caption strong {
 font-size: 28px;
}
 
.empty-results {
 grid-column: 1 / -1;
 padding: 50px 0;
}
 
.empty-results h2 {
 font-size: 28px;
 font-weight: 500;
}
 
.empty-results p {
 color: var(--muted);
}
 
.empty-results button {
 min-height: 44px;
 padding: 14px 20px;
 background: var(--ink);
 color: var(--paper);
}
 
/* 11 — FOCUSED DIRECTOR */
 
.focused-director .project-breadcrumb {
 margin-bottom: 32px;
}
 
.focused-director .archive-heading {
 margin-bottom: 28px;
}
 
.focused-director .archive-heading h1 {
 font-size: clamp(40px, 5.2vw, 76px);
 margin: 15px 0;
}
 
.focused-director .archive-heading p {
 font-size: 14px;
}
 
.focused-director .grid {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 36px;
}
 
.focused-director .grid.single-film {
 grid-template-columns: 1fr;
 max-width: 1100px;
}
 
.focused-director .single-film .image {
 aspect-ratio: 1.95;
}
 
.focused-director .single-film .caption strong {
 font-size: 26px;
}
 
/* 12 — ABOUT */
 
.about h1,
.contact-title {
 margin: 35px 0 45px;
 font-family: 'Barlow Condensed', sans-serif;
 font-weight: 600;
 line-height: .92;
 letter-spacing: -.025em;
}
 
.about h1 {
 font-size: clamp(80px, 12vw, 175px);
}
 
.about-manifesto {
 max-width: 850px;
 margin: 0 0 85px;
 font-size: clamp(24px, 3.2vw, 45px);
 line-height: 1.25;
 letter-spacing: -.04em;
}
 
.about-columns {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 4vw;
 padding-top: 30px;
 border-top: 1px solid var(--line);
}
 
.about-columns h2 {
 margin: 0 0 25px;
 font-size: 10px;
 line-height: 1.6;
 letter-spacing: .06em;
}
 
.about-columns p {
 margin-top: 0;
 font-size: 16px;
 line-height: 1.85;
 letter-spacing: -.015em;
}
 
.about-statement {
 margin-top: 100px;
 padding: 60px 0 20px;
 border-top: 1px solid var(--line);
}
 
.about-statement p {
 margin: 40px 0;
 font-size: clamp(45px, 7.5vw, 105px);
 line-height: 1.05;
 letter-spacing: -.06em;
}
 
.about-statement .text-link {
 min-height: 44px;
}
 
/* 13 — CONTACT */
 
.contact-title {
 max-width: 1200px;
 font-size: clamp(70px, 9.4vw, 145px);
}
 
.contact-text {
 max-width: 600px;
 margin-bottom: 60px;
 font-size: 20px;
 line-height: 1.5;
}
 
.contact-team {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 3vw;
 margin-bottom: 85px;
}
 
.contact-team article {
 min-width: 0;
 border-top: 1px solid var(--ink);
 padding-top: 22px;
}
 
.contact-team h2 {
 margin: 30px 0 20px;
 font-size: clamp(25px, 2.8vw, 42px);
 line-height: 1.1;
 letter-spacing: -.045em;
 font-weight: 500;
}
 
.contact-team a {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 min-height: 48px;
 padding: 10px 0;
 border-bottom: 1px solid var(--line);
 font-size: clamp(11px, 1.15vw, 17px);
 overflow-wrap: anywhere;
}
 
.contact-team a span {
 font-size: 22px;
}
 
.contact-columns {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 4vw;
 max-width: 760px;
 padding-top: 30px;
 border-top: 1px solid var(--line);
}
 
.contact-columns span {
 display: block;
 margin-bottom: 25px;
 font-size: 10px;
 letter-spacing: .06em;
}
 
.contact-columns p,
.contact-columns a {
 display: block;
 margin: 0;
 font-size: 16px;
 line-height: 1.9;
}
 
.contact-columns a {
 min-height: 44px;
}
 
/* 14 — FILM DETAILS */
 
.film-detail h1 {
 max-width: 1100px;
 margin: 0 0 28px;
 font-size: clamp(38px, 5.4vw, 82px);
 font-weight: 500;
 line-height: 1.05;
 letter-spacing: -.06em;
}
 
.film-detail .project-breadcrumb {
 justify-content: space-between;
 margin-bottom: 32px;
}
 
.film-detail #film-brand {
 margin: 0 0 15px;
 font-size: 15px;
}
 
.cinema-toolbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 20px;
 margin-bottom: 15px;
 font-size: 11px;
 letter-spacing: .08em;
}
 
.cinema-toolbar button {
 min-height: 44px;
 padding: 10px 0;
 background: none;
 font-size: 11px;
}
 
.film-poster {
 position: relative;
 display: block;
 width: 100%;
 padding: 0;
 background: #152219;
 view-transition-name: film-cover;
}
 
.film-poster img {
 display: block;
 width: 100%;
 aspect-ratio: 16 / 9;
 object-fit: contain;
 object-position: var(--focal-desktop, 50% 50%);
 background: #202720;
}
 
.film-poster > span {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 
 padding: 22px 30px;
 border-radius: 60px;
 background: var(--paper);
 box-shadow: 0 3px 30px #0003;
 
 font-size: 12px;
 white-space: nowrap;
}
 
.film-poster:hover > span {
 background: var(--ink);
 color: var(--paper);
}
 
#detail-player iframe,
#detail-player > video {
 display: block;
 width: 100%;
 aspect-ratio: 16 / 9;
 border: 0;
 background: #111;
 object-fit: contain;
}
 
#detail-versions {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 margin-top: 20px;
}
 
#detail-versions button {
 min-height: 44px;
 padding: 10px 15px;
 border: 1px solid var(--line);
 background: transparent;
 font-size: 10px;
}
 
#detail-versions button[aria-pressed="true"] {
 background: var(--ink);
 color: var(--paper);
}
 
.player-assist {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 12px 25px;
 min-height: 44px;
 margin-top: 15px;
 color: var(--muted);
 font-size: 12px;
}
 
.player-assist a {
 margin-left: auto;
 padding: 12px 0;
 text-decoration: underline;
 text-underline-offset: 4px;
}
 
.player-assist button {
 min-height: 44px;
 padding: 12px;
 background: none;
 text-decoration: underline;
}
 
.film-information {
 display: grid;
 grid-template-columns: 1.2fr 1fr;
 gap: 12vw;
 padding: 55px 0 45px;
 border-bottom: 1px solid var(--line);
}
 
.film-information.credits-only {
 grid-template-columns: 1fr;
 padding-top: 30px;
}
 
.credits-only > div {
 width: 100%;
 max-width: 650px;
}
 
#detail-description {
 max-width: 600px;
 margin: 0;
 font-size: 16px;
 line-height: 1.8;
 white-space: pre-line;
}
 
#detail-credits p {
 display: flex;
 justify-content: space-between;
 gap: 20px;
 margin: 22px 0;
 font-size: 14px;
}
 
#detail-credits span {
 color: var(--muted);
}
 
#detail-credits p > span:last-child {
 color: var(--ink);
 text-align: right;
}
 
#detail-source {
 display: inline-block;
 margin-top: 25px;
 font-size: 11px;
 text-decoration: underline;
 text-underline-offset: 5px;
}
 
.project-cta {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 30px;
 padding: 40px 0 60px;
 font-size: clamp(25px, 3.1vw, 48px);
 font-weight: 500;
 letter-spacing: -.05em;
}
 
.project-cta span {
 font-size: 1.3em;
}
 
.related-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 30px;
}
 
/* 15 — CINEMA MODE */
 
.cinema-mode {
 background: #101612;
 color: var(--paper);
}
 
.cinema-mode header {
 background: #101612;
 color: var(--paper);
}
 
.cinema-mode .film-detail {
 --ink: #f7f2e7;
 --muted: #a4ac9e;
 --line: #f7f2e733;
}
 
.cinema-mode .film-poster > span {
 color: #28352e;
}
 
.cinema-mode .film-poster:hover > span {
 background: #28352e;
 color: var(--paper);
}
 
.cinema-mode .footer {
 border-color: #f7f2e733;
}
 
/* 16 — FOOTER */
 
.footer {
 display: flex;
 justify-content: space-between;
 gap: 20px;
 padding: 30px var(--page-gutter);
 border-top: 1px solid var(--line);
 font-size: 10px;
}
 
.footer a {
 padding: 10px 0;
}
 
/* 17 — MISC */
 
.load-error {
 padding: 150px 30px 30px;
}
 
.load-error button {
 padding: 15px;
}
 
dialog {
 max-width: 90vw;
}
 
dialog:not([open]) {
 display: none;
}
 
.reel-heading {
 display: flex;
 justify-content: space-between;
 margin-bottom: 20px;
 font-size: 10px;
}
 
.reel-strip {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 18px;
}
 
.reel-strip .caption {
 display: none;
}
 
.reel-strip .play {
 width: 32px;
 height: 32px;
 right: 12px;
 bottom: 12px;
 font-size: 18px;
}
 
/* 18 — LAPTOP / TABLET */
 
@media (max-width: 1100px) {
 
 :root {
   --header-height: 88px;
 }
 
 header {
   gap: 18px;
 }
 
 header .logo {
   font-size: 30px;
 }
 
 nav {
   gap: 12px;
 }
 
 nav a {
   font-size: 10px;
 }
 
 .hero-wordmark {
   top: 155px;
   font-size: 15.8vw;
 }
 
 .hero-scene .art {
   top: 29%;
   right: 21%;
   bottom: 14%;
   left: 11%;
 }
 
 .hero-reel-link {
   top: auto;
   right: 4vw;
   bottom: 112px;
   width: 190px;
 }
 
 .hero-reel-link strong {
   font-size: 27px;
 }
 
 .grid {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .director-index.compact-roster {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .archive-tools {
   flex-wrap: wrap;
 }
 
 .category-filters {
   margin-left: 0;
 }
 
 .contact-team {
   gap: 20px;
 }
 
 .contact-team h2 {
   font-size: 28px;
 }
 
 .contact-team a {
   font-size: 12px;
 }
}
 
/* 19 — NARROW LAPTOP */
 
@media (min-width: 641px) and (max-width: 850px) {
 
 :root {
   --header-height: 78px;
 }
 
 header {
   gap: 12px;
 }
 
 header .logo {
   font-size: 24px;
   letter-spacing: -1.5px;
 }
 
 nav {
   gap: 7px;
 }
 
 nav a {
   font-size: 8px;
 }
 
 .language-switch {
   width: 36px;
   height: 36px;
   flex-basis: 36px;
 }
 
 .hero-wordmark {
   top: 135px;
   font-size: 15vw;
 }
 
 .hero-scene .art {
   top: 33%;
   right: 20%;
   bottom: 18%;
   left: 8%;
 }
 
 .hero-reel-link {
   right: 4vw;
   bottom: 115px;
   width: 165px;
 }
 
 .hero-reel-link strong {
   font-size: 23px;
 }
 
 .about-columns {
   gap: 22px;
 }
 
 .about-columns p {
   font-size: 14px;
 }
 
 .contact-team {
   grid-template-columns: 1fr;
 }
}
 
/* 20 — MOBILE */
 
@media (max-width: 640px) {
 
 :root {
   --header-height: 76px;
   --page-gutter: 20px;
 }
 
 html {
   scroll-padding-top: 85px;
 }
 
 header {
   height: var(--header-height);
   padding: 0 20px;
   gap: 14px;
 }
 
 header .logo,
 .home-mode header:not(.scrolled) .logo {
   display: block;
   visibility: visible;
   font-size: 28px;
   letter-spacing: -2px;
 }
 
 .mobile-menu {
   display: block;
   margin-left: auto;
   padding: 12px 0;
   min-height: 44px;
   background: none;
   font-size: 12px;
   font-weight: 600;
 }
 
 .current-page {
   display: none;
 }
 
 .language-switch {
   width: 38px;
   height: 38px;
   flex-basis: 38px;
   font-size: 10px;
 }
 
 nav {
   position: fixed;
   inset: var(--header-height) 0 0;
   z-index: 29;
 
   display: none;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   gap: 28px;
 
   padding: 40px 22px 70px;
   background: var(--paper);
   overflow-y: auto;
 }
 
 nav.open {
   display: flex;
 }
 
 nav a {
   min-height: 44px;
   font-size: 27px;
   font-weight: 500;
   letter-spacing: -.055em;
 }
 
 .menu-open header {
   background: var(--paper) !important;
 }
 
 .page {
   min-height: 0;
   padding: 125px 20px 65px;
 }
 
 .page.landing {
   padding: 0;
 }
 
 /* Mobile hero */
 
 .hero-scene,
 .story-motion .hero-scene {
   height: 100svh;
   min-height: 680px;
   perspective: none;
 }
 
 .hero-wordmark {
   top: 125px;
   left: 20px;
   right: 20px;
   font-size: 16.5vw;
   line-height: .9;
   letter-spacing: -.075em;
 }
 
 .hero-scene .art {
   top: 31%;
   left: -3%;
   right: -3%;
   bottom: 34%;
   transform: none;
 }
 
 .chrome-dog {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }
 
 /* Smaller movement on touch devices. */
 .story-motion .chrome-dog {
   transform:
     translateY(calc(var(--scroll-lift, 0px) * .4))
     scale(calc(2 - var(--scroll-scale, 1)))
     rotateY(calc(var(--scroll-tilt, 0deg) * 1.2));
 }
 
 .hero-halo {
   inset: 24% 0 28%;
 }
 
 .hero-reel-link {
   top: auto;
   bottom: 146px;
   left: 20px;
   right: 20px;
   width: auto;
 
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 8px 16px;
 
   padding: 14px 0 0;
 }
 
 .hero-reel-link > span {
   grid-column: 1;
   font-size: 9px;
 }
 
 .hero-reel-link strong {
   grid-column: 1;
   grid-row: 2;
   justify-content: flex-start;
   gap: 18px;
   font-size: 28px;
 }
 
 .hero-reel-link small {
   grid-column: 2;
   grid-row: 2;
   align-self: end;
   padding-bottom: 4px;
   font-size: 8px;
 }
 
 .home-footer {
   left: 20px;
   right: 20px;
   bottom: 22px;
 
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 16px;
   font-size: 10px;
 }
 
 .home-footer > div {
   gap: 12px;
   font-size: 10px;
 }
 
 .home-footer > a:nth-child(2) {
   text-align: right;
 }
 
 .home-footer > a:last-child {
   display: none;
 }
 
 .home-footer > .hero-discover {
   grid-column: 1 / -1;
   grid-row: 1;
   justify-content: space-between;
   gap: 12px;
 
   padding-bottom: 14px;
   border-bottom: 1px solid var(--line);
   font-size: 10px;
 }
 
 .home-footer > .hero-discover span {
   width: 32px;
   height: 32px;
   font-size: 18px;
 }
 
 /* Mobile selected work */
 
 .journal {
   padding: 45px 20px;
 }
 
 .journal .section-heading {
   gap: 15px;
   padding-bottom: 20px;
   margin-bottom: 30px;
 }
 
 .journal .section-heading h2 {
   font-size: 23px;
 }
 
 .journal .section-heading .eyebrow {
   max-width: 105px;
   font-size: 10px;
   text-align: right;
 }
 
 .journal-grid {
   display: block;
 }
 
 .journal article:nth-child(n) {
   width: 100%;
   padding: 0;
   margin-bottom: 50px;
 }
 
 .journal article .image,
 .journal article:first-child .image,
 .journal article:last-child .image {
   aspect-ratio: 1.6;
 }
 
 .journal .caption {
   padding-top: 15px;
 }
 
 .journal .caption strong {
   font-size: 25px;
 }
 
 .journal .campaign-name {
   font-size: 13px;
 }
 
 .journal .category {
   font-size: 10px;
 }
 
 .journal .film .play {
   width: 42px;
   height: 42px;
 }
 
 .selection-number {
   margin-bottom: 10px;
   font-size: 8px;
 }
 
 .see-more {
   margin-top: 50px;
   padding: 30px 0;
   font-size: clamp(38px, 10vw, 50px);
 }
 
 /* Mobile showreel */
 
 .showreel-section {
   padding: 40px 20px 25px;
 }
 
 .showreel-section .section-heading {
   margin-bottom: 20px;
 }
 
 .reel-state {
   font-size: 9px;
 }
 
 .showreel-stage,
 .showreel-stage:not(.has-video) {
   aspect-ratio: 1.45;
 }
 
 .reel-poster {
   grid-template-columns: 1fr 1fr;
 }
 
 .reel-poster img:last-child {
   display: none;
 }
 
 .showreel-stage:not(.has-video) .reel-copy {
   padding: 22px;
 }
 
 .reel-copy h2,
 .showreel-stage:not(.has-video) .reel-copy h2 {
   font-size: 56px;
 }
 
 .reel-copy p {
   font-size: 11px;
 }
 
 .reel-alternative {
   font-size: 10px;
 }
 
 .has-video {
   aspect-ratio: 16 / 9;
 }
 
 /* Mobile intro */
 
 .intro {
   grid-template-columns: 1fr;
   gap: 30px;
   padding: 65px 22px;
 }
 
 .intro h2 {
   font-size: clamp(55px, 14vw, 77px);
 }
 
 .intro p {
   font-size: 18px;
   line-height: 1.6;
 }
 
 /* Mobile home contact */
 
 .home-contact {
   padding: 55px 22px 30px;
 }
 
 .home-contact > a {
   gap: 10px;
   padding: 28px 0 35px;
 }
 
 .home-contact h2 {
   font-size: clamp(46px, 12vw, 56px);
 }
 
 .contact-arrow {
   font-size: 50px;
 }
 
 .home-contact > div {
   align-items: flex-start;
   flex-direction: column;
   gap: 8px;
 }
 
 /* Mobile directors */
 
 .director-tabs {
   gap: 20px;
   margin: 18px 0 38px;
   font-size: 13px;
 }
 
 .division-location {
   display: none;
 }
 
 .director-index.names-only {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0 22px;
   padding-bottom: 20px;
 }
 
 .director-index.names-only .director-name {
   min-height: 90px;
   padding: 20px 0;
   font-size: 22px;
   overflow-wrap: anywhere;
 }
 
 .director-index.compact-roster {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 30px 18px;
 }
 
 .compact-roster .director-name-text {
   font-size: 29px;
 }
 
 .director-cover {
   aspect-ratio: 1.25;
   margin-bottom: 16px;
 }
 
 .director-arrow,
 .roster-preview {
   display: none;
 }
 
 .directors .roster-context {
   margin: 35px 0 45px;
   font-size: 13px;
 }
 
 /* Mobile works */
 
 .project-breadcrumb {
   gap: 22px;
   margin-bottom: 40px;
   font-size: 11px;
 }
 
 .archive-heading {
   margin-bottom: 32px;
 }
 
 .archive-heading h1 {
   font-size: 44px;
   line-height: 1.08;
   letter-spacing: -.055em;
   overflow-wrap: anywhere;
 }
 
 .archive-heading p {
   font-size: 12px;
   line-height: 1.6;
 }
 
 .archive-tools {
   gap: 18px;
   padding: 20px 0;
 }
 
 .search-label {
   max-width: none;
   flex-basis: 100%;
   font-size: 12px;
 }
 
 .search-label input {
   font-size: 16px;
 }
 
 .category-filters {
   gap: 6px;
 }
 
 .category-filters button {
   padding: 10px 12px;
   font-size: 9px;
 }
 
 .section-bar {
   gap: 12px;
   margin-bottom: 25px;
   font-size: 10px;
 }
 
 .section-bar #project-count {
   font-size: 11px;
 }
 
 .grid,
 .focused-director .grid {
   grid-template-columns: 1fr;
   gap: 35px;
 }
 
 .caption-names strong {
   font-size: 18px;
 }
 
 .campaign-name {
   font-size: 13px;
 }
 
 .category {
   font-size: 10px;
 }
 
 .film .image img {
   object-position: var(--focal-mobile, 50% 50%);
 }
 
 .play {
   opacity: 1;
   transform: none;
   right: 12px;
   bottom: 12px;
   width: 36px;
   height: 36px;
   font-size: 21px;
 }
 
 .list .caption strong {
   font-size: 24px;
 }
 
 .focused-director .archive-heading h1 {
   font-size: 38px;
 }
 
 .focused-director .single-film .image {
   aspect-ratio: 16 / 9;
 }
 
 /* Mobile about */
 
 .about h1 {
   font-size: clamp(60px, 15vw, 80px);
   margin: 15px 0 32px;
 }
 
 .about-manifesto {
   margin-bottom: 45px;
   font-size: 25px;
 }
 
 .about-columns {
   display: block;
 }
 
 .about-columns > div {
   margin-bottom: 38px;
 }
 
 .about-columns p {
   font-size: 16px;
 }
 
 .about-statement {
   margin-top: 50px;
   padding-top: 35px;
 }
 
 .about-statement p {
   margin: 25px 0;
   font-size: 46px;
 }
 
 /* Mobile contact */
 
 .contact-title {
   margin: 15px 0 40px;
   font-size: clamp(48px, 11vw, 62px);
 }
 
 .contact-text {
   margin-bottom: 40px;
   font-size: 17px;
 }
 
 .contact-team {
   grid-template-columns: 1fr;
   gap: 35px;
   margin-bottom: 55px;
 }
 
 .contact-team article {
   padding-top: 18px;
 }
 
 .contact-team h2 {
   margin: 18px 0 10px;
   font-size: 34px;
 }
 
 .contact-team a {
   font-size: 14px;
 }
 
 .contact-columns {
   display: block;
 }
 
 .contact-columns > div {
   margin-bottom: 40px;
 }
 
 .contact-columns p,
 .contact-columns a {
   font-size: 15px;
 }
 
 /* Mobile film detail */
 
 .film-detail h1 {
   margin-bottom: 30px;
   font-size: 36px;
   line-height: 1.12;
 }
 
 .film-detail #film-brand {
   font-size: 13px;
 }
 
 .film-poster img {
   object-position: var(--focal-mobile, 50% 50%);
 }
 
 .film-poster > span {
   padding: 16px 20px;
   font-size: 10px;
 }
 
 .film-information {
   grid-template-columns: 1fr;
   gap: 25px;
   padding: 35px 0 45px;
 }
 
 #detail-description {
   font-size: 15px;
 }
 
 .cinema-toolbar {
   gap: 10px;
   font-size: 9px;
 }
 
 .cinema-toolbar button {
   font-size: 10px;
 }
 
 .player-assist {
   gap: 8px 15px;
   font-size: 11px;
 }
 
 .player-assist a {
   margin-left: 0;
 }
 
 .project-cta {
   padding: 30px 0 45px;
   font-size: 27px;
   line-height: 1.2;
 }
 
 .related-grid {
   grid-template-columns: 1fr;
   gap: 35px;
 }
 
 .footer {
   align-items: center;
   flex-wrap: wrap;
   gap: 15px;
   padding: 25px 20px;
   font-size: 10px;
 }
}
 
/* 21 — SMALL MOBILE */
 
@media (max-width: 375px) {
 
 header .logo,
 .home-mode header:not(.scrolled) .logo {
   font-size: 25px;
 }
 
 .hero-wordmark {
   top: 115px;
   font-size: 16vw;
 }
 
 .hero-scene .art {
   top: 28%;
   left: -10%;
   right: -10%;
   bottom: 35%;
 }
 
 .hero-reel-link {
   bottom: 148px;
 }
 
 .hero-reel-link strong {
   font-size: 24px;
 }
 
 .hero-reel-link small {
   font-size: 7px;
 }
 
 .director-tabs {
   gap: 15px;
   font-size: 11px;
 }
 
 .director-index.names-only {
   gap: 0 15px;
 }
 
 .director-index.names-only .director-name {
   font-size: 19px;
 }
 
 .category-filters button {
   padding: 10px;
   font-size: 8px;
 }
}
 
/* 22 — SHORT VIEWPORTS */
 
@media (max-height: 740px) and (min-width: 641px) {
 
 .hero-scene,
 .story-motion .hero-scene {
   height: 100svh;
   min-height: 620px;
 }
 
 .hero-wordmark {
   top: calc(var(--header-height) + 25px);
 }
 
 .hero-scene .art {
   top: 30%;
   bottom: 22%;
 }
 
 .hero-reel-link {
   top: auto;
   bottom: 95px;
 }
 
 .home-footer {
   bottom: 20px;
 }
}
 
/* 23 — REDUCED MOTION */
 
@media (prefers-reduced-motion: reduce) {
 
 html {
   scroll-behavior: auto;
 }
 
 *,
 *::before,
 *::after {
   animation: none !important;
   transition: none !important;
 }
 
 .hero-scene .art {
   transform: none !important;
 }
 
 .hero-halo {
   display: none;
 }
 
 .chrome-dog,
 .hero-wordmark,
 #featured article,
 .reel-poster {
   transform: none !important;
   opacity: 1 !important;
 }
 
 .showreel-stage {
   clip-path: none !important;
 }
}
 
/* 24 — ANIMATIONS */
 
@keyframes sculpture {
 from {
   transform: translateY(0) rotate(-1deg);
 }
 
 to {
   transform: translateY(-12px) rotate(1deg);
 }
}
 
@keyframes enter {
 from {
   opacity: 0;
   transform: translateY(8px);
 }
 
 to {
   opacity: 1;
   transform: none;
 }
}
 
@media (prefers-reduced-motion: no-preference) {
 ::view-transition-group(film-cover) {
   animation-duration: 450ms;
   animation-timing-function: var(--ease);
 }
}
 
/* =====================================================
  GOOD BOY — END OF STYLE.CSS
  CLEAN RESPONSIVE V4.2
  ===================================================== */
 
/* =====================================================
  25 — ABOUT / AGENCIES & BRANDS — V4.2
  Uses existing #about-partners structure from site.html.
  Content remains hidden until app.js has published logos.
  ===================================================== */
 
#about-partners {
 margin: clamp(90px, 12vw, 180px) 0 0;
 padding: clamp(55px, 7vw, 110px) 0 0;
 border-top: 1px solid var(--line);
}
 
#about-partners [hidden] { display: none !important; }
 
.partners-intro { margin-bottom: clamp(70px, 10vw, 135px); }
.partners-intro h2 {
 margin: 25px 0;
 max-width: 1050px;
 font-family: 'Barlow Condensed', 'Space Grotesk', sans-serif;
 font-size: clamp(65px, 9vw, 142px);
 font-weight: 600;
 line-height: .92;
 letter-spacing: -.035em;
}
.partners-intro h2 em { color: #929780; }
.partners-intro > p {
 max-width: 580px;
 font-size: clamp(16px, 1.7vw, 22px);
 line-height: 1.6;
}
.partners-section { margin-bottom: clamp(85px, 11vw, 170px); }
.partners-section-heading {
 display: flex;
 justify-content: space-between;
 align-items: end;
 gap: 28px;
 padding-bottom: 24px;
 margin-bottom: 36px;
 border-bottom: 1px solid var(--line);
}
.partners-section-heading h3 {
 margin: 13px 0 0;
 font-family: 'Barlow Condensed', 'Space Grotesk', sans-serif;
 font-size: clamp(46px, 6vw, 96px);
 line-height: .95;
 letter-spacing: -.025em;
 font-weight: 600;
}
.partners-section-heading > p {
 max-width: 330px;
 margin: 0;
 color: var(--muted);
 font-size: 14px;
 line-height: 1.65;
}
.partners-logo-grid {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: clamp(9px, 1.2vw, 18px);
 align-items: stretch;
}
.partner-logo {
 --partner-bg: #fffdf8;
 display: flex;
 justify-content: center;
 align-items: center;
 min-width: 0;
 min-height: 135px;
 padding: clamp(15px, 2.1vw, 30px);
 margin: 0;
 border: 1px solid var(--line);
 background: var(--partner-bg);
 overflow: hidden;
 transition: background-color 240ms ease, border-color 240ms ease;
}
.partner-logo a {
 display: flex;
 width: 100%;
 height: 100%;
 justify-content: center;
 align-items: center;
}
.partner-logo img {
 display: block;
 width: 100%;
 max-width: 170px;
 max-height: 72px;
 height: auto;
 object-fit: contain;
 filter: grayscale(1);
 opacity: .83;
 transition: opacity 220ms ease;
}
.partner-logo:hover,
.partner-logo:focus-within { border-color: var(--ink); }
.partner-logo:hover img,
.partner-logo:focus-within img { opacity: 1; }
/* CMS-backed per-logo options: app.js may set these as custom properties. */
.partner-logo[data-logo-style="color"] img,
.partner-logo[data-mode="color"] img { filter: none; }
.partner-logo[data-logo-bg="dark"] { --partner-bg: #17231c; }
.partner-logo[data-logo-bg="transparent"] { --partner-bg: transparent; }
.brand-sector-controls {
 display: flex;
 flex-wrap: wrap;
 gap: 9px;
 margin-bottom: 32px;
}
.brand-sector-button {
 min-height: 44px;
 padding: 12px 17px;
 border: 1px solid var(--line);
 border-radius: 100px;
 background: transparent;
 color: var(--ink);
 font-family: inherit;
 font-size: 11px;
 font-weight: 600;
 letter-spacing: .025em;
 cursor: pointer;
}
.brand-sector-button:hover { border-color: var(--ink); }
.brand-sector-button.active,
.brand-sector-button[aria-pressed="true"] {
 color: var(--paper);
 background: var(--ink);
 border-color: var(--ink);
}
.brand-sector-heading {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 gap: 15px;
 margin-bottom: 25px;
}
.brand-sector-heading h4 { margin: 0; font-size: 22px; font-weight: 500; }
.brand-sector-heading span { color: var(--muted); font-size: 12px; }
.brand-results { margin: 24px 0 0; color: var(--muted); font-size: 12px; }
.partners-footer { padding-top: 35px; border-top: 1px solid var(--line); }
.partners-footer p {
 margin: 30px 0;
 font-family: 'Barlow Condensed', 'Space Grotesk', sans-serif;
 font-size: clamp(46px, 6vw, 100px);
 line-height: 1;
}
@media (max-width: 1050px) {
 .partners-logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
 .partners-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .partners-section-heading { align-items: start; flex-direction: column; }
 .partner-logo { min-height: 115px; }
}
@media (max-width: 640px) {
 #about-partners { margin-top: 85px; padding-top: 45px; }
 .partners-intro { margin-bottom: 70px; }
 .partners-intro h2 { font-size: clamp(49px, 12vw, 77px); }
 .partners-section { margin-bottom: 75px; }
 .partners-section-heading h3 { font-size: 54px; }
 .partners-section-heading > p { font-size: 13px; }
 .partners-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
 .partner-logo { min-height: 103px; padding: 15px; }
 .partner-logo img { max-height: 55px; }
 .brand-sector-controls { gap: 7px; }
 .brand-sector-button { padding: 11px 13px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
 .partner-logo, .partner-logo img { transition: none; }
}
 
 
/* ============================================================
 26 — GOOD BOY V4.6: FINAL HERO / NAV / COMPACT ARCHIVES
 Complete-file revision; override layer for legacy responsive
 rules above. Keep all other website and CMS styles intact.
============================================================ */
 
/* Preserve the small header logo but remove oversized duplicate. */
.hero-scene .hero-wordmark,
.story-motion .hero-scene .hero-wordmark { display: none !important; }
 
/* The sculpture occupies the visual stage without the title. */
.hero-scene .art,
.story-motion .hero-scene .art {
 top: calc(var(--header-height) + 12px);
 left: 3%;
 right: 11%;
 bottom: 6%;
 z-index: 1;
 overflow: visible;
 transform: none;
 perspective: 1100px;
}
.hero-scene .chrome-dog {
 display: block;
 width: 100%;
 height: 100%;
 max-width: none;
 object-fit: contain;
 object-position: center;
 transform-origin: 50% 55%;
 mix-blend-mode: multiply;
 backface-visibility: hidden;
 -webkit-mask-image: radial-gradient(ellipse 75% 77% at 50% 51%, #000 42%, #000 60%, transparent 100%);
 mask-image: radial-gradient(ellipse 75% 77% at 50% 51%, #000 42%, #000 60%, transparent 100%);
}
/* app.js supplies --scroll-scale ~= 1 -> .95 and scroll-tilt.
  A flat JPEG cannot expose another side of the dog's head;
  this creates a subtle perspective on the whole image only. */
.story-motion .hero-scene .chrome-dog {
 animation: none;
 transform:
   scale(calc(3.8 - 2.8 * var(--scroll-scale, 1)))
   rotateY(calc(var(--scroll-tilt, 0deg) * 4));
 opacity: var(--dog-opacity, 1);
 will-change: transform;
}
.hero-reel-link {
 top: auto;
 bottom: 19%;
 right: 4vw;
 z-index: 6;
}
 
/* Make desktop nav approximately 30% stronger than 14px base. */
@media (min-width: 1101px) {
 header { gap: clamp(14px, 2vw, 35px); }
 header nav {
   gap: clamp(17px, 2vw, 35px);
   padding-left: clamp(10px, 2vw, 36px);
   justify-content: flex-end;
 }
 header nav a {
   font-size: 18px;
   font-weight: 800;
   letter-spacing: -.035em;
 }
}
@media (min-width: 851px) and (max-width: 1100px) {
 header nav { gap: clamp(8px, 1.2vw, 18px); padding-left: 6px; }
 header nav a { font-size: 12px; font-weight: 800; }
}
 
/* Archive category pages: remove large introduction but keep
  search, category filters, project count, list/grid and all films. */
#portfolio:not(.focused-director) > .project-breadcrumb,
#portfolio:not(.focused-director) > .archive-heading {
 display: none !important;
}
#portfolio:not(.focused-director) {
 padding-top: calc(var(--header-height) + 20px);
}
#portfolio:not(.focused-director) .archive-tools {
 margin-top: 0;
 padding-top: 18px;
}
#portfolio:not(.focused-director) .section-bar {
 margin-bottom: 22px;
}
 
@media (min-width: 641px) and (max-width: 1100px) {
 .hero-scene .art, .story-motion .hero-scene .art {
   top: calc(var(--header-height) + 35px);
   left: 1%;
   right: 9%;
   bottom: 11%;
 }
 .hero-reel-link { bottom: 12%; }
}
@media (max-width: 640px) {
 .hero-scene .art, .story-motion .hero-scene .art {
   top: calc(var(--header-height) + 66px);
   left: -10%;
   right: -10%;
   bottom: 28%;
   perspective: none;
   transform: none;
 }
 .story-motion .hero-scene .chrome-dog {
   transform: scale(calc(3.2 - 2.2 * var(--scroll-scale, 1)));
 }
 .hero-reel-link { bottom: 146px; }
 #portfolio:not(.focused-director) {
   padding-top: calc(var(--header-height) + 14px);
 }
}
@media (prefers-reduced-motion: reduce) {
 .story-motion .hero-scene .chrome-dog {
   transform: none !important;
   animation: none !important;
   opacity: 1 !important;
   will-change: auto;
 }
}
/* END V4.6 */
 
/* =====================================================
  GOOD BOY / V4.7 — CONTACT: THREE-COLUMN EDITORIAL GRID
  Address | Architectural Illustration | Follow Us
  The existing site styles remain unchanged.
  ===================================================== */
#contact .contact-columns {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 align-items: start;
 max-width: none;
 width: 100%;
 gap: clamp(22px, 3vw, 54px);
 margin-top: 18px;
 padding-top: 28px;
 border-top: 1px solid var(--line);
}
#contact .contact-columns > div,
#contact .contact-columns > figure {
 min-width: 0;
}
#contact .contact-columns > div > span {
 display: block;
 margin-bottom: 22px;
}
#contact .contact-columns .contact-building {
 margin: 0;
 padding: 0;
 width: 100%;
 align-self: start;
}
#contact .contact-building img {
 display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 4 / 3;
 object-fit: contain;
 mix-blend-mode: multiply;
}
#contact .contact-columns .contact-socials a {
 display: block;
 width: fit-content;
 margin-bottom: 4px;
}
@media (min-width: 641px) and (max-width: 950px) {
 #contact .contact-columns {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 20px;
 }
 #contact .contact-columns p,
 #contact .contact-columns a {
   font-size: 13px;
   overflow-wrap: anywhere;
 }
}
@media (max-width: 640px) {
 #contact .contact-columns {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 32px;
   margin-top: 12px;
 }
 #contact .contact-columns > div,
 #contact .contact-columns > figure {
   margin: 0;
 }
 #contact .contact-building {
   max-width: 520px;
 }
}
/* GOOD BOY — CONTACT ILLUSTRATION ALIGNMENT */
 
#contact .contact-building img {
 transform: translateX(-18px) scale(1.05);
 transform-origin: center center;
}
 
@media (max-width: 640px) {
 #contact .contact-building img {
   transform: none;
 }
}
/* CONTACT ALT BLOK DENGE AYARI */
 
#contact .contact-meta {
 padding-left: 26px;
}
 
#contact .contact-building {
 display: flex;
 justify-content: center;
 align-items: center;
}
 
#contact .contact-building img {
 transform: translateX(-28px) scale(1.04);
 transform-origin: center center;
 display: block;
}
 
#contact .contact-social {
 padding-left: 0;
}
 
@media (max-width: 1024px) {
 #contact .contact-meta,
 #contact .contact-social {
   padding-left: 0;
 }
 
 #contact .contact-building img {
   transform: translateX(-12px) scale(1.02);
 }
}
 
@media (max-width: 640px) {
 #contact .contact-building img {
   transform: none;
 }
}
 
 
/* ==============================================================
  GOOD BOY V4.10 — RY + EPA ASSOCIATION MEMBERSHIPS
  Favicon images are previews from the official domains, not
  a verified replacement for full official vector logos.
  ============================================================== */
.gb-memberships-about{margin-top:80px;padding:48px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gb-membership-intro{max-width:780px;margin-bottom:38px}
.gb-membership-intro h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,5vw,72px);line-height:1;letter-spacing:-.035em;font-weight:600;margin:12px 0 18px}
.gb-membership-intro p{font-size:15px;color:var(--muted);line-height:1.65;margin:0}
.gb-membership-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3vw,42px)}
.gb-member-logo{display:flex;align-items:center;gap:18px;min-height:126px;padding:26px 22px;border:1px solid var(--line);transition:background .25s,color .25s}
.gb-member-logo:hover{background:var(--ink);color:var(--paper)}
.gb-member-logo>img{width:56px;height:56px;object-fit:contain;flex:0 0 auto}
.gb-member-logo>span:nth-child(2){display:flex;flex-direction:column;gap:8px;min-width:0}
.gb-member-logo strong{font-weight:800;font-size:clamp(30px,3vw,48px);letter-spacing:-.05em;line-height:1}
.gb-member-logo small{font-size:10px;line-height:1.5;letter-spacing:.075em}
.gb-member-arrow{margin-left:auto;align-self:flex-start;font-size:22px}
.footer .gb-memberships-footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;margin-left:auto;margin-right:auto}
.gb-memberships-footer-title{font-size:9px;letter-spacing:.1em;color:var(--muted)}
.footer .gb-memberships-footer a{display:inline-flex;align-items:center;gap:7px;padding:4px 8px;font-size:12px;font-weight:700;letter-spacing:.025em;white-space:nowrap}
.gb-memberships-footer img{width:22px;height:22px;object-fit:contain}
.gb-home-memberships{position:absolute;bottom:85px;left:var(--page-gutter);z-index:6;display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.07em}
.gb-home-memberships a{border-bottom:1px solid var(--line);padding-bottom:4px}
@media(max-width:850px){.gb-membership-list{grid-template-columns:1fr}.footer .gb-memberships-footer{order:3;width:100%;justify-content:flex-start}.gb-memberships-about{margin-top:55px}}
@media(max-width:640px){.gb-member-logo{min-height:100px;padding:16px;gap:14px}.gb-member-logo>img{width:42px;height:42px}.gb-home-memberships{bottom:95px;font-size:9px}.gb-memberships-about{padding:32px 0}}
 
/* Preserve latest transparent-background Doberman image display. */
.hero-scene .chrome-dog{-webkit-mask-image:none!important;mask-image:none!important;mix-blend-mode:normal;background:transparent;filter:none;object-fit:contain}
.hero-scene .art::after{content:none!important;display:none!important}
 
/* GOOD BOY V4.11 — EDITORIAL MEMBERSHIP FOOTER */
.footer { display: block; padding: 0 var(--page-gutter); }
.gb-membership-strip { padding: 34px 0 25px; border-bottom: 1px solid var(--line); }
.gb-membership-strip-head { display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.gb-membership-strip-logos { display: flex; justify-content: center; align-items: center; gap: clamp(30px, 6vw, 100px); padding: 26px 0 12px; }
.gb-membership-strip-logos a { display: flex; align-items: center; gap: 13px; min-width: 0; }
.gb-membership-strip-logos img { display: block; width: 34px; height: 34px; object-fit: contain; }
.gb-membership-strip-logos a > span { display: flex; flex-direction: column; gap: 2px; }
.gb-membership-strip-logos strong { font-size: 26px; line-height: 1; letter-spacing: -.05em; }
.gb-membership-strip-logos small { font-size: 9px; color: var(--muted); letter-spacing: .03em; }
.gb-footer-bottom { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; }
@media (max-width: 640px) {
.gb-membership-strip-head { font-size: 8px; }
.gb-membership-strip-logos { gap: 20px; flex-direction: column; }
.gb-footer-bottom { flex-wrap: wrap; min-height: 90px; }
}
 
/* GOOD BOY V6 — COMPACT COLLABORATOR WALL */
#about-partners .partners-logo-grid {
 grid-template-columns: repeat(7, minmax(0, 1fr));
 gap: 8px;
}
#about-partners .partner-logo {
 min-height: 84px;
 height: 84px;
 padding: 10px 12px;
 background: transparent;
 border: 1px solid rgba(40,53,46,.14);
}
#about-partners .partner-logo img {
 width: auto;
 height: auto;
 max-width: 100%;
 max-height: 47px;
 object-fit: contain;
 filter: grayscale(1);
}
#about-partners .gb-partner-wordmark {
 display: block;
 max-width: 100%;
 color: var(--ink);
 font-size: clamp(10px,1vw,15px);
 line-height: 1.15;
 letter-spacing: -.02em;
 text-align: center;
 font-weight: 700;
 overflow-wrap: anywhere;
}
#about-partners .partners-section {margin-bottom: 72px;}
@media(max-width:1100px){#about-partners .partners-logo-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}
@media(max-width:640px){
 #about-partners .partners-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
 #about-partners .partner-logo{height:70px;min-height:70px;padding:7px;}
 #about-partners .partner-logo img{max-height:37px;}
 #about-partners .gb-partner-wordmark{font-size:11px;}
}
 
/* ===================================================
  GOOD BOY — CINEMATIC CURSOR LIGHT V1
  Desktop only / non-interactive overlay
=================================================== */
 
@media (hover: hover) and (pointer: fine) {
 body.gb-cinematic-light::after {
   content: "";
   position: fixed;
   inset: 0;
   z-index: 40;
   pointer-events: none;
   background: radial-gradient(
     340px circle at var(--gb-x, 50%) var(--gb-y, 50%),
     rgba(225, 196, 133, 0.085),
     transparent 75%
   );
 }
}
 
@media (prefers-reduced-motion: reduce) {
 body.gb-cinematic-light::after {
   display: none;
 }
}
 
/* GOOD BOY Motion Covers — preserve existing poster until video plays */
a.film .image { position: relative; overflow: hidden; }
a.film .image > .gb-motion-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 1; }
a.film .image > img { transition: opacity 220ms ease; }
a.film .image > .play { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce), (hover: none) { a.film .image > .gb-motion-preview { display: none; } }
 
 
/* GOOD BOY — YOUTUBE HYBRID HERO / V2 */
.hero-scene .gb-hero-film { position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none; background:#101812; transition:opacity .45s ease; overflow:hidden; }
.hero-scene .gb-hero-film.is-active {opacity:1;}
.hero-scene .gb-hero-film .gb-yt-frame {position:absolute; inset:0; overflow:hidden;}
.hero-scene .gb-hero-film iframe {position:absolute; left:50%; top:50%; width:100%; height:100%; min-width:177.77778vh; min-height:56.25vw; transform:translate(-50%,-50%); border:0; pointer-events:none;}
.hero-scene .gb-hero-sound {position:absolute; right:var(--page-gutter); bottom:110px; z-index:8; padding:12px 16px; background:rgba(0,0,0,.7); color:#fff; border:1px solid #ffffff88; font-weight:700; letter-spacing:.08em; font-size:11px;}
.hero-scene .gb-hero-sound[hidden] {display:none!important;}
.hero-scene:has(.gb-hero-film.is-active) .hero-reel-link {opacity:0; pointer-events:none;}
.showreel-stage.gb-youtube-stage {aspect-ratio:16/9;}
.showreel-stage.gb-youtube-stage #showreel-player {position:absolute; inset:0; width:100%; height:100%; z-index:4; overflow:hidden;}
.showreel-stage.gb-youtube-stage #showreel-player iframe {width:100%!important; height:100%!important; border:0; display:block;}
.showreel-stage.gb-youtube-stage .reel-copy,.showreel-stage.gb-youtube-stage .reel-poster {display:none;}
@media(max-width:640px){.hero-scene .gb-hero-sound{bottom:95px;right:16px;}}
@media(prefers-reduced-motion:reduce){.hero-scene .gb-hero-film{transition:none;}}
 
 
/* GOOD BOY — V5 / MOBILE SHOWREEL FIT (2026-11-02)
  On phones show the WHOLE 16:9 YouTube frame, not the desktop cover crop.
  The desktop cinematic cover treatment remains unchanged. */
@media (max-width: 640px) {
 .hero-scene .gb-hero-film,
 .story-motion .hero-scene .gb-hero-film {
   background: #101812;
 }
 .hero-scene .gb-hero-film .gb-yt-frame,
 .story-motion .hero-scene .gb-hero-film .gb-yt-frame {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }
 .hero-scene .gb-hero-film iframe,
 .story-motion .hero-scene .gb-hero-film iframe {
   position: relative !important;
   left: auto !important;
   top: auto !important;
   display: block;
   flex: 0 0 auto;
   width: 100% !important;
   height: auto !important;
   aspect-ratio: 16 / 9;
   min-width: 0 !important;
   min-height: 0 !important;
   max-width: 100% !important;
   max-height: none !important;
   transform: none !important;
   border: 0;
 }
 .showreel-stage.gb-youtube-stage { aspect-ratio: 16 / 9; }
 .showreel-stage.gb-youtube-stage #showreel-player iframe {
   width: 100% !important;
   height: 100% !important;
   aspect-ratio: 16 / 9;
 }
}
/* ===============================================================
 GOOD BOY V23 — CINEMATIC COMPACT SELECTED WORKS / 2026-11-04
 No hero, showreel, or YouTube CSS selectors overridden.
 =============================================================== */
@media (min-width: 761px) {
  .journal { padding: clamp(42px,5vw,76px) var(--page-gutter) 38px; }
  .journal-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(25px,3.4vw,53px) clamp(18px,3vw,48px); }
  .journal-grid article, .journal-grid article:first-child, .journal-grid article:last-child { grid-column:auto; padding:0; min-width:0; }
  .journal-grid article:nth-child(2), .journal-grid article:nth-child(3), .journal-grid article:nth-child(4), .journal-grid article:nth-child(5) { padding-top:0; padding-right:0; }
  .journal-grid article:nth-child(3n + 2) { margin-top:clamp(8px,1.8vw,25px); }
  .journal .journal-grid article .image, .journal .journal-grid article:first-child .image, .journal .journal-grid article:last-child .image { aspect-ratio:16 / 10; }
  .journal .caption { padding-top:14px; }
  .journal .caption strong { font-size:clamp(18px,1.9vw,28px); }
  .journal .campaign-name { font-size:13px; margin-top:3px; }
  .journal .section-heading { margin-bottom:28px; padding-bottom:16px; }
}
.story-motion #featured article {
  opacity: calc(.32 + var(--gb-reveal,1) * .68);
  transform: translate3d(0,var(--entry-y,0px),0);
  transition: transform .16s linear, opacity .16s linear;
  will-change:transform,opacity;
}
.story-motion #featured article .image { overflow:hidden; }
.story-motion #featured article .image img {
  transform:translate3d(0,var(--gb-parallax,0px),0) scale(var(--gb-film-scale,1));
  transition:transform .2s linear;
  will-change:transform;
}
.see-more { margin-top:clamp(30px,4vw,56px); padding:22px 0 20px; font-size:clamp(22px,2.65vw,42px); min-height:92px; }
.see-more span { font-size:1em; transition:transform .25s ease; }
.see-more:hover span { transform:translate(6px,-6px); }
@media (max-width:760px) {
  .journal { padding:38px var(--page-gutter) 28px; }
  .journal .section-heading { margin-bottom:24px; }
  .journal-grid { grid-template-columns:minmax(0,1fr); gap:25px; }
  .journal-grid article, .journal-grid article:first-child, .journal-grid article:last-child { grid-column:auto; padding:0; margin:0; }
  .journal-grid article:nth-child(2), .journal-grid article:nth-child(3), .journal-grid article:nth-child(4), .journal-grid article:nth-child(5) { padding:0; }
  .journal .journal-grid article .image, .journal .journal-grid article:first-child .image, .journal .journal-grid article:last-child .image { aspect-ratio:16 / 10; }
  .journal .caption { padding-top:10px; }
  .journal .caption strong { font-size:21px; }
  .see-more { margin-top:28px; padding:17px 0; min-height:74px; font-size:clamp(24px,7vw,36px); }
}
@media (prefers-reduced-motion: reduce) {
  .story-motion #featured article { opacity:1 !important; transform:none !important; transition:none !important; }
  .story-motion #featured article .image img { transform:none !important; transition:none !important; }
  .see-more span { transition:none !important; }
}