/* Annual Report 2025 — head inline styles, extracted from the static design */
  :root {
    --bg-deep: #1f3a93;
    --bg-deeper: #142573;
  }
  html, body, button, input, select, textarea {
    font-family: "Inter", sans-serif !important;
  }
  html, body {
    margin: 0;
    padding: 0;
    background: var(--white, #ffffff);
  }

  /* ============ Full-page section-by-section scroll snapping ============
     The document scroller gently snaps each top-level section to the top of
     the viewport. We use `proximity` (not `mandatory`) so the snap only kicks
     in when the user is already near a boundary — they can scroll freely and
     rest mid-section to read tall content (charts, the report list) without
     the engine yanking them to the next section. Snapping is disabled
     entirely on touch devices (see media query below) because momentum/
     overscroll on phones fights any snap and skips content. */
  html {
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    scroll-padding-top: 0;
  }
  .stage,
  .leadership-section,
  .financial-section,
  .pillars-section,
  .featured-section,
  .plan-section,
  .report-section {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    min-height: 100vh;
  }
  /* Touch devices: turn snapping off so phones scroll naturally and users can
     reach the bottom of tall sections without overscroll skipping ahead. */
  @media (pointer: coarse), (max-width: 768px) {
    html { scroll-snap-type: none; }
  }
  /* Center each section's content vertically within its full-height frame */
  .leadership-section,
  .financial-section,
  .pillars-section,
  .featured-section,
  .plan-section,
  .report-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-snap-type: none; scroll-behavior: auto; }
  }

  /* Controls panel */
  .controls {
    display: none;
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 50;
    width: 240px;
    padding: 14px 16px 16px;
    background: rgba(10, 18, 50, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    color: #ffffff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 12px;
    letter-spacing: 0.06em;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    user-select: none;
  }
  .controls h3 {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.75;
  }
  .controls .row {
    margin-bottom: 10px;
  }
  .controls .row:last-child { margin-bottom: 0; }
  .controls .row .label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
  }
  .controls .row .label span:first-child {
    opacity: 0.85;
  }
  .controls .row .label span:last-child {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    opacity: 0.95;
  }
  .controls input[type="range"] {
    width: 100%;
    accent-color: #cfe3ff;
    cursor: pointer;
  }

  .stage {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: radial-gradient(ellipse at center 50%, var(--bg-deep) 0%, var(--bg-deeper) 80%);
  }
  .pins {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.45;
    display: none;
  }
  .floor-rays {
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    pointer-events: none;
    opacity: 0.55;
    display: none;
  }
  .stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  /* Static slow-blinking starfield (behind the shooting stars) */
  .bg-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  .bg-stars .bstar {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle,
      #ffffff 0%,
      rgba(214, 230, 255, 0.85) 45%,
      rgba(160, 195, 255, 0) 100%);
    box-shadow: 0 0 4px 1px rgba(200, 220, 255, 0.45);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation-name: bstarBlink;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    will-change: opacity, transform;
  }
  @keyframes bstarBlink {
    0%, 100% { opacity: var(--lo, 0.08); transform: translate(-50%, -50%) scale(0.85); }
    50%      { opacity: var(--hi, 0.7);  transform: translate(-50%, -50%) scale(1.1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .bg-stars .bstar { animation: none; opacity: var(--hi, 0.5); }
  }
  .static-tails {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.7s ease;
  }
  .static-tails.ready { opacity: 1; }
  .hero-logo-mark {
    position: absolute;
    left: 50%;
    top: 72%;
    transform: translate(-50%, -100%);
    width: min(35.64vw, 468px);
    height: auto;
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 0 24px rgba(160, 200, 255, 0.35))
            drop-shadow(0 0 60px rgba(120, 160, 230, 0.2));
  }
  .hero-title-text {
    position: absolute;
    left: 50%;
    top: 63%;
    transform: translate(-50%, 28px);
    z-index: 5;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2.5vw, 36px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    text-shadow:
      0 2px 14px rgba(20, 37, 115, 0.55),
      0 0 30px rgba(140, 180, 240, 0.25);
  }
  .hero-title-text::before,
  .hero-title-text::after {
    content: "";
    display: inline-block;
    width: clamp(40px, 8vw, 110px);
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
    vertical-align: middle;
    margin: 0 18px 5px;
  }

  /* Mobile tuning for the title + CTA */
  @media (max-width: 640px) {
    .hero-logo-mark {
      top: 50%;
      width: min(65vw, 320px);
      transform: translate(-50%, -78%);
    }
    .hero-title-text {
      top: 50%;
      transform: translate(-50%, 60px);
      font-size: clamp(14px, 4.4vw, 22px);
      letter-spacing: 0.20em;
    }
    .hero-title-text::before,
    .hero-title-text::after {
      width: clamp(28px, 9vw, 60px);
      margin: 0 10px 4px;
    }
    .hero-cta-wrap {
      top: 50%;
      transform: translate(-50%, 110px);
    }
    .hero-cta-wrap .hero-cta {
      padding: 13px 26px;
      font-size: 14px;
      white-space: nowrap;
      min-width: max-content;
    }
  }
  @media (max-width: 380px) {
    .hero-logo-mark {
      width: min(72vw, 280px);
      transform: translate(-50%, -82%);
    }
    .hero-title-text {
      font-size: 13px;
      transform: translate(-50%, 52px);
    }
    .hero-cta-wrap {
      transform: translate(-50%, 100px);
    }
  }
  /* Tablet tuning (iPad mini, etc.): raise the logo so its baked-in
     "Years of Excellence" line clears the ANNUAL REPORT 2025 title. */
  @media (min-width: 641px) and (max-width: 1024px) {
    .hero-logo-mark {
      top: 62%;
      width: min(48vw, 420px);
    }
  }
  /* Desktop (≥1025px, incl. 1920×1080): raise the logo so its baked-in
     "Years of Excellence" line clears the ANNUAL REPORT 2025 title with a
     comfortable gap instead of overlapping it. */
  @media (min-width: 1025px) {
    .hero-logo-mark {
      top: 61%;
    }
  }
  .hero-cta-wrap {
    position: absolute;
    left: 50%;
    top: 78%;
    transform: translateX(-50%);
    z-index: 5;
  }
  .hero-cta-wrap .hero-cta {
    background: #ffffff;
    color: var(--primary-blue, #2e5cb8);
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.15);
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .hero-cta-wrap .hero-cta:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.2);
  }

  /* Language selector */
  .lang-select {
    position: absolute;
    top: 22px;
    right: 28px;
    z-index: 20;
    font-family: inherit;
  }
  .site-logo {
    position: absolute;
    top: 15px;
    left: 18px;
    z-index: 20;
    display: flex;
    align-items: center;
  }
  .site-logo img {
    height: 58px;
    width: auto;
    display: block;
  }
  .lang-select-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    background: #f6f0e9;
    color: #1f3a7a;
    border: 1.5px solid rgba(31, 58, 122, 0.18);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  }
  .lang-select-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  }
  .lang-select-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 200ms ease;
  }
  .lang-select.open .lang-select-btn svg {
    transform: rotate(180deg);
  }
  .lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 100%;
    background: #f6f0e9;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
    padding: 6px;
    list-style: none;
    margin: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
  }
  .lang-select.open .lang-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .lang-menu li {
    border-radius: 12px;
    white-space: nowrap;
    overflow: hidden;
  }
  /* The menu items are <a> links rendered by the language-link tag helper. */
  .lang-menu li a,
  .lang-menu li .dropdown-item {
    display: block;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
    color: #1f3a7a;
    text-decoration: none;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
  }
  /* Hover and the currently selected language: solid dark blue with white text. */
  .lang-menu li:hover a,
  .lang-menu li:hover .dropdown-item,
  .lang-menu li[aria-selected="true"] a,
  .lang-menu li[aria-selected="true"] .dropdown-item {
    background: #1f3a7a;
    color: #fff;
  }
  .static-tail {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    transform-origin: top center;
    background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(220, 235, 255, 0.5) 30%,
      rgba(180, 210, 255, 0.18) 65%,
      rgba(180, 210, 255, 0) 100%);
    filter: blur(0.5px);
    border-radius: 2px;
  }
  .star {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 4px;
    transform: translate(var(--x, 0px), var(--y, 0px));
    will-change: transform;
  }
  .star .head {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--scale, 1));
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #e8f0ff 35%, rgba(180, 210, 255, 0.6) 60%, rgba(180, 210, 255, 0) 100%);
    box-shadow:
      0 0 9px 3px rgba(255, 255, 255, 0.9),
      0 0 24px 7px rgba(170, 200, 255, 0.55),
      0 0 56px 14px rgba(120, 160, 230, 0.35);
  }
  .star .tail {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2.2px;
    height: var(--tail, 80px);
    transform: translate(-50%, 0);
    transform-origin: top center;
    background: linear-gradient(to bottom,
      rgba(255, 255, 255, 1) 0%,
      rgba(220, 235, 255, 0.7) 25%,
      rgba(180, 210, 255, 0.3) 60%,
      rgba(180, 210, 255, 0) 100%);
    filter: blur(0.5px);
    border-radius: 2px;
    pointer-events: none;
  }