/* UAE Chess Federation — global stylesheet
 * Extracted from new UI design system. Loaded by every page via includes/header.php.
 * Per-page-specific styles are added inline in each page as needed.
 */

:root {
      --green: #0D703C;
      --green-950: #03351F;
      --green-900: #064E2D;
      --green-100: #E8F3ED;
      --green-50: #F4F8F6;
      --gold: #C7A441;
      --gold-dark: #92731D;
      --red: #D71920;
      --red-soft: #FBE8E9;
      --black: #231F20;
      --muted: #747B76;
      --line: #E3E8E5;
      --warm: #FBFAF6;
      --white: #FFFFFF;
      --shadow-sm: 0 10px 32px rgba(12, 48, 29, .07);
      --shadow-md: 0 22px 60px rgba(12, 48, 29, .12);

      --radius-lg: 34px;
      --max: 1260px;
      --header-h: 82px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--black);
      background: var(--white);
      font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
      line-height: 1.62;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    body.menu-open { overflow: hidden; }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; }
    svg { display: block; }
    ::selection { background: #DCEFE4; color: var(--green-950); }

    .container {
      width: min(calc(100% - 48px), var(--max));
      margin-inline: auto;
    }

    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0,0,0,0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .skip-link {
      position: fixed;
      left: 18px;
      top: 14px;
      z-index: 9999;
      padding: 10px 15px;
      border-radius: 10px;
      background: var(--white);
      color: var(--green-950);
      box-shadow: var(--shadow-md);
      transform: translateY(-160%);
      transition: transform .2s ease;
    }
    .skip-link:focus { transform: translateY(0); }

    /* ---------- Page loader ---------- */
    html.page-loading,
    html.page-loading body { overflow: hidden; }
    .site-loader {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: grid;
      place-items: center;
      color: var(--white);
      background:
        radial-gradient(circle at 50% 44%, rgba(13,112,60,.24), transparent 32%),
        radial-gradient(circle at 50% 50%, #07150E 0%, #020604 58%, #000 100%);
      opacity: 1;
      visibility: visible;
      transition: opacity .8s cubic-bezier(.22,.61,.36,1), visibility .8s ease;
    }
    .site-loader::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .12;
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(circle, #000, transparent 68%);
      pointer-events: none;
    }
    .site-loader.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .loader-stage {
      width: min(300px, 72vw);
      aspect-ratio: 1;
      position: relative;
      display: grid;
      place-items: center;
    }
    .loader-stage::before,
    .loader-stage::after {
      content: "";
      position: absolute;
      inset: 22px;
      border: 1px solid rgba(199,164,65,.20);
      border-radius: 50%;
      animation: loader-ring 3s ease-in-out infinite;
    }
    .loader-stage::after {
      inset: 43px;
      border-color: rgba(255,255,255,.10);
      animation-delay: -.2s;
    }
    .loader-emblem {
      width: 200px;
      height: 200px;
      position: relative;
      z-index: 2;
      padding: 1px;
      border: 1px solid rgba(199,164,65,.30);
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 18px 44px rgba(0,0,0,.36);
      object-fit: contain;
      animation: loader-emblem 3s ease-in-out infinite;
    }
    .loader-sparkles { position: absolute; inset: 0; }
    .loader-spark {
      width: 4px;
      height: 4px;
      position: absolute;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 7px 2px rgba(231,212,151,.44);
      animation: loader-spark 1.6s ease-in-out infinite;
    }
    .loader-spark::after {
      content: "";
      width: 1px;
      height: 14px;
      position: absolute;
      left: 50%;
      top: 50%;
      background: linear-gradient(transparent, rgba(255,255,255,.82), transparent);
      transform: translate(-50%,-50%);
    }
    .loader-spark:nth-child(1) { left: 49%; top: 5%; animation-delay: -.2s; }
    .loader-spark:nth-child(2) { right: 17%; top: 18%; animation-delay: -.8s; }
    .loader-spark:nth-child(3) { right: 5%; top: 48%; animation-delay: -1.2s; }
    .loader-spark:nth-child(4) { right: 19%; bottom: 15%; animation-delay: -.4s; }
    .loader-spark:nth-child(5) { left: 48%; bottom: 5%; animation-delay: -1s; }
    .loader-spark:nth-child(6) { left: 16%; bottom: 18%; animation-delay: -.6s; }
    .loader-spark:nth-child(7) { left: 5%; top: 47%; animation-delay: -1.4s; }
    .loader-spark:nth-child(8) { left: 18%; top: 17%; animation-delay: -.1s; }
    .loader-spark:nth-child(9) { right: 28%; top: 8%; animation-delay: -.9s; }
    .loader-spark:nth-child(10) { left: 27%; bottom: 8%; animation-delay: -1.3s; }
    .loader-caption {
      position: absolute;
      left: 50%;
      bottom: -12px;
      transform: translateX(-50%);
      color: rgba(255,255,255,.62);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .28em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    @keyframes loader-emblem {
      0%, 100% { transform: scale(.97); opacity: .86; }
      50% { transform: scale(1.025); opacity: 1; }
    }
    @keyframes loader-ring {
      0%, 100% { transform: scale(.96); opacity: .34; }
      50% { transform: scale(1.035); opacity: .8; }
    }
    @keyframes loader-spark {
      0%, 100% { transform: scale(.3) rotate(0); opacity: .12; }
      50% { transform: scale(1.15) rotate(45deg); opacity: 1; }
    }

    /* ---------- SVG icons ---------- */
    .icon-library { position: absolute; }

    .icon {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: 0 0 auto;
    }
    .icon-chip {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(13,112,60,.13);
      border-radius: 16px;
      color: var(--green);
      background: linear-gradient(145deg, #FFF, #EFF6F2);
    }
    .icon-chip .icon { width: 24px; height: 24px; }

    /* ---------- Topbar ---------- */
    .topbar {
      background: var(--green-950);
      color: rgba(255,255,255,.78);
      font-size: 12px;
    }
    .topbar-inner {
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .topbar-left,
    .topbar-links {
      display: flex;
      align-items: center;
      gap: 18px;
    }
    .topbar-dot {
      width: 5px;
      height: 5px;
      display: inline-block;
      margin-right: 7px;
      border-radius: 50%;
      background: var(--gold);
      vertical-align: 1px;
    }
    .topbar a { transition: color .18s ease; }
    .topbar a:hover { color: var(--white); }
    .lang-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-weight: 800;
      letter-spacing: .03em;
    }
    .topbar-flag {
      width: 22px;
      height: 14px;
      object-fit: cover;
      border-radius: 2px;
      box-shadow: 0 0 0 1px rgba(255,255,255,.14);
    }

    /* ---------- Header ---------- */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      overflow: visible;
      border-bottom: 1px solid rgba(227,232,229,.86);
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(18px) saturate(145%);
      -webkit-backdrop-filter: blur(18px) saturate(145%);
    }
    .header-inner {
      min-height: var(--header-h);
      position: relative;
      display: flex;
      align-items: center;
      gap: 28px;
      overflow: visible;
    }
    .brand {
      min-height: var(--header-h);
      position: relative;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      padding-left: 118px;
    }
    .brand-logo-shell {
      width: 104px;
      height: 104px;
      position: absolute;
      left: 0;
      z-index: 5;
      display: grid;
      place-items: center;
      margin: 0;
      border: 1px solid rgba(199,164,65,.30);
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 12px 34px rgba(3,53,31,.14), 0 2px 8px rgba(3,53,31,.07);
    }
    .brand-logo-shell::after {
      content: "";
      position: absolute;
      inset: 7px;
      border: 1px solid rgba(13,112,60,.12);
      border-radius: inherit;
      pointer-events: none;
    }
    .brand-logo {
      object-fit: contain;
      position: relative;
      z-index: 1;
    }
    .brand-copy strong {
      display: block;
      color: var(--green-950);
      font-size: 16px;
      line-height: 1.18;
      letter-spacing: -.015em;
    }
    .brand-copy span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .desktop-nav {
      margin-left: auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 2px;
    }
    .nav-item { position: relative; }
    .nav-link,
    .nav-trigger {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 9px 10px;
      border: 0;
      border-radius: 10px;
      color: #26352C;
      background: transparent;
      font-size: 13px;
      font-weight: 720;
      white-space: nowrap;
      transition: background .18s ease, color .18s ease;
    }
    .nav-link:hover,
    .nav-trigger:hover,
    .nav-item:focus-within > .nav-trigger {
      color: var(--green);
      background: var(--green-50);
    }
    .nav-link.contact-link {
      margin-left: 6px;
      padding-inline: 15px;
      color: var(--white);
      background: var(--green);
    }
    .nav-link.contact-link:hover { color: var(--white); background: var(--green-900); }
    .chevron {
      width: 6px;
      height: 6px;
      border-right: 1.4px solid currentColor;
      border-bottom: 1.4px solid currentColor;
      transform: rotate(45deg) translateY(-2px);
    }
    .dropdown {
      position: absolute;
      top: calc(100% + 9px);
      left: 0;
      min-width: 250px;
      padding: 9px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: rgba(255,255,255,.985);
      box-shadow: var(--shadow-md);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: .18s ease;
    }
    .nav-item:hover .dropdown,
    .nav-item:focus-within .dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .dropdown a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 10px 11px;
      border-radius: 10px;
      color: #354139;
      font-size: 13px;
      transition: .18s ease;
    }
    .dropdown a:hover { color: var(--green); background: var(--green-50); }

    .mobile-toggle {
      display: none;
      width: 44px;
      height: 44px;
      margin-left: auto;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 13px;
      color: var(--green-950);
      background: var(--white);
    }
    .mobile-toggle span,
    .mobile-toggle span::before,
    .mobile-toggle span::after {
      content: "";
      width: 19px;
      height: 2px;
      position: relative;
      display: block;
      border-radius: 99px;
      background: currentColor;
      transition: .2s ease;
    }
    .mobile-toggle span::before { position: absolute; top: -6px; }
    .mobile-toggle span::after { position: absolute; top: 6px; }
    .mobile-toggle[aria-expanded="true"] span { background: transparent; }
    .mobile-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
    .mobile-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

    .mobile-panel {
      display: none;
      border-top: 1px solid var(--line);
      background: rgba(255,255,255,.99);
      max-height: calc(100vh - 116px);
      overflow-y: auto;
    }
    .mobile-panel.open { display: block; }
    .mobile-nav { padding: 12px 0 22px; }
    .mobile-nav details { border-bottom: 1px solid var(--line); }
    .mobile-nav summary,
    .mobile-nav > a {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 4px;
      color: #26342C;
      font-weight: 760;
    }
    .mobile-nav summary::-webkit-details-marker { display: none; }
    .mobile-submenu { padding: 0 0 10px 10px; }
    .mobile-submenu a {
      display: block;
      padding: 9px 8px;
      color: var(--muted);
      font-size: 14px;
    }

    /* ---------- Strategic minds. National ambition. ---------- */
    .hero {
      min-height: 100vh;
      min-height: 100svh;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      color: var(--white);
      background: var(--green-950);
    }
    .hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 6;
      height: 3px;
      background: linear-gradient(
        90deg,
        var(--red) 0 12%,
        var(--gold) 12% 25%,
        var(--green) 25% 100%
      );
      pointer-events: none;
    }
    .hero-media {
      position: absolute;
      inset: 0;
      z-index: -5;
    }
    .hero-video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: -4;
      background:
        linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.50) 42%, rgba(0,0,0,.26) 72%, rgba(0,0,0,.18) 100%),
        linear-gradient(0deg, rgba(0,0,0,.52), transparent 54%),
        rgba(0,0,0,.18);
    }
    .hero-grid {
      position: absolute;
      z-index: -3;
      inset: 0 0 0 52%;
      opacity: .18;
      background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
      background-size: 76px 76px;
      mask-image: linear-gradient(90deg, transparent, #000 25%, #000);
    }
    .hero-glow {
      position: absolute;
      z-index: -2;
      width: 520px;
      height: 520px;
      right: -220px;
      top: -240px;
      border: 1px solid rgba(199,164,65,.25);
      border-radius: 50%;
      box-shadow: 0 0 0 90px rgba(199,164,65,.035), 0 0 0 180px rgba(255,255,255,.018);
      pointer-events: none;
    }
    .hero-inner {
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      align-items: center;
      padding: 90px 0 112px;
    }
    .hero-content { max-width: 790px; }
    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 22px;
      color: rgba(255,255,255,.82);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .17em;
      text-transform: uppercase;
    }
    .hero-kicker::before {
      content: "";
      width: 34px;
      height: 2px;
      background: linear-gradient(90deg, var(--gold), var(--red));
    }
    .hero h1 {
      margin: 0;
      max-width: 790px;
      font-size: clamp(55px, 6.4vw, 88px);
      line-height: .96;
      letter-spacing: -.06em;
      text-wrap: balance;
    }
    .hero h1 em {
      display: block;
      color: #E7D497;
      font-style: normal;
      font-weight: 630;
    }
    .hero-lead {
      max-width: 650px;
      margin: 27px 0 0;
      color: rgba(255,255,255,.80);
      font-size: clamp(17px, 1.8vw, 20px);
      line-height: 1.72;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-top: 34px;
    }
    .btn {
      min-height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 12px 19px;
      border: 1px solid transparent;
      border-radius: 13px;
      font-size: 13px;
      font-weight: 820;
      letter-spacing: .01em;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary { color: var(--white); background: var(--green); box-shadow: 0 13px 30px rgba(13,112,60,.22); }
    .btn-primary:hover { background: var(--green-900); }
    .hero .btn-primary { color: var(--green-950); background: var(--white); box-shadow: 0 15px 36px rgba(0,0,0,.16); }
    .hero .btn-primary:hover { background: #F6F8F7; }
    .btn-secondary { color: var(--white); border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); backdrop-filter: blur(10px); }
    .btn-secondary:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.14); }
    .btn-outline { color: var(--green-950); border-color: #CDD8D1; background: var(--white); }
    .btn-outline:hover { color: var(--green); border-color: var(--green); }

    .hero-focus {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px 22px;
      margin-top: 34px;
      padding-top: 24px;
      border-top: 1px solid rgba(255,255,255,.16);
      color: rgba(255,255,255,.66);
      font-size: 12px;
    }
    .hero-focus span { display: inline-flex; align-items: center; gap: 8px; }
    .hero-focus i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 0 4px rgba(199,164,65,.08);
    }

    /* ---------- Shared section system ---------- */
    section { padding: 96px 0; }
    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 36px;
      margin-bottom: 38px;
    }
    .section-kicker {
      margin: 0 0 10px;
      color: var(--green);
      font-size: 11px;
      font-weight: 880;
      letter-spacing: .15em;
      text-transform: uppercase;
    }
    .section-title {
      margin: 0;
      max-width: 790px;
      color: var(--black);
      font-size: clamp(36px, 4.4vw, 56px);
      line-height: 1.04;
      letter-spacing: -.048em;
      text-wrap: balance;
    }
    .section-intro {
      max-width: 650px;
      margin: 15px 0 0;
      color: var(--muted);
      font-size: 16px;
    }
    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--green);
      font-size: 13px;
      font-weight: 820;
      white-space: nowrap;
    }
    .text-link .arrow,
    .btn .arrow { transition: transform .18s ease; }
    .text-link:hover .arrow,
    .btn:hover .arrow { transform: translateX(3px); }

    /* ---------- Celebrating 50 years of UAE chess. ---------- */
    .anniversary {
      padding: 76px 0;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid #EEE9DB;
      background:
        radial-gradient(circle at 94% 0%, rgba(199,164,65,.13), transparent 32%),
        linear-gradient(180deg, #FFFDF8 0%, #FAF8F0 100%);
    }
    .anniversary::before {
      content: "";
      position: absolute;
      width: 360px;
      height: 360px;
      right: -170px;
      bottom: -220px;
      border: 1px solid rgba(13,112,60,.09);
      border-radius: 50%;
      box-shadow: 0 0 0 62px rgba(13,112,60,.022);
    }
    .anniv-grid {
      display: grid;
      grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
      align-items: center;
      gap: 70px;
    }
    @property --anniv-border-angle {
      syntax: "<angle>";
      inherits: false;
      initial-value: 0deg;
    }
    .anniv-visual {
      --anniv-border-angle: 0deg;
      min-height: 360px;
      position: relative;
      display: grid;
      place-items: center;
      padding: 48px;
      border: 2px solid transparent;
      border-radius: 30px;
      background:
        linear-gradient(#fff, #fff) padding-box,
        conic-gradient(
          from var(--anniv-border-angle),
          var(--green) 0deg 92deg,
          var(--gold) 92deg 176deg,
          var(--red) 176deg 230deg,
          var(--gold) 230deg 286deg,
          var(--green) 286deg 360deg
        ) border-box;
      box-shadow: 0 24px 60px rgba(3,53,31,.11);
      overflow: hidden;
      animation: anniversaryBorderFlow 9s linear infinite;
    }
    .anniv-visual::before {
      content: "";
      position: absolute;
      inset: 11px;
      border: 1px solid rgba(199,164,65,.13);
      border-radius: 21px;
      pointer-events: none;
    }
    .anniv-visual::after {
      content: "";
      position: absolute;
      left: 9%;
      right: 9%;
      bottom: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(13,112,60,.45), rgba(199,164,65,.65), rgba(215,25,32,.45), transparent);
      opacity: .45;
      pointer-events: none;
    }
    .anniv-logo-stage {
      width: min(330px, 92%);
      min-height: 270px;
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      isolation: isolate;
    }

    /* Anniversary star field */
    .anniv-logo-stage::before {
      content: "";
      position: absolute;
      inset: -26px -34px;
      z-index: -2;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 48%, rgba(255,248,219,.98) 0 20%, rgba(247,232,178,.45) 39%, rgba(255,255,255,0) 70%),
        radial-gradient(circle at 24% 26%, rgba(199,164,65,.13), transparent 25%),
        radial-gradient(circle at 78% 70%, rgba(13,112,60,.08), transparent 24%);
      filter: blur(.2px);
      animation: anniversaryAura 7s ease-in-out infinite;
      pointer-events: none;
    }

    .anniv-logo-stage::after {
      content: "✦";
      position: absolute;
      z-index: 4;
      top: 6%;
      right: 3%;
      color: #E0C469;
      font-size: 18px;
      line-height: 1;
      opacity: .24;
      text-shadow: 0 0 8px rgba(199,164,65,.55), 0 0 22px rgba(199,164,65,.30);
      pointer-events: none;
      animation: anniversarySparkle 3.6s ease-in-out infinite;
    }

    .anniv-starfield {
      position: absolute;
      inset: -15px -20px;
      z-index: -1;
      overflow: hidden;
      border-radius: 44%;
      pointer-events: none;
    }

    .anniv-starfield i {
      --star-size: 6px;
      --star-delay: 0s;
      --star-duration: 3.4s;
      --star-x: 0px;
      --star-y: -7px;
      width: var(--star-size);
      height: var(--star-size);
      position: absolute;
      display: block;
      border-radius: 50%;
      background: #E4C96F;
      opacity: 0;
      box-shadow: 0 0 7px rgba(224,196,105,.78), 0 0 18px rgba(199,164,65,.34);
      animation: anniversaryStarTwinkle var(--star-duration) ease-in-out var(--star-delay) infinite;
    }

    .anniv-starfield i::before,
    .anniv-starfield i::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 99px;
      background: linear-gradient(90deg, transparent, rgba(255,250,225,.98), transparent);
      transform: translate(-50%, -50%);
    }

    .anniv-starfield i::before { width: calc(var(--star-size) * 4.1); height: 1px; }
    .anniv-starfield i::after { width: 1px; height: calc(var(--star-size) * 4.1); }

    .anniv-starfield i:nth-child(1)  { left: 8%;  top: 18%; --star-size: 4px; --star-delay: .1s; --star-duration: 3.1s; }
    .anniv-starfield i:nth-child(2)  { left: 19%; top: 9%;  --star-size: 3px; --star-delay: 1.1s; --star-duration: 4.0s; }
    .anniv-starfield i:nth-child(3)  { left: 34%; top: 20%; --star-size: 5px; --star-delay: 2.0s; --star-duration: 3.7s; }
    .anniv-starfield i:nth-child(4)  { left: 69%; top: 12%; --star-size: 4px; --star-delay: .7s; --star-duration: 3.5s; }
    .anniv-starfield i:nth-child(5)  { left: 87%; top: 27%; --star-size: 6px; --star-delay: 1.7s; --star-duration: 4.2s; }
    .anniv-starfield i:nth-child(6)  { left: 13%; top: 49%; --star-size: 3px; --star-delay: 2.6s; --star-duration: 3.3s; }
    .anniv-starfield i:nth-child(7)  { left: 83%; top: 50%; --star-size: 4px; --star-delay: .4s; --star-duration: 3.8s; }
    .anniv-starfield i:nth-child(8)  { left: 6%;  top: 72%; --star-size: 5px; --star-delay: 1.4s; --star-duration: 4.1s; }
    .anniv-starfield i:nth-child(9)  { left: 25%; top: 83%; --star-size: 3px; --star-delay: 2.3s; --star-duration: 3.6s; }
    .anniv-starfield i:nth-child(10) { left: 43%; top: 73%; --star-size: 4px; --star-delay: .9s; --star-duration: 3.2s; }
    .anniv-starfield i:nth-child(11) { left: 64%; top: 86%; --star-size: 3px; --star-delay: 1.9s; --star-duration: 4.3s; }
    .anniv-starfield i:nth-child(12) { left: 90%; top: 76%; --star-size: 5px; --star-delay: 2.8s; --star-duration: 3.9s; }
    .anniv-starfield i:nth-child(13) { left: 48%; top: 5%;  --star-size: 2px; --star-delay: 1.3s; --star-duration: 3.4s; }
    .anniv-starfield i:nth-child(14) { left: 74%; top: 35%; --star-size: 2px; --star-delay: 2.4s; --star-duration: 3.0s; }

    .anniv-visual img {
      position: relative;
      z-index: 2;
      width: 100%;
      max-height: 260px;
      object-fit: contain;
      filter: drop-shadow(0 8px 18px rgba(146,115,29,.08));
      animation: anniversaryLogoGlow 5.8s ease-in-out infinite;
    }
    @keyframes anniversaryBorderFlow {
      to { --anniv-border-angle: 360deg; }
    }
    @keyframes anniversarySparkle {
      0%, 38%, 100% { opacity: .12; transform: scale(.72) rotate(0deg); }
      48% { opacity: .95; transform: scale(1.18) rotate(12deg); }
      58% { opacity: .32; transform: scale(.88) rotate(20deg); }
    }
    @keyframes anniversaryAura {
      0%, 100% { opacity: .72; transform: scale(.97) rotate(-1deg); }
      50% { opacity: 1; transform: scale(1.035) rotate(1deg); }
    }
    @keyframes anniversaryStarTwinkle {
      0%, 100% { opacity: 0; transform: translate(0, 0) scale(.45) rotate(0deg); }
      26% { opacity: .22; }
      48% { opacity: .96; transform: translate(var(--star-x), var(--star-y)) scale(1.15) rotate(16deg); }
      68% { opacity: .30; transform: translate(calc(var(--star-x) * .55), calc(var(--star-y) * .55)) scale(.72) rotate(28deg); }
    }
    @keyframes anniversaryLogoGlow {
      0%, 100% { filter: drop-shadow(0 8px 18px rgba(146,115,29,.07)); }
      50% { filter: drop-shadow(0 10px 24px rgba(199,164,65,.16)); }
    }
    .anniv-copy > p:not(.section-kicker) {
      max-width: 720px;
      margin: 21px 0 0;
      color: #656761;
      font-size: 16px;
    }
    .anniv-points {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 12px;
      margin-top: 28px;
    }
    .anniv-point {
      padding: 18px;
      border: 1px solid #E5DDC3;
      border-radius: 16px;
      background: rgba(255,255,255,.68);
    }
    .anniv-point strong {
      display: block;
      margin-bottom: 5px;
      color: var(--green-950);
      font-size: 14px;
    }
    .anniv-point span { color: var(--muted); font-size: 12px; line-height: 1.5; }
    .anniv-point::before {
      content: "";
      width: 24px;
      height: 2px;
      display: block;
      margin-bottom: 12px;
      background: linear-gradient(90deg, var(--gold), var(--red));
    }

    /* ---------- Featured federation actions ---------- */
    .quick-actions-section {
      padding: 62px 0;
      background: var(--white);
    }
    .quick-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 14px;
    }
    .quick-card {
      min-height: 230px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 25px;
      border: 1px solid var(--line);
      border-radius: 21px;
      background: var(--white);
      box-shadow: 0 8px 28px rgba(12,48,29,.035);
      overflow: hidden;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .quick-card::after {
      content: "";
      position: absolute;
      width: 90px;
      height: 90px;
      right: -48px;
      top: -48px;
      border: 1px solid rgba(199,164,65,.20);
      transform: rotate(45deg);
      transition: transform .3s ease;
    }
    .quick-card:hover { transform: translateY(-4px); border-color: #CAD9D0; box-shadow: var(--shadow-sm); }
    .quick-card:hover::after { transform: rotate(62deg); }
    .quick-card h3 {
      margin: 18px 0 7px;
      color: var(--green-950);
      font-size: 19px;
      letter-spacing: -.02em;
    }
    .quick-card p { margin: 0; color: var(--muted); font-size: 13px; }
    .quick-card .text-link { margin-top: 22px; }
    .quick-card.featured {
      color: var(--white);
      border-color: transparent;
      background: linear-gradient(145deg, var(--green-950), var(--green));
    }
    .quick-card.featured h3 { color: var(--white); }
    .quick-card.featured p { color: rgba(255,255,255,.70); }
    .quick-card.featured .icon-chip {
      color: #E4D18E;
      border-color: rgba(255,255,255,.18);
      background: rgba(255,255,255,.08);
    }
    .quick-card.featured .text-link { color: #E4D18E; }

    /* ---------- Developing chess with national purpose. ---------- */
    .about {
      background:
        radial-gradient(circle at 100% 0%, rgba(13,112,60,.07), transparent 28%),
        var(--green-50);
    }
    .about-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: center;
      gap: 66px;
    }
    .about-visual {
      min-height: 520px;
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background: #E5ECE8;
      box-shadow: var(--shadow-md);
    }
    .about-visual > img {
      width: 100%;
      height: 100%;
      min-height: 520px;
      object-fit: cover;
    }
    .about-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(3,53,31,.36), transparent 46%);
      pointer-events: none;
    }
    /* Constrains the About image (both mission-page hero and homepage About).
     * From the new UI mockup: fixed 4:5 portrait aspect, capped at 470px wide,
     * right-aligned in the grid cell. */
    .about .about-visual {
      min-height: 500px;
      max-height: 570px;
      aspect-ratio: 4 / 5;
      justify-self: end;
      width: min(100%, 470px);
      border: 1px solid rgba(13,112,60,.10);
      background: #fff;
    }
    .about .about-visual > img {
      min-height: 500px;
      object-position: center center;
    }
    .about-caption {
      position: absolute;
      z-index: 2;
      left: 24px;
      right: 24px;
      bottom: 24px;
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 16px;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 17px;
      color: var(--white);
      background: rgba(3,53,31,.58);
      backdrop-filter: blur(14px);
    }
    .about-caption img { width: 44px; height: 44px; object-fit: contain; }
    .about-caption strong { display: block; font-size: 13px; }
    .about-caption span { display: block; color: rgba(255,255,255,.70); font-size: 11px; }
    .about-copy > p:not(.section-kicker) { color: var(--muted); font-size: 16px; }
    .about-points {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 12px;
      margin: 28px 0;
    }
    .about-point {
      padding: 18px;
      border: 1px solid #DDE7E1;
      border-radius: 17px;
      background: rgba(255,255,255,.76);
    }
    .about-point-head { display: flex; align-items: center; gap: 9px; color: var(--green); }
    .about-point-head .icon { width: 18px; height: 18px; }
    .about-point strong { color: var(--green-950); }
    .about-point span { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }

    /* ---------- Message from the President ---------- */
    .president { background: var(--white); }
    .president-card {
      display: grid;
      grid-template-columns: 390px minmax(0,1fr);
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--white);
      box-shadow: var(--shadow-sm);
    }
    .president-photo {
      min-height: 525px;
      position: relative;
      overflow: hidden;
      background: #EFF2F0;
    }
    .president-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
    .president-photo::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 42%;
      background: linear-gradient(0deg, rgba(3,53,31,.25), transparent);
      pointer-events: none;
    }
    .president-copy {
      min-height: 525px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(38px, 5vw, 72px);
      overflow: hidden;
    }
    .president-copy::before {
      content: "\201C";
      position: absolute;
      right: 42px;
      top: 0;
      color: var(--green-100);
      font-family: Georgia, serif;
      font-size: 180px;
      line-height: 1;
      pointer-events: none;
    }
    .president-copy blockquote {
      position: relative;
      z-index: 1;
      margin: 5px 0 0;
      max-width: 720px;
      color: #3C4640;
      font-size: clamp(19px, 2vw, 24px);
      line-height: 1.7;
      letter-spacing: -.015em;
    }
    .president-meta {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 13px;
      margin-top: 27px;
    }
    .president-meta::before {
      content: "";
      width: 34px;
      height: 2px;
      background: linear-gradient(90deg, var(--gold), var(--red));
    }
    .president-meta strong { display: block; color: var(--green-950); font-size: 16px; }
    .president-meta span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
    .president-copy .text-link { position: relative; z-index: 1; margin-top: 25px; }

    /* ---------- Chess participation at a glance. ---------- */
    .impact {
      padding: 72px 0;
      position: relative;
      overflow: hidden;
      color: var(--white);
      background:
        radial-gradient(circle at 10% -40%, rgba(199,164,65,.13), transparent 38%),
        linear-gradient(115deg, #043D24 0%, #075833 50%, #0D703C 100%);
    }
    .impact::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--red) 0 18%, var(--gold) 18% 44%, rgba(255,255,255,.18) 44% 100%);
    }
    .impact::after {
      content: "";
      position: absolute;
      inset: 0 0 0 52%;
      opacity: .07;
      background-image:
        linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px);
      background-size: 66px 66px;
      pointer-events: none;
    }
    .impact-heading {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 34px;
    }
    .impact-heading .section-kicker { color: #E5D18D; }
    .impact-heading h2 {
      margin: 0;
      color: var(--white);
      font-size: clamp(28px, 3vw, 40px);
      line-height: 1.1;
      letter-spacing: -.035em;
    }
    .impact-heading p {
      max-width: 520px;
      margin: 0;
      color: rgba(255,255,255,.62);
      font-size: 13px;
    }
    .impact-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 26px;
      background: rgba(255,255,255,.055);
      backdrop-filter: blur(10px);
      overflow: hidden;
    }
    .metric {
      min-height: 238px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 30px 31px;
      border-right: 1px solid rgba(255,255,255,.12);
    }
    .metric:last-child { border-right: 0; }
    .metric-icon {
      width: 50px;
      height: 50px;
      display: grid;
      place-items: center;
      margin-bottom: 22px;
      border: 1px solid rgba(229,209,141,.35);
      border-radius: 15px;
      color: #E5D18D;
      background: rgba(255,255,255,.055);
    }
    .metric-icon .icon { width: 27px; height: 27px; stroke-width: 1.45; }
    .metric-value {
      display: block;
      color: var(--white);
      font-size: clamp(42px, 4.4vw, 64px);
      font-weight: 780;
      line-height: .92;
      letter-spacing: -.055em;
      font-variant-numeric: tabular-nums;
    }
    .metric-label {
      display: block;
      margin-top: 13px;
      color: rgba(255,255,255,.72);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .metric-label::after {
      content: "";
      width: 24px;
      height: 2px;
      display: block;
      margin-top: 13px;
      background: var(--red);
    }

    /* ---------- Tournaments and pathways to play. ---------- */
    .events { background: var(--warm); }
    .events-grid {
      display: grid;
      grid-template-columns: 1.3fr .85fr .85fr;
      gap: 15px;
    }
    .event-card {
      min-height: 350px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 27px;
      border: 1px solid #E6E3D8;
      border-radius: 23px;
      background: var(--white);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .event-card:hover { transform: translateY(-4px); border-color: #D5CEB6; box-shadow: var(--shadow-sm); }
    .event-card.featured {
      color: var(--white);
      border-color: transparent;
      background:
        radial-gradient(circle at 100% 0%, rgba(199,164,65,.17), transparent 33%),
        linear-gradient(145deg, var(--green-950), var(--green));
    }
    .event-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .event-date {
      display: inline-flex;
      align-items: center;
      min-height: 31px;
      padding: 6px 10px;
      border-radius: 999px;
      color: var(--red);
      background: var(--red-soft);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .event-card.featured .event-date { color: #F2E3B2; background: rgba(255,255,255,.10); }
    .event-type { color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
    .event-card.featured .event-type { color: rgba(255,255,255,.58); }
    .event-card h3 { margin: 20px 0 9px; color: var(--green-950); font-size: 25px; line-height: 1.16; letter-spacing: -.035em; }
    .event-card.featured h3 { max-width: 500px; color: var(--white); font-size: clamp(29px, 3vw, 40px); }
    .event-card p { margin: 0; color: var(--muted); font-size: 13px; }
    .event-card.featured p { max-width: 570px; color: rgba(255,255,255,.70); font-size: 14px; }
    .event-card.featured .text-link { color: #E7D497; }
    .event-links { display: flex; flex-wrap: wrap; gap: 18px; }

    /* ---------- Latest federation news. ---------- */
    .news { background: var(--white); }
    .news-grid {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      gap: 17px;
    }
    .news-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: var(--white);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .news-card:hover { transform: translateY(-5px); border-color: #CBD8D0; box-shadow: var(--shadow-sm); }
    .news-media {
      height: 235px;
      overflow: hidden;
      background: #E8ECE9;
    }
    .news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
    .news-card:hover .news-media img { transform: scale(1.035); }
    .news-body { padding: 24px; }
    .news-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .news-date { color: var(--red); font-size: 10px; font-weight: 880; letter-spacing: .08em; text-transform: uppercase; }
    .news-category { color: var(--gold-dark); font-size: 10px; font-weight: 840; text-transform: uppercase; }
    .news-card h3 {
      min-height: 88px;
      margin: 14px 0 20px;
      color: var(--green-950);
      font-size: 21px;
      line-height: 1.35;
      letter-spacing: -.025em;
    }

    /* ---------- Chess across the Emirates. ---------- */
    .gallery { background: var(--green-50); }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(12,minmax(0,1fr));
      grid-auto-rows: 132px;
      gap: 13px;
    }
    .gallery-item {
      position: relative;
      overflow: hidden;
      border-radius: 19px;
      background: #E4EAE6;
    }
    .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
    .gallery-item:hover img { transform: scale(1.045); }
    .gallery-item::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 45%;
      background: linear-gradient(0deg, rgba(2,43,24,.24), transparent);
      pointer-events: none;
    }
    .g1 { grid-column: span 6; grid-row: span 3; }
    .g2 { grid-column: span 3; grid-row: span 3; }
    .g3 { grid-column: span 3; grid-row: span 3; }
    .g4 { grid-column: span 4; grid-row: span 2; }
    .g5 { grid-column: span 4; grid-row: span 2; }
    .g6 { grid-column: span 4; grid-row: span 2; }

    /* ---------- Everything chess, one move away. ---------- */
    .services { background: var(--white); }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(4,minmax(0,1fr));
      gap: 14px;
    }
    .service-card {
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: var(--white);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .service-card:hover { transform: translateY(-3px); border-color: #CBD8D0; box-shadow: var(--shadow-sm); }
    .service-card h3 { margin: 18px 0 7px; color: var(--green-950); font-size: 17px; }
    .service-card p { min-height: 44px; margin: 0 0 17px; color: var(--muted); font-size: 12px; }

    /* ---------- Supporting the game together. ---------- */
    .partners {
      padding: 72px 0;
      border-top: 1px solid var(--line);
      background: var(--warm);
    }
    .partners-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 28px;
    }
    .partners-head h2 {
      margin: 0;
      color: var(--green-950);
      font-size: clamp(27px,3vw,38px);
      line-height: 1.1;
      letter-spacing: -.035em;
    }
    .partners-head p { max-width: 520px; margin: 0; color: var(--muted); font-size: 13px; text-align: right; }
    .partner-grid {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      gap: 14px;
    }
    .partner-card {
      min-height: 130px;
      display: grid;
      place-items: center;
      padding: 26px;
      border: 1px solid #E5E1D5;
      border-radius: 19px;
      background: var(--white);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .partner-card:hover { transform: translateY(-3px); border-color: #D5CAA7; box-shadow: var(--shadow-sm); }
    .partner-card img {
      width: min(190px, 78%);
      max-height: 68px;
      object-fit: contain;
      filter: grayscale(1);
      opacity: .74;
      transition: filter .2s ease, opacity .2s ease, transform .2s ease;
    }
    .partner-card:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.02); }

    /* ---------- Footer ---------- */
    .site-footer {
      padding: 64px 0 24px;
      color: #CFDBD4;
      background: #071A10;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.35fr repeat(3,.72fr);
      gap: 42px;
    }
    .footer-brand { display: flex; align-items: center; gap: 14px; }
    .footer-brand img { width: 100px; height: 100px; object-fit: contain; }
    .footer-brand strong { display: block; color: var(--white); font-size: 16px; }
    .footer-brand span { display: block; margin-top: 3px; color: #819389; font-size: 11px; }
    .footer-about { max-width: 380px; margin: 20px 0 0; color: #89988F; font-size: 13px; }
    .footer-col h3 { margin: 0 0 14px; color: var(--white); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
    .footer-col a { display: block; width: fit-content; padding: 5px 0; color: #8FA098; font-size: 13px; transition: color .18s ease; }
    .footer-col a:hover { color: var(--white); }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-top: 44px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,.08);
      color: #677970;
      font-size: 11px;
    }

    .back-top {
      position: fixed;
      z-index: 950;
      right: 20px;
      bottom: 20px;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 14px;
      color: var(--white);
      background: var(--green);
      box-shadow: var(--shadow-sm);
      opacity: 0;
      visibility: hidden;
      transform: translateY(9px);
      transition: .2s ease;
    }
    .back-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }

    /* ---------- Scroll reveal ---------- */
    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .65s ease, transform .65s ease;
    }
    .reveal.in { opacity: 1; transform: none; }

    /* ---------- Responsive ---------- */
    @media (max-width: 1120px) {
      .desktop-nav { display: none; }
      .mobile-toggle { display: grid; }
      .quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .events-grid { grid-template-columns: 1fr 1fr; }
      .event-card.featured { grid-column: 1 / -1; }
      .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
      .footer-grid > div:first-child { grid-column: 1 / -1; }
    }

    @media (max-width: 900px) {
      .hero-overlay {
        background:
          linear-gradient(90deg, rgba(0,0,0,.67), rgba(0,0,0,.34)),
          rgba(0,0,0,.18);
      }
      .hero-grid { inset: 0 0 0 35%; }
      .anniv-grid { grid-template-columns: 1fr; gap: 38px; }
      .anniv-visual { min-height: 300px; }
      .about-grid { grid-template-columns: 1fr; gap: 42px; }
      .about-visual { min-height: 430px; }
      .about-visual > img { min-height: 430px; }
      .about .about-visual {
        width: min(100%, 520px);
        min-height: 390px;
        max-height: none;
        aspect-ratio: 4 / 5;
        justify-self: center;
      }
      .about .about-visual > img { min-height: 390px; }
      .president-card { grid-template-columns: 310px 1fr; }
      .impact-heading { align-items: flex-start; flex-direction: column; }
      .impact-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .metric:nth-child(2) { border-right: 0; }
      .metric:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
      .news-grid { grid-template-columns: 1fr; }
      .news-card { display: grid; grid-template-columns: 300px 1fr; }
      .news-media { height: auto; min-height: 250px; }
      .news-card h3 { min-height: 0; }
      .gallery-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 190px; }
      .gallery-item { grid-column: auto !important; grid-row: auto !important; }
      .g1, .g6 { grid-column: span 2 !important; }
    }

    @media (max-width: 700px) {
      .container { width: min(calc(100% - 30px), var(--max)); }
      .topbar-left span:last-child { display: none; }
      .topbar-links a:first-child { display: none; }
      .header-inner { min-height: 74px; gap: 10px; }
      .brand {
        min-height: 74px;
        min-width: 0;
        padding-left: 96px;
      }
      .brand-logo-shell {
        width: 86px;
        height: 86px;
        left: 0;
      }
      .brand-copy { min-width: 0; }
      .brand-copy strong { font-size: 14px; line-height: 1.12; white-space: nowrap; }
      .brand-copy span {
        margin-top: 3px;
        font-size: 8.5px;
        letter-spacing: .09em;
        white-space: nowrap;
      }

      /* Mobile hero uses its dedicated portrait video and fills the device height. */
      .hero-glow { display: none; }
      .hero-inner { padding: 66px 0 92px; }
      .hero h1 { font-size: clamp(41px, 11.5vw, 56px); }
      .hero-lead { max-width: 94%; font-size: 15px; }
      .hero-focus { gap: 8px 13px; }
      .hero-overlay {
        background:
          linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.38) 70%, rgba(0,0,0,.26) 100%),
          linear-gradient(0deg, rgba(0,0,0,.50), transparent 58%),
          rgba(0,0,0,.16);
      }

      section { padding: 68px 0; }
      .section-head { align-items: flex-start; flex-direction: column; }
      .section-title { font-size: clamp(32px,9vw,44px); }
      .anniversary { padding: 54px 0; }
      .anniv-visual { min-height: 250px; padding: 30px; }
      .anniv-logo-stage { width: min(285px, 92%); }
      .anniv-points { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
      .anniv-point { padding: 13px 10px; }
      .anniv-point strong { font-size: 11px; line-height: 1.3; }
      .anniv-point span { font-size: 9px; line-height: 1.35; }

      /* Four featured actions stay compact as a 2 x 2 mobile grid. */
      .quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
      .quick-card { min-height: 188px; padding: 17px; border-radius: 17px; }
      .quick-card .icon-chip { width: 43px; height: 43px; border-radius: 13px; }
      .quick-card .icon-chip .icon { width: 21px; height: 21px; }
      .quick-card h3 { margin: 12px 0 6px; font-size: 15px; line-height: 1.22; }
      .quick-card p { font-size: 10.5px; line-height: 1.42; }
      .quick-card .text-link { margin-top: 13px; font-size: 10.5px; }

      .president-card { grid-template-columns: 1fr; }
      .president-photo { min-height: 420px; max-height: 500px; }
      .president-copy { min-height: 0; }

      /* At-a-glance metrics remain two columns / two rows on phones. */
      .impact { padding: 54px 0; }
      .impact-grid { grid-template-columns: repeat(2,minmax(0,1fr)); border-radius: 20px; }
      .metric { min-height: 158px; padding: 18px; }
      .metric-icon { width: 43px; height: 43px; margin-bottom: 15px; border-radius: 13px; }
      .metric-icon .icon { width: 23px; height: 23px; }
      .metric-value { font-size: clamp(35px,10vw,46px); }
      .metric-label { margin-top: 9px; font-size: 8.5px; letter-spacing: .065em; }

      .events-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
      .event-card { min-height: 300px; padding: 18px; }
      .event-card h3 { font-size: 18px; line-height: 1.18; overflow-wrap: anywhere; }
      .event-card.featured h3 { font-size: clamp(27px,7vw,34px); }
      .event-meta { flex-wrap: wrap; justify-content: flex-start; gap: 7px 9px; }
      .event-type { font-size: 8.5px; letter-spacing: .07em; }
      .event-card .text-link { white-space: normal; font-size: 10px; gap: 4px; }
      .event-card:not(.featured) .text-link .arrow { display: none; }
      .news-card { display: block; }
      .news-media { height: 220px; min-height: 0; }

      /* Mobile gallery: two images per row with an editorial collage rhythm. */
      .gallery-grid {
        grid-template-columns: repeat(6,minmax(0,1fr));
        grid-template-rows: 176px 138px 158px;
        grid-auto-rows: unset;
        gap: 8px;
      }
      .gallery-item { border-radius: 13px; }
      .gallery-item.g1 { grid-column: span 4 !important; }
      .gallery-item.g2 { grid-column: span 2 !important; }
      .gallery-item.g3 { grid-column: span 2 !important; }
      .gallery-item.g4 { grid-column: span 4 !important; }
      .gallery-item.g5 { grid-column: span 3 !important; }
      .gallery-item.g6 { grid-column: span 3 !important; }

      /* Quick Access: exactly two icon cards per row on phones. */
      .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
      .service-card {
        min-height: 146px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15px 11px;
        border-radius: 15px;
        text-align: center;
      }
      .service-card .icon-chip { width: 42px; height: 42px; border-radius: 12px; }
      .service-card .icon-chip .icon { width: 20px; height: 20px; }
      .service-card h3 { margin: 10px 0 7px; font-size: 12px; line-height: 1.24; }
      .service-card p { display: none; }
      .service-card .text-link { margin-top: auto; font-size: 9.5px; gap: 3px; }
      .service-card .text-link .arrow { display: none; }

      .partners-head { align-items: flex-start; flex-direction: column; }
      .partners-head p { text-align: left; }
      /* Three partner marks stay on one row. */
      .partner-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
      .partner-card { min-height: 88px; padding: 12px 8px; border-radius: 13px; }
      .partner-card img { width: 90%; max-height: 48px; }

      .footer-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
      .footer-grid > div:first-child { grid-column: 1 / -1; }
      .footer-bottom { align-items: flex-start; flex-direction: column; }
    }

    @media (max-width: 480px) {
      /* Keep a compact top bar visible on small phones. */
      .topbar {
        font-size: 9px;
      }
      .topbar-inner {
        min-height: 30px;
        gap: 8px;
      }
      .topbar-left {
        min-width: 0;
        flex: 1 1 auto;
        gap: 6px;
      }
      .topbar-left span:first-child { white-space: nowrap; }
      .topbar-links {
        flex: 0 0 auto;
        gap: 8px;
        margin-left: auto;
      }
      .topbar-links a:first-child,
      .topbar-links a:nth-child(2) { display: none; }
      .lang-link {
        font-size: 10px;
        white-space: nowrap;
      }
      .topbar-flag {
        width: 18px;
        height: 12px;
      }
      .container { width: min(calc(100% - 24px), var(--max)); }
      .header-inner { min-height: 74px; }
      .brand {
        min-height: 74px;
        padding-left: 87px;
      }
      .brand-logo-shell {
        width: 78px;
        height: 78px;
        left: 0;
      }
      /* Keep both federation identity lines visible on small phones. */
      .brand-copy { display: block; }
      .brand-copy strong { font-size: 12px; line-height: 1.1; white-space: nowrap; }
      .brand-copy span {
        display: block;
        margin-top: 3px;
        font-size: 7.6px;
        line-height: 1.1;
        letter-spacing: .075em;
        white-space: nowrap;
      }
      .mobile-toggle { width: 41px; height: 41px; flex: 0 0 41px; }

      .hero-inner { padding: 60px 0 82px; }
      .hero h1 { font-size: clamp(38px,10.8vw,49px); }
      .hero-actions { gap: 8px; }
      .hero-actions .btn { padding: 11px 13px; font-size: 11px; }
      .hero-focus { margin-top: 18px; }
      .hero-focus span { font-size: 9px; }

      .anniv-points { gap: 6px; }
      .anniv-point { padding: 11px 8px; }
      .quick-card { min-height: 180px; padding: 15px; }

      .metric { min-height: 150px; padding: 16px; border-right: 1px solid rgba(255,255,255,.12); border-bottom: 0; }
      .metric:nth-child(2n) { border-right: 0; }
      .metric:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }

      .gallery-grid { grid-template-rows: 148px 118px 136px; gap: 7px; }
      .service-card { min-height: 138px; padding: 13px 8px; }
      .service-card h3 { font-size: 11px; }
      .partner-card { min-height: 82px; }
      .footer-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
      .footer-grid > div:first-child { grid-column: 1 / -1; }
      .footer-col h3 { font-size: 10px; margin-bottom: 8px; }
      .footer-col a { font-size: 11px; padding: 3px 0; }
      .about .about-visual { min-height: 330px; }
      .about .about-visual > img { min-height: 330px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .anniv-visual,
      .anniv-logo-stage::before,
      .anniv-logo-stage::after,
      .anniv-starfield i,
      .anniv-visual img { animation: none; }
      .anniv-starfield i { opacity: .30; }
      .loader-emblem,
      .loader-stage::before,
      .loader-stage::after,
      .loader-spark { animation: none; }
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
      .reveal { opacity: 1; transform: none; }
    }

/* ============================================================
 * Arabic / RTL overrides (applies only when <html dir="rtl">)
 * Extracted verbatim from the mockup's index_ar.php.
 * ============================================================ */
    /* ---------- Arabic / RTL ---------- */
    html[dir="rtl"] { direction: rtl; }
    html[dir="rtl"] body {
      direction: rtl;
      text-align: right;
      font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
      line-height: 1.75;
    }

    html[dir="rtl"] .skip-link { left: auto; right: 18px; }
    html[dir="rtl"] .topbar-dot { margin-right: 0; margin-left: 7px; }

    html[dir="rtl"] .lang-toggle {
      color: rgba(255,255,255,.94);
      direction: ltr;
      unicode-bidi: isolate;
      white-space: nowrap;
    }
    html[dir="rtl"] .lang-toggle:hover { color: var(--white); }
    html[dir="rtl"] .uk-flag {
      display: inline-block;
      font-size: 16px;
      line-height: 1;
      transform: translateY(-1px);
    }

    html[dir="rtl"] .brand { padding-left: 0; padding-right: 118px; }
    html[dir="rtl"] .brand-logo-shell { left: auto; right: 0; }
    html[dir="rtl"] .desktop-nav { margin-left: 0; margin-right: auto; }
    html[dir="rtl"] .nav-link.contact-link { margin-left: 0; margin-right: 6px; }
    html[dir="rtl"] .dropdown { left: auto; right: 0; text-align: right; }
    html[dir="rtl"] .mobile-toggle { margin-left: 0; margin-right: auto; }
    html[dir="rtl"] .mobile-submenu { padding: 0 10px 10px 0; }

    html[dir="rtl"] .brand-copy strong,
    html[dir="rtl"] .brand-copy span,
    html[dir="rtl"] .hero-kicker,
    html[dir="rtl"] .section-kicker,
    html[dir="rtl"] .metric-label,
    html[dir="rtl"] .event-date,
    html[dir="rtl"] .event-type,
    html[dir="rtl"] .news-date,
    html[dir="rtl"] .news-category,
    html[dir="rtl"] .footer-col h3 {
      letter-spacing: 0;
      text-transform: none;
    }

    html[dir="rtl"] .hero h1 {
      font-size: clamp(50px, 5.8vw, 80px);
      line-height: 1.14;
      letter-spacing: 0;
    }
    html[dir="rtl"] .section-title {
      font-size: clamp(35px, 4.2vw, 54px);
      line-height: 1.22;
      letter-spacing: 0;
    }
    html[dir="rtl"] .impact-heading h2,
    html[dir="rtl"] .event-card h3,
    html[dir="rtl"] .news-card h3,
    html[dir="rtl"] .partners-head h2 { letter-spacing: 0; }
    html[dir="rtl"] .event-card h3 { line-height: 1.38; }
    html[dir="rtl"] .news-card h3 { line-height: 1.55; }
    html[dir="rtl"] .hero-lead,
    html[dir="rtl"] .section-intro,
    html[dir="rtl"] .anniv-copy > p:not(.section-kicker),
    html[dir="rtl"] .about-copy > p:not(.section-kicker),
    html[dir="rtl"] .president-copy blockquote { line-height: 1.9; }

    html[dir="rtl"] .loader-caption {
      font-size: 10px;
      letter-spacing: 0;
      text-transform: none;
    }

    html[dir="rtl"] .hero-overlay {
      background:
        linear-gradient(270deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.50) 42%, rgba(0,0,0,.26) 72%, rgba(0,0,0,.18) 100%),
        linear-gradient(0deg, rgba(0,0,0,.52), transparent 54%),
        rgba(0,0,0,.18);
    }
    html[dir="rtl"] .hero-grid { inset: 0 52% 0 0; mask-image: linear-gradient(270deg, transparent, #000 25%, #000); }
    html[dir="rtl"] .hero-glow { right: auto; left: -220px; }
    html[dir="rtl"] .metric-value,
    html[dir="rtl"] time { direction: ltr; unicode-bidi: isolate; }

    html[dir="rtl"] .text-link:hover .arrow { transform: translateX(-3px); }
    html[dir="rtl"] .btn .icon { transform: scaleX(-1); }
    html[dir="rtl"] .anniversary::before { right: auto; left: -170px; }
    html[dir="rtl"] .quick-card::after { right: auto; left: -48px; }
    html[dir="rtl"] .president-copy::before { right: auto; left: 42px; }
    html[dir="rtl"] .impact::after { inset: 0 52% 0 0; }
    html[dir="rtl"] .partners-head p { text-align: right; }
    html[dir="rtl"] .back-top { right: auto; left: 20px; }

    @media (max-width: 900px) {
      html[dir="rtl"] .hero-overlay {
        background:
          linear-gradient(270deg, rgba(0,0,0,.67), rgba(0,0,0,.34)),
          rgba(0,0,0,.18);
      }
      html[dir="rtl"] .hero-grid { inset: 0 35% 0 0; }
    }

    @media (max-width: 700px) {
      html[dir="rtl"] .brand { padding-left: 0; padding-right: 96px; }
      html[dir="rtl"] .hero h1 { font-size: clamp(40px, 10.5vw, 54px); line-height: 1.18; }
      html[dir="rtl"] .section-title { font-size: clamp(31px, 8.6vw, 43px); line-height: 1.24; }
      html[dir="rtl"] .hero-overlay {
        background:
          linear-gradient(270deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.38) 70%, rgba(0,0,0,.26) 100%),
          linear-gradient(0deg, rgba(0,0,0,.50), transparent 58%),
          rgba(0,0,0,.16);
      }
    }

    @media (max-width: 480px) {
      /* Keep a compact but visible topbar on phones. */
      html[dir="rtl"] .topbar-inner {
        gap: 10px;
      }
      html[dir="rtl"] .topbar-left {
        min-width: 0;
        flex: 1 1 auto;
      }
      html[dir="rtl"] .topbar-left span:first-child {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
      }
      html[dir="rtl"] .topbar-links > a:not(.lang-link) { display: none; }
      html[dir="rtl"] .topbar-links {
        flex: 0 0 auto;
        justify-content: flex-end;
        gap: 0;
      }
      html[dir="rtl"] .lang-link { gap: 5px; font-size: 11px; }
      html[dir="rtl"] .brand { padding-left: 0; padding-right: 87px; }
      html[dir="rtl"] .brand-copy strong { font-size: 12px; line-height: 1.35; }
      html[dir="rtl"] .brand-copy span { font-size: 8px; line-height: 1.35; }
      html[dir="rtl"] .hero h1 { font-size: clamp(36px, 10vw, 47px); }
    }