:root {
  --green-deep: #123b29;
  --green: #176f4c;
  --gold: #efbd2d;
  --ink: #173027;
  --muted: #687b70;
  --line: #d9e5dc;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Cairo', sans-serif; color: var(--ink); background: #f7faf7; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.team-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(370px, 44vw, 520px); overflow: hidden; color: #fff; background: var(--green-deep); }
.team-hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.team-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, rgba(8, 31, 21, .95), rgba(8, 31, 21, .72) 52%, rgba(8, 31, 21, .12)); }
.team-hero__content { width: 100%; max-width: 1220px; margin: 0 auto; padding: 54px 22px 60px; }
.team-hero__eyebrow { display: inline-flex; gap: 12px; align-items: center; color: #f1ce63; font-size: .84rem; font-weight: 700; }
.team-hero__eyebrow span { opacity: .65; }
.team-hero h1 { max-width: 720px; margin: 13px 0 15px; font-size: clamp(2.7rem, 5vw, 4.65rem); font-weight: 800; line-height: 1.25; }
.team-hero p { max-width: 510px; margin: 0 0 26px; color: #e5eee7; font-size: 1.1rem; line-height: 1.9; }
.team-hero a { display: inline-flex; align-items: center; gap: 13px; min-height: 46px; padding: 9px 16px; border: 1px solid #f6df9b; border-radius: 5px; color: #fff; text-decoration: none; font-weight: 700; }
.team-hero a:hover { color: var(--green-deep); background: var(--gold); border-color: var(--gold); }

.team-main { max-width: 1220px; margin: 0 auto; padding: 0 22px 100px; }
.team-intro { display: grid; grid-template-columns: 1fr minmax(260px, 450px); align-items: end; gap: 30px; padding: 60px 0 38px; border-bottom: 1px solid var(--line); }
.team-intro__line { color: var(--green); font-size: .8rem; font-weight: 800; }
.team-intro h2 { margin: 5px 0 0; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.3; font-weight: 800; }
.team-intro p { margin: 0; color: var(--muted); line-height: 1.85; }
.team-section { padding: 54px 0 12px; }
.team-section__heading { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 22px; }
.team-section__heading span { color: var(--green); font-size: .8rem; font-weight: 800; }
.team-section__heading h2 { margin: 4px 0 0; font-size: 1.85rem; font-weight: 800; }
.team-section__heading p { color: var(--muted); margin: 0 0 2px; }
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 21px; }
.person-card { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.person-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(17, 48, 31, .1); }
.person-card__portrait { display: grid; place-items: center; position: relative; aspect-ratio: 4 / 5; background: #dfebe1; overflow: hidden; }
.person-card__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.person-card:hover .person-card__portrait img { transform: scale(1.035); }
.person-card__portrait.is-missing span { color: #73967e; font-size: 5rem; font-weight: 800; }
.person-card__details { padding: 18px 18px 22px; border-top: 3px solid var(--gold); }
.person-card__category { color: var(--green); font-size: .76rem; font-weight: 800; }
.person-card h3 { margin: 5px 0 2px; font-size: 1.2rem; font-weight: 800; line-height: 1.5; overflow-wrap: anywhere; }
.person-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; overflow-wrap: anywhere; }
.team-loading { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 21px; padding: 54px 0; }
.team-loading__bar { aspect-ratio: 4 / 5.8; background: #e4ece6; border-radius: 6px; animation: pulse 1.1s ease-in-out infinite alternate; }
.team-loading__bar:nth-child(2) { animation-delay: .12s; }
.team-loading__bar:nth-child(3) { animation-delay: .24s; }
.team-loading__bar:nth-child(4) { animation-delay: .36s; }
@keyframes pulse { to { opacity: .52; } }
.team-message { padding: 70px 20px 84px; text-align: center; }
.team-message > i { display: block; margin-bottom: 12px; color: var(--green); font-size: 2.5rem; }
.team-message h2 { margin: 0 0 8px; font-size: 1.55rem; font-weight: 800; }
.team-message p { color: var(--muted); margin: 0 0 22px; }
.team-message a, .team-message button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--green-deep); border: 1px solid var(--green-deep); border-radius: 5px; color: #fff; text-decoration: none; font-weight: 700; cursor: pointer; }
.team-message a:hover, .team-message button:hover { background: var(--green); }

@media (max-width: 1000px) {
  .team-grid, .team-loading { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team-loading__bar:last-child { display: none; }
}
@media (max-width: 780px) {
  .team-hero { min-height: 390px; }
  .team-hero::after { background: rgba(8, 31, 21, .78); }
  .team-intro { grid-template-columns: 1fr; gap: 8px; padding-top: 40px; }
  .team-section__heading { align-items: start; flex-direction: column; gap: 6px; }
  .team-grid, .team-loading { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-loading__bar:nth-child(3) { display: none; }
}
@media (max-width: 540px) {
  .team-hero__content { padding: 46px 20px; }
  .team-hero h1 { font-size: 2.5rem; }
  .team-hero p { font-size: 1rem; }
  .team-main { padding: 0 18px 70px; }
  .team-section { padding-top: 40px; }
  .team-grid, .team-loading { grid-template-columns: 1fr; gap: 18px; }
  .team-loading__bar:nth-child(2) { display: none; }
  .person-card__portrait { aspect-ratio: 5 / 4; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .person-card, .person-card__portrait img { transition: none; }
  .team-loading__bar { animation: none; }
}