*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:"Neucha",var(--font-body)}

.team{--team-bg:#52B8B1;--team-soft:#7EC6C0;--team-deep:#3F9C96;position:relative;min-height:100vh;overflow:hidden;display:grid;align-content:center;justify-items:center;gap:clamp(1.75rem,4.5vh,3rem);background:var(--team-bg);padding:var(--space-12) clamp(var(--gutter),6vw,7rem);font-family:"Neucha",var(--font-body)}
.team__label{position:absolute;left:var(--space-6);top:var(--space-4);z-index:3;font:600 16px/1 system-ui,sans-serif;color:#fff;opacity:.85}

.team__head{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:var(--space-6);text-align:center}
.team__kicker{margin:0;font-size:clamp(1.75rem,3vw,2.75rem);line-height:1;text-transform:uppercase;letter-spacing:.05em;color:var(--color-white)}
.team__kicker--sub{text-transform:none;letter-spacing:.02em}
.team__title{margin:0;line-height:0}
.team__brush{display:block;height:clamp(4.25rem,7vw,6.5rem);width:auto;max-width:90vw;overflow:visible}
.team__ink{fill:none;stroke:var(--color-white);stroke-width:19;stroke-linecap:round;stroke-linejoin:round}
.team__shadow{fill:none;stroke:var(--color-cream-100);stroke-width:19;stroke-linecap:round;stroke-linejoin:round}

.team__list{position:relative;z-index:2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);width:100%;max-width:72rem;align-items:stretch}
.team__item{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-align:center}
.team__photo{display:block;width:clamp(10rem,14vw,12.5rem);aspect-ratio:1;border-radius:50%;overflow:hidden;margin-bottom:var(--space-3)}
.team__photo img{display:block;width:100%;height:100%;object-fit:cover}
.team__name{font-size:clamp(2rem,2.6vw,2.5rem);line-height:1;color:var(--color-white)}
.team__age{padding:.1em .45em .05em;font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.1;color:var(--color-white);background:var(--color-peach-400);transform:rotate(-2.5deg)}
.team__text{margin-top:var(--space-1);font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.35;color:var(--color-white);text-shadow:0 2px 10px rgba(47,110,106,.55);max-width:19rem}

.team--bubble .team__photo{position:relative;box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.team--bubble .team__photo::after{content:"";position:absolute;left:12%;top:10%;width:34%;height:34%;border-radius:50%;border-top:4px solid rgba(255,255,255,.85);border-left:4px solid rgba(255,255,255,.85);border-right:4px solid transparent;border-bottom:4px solid transparent;transform:rotate(-12deg)}

.team--sticker .team__photo{border:8px solid var(--color-white);box-shadow:-6px 6px 0 var(--team-deep);transform:rotate(var(--r))}

.team--glass .team__item{padding:var(--space-8) var(--space-6);border-radius:var(--space-6);background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.45)}

.team__head,.team__item{opacity:0}
.team--play .team__head{animation:team-in .5s ease-out .1s forwards}
.team--play .team__item{animation:team-rise .6s cubic-bezier(.3,1.2,.5,1) var(--d) forwards}
@keyframes team-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes team-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .team__head,.team__item{opacity:1}
  .team--play .team__head,.team--play .team__item{animation:none}
}
@media (max-width:760px){
.team{padding:5rem var(--gutter) var(--space-6);gap:var(--space-6)}
.team__list{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
.team__item,.team--glass .team__item{display:grid;grid-template-columns:5.5rem minmax(0,1fr);grid-template-areas:"p n" "p a" "p t";column-gap:var(--space-4);row-gap:var(--space-1);align-items:center;text-align:left;padding:var(--space-3) var(--space-4)}
.team__photo{grid-area:p;width:5.5rem;margin:0}
.team__name{grid-area:n;font-size:2rem}
.team__age{grid-area:a;justify-self:start;font-size:1.125rem}
.team__text{grid-area:t;max-width:none;margin-top:0;font-size:1.0625rem;line-height:1.3}
}
