:root {
  --bg: #d8d8d4;
  --fg: #101010;
  --muted: #5d5d5a;
  --line: rgba(16,16,16,.36);
  --pad: 22px;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#bfc0bc; }
body { margin:0; color:var(--fg); font-family:Arial,Helvetica,sans-serif; font-size:14px; line-height:1.2; -webkit-font-smoothing:antialiased; background-color:var(--bg); background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 3px),radial-gradient(circle at 20% 8%,rgba(255,255,255,.35),transparent 24%),radial-gradient(circle at 80% 70%,rgba(0,0,0,.055),transparent 30%); }
body::before { display:none; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }

.identity-bar { position:relative; height:176px; overflow:hidden; background:#090909; color:#f1f1ef; isolation:isolate; border-bottom:1px solid rgba(255,255,255,.18); }
.identity-bar::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 12% 10%,rgba(255,255,255,.09),transparent 24%),radial-gradient(circle at 77% 88%,rgba(255,255,255,.05),transparent 26%),repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px); mix-blend-mode:screen; opacity:.8; }
.grain { position:absolute; inset:-40%; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); opacity:.26; transform:rotate(3deg); pointer-events:none; }
.streak-logo { position:absolute; left:18px; top:50%; width:min(64vw,820px); height:122px; object-fit:contain; object-position:left center; transform:translateY(-50%); filter:grayscale(1) brightness(0) invert(1) contrast(1.5); opacity:.96; }
.identity-bar nav { position:absolute; right:var(--pad); bottom:18px; display:flex; gap:22px; z-index:2; text-transform:uppercase; font-size:11px; letter-spacing:.04em; }
.identity-bar nav a:hover { opacity:.5; }

.section-pad { padding-left:var(--pad); padding-right:var(--pad); }
.rule-top { border-top:1px solid var(--line); }
.eyebrow { margin:0; color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:.04em; }

.hero { position:relative; min-height:76svh; padding-top:22px; padding-bottom:22px; display:grid; grid-template-rows:1fr auto; overflow:hidden; background:#b7b8b4; background-size:cover; background-position:center; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.04),rgba(0,0,0,.12)); pointer-events:none; }
.hero-background-note { align-self:center; justify-self:center; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:rgba(0,0,0,.42); border:1px solid rgba(0,0,0,.22); padding:7px 9px; }
.hero-meta { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:end; color:#111; }
.hero-meta p,.hero-meta a { margin:0; }
.hero-signature { font-family:var(--serif); font-size:clamp(22px,2.5vw,38px); line-height:.95; letter-spacing:-.02em; }
.hero-meta a { font-size:11px; text-transform:uppercase; letter-spacing:.04em; }

.film-strip { padding-top:18px; padding-bottom:100px; overflow:hidden; }
.section-heading { display:flex; justify-content:space-between; margin-bottom:28px; color:var(--muted); }
.film-heading { margin-bottom:18px; }
.film-rail-wrap { position:relative; }
.film-rail { display:flex; gap:10px; overflow-x:auto; padding:0 var(--pad) 8px; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab; }
.film-rail::-webkit-scrollbar { display:none; }
.film-rail.dragging { cursor:grabbing; scroll-snap-type:none; }
.film-card { flex:0 0 min(72vw,980px); scroll-snap-align:start; filter:none; }
.film-frame { aspect-ratio:16/9; background:#151515; overflow:hidden; }
.film-frame video,.film-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.film-placeholder { height:100%; display:grid; place-items:center; color:#e8e8e4; background:linear-gradient(120deg,#101010,#3b3b39); text-transform:uppercase; letter-spacing:.04em; font-size:12px; }
.film-caption { display:flex; justify-content:space-between; gap:16px; padding-top:9px; }
.film-caption strong { font-weight:400; font-family:var(--serif); font-size:22px; }
.film-caption span { color:var(--muted); }
.rail-arrow { position:absolute; top:calc(50% - 22px); z-index:4; width:44px; height:44px; border:1px solid rgba(0,0,0,.25); border-radius:50%; background:rgba(216,216,212,.86); cursor:pointer; backdrop-filter:blur(6px); }
.rail-prev { left:12px; }
.rail-next { right:12px; }

.clients { padding-top:18px; padding-bottom:110px; }
.client-list { max-width:1100px; margin:42px 0 0; font-family:var(--serif); font-size:clamp(34px,5.8vw,92px); line-height:.92; letter-spacing:-.035em; }
.work { padding-top:18px; padding-bottom:140px; }
.project-row { position:relative; display:grid; grid-template-columns:64px 1fr minmax(150px,.45fr) 72px; gap:14px; align-items:baseline; padding:13px 0 14px; border-top:1px solid var(--line); cursor:pointer; }
.project-row:last-child { border-bottom:1px solid var(--line); }
.project-row:hover .project-title { padding-left:12px; }
.project-row:hover .project-arrow { transform:translateX(5px); }
.project-number,.project-type,.project-year { color:var(--muted); }
.project-title { font-family:var(--serif); font-size:clamp(28px,4vw,60px); letter-spacing:-.035em; transition:padding .25s ease; }
.project-type { align-self:center; }
.project-arrow { justify-self:end; transition:transform .25s ease; }
.project-preview { position:fixed; z-index:10; width:min(36vw,520px); aspect-ratio:4/3; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.96); transition:opacity .18s ease,transform .18s ease; overflow:hidden; background:#c6c6c1; filter:none; }
.project-preview.visible { opacity:1; transform:translate(-50%,-50%) scale(1); }
.project-preview img,.project-preview video { width:100%; height:100%; object-fit:cover; display:block; }
.placeholder { width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(135deg,#cdcdc8,#aaa9a4); color:#555; }

.about { padding-top:18px; padding-bottom:150px; }
.about-copy { margin-top:58px; max-width:1320px; margin-left:3vw; }
.about-copy p { font-family:var(--serif); letter-spacing:-.04em; }
.about-copy .about-main { margin:0; max-width:1180px; font-size:clamp(54px,7.7vw,122px); line-height:.88; font-weight:400; }
.about-copy .about-sub { margin:34px 0 0; max-width:900px; font-size:clamp(25px,3.1vw,48px); line-height:.98; font-weight:400; }
.contact { padding-top:18px; padding-bottom:90px; }
.contact-grid { margin-top:44px; display:grid; grid-template-columns:1fr 1fr; font-family:var(--serif); font-size:clamp(18px,2.1vw,31px); letter-spacing:-.025em; }
.contact-grid a:hover { opacity:.5; }
.site-footer { padding-top:16px; padding-bottom:20px; display:flex; justify-content:space-between; color:var(--muted); }


.project-modal { position:fixed; z-index:40; inset:0; overflow-y:auto; background:var(--bg); display:none; }
.project-modal.open { display:block; }
.project-identity { position:relative; top:0; height:176px; }
.project-identity-signature { position:absolute; z-index:3; left:var(--pad); bottom:14px; margin:0; font-family:var(--serif); font-size:18px; line-height:1; color:#f1f1ef; }
.project-identity nav { bottom:auto; top:50%; transform:translateY(-50%); flex-direction:column; align-items:flex-end; gap:6px; font-family:var(--serif); font-size:18px; text-transform:uppercase; letter-spacing:0; }
.project-identity nav a,.project-identity nav button { color:#f1f1ef; font:inherit; text-transform:inherit; background:none; border:0; padding:0; cursor:pointer; }
.project-identity nav a:hover,.project-identity nav button:hover { opacity:.55; }
.project-page { min-height:100%; }
.project-hero-media { width:100%; background:#111; border-bottom:1px solid var(--line); }
.project-hero-media video,.project-hero-media img { display:block; width:100%; height:auto; max-height:82svh; object-fit:cover; }
.project-hero-media .media-placeholder { min-height:60svh; }
.project-title-strip { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,26%); gap:7vw; padding-top:22px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.project-title-left { position:relative; padding-left:46px; }
.strip-number { position:absolute; top:2px; left:0; font-family:var(--serif); font-size:18px; }
.project-title-left h2 { margin:0; font-family:var(--serif); font-size:clamp(62px,8.2vw,126px); line-height:.82; font-weight:400; letter-spacing:-.045em; }
.strip-subtitle { margin:4px 0 0; font-family:var(--serif); font-style:italic; font-size:clamp(48px,6.3vw,96px); line-height:.86; letter-spacing:-.04em; }
.strip-type { margin:14px 0 0; font-family:var(--serif); font-size:clamp(22px,2vw,32px); }
.project-credits { align-self:end; display:grid; gap:15px; padding-bottom:2px; }
.project-credits div { display:grid; gap:1px; }
.project-credits span { color:var(--muted); text-transform:uppercase; font-size:9px; letter-spacing:.04em; }
.project-credits p { margin:0; font-family:var(--serif); font-size:18px; line-height:1.05; }
.project-media { display:grid; gap:16px; padding-top:22px; padding-bottom:22px; }
.gallery-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.gallery-pair img,.gallery-pair video,.gallery-full img,.gallery-full video { display:block; width:100%; height:auto; object-fit:cover; }
.gallery-pair img { aspect-ratio:4/5; object-fit:cover; }
.gallery-full { width:100%; }
.gallery-full img { max-height:none; }
.project-media img,.project-hero-media video,.project-hero-media img { filter:none; }
.media-placeholder { min-height:72svh; display:grid; place-items:center; font-size:20px; color:var(--muted); background:linear-gradient(120deg,#cacac5,#aaa9a4); }
.project-page-foot { padding-top:24px; padding-bottom:34px; display:flex; justify-content:space-between; border-top:1px solid var(--line); }
.project-page-foot button { border:0; background:none; padding:0; cursor:pointer; text-transform:uppercase; font-size:11px; letter-spacing:.04em; }
@media (max-width:720px) {
  :root { --pad:14px; }
  body { font-size:12px; }
  .identity-bar { height:126px; }
  .streak-logo { width:88vw; height:88px; left:10px; top:43%; }
  .identity-bar nav { left:var(--pad); right:auto; bottom:9px; gap:15px; font-size:9px; }
  .hero { min-height:64svh; }
  .hero-signature { font-size:26px; }
  .film-strip { padding-bottom:70px; }
  .film-card { flex-basis:88vw; }
  .rail-arrow { display:none; }
  .clients { padding-bottom:74px; }
  .client-list { margin-top:34px; font-size:11vw; }
  .project-row { grid-template-columns:34px 1fr 28px; gap:8px; }
  .project-type,.project-year { display:none; }
  .project-title { font-size:8vw; }
  .project-preview { display:none; }
  .about { padding-bottom:90px; }
  .about-copy { margin-left:0; margin-top:40px; }
  .about-copy .about-main { font-size:13.3vw; line-height:.9; }
  .about-copy .about-sub { margin-top:24px; font-size:7.2vw; line-height:1; }
  .contact { padding-bottom:70px; }
  .contact-grid { grid-template-columns:1fr; gap:7px; font-size:5.5vw; }
  .project-page-head h2 { font-size:18vw; }
  .project-page-foot { grid-template-columns:1fr; }
  .next-project { justify-self:start; }
  .media-placeholder { min-height:55svh; }
}

@media (max-width:720px) {
  .project-identity { height:126px; }
  .project-identity-signature { font-size:13px; bottom:8px; }
  .project-identity nav { left:auto; right:var(--pad); top:12px; bottom:auto; transform:none; align-items:flex-end; gap:3px; font-size:12px; }
  .project-title-strip { grid-template-columns:1fr; gap:28px; padding-top:18px; }
  .project-title-left { padding-left:32px; }
  .strip-number { font-size:14px; }
  .project-title-left h2 { font-size:15vw; }
  .strip-subtitle { font-size:13vw; }
  .strip-type { font-size:20px; margin-top:10px; }
  .project-credits { grid-template-columns:1fr 1fr; gap:14px 22px; padding-left:32px; }
  .project-credits p { font-size:15px; }
  .project-media { gap:9px; padding-top:12px; padding-bottom:12px; }
  .gallery-pair { gap:9px; }
  .project-page-foot { padding-top:16px; padding-bottom:22px; }
}
\n\n/* V5 — simplified homepage: full-bleed moving image first, then Selected Work */\n.hero, .clients { display:none; }\n.film-strip-hero { padding:0; overflow:hidden; border:0; background:#0b0b0b; }\n.film-strip-hero .film-rail-wrap { width:100%; }\n.film-strip-hero .film-rail { gap:0; padding:0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab; }\n.film-strip-hero .film-card { flex:0 0 100vw; width:100vw; scroll-snap-align:start; filter:none; position:relative; }\n.film-strip-hero .film-frame { width:100%; aspect-ratio:16/9; min-height:0; background:#080808; }\n.film-strip-hero .film-frame video,\n.film-strip-hero .film-frame img { width:100%; height:100%; object-fit:cover; display:block; filter:none; }\n.film-strip-hero .film-caption { display:none; }\n.film-strip-hero .rail-arrow { top:50%; transform:translateY(-50%); width:42px; height:42px; border:1px solid rgba(255,255,255,.42); background:rgba(0,0,0,.18); color:#fff; backdrop-filter:blur(5px); }\n.film-strip-hero .rail-prev { left:14px; }\n.film-strip-hero .rail-next { right:14px; }\n.work { padding-top:18px; }\n@media (max-width:720px) {\n  .film-strip-hero .film-card { flex-basis:100vw; }\n  .film-strip-hero .film-frame { aspect-ratio:4/5; }\n  .film-strip-hero .film-frame video, .film-strip-hero .film-frame img { object-fit:cover; }\n  .film-strip-hero .rail-arrow { display:none; }\n}\n

/* V6 — editorial About hierarchy + original media colour */
.film-frame img, .film-frame video,
.project-preview img, .project-preview video,
.project-hero-media img, .project-hero-media video,
.project-media img, .project-media video {
  filter:none !important;
  mix-blend-mode:normal !important;
  opacity:1;
}


/* V7 — project pages open directly on the work */
.project-page { position:relative; }
.project-back-top {
  position:absolute;
  z-index:60;
  top:14px;
  left:14px;
  width:46px;
  height:46px;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.04);
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:18px;
  line-height:1;
  opacity:.24;
  cursor:pointer;
  mix-blend-mode:difference;
  transition:opacity .2s ease, background .2s ease;
}
.project-back-top:hover,
.project-back-top:focus-visible { opacity:1; background:rgba(255,255,255,.12); outline:none; }
.project-hero-media { border-bottom:0; }
.project-hero-media video,
.project-hero-media img { width:100%; max-height:none; object-fit:cover; }
.project-page-foot .modal-close-bottom { font-family:var(--serif); text-transform:none; letter-spacing:0; font-size:16px; }

@media (max-width:720px) {
  .project-back-top { top:10px; left:10px; width:40px; height:40px; font-size:16px; opacity:.3; }
  .project-hero-media video,
  .project-hero-media img { min-height:0; }
}


/* V8 — simplified work index + chrome-star cursor + matched project footer navigation */
html, body, a, button, .project-row, .film-rail {
  cursor: url("chrome-star-cursor.svg") 24 24, auto;
}
.section-heading { justify-content:flex-start; }
.project-page-foot button,
.project-page-foot .modal-close-bottom,
.project-page-foot .next-project {
  font-family:var(--serif);
  font-size:16px;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
}
.project-page-foot button:hover { opacity:.5; }

/* V8R — retain V8 design, use 70s-inspired red dot cursor */
html, body, a, button, .project-row, .film-rail { cursor:none !important; }
.red-dot-cursor {
  position:fixed; left:0; top:0; width:16px; height:16px; border-radius:50%;
  background:#d52b1e; transform:translate(-50%,-50%); pointer-events:none;
  z-index:99999; opacity:0; transition:width .12s ease,height .12s ease,opacity .12s ease;
}
.red-dot-cursor.is-visible { opacity:1; }
.red-dot-cursor.is-active { width:22px; height:22px; }
@media (hover:none), (pointer:coarse) {
  html, body, a, button, .project-row, .film-rail { cursor:auto !important; }
  .red-dot-cursor { display:none; }
}

/* V10 — Under Armour FW26 project video layouts */
.gallery-pair-video video {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#111;
}
.gallery-portrait-video {
  width:min(48vw,720px);
  margin:0 auto;
}
.gallery-portrait-video video {
  display:block;
  width:100%;
  aspect-ratio:9/16;
  height:auto;
  object-fit:cover;
  background:#111;
}
@media (max-width:720px) {
  .gallery-pair-video { grid-template-columns:1fr; }
  .gallery-portrait-video { width:78vw; }
}

/* V12 — project descriptor line */
.strip-description {
  margin:10px 0 0;
  max-width:38ch;
  font-family:var(--serif);
  font-size:clamp(16px,1.45vw,22px);
  line-height:1.05;
}
@media (max-width:720px) {
  .strip-description { font-size:16px; max-width:32ch; }
}


/* V17 — BAPE World Cup campaign grid */
.project-hero-media.landscape-crop img {
  width:100%;
  height:clamp(420px,56.25vw,82svh);
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center 48%;
}
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  width:100%;
}
.gallery-grid img {
  display:block;
  width:100%;
  aspect-ratio:3/4;
  height:auto;
  object-fit:cover;
}
@media (max-width:1100px) {
  .gallery-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .project-hero-media.landscape-crop img { height:58vw; min-height:260px; }
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
}

/* V19 — adidas Training product film grid */
.gallery-video-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  width:100%;
}
.gallery-video-grid video {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  object-fit:cover;
  background:#000;
}
@media (max-width:720px) {
  .gallery-video-grid { grid-template-columns:1fr; gap:8px; }
}
\n\n/* V21 — compact work previews + unified About typography */\n.project-preview {\n  width:min(24vw,360px);\n  aspect-ratio:16/9;\n}\n.about-copy {\n  max-width:1180px;\n}\n.about-copy .about-main,\n.about-copy .about-sub {\n  max-width:1100px;\n  font-size:clamp(42px,5.5vw,82px);\n  line-height:.94;\n  font-weight:400;\n}\n.about-copy .about-sub {\n  margin-top:28px;\n  font-style:italic;\n}\n@media (max-width:720px) {\n  .about-copy .about-main,\n  .about-copy .about-sub {\n    font-size:10vw;\n    line-height:.96;\n  }\n  .about-copy .about-sub { margin-top:20px; }\n}\n