.team-page { --team-stage-height: calc(var(--screen-block) - var(--nav-height)); --stage-height:var(--team-stage-height); }
.team-hero { position:relative; background:linear-gradient(var(--hot-pink) 0 50%,var(--deep-ink) 50%); overflow:clip; }
.team-scene { position:absolute; top:var(--nav-height); height:var(--team-stage-height); left:0; width:100%; overflow:clip; container-type:size; }
.team-layer { --team-u:min(calc(100cqw / 1440),calc(var(--team-stage-height) / 1024)); position:absolute; left:var(--dx); top:var(--dy); width:min(var(--dw),calc(var(--team-stage-height) * var(--dc))); pointer-events:none; }
.team-layer img,.team-layer svg { display:block; width:100%; height:auto; overflow:visible; }
.team-sky,.team-wall,.team-ground { width:var(--dw); }
.team-sky { inset:-5%; width:110%; height:110%; background:var(--hot-pink); }
.team-sky picture { display:none; }
/* One source-unit coordinate system for the seated figure, contact shadow and
   wall. Extra wall tiles extend the background, never stretch the seat plane. */
.team-wall { left:calc(var(--team-u) * -90); top:calc(var(--team-u) * 320); width:calc(100vw + var(--team-u) * 180); height:calc(var(--team-u) * 487.996); background:url('/images/team/desktop-wall.svg') left top / auto 100% repeat-x; }
.team-wall picture { display:none; }
.team-wall::after { content:''; position:absolute; top:calc(100% - 1px); left:0; width:100%; height:100vh; background:var(--purple); }
.team-ryan { left:calc(var(--team-u) * 27.936); top:calc(var(--team-u) * 78.95); width:calc(var(--team-u) * 355.248); }
.team-ryan-shadow { left:calc(var(--team-u) * 85.968); top:calc(var(--team-u) * 416.768); width:calc(var(--team-u) * 206.64); }
.team-ground { top:calc(52% - 35.42cqw); bottom:auto; }
.team-title { z-index:4; }
.team-trees { left:calc(69.55% - var(--team-u) * 1056.38); top:calc(var(--team-u) * 59); width:calc(var(--team-u) * 1579.71); }
.team-trees { z-index:2; }
.team-ground { z-index:1; }
.team-mel,.team-mel-shadow,.team-ryan,.team-ryan-shadow,.team-milo,.team-milo-shadow,.team-ball { z-index:3; }
.team-tree-wind { position:relative; transform-origin:83% 68%; animation:team-tree-sway 8.5s ease-in-out -3s infinite alternate; }
.team-wind-tuft { transform-box:fill-box; transform-origin:50% 100%; animation:team-tuft-sway var(--wind-duration,7s) ease-in-out var(--wind-delay,0s) infinite alternate; }
.team-perched-bird { position:absolute; left:67.22%; top:17.45%; width:9.36%; }
.team-cloud-a > picture,.team-cloud-b > picture,.team-cloud-c > picture { display:block; animation:team-cloud-drift 23s ease-in-out -7s infinite alternate; }
.team-cloud-b > picture { animation-duration:31s; animation-delay:-19s; animation-direction:alternate-reverse; }
.team-cloud-c > picture { animation-duration:37s; animation-delay:-12s; }
.team-pipe-smoke { position:absolute; left:7%; top:52%; width:12%; aspect-ratio:1; pointer-events:none; }
.team-pipe-smoke > span { position:absolute; inset:0; background:var(--cream); mask:url('/images/team/desktop-cloud.svg') center/100% 100% no-repeat; opacity:0; animation:team-pipe-puff 4.8s ease-out infinite; transform-origin:50% 100%; }
.team-pipe-smoke > span:nth-child(2) { animation-delay:1.4s; }
.team-pipe-smoke > span:nth-child(3) { animation-delay:2.9s; }
.team-hero:not(.is-motion-active) :is(.team-cloud-a,.team-cloud-b,.team-cloud-c) > picture,
.team-hero:not(.is-motion-active) .team-pipe-smoke > span,
.team-hero:not(.is-motion-active) :is(.team-tree-wind,.team-wind-tuft) { animation-play-state:paused; }
@keyframes team-tree-sway { from { transform:rotate(-.18deg); } to { transform:rotate(.22deg); } }
@keyframes team-tuft-sway { from { transform:rotate(-.8deg); } to { transform:rotate(1deg); } }
@keyframes team-cloud-drift { from { transform:translateX(-5%); } to { transform:translateX(7%); } }
@keyframes team-pipe-puff { 0% { opacity:0; transform:translate(-40%,-35%) scale(.35); } 10% { opacity:.65; } 65% { opacity:.2; } 90%,100% { opacity:0; transform:translate(-95%,-280%) scale(1.5); } }
.team-cloud-b img { transform:scaleX(-1); }
.team-mobile { display:none; }
.team-bio { color:var(--deep-ink); background:var(--cream); padding:var(--nav-height) 0 0; display:grid; }
.team-bio-mel { background:var(--purple); color:var(--cream); }
.team-bio-milo { background:var(--hot-pink); color:var(--cream); }
.team-bio-stage { min-height:var(--team-stage-height); width:min(74%,80rem); margin-inline:auto; align-self:stretch; display:grid; grid-template-columns:.78fr 1fr; align-content:center; align-items:start; column-gap:clamp(2rem,4.8vw,5.5rem); padding:clamp(1.5rem,4dvh,3rem) 0; padding-bottom:max(clamp(1.5rem,4dvh,3rem),env(safe-area-inset-bottom)); }
.team-badge { margin:0; width:100%; transform:translateY(-.8rem); }
/* Optical centring: the portraits' light headroom makes exact box centring
   read too low. Lift the whole badge/copy composition without changing snaps. */
.team-bio-stage > * { position:relative; top:calc(-1 * clamp(12px,2.4dvh,24px)); }
.team-badge svg { display:block; width:100%; height:auto; overflow:visible; }
.team-copy { font-size:clamp(1rem,min(1.945vw,2.8dvh),1.75rem); line-height:1.3; text-wrap:pretty; }
.team-copy p { margin:0 0 1.3em; }
.team-copy p:last-child { margin-bottom:0; }
.team-bio [data-rig-letter],.team-title [data-rig-letter] { transform-box:fill-box; transform-origin:center; }
.motion-ready .team-page .is-motion-active [data-rig-letter] { animation:letter-float var(--float-duration,7s) ease-in-out var(--float-delay,0s) infinite alternate; }
.motion-ready .team-bio.is-motion-active .team-copy { animation:team-copy-in .65s ease-out both; }
@keyframes team-copy-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.motion-ready .team-page .contact.is-motion-active .contact-hand-anchor { animation:team-hand-in 1.1s cubic-bezier(.2,.7,.2,1) both; }
.motion-ready .team-page .contact.is-motion-active .contact-form > :not(.honeypot):not(input) { animation:team-form-in .65s ease-out .15s both; }
.team-page .contact:focus-within .contact-form > * { animation:none!important; }
@keyframes team-hand-in { from { transform:translateY(100vh); } to { transform:none; } }
@keyframes team-form-in { from { opacity:0; } to { opacity:1; } }
@media (max-width:1100px) and (orientation:portrait) {
  .team-desktop { display:none; }.team-mobile { display:block; }
  .team-layer { --team-u:min(calc(100cqw / 393),calc(var(--team-stage-height) / 852)); left:var(--mx); top:var(--my); width:min(var(--mw),calc(var(--team-stage-height) * var(--mc))); }
  .team-sky { inset:-5%; width:110%; }
  .team-wall,.team-ground { width:var(--mw); }
  .team-wall { left:calc(var(--team-u) * -80.015 - var(--wall-bleed,0px)); top:calc(var(--team-u) * 364.486); width:calc(100vw + var(--team-u) * 160.03); height:calc(var(--team-u) * 282.489); background-image:url('/images/team/mobile-wall.svg'); background-position-x:var(--wall-bleed,0px); }
  .team-ryan { left:calc(var(--team-u) * -26.017); top:calc(var(--team-u) * 203.032); width:calc(var(--team-u) * 221.888); }
  .team-ryan-shadow { left:calc(var(--team-u) * 10.179); top:calc(var(--team-u) * 413.902); width:calc(var(--team-u) * 129.022); }
  .team-ground { left:var(--mx); top:auto; bottom:-2%; }
  .team-trees { left:calc(41.73% - var(--team-u) * 608); top:calc(var(--team-u) * 187); width:calc(var(--team-u) * 1039); }
  .team-perched-bird { left:66.79%; top:17.18%; width:9.5%; }
  .team-ryan,.team-ryan-shadow { z-index:3; }
  .team-cloud-c { z-index:0; }
  .team-trees { z-index:2; }
  .team-ground { z-index:1; }
  .team-mel,.team-mel-shadow,.team-bird { z-index:3; }
  .team-milo,.team-milo-shadow,.team-ball { z-index:4; }
  .team-bio-stage { width:100%; grid-template-columns:1fr; justify-items:center; align-content:center; gap:clamp(1rem,3dvh,2rem); padding:clamp(1rem,3dvh,2rem) 0; padding-bottom:max(clamp(1rem,3dvh,2rem),env(safe-area-inset-bottom)); }
  .team-badge { width:min(80%,calc(var(--team-stage-height) * .4),24rem); transform:none; }
  .team-copy { width:min(78%,27rem); text-align:center; font-size:clamp(1rem,min(4.9vw,2.32dvh),1.25rem); line-height:1.3; }
  .team-copy p { margin-bottom:1.3em; }
}
@media (max-width:1100px) and (orientation:portrait) and (max-height:720px) {
  .team-badge { width:min(66%,calc(var(--team-stage-height) * .38)); }
  .team-bio-stage { gap:1rem; padding:1rem 0; }
  .team-copy { width:86%; font-size:clamp(.9375rem,2.36dvh,1.1rem); line-height:1.25; }
  .team-copy p { margin-bottom:.9em; }
}
@media (min-width:540px) and (max-width:1100px) and (orientation:portrait) {
  /* Keep the authored phone scene together on tablets, extending only the sky. */
  .team-scene { width:calc(var(--team-stage-height) * .4612676); left:50%; transform:translateX(-50%); overflow:visible; }
  .team-wall { --wall-bleed:calc((100vw - 100cqw) / 2); }
  .team-hero { background:linear-gradient(var(--hot-pink) 0 56%,var(--deep-ink) 56%); }
}
@media (orientation:landscape) and (max-height:600px) {
  .team-badge { transform:none; }
  .team-bio-stage { width:86%; grid-template-columns:.6fr 1fr; gap:2rem; padding:1rem 0; }
  .team-copy { font-size:clamp(.9375rem,3.4dvh,1.1rem); line-height:1.25; }
  .team-copy p { margin-bottom:.7em; }
}
@media (min-aspect-ratio:2/1) {
  .team-milo,.team-milo-shadow { left:63%; }
  .team-ball { left:60%; }
}
@media(prefers-reduced-motion:reduce) { .team-page * { animation:none!important; } }