
body.about{background:#000} 
.hero,.intro,.shots{--ink:#f5f5f7;--ink2:#86868b;--bg2:#1d1d1f;--line2:#333336;background:#000;color:var(--ink)}


.about .hero{padding:0;overflow:hidden;text-align:center;position:relative}
.hero .t-lead{margin-top:12px;color:var(--ink2);text-wrap:balance} 
.hero .actions{justify-content:center}
.hero .txt{position:relative;z-index:1;padding-top:var(--s-80)}
.hero .stage{display:block;width:auto;max-width:100%;height:clamp(320px,calc((100vh - 330px) * 1.2),500px);height:clamp(320px,calc((100svh - 330px) * 1.2),500px);object-fit:contain;margin:-16px auto 0}
html.js-lit .hero .stage{opacity:0}
html.js-lit .hero.lit .stage{animation:st-lamp var(--stage-lamp-dur) var(--stage-lamp-ease) var(--stage-lamp-delay) both}
@keyframes st-lamp{from{opacity:0}to{opacity:1}}
@media (max-width:734px){
  .hero .txt{padding-top:var(--s-56)}
  .hero .stage{width:88%;height:auto;max-width:none;margin:-24px auto 0} 
  .about .hero{min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h))} 
}

.about .intro{padding:var(--sec-lg) 0;text-align:center}
.intro .eyebrow{font:600 21px/25px var(--font-sans);color:var(--ink);margin-bottom:var(--s-12)}
.intro .t-xxl{max-width:1060px;margin-inline:auto}
.intro .para{max-width:var(--w-text);margin:var(--s-32) auto 0;font:var(--text-lead);letter-spacing:var(--track-lead);color:var(--ink2)}
.intro .para b{color:var(--ink);font-weight:600}
.sweep{padding-block:.14em;margin-block:-.14em;color:transparent;-webkit-background-clip:text;background-clip:text;background-size:300% 100%;background-repeat:no-repeat;background-position:var(--sweep,0%) 0;
  background-image:linear-gradient(90deg,#f5f5f7 0%,#f5f5f7 26%,#7AB4FD 40%,var(--pro) 50%,var(--neu) 60%,#333336 72%,#333336 100%)}

.about .projects{background:#fff;color:var(--ink)}
.bento{display:grid;gap:var(--gap-card);grid-template-columns:repeat(6,minmax(0,1fr));width:min(87.5vw,1120px);margin-left:calc(50% - min(87.5vw,1120px) / 2)}
.bento > article{position:relative;background:var(--bg2);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;isolation:isolate}
.bento .b-wide{grid-column:span 4;min-height:600px}.bento .b-side{grid-column:span 2}.bento .b-third{grid-column:span 2;min-height:520px}
.bento .txt{padding:var(--s-32) var(--s-32) 0}
.bento .pj-meta{font:var(--text-callout);letter-spacing:var(--track-callout);color:var(--ink2)}
.bento h3{margin-top:4px}
.bento .d{margin-top:10px;font:var(--text-body);letter-spacing:var(--track-body);color:var(--ink2);max-width:520px;text-wrap:pretty} 
.bento .pic{margin-top:auto;padding-top:var(--s-32);display:flex;justify-content:center;align-items:flex-end}
.bento .pic img{display:block;width:100%;height:auto}
.bento .b-wide .pic{padding:var(--s-32) 0 0}
.bento .pic video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.bento .pic video.clip-reveal{--rb:var(--r-card)} 
.bento .vid-pp{left:16px;right:auto} 
@media (max-width:1068px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento > *{grid-column:span 1!important;min-height:0!important}.bento .b-wide{grid-column:1 / -1!important}}
@media (max-width:734px){.bento{grid-template-columns:1fr}.bento .txt{padding:var(--s-24) var(--s-24) 0}}

.shot{display:block;width:100%;background:#1d1d1f;border-radius:var(--r-inner);overflow:hidden}
.shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

.about .invite{background:#fff}
@media (max-width:734px){.about .projects,.about .invite{padding-top:calc(var(--nav-h) + var(--s-24))}}
.about .invite{padding-bottom:0;overflow:clip} 
.inv-photo .settle{transform-origin:50% 100%}
.inv{width:min(87.5vw,1120px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"photo side";column-gap:var(--s-40);align-items:end}
.inv-photo{grid-area:photo;align-self:end;justify-self:center;width:100%;max-width:560px}
.inv-photo img{display:block;width:100%;height:auto}
.inv-side{grid-area:side;align-self:center;padding-bottom:var(--sec)}
.inv-areas{display:grid;gap:var(--s-40);margin-top:var(--head-gap)} 
.inv-area{color:var(--ink)} 
.inv-area .lbl{font:var(--text-body);font-weight:600}
.inv-contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-tile)}
.ci{position:relative;display:flex;flex-direction:column;align-items:flex-start;background:#f5f5f7;border-radius:var(--r-inner);padding:var(--s-20)}
.ci .ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;margin-bottom:var(--s-16)}
.ci .ic svg{width:26px;height:26px} 
.ci .ic-tg{background:none;color:var(--ink)}
.ci .ic-tg svg{width:40px;height:40px;fill:currentColor}
.ci .v{display:block;margin-top:2px;font:var(--text-body);font-weight:600;white-space:nowrap}
.ci .vl{display:flex;align-items:center;gap:4px;margin-top:2px}.ci .vl .v{margin-top:0}
.ci .acts{display:flex;flex-wrap:wrap;column-gap:var(--s-20);row-gap:4px;margin-top:auto;padding-top:var(--s-12)}
.ci .cta-line{margin-top:0;font:var(--text-callout);letter-spacing:var(--track-callout)}
.inv .copy{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink2);cursor:pointer}
.inv .copy::before{content:"";position:absolute;inset:-8px}
.inv .copy svg{width:17px;height:17px;flex:none}
.inv .copy.done{color:var(--neu-ink)}
@media (hover:hover){.inv .copy:hover{color:var(--neu-ink);background:#e8e8ed}}
.inv .copy:focus-visible{outline:2px solid var(--neu);outline-offset:0}
.inv .copy .i-done,.inv .copy.done .i-copy{display:none}
.inv .copy.done .i-done{display:block}
.si{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-tile);margin-top:var(--s-20)} 
.si a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:var(--s-16) 4px var(--s-12);border-radius:var(--r-inner);background:#f5f5f7;color:var(--ink);font:var(--text-footnote)}
.si svg{width:24px;height:24px;fill:currentColor}
.si .s-tg{margin-block:1px}.si .s-ig{width:23px;height:23px;margin-block:1.5px}
.si .s-th{width:23px;height:23px;margin-block:1.5px} 
.sn-tg{--bc:var(--pro)}.sn-ig{--bc:#D62976}.sn-th{--bc:currentColor}
.si a{transition:background-color .15s var(--ease),color .15s var(--ease)} 
.si svg{transition:color .15s var(--ease),fill .15s var(--ease)}
@media (hover:hover){
  .si a:hover svg{color:var(--bc)}
  .si a.sn-ig:hover svg{fill:url(#ig-g)}
  .si a:hover{background:#e8e8ed} 
  .si a:hover,.si a:hover svg{transition:none} 
}
.si a:focus-visible{outline:2px solid var(--neu);outline-offset:2px}

@media (max-width:1068px){.inv-contact{grid-template-columns:minmax(0,1fr)}}
@media (max-width:734px){
  .inv{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "contact" "social" "photo";align-items:start}
  .inv-side,.inv-areas{display:contents}
  .inv-h{grid-area:head;margin-bottom:var(--head-gap)}
  .inv-contact{grid-area:contact}
  .inv-social{grid-area:social;margin-top:var(--s-40)}
  .inv-photo{grid-area:photo;max-width:340px;margin-top:var(--s-40)}
  .si{gap:6px}
  .si a{padding:var(--s-12) 0}
  .si span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} 
}

.intro .actions{justify-content:center}
.intro .reel{width:min(87.5vw,1120px);margin:var(--s-64) 0 0 calc(50% - min(87.5vw,1120px) / 2)}
.reel-more{margin-top:var(--s-20);display:flex;flex-direction:column;align-items:center;gap:var(--s-20)}
.reel-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-12) var(--s-32)}
.reel-acts .actions{margin-top:0}
.intro .more{color:var(--neu-ink-dark)} 
@media (max-width:734px){.intro .reel{margin-top:var(--s-40)}.reel-acts{flex-direction:column;gap:var(--s-16)}}

.projects .sec-head{width:min(87.5vw,1120px);margin-left:calc(50% - min(87.5vw,1120px) / 2)}
.bento .vid-pp{left:auto;right:16px} 
.cta-line{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-12);font:var(--text-body);letter-spacing:var(--track-body);color:var(--neu-ink)}
.cta-line svg.ex{width:10px;height:10px;flex:none}
.cta-line svg.ch{width:7px;height:12px;flex:none}
.cta-line .cl-t{border-bottom:1px solid transparent;}
@media (hover:hover){.cta-line:hover .cl-t{border-bottom-color:var(--hover-line)}}
.cta-line:focus{outline:none}.cta-line:focus-visible{outline:2px solid var(--neu);outline-offset:4px;border-radius:4px}
.pj-links{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s-24);row-gap:var(--s-8);margin-top:var(--s-12)}
.pj-links .cta-line{margin-top:0}

.about .shots{overflow-x:clip}
.krows{--fw:clamp(220px,26vw,420px);--rw:calc(7 * var(--fw) + 6 * var(--gap-tile));display:flex;flex-direction:column;align-items:flex-start;gap:var(--gap-tile);
  width:100vw;margin-left:calc(50% - 50vw)}
.krow{display:flex;gap:var(--gap-tile);width:var(--rw);flex:none;margin-left:calc(50% - var(--rw) / 2);--dir:-1;transform:translateX(calc(var(--sp, 0) * var(--dir) * 18vw))}
.krow:nth-child(2){--dir:1}
.krow .shot{flex:0 0 var(--fw);width:var(--fw)}
.krow .shot img{transform:scale(calc(1 + .08 * var(--spa, 0)))}
@media (max-width:734px){.krows{--fw:56vw}.krow{transform:translateX(calc(var(--sp, 0) * var(--dir) * 30vw))}}
@media (prefers-reduced-motion:reduce){.krow,.krow .shot img{transform:none!important}}
