:root { --paper:#f6f7f8;--ink:#101214;--accent:#5749d4;--accent-light:#665ad3;--accent-dark:#3726ca;--serif:"Source Serif 4",Georgia,serif;--sans:"Poppins",Arial,sans-serif;--gutter:11.23vw;--gallery-progress:0;color-scheme:light; }
* {box-sizing:border-box} body {margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans)} h1,h2,h3,p,ul,ol {margin:0} button,a {-webkit-tap-highlight-color:transparent} button {font:inherit;cursor:pointer} a {color:inherit;text-underline-offset:5px} button:focus-visible,a:focus-visible {outline:3px solid var(--accent);outline-offset:5px} ::selection {background:var(--accent);color:white}
.hero {position:relative;height:61.46vw;max-height:1200px;overflow:hidden}
.hero h1 {position:absolute;left:11.23%;top:15.5%;font-family:var(--serif);font-weight:600;font-size:clamp(2rem,3.7vw,5rem);line-height:1.12;z-index:2;letter-spacing:-.04em}
.hero h1 em {display:block;font-weight:500} .hero h1 span {display:block}
.services {position:absolute;list-style:none;padding:0;left:11.23%;right:22.2%;top:55.74%;font-family:var(--serif);font-size:clamp(2rem,5.2vw,6.5rem);font-weight:600;line-height:1.1}
.services li {border:1px solid var(--ink);padding:.08em .36em .16em}.services li+li{border-top:0}
.hero-photo {position:absolute;right:10.07%;bottom:0;width:40.4%;height:87.67%;object-fit:contain;object-position:bottom;pointer-events:none}
.about {background:var(--ink);color:white;text-align:center;padding:14.5vw var(--gutter) 11vw}
.about h2,.gallery-title {font-family:var(--serif);font-weight:700;font-style:italic;font-size:clamp(2.5rem,5.55vw,6.5rem);line-height:1.12;letter-spacing:-.035em}
.about p {max-width:1193px;margin:1.75rem auto 3.25rem;font-size:clamp(1rem,1.62vw,1.75rem);line-height:1.55;letter-spacing:.02em}
.demoreel {display:flex;align-items:center;justify-content:center;gap:1.1rem;background:var(--accent);color:var(--ink);border:0;width:70%;min-height:120px;aspect-ratio:939/214;margin:auto;font-size:clamp(1rem,1.3vw,1.4rem);transition:filter .2s}
.demoreel:hover{filter:brightness(1.1)}.play-symbol{font-size:1.5em}
.scroll-gallery { position: relative; background: var(--ink); color: var(--paper); }
.gallery-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; outline-offset: -5px; }
.gallery-pin:focus-visible { outline: 2px solid var(--paper); }
.gallery-title { position: absolute; left: 56.2%; top: 24%; z-index: 1; white-space: nowrap; }
.gallery-window { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #697076 var(--ink); }
.gallery-track { position: absolute; top: 13%; left: 0; display: flex; gap: clamp(20px, 4vw, 70px); width: max-content; list-style: none; padding: 0 8vw; margin: 0; }
.gallery-card { position: relative; flex: 0 0 auto; width: min(70vw, 41.62vh, 563px); width: min(70vw, 41.62svh, 563px); aspect-ratio: 563 / 1001; background: var(--block); color: var(--ink); scroll-snap-align: center; }
.gallery-card:nth-child(2) { background: #bdc1c4; }
.gallery-card:nth-child(3) { background: #90999f; }
.gallery-card:nth-child(4) { background: #e6e7e8; }
.gallery-card span { position: absolute; left: 1.25rem; bottom: 1.1rem; font-size: .875rem; letter-spacing: .1em; }
.gallery-footer { position: absolute; left: var(--gutter); right: var(--gutter); bottom: max(4.5%, env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1rem; pointer-events: none; }
.gallery-footer p { font-size: .875rem; color: #c3c6c9; }
.scroll-label { display: none; }
.scroll-mark { display: none; margin-left: .8rem; }
.gallery-status { display: flex; align-items: center; gap: 1.1rem; }
.card-count { font-size: .8125rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: #c3c6c9; }
.progress-track { display: block; width: clamp(40px, 7vw, 110px); height: 2px; background: #43484c; overflow: hidden; }
.progress-fill { display: block; width: 100%; height: 100%; background: var(--paper); transform: scaleX(var(--gallery-progress)); transform-origin: left; }
.end-space { height: 16vh; height: 16svh; }
.scroll-driven .gallery-pin { position: sticky; top: 0; touch-action: pan-y; }
.scroll-driven .gallery-window { overflow: hidden; }
.scroll-driven .gallery-track { padding: 0; transform: translate3d(90vw, 0, 0); will-change: transform; }
.scroll-driven .gallery-title { will-change: transform, opacity; }
.scroll-driven .scroll-label, .scroll-driven .scroll-mark { display: inline; }
.scroll-driven .swipe-label { display: none; }
.manual-gallery .gallery-title { top: 5%; left: var(--gutter); font-size: clamp(2.25rem, 5vw, 4rem); }
.manual-gallery .gallery-track { top: 19%; }
.manual-gallery .gallery-card { width: min(70vw, 33.75svh, 440px); }
.manual-gallery .gallery-window { scroll-snap-type: x proximity; }

.gallery-title {left:50%;top:28%;translate:-50% 0;text-align:center;white-space:nowrap}
.gallery-card,.gallery-card:nth-child(2),.gallery-card:nth-child(3),.gallery-card:nth-child(4){background:var(--accent)}
.manual-gallery .gallery-title{left:50%;translate:-50% 0}
.contact {display:grid;grid-template-columns:30.73% 32.52% 36.75%;min-height:65.27vw;overflow:hidden;position:relative}
.contact-portrait {position:relative;min-width:0;overflow:hidden}.contact-portrait>a {position:relative;display:block;padding-top:5.5vw;padding-left:clamp(18px,8vw,150px);font-size:clamp(.875rem,1.27vw,1.375rem);text-decoration:none;z-index:1}
.contact-portrait img {position:absolute;width:150%;height:94%;object-fit:contain;object-position:bottom;bottom:0;left:-13%;filter:grayscale(1)}
.contact-main {padding:5vw 3vw;border-left:1px solid var(--ink);border-right:1px solid var(--ink);position:relative;z-index:1;background:var(--paper)}
.contact h2{font-family:var(--serif);font-weight:700;font-size:clamp(2.5rem,5.55vw,6.5rem);line-height:.96;letter-spacing:-.05em}
.contact-links{display:grid;gap:1rem;margin-top:3rem}.contact-links a,.contact-links button{display:block;background:black;color:var(--paper);padding:1rem .5rem;font-size:clamp(.875rem,1.15vw,1.375rem);text-align:center;text-decoration:none;overflow-wrap:anywhere;border:0}.contact-links button:disabled {cursor:default;background:#34383b;color:#d8dadd}
.social{align-self:end;background:#000;color:var(--paper);padding:5vw 4vw;min-height:30vw}.social h3{font-family:var(--serif);font-size:clamp(2rem,3.47vw,4rem);font-style:italic;font-weight:600;margin-bottom:1.5rem}.social a{font-size:clamp(1rem,1.27vw,1.375rem);text-decoration:none}.social a:hover{text-decoration:underline}
dialog {border:1px solid #363a3d;padding:0;width:min(1050px,94vw);max-width:94vw;background:var(--ink);color:white;max-height:90dvh;box-shadow:0 30px 100px #0008}dialog::backdrop {background:#000c;backdrop-filter:blur(5px)}.video-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;gap:15px}.video-header h2{font-size:1rem;font-family:var(--sans);font-weight:400}.close-video{width:44px;height:44px;flex-shrink:0;border:0;background:transparent;color:white;font-size:2rem;line-height:1}.video-container{position:relative;aspect-ratio:16/9;background:#000;display:grid;place-items:center}.video-container iframe{width:100%;height:100%;position:absolute;inset:0;border:0}.video-empty{padding:2rem;text-align:center;color:#d9d9d9}.modal-open{overflow:hidden}
@media(max-width:700px){
:root{--gutter:6.15vw}.hero{height:760px;height:105svh;min-height:600px;max-height:850px}.hero h1{left:var(--gutter);top:9%;font-size:clamp(2rem,7.8vw,3.5rem)}.hero-photo{right:-7%;width:81%;height:69%;z-index:1}.services{left:var(--gutter);right:var(--gutter);top:43%;font-size:clamp(1.625rem,6.8vw,2.75rem);z-index:2}.services li{padding:.18em .25em;background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 49%,transparent 49%);padding-right:0}.hero-photo{z-index:3}.hero h1{z-index:4}.services{top:46%;}.about{padding:100px var(--gutter) 90px}.about h2,.gallery-title{font-size:clamp(2.2rem,9.5vw,3.25rem)}.about p{margin:1.75rem auto 2.5rem;line-height:1.7}.demoreel{width:100%;min-height:120px}.gallery-title{top:29%;max-width:88%;white-space:normal;width:88%}.gallery-track{top:15%;gap:24px}.gallery-card{width:min(72vw,38.25svh)}.gallery-footer{bottom:max(6%,env(safe-area-inset-bottom,0px))}.gallery-status{gap:.7rem}.progress-track{width:42px}
/* Stack the home contact blocks on phones. */
.contact{grid-template-columns:minmax(0,1fr);min-height:0}
.contact-portrait{height:420px;height:clamp(340px,105vw,480px)}
.contact-portrait>a{padding:24px var(--gutter) 0;font-size:1rem;overflow-wrap:anywhere}
.contact-portrait img{width:100%;height:88%;left:0;object-fit:contain;object-position:bottom center}
.contact-main{padding:40px var(--gutter);border:0;border-top:1px solid var(--ink);min-height:0;min-width:0}
.contact h2{font-size:clamp(2.75rem,12vw,4.5rem);line-height:1.02;overflow-wrap:anywhere}
.contact-links{margin-top:2rem;gap:12px}
.contact-links a,.contact-links button{font-size:1rem;padding:16px 12px;min-height:48px;line-height:1.45}
.social{grid-column:auto;min-width:0;padding:36px var(--gutter);min-height:0;align-self:stretch}
.social h3{font-size:2.25rem;line-height:1.1;overflow-wrap:anywhere;margin-bottom:1rem}
.social a{font-size:1rem;overflow-wrap:anywhere}
.video-header{padding:8px 12px}.video-header h2{font-size:.875rem}
}
@media(max-height:500px) and (orientation:landscape){.gallery-track{top:8%}.gallery-card{width:39svh}.gallery-title{top:24%;font-size:16svh}.gallery-footer{bottom:5%}}
@media(prefers-reduced-motion:reduce){.demoreel{transition:none}}

@media(max-width:700px){.hero-photo{right:2%;width:78%;height:54%}.services{top:27%;z-index:2}.services li{background:transparent}.hero h1{top:8%}}

/* Shared navigation and violet interaction palette. */
html{scroll-padding-top:90px}body{isolation:isolate}.site-nav{position:fixed;top:clamp(16px,3vw,48px);right:var(--gutter);display:flex;gap:4px;z-index:50;padding:5px;background:rgba(16,18,20,.94);border:1px solid #535e6a;box-shadow:0 5px 24px #0002;backdrop-filter:blur(14px)}.site-nav a{font-size:14px;min-height:40px;display:flex;align-items:center;justify-content:center;padding:9px 18px;color:var(--paper);text-decoration:none;transition:background .2s}.site-nav a:hover,.site-nav a[aria-current=page]{background:var(--accent)}.site-nav a:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.home-page .hero{position:sticky;top:var(--hero-top,0);z-index:0;background:var(--paper)}.home-page .about,.home-page .scroll-gallery,.home-page .contact{position:relative;z-index:2}.home-page .contact{background:var(--paper)}.home-page .about{box-shadow:0 -20px 70px #0002}
.services li{padding:0;transition:background .2s,color .2s}.services li a{display:block;padding:.08em .36em .16em;text-decoration:none;transition:background .2s,color .2s}.services li:hover,.services li:focus-within{background:var(--accent);color:#fff}.services li a:focus-visible{outline-offset:-4px}.hero h1 span{transition:color .2s}.hero h1 span:hover{color:var(--accent)}.hero-photo{pointer-events:none}
.demoreel,.gallery-card{color:white}.demoreel:hover{filter:none;background:var(--accent-dark)}.contact-links a:hover,.primary-link:hover{background:var(--accent);color:white}.social a:hover,.contact-portrait>a:hover,.footer-email:hover,.text-link:hover{color:var(--accent-light)}.close-video:hover{background:var(--accent)}.gallery-card{background:var(--accent)}.pending-video{position:absolute;left:20px;right:20px;top:50%;text-align:center;translate:0 -50%;font-size:14px;color:#fff}.gallery-card span{color:#fff}.gallery-card:nth-child(5){background:var(--accent)}
.inner-page{background:var(--paper)}.biography{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);min-height:100svh;padding:145px var(--gutter) 70px;gap:4vw}.bio-image{align-self:end;background:#dadee2;overflow:hidden;line-height:0}.bio-image img{width:100%;height:auto;display:block}.bio-copy{align-self:center;padding:35px 0}.eyebrow{font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.5rem}.bio-copy h1,.projects-heading h1{font-family:var(--serif);font-size:clamp(2.8rem,4.8vw,6rem);line-height:1.07;letter-spacing:-.045em;margin-bottom:2rem;font-weight:600}.bio-copy h1 em{color:var(--accent)}.bio-copy>p:not(.eyebrow){font-size:clamp(1rem,1.2vw,1.3rem);line-height:1.8;max-width:570px;margin-bottom:1.25rem}.text-link{display:inline-block;margin-top:1rem;font-size:16px}.expertise{padding:90px var(--gutter);background:var(--ink);color:var(--paper)}.expertise h2{font-family:var(--serif);font-style:italic;font-size:clamp(2.5rem,4.5vw,5rem);font-weight:600;margin-bottom:3rem}.expertise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.expertise article{border-top:1px solid #535e6a;padding-top:24px}.expertise article>span{font-size:14px;color:#bdc4cc}.expertise h3{font-family:var(--serif);font-size:clamp(1.8rem,2.5vw,3rem);font-weight:600;margin:20px 0 12px}.expertise p{font-size:16px;line-height:1.7;color:#dadee2}.page-footer{padding:70px var(--gutter);display:flex;gap:22px;align-items:center;flex-wrap:wrap;background:var(--paper);color:var(--ink)}.page-footer>p{font-family:var(--serif);font-size:clamp(1.8rem,3vw,3rem);flex:1 1 280px}.primary-link{background:var(--ink);color:white;padding:16px 22px;font-size:16px;text-decoration:none;transition:background .2s}.footer-email{font-size:14px;flex-basis:100%;overflow-wrap:anywhere}
.projects-page{background:var(--ink);color:var(--paper)}.projects-main{padding:155px var(--gutter) 100px}.projects-heading{margin-bottom:70px}.projects-heading h1{font-size:clamp(3.25rem,7vw,8rem)}.projects-heading h1 em{color:#a49af0}.projects-heading>p:last-child{font-size:clamp(1rem,1.3vw,1.4rem);color:#bdc4cc;line-height:1.7}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px 30px}.project-item:nth-child(3n+2){margin-top:65px}.project-cover{position:relative;aspect-ratio:9/16;background:var(--accent);overflow:hidden}.project-item:nth-child(2n) .project-cover{background:var(--accent-dark)}.project-number{position:absolute;bottom:20px;left:20px;color:#fff;font-size:14px}.project-item h2{font-family:var(--serif);font-size:1.65rem;font-weight:600;margin-top:15px}.project-play{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;color:white;font-size:18px;display:grid;place-items:center}.project-play:hover{background:#3726ca55}.project-play:focus-visible{outline-offset:-5px}.project-cover img,.gallery-card img{width:100%;height:100%;object-fit:cover}.project-play span{position:static!important;font-size:2rem!important;letter-spacing:0!important;background:#101214b3;width:64px;height:64px;border-radius:50%;display:grid;place-items:center}
@media(max-width:900px){.biography{grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:24px;padding-left:6vw;padding-right:8vw}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-item:nth-child(3n+2){margin-top:0}.project-item:nth-child(2n){margin-top:45px}.expertise-grid{gap:22px}}
@media(max-width:700px){.site-nav{top:max(12px,env(safe-area-inset-top));right:16px;left:auto}.site-nav a{padding:9px 12px;font-size:14px;min-height:40px}.hero h1{top:14%}.services{top:32%}.services li a{padding:.18em .25em}.hero-photo{height:49%}.biography{display:flex;flex-direction:column-reverse;padding:115px var(--gutter) 55px;gap:26px}.bio-copy{padding:0}.bio-copy h1{font-size:clamp(2.5rem,10vw,4rem)}.bio-image{width:100%;max-height:520px;overflow:hidden}.bio-image img{margin-top:-6%;width:100%;height:auto}.expertise{padding:65px var(--gutter)}.expertise-grid{grid-template-columns:1fr;gap:35px}.expertise h2{font-size:2.5rem}.projects-main{padding:125px var(--gutter) 65px}.projects-heading{margin-bottom:45px}.project-grid{gap:35px 18px}.project-item h2{font-size:1.25rem}.project-number{left:12px;bottom:12px}.pending-video{left:10px;right:10px;font-size:14px}.page-footer{padding:50px var(--gutter)}.gallery-card .pending-video{font-size:16px}}
@media(max-width:380px){.project-grid{grid-template-columns:1fr}.project-item:nth-child(2n){margin-top:0}.project-cover{max-height:580px}.site-nav a{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.home-page .hero{position:relative;top:auto}.services li,.services li a,.site-nav a,.hero h1 span,.primary-link{transition:none}}

.youtube-link{display:block;padding:14px 20px;font-size:14px;color:var(--paper);text-align:right}.youtube-link:hover{color:var(--accent-light)}

/* Portrait playback keeps the whole vertical frame visible. */
dialog.portrait-player{width:min(94vw,480px);max-height:96dvh;overflow:auto}.portrait-player .video-header{padding:8px 14px}.portrait-player .video-container{aspect-ratio:9/16;width:min(100%,calc((96dvh - 120px)*9/16));min-width:200px;margin-inline:auto}.portrait-player .youtube-link{padding:10px 14px}.portrait-player .video-header h2{font-size:14px}
.scroll-guide{position:absolute;left:clamp(12px,3vw,52px);top:50%;translate:0 -50%;z-index:5;display:flex;align-items:center;gap:10px;padding:14px 9px;background:#101214dd;pointer-events:none}.scroll-guide p{writing-mode:vertical-rl;font-size:14px;letter-spacing:.05em;white-space:nowrap;color:var(--paper)}.scroll-guide p>span{display:inline-block;margin-top:12px;writing-mode:horizontal-tb}.vertical-progress{display:block;width:3px;height:150px;background:#535e6a;overflow:hidden}.vertical-progress>span{display:block;width:100%;height:100%;background:#a49af0;transform:scaleY(var(--gallery-progress));transform-origin:top}.manual-gallery .scroll-guide{display:none}.category-title{font-family:var(--serif);font-weight:600;font-style:italic;font-size:clamp(2.25rem,4vw,4.5rem);padding-bottom:24px;margin-bottom:32px;border-bottom:1px solid #535e6a}.portfolio-category+.portfolio-category{margin-top:95px}.category-empty{font-size:16px;color:#bdc4cc;line-height:1.7;padding:18px 0 45px}.stories-category{min-height:230px}
@media(max-width:700px){.scroll-guide{left:7px;gap:7px;padding:12px 6px}.vertical-progress{height:125px}.scroll-guide p{font-size:14px}.category-title{margin-bottom:26px}.portfolio-category+.portfolio-category{margin-top:65px}}

/* Keep the gallery heading behind the moving cards. */
.gallery-title{opacity:1;pointer-events:none}
.gallery-window{z-index:2}
.scroll-driven .gallery-title{will-change:color}
.demoreel{position:relative;overflow:hidden}
.demoreel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--presentation-focus,50% 35%)}
.demoreel>span{position:relative;z-index:1}
@media(max-width:700px){
.home-page .contact{display:grid;grid-template-columns:minmax(0,1fr)}
.home-page .contact-portrait,.home-page .contact-main,.home-page .social{grid-column:1;min-width:0}
.home-page .contact-portrait{grid-row:1}
.home-page .contact-main{grid-row:2}
.home-page .social{grid-row:3}
}

.demoreel .presentation-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.demoreel::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0009,transparent 80%);pointer-events:none}
.demoreel>span{z-index:2;text-shadow:0 2px 8px #000}
.demoreel .play-symbol{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#5749d4d9;text-shadow:none}
.video-container>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}