:root {
    --primary: #187A7D;
    --primary-light: #1FA3A7;
    --primary-dark: #115B5D;
    --bg: #FAFBFC;
    --bg2: #FFFFFF;
    --bg3: #F0F2F5;
    --bg4: #E4E7EC;
    --text: #1A2332;
    --text-secondary: #4A5568;
    --grey: #8896A6;
    --border: rgba(24,122,125,0.12);
    --border-hover: rgba(24,122,125,0.35);
    --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
    --card-shadow-hover: 0 8px 30px rgba(0,0,0,0.1);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  /* Column layout keeps the footer at the bottom of the viewport when the page is
     short — while the squad is still loading — same as news/article/membership */
  body {
    font-family: 'Barlow', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* ---- NAV ---- */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
    height: 96px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 8px rgba(0,0,0,0.04);
  }
  .nav-logo { display: flex; align-items: center; gap: 0.8rem; }
  .nav-logo img { height: 80px; width: 80px; object-fit: contain; }
  .nav-club-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
    color: var(--primary);
  }
  .nav-links { display: flex; gap: 2rem; list-style: none; }
  .nav-links a {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    opacity: 0.65;
    transition: opacity 0.2s, color 0.2s;
  }
  .nav-links a:hover { opacity: 1; color: var(--primary); }
  .nav-links a.nav-active { opacity: 1; color: var(--primary); }

  .nav-cta-li { display: none; }

/* ---- Language switcher ----
     A globe button that reveals the two languages on hover. :focus-within is there as
     well as :hover so it also opens from the keyboard and on touch, where hover does not
     exist. Grouped with the CTA in .nav-actions, so dir="rtl" flips the pair together. */
  .nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  /* Logo and actions share the bar's leftover width equally, so the links sit in the
     true centre of the page rather than midway between two unequal neighbours. The
     logo side is wider than the globe, and wider still in Arabic, so without this the
     links drift toward the globe. Desktop only: on mobile the links live in the drawer. */
  @media (min-width: 769px) {
    .nav-logo, .nav-actions { flex: 1 1 0; }
    .nav-actions { justify-content: flex-end; }
  }
  .nav-lang {
    position: relative;
    display: flex;
    align-items: center;
  }
  .nav-lang-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--primary);
    background: none;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
  }
  .nav-lang-toggle svg { width: 22px; height: 22px; display: block; }
  .nav-lang:hover .nav-lang-toggle,
  .nav-lang:focus-within .nav-lang-toggle {
    background: rgba(24,122,125,0.08);
    border-color: var(--border-hover);
    color: var(--primary-light);
  }

  .nav-lang-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    inset-inline-end: 0;
    min-width: 170px;
    list-style: none;
    padding: 0.35rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
    z-index: 200;
  }
  /* Invisible bridge across the gap, so the pointer can travel from the globe down to
     the menu without crossing dead space and closing it. */
  .nav-lang-menu::before {
    content: '';
    position: absolute;
    top: -0.6rem;
    left: 0;
    right: 0;
    height: 0.6rem;
  }
  .nav-lang:hover .nav-lang-menu,
  .nav-lang:focus-within .nav-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-lang-opt {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
  }
  a.nav-lang-opt:hover {
    background: rgba(24,122,125,0.08);
    color: var(--primary);
  }
  /* The Arabic option is Arabic text even on the English pages, which do not load the
     Arabic webfonts — fall through to whatever Arabic face the system has. */
  .nav-lang-opt[lang="ar"] {
    font-family: 'Tajawal', 'Noto Kufi Arabic', sans-serif;
    letter-spacing: normal;
  }
  /* The language already being read: marked with a tick, and not a link */
  .nav-lang-opt--current {
    color: var(--primary);
    font-weight: 700;
    cursor: default;
  }
  .nav-lang-opt--current::after {
    content: '\2713';
    margin-inline-start: auto;
    padding-inline-start: 0.6rem;
  }

  /* Each option keeps its flag — inline SVG rather than emoji, which Windows renders
     as bare "GB"/"QA" letters. */
  .nav-lang-opt::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  }
  .nav-lang-opt[hreflang="ar"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%238A1538'/%3E%3Cpath d='M0 0H5L8 0.778L5 1.556L8 2.333L5 3.111L8 3.889L5 4.667L8 5.444L5 6.222L8 7.000L5 7.778L8 8.556L5 9.333L8 10.111L5 10.889L8 11.667L5 12.444L8 13.222L5 14.000H0Z' fill='%23fff'/%3E%3C/svg%3E");
  }
  .nav-lang-opt[hreflang="en"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='c'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' clip-path='url%28%23c%29' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0V30M0,15H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0V30M0,15H60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
  }

  .nav-cta {
    display: inline-block;
    padding: 0.55rem 1.4rem;
    background: var(--primary);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  }
  .nav-cta:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(24,122,125,0.25);
  }

  /* ─── PAGE HEADER ─── */
  .page-header {
    position: relative;
    padding: 9rem 3rem 4rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(24,122,125,0.04) 0%, var(--bg) 100%),
                radial-gradient(ellipse at 70% 50%, rgba(24,122,125,0.06) 0%, transparent 65%);
  }
  .page-header::before {
    content: 'SQUAD';
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(8rem, 18vw, 16rem);
    color: rgba(24,122,125,0.04);
    letter-spacing: 8px;
    pointer-events: none;
    line-height: 1;
    user-select: none;
  }
  .page-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .page-header-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
  }
  .page-header-eyebrow::before {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: var(--primary);
  }
  .page-header h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 7vw, 5.5rem);
    letter-spacing: 3px;
    line-height: 0.95;
    color: var(--text);
  }
  .page-header h1 span { color: var(--primary); }
  .page-header-divider {
    width: 60px;
    height: 3px;
    background: var(--primary);
    margin-top: 1.4rem;
  }

  /* ─── SQUAD WRAPPER ─── */
  .squad-wrapper {
    flex: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem 6rem;
  }

  /* ─── LOADING STATE ─── */
  /* squad.js drops [data-loading] once the squad is in, swapping the two over */
  .squad-loading {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    padding: 7rem 1rem;
    text-align: center;
  }
  /* Nothing else is visible yet, so centre the message in the space above the footer */
  .squad-wrapper[data-loading] {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .squad-wrapper[data-loading] .squad-loading { display: flex; }
  .squad-wrapper[data-loading] .coach-section,
  .squad-wrapper[data-loading] .players-section { display: none; }

  .squad-loading-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid var(--bg4);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: squadSpin 0.9s linear infinite;
  }
  .squad-loading-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  /* Load finished with nothing to show — the message stands on its own */
  .squad-loading[data-state="message"] .squad-loading-spinner { display: none; }
  .squad-loading[data-state="message"] .squad-loading-text {
    font-family: 'Barlow', sans-serif;
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--grey);
  }
  @keyframes squadSpin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .squad-loading-spinner { animation-duration: 2.4s; }
  }

  /* ─── SECTION HEADINGS ─── */
  .squad-section-heading {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 2.5rem;
  }
  .squad-section-heading .label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--primary);
  }
  .squad-section-heading h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    letter-spacing: 2px;
    color: var(--text);
  }
  .squad-section-heading .line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border-hover), transparent);
  }

  /* ─── COACH SECTION ─── */
  .coach-section { margin-bottom: 5rem; }
  .coach-card {
    display: grid;
    grid-template-columns: 320px 1fr;
    background: var(--bg2);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: var(--card-shadow);
  }
  .coach-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--card-shadow-hover);
  }
  .coach-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), transparent);
  }
  .coach-img-wrap {
    position: relative;
    overflow: hidden;
    background: var(--bg3);
    min-height: 340px;
  }
  .coach-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.6s;
  }
  .coach-card:hover .coach-img-wrap img { transform: scale(1.04); }
  .coach-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 60%, var(--bg2) 100%);
  }
  .coach-number {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 5rem;
    color: rgba(24,122,125,0.1);
    line-height: 1;
    z-index: 1;
  }
  .coach-body {
    padding: 2.5rem 2.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .coach-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(24,122,125,0.06);
    border: 1px solid var(--border);
    padding: 0.3rem 0.9rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.2rem;
    width: fit-content;
    border-radius: 2px;
  }
  .coach-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 0.4rem;
    color: var(--text);
  }
  .coach-nationality {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--grey);
    text-transform: uppercase;
    margin-bottom: 1.8rem;
  }
  .coach-click-hint {
    margin-top: 1.5rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    opacity: 0.6;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.2s;
  }

  /* ---- Coaching staff list ----
     The first person is the full-width card above; anyone after them sits beside it
     as a compact tile reusing the player-card proportions. */
  .coach-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .staff-card {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 1.2rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  .staff-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--card-shadow-hover);
  }
  .staff-img-wrap {
    height: 140px;
    background: var(--bg3);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .staff-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
  .staff-body { padding: 1rem 1.2rem 1rem 0; }

  /* Cards are focusable so the profile opens from the keyboard too */
  .coach-card:focus-visible,
  .staff-card:focus-visible,
  .player-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  @media (max-width: 640px) {
    .staff-card { grid-template-columns: 100px 1fr; }
    .staff-img-wrap { height: 100px; }
  }
  .coach-card:hover .coach-click-hint { opacity: 1; }
  .coach-click-hint::after { content: '→'; }

  /* ─── FILTER BAR ─── */
  .filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
  }
  .filter-btn {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 0.5rem 1.3rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--grey);
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 2px;
  }
  .filter-btn:hover,
  .filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }

  /* ─── PLAYER GRID ─── */
  .players-section { margin-bottom: 4rem; }
  .players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.2rem;
  }

  /* ─── PLAYER CARD ─── */
  .player-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    position: relative;
    border-radius: 4px;
    box-shadow: var(--card-shadow);
  }
  .player-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
  }
  .player-card[data-hidden="true"] { display: none; }
  .player-img-wrap {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--bg3);
    overflow: hidden;
  }
  .player-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s;
  }
  .player-card:hover .player-img-wrap img {
    transform: scale(1.06);
  }
  .player-number-overlay {
    position: absolute;
    top: 0.6rem;
    left: 0.7rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    color: #fff;
    background: var(--primary);
    padding: 0.1rem 0.45rem;
    letter-spacing: 1px;
    line-height: 1.4;
    border-left: 2px solid rgba(255,255,255,0.4);
    border-radius: 2px;
  }
  .player-pos-overlay {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    padding: 1.8rem 0.8rem 0.6rem;
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 100%);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .player-card:hover .player-pos-overlay { opacity: 1; }
  .player-info {
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--border);
  }
  .player-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
  }
  .player-position {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary);
    opacity: 0.8;
  }

  /* ─── MODAL ─── */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(6px);
  }
  .modal-backdrop.open {
    opacity: 1;
    pointer-events: all;
  }
  .modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    display: grid;
    grid-template-columns: 280px 1fr;
    max-width: 720px;
    width: 100%;
    position: relative;
    transform: translateY(30px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
    overflow: hidden;
    max-height: 90vh;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  }
  .modal-backdrop.open .modal {
    transform: translateY(0) scale(1);
  }
  .modal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), transparent);
    z-index: 1;
  }
  .modal-img-col {
    position: relative;
    background: var(--bg3);
    overflow: hidden;
    min-height: 380px;
  }
  .modal-img-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
  .modal-img-col::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 50%, var(--bg2) 100%);
  }
  .modal-number-bg {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 7rem;
    color: rgba(24,122,125,0.08);
    line-height: 1;
    z-index: 0;
  }
  .modal-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
  }
  .modal-badge {
    display: inline-block;
    background: rgba(24,122,125,0.06);
    border: 1px solid var(--border);
    padding: 0.25rem 0.8rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.8rem;
    width: fit-content;
    border-radius: 2px;
  }
  .modal-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 0.2rem;
    color: var(--text);
  }
  .modal-pos {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.5rem;
  }
  .modal-divider {
    width: 40px;
    height: 2px;
    background: var(--primary);
    margin-bottom: 1.5rem;
    opacity: 0.4;
  }
  .modal-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .modal-detail-row {
    display: flex;
    gap: 1rem;
    font-size: 0.82rem;
  }
  .modal-detail-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--grey);
    font-size: 0.72rem;
    min-width: 100px;
  }
  .modal-detail-value {
    color: var(--text-secondary);
    font-weight: 400;
  }
  .modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: rgba(24,122,125,0.06);
    border: 1px solid var(--border);
    color: var(--primary);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10;
    line-height: 1;
    border-radius: 4px;
  }
  .modal-close:hover { background: rgba(24,122,125,0.12); }

  /* ─── POSITION GROUP LABEL ─── */
  .position-group-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 1rem;
    margin-top: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }
  .position-group-label::before {
    content: '';
    display: block;
    width: 6px; height: 6px;
    background: var(--primary);
    border-radius: 50%;
  }
  .position-group-label[data-pos-hidden="true"] { display: none; }

  /* ─── ANIMATIONS ─── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .page-header-eyebrow { animation: fadeUp 0.7s 0.1s both; }
  .page-header h1      { animation: fadeUp 0.7s 0.2s both; }
  .page-header-divider { animation: fadeUp 0.7s 0.3s both; }
  .coach-card          { animation: fadeUp 0.7s 0.35s both; }
  .player-card { animation: fadeUp 0.5s both; }

  /* ─── FOOTER ─── */
  footer {
    background: var(--primary-dark);
    border-top: 1px solid rgba(24,122,125,0.1);
    padding: 2rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }
  .footer-logo { display: flex; align-items: center; gap: 0.8rem; }
  .footer-logo img { height: 40px; }
  .footer-club { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; color: rgba(255,255,255,0.9); letter-spacing: 2px; }
  .footer-copy { font-size: 0.75rem; color: rgba(255,255,255,0.55); }

  /* ─── RESPONSIVE ─── */
  .nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px; height: 36px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    z-index: 200;
  }
  .nav-hamburger span {
    display: block;
    width: 100%; height: 2px;
    background: var(--primary);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
  }
  .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  @media (max-width: 1024px) {
    nav { padding: 0 1.5rem; }
    .nav-links { gap: 1.2rem; }
    .nav-links a { font-size: 0.95rem; letter-spacing: 1.5px; }
    .page-header { padding: 8rem 1.5rem 3rem; }
    .squad-wrapper { padding: 0 1.5rem 4rem; }
    .coach-card { grid-template-columns: 1fr; }
    .coach-img-wrap { min-height: 280px; max-height: 320px; }
    .coach-img-wrap::after { background: linear-gradient(0deg, var(--bg2) 0%, transparent 60%); }
    .coach-body { padding: 1.8rem; }
    .players-grid { grid-template-columns: repeat(4, 1fr); }
    .modal { max-width: 600px; }
    footer { padding: 1.5rem; }
  }

  @media (max-width: 768px) {
    nav { padding: 0 1rem; height: 76px; }
    .nav-logo img { height: 60px; width: 60px; }
    .nav-club-name { font-size: 1.1rem; }
    .nav-hamburger { display: flex; }
    .nav-cta { display: none; }
    .nav-cta-li { display: block; padding: 1rem 1.5rem 0; }
    .nav-cta-li a {
      background: var(--primary);
      color: #fff;
      padding: 0.75rem;
      border-bottom: none;
      border-radius: 2px;
      font-size: 0.85rem;
      letter-spacing: 2.5px;
    }
    .nav-cta-li a:hover { background: var(--primary-light); color: #fff; }
    /* The CTA drops into the drawer on mobile, so the pill keeps its place in the
       bar, grouped against the hamburger. */
    .nav-actions {
      margin-inline-start: auto;
      margin-inline-end: 0.9rem;
    }
    .nav-links {
      display: none;
      position: fixed;
      top: 76px; left: 0; right: 0;
      background: rgba(255,255,255,0.98);
      backdrop-filter: blur(16px);
      flex-direction: column;
      align-items: center;
      padding: 1.5rem 0 2rem;
      gap: 0;
      border-bottom: 1px solid var(--border);
      z-index: 150;
    }
    .nav-links.open { display: flex; }
    .nav-links li { width: 100%; text-align: center; }
    .nav-links a {
      display: block;
      padding: 0.9rem 0;
      font-size: 1rem;
      letter-spacing: 3px;
      border-bottom: 1px solid rgba(24,122,125,0.06);
      opacity: 1;
      color: var(--text);
    }
    .nav-links a:hover { color: var(--primary); background: rgba(24,122,125,0.04); }
    .nav-links .nav-cta-li a {
      color: #fff;
      background: var(--primary);
      border-bottom: none;
    }
    .nav-links .nav-cta-li a:hover {
      color: #fff;
      background: var(--primary-light);
    }
    .page-header { padding: 6rem 1rem 2rem; }
    .page-header::before { font-size: 6rem; right: 0.5rem; }
    .page-header h1 { font-size: clamp(2.2rem, 10vw, 3.5rem); }
    .squad-wrapper { padding: 0 1rem 3rem; }
    .squad-loading { padding: 4rem 1rem; }
    .squad-loading-text { font-size: 1.3rem; }
    .squad-section-heading h2 { font-size: 1.6rem; }
    .coach-card { grid-template-columns: 1fr; }
    .coach-img-wrap { min-height: 240px; max-height: 260px; }
    .coach-body { padding: 1.4rem; }
    .coach-name { font-size: 1.8rem; }
    .filter-bar { gap: 0.4rem; }
    .filter-btn { padding: 0.4rem 0.9rem; font-size: 0.7rem; }
    .players-grid { grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
    .player-name { font-size: 0.85rem; }
    .player-position { font-size: 0.65rem; }
    .player-number-overlay { font-size: 0.9rem; }
    .modal {
      grid-template-columns: 1fr;
      max-height: 88vh;
      overflow-y: auto;
    }
    .modal-img-col { min-height: 220px; max-height: 240px; }
    .modal-img-col::after { background: linear-gradient(0deg, var(--bg2) 0%, transparent 60%); }
    .modal-body { padding: 1.4rem; }
    .modal-name { font-size: 1.7rem; }
    footer {
      flex-direction: column;
      gap: 0.8rem;
      text-align: center;
      padding: 1.5rem 1rem;
    }
  }

  @media (max-width: 480px) {
    .page-header { padding: 5.5rem 0.8rem 1.8rem; }
    .page-header::before { display: none; }
    .squad-wrapper { padding: 0 0.8rem 2.5rem; }
    .coach-img-wrap { min-height: 200px; max-height: 220px; }
    .coach-body { padding: 1rem; }
    .coach-name { font-size: 1.5rem; }
    .filter-bar {
      overflow-x: auto;
      flex-wrap: nowrap;
      padding-bottom: 0.4rem;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .filter-bar::-webkit-scrollbar { display: none; }
    .filter-btn { white-space: nowrap; flex-shrink: 0; }
    .players-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .player-info { padding: 0.6rem 0.7rem; }
    .player-name { font-size: 0.78rem; }
    .modal-backdrop { padding: 0.5rem; }
    .modal-img-col { min-height: 180px; max-height: 200px; }
    .modal-name { font-size: 1.4rem; }
    .modal-detail-label { min-width: 80px; font-size: 0.65rem; }
    .modal-detail-value { font-size: 0.78rem; }
    footer { padding: 1rem 0.8rem; }
    .footer-copy { font-size: 0.65rem; }
  }

  @media (max-width: 900px) {
    .coach-card { grid-template-columns: 1fr; }
    .coach-img-wrap { min-height: 240px; }
    .modal { grid-template-columns: 1fr; }
    .modal-img-col { min-height: 200px; max-height: 220px; }
    .squad-wrapper { padding: 0 1.5rem 4rem; }
    .page-header { padding: 8rem 1.5rem 3rem; }
  }