:root {
  --black: #0d0d0c;
  --black-soft: #151513;
  --ivory: #efece6;
  --warm: #ded8ce;
  --ink: #171714;
  --muted: #a09c94;
  --line-dark: rgba(239, 236, 230, 0.18);
  --line-light: rgba(23, 23, 20, 0.22);
  --gold: #b8925a;
  --serif: "Newsreader", Baskerville, Georgia, "Times New Roman", serif;
  --sans: "Manrope", Arial, Helvetica, sans-serif;
  --page: clamp(28px, 4vw, 72px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 72px; }
body { margin: 0; background: var(--black); color: var(--ivory); font-family: var(--sans); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
body::selection { background: var(--gold); color: var(--black); }
img, video { display: block; width: 100%; }
img { object-fit: cover; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; }
em { font-weight: 300; }

.skip-link { background: var(--ivory); color: var(--ink); left: 16px; padding: 10px 14px; position: fixed; top: -60px; z-index: 100; }
.skip-link:focus { top: 12px; }
.site-header { align-items: center; border-bottom: 1px solid var(--line-dark); display: flex; height: 72px; justify-content: space-between; left: 0; padding: 0 var(--page); position: fixed; right: 0; top: 0; transition: background 500ms ease; z-index: 20; }
.site-header.is-scrolled { background: rgba(13, 13, 12, 0.93); backdrop-filter: blur(10px); }
.wordmark { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; }
.wordmark span { color: var(--muted); font-size: 9px; font-weight: 400; margin-left: 8px; }
.site-header nav { display: flex; gap: clamp(20px, 3.2vw, 52px); }
.site-header nav a, .eyebrow, .section-number, .project-index, figcaption, .case-kicker, .case-meta dt, .category-count, .project-role, .approach-strip span { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.site-header nav a, .text-link, .button-link { position: relative; }
.site-header nav a::after, .text-link::after { background: currentColor; bottom: -7px; content: ""; height: 1px; left: 0; position: absolute; transform: scaleX(0); transform-origin: right; transition: transform 500ms var(--ease); width: 100%; }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after, .text-link:hover::after, .text-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.section-dark { background: var(--black); color: var(--ivory); }
.section-ivory { background: var(--ivory); color: var(--ink); }
.section-warm { background: var(--warm); color: var(--ink); }
.section-number { color: var(--muted); }
.button-link { border: 1px solid currentColor; display: inline-flex; font-size: 10px; gap: 46px; letter-spacing: 0.16em; padding: 15px 17px; text-transform: uppercase; transition: background 500ms var(--ease), color 500ms var(--ease); }
.button-link:hover, .button-link:focus-visible { background: var(--ivory); color: var(--ink); }
.text-link { display: inline-flex; font-size: 10px; gap: 44px; letter-spacing: 0.15em; text-transform: uppercase; }

.hero { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr auto; min-height: 100vh; overflow: hidden; padding: 112px var(--page) 38px; position: relative; }
.hero-copy { align-self: center; grid-column: 1 / 9; grid-row: 1; position: relative; z-index: 3; }
.hero-copy .eyebrow { margin-bottom: 30px; }
.hero h1, .case-hero h1, .category-hero h1 { font-family: var(--serif); font-size: clamp(88px, 10.4vw, 176px); font-weight: 300; letter-spacing: -0.065em; line-height: 0.78; }
.hero h1 span, .case-hero h1 span, .category-hero h1 span { display: block; }
.hero h1 span:last-child { margin-left: 0.45em; }
.hero-role { font-size: 13px; letter-spacing: 0.28em; margin-left: 5px; margin-top: 42px; text-transform: uppercase; }
.hero-positioning { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 30px); line-height: 1.18; margin-left: 5px; margin-top: 22px; max-width: 22em; }
.hero-disciplines { color: var(--muted); font-size: 10px; letter-spacing: 0.14em; margin-left: 5px; margin-top: 12px; text-transform: uppercase; }
.hero-actions { display: flex; gap: 14px; margin-left: 5px; margin-top: 34px; }
.hero-portrait { align-self: stretch; grid-column: 8 / 13; grid-row: 1 / 3; margin-bottom: 22px; max-height: calc(100vh - 144px); min-height: 560px; overflow: hidden; position: relative; }
.hero-portrait::after, .case-hero-media::after, .category-hero-media::after { border: 1px solid rgba(239, 236, 230, 0.3); content: ""; inset: 12px; pointer-events: none; position: absolute; z-index: 2; }
.hero-portrait img { filter: saturate(0.72) contrast(1.03); height: 100%; object-position: 50% 35%; }
.hero-portrait figcaption { bottom: 28px; left: 28px; position: absolute; z-index: 3; }
.parallax-media img { transition: transform 850ms var(--ease), filter 700ms ease; will-change: transform; }
.parallax-media:hover img { transform: scale(1.025); }
.hero-frame { bottom: 48px; grid-column: 1 / 4; grid-row: 2; position: relative; width: min(310px, 100%); z-index: 4; }
.hero-frame img { aspect-ratio: 16 / 9; filter: saturate(0.68); }
.hero-frame figcaption { display: flex; justify-content: space-between; margin-top: 10px; }
.hero-frame figcaption span:last-child { color: var(--muted); }
.hero-index { align-self: end; display: flex; font-size: 10px; grid-column: 5 / 7; grid-row: 2; justify-content: space-between; letter-spacing: 0.12em; padding-bottom: 48px; text-transform: uppercase; }
.hero-index span:last-child { color: var(--muted); }

.explore, .home-projects, .about, .category-projects, .case-concept, .film-section, .stills-section, .case-gallery { padding: 150px var(--page); }
.section-intro { display: grid; gap: 36px; grid-template-columns: 1fr 2fr 1fr; margin-bottom: 100px; }
.section-intro h2, .home-projects-header h2, .about-copy h2, .category-intro h2, .case-concept-copy h2, .film-heading h2, .stills-heading h2, .case-gallery-header h2 { font-family: var(--serif); font-size: clamp(56px, 6.4vw, 112px); font-weight: 300; letter-spacing: -0.055em; line-height: 0.92; }
.section-intro > p:last-child { align-self: end; font-size: 14px; line-height: 1.75; max-width: 30em; }
.explore-stage { align-items: start; display: grid; gap: clamp(42px, 7vw, 120px); grid-template-columns: 7fr 5fr; }
.explore-row { align-items: center; border-top: 1px solid var(--line-light); display: grid; grid-template-columns: 56px 1fr auto; padding: 28px 0 34px; }
.explore-row:last-child { border-bottom: 1px solid var(--line-light); }
.explore-row .category-count { color: #77736c; }
.explore-row h3 { font-family: var(--serif); font-size: clamp(34px, 4vw, 68px); font-weight: 300; letter-spacing: -0.04em; }
.explore-row p { color: #6f6b64; font-size: 10px; letter-spacing: 0.12em; margin-top: 5px; text-transform: uppercase; }
.explore-row .row-type { color: var(--gold); margin: 0 0 5px; }
.explore-row.is-featured { border-top-color: var(--gold); }
.explore-arrow { font-family: var(--serif); font-size: 30px; transition: transform 500ms var(--ease); }
.explore-row:hover .explore-arrow { transform: translateX(8px); }
.explore-preview { aspect-ratio: 4 / 5; background: var(--black-soft); overflow: hidden; position: sticky; top: 110px; }
.explore-preview-item { inset: 0; opacity: 0; position: absolute; transition: opacity 700ms ease; }
.explore-preview-item.is-active { opacity: 1; }
.explore-preview img, .explore-preview video { height: 100%; object-fit: cover; }
.explore-preview-item[data-explore-preview="ell"] { background: #050504; }
.explore-preview-item[data-explore-preview="ell"] img { object-fit: contain; }
.explore-preview video { filter: saturate(0.72); }
.explore-preview-caption { bottom: 22px; color: var(--ivory); display: flex; font-size: 9px; justify-content: space-between; left: 22px; letter-spacing: 0.14em; position: absolute; right: 22px; text-transform: uppercase; z-index: 2; }

.home-projects { padding-bottom: 180px; }
.home-projects-header, .category-intro { align-items: end; display: grid; gap: 50px; grid-template-columns: 1fr 3fr; margin-bottom: 100px; }
.home-projects-header > div > p, .category-intro > div > p { color: var(--muted); line-height: 1.75; margin-top: 30px; max-width: 42em; }
.project-feature { border-top: 1px solid var(--line-dark); margin-top: 100px; padding-top: 18px; }
.project-feature:first-of-type { margin-top: 0; }
.project-media { display: block; overflow: hidden; position: relative; }
.project-media img, .project-media video { aspect-ratio: 16 / 8.5; object-fit: cover; transition: filter 700ms ease, transform 900ms var(--ease); }
.project-cover-media { background: #050504; }
.project-cover-media img { object-fit: contain; }
.project-media:hover img, .project-media:hover video { filter: brightness(0.76) saturate(0.88); transform: scale(1.022); }
.media-action { align-items: center; background: var(--ivory); bottom: 28px; color: var(--ink); display: flex; font-size: 10px; gap: 42px; letter-spacing: 0.13em; opacity: 0; padding: 14px 17px; position: absolute; right: 28px; text-transform: uppercase; transform: translateY(8px); transition: opacity 500ms ease, transform 500ms var(--ease); }
.project-media:hover .media-action, .project-media:focus-visible .media-action { opacity: 1; transform: translateY(0); }
.play-badge { align-items: center; backdrop-filter: blur(8px); background: rgba(13, 13, 12, 0.72); border: 1px solid rgba(239, 236, 230, 0.55); border-radius: 50%; color: var(--ivory); display: flex; font-size: 9px; height: 74px; justify-content: center; left: 50%; letter-spacing: 0.13em; pointer-events: none; position: absolute; text-transform: uppercase; top: 50%; transform: translate(-50%, -50%); width: 74px; z-index: 4; }
.film-player { position: relative; }
.film-player.is-playing .play-badge { opacity: 0; }
.film-caption { color: var(--muted); font-size: 10px; letter-spacing: 0.13em; margin-top: 18px; text-transform: uppercase; }
.archive-cta { margin-top: 100px; }
.project-caption { align-items: end; display: grid; gap: 40px; grid-template-columns: 3fr 1fr; padding: 28px 0 70px; }
.project-caption h3 { font-family: var(--serif); font-size: clamp(54px, 6.6vw, 118px); font-weight: 300; letter-spacing: -0.055em; line-height: 0.87; margin-top: 20px; }
.project-caption > div:last-child { align-self: end; }
.project-caption > div:last-child p { color: var(--muted); font-size: 13px; line-height: 1.7; margin-bottom: 26px; max-width: 28em; }
.project-pair { display: grid; gap: clamp(32px, 7vw, 120px); grid-template-columns: 7fr 5fr; margin-top: 80px; }
.project-card { border-top: 1px solid var(--line-dark); padding-top: 14px; }
.project-card.offset { margin-top: 160px; }
.project-card-media { aspect-ratio: 4 / 3; display: block; overflow: hidden; position: relative; }
.project-card-media.tall { aspect-ratio: 4 / 5; }
.project-card-media img, .project-card-media video { height: 100%; object-fit: cover; transition: filter 700ms ease, transform 900ms var(--ease); }
.project-card:hover .project-card-media img, .project-card:hover .project-card-media video { filter: brightness(0.82) saturate(0.9); transform: scale(1.025); }
.project-card-copy { display: grid; gap: 18px; grid-template-columns: auto 1fr; padding-top: 20px; }
.project-card-copy .project-index { color: var(--muted); }
.project-card-copy h3 { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 58px); font-weight: 300; letter-spacing: -0.04em; line-height: 0.95; }
.project-card-copy p { color: var(--muted); font-size: 10px; grid-column: 2; letter-spacing: 0.12em; text-transform: uppercase; }
.project-card-copy .text-link { grid-column: 2; justify-self: start; margin-top: 8px; }
.home-projects .ell-mark { color: var(--gold); }

.about { display: grid; gap: clamp(40px, 9vw, 150px); grid-template-columns: 5fr 7fr; }
.about-portrait { align-self: start; overflow: hidden; position: relative; }
.about-portrait img { aspect-ratio: 4 / 5; filter: saturate(0.7); object-position: 50% 34%; }
.about-portrait figcaption { margin-top: 10px; }
.about-copy .section-number { margin-bottom: 56px; }
.about-copy .about-lead { font-family: var(--serif); font-size: clamp(34px, 4vw, 66px); letter-spacing: -0.04em; line-height: 1.02; margin-top: 48px; max-width: 15em; }
.about-copy > p:not(.section-number):not(.about-lead) { line-height: 1.75; margin-top: 38px; max-width: 44em; }
.about-copy .about-meta { color: #706c65; font-size: 12px; letter-spacing: 0.05em; }
.about-links { display: flex; flex-wrap: wrap; gap: 20px 34px; margin-top: 42px; }

.how-work { padding: 150px var(--page); }
.how-header { display: grid; gap: 50px; grid-template-columns: 1fr 3fr; margin-bottom: 100px; }
.how-header h2 { font-family: var(--serif); font-size: clamp(56px, 6.4vw, 112px); font-weight: 300; grid-column: 2; letter-spacing: -0.055em; line-height: 0.92; }
.principles { list-style: none; margin-left: 25%; }
.principles li { align-items: start; border-top: 1px solid var(--line-dark); display: grid; gap: 32px; grid-template-columns: 48px minmax(260px, 1.25fr) 1fr; padding: 30px 0 38px; }
.principles li:last-child { border-bottom: 1px solid var(--line-dark); }
.principles li > span { color: var(--gold); font-size: 10px; letter-spacing: 0.16em; }
.principles h3 { font-family: var(--serif); font-size: clamp(28px, 3vw, 50px); font-weight: 300; letter-spacing: -0.035em; line-height: 1; }
.principles p { color: var(--muted); line-height: 1.7; max-width: 32em; }

.contact { padding: 150px var(--page) 54px; }
.contact > .section-number { margin-bottom: 56px; }
.contact-main { border-bottom: 1px solid var(--line-dark); display: grid; grid-template-columns: 1fr 3fr; padding-bottom: 90px; }
.contact-main h2 { font-family: var(--serif); font-size: clamp(64px, 9.6vw, 170px); font-weight: 300; grid-column: 2; letter-spacing: -0.065em; line-height: 0.88; }
.contact-cta { align-items: center; border: 1px solid var(--ivory); display: inline-flex; font-size: 11px; gap: 70px; grid-column: 2; justify-self: start; letter-spacing: 0.15em; margin-top: 60px; padding: 20px 24px; text-transform: uppercase; transition: background 450ms var(--ease), color 450ms var(--ease); }
.contact-cta:hover, .contact-cta:focus-visible { background: var(--ivory); color: var(--ink); }
.contact-email { color: var(--muted); display: inline-block; font-size: 12px; grid-column: 2; letter-spacing: 0.04em; margin-top: 22px; overflow-wrap: anywhere; }
.contact-footer { align-items: end; display: grid; gap: 30px; grid-template-columns: 1fr 2fr 1fr; padding-top: 38px; }
.contact-footer nav { display: flex; flex-wrap: wrap; gap: 34px; }
.contact-footer nav a { align-items: center; display: inline-flex; font-size: 10px; gap: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.social-links svg { fill: currentColor; height: 20px; width: 20px; }
.social-links rect, .social-links circle { fill: none; stroke: currentColor; stroke-width: 1.7; }
.social-links .fill-dot { fill: currentColor; stroke: none; }
.contact-footer > p:last-child { color: var(--muted); font-size: 10px; justify-self: end; letter-spacing: 0.13em; text-align: right; text-transform: uppercase; }

.category-hero { min-height: 92vh; overflow: hidden; padding: 124px var(--page) 60px; }
.category-kicker { display: flex; justify-content: space-between; margin-bottom: 64px; }
.category-hero h1 { font-size: clamp(80px, 10.8vw, 182px); position: relative; z-index: 2; }
.category-hero h1 span:last-child { margin-left: 11vw; }
.category-hero-media { margin-left: 35vw; margin-top: -2vw; max-height: 48vh; overflow: hidden; position: relative; }
.category-hero-media img, .category-hero-media video { aspect-ratio: 16 / 8; filter: saturate(0.72); object-fit: cover; }
.category-projects { padding-top: 130px; }
.category-projects .project-pair:first-child { margin-top: 0; }
.category-projects .project-pair + .project-pair { margin-top: 140px; }
.coming-soon { border-top: 1px solid var(--line-dark); color: var(--muted); font-family: var(--serif); font-size: clamp(30px, 4vw, 62px); letter-spacing: -0.035em; margin-top: 90px; padding-top: 28px; }
.archive-grid { display: grid; gap: 110px clamp(30px, 6vw, 100px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.archive-card { border-top: 1px solid var(--line-light); padding-top: 14px; }
.archive-card:nth-child(even) { margin-top: 130px; }
.archive-card figure { aspect-ratio: 4 / 5; overflow: hidden; position: relative; }
.archive-card-wide figure { aspect-ratio: 16 / 10; }
.archive-card img { height: 100%; transition: filter 700ms ease, transform 900ms var(--ease); }
.archive-card:hover img { filter: brightness(0.82) saturate(0.9); transform: scale(1.022); }
.archive-card:hover .media-action, .archive-card a:focus-visible .media-action { opacity: 1; transform: translateY(0); }
.archive-card > a > div { padding-top: 20px; }
.archive-card > a > div > span, .archive-card p { color: #706c65; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.archive-card h3 { font-family: var(--serif); font-size: clamp(34px, 4vw, 64px); font-weight: 300; letter-spacing: -0.04em; line-height: 0.95; margin: 16px 0; }
.source-link { margin-top: 90px; }

.case-hero { min-height: 100vh; overflow: hidden; padding: 118px var(--page) 56px; }
.case-kicker { display: flex; justify-content: space-between; margin-bottom: 70px; }
.case-kicker p:last-child { color: var(--muted); }
.case-hero h1 { font-size: clamp(78px, 10.2vw, 176px); line-height: 0.8; position: relative; z-index: 2; }
.case-hero h1 span:last-child { margin-left: 14vw; }
.case-hero-media { margin-left: 32vw; margin-top: -1.5vw; max-height: 52vh; overflow: hidden; position: relative; }
.case-hero-media img { aspect-ratio: 16 / 8; filter: saturate(0.76); }
.case-hero-media.cover-art { background: #050504; max-height: none; }
.case-hero-media.cover-art img { aspect-ratio: auto; height: min(54vh, 640px); object-fit: contain; }
.case-hero-media.portrait-cover { margin-left: 48vw; max-width: 38vw; }
.case-hero-media.portrait-cover img { aspect-ratio: 4 / 5; }
.case-year { bottom: 24px; font-size: 10px; letter-spacing: 0.15em; position: absolute; right: 28px; z-index: 3; }
.case-concept { display: grid; gap: 46px; grid-template-columns: 1fr 2fr 1fr; }
.case-concept-copy > p { font-size: 16px; line-height: 1.75; margin-top: 52px; max-width: 39em; }
.case-meta { align-self: end; }
.case-meta div { border-top: 1px solid var(--line-light); display: grid; gap: 20px; grid-template-columns: 1fr 1.4fr; padding: 17px 0 28px; }
.case-meta dt { color: #77736c; }
.case-meta dd { font-size: 12px; line-height: 1.65; }
.film-heading, .stills-heading, .case-gallery-header { display: grid; gap: 42px; grid-template-columns: 1fr 3fr; margin-bottom: 90px; }
.film-heading h2, .stills-heading h2, .case-gallery-header h2 { grid-column: 2; }
.final-film { aspect-ratio: 16 / 9; background: #000; object-fit: contain; }
.youtube-embed { border: 0; display: block; height: auto; width: 100%; }
.still-wide { overflow: hidden; }
.still-wide img { aspect-ratio: 16 / 8.2; transition: transform 900ms var(--ease); }
.still-wide:hover img { transform: scale(1.02); }
.still-wide figcaption, .still-pair figcaption, .gallery-item figcaption { display: flex; justify-content: space-between; padding: 12px 1px 0; }
.still-wide figcaption span:last-child, .still-pair figcaption span:last-child, .gallery-item figcaption span:last-child { color: #706c65; }
.still-pair { display: grid; gap: clamp(28px, 5vw, 86px); grid-template-columns: 4fr 5fr; margin-top: 100px; padding: 0 7vw; }
.still-pair figure:first-child { margin-top: 140px; }
.still-pair figure { overflow: hidden; }
.still-pair img { aspect-ratio: 4 / 3; transition: transform 900ms var(--ease); }
.still-pair figure:hover img { transform: scale(1.02); }
.approach { padding: 60px var(--page); }
.approach-strip { align-items: center; border-bottom: 1px solid var(--line-dark); border-top: 1px solid var(--line-dark); display: flex; font-family: var(--serif); font-size: clamp(18px, 2vw, 31px); justify-content: space-between; letter-spacing: -0.02em; padding: 28px 0; }
.approach-strip span { color: var(--muted); font-family: var(--sans); }

.gallery-grid { display: grid; gap: clamp(26px, 4vw, 70px); grid-template-columns: repeat(12, 1fr); }
.gallery-item { overflow: hidden; }
.gallery-item img { transition: transform 900ms var(--ease); }
.gallery-item:hover img { transform: scale(1.02); }
.gallery-item.editorial-label figcaption span:first-child { font-family: var(--serif); font-size: clamp(24px, 3vw, 48px); letter-spacing: -0.035em; line-height: 1; text-transform: none; }
.gallery-wide { grid-column: 1 / 10; }
.gallery-wide img { aspect-ratio: 16 / 9; }
.gallery-tall { grid-column: 9 / 13; margin-top: 70px; }
.gallery-tall img { aspect-ratio: 3 / 4.4; }
.gallery-left { grid-column: 1 / 6; margin-top: 30px; }
.gallery-left img { aspect-ratio: 4 / 5; }
.gallery-right { grid-column: 6 / 13; margin-top: 70px; }
.gallery-right img { aspect-ratio: 16 / 10; }
.gallery-center { grid-column: 3 / 11; margin-top: 50px; }
.gallery-center img { aspect-ratio: 16 / 10; }
.gallery-third { grid-column: span 4; margin-top: 50px; }
.gallery-third:nth-of-type(2) { margin-top: 90px; }
.gallery-third img { aspect-ratio: 4 / 5; }
.gallery-duo-balanced { align-items: start; grid-template-columns: repeat(12, 1fr); }
.gallery-duo-balanced .gallery-left { grid-column: 1 / 7; margin-top: 0; }
.gallery-duo-balanced .gallery-right { grid-column: 7 / 13; margin-top: 90px; }
.selected-final-still { margin-top: 82px; }

.case-outcome { padding: 140px var(--page) 70px; }
.case-outcome blockquote { font-family: var(--serif); font-size: clamp(54px, 7.4vw, 128px); letter-spacing: -0.05em; line-height: 0.97; margin: 70px 0 130px; max-width: 11em; }
.project-nav { border-top: 1px solid var(--line-dark); display: grid; gap: 40px; grid-template-columns: 1fr 2fr; padding-top: 28px; }
.project-nav > a:first-child { align-self: end; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; }
.project-nav-next p { color: var(--muted); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; }
.project-nav-next a { display: inline-flex; font-family: var(--serif); font-size: clamp(30px, 4vw, 64px); letter-spacing: -0.03em; margin-top: 12px; }
.project-nav-next a span { color: var(--muted); margin-left: 20px; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 800ms ease, transform 800ms var(--ease); }
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 180ms; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.digital-teaser, .guided-demo, .motion-studies, .try-beta { padding: 150px var(--page); }
.digital-teaser-grid { align-items: center; display: grid; gap: clamp(48px, 8vw, 140px); grid-template-columns: 7fr 5fr; }
.digital-teaser-media { display: block; overflow: hidden; position: relative; }
.digital-teaser-media img { aspect-ratio: 4 / 5; filter: saturate(0.78); transition: filter 700ms ease, transform 900ms var(--ease); }
.digital-teaser-media:hover img { filter: brightness(0.78) saturate(0.9); transform: scale(1.022); }
.digital-teaser-media:hover .media-action, .digital-teaser-media:focus-visible .media-action { opacity: 1; transform: translateY(0); }
.digital-teaser-copy h3 { font-family: var(--serif); font-size: clamp(46px, 5.5vw, 92px); font-weight: 300; letter-spacing: -0.05em; line-height: 0.92; margin: 26px 0 34px; }
.digital-teaser-copy > p:not(.project-index) { color: var(--muted); line-height: 1.75; margin-bottom: 42px; max-width: 34em; }
.digital-category-cover img { object-position: center 55%; }
.digital-case-hero h1 { font-size: clamp(66px, 8.8vw, 150px); }
.guided-demo-primary { padding-top: 126px; }
.interactive-project-intro { display: grid; gap: 34px; grid-template-columns: 1fr 3fr; margin-bottom: 64px; }
.interactive-project-intro h1 { font-family: var(--serif); font-size: clamp(62px, 8vw, 136px); font-weight: 300; grid-column: 2; letter-spacing: -0.06em; line-height: 0.82; }
.interactive-project-intro h1 span { display: block; }
.interactive-project-intro h1 span:last-child { margin-left: 8vw; }
.interactive-project-intro > p:last-child { color: var(--muted); grid-column: 2; line-height: 1.75; max-width: 42em; }
.interactive-heading { align-items: end; display: grid; gap: 50px; grid-template-columns: 1fr 3fr; margin-bottom: 82px; }
.interactive-heading h2 { font-family: var(--serif); font-size: clamp(56px, 6.4vw, 112px); font-weight: 300; letter-spacing: -0.055em; line-height: 0.92; }
.interactive-heading > div > p { color: var(--muted); line-height: 1.75; margin-top: 30px; max-width: 44em; }
.guided-workspace { align-items: start; display: grid; gap: clamp(42px, 6vw, 100px); grid-template-columns: minmax(220px, 3fr) minmax(0, 9fr); }
.demo-controls { border-bottom: 1px solid var(--line-dark); border-top: 1px solid var(--line-dark); display: block; padding: 24px 0 30px; position: sticky; top: 100px; }
.control-group { display: grid; gap: 9px; }
.control-group + .control-group { border-top: 1px solid var(--line-dark); margin-top: 28px; padding-top: 28px; }
.control-group > span, .beta-step-label { color: var(--muted); font-size: 9px; letter-spacing: 0.14em; margin-right: 10px; text-transform: uppercase; }
.control-button, .preset-button, .quiet-button, .generate-button { color: inherit; cursor: pointer; font-family: var(--sans); }
.control-button { background: transparent; border: 1px solid var(--line-dark); color: var(--muted); font-size: 9px; letter-spacing: 0.12em; padding: 13px 14px; text-align: left; text-transform: uppercase; transition: background 300ms ease, border-color 300ms ease, color 300ms ease; width: 100%; }
.control-button:hover, .control-button:focus-visible, .control-button.is-active { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.guided-stage { background: var(--black-soft); height: min(74vh, 840px); min-height: 520px; position: relative; }
.guided-image { height: 100%; inset: 0; object-fit: contain; opacity: 0; position: absolute; transition: opacity 520ms ease; width: 100%; }
.guided-image.is-active { opacity: 1; }
.guided-stage figcaption { bottom: -30px; display: flex; justify-content: space-between; left: 0; position: absolute; right: 0; }
.motion-grid { display: grid; gap: clamp(34px, 6vw, 100px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.motion-card:nth-child(2) { margin-top: 120px; }
.motion-video { aspect-ratio: 4 / 5; background: #000; object-fit: cover; }
.film-player { overflow: hidden; }
.video-play { align-items: center; backdrop-filter: blur(10px); background: rgba(13, 13, 12, 0.74); border: 1px solid rgba(239, 236, 230, 0.68); border-radius: 50%; color: var(--ivory); cursor: pointer; display: flex; font-family: var(--sans); height: 82px; inset: 50% auto auto 50%; justify-content: center; position: absolute; transform: translate(-50%, -50%); transition: opacity 280ms ease, background 280ms ease; width: 82px; z-index: 4; }
.video-play span { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; }
.video-play:hover, .video-play:focus-visible { background: var(--ivory); color: var(--ink); }
.film-player.is-playing .video-play { opacity: 0; pointer-events: none; }
.motion-copy { border-top: 1px solid var(--line-light); margin-top: 18px; padding-top: 18px; }
.motion-copy h3 { font-family: var(--serif); font-size: clamp(34px, 4vw, 64px); font-weight: 300; letter-spacing: -0.04em; line-height: 0.95; margin: 18px 0; }
.motion-copy > p:last-child { color: #706c65; line-height: 1.7; max-width: 34em; }
.beta-layout { display: grid; gap: clamp(46px, 8vw, 130px); grid-template-columns: 5fr 7fr; }
.beta-panel { align-self: start; border-top: 1px solid var(--line-dark); }
.beta-step { border-bottom: 1px solid var(--line-dark); padding: 28px 0 34px; }
.beta-step-label { margin-bottom: 22px; }
.upload-zone { border: 1px dashed rgba(239, 236, 230, 0.34); cursor: pointer; display: block; padding: 42px 26px; transition: background 300ms ease, border-color 300ms ease; }
.upload-zone:hover, .upload-zone:focus-within { background: rgba(239, 236, 230, 0.05); border-color: var(--ivory); }
.upload-title { display: block; font-family: var(--serif); font-size: 27px; letter-spacing: -0.025em; }
.upload-note { color: var(--muted); display: block; font-size: 10px; line-height: 1.6; margin-top: 10px; }
.quiet-button { background: transparent; border: 0; border-bottom: 1px solid currentColor; font-size: 9px; letter-spacing: 0.13em; margin-top: 18px; padding: 0 0 4px; text-transform: uppercase; }
.preset-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preset-button { background: transparent; border: 1px solid var(--line-dark); color: var(--muted); font-size: 9px; letter-spacing: 0.1em; min-height: 56px; padding: 10px; text-transform: uppercase; }
.preset-button:hover, .preset-button:focus-visible, .preset-button.is-active { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.beta-actions { align-items: center; display: flex; gap: 24px; padding-top: 30px; }
.generate-button { background: var(--ivory); border: 1px solid var(--ivory); color: var(--ink); font-size: 10px; letter-spacing: 0.15em; min-width: 146px; padding: 17px 20px; text-transform: uppercase; }
.generate-button:disabled { cursor: not-allowed; opacity: 0.32; }
.beta-actions .quiet-button { margin: 0; }
.beta-status { color: var(--muted); font-size: 11px; line-height: 1.65; min-height: 2em; padding-top: 22px; }
.beta-preview-frame { align-items: center; aspect-ratio: 4 / 5; background: var(--black-soft); display: flex; justify-content: center; max-height: 74vh; overflow: hidden; position: relative; }
.beta-preview-frame > img { height: 100%; object-fit: contain; }
.beta-placeholder { color: var(--muted); font-family: var(--serif); font-size: clamp(30px, 4vw, 58px); letter-spacing: -0.03em; }
.beta-loading { align-items: center; backdrop-filter: blur(8px); background: rgba(13, 13, 12, 0.78); display: flex; flex-direction: column; gap: 20px; inset: 0; justify-content: center; position: absolute; z-index: 3; }
.beta-loading[hidden], .beta-preview-frame > img[hidden], .beta-result-actions[hidden] { display: none; }
.beta-loading p { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; }
.loading-mark { animation: spin 1s linear infinite; border: 1px solid rgba(239, 236, 230, 0.28); border-radius: 50%; border-top-color: var(--ivory); height: 42px; width: 42px; }
.beta-result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
button.button-link { background: transparent; color: inherit; cursor: pointer; font-family: var(--sans); }
.future-action:disabled { cursor: not-allowed; opacity: 0.38; }
.visually-hidden { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .hero-copy { grid-column: 1 / 10; }
  .hero-portrait { grid-column: 7 / 13; opacity: 0.8; }
  .section-intro, .case-concept { grid-template-columns: 1fr 2.5fr; }
  .section-intro > p:last-child, .case-meta { grid-column: 2; }
  .explore-stage { grid-template-columns: 3fr 2fr; }
  .category-hero-media { margin-left: 22vw; }
  .beta-layout { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --page: 22px; }
  .site-header { height: 62px; }
  .site-header nav { gap: 16px; }
  .site-header nav a { font-size: 9px; }
  .hero { display: block; min-height: auto; padding-top: 105px; }
  .hero h1, .case-hero h1, .category-hero h1 { font-size: clamp(58px, 19vw, 92px); }
  .hero h1 span:last-child, .case-hero h1 span:last-child, .category-hero h1 span:last-child { margin-left: 0; }
  .hero-portrait { margin: 62px 0 0 20vw; min-height: 0; }
  .hero-frame, .hero-index { display: none; }
  .hero-actions { flex-wrap: wrap; }
  .explore, .home-projects, .digital-teaser, .guided-demo, .motion-studies, .try-beta, .about, .how-work, .category-projects, .case-concept, .film-section, .stills-section, .case-gallery, .contact, .case-outcome { padding-bottom: 92px; padding-top: 92px; }
  .section-intro, .home-projects-header, .about, .category-intro, .case-concept, .film-heading, .stills-heading, .case-gallery-header, .project-caption, .contact-main, .contact-footer, .project-nav { display: block; }
  .section-intro h2, .home-projects-header h2, .about-copy h2, .category-intro h2, .case-concept-copy h2, .film-heading h2, .stills-heading h2, .case-gallery-header h2 { font-size: clamp(48px, 14.5vw, 72px); margin: 30px 0; }
  .explore-stage { display: block; }
  .explore-preview { aspect-ratio: 16 / 10; margin-top: 50px; position: relative; top: 0; }
  .explore-row { grid-template-columns: 42px 1fr auto; }
  .project-caption > div:last-child { margin-top: 26px; }
  .project-pair, .gallery-grid, .still-pair { display: block; }
  .project-card, .project-card.offset, .gallery-item, .gallery-tall, .gallery-left, .gallery-right, .gallery-center, .gallery-third, .still-pair figure, .still-pair figure:first-child { margin: 0 0 65px; }
  .project-card + .project-card { margin-top: 80px; }
  .about-copy { margin-top: 70px; }
  .about-links { align-items: flex-start; flex-direction: column; }
  .how-header { display: block; margin-bottom: 60px; }
  .how-header h2 { font-size: clamp(48px, 14.5vw, 72px); margin-top: 30px; }
  .principles { margin-left: 0; }
  .principles li { display: block; }
  .principles h3 { margin: 18px 0; }
  .archive-grid { display: block; }
  .archive-card, .archive-card:nth-child(even) { margin: 0 0 78px; }
  .contact-main h2, .contact-cta, .contact-email { display: flex; margin-top: 36px; }
  .contact-footer nav { margin: 28px 0 60px; }
  .contact-footer > p:last-child { justify-self: start; text-align: left; }
  .category-hero, .case-hero { min-height: auto; padding-top: 105px; }
  .category-hero-media, .case-hero-media, .case-hero-media.portrait-cover { margin: 58px 0 0; max-width: none; }
  .case-hero-media.cover-art img { height: auto; }
  .case-concept-copy > p { margin-bottom: 70px; }
  .approach-strip { align-items: flex-start; flex-direction: column; gap: 14px; }
  .approach-strip span { transform: rotate(90deg); }
  .project-nav-next { margin-top: 42px; }
  .digital-teaser-grid, .interactive-heading, .motion-grid, .beta-layout { display: block; }
  .digital-teaser-copy { margin-top: 52px; }
  .interactive-heading > div { margin-top: 30px; }
  .interactive-heading h2 { font-size: clamp(48px, 14.5vw, 72px); }
  .interactive-project-intro { display: block; }
  .interactive-project-intro h1 { font-size: clamp(52px, 17vw, 84px); margin: 30px 0; }
  .interactive-project-intro h1 span:last-child { margin-left: 0; }
  .guided-workspace { display: block; }
  .guided-stage { height: 68vh; min-height: 430px; margin: 44px 0 30px; }
  .demo-controls { display: block; }
  .demo-controls { position: static; }
  .control-group + .control-group { margin-top: 20px; }
  .control-group > span { flex-basis: 100%; margin-bottom: 5px; }
  .motion-card, .motion-card:nth-child(2) { margin: 0 0 74px; }
  .beta-preview { margin-top: 54px; }
  .preset-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .parallax-media img { transform: none !important; }
}