:root{
  --bg:#0b0b0c;
  --panel:#121214;
  --text:#f3f1ec;
  --muted:#9b9b9f;
  --line:#2b2b2e;
  --accent:#8fd3ff;
  --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:99;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}
.nav{height:84px;display:flex;align-items:center;justify-content:space-between;max-width:var(--max);padding:0 44px;margin:auto;border-bottom:1px solid var(--line);position:relative;z-index:10}
.brand{font-family:"Space Grotesk";font-weight:700;letter-spacing:-1px;font-size:22px}.brand span{color:var(--accent)}
.nav-links{display:flex;gap:34px;color:#b7b7ba;font-size:14px}.nav-links a:hover{color:white}
.pill{border:1px solid #5a5a5d;border-radius:999px;padding:13px 20px;transition:.25s}.pill:hover{background:var(--accent);border-color:var(--accent);color:#0a0a0a}.pill.small{font-size:13px}
.hero{max-width:var(--max);margin:auto;padding:80px 44px 70px}
.hero-kicker,.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:700;color:var(--accent)}
.hero h1{font-family:"Space Grotesk";font-size:clamp(60px,8.6vw,132px);line-height:.86;letter-spacing:-.065em;margin:28px 0 52px;font-weight:600}
.hero h1 em{font-style:normal;color:#747478}
.hero-bottom{display:grid;grid-template-columns:1fr 1fr;align-items:end;margin-bottom:46px}
.hero-bottom p{max-width:560px;color:#b9b9bd;font-size:18px;line-height:1.65;margin:0}
.scroll-link{justify-self:end;font-size:14px;border-bottom:1px solid #777;padding-bottom:6px}.scroll-link span{margin-left:14px}
.hero-reel{aspect-ratio:16/7.8;background:#171719;position:relative;overflow:hidden;cursor:pointer;border-radius:2px}
.hero-reel img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;filter:saturate(.9) brightness(.75)}
.hero-reel:hover img{transform:scale(1.025)}
.hero-reel-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%)}
.play-btn{width:80px;height:80px;border-radius:50%;border:0;background:var(--accent);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:20px;cursor:pointer}
.reel-label{position:absolute;left:24px;right:24px;bottom:20px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em}
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:17px 0}
.ticker-track{display:flex;width:max-content;gap:28px;align-items:center;font-family:"Space Grotesk";font-size:14px;letter-spacing:.08em;animation:ticker 24s linear infinite}.ticker b{color:var(--accent)}
@keyframes ticker{to{transform:translateX(-50%)}}
.section{max-width:var(--max);margin:auto;padding:120px 44px;border-bottom:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:end;margin-bottom:58px}
.section h2{font-family:"Space Grotesk";font-size:clamp(42px,5vw,76px);letter-spacing:-.05em;line-height:.95;margin:14px 0 0}
.section-intro{color:#a9a9ad;line-height:1.7;margin:0;max-width:520px;justify-self:end}
.filters{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.filter{background:transparent;color:#aaa;border:1px solid #333;border-radius:999px;padding:10px 14px;cursor:pointer}.filter:hover,.filter.active{background:var(--text);color:#111;border-color:var(--text)}
.project-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.project{grid-column:span 6;cursor:pointer;margin-bottom:34px}
.project.shortform{grid-column:span 4}
.thumb{background:#171719;aspect-ratio:16/9;overflow:hidden;position:relative}
.project.shortform .thumb{aspect-ratio:9/14}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease,filter .55s ease;filter:saturate(.85)}
.project:hover .thumb img{transform:scale(1.035);filter:saturate(1)}
.thumb .project-play{position:absolute;right:16px;bottom:16px;width:50px;height:50px;border-radius:50%;background:rgba(10,10,10,.78);display:grid;place-items:center;backdrop-filter:blur(8px)}
.project-meta{display:flex;justify-content:space-between;gap:20px;margin-top:13px;align-items:start}
.project-title{font-family:"Space Grotesk";font-size:18px;font-weight:600}
.project-type{color:#8e8e93;font-size:12px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.show-more{display:block;margin:42px auto 0;padding:13px 20px;border:1px solid #3a3a3d;background:transparent;color:#d7d7d8;border-radius:999px;cursor:pointer}
.show-more:hover{border-color:#777}
.experience-list{border-top:1px solid var(--line)}
.experience-row{display:grid;grid-template-columns:70px 1.2fr 1.6fr .7fr;gap:30px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line)}
.exp-number,.exp-date{font-size:11px;letter-spacing:.12em;color:#777}.exp-date{text-align:right}
.experience-row h3{font-family:"Space Grotesk";font-size:26px;margin:0 0 5px}.experience-row p{margin:0;color:#999}
.exp-description{color:#b7b7ba;line-height:1.55;font-size:14px}
.featured-exp h3{color:var(--accent)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:40px}.about-grid h2{margin:0}.about-grid p{color:#a7a7ab;line-height:1.8;font-size:16px}.about-grid .about-lead{font-size:22px;color:#eee;line-height:1.55;margin-top:0}
.skills{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}.skills span{border:1px solid #38383b;border-radius:999px;padding:9px 12px;color:#b9b9bd;font-size:12px}
.quotes .eyebrow{display:block;margin-bottom:34px}.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.quote-grid blockquote{margin:0;background:var(--panel);padding:40px;min-height:250px;display:flex;flex-direction:column;justify-content:space-between}.quote-grid p{font-family:"Space Grotesk";font-size:26px;line-height:1.35;letter-spacing:-.02em}.quote-grid footer{font-size:12px;color:#8c8c90}
.contact{max-width:var(--max);margin:auto;padding:120px 44px 44px}.contact h2{font-family:"Space Grotesk";font-size:clamp(62px,9vw,138px);line-height:.82;letter-spacing:-.065em;margin:28px 0 55px}.contact-link{font-size:clamp(22px,3vw,40px);border-bottom:1px solid #555;padding-bottom:7px}.contact-link span{color:var(--accent)}.contact-bottom{margin-top:110px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#777;font-size:10px;letter-spacing:.12em}
.modal{position:fixed;inset:0;z-index:1000;display:none}.modal.open{display:block}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(12px)}.modal-content{position:absolute;width:min(1120px,90vw);left:50%;top:50%;transform:translate(-50%,-50%)}.modal-close{position:absolute;right:0;top:-52px;background:transparent;border:0;color:white;font-size:38px;cursor:pointer}.video-frame{aspect-ratio:16/9;background:#000}.video-frame iframe{width:100%;height:100%;border:0}
@media(max-width:800px){
  .nav{padding:0 20px;height:70px}.nav-links{display:none}.pill.small{padding:10px 13px}
  .hero,.section,.contact{padding-left:20px;padding-right:20px}
  .hero{padding-top:60px}.hero h1{margin-bottom:35px}.hero-bottom{grid-template-columns:1fr;gap:26px}.scroll-link{justify-self:start}
  .hero-reel{aspect-ratio:16/10}.play-btn{width:62px;height:62px}
  .section{padding-top:90px;padding-bottom:90px}.section-head,.about-grid{grid-template-columns:1fr;gap:34px}.section-intro{justify-self:start}
  .filters{justify-content:flex-start}
  .project,.project.shortform{grid-column:span 12}.project.shortform .thumb{aspect-ratio:9/12}
  .experience-row{grid-template-columns:38px 1fr;gap:16px}.exp-description{grid-column:2}.exp-date{grid-column:2;text-align:left}
  .quote-grid{grid-template-columns:1fr}.quote-grid blockquote{min-height:220px}
  .contact-bottom{gap:20px;flex-direction:column}.contact{padding-top:90px}
}

.contact-links{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.contact-links .contact-link{display:inline-block}
@media(max-width:800px){
  .contact-links{gap:14px}
  .contact-links .contact-link{font-size:clamp(20px,6vw,30px);word-break:break-word}
}

@media(max-width:1100px) and (min-width:801px){
  .quote-grid{grid-template-columns:1fr 1fr}
  .quote-grid blockquote:last-child{grid-column:1 / -1}
}