/* Align the artwork inside the film, not its empty left margin, to the Work grid. */
body[data-portfolio-source="home"]{background:#000!important;color:#f4f0f7}
body[data-portfolio-source="home"] #main :is(.framer-109jtsc,.framer-6ersed-container,.framer-m7mkq5-container){display:none!important}
body[data-portfolio-source="home"] #main>[data-framer-root]{padding-top:0!important}
body[data-portfolio-source="home"] #portfolio-header{background:rgba(0,0,0,.94);border-bottom-color:#19131f}
.horned-hero{--work-gutter:40px;--work-left:max(var(--work-gutter),calc((100vw - 1000px)/2));--film-text-inset:.1375;--film-width:min(1600px,calc((100vw - var(--work-left) - var(--work-gutter))/.82));box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);width:100%;margin:0;padding:20px 0 8px;background:#000;overflow:clip;outline:none;font-family:"Open Sans",sans-serif}
.horned-stage{grid-area:1/1;align-self:start;position:relative;width:var(--film-width);margin-left:calc(var(--work-left) - var(--film-width)*var(--film-text-inset));aspect-ratio:16/9;background:#000;overflow:visible;isolation:isolate}
.horned-film{position:static;display:block;width:100%;height:100%;max-width:100%;object-fit:contain;background:#000;transform:none;filter:none}
.horned-details{grid-area:1/1;align-self:start;position:relative;z-index:60;box-sizing:border-box;width:min(1000px,calc(100% - var(--work-gutter)*2));margin:calc(var(--film-width)*.4275 + 24px) 0 0 var(--work-left);padding:0}
.horned-accessible{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.horned-actions{position:relative;z-index:60;display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:12px}
.horned-actions a{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 16px;border:0;border-radius:9px;font:700 16px/1.5 "Oswald",sans-serif;text-decoration:none;transition:background .2s,border-color .2s,box-shadow .2s}
/* Match the Oswald bold typography of the Work section case-study links. */
body[data-portfolio-source="home"] .horned-actions a,body[data-portfolio-source="home"] .horned-actions a span{font-family:var(--editorial)!important;font-weight:700!important;font-style:normal;letter-spacing:0}
.horned-actions svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.horned-actions .horned-primary{min-width:0;background:#814ac8;border-radius:6px;color:#fff;box-shadow:inset 0 0 0 1px #ffffff1a,0 7px 14px -3px #00000021,0 30px 30px -4px #0000000d}
.horned-actions .horned-primary:hover{background:#925bd9;box-shadow:inset 0 0 0 1px #ffffff1a,0 7px 14px -3px #00000021,0 30px 30px -4px #0000000d}
.horned-actions .horned-secondary{min-width:0;background:transparent;border:1px solid #fff;border-radius:6px;color:#f9fafb;box-shadow:none}
.horned-actions .horned-secondary:hover{background:transparent;color:#a975ed;border-color:#a975ed;}
.horned-actions a:focus-visible{outline:2px solid #f4c2c2;outline-offset:5px}
/* Keep the original trail interactive over the full animation frame. */
@media(hover:hover) and (pointer:fine){body[data-portfolio-source="home"] #main .framer-dllr3e-container{display:block!important;position:fixed!important;z-index:40!important;left:var(--hero-trail-left,0px)!important;right:auto!important;top:var(--hero-trail-top,0px)!important;bottom:auto!important;width:var(--hero-trail-width,0px)!important;height:var(--hero-trail-height,0px)!important;visibility:var(--hero-trail-visibility,hidden)!important;pointer-events:auto!important}}
@media(max-width:809px){.horned-hero{padding:24px 0 8px}.horned-actions{gap:12px}}
@media(max-width:480px){.horned-hero{--work-gutter:24px}.horned-actions{display:flex;justify-content:flex-start;gap:10px}.horned-actions a{width:auto;min-width:0;padding:10px 13px}body[data-portfolio-source="home"] #main .framer-1j1cdsy{padding-left:24px!important;padding-right:24px!important}}

@media(prefers-reduced-motion:reduce){.horned-actions a{transition:none}}

/* Medium shares the hero buttons' type scale and compact 46px target. */
body[data-portfolio-source="home"] #main .framer-i93ffy{box-sizing:border-box;width:max-content!important;min-height:46px!important;height:auto!important;padding:10px 16px!important}
body[data-portfolio-source="home"] #main .framer-i93ffy .framer-1bbio0q{height:auto!important;overflow:visible!important}
body[data-portfolio-source="home"] #main .framer-i93ffy .framer-text{font-family:var(--editorial)!important;font-size:16px!important;font-weight:700!important;line-height:24px!important;letter-spacing:0!important;margin:0!important}
@media(max-width:809px){body[data-portfolio-source="home"] #main .framer-vsg2qj{width:100%!important;min-width:0!important;height:auto!important;overflow:visible!important}}
@media(max-width:480px){body[data-portfolio-source="home"] #main .framer-i93ffy{padding:10px 13px!important}}

/* Bring the actions into the text column; retain the full film's height for the orbit. */
@media(max-width:600px){.horned-details{margin-top:calc(var(--film-width)*.5 + 16px)}}

/* Compact the transition into Work while preserving the animation's full bounds. */
body[data-portfolio-source="home"] #main .framer-1j1cdsy{padding-top:24px!important}
@media(max-width:809px){body[data-portfolio-source="home"] #main .framer-1j1cdsy{padding-top:96px!important}}

/* Mobile artwork uses one grid and one preview ratio. */
@media(max-width:809px){
 .horned-hero{--film-width:calc((100vw - var(--work-left))/.8225)}
 body[data-portfolio-source="home"] #work :is(.framer-r46j5k,.framer-181n3gy,.framer-1uhayqa,.framer-6gvndc,.framer-1nj278c,.framer-e905b8){width:100%!important;min-width:0!important;flex-direction:column!important;align-items:stretch!important;gap:24px!important}
 body[data-portfolio-source="home"] #work :is(.framer-r46j5k,.framer-181n3gy,.framer-1uhayqa,.framer-6gvndc,.framer-1nj278c,.framer-e905b8)>div:not(.ssr-variant){width:100%!important;min-width:0!important;flex:none!important;align-self:stretch!important;order:1!important}
 body[data-portfolio-source="home"] #work :is(.framer-r46j5k,.framer-181n3gy,.framer-1uhayqa,.framer-6gvndc,.framer-1nj278c,.framer-e905b8)>.ssr-variant:has(img){width:100%!important;min-width:0!important;order:0!important}
 body[data-portfolio-source="home"] #work :is(.framer-73d1om,.framer-vi818a,.framer-oz9oce,.framer-nj0ntq,.framer-1do4qo6,.framer-109edj5){box-sizing:border-box;width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:4/3!important;padding:0!important;margin:0!important;border-radius:18px!important;overflow:hidden!important}
 body[data-portfolio-source="home"] #work :is(.framer-73d1om,.framer-oz9oce,.framer-1do4qo6,.framer-109edj5) img{object-fit:contain!important;object-position:center!important}
 body[data-portfolio-source="home"] #work :is(.framer-vi818a,.framer-nj0ntq) img{object-fit:cover!important;object-position:center!important}
}

/* Allow the article card and every project description to grow with mobile text. */
@media(max-width:809px){
 body[data-portfolio-source="home"] #main .framer-16uy05c{box-sizing:border-box;grid-column:auto!important;width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;padding:24px!important;overflow:visible!important}
 body[data-portfolio-source="home"] #main .framer-vsg2qj{max-width:100%!important;gap:20px!important}
 body[data-portfolio-source="home"] #main .framer-vsg2qj>.ssr-variant{width:100%!important;min-width:0!important}
 body[data-portfolio-source="home"] #main .framer-1utjp34 .framer-text{font-size:24px!important;line-height:1.25!important;white-space:normal!important;overflow-wrap:anywhere}
 body[data-portfolio-source="home"] #main .framer-i93ffy{max-width:100%!important;flex-shrink:1!important}
 body[data-portfolio-source="home"] #main .framer-i93ffy :is(.framer-1bbio0q,.framer-196kbtd,.framer-1770j3y){min-width:0!important;max-width:100%!important}
 body[data-portfolio-source="home"] #main .framer-i93ffy .framer-text{white-space:normal!important;overflow-wrap:anywhere;text-align:center!important}
 body[data-portfolio-source="home"] #work .ssr-variant{min-width:0!important;max-width:100%!important}
 body[data-portfolio-source="home"] #work [data-framer-component-type="RichTextContainer"]:has(p){width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;white-space:normal!important;overflow:visible!important}
 body[data-portfolio-source="home"] #work p.framer-text{font-size:16px!important;line-height:1.55!important;letter-spacing:0!important;white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important;max-width:100%!important}
}

/* A stacked, full-width article CTA on phones, including hydrated Framer variants. */
@media(max-width:809px){
 body[data-portfolio-source="home"] #main .framer-16uy05c{display:flex!important;align-self:stretch!important;justify-self:stretch!important;padding:24px!important;transform:none!important;opacity:1!important}
 body[data-portfolio-source="home"] #main .framer-16uy05c,body[data-portfolio-source="home"] #main .framer-16uy05c *{box-sizing:border-box!important;min-width:0!important}
 body[data-portfolio-source="home"] #main .framer-vsg2qj{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:16px!important;width:100%!important;height:auto!important;flex:0 1 auto!important}
 body[data-portfolio-source="home"] #main .framer-1utjp34{max-width:100%!important;height:auto!important}
 body[data-portfolio-source="home"] #main .framer-1utjp34 .framer-text{font-size:clamp(24px,6vw,30px)!important;line-height:1.25!important;text-align:left!important;margin:0!important}
 body[data-portfolio-source="home"] #main .framer-i93ffy{display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;min-height:48px!important;height:auto!important;padding:12px 16px!important;align-self:stretch!important}
 body[data-portfolio-source="home"] #main .framer-i93ffy :is(.framer-1bbio0q,.framer-196kbtd,.framer-1770j3y){width:100%!important;height:auto!important;overflow:visible!important;justify-content:center!important}
 body[data-portfolio-source="home"] #main .framer-i93ffy .ssr-variant{max-width:100%!important}
 body[data-portfolio-source="home"] #main .framer-i93ffy .framer-text{display:block!important;width:100%!important;text-align:center!important;white-space:normal!important;line-height:24px!important}
}

/* Keep the articles CTA immediately after the final Visual & UI Designer role. */
body[data-portfolio-source="home"] #main .framer-w2800j>.framer-1rloi7p{order:1!important}
body[data-portfolio-source="home"] #main .framer-w2800j>.framer-bk113m{order:2!important}
body[data-portfolio-source="home"] #main .framer-w2800j>.framer-195t3ye{order:3!important}
body[data-portfolio-source="home"] #main .framer-w2800j>.framer-xq28lg{order:4!important}
body[data-portfolio-source="home"] #main .framer-w2800j>.framer-6ejhwq{order:5!important}
body[data-portfolio-source="home"] #main .framer-w2800j>.framer-16uy05c{order:6!important}
@media(max-width:809px){
 body[data-portfolio-source="home"] #main .framer-16uy05c{padding:20px 12px!important;align-self:stretch!important;justify-content:center!important}
 body[data-portfolio-source="home"] #main .framer-1utjp34 .framer-text{font-size:clamp(20px,4.5vw,24px)!important;word-break:normal!important;overflow-wrap:normal!important}
 body[data-portfolio-source="home"] #main .framer-i93ffy{padding:10px 8px!important}
}

/* A quiet star field behind the film; screen blending reveals only its black backdrop. */
.horned-stars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.horned-stars i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:var(--tint);box-shadow:0 0 6px var(--tint);opacity:.35;animation:hero-star-twinkle var(--duration) ease-in-out var(--delay) infinite alternate;animation-play-state:var(--star-play-state,running)}
.horned-stage .horned-film{position:relative;z-index:1;mix-blend-mode:screen}
@keyframes hero-star-twinkle{0%{opacity:.12;transform:translate3d(0,3px,0) scale(.8)}100%{opacity:.65;transform:translate3d(2px,-3px,0) scale(1.15)}}
@media(max-width:600px){.horned-stars i:nth-child(2n){display:none}}
@media(prefers-reduced-motion:reduce){.horned-stars i{animation:none;opacity:.3}}

/* Denser stars, retaining the original textured film. */
.horned-stars i{box-shadow:0 0 3px var(--tint);opacity:.6}
@keyframes hero-star-twinkle{0%{opacity:.28;transform:translateY(0)}100%{opacity:.9;transform:translateY(-2px)}}
@media(max-width:600px){.horned-stars i:nth-child(2n){display:block}.horned-stars i:nth-child(3n){display:none}}

/* Phone-only composition: portrait above the full animated lettering. */
@media(max-width:809px){
 .horned-hero{padding:12px 0 8px}
 .horned-stage{width:min(100%,480px);margin-inline:auto;aspect-ratio:9/17}
 .horned-film{width:100%;height:100%;object-fit:contain}
}

/* Hide background stars behind every pose of the mobile portrait. */
@media(max-width:809px){
 .horned-stars{-webkit-mask-image:url('/assets/horned-hero/mobile-stars-mask-v9.png');mask-image:url('/assets/horned-hero/mobile-stars-mask-v9.png');-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-mode:alpha}
}

/* Hide background stars behind every pose of the desktop portrait. */
@media(min-width:810px){
 .horned-stars{-webkit-mask-image:url('/assets/horned-hero/desktop-stars-mask-v10.png');mask-image:url('/assets/horned-hero/desktop-stars-mask-v10.png');-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-mode:alpha}
}