/* Complete supplied WebGL17 structure, scoped to the About opening. */
.component17{position:relative;background:#21112c;color:#f69aca;overflow:hidden;font-family:Satoshi,sans-serif}
.component17 .hero{position:relative;color:#f69aca;overflow:hidden}
.component17 .hero__row{width:100%;height:185vh;position:relative}
.component17 .hero__bg{position:absolute;width:100%;height:100%;object-fit:cover;display:block}
.component17 .hero__twigs{position:absolute;z-index:5;width:100%;height:100%;pointer-events:none}
.component17 .hero__twig{position:absolute;z-index:5;display:block}
/* Keep the source image footprints although Faten's replacement art has a different intrinsic ratio. */
.component17 .hero__twig--left{width:700px;aspect-ratio:2000/2360;bottom:20%;left:0}
.component17 .hero__twig--right{width:800px;aspect-ratio:2466/2751;bottom:10%;right:0}
.component17 .hero__twig--right picture{display:block;width:100%;height:100%}
.component17 .hero__twig img{display:block;width:100%;height:100%;object-fit:cover}
.component17 .hero__twig--left img{object-position:center}
.component17 .hero__twig--right img{object-position:45% 28%}
.component17 .hero__top{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100vh;z-index:10}
.component17 .hero__top h1{font-size:240px;font-weight:400;line-height:.9;letter-spacing:2px;margin:0;max-width:100%;text-shadow:0 2px 30px #21112c66}
.component17 .hero__top p{font-family:Satoshi,sans-serif;text-transform:uppercase;font-size:16px;font-weight:500;letter-spacing:2px;margin:0;color:#fff1f7}
.component17 .hero__content{position:absolute;bottom:0;display:flex;justify-content:center;align-items:center;text-align:center;width:100%;height:125vh;z-index:10}
.component17 .hero__content h2{font-size:48px;text-transform:uppercase;font-weight:400;line-height:1.15;color:#21112c;max-width:1400px;margin:0}
.component17 .hero-canvas{position:absolute;bottom:0;width:100%;height:100%;pointer-events:none;display:block}

/* The source has no phone branch. Typography fit preserves all scene geometry and travel. */
@media(max-width:1000px){
  .component17 .hero__top h1{font-size:clamp(70px,23vw,240px);letter-spacing:-.04em}
  .component17 .hero__top p{font-size:clamp(10px,1.6vw,16px);letter-spacing:1px;padding:0 18px}
  .component17 .hero__content h2{font-size:clamp(23px,4.8vw,48px);max-width:calc(100% - 36px);line-height:1.18}
}
/* Art direction within the unchanged 800px source box; no scene geometry or travel changes. */
@media(max-width:700px){
  .component17 .hero__twig--right picture{position:absolute;top:0;right:0;width:100vw;height:auto}
  .component17 .hero__twig--right img{width:min(100%,400px,calc(1132px - 85.12vh));height:auto;aspect-ratio:2/3;object-fit:contain;object-position:center;margin:0 auto}
  .component17:is([data-component17-state="reduced-motion"],[data-component17-state="fallback"]) .hero__twig--right picture{top:auto;bottom:0}
}

/* Reduced motion and GPU failure both expose the complete artist statement in normal document flow. */
.component17:is([data-component17-state="reduced-motion"],[data-component17-state="fallback"]) .hero__row{height:auto;min-height:0}
.component17:is([data-component17-state="reduced-motion"],[data-component17-state="fallback"]) .hero__bg{height:90vh;min-height:580px}
.component17:is([data-component17-state="reduced-motion"],[data-component17-state="fallback"]) .hero__twigs{height:90vh;min-height:580px}
.component17:is([data-component17-state="reduced-motion"],[data-component17-state="fallback"]) .hero__twig--left{bottom:0}
.component17:is([data-component17-state="reduced-motion"],[data-component17-state="fallback"]) .hero__twig--right{bottom:0}
.component17:is([data-component17-state="reduced-motion"],[data-component17-state="fallback"]) .hero__top{position:relative;height:90vh;min-height:580px}
.component17:is([data-component17-state="reduced-motion"],[data-component17-state="fallback"]) .hero__content{position:relative;height:auto;min-height:45vh;padding:80px 24px;background:#fff1f7}
.component17:is([data-component17-state="reduced-motion"],[data-component17-state="fallback"]) .hero__content h2{opacity:1;max-width:1400px}
.component17:is([data-component17-state="reduced-motion"],[data-component17-state="fallback"]) .hero-canvas{display:none}
@media(prefers-reduced-motion:reduce){
  .component17 .hero__row{height:auto;min-height:0}
  .component17 .hero__bg,.component17 .hero__twigs{height:90vh;min-height:580px}
  .component17 .hero__twig--left,.component17 .hero__twig--right{bottom:0;transform:none!important}
  .component17 .hero__top{position:relative;height:90vh;min-height:580px}
  .component17 .hero__content{position:relative;height:auto;min-height:45vh;padding:80px 24px;background:#fff1f7}
  .component17 .hero__content h2,.component17 .hero__content h2 *{opacity:1!important}
  .component17 .hero-canvas{display:none}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  .component17 .hero__twig--right picture{top:auto;bottom:0}
}