/* First-team portraits and RTL carousel. */
#team{background:#f7f7f5;scroll-margin-top:110px}
#team .chapter{margin-bottom:0}
#team .en-ghost{display:none}
#team .chapter__title{font-size:clamp(1.5rem,2.1vw,2rem);line-height:1.5}
#team .chapter__lead{font-size:.85rem;margin-top:6px}
#team .chapter__more{font-size:.95rem;min-height:44px}
#team .squad-frame{position:relative}
#team .team__grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px)/4);gap:24px;overflow-x:auto;overflow-y:hidden;padding:82px 0 8px;scroll-snap-type:x mandatory;scrollbar-width:none;direction:rtl;cursor:grab}
#team .team__grid::-webkit-scrollbar{display:none}
#team .team__card{display:block;position:relative;overflow:visible;isolation:isolate;aspect-ratio:3/4.25;padding:0;background:linear-gradient(165deg,#142d56,#36566a);border-radius:4px;scroll-snap-align:start;color:#fff;box-shadow:none}
#team .team__card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(0deg,#14365c 0%,rgba(20,54,92,.92) 10%,rgba(20,54,92,.45) 30%,transparent 58%);z-index:1}
#team .team__photo{position:absolute;inset:auto 0 0;width:100%;height:calc(100% + 72px);object-fit:cover;object-position:center top;z-index:0;transform:none;transition:none;border-radius:0 0 4px 4px;pointer-events:none;user-select:none}
#team .team__card:hover .team__photo{transform:none}
#team .team__info{position:absolute;inset: auto 20px 22px;display:flex;flex-direction:column-reverse;align-items:flex-start;justify-content:flex-start;gap:12px;padding:0 0 0 38px;background:none;z-index:2;pointer-events:none}
#team .team__name{margin:0;font-size:clamp(1rem,1.55vw,1.4rem);font-style:normal;line-height:1.55;letter-spacing:0;font-weight:800}
#team .team__name small{display:inline;font-size:inherit;font-weight:inherit;color:inherit;margin:0}
#team .team__name small::after{content:" "}
#team .team__num{color:#e3cd8f;font-size:1.5rem;line-height:1}
#team .team__num::after{content:"";display:block;width:22px;height:1px;background:rgba(255,255,255,.7);margin-top:12px}
#team .team__badge,#team .team__ghostnum{display:none}
#team .team__link{position:absolute;inset:0;z-index:3;border-radius:4px;padding:0;background:transparent;font-size:0;color:transparent}
#team .team__link span{display:none}
#team .team__link::after{content:"";position:absolute;left:16px;bottom:24px;width:30px;height:40px;background:url('../brand/crest-color.png') center/contain no-repeat}
#team .team__link:hover{background:transparent}
#team .team__link:focus-visible{outline:3px solid #a8842f;outline-offset:4px}
#team .team__grid:focus-visible{outline:2px solid #a8842f;outline-offset:5px}
#team .squad-arrow{position:absolute;top:58%;z-index:5;width:46px;height:46px;border:1px solid #d8dde1;border-radius:50%;background:#fff;color:#14315c;display:grid;place-items:center;font:24px/1 sans-serif;box-shadow:0 2px 8px #07142812;cursor:pointer;transition:background 160ms}
#team .squad-arrow:hover{background:#eee9dd}
#team .squad-arrow:focus-visible{outline:3px solid #a8842f;outline-offset:3px}
#team .squad-arrow:disabled{opacity:0;pointer-events:none}
#team .squad-arrow--next{left:-23px}
#team .squad-arrow--prev{right:-23px}
#team .squad-status{display:block;text-align:left;margin:12px 0 0;font-size:.8rem;color:#5a6372;font-variant-numeric:tabular-nums}
#team .is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
@media(max-width:1100px){#team .team__grid{grid-auto-columns:calc((100% - 48px)/3)}#team .team__name{font-size:1.15rem}}
@media(max-width:700px){#team .team__grid{grid-auto-columns:80%;gap:16px;padding-top:74px}#team .team__card{aspect-ratio:3/4}#team .team__photo{height:calc(100% + 64px)}#team .team__name{font-size:1.2rem}#team .squad-arrow--next{left:-8px}#team .squad-arrow--prev{right:-8px}#team .chapter__lead{max-width:24ch}#team .team__info{inset-inline:18px}#team .squad-arrow{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){#team *{scroll-behavior:auto!important;transition:none!important}}

#team .team__photo{filter:url(#squad-alpha)}

#team .chapter__row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
#team .chapter__more{white-space:nowrap;width:auto;margin:0}
#team .squad-status{direction:ltr}
@media(max-width:700px){#team .chapter__title{font-size:1.5rem}#team .chapter__more{font-size:.85rem}#team .chapter__lead{max-width:none;font-size:.75rem}}

#team .chapter__row{flex-wrap:nowrap}
#team .chapter__title{width:auto;flex:1;margin:0}
#team .chapter__more{flex:0 0 auto}
#team .chapter{padding-bottom:14px}


/* position code, top-left of the card, like the official team sheet */
#team .team__pos{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--font-num);font-size:1.05rem;font-weight:600;letter-spacing:.14em;line-height:1;color:#e3cd8f;text-decoration:none;border:0;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.55);pointer-events:none}
#team .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#team .team__info{inset:auto 20px 20px;gap:0;padding:0 0 0 44px}
#team .team__name{line-height:1.4}
#team .chapter{padding-bottom:4px}
#team .squad-status{margin-top:8px}
@media(max-width:700px){#team .team__grid{padding-top:68px}#team .team__info{inset:auto 16px 18px}#team .team__pos{top:12px;left:12px;font-size:1rem}}

/* card legibility: stronger code, name sits on a deeper base */
#team .team__pos{font-size:1.25rem;font-weight:700;letter-spacing:.12em;color:#e3cd8f;padding-bottom:8px;border-bottom:2px solid #e3cd8f;top:16px;left:16px}
#team .team__card::after{background:linear-gradient(0deg,#0b1f3a 0%,rgba(11,31,58,.94) 14%,rgba(11,31,58,.6) 32%,transparent 60%)}
#team .team__info{inset:auto 20px 22px}
#team .team__name{text-shadow:0 2px 14px rgba(5,13,28,.7)}
@media(max-width:700px){#team .team__pos{font-size:1.15rem;top:14px;left:14px}#team .team__info{inset:auto 16px 20px}}

/* card refinement: clean code (no rule), name and crest share one baseline */
#team .team__pos{border-bottom:0;padding-bottom:0;font-size:1.35rem;letter-spacing:.1em;top:18px;left:18px;text-shadow:0 2px 10px rgba(5,13,28,.55)}
#team .team__info{inset:auto 20px 20px;padding:0 0 0 46px;min-height:38px;justify-content:center}
#team .team__name{font-size:clamp(1.1rem,1.6vw,1.45rem);line-height:1.3}
#team .team__link::after{left:18px;bottom:20px;width:28px;height:38px}
@media(max-width:700px){#team .team__pos{font-size:1.25rem;top:16px;left:16px}#team .team__info{inset:auto 16px 18px}#team .team__name{font-size:1.25rem}#team .team__link::after{left:16px;bottom:18px}}

/* red trail running round the card edge: hovered card on desktop, centred card on touch */
@property --trail{syntax:'<angle>';initial-value:0deg;inherits:false}
#team .team__grid .team__card::before{content:"";position:absolute;inset:-5px;z-index:0;border-radius:9px;box-shadow:none;padding:5px;background:conic-gradient(from var(--trail),transparent 0 50%,rgba(224,41,58,.45) 62%,#e0293a 80%,#ff3d4f 92%,rgba(255,61,79,0) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .35s ease;pointer-events:none;animation:cardTrail 3.8s linear infinite;animation-play-state:paused}
@keyframes cardTrail{to{--trail:360deg}}
@media (hover:hover){#team .team__grid .team__card:hover::before{opacity:1;animation-play-state:running}}
@media (hover:none){#team .team__grid .team__card.is-current::before{opacity:1;animation-play-state:running}}
@media (prefers-reduced-motion:reduce){#team .team__grid .team__card::before{display:none}}
#team .team__grid .team__card::before{box-shadow:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){#team .team__grid:not(.is-dragging) .team__card:hover{box-shadow:0 14px 22px -14px rgba(7,20,40,.5)}}
/* room for the trail ring so the scroller edge does not clip it */
#team .team__grid{padding-inline:6px;margin-inline:-6px;scroll-padding-inline:6px}
/* keep the portrait inside the card sides (head still rises above) so it never covers the ring */
#team .team__photo{clip-path:inset(-90px 0 0 0)}
/* shirt number above the name (official FDL start lists) */
#team .team__no{font-family:var(--font-num);font-weight:700;font-size:clamp(2.4rem,3.4vw,3.2rem);line-height:.95;color:#fff;letter-spacing:.01em;text-shadow:0 2px 16px rgba(5,13,28,.75)}
/* section header on par with the other home sections */
#team{position:relative;overflow:hidden}
#team > .container{position:relative;z-index:1}
#team .chapter{padding-bottom:0}
#team .chapter__title{font-size:var(--fs-h2);line-height:1.1}
#team .chapter__row{align-items:end}
/* squad on navy: cards grow out of the section background instead of sitting on it */
#team.team{background:#071428;color:#fff}
#team .team__grid .team__card{background-color:transparent;background-image:linear-gradient(128deg,transparent 0 34%,rgba(255,255,255,.045) 34% 63%,transparent 63%),linear-gradient(180deg,#17376a 0%,#0f2850 42%,#071428 96%);background-size:auto;background-position:0 0}
#team .team__grid .team__card::after{background:linear-gradient(0deg,#071428 0%,rgba(7,20,40,.9) 12%,rgba(7,20,40,.4) 32%,transparent 58%)}
#team .chapter__more{color:#fff}
#team .squad-status{color:rgba(255,255,255,.72)}
#team.team{border-top:1px solid rgba(255,255,255,.09)}
/* card in #111b36, thinner trail ring */
#team .team__grid .team__card{background-color:#111b36;background-image:linear-gradient(128deg,transparent 0 34%,rgba(255,255,255,.035) 34% 63%,transparent 63%)}
#team .team__grid .team__card::after{background:linear-gradient(0deg,#111b36 0%,rgba(17,27,54,.9) 12%,rgba(17,27,54,.4) 32%,transparent 58%)}
#team .team__grid .team__card::before{inset:-2px;padding:2px;border-radius:6px}
#team.team{background-color:#071428;background-image:linear-gradient(180deg,#071428 0%,rgba(7,20,40,.35) 30%,rgba(7,20,40,.35) 70%,#071428 100%),url(../img/waves-navy.webp);background-size:100% 100%,cover;background-position:center;background-repeat:no-repeat}
/* cards must read as solid blocks over the wave artwork */
#team .team__grid .team__card{background-color:#16244a;background-image:linear-gradient(128deg,transparent 0 34%,rgba(255,255,255,.04) 34% 63%,transparent 63%);border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 40px -24px rgba(0,0,0,.8)}
#team .team__grid .team__card::after{background:linear-gradient(0deg,#16244a 0%,rgba(22,36,74,.9) 12%,rgba(22,36,74,.4) 32%,transparent 58%)}