:root { --bg:#080809; --ink:#f3f3f1; --muted:#98989c; --paper:#efefec; --black:#171718; --line:#ffffff20; --pad:clamp(24px,6vw,100px); --body:'Geist',Arial,sans-serif; --serif:'Instrument Serif',Georgia,serif; --ease:cubic-bezier(.16,1,.3,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:112px; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.6 var(--body); -webkit-font-smoothing:antialiased; }
body.modal-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
button:disabled { opacity:.5; cursor:default; }
img,video { display:block; max-width:100%; }
h1,h2,h3,p,figure { margin:0; }
[hidden] { display:none!important; }
::selection { color:#111; background:#d8d8d2; }
.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; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:100; background:white; color:#111; border-radius:10px; padding:15px 22px; }
.skip-link:focus { top:15px; }

/* Identity stays quiet; navigation occupies a single optical surface. */
.site-header { position:fixed; z-index:40; top:28px; left:var(--pad); right:var(--pad); display:flex; align-items:center; gap:25px; height:58px; color:#f6f6f4; transition:color .4s; }
.site-header:before { content:''; position:fixed; top:0; left:0; right:0; height:115px; background:linear-gradient(#080809c0,#08080950 60%,transparent); z-index:-1; pointer-events:none; }
.brand { display:flex; align-items:center; gap:12px; margin-right:auto; padding:8px 0; }
.brand-mark { width:30px; height:30px; }
.brand-name { font-size:17px; letter-spacing:-.7px; font-weight:500; line-height:1.15; }
.brand-name>span { display:block; color:#a5a5ab; font-size:8px; font-weight:400; letter-spacing:.2px; margin-top:6px; }
.desktop-nav { display:flex; align-items:center; gap:4px; padding:5px; background:linear-gradient(145deg,#ffffff20,#ffffff08); border:1px solid #ffffff2b; border-radius:100px; box-shadow:inset 0 1px 0 #ffffff2c,0 10px 40px #0002; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.desktop-nav a { font-size:11px; padding:9px 20px; border-radius:100px; color:#d6d6d9; transition:background .3s,color .3s; }
.desktop-nav a:hover,.desktop-nav a.active { background:#ffffff15; color:white; }
.header-contact { font-size:11px; display:flex; gap:23px; align-items:center; border-bottom:1px solid #ffffff50; padding:11px 0; }
.header-contact>span { font-size:18px; transition:transform .35s var(--ease); }
.header-contact:hover>span { transform:translate(3px,-3px); }
.on-paper .site-header { color:#111; }
.on-paper .site-header:before { background:linear-gradient(#efefecf5,#efefecd0 60%,transparent); }
.on-paper .brand-name>span { color:#646467; }
.on-paper .desktop-nav { background:#eeeeeaad; border-color:#ffffffc4; box-shadow:inset 0 1px 0 #fff,0 8px 30px #0000000a; }
.on-paper .desktop-nav a { color:#48484a; }
.on-paper .desktop-nav a:hover,.on-paper .desktop-nav a.active { background:#fff9; color:#111; }
.on-paper .header-contact { border-color:#0004; }
.menu-toggle { display:none; }
.mobile-nav { position:fixed; z-index:39; left:18px; right:18px; top:87px; padding:18px 25px; background:linear-gradient(145deg,#353537eb,#141416ed); border:1px solid #ffffff38; border-radius:24px; backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); box-shadow:0 25px 55px #0005; }
.mobile-nav a { display:block; padding:12px 0; font-size:24px; font-weight:300; }

/* A spatial gallery opens into a full-screen cinema, using native scrolling. */
.hero { height:100svh; position:relative; }
.motion-on .hero { height:190svh; }
.hero-sticky { height:100svh; min-height:640px; position:sticky; top:0; overflow:clip; isolation:isolate; perspective:1500px; --journey:0; --copy-alpha:1; --immersive-alpha:0; }
.hero-halo { position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 50% 68%,#39393b55,transparent 54%); }
.hero-copy { position:absolute; z-index:6; top:19%; width:100%; padding:0 var(--pad); text-align:center; opacity:var(--copy-alpha); transform:translateY(var(--copy-y,0px)); pointer-events:none; }
.eyebrow { font-size:9px; letter-spacing:1.8px; line-height:1.8; font-weight:400; color:#a8a8ac; }
.hero-copy .eyebrow { font-size:8px; letter-spacing:2.25px; margin-bottom:15px; }
.hero h1 { font-size:clamp(66px,8.2vw,132px); line-height:1; letter-spacing:-.066em; font-weight:350; white-space:nowrap; }
.hero h1 em { font-family:var(--serif); font-size:1.08em; font-weight:400; letter-spacing:-.03em; }
.hero-description { font-size:12px; color:#a6a6ae; font-weight:300; margin-top:24px; }
.spatial-wings { position:absolute; inset:0; perspective:1200px; opacity:var(--wings-alpha,1); pointer-events:none; }
.wing { position:absolute; width:28vw; height:30svh; top:52%; border:1px solid #ffffff28; padding:5px; border-radius:20px; background:linear-gradient(130deg,#ffffff18,#ffffff03); box-shadow:inset 0 1px 1px #ffffff40,0 30px 80px #0007; overflow:hidden; }
.wing img { width:100%; height:100%; object-fit:cover; opacity:.55; filter:saturate(.4); border-radius:14px; }
.wing:after { content:''; position:absolute; inset:0; background:linear-gradient(transparent,#0006); pointer-events:none; }
.wing>span { position:absolute; z-index:1; bottom:18px; left:21px; font-size:6px; letter-spacing:1.8px; color:#ffffffbc; }
.wing-left { left:-6%; transform:translateX(var(--wing-out-left,0px)) rotateY(32deg) rotateZ(-9deg) translateZ(-80px); }
.wing-right { right:-6%; transform:translateX(var(--wing-out-right,0px)) rotateY(-32deg) rotateZ(9deg) translateZ(-80px); }
.cinema-stage { position:absolute; z-index:4; top:var(--frame-top,47svh); left:50%; translate:-50% 0; width:var(--frame-width,64vw); height:var(--frame-height,39svh); border-radius:var(--frame-radius,23px); transform:perspective(1800px) rotateX(var(--frame-tilt,7deg)) rotateY(var(--pointer-tilt,0deg)); transform-origin:center; }
.cinema-glass { position:absolute; inset:0; padding:7px; border:1px solid #ffffff50; border-radius:inherit; background:linear-gradient(145deg,#ffffff29,#ffffff04 50%,#ffffff20); box-shadow:inset 0 1px 2px #ffffff80,0 35px 100px #0008; overflow:hidden; }
.hero-visual { position:absolute; z-index:0; inset:var(--frame-inset,6px); border-radius:max(0px,calc(var(--frame-radius,23px) - 6px)); overflow:hidden; background:#131315; }
.hero-visual>img,.hero-visual>video { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-visual>video { position:absolute; inset:0; opacity:0; transition:opacity .6s; }
.hero-visual>video.playing { opacity:1; }
.hero-shade { position:absolute; z-index:2; inset:0; background:linear-gradient(0deg,#060607b0,transparent 42%,#08080935); pointer-events:none; }
.hero-shade:before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#0009,transparent 90%); opacity:var(--immersive-alpha); }
.cinema-topline { position:absolute; top:25px; left:27px; right:27px; display:flex; justify-content:space-between; gap:20px; font-size:6px; letter-spacing:1.6px; color:#ffffffb3; }
.cinema-topline>span:first-child { display:flex; align-items:center; gap:7px; }
.cinema-topline i { width:3px; height:3px; background:white; border-radius:50%; }
.immersed .cinema-topline { opacity:0; }
.cinema-play { position:absolute; top:50%; left:50%; translate:-50% -50%; width:75px; height:75px; border:1px solid #ffffff80; border-radius:50%; background:radial-gradient(circle at 30% 0%,#ffffff45,#ffffff08 65%); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:inset 0 1px 2px #ffffff80,0 8px 25px #0003; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; transition:scale .4s var(--ease),background .4s,left .3s; }
.cinema-play:hover { scale:1.12; background-color:#ffffff18; }
.cinema-play>span:last-child { font-size:8px; }
.play-triangle { width:11px; height:13px; background:white; clip-path:polygon(0 0,100% 50%,0 100%); margin-left:3px; }
.cinema-caption { position:absolute; left:28px; bottom:25px; display:grid; gap:5px; }
.cinema-caption>span:first-child { font-size:17px; font-weight:350; letter-spacing:-.5px; }
.cinema-caption>span:last-child { color:#ffffffa0; font-size:5px; letter-spacing:1.2px; }
#hero-motion { position:absolute; bottom:24px; right:25px; display:flex; align-items:center; gap:8px; min-width:36px; min-height:36px; justify-content:center; border:1px solid #ffffff40; border-radius:50px; padding:8px 12px; background:#ffffff10; backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); font-size:10px; }
#hero-motion>span { display:none; }
.immersion-copy { position:absolute; z-index:3; top:38%; left:var(--pad); opacity:var(--immersive-alpha); transform:translateY(var(--immersive-y,30px)); pointer-events:none; }
.immersion-copy>p { font-size:8px; letter-spacing:2px; margin-bottom:18px; }
.immersion-copy h2 { font-size:clamp(48px,6vw,95px); font-weight:350; letter-spacing:-.055em; line-height:1.05; }
.immersion-copy h2 em { font-family:var(--serif); font-weight:400; font-size:1.12em; }
.immersed .cinema-play { left:82%; }
.scene-dock { position:absolute; z-index:8; bottom:7.5%; left:50%; translate:-50% 0; opacity:var(--dock-alpha,1); }
.film-selector { display:flex; gap:3px; padding:5px; border:1px solid #ffffff39; border-radius:100px; background:linear-gradient(135deg,#ffffff20,#ffffff06); backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); box-shadow:inset 0 1px 1px #ffffff30,0 12px 30px #0003; }
.film-selector button { display:flex; align-items:center; gap:8px; min-height:38px; padding:8px 15px; border-radius:100px; font-size:10px; white-space:nowrap; color:#d6d6db; transition:color .3s,background .3s; }
.film-selector button>span { color:#88888f; font-size:7px; }
.film-selector button.active { background:linear-gradient(#fff,#e3e3e6); color:#151515; box-shadow:0 1px 8px #0002; }
.hero-bottom { position:absolute; z-index:7; bottom:28px; left:var(--pad); right:var(--pad); display:flex; justify-content:space-between; align-items:flex-end; opacity:var(--bottom-alpha,1); }
.hero-bottom>span { font-size:6px; line-height:1.8; letter-spacing:1px; color:#777780; }
.hero-bottom b { font-weight:400; color:#b6b6bd; }
.scroll-cue { display:flex; align-items:center; gap:12px; font-size:10px; letter-spacing:.3px; color:#b5b5be; }
.scroll-cue i { font-style:normal; font-size:18px; }
.experience-toggle { font-size:8px; display:flex; gap:8px; align-items:center; min-height:36px; padding:5px 0; color:#a1a1aa; }
.motion-symbol { display:flex; height:11px; align-items:center; gap:2px; }
.motion-symbol i { width:1px; height:5px; background:currentColor; }
.motion-symbol i:nth-child(2) { height:10px; }
.chapter-progress { position:absolute; bottom:0; left:0; right:0; height:1px; background:#ffffff0b; z-index:9; }
.chapter-progress i { display:block; width:100%; height:1px; background:#ffffffa0; transform:scaleX(var(--journey)); transform-origin:left; }
.scene-dissolve { position:absolute; inset:0; z-index:1; pointer-events:none; }
.manifesto { padding:140px var(--pad) 120px; text-align:center; }
.manifesto>.eyebrow { font-size:8px; }
.manifesto-statement { font-size:clamp(36px,4.6vw,72px); line-height:1.12; font-weight:350; letter-spacing:-.05em; margin:30px auto 49px; }
.manifesto-statement em { font-family:var(--serif); font-size:1.14em; font-weight:400; color:#b6b6be; }
.manifesto>div { display:flex; justify-content:center; gap:40px; font-size:9px; color:#767681; }

/* Bright editorial space gives the films a different pace. */
.section-pad { padding:110px var(--pad); }
.section-top { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; margin-bottom:45px; }
.section-index { opacity:.5; margin-right:15px; }
.section-aside { text-align:right; font-size:11px; line-height:1.8; color:#85858a; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:35px; margin-bottom:53px; }
h2 { font-size:clamp(44px,5.4vw,84px); line-height:1.05; font-weight:350; letter-spacing:-.05em; }
h2 em,h2>span { font-family:var(--serif); font-size:1.12em; font-weight:400; font-style:italic; letter-spacing:-.02em; color:#a6a6af; }
.section-heading>p { font-size:12px; line-height:1.85; color:#838389; max-width:340px; margin-bottom:4px; }
.work { background:var(--paper); color:var(--black); border-radius:42px 42px 0 0; padding-bottom:95px; position:relative; z-index:2; }
.work .eyebrow { color:#5b5b60; }
.work .section-aside,.work .section-heading>p { color:#7a7a7f; }
.work h2 em { color:#77777d; }
.filter-row { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:42px; }
.filters { display:flex; gap:4px; border-radius:100px; border:1px solid #fff; background:#e3e3dfad; padding:5px; box-shadow:inset 0 1px 0 #fff; }
.filters button { font-size:10px; min-height:38px; padding:9px 18px; border-radius:100px; color:#73737a; transition:background .3s,color .3s; }
.filters button:hover { color:#111; background:#fff7; }
.filters button.active { background:#1a1a1d; color:#fff; box-shadow:0 2px 8px #0002; }
.filters sup { font-size:7px; margin-left:6px; opacity:.5; }
.work-count { font-size:8px; letter-spacing:1px; color:#85858b; white-space:nowrap; }
.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:50px 25px; }
.project-card { min-width:0; position:relative; }
.project-card:first-child { grid-column:1/-1; }
.work-grid:not([data-filter=all]) .project-card:first-child { grid-column:auto; }
.work-grid[data-filter=all] .project-card:nth-child(6) { grid-column:1/-1; }
.project-button { width:100%; display:block; padding:0; text-align:left; }
.project-media { height:clamp(260px,32vw,470px); position:relative; overflow:hidden; border-radius:18px; background:#151518; isolation:isolate; }
.work-grid[data-filter=all] .project-card:first-child .project-media { height:clamp(340px,47vw,640px); }
.project-media>img,.project-media>video { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease),opacity .35s; }
.project-media.portrait>img,.project-media.contain>img,.project-media.portrait>video,.project-media.contain>video { object-fit:contain; }
.project-media.portrait,.project-media.contain { background:radial-gradient(ellipse at 40% 15%,#393940,#17171b 70%); }
.project-media:after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(transparent 65%,#0007); }
.project-button:hover .project-media>img { transform:scale(1.045); }
.project-media>video { position:absolute; inset:0; opacity:0; }
.project-media>video.preview-playing { opacity:1; }
.project-category { position:absolute; z-index:2; top:19px; left:19px; font-size:7px; letter-spacing:.8px; color:#f2f2f5; padding:8px 12px; border-radius:100px; border:1px solid #ffffff42; background:#22222230; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.project-play { position:absolute; z-index:2; bottom:20px; right:20px; width:47px; height:47px; border-radius:50%; border:1px solid #ffffff65; color:white; background:linear-gradient(145deg,#ffffff40,#ffffff08); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 #ffffff45; display:grid; place-items:center; font-size:11px; transition:scale .35s var(--ease); }
.project-button:hover .project-play { scale:1.12; }
.project-number { position:absolute; left:22px; bottom:34px; z-index:2; font-size:7px; letter-spacing:1px; color:#ffffffa8; }
.project-meta { display:flex; align-items:center; justify-content:space-between; padding:21px 1px 0; gap:20px; }
.project-meta h3 { font-size:21px; line-height:1.25; font-weight:450; letter-spacing:-.65px; }
.project-meta p { font-size:10px; margin-top:8px; color:#85858a; }
.project-arrow { font-size:23px; width:34px; text-align:center; transition:transform .35s var(--ease); }
.project-button:hover .project-arrow { transform:translate(3px,-3px); }
.load-more { display:flex; align-items:center; justify-content:center; gap:35px; min-height:51px; padding:13px 24px; border:1px solid #c7c7c4; border-radius:100px; margin:60px auto 0; font-size:11px; transition:background .3s; }
.load-more:hover { background:#fff8; }
.load-more>span { font-size:19px; }
.work-note { color:#8d8d90; font-size:9px; text-align:center; max-width:700px; margin:25px auto 0; line-height:1.9; }

/* Authorship and craft. */
.about { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:10%; padding-top:140px; padding-bottom:135px; }
.about>div { min-width:0; }
.craft-object { height:500px; position:relative; perspective:1000px; overflow:clip; isolation:isolate; }
.craft-object:before { content:''; position:absolute; inset:8%; background:radial-gradient(ellipse,#ffffff0c,transparent 65%); }
.craft-disc { width:300px; height:300px; position:absolute; top:95px; left:50%; border:1px solid #ffffff40; border-radius:50%; background:linear-gradient(140deg,#ffffff30,#ffffff03 35%,#ffffff08 65%,#ffffff20); box-shadow:inset 0 2px 3px #ffffff70,inset 0 -2px 4px #ffffff1a,0 30px 65px #0005; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.disc-back { transform:translateX(-43%) rotateY(-28deg) rotateX(9deg); opacity:.45; top:77px; }
.disc-front { transform:translateX(-60%) rotateY(-28deg) rotateX(9deg); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.disc-front:before { content:''; position:absolute; inset:18px; border-radius:50%; border:1px solid #ffffff16; }
.disc-front>span { font-family:var(--serif); font-style:italic; font-size:90px; letter-spacing:-5px; font-weight:400; background:linear-gradient(145deg,#fff,#777 65%,#ddd); color:transparent; background-clip:text; -webkit-background-clip:text; }
.disc-front>small { font-size:5px; letter-spacing:2px; color:#8d8d95; margin-top:16px; }
.craft-line { position:absolute; height:1px; background:#ffffff1b; left:8%; right:8%; top:425px; }
.craft-caption { position:absolute; top:445px; left:8%; color:#707078; font-size:6px; line-height:1.8; letter-spacing:1.5px; }
.about-copy>.eyebrow { margin-bottom:24px; }
.about h2 { font-size:clamp(38px,3.9vw,65px); margin-bottom:30px; }
.about-copy>p:not(.eyebrow) { font-size:13px; line-height:1.95; color:#90909b; margin-bottom:19px; max-width:530px; font-weight:300; }
.about-copy>p a { color:#dddde2; border-bottom:1px solid #ffffff38; }
.about-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); padding-top:25px; gap:18px; margin:32px 0; }
.about-facts strong { font-size:22px; letter-spacing:-.75px; font-weight:350; display:block; }
.about-facts span { display:block; font-size:6px; letter-spacing:1px; color:#757581; margin-top:8px; }
.text-link { display:inline-flex; align-items:center; gap:27px; font-size:10px; border-bottom:1px solid #ffffff30; padding:10px 0; }
.text-link>span { font-size:19px; }
.services { padding-top:70px; padding-bottom:130px; }
.service-list { border-top:1px solid #ffffff25; }
.service-list details { border-bottom:1px solid #ffffff20; }
.service-list summary { list-style:none; display:flex; align-items:center; gap:28px; padding:29px 0; cursor:pointer; }
.service-list summary::-webkit-details-marker { display:none; }
.service-number { color:#797981; width:23px; font-size:10px; }
.service-list h3 { font-size:clamp(23px,2.8vw,44px); letter-spacing:-1.2px; font-weight:350; }
.service-tags { color:#656570; margin-left:auto; font-size:7px; letter-spacing:.8px; }
.service-plus { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:1px solid #ffffff30; font-size:23px; font-weight:300; transition:transform .4s var(--ease),background .3s; }
.service-list details[open] .service-plus { transform:rotate(45deg); background:#ffffff10; }
.service-detail { display:flex; justify-content:space-between; align-items:flex-start; gap:55px; padding:0 65px 34px 51px; }
.service-detail p { color:#8f8f9a; font-size:12px; line-height:1.95; max-width:630px; }
.service-detail a { color:#d0d0d8; font-size:10px; white-space:nowrap; padding:5px 0; }
.service-detail a span { margin-left:18px; }
.process { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin-top:55px; }
.process>div { border-left:1px solid #ffffff24; padding-left:20px; }
.process span { font-size:8px; letter-spacing:1px; color:#666671; }
.process p { font-size:12px; color:#a1a1aa; line-height:1.9; margin-top:14px; }
.references { background:#101012; padding-top:100px; padding-bottom:100px; }
.small-link { font-size:7px; letter-spacing:.7px; color:#81818e; padding-top:5px; }
.references h2 { font-size:clamp(36px,4.3vw,70px); margin-bottom:52px; }
.quotes { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; }
.quote { padding:0; }
.quote-featured { padding:5px 45px 5px 0; border-right:1px solid #ffffff17; }
.quote-mark { font:75px/.7 var(--serif); color:#5e5e68; }
blockquote { margin:0; font-weight:300; }
.quote-featured blockquote { font-size:clamp(20px,2.3vw,35px); line-height:1.5; letter-spacing:-.5px; margin:15px 0 27px; }
.quote-stack { display:grid; gap:32px; }
.quote-stack .quote+.quote { padding-top:30px; border-top:1px solid #ffffff15; }
.quote-stack blockquote { font-size:14px; line-height:1.85; color:#bfbfc9; }
.quote figcaption { display:flex; align-items:center; gap:11px; margin-top:21px; }
.avatar { width:35px; height:35px; border:1px solid #ffffff25; border-radius:50%; font-size:8px; display:grid; place-items:center; color:#aaaaaf; flex-shrink:0; }
.quote strong { display:block; font-size:10px; font-weight:400; }
.quote small { display:block; font-size:8px; color:#70707c; margin-top:3px; }
.quote-source { margin-left:auto; font-size:6px; color:#666671; white-space:nowrap; }
.reference-note { margin-top:33px; font-size:8px; color:#5e5e68; }
.contact { padding-top:130px; padding-bottom:65px; }
.contact .section-top { margin-bottom:65px; }
.contact-location { font-size:8px; letter-spacing:1px; color:#73737f; }
.contact-location span { margin-left:12px; color:#aaaab5; }
.contact-headline { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.contact h2 { font-size:clamp(64px,8.5vw,135px); line-height:1.05; letter-spacing:-.065em; }
.contact h2>span { display:block; }
.contact-arrow { height:110px; width:110px; display:grid; place-items:center; border-radius:50%; font-size:49px; font-weight:300; background:linear-gradient(140deg,#ffffff30,#ffffff05); border:1px solid #ffffff50; box-shadow:inset 0 1px 3px #ffffff55,0 15px 30px #0003; flex-shrink:0; transition:transform .5s var(--ease),background .5s; }
.contact-headline:hover .contact-arrow { transform:rotate(45deg); background:#ffffff20; }
.contact-bottom { margin-top:65px; padding-top:35px; border-top:1px solid #ffffff25; display:flex; align-items:center; flex-wrap:wrap; gap:30px; }
.contact-bottom p { font-size:12px; line-height:1.85; color:#888895; margin-right:auto; }
.contact-button { display:inline-flex; align-items:center; gap:30px; padding:14px 23px; background:#efeff1; color:#19191c; border-radius:100px; font-size:11px; }
.contact-button>span { font-size:19px; }
.email-row { display:flex; align-items:center; gap:5px; position:relative; font-size:11px; color:#b0b0bc; }
.email-row>a { border-bottom:1px solid #ffffff30; padding:4px 0; }
.email-row button { font-size:21px; width:38px; height:42px; }
.email-row>span { position:absolute; bottom:-20px; right:0; font-size:10px; }
footer { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:40px var(--pad); border-top:1px solid #ffffff0a; }
.footer-name { font-size:13px; letter-spacing:-.4px; }
.footer-name>span { font-size:8px; color:#666672; margin-left:20px; }
footer>div { display:flex; gap:27px; font-size:10px; color:#747480; }
footer a:hover { color:#fff; }
.back-top { font-size:7px; letter-spacing:1px; color:#777782; }

/* The film is the only focus inside the player. */
dialog { color:var(--ink); background:linear-gradient(140deg,#29292dec,#101013f2); border:1px solid #ffffff40; border-radius:26px; width:min(1180px,calc(100% - 44px)); max-height:94svh; padding:0; box-shadow:inset 0 1px 0 #ffffff40,0 40px 100px #0008; backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); }
dialog::backdrop { background:#050506c9; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.dialog-shell { padding:22px; }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 4px 16px; }
.dialog-header>button { display:flex; align-items:center; gap:18px; font-size:8px; letter-spacing:1px; min-height:37px; }
.dialog-header>button>span { height:30px; width:30px; border:1px solid #ffffff30; border-radius:50%; display:grid; place-items:center; font-size:23px; }
.dialog-player { background:#040405; border-radius:14px; overflow:hidden; min-height:120px; }
.dialog-player>video { width:100%; height:min(58svh,640px); object-fit:contain; }
.dialog-player>p { padding:15px; font-size:12px; }
.dialog-player a { text-decoration:underline; }
.dialog-info { display:flex; justify-content:space-between; gap:30px; padding:24px 6px 6px; }
.dialog-info h2 { font-size:31px; letter-spacing:-1px; }
.dialog-info p { font-size:12px; line-height:1.85; color:#a0a0ac; max-width:680px; margin-top:9px; font-weight:300; }
.dialog-info .dialog-credit { font-size:8px; letter-spacing:.3px; color:#cdcdd4; }
.dialog-actions { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:10px; min-width:175px; }
.dialog-actions>button { font-size:8px; letter-spacing:.5px; padding:9px 0; }
.dialog-actions>span { font-size:10px; color:#d0d0db; max-width:260px; overflow-wrap:anywhere; }
.dialog-actions>div { display:flex; align-items:center; gap:17px; font-size:9px; color:#8e8e9a; }
.dialog-actions>div>button { width:36px; height:36px; border:1px solid #ffffff30; border-radius:50%; font-size:19px; color:#eee; }

/* Choreography is progressive enhancement. */
.intro-ready .hero-copy .eyebrow { animation:arrive .9s .1s both; }
.intro-ready .hero h1 { animation:arrive 1.15s .18s both; }
.intro-ready .hero-description { animation:arrive 1s .4s both; }
.intro-ready .cinema-glass { animation:frame-arrive 1.4s .25s both; }
.intro-ready .spatial-wings { animation:arrive 1.4s .5s both; }
.motion-on .scroll-cue i { animation:scroll-nudge 2.5s ease-in-out infinite; }
.motion-on .motion-symbol i { animation:waveform .9s ease-in-out infinite alternate; }
.motion-symbol i:nth-child(2) { animation-delay:-.6s; }
.motion-symbol i:nth-child(3) { animation-delay:-.2s; }
.reveal-ready { transition:opacity .9s,transform 1.1s var(--ease); }
.motion-on .reveal-ready:not(.is-revealed) { opacity:0; transform:translateY(36px); }
.reveal-ready.is-revealed,.motion-paused .reveal-ready { opacity:1; transform:none; }
.project-media { transition:clip-path 1.25s var(--ease),border-radius 1.25s; }
.motion-on .project-card.reveal-ready:not(.is-revealed) .project-media { clip-path:inset(5% 3% 5% 3% round 30px); }
.project-card.is-revealed .project-media { clip-path:inset(0 round 18px); }
.pointer-lit .cinema-glass:after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:radial-gradient(400px circle at var(--light-x) var(--light-y),#ffffff12,transparent 60%); }
@keyframes arrive { from { opacity:0; transform:translateY(25px); filter:blur(5px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes frame-arrive { from { opacity:0; transform:translateY(25px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes scroll-nudge { 0%,100% { translate:0 -3px; opacity:.5; } 50% { translate:0 3px; opacity:1; } }
@keyframes waveform { from { scale:1 .35; } to { scale:1 1; } }
@supports not (backdrop-filter:blur(1px)) { .desktop-nav,.film-selector,.cinema-play,.mobile-nav { background-color:#29292eea; } }

@media (min-width:1600px) { .hero-copy { top:18%; } .section-pad { padding-left:max(var(--pad),calc((100% - 1440px)/2)); padding-right:max(var(--pad),calc((100% - 1440px)/2)); } }
@media (max-width:1050px) {
  .site-header { gap:22px; } .desktop-nav a { padding:9px 14px; } .hero-copy { top:20%; }
  .cinema-topline>span:last-child { display:none; } .cinema-caption>span:first-child { font-size:15px; }
  .about { gap:6%; } .craft-disc { width:260px; height:260px; } .about-facts strong { font-size:19px; }
  .service-tags,.quote-source { display:none; } .service-plus { margin-left:auto; } .service-detail { padding-right:0; gap:30px; }
  .contact-arrow { width:90px; height:90px; } .contact-bottom { gap:25px; } .email-row { margin-left:auto; }
}
@media (max-width:700px) {
  :root { --pad:23px; } html { scroll-padding-top:105px; }
  .site-header { top:19px; height:48px; gap:18px; } .brand { gap:8px; } .brand-mark { width:25px; height:25px; }
  .brand-name { font-size:15px; } .brand-name>span,.desktop-nav { display:none; }
  .header-contact { font-size:10px; gap:12px; margin-left:auto; } .header-contact>span { font-size:16px; }
  .menu-toggle { display:flex; width:36px; height:44px; padding:0 0 0 10px; flex-direction:column; justify-content:center; gap:6px; }
  .menu-toggle>span { width:22px; height:1px; background:currentColor; transition:transform .3s; }
  .menu-toggle[aria-expanded=true]>span:first-child { transform:translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded=true]>span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .hero { height:100svh; } .motion-on .hero { height:160svh; } .hero-sticky { min-height:650px; } .hero-copy { top:20%; padding:0 15px; }
  .hero-copy .eyebrow { font-size:6px; letter-spacing:1.65px; margin-bottom:20px; }
  .hero h1 { font-size:clamp(62px,16vw,95px); line-height:.95; white-space:normal; letter-spacing:-.065em; }
  .hero h1 em { display:block; font-size:1.13em; line-height:.93; margin-top:4px; }
  .hero-description { font-size:10px; line-height:1.9; max-width:260px; margin:22px auto 0; }
  .cinema-stage { top:var(--frame-top,50svh); width:var(--frame-width,82vw); height:var(--frame-height,29svh); }
  .wing { top:54%; width:39vw; height:22svh; border-radius:13px; padding:4px; } .wing img { border-radius:9px; }
  .wing-left { left:-23%; transform:translateX(var(--wing-out-left,0px)) rotateY(28deg) rotateZ(-9deg); }
  .wing-right { right:-23%; transform:translateX(var(--wing-out-right,0px)) rotateY(-28deg) rotateZ(9deg); } .wing>span { display:none; }
  .cinema-glass { padding:5px; } .cinema-topline { top:20px; left:20px; right:20px; font-size:5px; letter-spacing:1px; }
  .cinema-play { width:64px; height:64px; gap:7px; } .cinema-play>span:last-child { font-size:7px; } .play-triangle { width:10px; height:12px; }
  .cinema-caption { left:21px; bottom:21px; } .cinema-caption>span:first-child { font-size:15px; }
  .cinema-caption>span:last-child { font-size:4px; letter-spacing:.75px; }
  #hero-motion { right:18px; bottom:18px; min-width:31px; min-height:31px; padding:5px; font-size:9px; }
  .scene-dock { bottom:12.5%; } .film-selector { padding:4px; }
  .film-selector button { font-size:10px; padding:8px 12px; gap:6px; min-height:38px; } .film-selector button>span { font-size:7px; }
  .hero-bottom { bottom:30px; } .hero-bottom>span { display:none; }
  .scroll-cue { font-size:10px; letter-spacing:.2px; } .experience-toggle { font-size:9px; }
  .immersion-copy { top:35%; } .immersion-copy>p { font-size:6px; letter-spacing:1.5px; margin-bottom:20px; } .immersion-copy h2 { font-size:43px; }
  .immersed .cinema-play { left:50%; top:68%; }
  .manifesto { padding:87px 23px 83px; } .manifesto>.eyebrow { font-size:6px; letter-spacing:1.6px; }
  .manifesto-statement { font-size:35px; margin-top:25px; margin-bottom:34px; }
  .manifesto>div { flex-wrap:wrap; gap:14px 23px; font-size:8px; } .manifesto>div>span:last-child { display:none; }
  .section-pad { padding-top:75px; padding-bottom:75px; } .section-top { margin-bottom:35px; gap:25px; }
  .eyebrow { font-size:7px; letter-spacing:1.3px; } .section-index { margin-right:10px; } .section-aside { font-size:9px; }
  .section-heading { display:block; margin-bottom:35px; } h2 { font-size:52px; } .section-heading>p { font-size:11px; margin-top:25px; }
  .work { border-radius:28px 28px 0 0; } .filter-row { display:block; margin-bottom:30px; }
  .filters { gap:2px; padding:4px; justify-content:space-between; } .filters button { padding:8px 7px; font-size:10px; min-height:40px; white-space:nowrap; }
  .filters sup { font-size:6px; margin-left:3px; } .work-count { display:none; }
  .work-grid { grid-template-columns:minmax(0,1fr); gap:33px; } .project-card:first-child { grid-column:auto; }
  .project-media,.work-grid[data-filter=all] .project-card:first-child .project-media { height:auto; aspect-ratio:1.15; border-radius:14px; }
  .project-media.portrait,.project-card:first-child .project-media.portrait { aspect-ratio:1; }
  .project-category { top:13px; left:13px; font-size:6px; padding:7px 9px; letter-spacing:.4px; }
  .project-play { width:39px; height:39px; right:15px; bottom:15px; font-size:9px; } .project-number { font-size:6px; left:17px; bottom:28px; }
  .project-meta { padding-top:17px; gap:14px; } .project-meta h3 { font-size:20px; letter-spacing:-.65px; } .project-meta p { font-size:8px; line-height:1.8; margin-top:6px; }
  .project-arrow { font-size:22px; } .load-more { font-size:10px; margin-top:40px; gap:25px; } .work-note { font-size:8px; }
  .about { grid-template-columns:minmax(0,1fr); gap:35px; } .craft-object { height:405px; } .craft-disc { top:75px; width:275px; height:275px; }
  .disc-back { top:58px; } .craft-line { top:360px; } .craft-caption { top:377px; font-size:5px; }
  .about h2 { font-size:41px; margin-bottom:27px; } .about-copy>p:not(.eyebrow) { font-size:12px; line-height:1.95; }
  .about-facts { gap:16px; margin-top:27px; } .about-facts strong { font-size:22px; } .about-facts span { font-size:6px; }
  .service-list summary { gap:14px; padding:24px 0; } .service-number { font-size:8px; width:15px; }
  .service-list h3 { font-size:24px; letter-spacing:-.8px; } .service-plus { width:30px; height:30px; font-size:20px; }
  .service-detail { display:block; padding:0 0 27px 29px; } .service-detail p { font-size:11px; } .service-detail a { display:inline-block; margin-top:20px; font-size:10px; }
  .process { gap:15px; margin-top:35px; } .process>div { padding-left:11px; } .process span { font-size:6px; } .process p { font-size:10px; line-height:1.85; margin-top:10px; } .process br { display:none; }
  .references .section-top { display:block; } .small-link { display:inline-block; font-size:6px; margin-top:15px; }
  .references h2 { font-size:41px; margin-bottom:35px; } .quotes { grid-template-columns:minmax(0,1fr); gap:35px; }
  .quote-featured { padding:0 0 32px; border-right:0; border-bottom:1px solid #ffffff1c; } .quote-featured blockquote { font-size:25px; } .quote-stack blockquote { font-size:13px; }
  .contact .section-top { margin-bottom:40px; } .contact-location { font-size:7px; white-space:nowrap; } .contact-location span { margin-left:5px; } .contact .eyebrow { font-size:6px; }
  .contact-headline { gap:10px; } .contact h2 { font-size:clamp(40px,10.5vw,70px); } .contact-arrow { width:55px; height:55px; font-size:28px; }
  .contact-bottom { display:block; margin-top:35px; padding-top:25px; } .contact-bottom p { font-size:11px; margin-bottom:24px; }
  .contact-button { font-size:10px; padding:13px 22px; } .email-row { font-size:11px; width:fit-content; margin:19px 0 0; }
  footer { padding-top:30px; padding-bottom:30px; flex-wrap:wrap; gap:25px; } .footer-name { font-size:12px; } .footer-name>span { margin-left:13px; font-size:7px; }
  footer>div { order:3; width:100%; font-size:9px; gap:27px; } .back-top { font-size:6px; }
  dialog { width:calc(100% - 18px); max-height:96svh; border-radius:20px; } .dialog-shell { padding:13px; }
  .dialog-header { padding:0 2px 10px; } .dialog-header .eyebrow { font-size:6px; } .dialog-header>button { font-size:7px; gap:10px; }
  .dialog-player { border-radius:12px; } .dialog-player>video { height:min(52svh,470px); }
  .dialog-info { display:block; padding:20px 4px 4px; } .dialog-info h2 { font-size:29px; } .dialog-info p { font-size:11px; } .dialog-info .dialog-credit { font-size:7px; }
  .dialog-actions { margin-top:18px; flex-direction:row; align-items:center; flex-wrap:wrap; } .dialog-actions>button { font-size:7px; }
  .dialog-actions>span:empty { display:none; } .dialog-actions>span { order:3; width:100%; max-width:none; } .dialog-actions>div { gap:12px; font-size:8px; }
}
@media (max-width:350px) {
  :root { --pad:19px; } .site-header { gap:13px; } .brand-name { font-size:13px; } .brand-mark { width:22px; }
  .header-contact { font-size:9px; gap:8px; } .hero h1 { font-size:61px; } .hero-description { font-size:9px; }
  .filters button { font-size:9px; padding:8px 5px; } .craft-disc { width:245px; height:245px; }
  .service-list h3 { font-size:21px; } .contact h2 { font-size:36px; } .contact-arrow { width:49px; height:49px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none!important; transition:none!important; } .reveal-ready { opacity:1!important; transform:none!important; } }