* { margin: 0; padding: 0; box-sizing: border-box; }

.college-time-page { min-height: 100vh; position: relative; overflow-x: hidden; overflow-y: auto; background: #111; }
.college-time-page::before { content: ""; position: fixed; inset: -30px; background: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.58)), url("images/Robot_2.jpg") center / cover no-repeat; filter: blur(16px); transform: scale(1.08); z-index: 0; }
.college-time-content { position: relative; z-index: 1; min-height: 100vh; padding: 28px clamp(20px, 5vw, 72px); }
.college-time-heading { position: sticky; top: 28px; z-index: 5; padding-top: 24px; background: transparent; }
.college-time-heading::before { content: ""; position: absolute; top: -28px; left: 50%; z-index: -1; width: 100vw; height: calc(100% + 28px); transform: translateX(-50%); background: transparent; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; }

.short-films-gallery.illustration-gallery .college-time-heading { position: fixed; top: 28px; left: clamp(20px, 5vw, 72px); z-index: 20; }
.college-time-content h1, .college-time-heading h1 { margin-top: 0; font-size: clamp(30px, 4vw, 46px); letter-spacing: 3px; font-weight: 400; }
.college-time-content p, .college-time-heading p { margin-top: 8px; margin-bottom: 0; color: rgba(255,255,255,.72); font-size: 12px; letter-spacing: 3px; }
.college-time-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(100%, 1200px); margin: 28px auto 0; }
.college-time-box { min-height: 210px; background-color: #000; background-position: center; background-size: cover; background-repeat: no-repeat; border: 1px solid rgba(255,255,255,.16); cursor: pointer; transition: transform .2s ease, border-color .2s ease; }
.college-time-box:hover, .college-time-box:focus-visible { transform: translateY(-4px); border-color: rgba(255,255,255,.72); }
.college-time-lightbox[hidden] { display: none; }
.college-time-lightbox { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; justify-items: center; padding: 28px; background: rgba(0,0,0,.74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.college-time-lightbox-image { display: block; max-width: min(86vw, 1200px); max-height: 88vh; width: auto; height: auto; object-fit: contain; }
.college-time-lightbox-close, .college-time-lightbox-arrow { border: 1px solid rgba(255,255,255,.65); background: rgba(0,0,0,.28); color: #fff; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.college-time-lightbox-close:hover, .college-time-lightbox-arrow:hover { background: rgba(255,255,255,.16); border-color: #fff; transform: scale(1.08); }
.college-time-lightbox-close { position: absolute; top: 24px; right: 28px; width: 42px; height: 42px; border-radius: 50%; font-size: 28px; line-height: 1; }
.college-time-lightbox-arrow { position: relative; width: 52px; height: 52px; border-radius: 50%; }
.college-time-lightbox-arrow::before { content: ""; position: absolute; top: 50%; width: 11px; height: 11px; border-top: 2px solid #fff; border-right: 2px solid #fff; }
.college-time-lightbox-arrow--prev::before { left: 21px; transform: translateY(-50%) rotate(-135deg); }
.college-time-lightbox-arrow--next::before { left: 18px; transform: translateY(-50%) rotate(45deg); }
.college-time-lightbox-open { overflow: hidden; }
@media (max-width: 600px) { .college-time-gallery { grid-template-columns: repeat(4, minmax(150px, 1fr)); } .college-time-box { min-height: 150px; } }
body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
html { scroll-padding-top: 80px; }
body { background: #000; color: #f5f5f5; font-family: Arial, Helvetica, sans-serif; }
body.illustration-page, html:has(body.illustration-page) { min-height: 100vh; height: auto; overflow-x: hidden; overflow-y: auto; }
.navbar { position: fixed; top: 0; left: 0; width: 100%; padding: 25px 40px; display: flex; justify-content: space-between; align-items: center; z-index: 1000; mix-blend-mode: difference; backdrop-filter: blur(var(--nav-blur, 0px)); -webkit-backdrop-filter: blur(var(--nav-blur, 0px)); }
.logo { font-size: 14px; font-weight: bold; letter-spacing: 2px; opacity: 0; transform: translateY(-18px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.navbar.is-visible .logo { opacity: 1; transform: translateY(0); }
nav { display: flex; gap: 30px; }
nav a { color: white; text-decoration: none; font-size: 12px; letter-spacing: 2px; }
.hero { min-height: 100svh; height: 100svh; display: flex; align-items: center; justify-content: center; padding: clamp(100px, 12vh, 140px) clamp(20px, 4vw, 60px); position: sticky; top: 0; z-index: 0; overflow: hidden; }
.hero-background { position: absolute; inset: 0; z-index: 0; transform: scale(var(--hero-bg-scale, 1)); filter: blur(var(--hero-bg-blur, 0px)); }
.hero-content { position: relative; z-index: 2; width: 100%; max-width: 1200px; transform: translateY(var(--hero-content-y, 0px)) scale(var(--hero-content-scale, 1)); opacity: var(--hero-content-opacity, 1); filter: blur(var(--hero-content-blur, 0px)); transform-origin: center center; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transform: translateX(100%); transition: transform 1.2s ease, opacity 1.2s ease; }
.hero-bg--1 { background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url("images/image_1.jpg"); }
.hero-bg--2 { background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url("images/image_2.jpg"); }
.hero-bg--3 { background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url("images/image_3.png"); }
.hero-bg--4 { background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url("images/image_4.png"); }
.hero-bg--5 { background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url("images/image_5.jpg"); }
.hero-bg.active { opacity: 1; transform: translateX(0); z-index: 2; }
.hero-bg.incoming { opacity: 1; transform: translateX(100%); z-index: 1; }
.hero-bg.leaving { opacity: 1; transform: translateX(-100%); z-index: 1; }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.08); z-index: 1; }
.hero-controls { position: absolute; inset: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 0 2vw; pointer-events: none; }
.hero-arrow { width: 66px; height: 66px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); backdrop-filter: blur(8px); border-radius: 50%; color: transparent; font-size: clamp(38px,4vw,56px); line-height: 1; cursor: pointer; pointer-events: auto; transition: color .25s ease, transform .25s ease, opacity .25s ease, background .25s ease, border-color .25s ease; opacity: 0; display: flex; align-items: center; justify-content: center; }
.hero-arrow span { display: inline-block; transform: translateY(-2px); }
.hero-controls:hover .hero-arrow, .hero-arrow:hover { color: rgba(255,255,255,.95); opacity: 1; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
.hero-arrow:hover { transform: scale(1.08); }
.small-text, .section-label { font-size: 12px; letter-spacing: 4px; margin-bottom: 30px; }
.hero h1 { font-size: clamp(60px,10vw,160px); line-height: .85; letter-spacing: -6px; font-weight: 800; }
.hero h1 .letter, .work h2 .letter, .about h2 .letter, .contact h2 .letter { display: inline-block; transition: transform .18s ease, opacity .18s ease, filter .18s ease; transform-origin: center bottom; will-change: transform; }
.hero h1 .letter.pop, .work h2 .letter.pop, .about h2 .letter.pop, .contact h2 .letter.pop { animation: letter-pop .42s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes letter-pop { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-18px) scale(1.3) rotate(-7deg); } 65% { transform: translateY(-5px) scale(1.06) rotate(3deg); } 100% { transform: translateY(0) scale(1); } }
.intro { margin-top: 40px; font-size: 18px; color: #aaa; }
.explore-button { display: inline-block; margin-top: 50px; color: white; text-decoration: none; border-bottom: 1px solid white; padding-bottom: 8px; font-size: 13px; letter-spacing: 2px; }
.work, .about { padding: clamp(90px, 10vw, 150px) clamp(20px, 4vw, 60px); max-width: 1400px; margin: auto; }
.work { position: relative; z-index: 1; margin-top: 24px; min-height: 100svh; background: transparent; padding-top: 30px; padding-bottom: 90px; opacity: 1; transform: none; filter: none; transition: opacity .9s ease, transform .9s ease, filter .9s ease; }
.work.is-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.work h2, .about h2, .contact h2 { font-size: clamp(50px,8vw,120px); letter-spacing: -4px; line-height: .85; margin-bottom: 80px; }
.work h2 { margin-bottom: 40px; }
.work-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 22px); align-items: stretch; }
.placeholder { aspect-ratio: 3 / 5; background: #222; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: clamp(12px, 2vw, 24px); font-size: 40px; letter-spacing: 5px; transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s cubic-bezier(.22,1,.36,1); position: relative; overflow: hidden; }
.work-card--qco, .work-card--installation { display: flex; flex-direction: column; align-items: stretch; }
.work-card-extra { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .4s ease, opacity .25s ease, margin-top .25s ease; }
.work-card-extra p { margin: 0; padding: 10px 8px 0; color: #f5f5f5; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.work-card--qco.is-expanded .work-card-extra, .work-card--installation.is-expanded .work-card-extra { max-height: 140px; opacity: 1; margin-top: 12px; }
.placeholder::before { content: ""; position: absolute; inset: auto 0 0 0; height: 25%; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); z-index: 0; }
.placeholder > * { position: relative; z-index: 1; }
.feature-card { aspect-ratio: 2 / 3; background-image: none; filter: none; }
.qco-card { background-image: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.38)), url("images/QCO_1.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; filter: brightness(1.35) contrast(1.12) saturate(1.15); }
.illustration-card { background-image: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.38)), url("images/image_5.jpg"); background-size: cover; background-position: 20% center; background-repeat: no-repeat; filter: brightness(1.15) contrast(1.08) saturate(1.05); }
.installation-card { background-image: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.38)), url("images/image_1.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; filter: brightness(1.15) contrast(1.08) saturate(1.05); }
.college-time-card { background-image: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.38)), url("images/college_1.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; filter: brightness(1.15) contrast(1.08) saturate(1.05); }
.work-card { opacity: 0; transform: translateY(45px); transition: opacity .7s ease, transform .7s ease; display: flex; color: inherit; text-decoration: none; border: 0; padding: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.work-card .placeholder { width: 100%; }
.work.is-visible .work-card { opacity: 1; transform: translateY(0); }
.work.is-visible .work-card:nth-child(2) { transition-delay: .12s; }
.work.is-visible .work-card:nth-child(3) { transition-delay: .24s; }
.work.is-visible .work-card:nth-child(4) { transition-delay: .36s; }
.work-card:hover { position: relative; z-index: 2; }
.work-card:hover .placeholder { transform: translateY(-14px) scale(1.06); box-shadow: 0 24px 45px rgba(0,0,0,.35); }
.work-card h3 { font-size: 18px; letter-spacing: 2px; }
.work-card p, .contact p:last-child { margin-top: 8px; color: #888; }
.work-card p { font-size: 12px; line-height: 1.3; }
.short-films-page { --short-film-note-color: rgba(255,255,255,.75); --short-film-muted-color: rgba(255,255,255,.75); --short-film-heading-color: rgba(255,255,255,1); --short-film-divider: rgba(255,255,255,.24); min-height: 100svh; position: relative; isolation: isolate; background: #000; }
.illustration-page { scroll-snap-type: none; }
.installation-page { scroll-snap-type: none; }
.installation-page { background: #000; color: #f5f5f5; }
.installation-page .installation-gallery { padding-top: 72px; }
.installation-heading-lock { position: sticky; top: 0; z-index: 5; padding-bottom: 8px; background: transparent; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.short-films-gallery.illustration-gallery { position: relative; z-index: 1; width: 100%; max-width: none; min-height: 100vh; height: auto; margin: 0; padding: 120px clamp(20px, 5vw, 72px) 28px; overflow: visible; }
.short-films-page.is-light { --short-film-note-color: rgba(255,255,255,.75); --short-film-muted-color: rgba(255,255,255,.75); --short-film-heading-color: rgba(255,255,255,1); --short-film-divider: rgba(0,0,0,.18); }
.short-films-background { position: fixed; inset: -24px; z-index: 0; filter: blur(16px); transform: scale(1.04); overflow: hidden; }
.short-films-background::after { content: ""; position: absolute; inset: 0; z-index: 10; background: rgba(0,0,0,.5); }
.short-films-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.short-films-bg--5 { background-image: url("images/image_5.jpg"); }
.illustration-bg--3 { background-image: url("images/image_3.png"); }
.installation-bg--1 { background-image: url("images/image_1.jpg"); }
.short-films-gallery { position: relative; z-index: 1; width: min(1400px, 100%); margin: 0 auto; padding: 18px clamp(20px, 4vw, 60px) 0; }
.short-films-back { position: fixed; top: 28px; left: clamp(20px, 4vw, 60px); z-index: 30; color: #aaa; font-size: 12px; letter-spacing: 3px; text-decoration: none; font-weight: 600; filter: none; -webkit-filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; mix-blend-mode: normal; text-shadow: 0 0 1px rgba(255,255,255,.08); }
.short-films-gallery.illustration-gallery .short-films-back { color: #aaa; }
.short-films-gallery h1 { margin: 12px 0 18px; font-size: clamp(34px, 5vw, 72px); line-height: .9; letter-spacing: -2px; }
.short-films-gallery .college-time-heading h1 { margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: normal; letter-spacing: 3px; font-weight: 400; }
.short-films-gallery .college-time-heading p { margin-top: 8px; margin-bottom: 0; }
.installation-gallery h1 { margin: 0 0 4px; color: #f5f5f5; font-size: clamp(38px, 5vw, 64px); font-weight: 400; line-height: 1.1; letter-spacing: -1px; }
.installation-subtitle { margin: 0 0 16px; color: rgba(255,255,255,.78); font-size: 13px; letter-spacing: 4px; text-transform: uppercase; }
.installation-gallery h2 { width: min(100%, 940px); margin: 0 auto 8px; color: rgba(255,255,255,.9); font-size: clamp(22px, 2.5vw, 34px); font-weight: 400; letter-spacing: 2px; }
.installation-year { width: min(100%, 940px); margin: 0 auto 24px; color: rgba(255,255,255,.6); font-size: 13px; letter-spacing: 3px; }
.installation-gallery .short-films-back { color: #aaa; }
.installation-intro { width: min(100%, 940px); margin: 0 auto 36px; color: rgba(255,255,255,.75); font-size: clamp(14px, 1.35vw, 17px); line-height: 1.5; }
.installation-intro p + p { margin-top: 12px; }
.installation-gallery .illustration-label { display: none; }
.installation-gallery-wrap { position: relative; width: min(100%, 940px); margin: 0 auto 32px; }
.installation-gallery-grid { display: grid; grid-template-columns: minmax(0, .48fr) minmax(0, 1fr); gap: 12px; width: min(100%, 940px); margin: 0 auto 32px; align-items: stretch; }
.installation-newwork-gallery { display: grid; grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.18fr); gap: 12px; width: min(100%, 940px); margin: 0 auto 32px; align-items: stretch; }
.installation-newwork-feature, .installation-newwork-single { margin: 0; overflow: hidden; background: transparent; }
.installation-newwork-feature { aspect-ratio: 4 / 5; }
.installation-newwork-single { aspect-ratio: 16 / 10; position: relative; left: -18px; }
.installation-newwork-gallery img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: transparent; }
.installation-divider { width: min(100%, 940px); margin: 52px auto 44px; border: 0; border-top: 1px solid rgba(255,255,255,.3); }
.installation-secondary { width: min(100%, 940px); margin: 0 auto 56px; }
.installation-secondary h2 { width: 100%; margin: 0 0 12px; }
.installation-meta { width: 100%; margin: 0 0 18px; color: rgba(255,255,255,.6); font-size: 13px; letter-spacing: 3px; text-transform: none; }
.installation-meta span { margin: 0 4px; }
.installation-secondary-copy { width: 100%; margin: 0 0 22px; color: rgba(255,255,255,.75); font-size: clamp(14px, 1.35vw, 17px); line-height: 1.5; }
.installation-secondary-copy p + p { margin-top: 12px; }
.installation-secondary-divider { width: 100%; height: 1px; margin: 0 0 20px; background: rgba(255,255,255,.18); }
.installation-secondary-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.55fr); gap: 12px; align-items: end; }
.installation-secondary-grid > * { min-width: 0; }
.installation-secondary-stack { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.installation-combined-box { width: 100%; max-width: 100%; min-width: 0; justify-self: stretch; grid-template-rows: 1fr; aspect-ratio: .94; gap: 0; background: #000; overflow: hidden; }
.installation-combined-box figure { width: 100%; min-width: 0; aspect-ratio: auto; height: 100%; }
.installation-combined-box img { object-position: left center; }
.installation-secondary-grid figure { margin: 0; overflow: hidden; background: #000; }
.installation-secondary-grid .installation-secondary-stack figure,
.installation-secondary-grid .installation-secondary-feature { aspect-ratio: 1920 / 1080; }
.installation-media-card { position: relative; overflow: hidden; }
.installation-static-card { transform: none !important; box-shadow: none !important; }
.installation-static-card:hover, .installation-static-card:focus-within { transform: none !important; box-shadow: none !important; }
.installation-secondary-grid img { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; filter: none; }
.installation-secondary-stack figure { height: 100%; }
.installation-secondary-feature { height: 100%; }
.installation-secondary-feature.installation-media-card { transition: transform .25s ease, box-shadow .25s ease; cursor: pointer; }
.installation-secondary-feature.installation-media-card:hover, .installation-secondary-feature.installation-media-card:focus-within { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.35); }
.installation-secondary-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.installation-secondary-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; opacity: 0; transform: scale(.98); transition: opacity .25s ease, transform .25s ease; z-index: 2; }
.installation-secondary-feature.is-playing .installation-secondary-video { opacity: 1; transform: scale(1); }
.installation-secondary-feature.is-playing .installation-secondary-poster { opacity: 0; }
.installation-secondary-feature .installation-secondary-play { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(0,0,0,.35); transform: translate(-50%, -50%) scale(.8); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; cursor: pointer; z-index: 3; }
.installation-secondary-feature .installation-secondary-play::before { content: ""; position: absolute; top: 50%; left: 53%; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #fff; transform: translate(-50%, -50%); }
.installation-secondary-feature:hover .installation-secondary-play, .installation-secondary-feature .installation-secondary-play:focus-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.installation-secondary-feature.is-playing .installation-secondary-play { opacity: 0; pointer-events: none; }
.installation-gallery-stack { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
.installation-gallery-grid figure { min-height: 0; overflow: hidden; }
.installation-gallery-grid figure { aspect-ratio: 1920 / 1080; }
.installation-gallery-grid > figure { aspect-ratio: 1920 / 1080; }
.installation-gallery-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.installation-gallery-stack figure:first-child img { object-position: 50% 30%; }
.installation-gallery-stack figure:nth-child(2) img { object-position: 50% 70%; }
.installation-gallery-grid figure:last-child img { object-position: 50% 50%; }
.installation-feature { position: relative; cursor: pointer; transition: transform .3s ease, box-shadow .3s ease; }
.installation-feature:hover, .installation-feature:focus-within { z-index: 2; transform: scale(1.025); box-shadow: 0 18px 36px rgba(0,0,0,.35); }
.installation-play { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(0,0,0,.45); opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .25s ease, transform .25s ease; cursor: pointer; }
.installation-play::before { content: ""; position: absolute; top: 50%; left: 53%; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #fff; transform: translate(-50%, -50%); }
.installation-feature:hover .installation-play, .installation-play:focus-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.installation-inline-video { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.installation-feature.is-playing { transform: none; box-shadow: none; }
.installation-feature.is-playing .installation-play { display: none; }
.installation-inline-title { margin: 26px 0 0; color: rgba(255,255,255,.8); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; }
.illustration-label { margin: 0 0 14px; color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: 3px; }
.illustration-carousel { position: relative; width: min(100%, 1200px); margin: 28px auto 0; }
.illustration-showcase { position: relative; width: 100%; overflow: hidden; cursor: zoom-in; transition: transform .2s ease; transform-origin: center center; }
.illustration-showcase.zoomed { cursor: zoom-out; }
.illustration-track { display: flex; transition: transform .6s cubic-bezier(.22,1,.36,1); will-change: transform; }
.illustration-showcase img { display: block; flex: 0 0 100%; width: 100%; height: calc(100svh - 220px); min-height: 360px; object-fit: contain; object-position: center; opacity: .25; transform: scale(.96); transform-origin: center center; transition: opacity .6s ease, transform .6s ease; }
.illustration-showcase img.is-active { opacity: 1; transform: scale(1); }
.illustration-showcase img.is-before, .illustration-showcase img.is-after { opacity: .45; }
.installation-showcase { width: min(100%, 1200px); margin: 0 auto; }
.installation-showcase img { display: block; width: 100%; height: calc(100svh - 220px); min-height: 360px; object-fit: contain; object-position: center; opacity: .96; }
.installation-text-block { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); align-items: center; gap: clamp(28px, 5vw, 72px); padding: clamp(18px, 3vw, 28px) 0; }
.installation-text-block img { height: auto; min-height: 0; aspect-ratio: 16 / 10; object-fit: cover; }
.installation-copy { display: grid; gap: 20px; }
.installation-note { color: rgba(255,255,255,.84); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.8; letter-spacing: .02em; max-width: 1000px; margin: 0 auto; }
.illustration-arrow { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.24); color: rgba(255,255,255,.9); backdrop-filter: blur(8px); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 42px; line-height: 1; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.illustration-arrow:hover { transform: translateY(-50%) scale(1.08); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
.illustration-arrow--left { left: -18px; }
.illustration-arrow--right { right: -18px; }
.illustration-arrow span { display: inline-block; transform: translateY(-2px); }
@media (max-width: 700px) { .illustration-arrow { width: 42px; height: 42px; font-size: 34px; } .illustration-arrow--left { left: 8px; } .illustration-arrow--right { right: 8px; } }
@media (max-width: 800px) { .installation-text-block { grid-template-columns: 1fr; gap: 24px; } .installation-text-block img { aspect-ratio: 16 / 9; } .installation-gallery-grid { grid-template-columns: 1fr; } .installation-gallery-stack { grid-template-rows: repeat(2, auto); } .installation-secondary-grid { grid-template-columns: 1fr; } .installation-newwork-gallery { grid-template-columns: 1fr; } }
.short-film-list { display: grid; gap: clamp(18px, 3vw, 34px); }
.short-film-row { display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr); gap: clamp(28px, 7vw, 100px); align-items: center; position: relative; padding: 24px 0; }
.short-film-row--luminaty { grid-template-columns: minmax(180px, 360px) minmax(0, 1fr); }
.short-film-row--mask-sanitizer { grid-template-columns: minmax(200px, 380px) minmax(0, 1fr); }
.short-film-row--mask-sanitizer .short-film-poster { aspect-ratio: 16 / 9; width: 100%; max-width: 380px; }
.short-film-row--qco { cursor: pointer; }
.short-film-row--qco .short-film-note { transition: max-height .35s ease, opacity .25s ease; }
.short-film-hidden-space { grid-column: 1 / -1; width: 100%; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s ease, opacity .25s ease, margin-top .25s ease; }
.qco-blank-large, .qco-blank-small { background: rgba(20,20,20,.78); border: 1px solid rgba(255,255,255,.28); }
.qco-media-label { width: min(100%, 760px); margin: 0 auto 10px; color: rgba(255,255,255,.75); font-size: 11px; letter-spacing: 3px; text-align: left; }
.qco-blank-large { display: block; width: min(100%, 760px); aspect-ratio: 21 / 9; margin: 0 auto; }
.qco-blank-small-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); width: min(100%, 1040px); margin: clamp(16px, 2.5vw, 30px) auto 0; }
.qco-blank-small { aspect-ratio: 2560 / 1080; padding: 12px; display: flex; align-items: flex-end; }
.qco-still-1 { background-image: url("images/QCO still_1.jpg"); background-size: cover; background-position: center; }
.qco-still-2 { background-image: url("images/QCO still_2.jpg"); background-size: cover; background-position: center; }
.qco-still-3 { background-image: url("images/QCO still_3.jpg"); background-size: cover; background-position: center; }
.qco-blank-small span { color: rgba(255,255,255,.75); font-size: 10px; letter-spacing: 1.5px; }
.short-film-row--qco.is-expanded .short-film-hidden-space { max-height: 900px; opacity: 1; margin-top: 24px; }
.short-film-row--qco:not(.is-expanded) .short-film-hidden-space { margin-top: 0; }
.short-film-row--luminaty.is-expanded .short-film-hidden-space { max-height: 900px; opacity: 1; margin-top: 24px; }
.short-film-row--luminaty:not(.is-expanded) .short-film-hidden-space { margin-top: 0; }
.luminaty-video { display: block; width: min(100%, 760px); aspect-ratio: 1920 / 1080; margin: 0 auto; background: rgba(20,20,20,.78); border: 1px solid rgba(255,255,255,.28); }
.short-film-note { width: 100%; max-width: none; max-height: 390px; overflow-y: auto; padding-right: 14px; scrollbar-color: rgba(255,255,255,.35) transparent; }
.short-film-note-label { color: var(--short-film-muted-color); font-size: 11px; letter-spacing: 3px; }
.short-film-note h2 { margin-top: 18px; font-size: clamp(24px, 4vw, 52px); line-height: .95; letter-spacing: -1px; color: var(--short-film-heading-color); font-weight: 700; }
.short-film-year { margin-top: 8px; color: var(--short-film-muted-color); font-size: 12px; letter-spacing: 3px; }
.short-film-concept { margin-top: 20px; width: 100%; max-width: none; color: var(--short-film-note-color); font-size: 14px; line-height: 1.65; }
.short-film-concept p + p { margin-top: 16px; }
.short-film-poster { aspect-ratio: 2 / 3; overflow: visible; background: #222; position: relative; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; z-index: 1; }
.short-film-poster:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 22px 40px rgba(0,0,0,.45); z-index: 3; }
.short-film-poster--blank { aspect-ratio: auto; background: #000; }
.short-film-poster--blank img { width: 100%; height: auto; display: block; }
.short-film-poster--natural { aspect-ratio: auto; }
.short-film-poster--natural img { width: 100%; height: auto; display: block; }
.short-film-row:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 1px; background: rgba(255,255,255,.24); }
.short-film-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about { min-height: 100svh; padding-top: 20px; padding-bottom: 90px; display: flex; align-items: flex-start; }
.about, .awards, .contact { position: relative; z-index: 5; background: transparent; }
footer { position: relative; z-index: 5; background: #111; }
.about-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr); align-items: start; gap: 34px; width: 100%; max-width: 1400px; margin: 0 auto; }
.about-copy { max-width: 760px; }
.about-text { max-width: 720px; margin-top: 24px; font-size: clamp(16px, 1.35vw, 22px); line-height: 1.7; color: rgba(255,255,255,.75); }
.about-image-wrap { display: flex; justify-content: flex-end; align-items: flex-start; }
.about-image { width: 100%; max-width: 420px; height: clamp(360px, 33vw, 540px); object-fit: cover; display: block; filter: grayscale(18%) contrast(1.08); margin-top: 52px; }
.awards { padding: clamp(90px, 9vw, 120px) clamp(20px, 4vw, 60px) clamp(110px, 11vw, 150px); max-width: 1400px; margin: auto; }
.awards h2 { font-size: clamp(50px,8vw,120px); letter-spacing: -4px; line-height: .85; margin-bottom: 60px; }
.awards-list { display: grid; gap: 18px; width: 100%; max-width: none; }
.award-item { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.15); }
.award-year { font-size: 12px; letter-spacing: 2px; color: #aaa; text-transform: uppercase; }
.award-item p { width: 100%; min-width: 0; color: #ddd; font-size: clamp(18px, 1.5vw, 26px); line-height: 1.5; }
.contact { min-height: 80svh; padding: clamp(100px, 10vw, 150px) clamp(20px, 4vw, 60px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.contact h2 { margin-bottom: 0; }
.contact-form { width: min(100%, 620px); margin-top: 45px; padding: 28px 0; border: 0; background: transparent; text-align: left; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.contact-form label { display: flex; flex-direction: column; gap: 9px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid #555; border-radius: 0; background: rgba(17,17,17,.45); color: #f5f5f5; padding: 12px; font: inherit; outline: none; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #aaa; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #f5f5f5; }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form label:first-child, .message-field { grid-column: 1 / -1; }
.contact-form button { display: block; margin: 28px 0 0 auto; border: 1px solid #f5f5f5; background: transparent; color: #f5f5f5; padding: 14px 22px; font-size: 12px; letter-spacing: 2px; cursor: pointer; transition: background .25s ease, color .25s ease; }
.contact-form button:hover { background: #f5f5f5; color: #111; }
.contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 55px; }
.contact-links a { color: #aaa; text-decoration: none; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; transition: color .25s ease; }
.contact-links a:hover { color: #f5f5f5; }
footer { padding: 30px clamp(20px, 4vw, 60px); border-top: 1px solid #333; color: #777; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .hero-background, .hero-content, .work, .work-card { transition: none; } }
@media (max-width: 1100px) and (min-width: 701px) { .about-inner { grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr); } .about-image { height: 48vw; max-height: 540px; } }
@media (max-width: 700px) { .navbar { padding: 20px; } nav { gap: 15px; } .hero, .work, .about, .contact { padding-left: 20px; padding-right: 20px; } .hero h1 { letter-spacing: -3px; } .work-grid { grid-template-columns: 1fr; } .short-film-row { grid-template-columns: minmax(0, 1fr); gap: 22px; } .short-film-note, .short-film-concept { width: 100%; } .short-film-note { padding-bottom: 18px; } .placeholder { height: 340px; } .about-inner { grid-template-columns: 1fr; } .about-image-wrap { justify-content: center; } .about-image { max-width: 100%; height: 420px; } .about h2, .contact h2 { letter-spacing: -3px; } .contact { display: flex; flex-direction: column; align-items: stretch; text-align: center; } .contact-form { padding: 20px; margin-top: 35px; } .contact-fields { grid-template-columns: 1fr; } .contact-form label:first-child, .message-field { grid-column: auto; } .contact-links { justify-content: center; margin-top: 35px; } }