/* Complete Scroll Animation 71. Original geometry and breakpoint are retained;
   typography, palette, text and five unchanged artist-supplied photos are Faten's. */
.component71{--c71-base-100:#fff1f7;--c71-base-200:#e6d9fa;--c71-base-300:#d9468f;--c71-base-400:#21112c;position:relative;font-family:Satoshi,sans-serif;background:var(--c71-base-400);color:var(--c71-base-300)}
.component71 *{box-sizing:border-box}
.component71 :where(.intro,.outro,.spotlight,.spotlight-copy,.spotlight-cards,.card,h1,h3,p){margin:0;padding:0}
.component71 h1,.component71 h3{font-family:Satoshi,sans-serif;font-weight:500;letter-spacing:-.02em;line-height:1.25;max-width:none;text-wrap:initial}
.component71 h1{font-size:clamp(3rem,5vw,7rem)}
.component71 h3{font-size:clamp(1.5rem,3vw,4.5rem)}
.component71 p{font-size:.9rem;line-height:normal;font-weight:400;letter-spacing:normal}
.component71 .intro,.component71 .spotlight,.component71 .outro{position:relative;width:100%;height:100svh;min-height:0;max-height:none;padding:2rem;overflow:hidden}
.component71 .intro,.component71 .outro{display:flex;justify-content:center;align-items:center}
.component71 .spotlight{display:flex;gap:2rem}
.component71 .spotlight-copy,.component71 .spotlight-cards{flex:1}
.component71 .spotlight-copy{display:flex;flex-direction:column;justify-content:center;align-items:center}
.component71 .spotlight-copy p{width:65%;text-align:center;color:var(--c71-base-200)}
.component71 .spotlight-cards{position:relative;perspective:1200px}
.component71 .spotlight-cards .card{position:absolute;top:50%;left:50%;height:70%;aspect-ratio:4/5;padding:2rem;border-radius:1rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:var(--c71-base-100);background-size:cover;background-position:center;will-change:transform;text-decoration:none}
.component71 .spotlight-cards .card::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25);pointer-events:none}
.component71 .spotlight-cards .card h3,.component71 .spotlight-cards .card .card-role{position:relative;z-index:1}
.component71 .spotlight-cards .card .card-role{font-size:.9rem;line-height:1.4;color:var(--c71-base-100);margin-top:.5rem}
.component71 .spotlight-cards .card:focus-visible{outline:3px solid var(--c71-base-100);outline-offset:-6px}
.component71 .spotlight-cards .card:nth-child(1){background-image:url("/assets/optimized/18cef9171d09edf9-960-original.jpeg");z-index:6}
.component71 .spotlight-cards .card:nth-child(2){background-image:url("/assets/optimized/51f4dded9a66ee3f-960-original.jpeg");z-index:5}
.component71 .spotlight-cards .card:nth-child(3){background-image:url("/assets/optimized/265b268addab0e4c-720-original.jpeg");z-index:4}
.component71 .spotlight-cards .card:nth-child(4){background-image:url("/assets/optimized/d203c1c3cbb2f251-960-q86.webp");z-index:3}
.component71 .spotlight-cards .card:nth-child(5){background-image:url("/assets/optimized/b374c7200b0cc52b-960-q86.webp");z-index:2}
@media(max-width:1000px){
  .component71 .spotlight{flex-direction:column;gap:0}
  .component71 .spotlight-cards .card{height:auto;width:70%}
}
/* Readable normal-flow equivalent: every project and original intro/outro remain. */
.component71[data-reduced-motion="true"] .spotlight{height:auto;min-height:100svh;display:block;overflow:visible}
.component71[data-reduced-motion="true"] .spotlight-copy{padding:2rem 0}
.component71[data-reduced-motion="true"] .spotlight-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;perspective:none}
.component71[data-reduced-motion="true"] .spotlight-cards .card{position:relative;top:auto;left:auto;height:auto;width:100%;aspect-ratio:4/5;transform:none!important;will-change:auto}
@media(max-width:1000px){
  .component71[data-reduced-motion="true"] .spotlight-cards{grid-template-columns:1fr}
  .component71[data-reduced-motion="true"] .spotlight-copy p{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .component71 .spotlight{height:auto;min-height:100svh;display:block;overflow:visible}
  .component71 .spotlight-copy{padding:2rem 0}
  .component71 .spotlight-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;perspective:none}
  .component71 .spotlight-cards .card{position:relative;top:auto;left:auto;height:auto;width:100%;aspect-ratio:4/5;transform:none!important;will-change:auto}
}
@media(prefers-reduced-motion:reduce) and (max-width:1000px){
  .component71 .spotlight-cards{grid-template-columns:1fr}
  .component71 .spotlight-copy p{width:100%}
}