@font-face {
      font-family: 'Lusail';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('/assets/fonts/Lusail%20Font/WOFF/Lusail-Regular.woff2') format('woff2'),
           url('/assets/fonts/Lusail%20Font/WOFF/Lusail-Regular.woff') format('woff'),
           url('/assets/fonts/Lusail%20Font/TTF/Lusail-Regular.ttf') format('truetype');
    }
    @media (max-width: 767px) {
      #projects .projects-map-wrap {
        border-radius: 10px;
        overflow: hidden;
      }
      #projects .projects-card-list-wrap {
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.08);
        padding: var(--space-lg) var(--space-sm) var(--space-lg);
        margin-top: var(--space-2xl);
        height: auto;
        min-height: auto;
      }
    }
    @font-face {
      font-family: 'Lusail Light';
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url('/assets/fonts/Lusail%20Font/Lusail-Light.otf') format('opentype');
    }
    /* ─── Reset ─────────────────────────────────── */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { overflow-x: hidden; }
    body { font-family: Lusail, sans-serif; color: #333; overflow-x: hidden; max-width: 100%; }
    img { max-width: 100%; display: block; }
    a { text-decoration: none; color: inherit; }

    /* ─── Brand Tokens + Responsive (fluid spacing, breakpoints) ───────────────────────────── */
    :root {
      --font-lusail: 'Lusail', Lusail, sans-serif;
      --color-primary: #003366;
      --color-secondary: #C9A84C;
      --color-dark: #1A1A2E;
      --color-white: #ffffff;
      --color-light-gray: #F5F5F5;
      --color-text: #333333;
      --color-text-light: #666666;
      --container-max: 1400px;
      --section-padding: 80px 0;
      --section-padding-y: clamp(2.5rem, 6vw, 5rem);
      /* Breakpoints: XS 639, SM 767, MD 1023, LG 1279, XL 1536; viewports 393/428/430, 768, 800, 900, 950, 1440, 1600 */
      --bp-xs: 639px;
      --bp-sm: 767px;
      --bp-800: 800px;
      --bp-900: 900px;
      --bp-950: 950px;
      --bp-md: 1023px;
      --bp-lg: 1279px;
      --bp-xl: 1536px;
      /* Spacing tokens (Responsive-Skill §5) */
      --space-xs: 4px;
      --space-sm: 8px;
      --space-md: 16px;
      --space-lg: 24px;
      --space-xl: 32px;
      --space-2xl: 48px;
      --space-3xl: 64px;
      --space-4xl: 80px;
      --space-5xl: 96px;
      --space-6xl: 112px;
      --space-7xl: 128px;
      --space-8xl: 144px;
      --space-9xl: 160px;
      --space-10xl: 176px;
      /* Navbar padding: scales with viewport */
      --navbar-padding-x: clamp(1rem, 1.5rem + 2.5vw, 6rem);
      --navbar-padding-x-sm: clamp(1rem, 1rem + 1.5vw, 1.5rem);
      --navbar-padding-x-xs: clamp(0.75rem, 0.5rem + 2vw, 1.25rem);
      --navbar-padding-y: clamp(0.5rem, 0.5rem + 0.5vw, 1rem);
      --utility-bar-gap: clamp(16px, 1.5vw + 14px, 27px);
      /* Navbar: dark blue bar with subtle texture (match reference) */
      --nav-bg: transparent;
      --nav-text: #ffffff;
      --nav-text-muted: rgba(255, 255, 255, 0.9);
      --nav-hover: rgba(255, 255, 255, 0.15);
      --utility-arabic-bg: rgba(255, 255, 255, 0.95);
      --utility-arabic-text: #1a1a2e;
      /* Hero overlay — Figma Rectangle 29 (node 2001-262) */
      --hero-overlay-bg: #00417B;
      /* Navbar height: used so hero content is centered between navbar bottom and hero bottom */
      --navbar-height: calc(104px + 2 * var(--navbar-padding-y));
      --floating-badge-top: 42%;
      --floating-badge-width: 96px;
      --floating-badge-height: 84px;
      --floating-badge-gap: 16px;
      --floating-badge-border: 18px;
      --anniversary-badge-image-size: 80px;
      --anniversary-badge-image-size-mobile: 60px;
    }

    /* ─── Shared Utilities ───────────────────────── */
    /* Same horizontal padding as navbar applied to all sections */
    section {
      padding-left: calc(2 * var(--navbar-padding-x));
      padding-right: calc(2 * var(--navbar-padding-x));
      box-sizing: border-box;
    }
    #hero {
      padding-left: 0;
      padding-right: 0;
    }
    .container {
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 24px;
    }
    .btn-primary {
      background: var(--color-white);
      color: var(--color-primary);
      padding: 16px 24px;
      border: none;
      cursor: pointer;
      font-family: var(--font-lusail);
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      min-height: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .btn-outline {
      background: transparent;
      color: var(--color-white);
      padding: 16px 24px;
      border: 2px solid var(--color-white);
      cursor: pointer;
      font-family: var(--font-lusail);
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      min-height: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* ─── Navbar: 2-col grid 10% | 90%; right col = 2-row grid (utility) | (nav items) + line ────── */
    .navbar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      background: var(--nav-bg);
      color: var(--nav-text);
      width: 100%;
      box-sizing: border-box;
    }
    .navbar-inner {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      padding-top: var(--navbar-padding-y);
      padding-bottom: var(--navbar-padding-y);
      padding-left: calc(2 * var(--navbar-padding-x));
      padding-right: calc(2 * var(--navbar-padding-x));
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto;
      align-items: center;
      gap: clamp(0.5rem, 0.5rem + 0.5vw, 1rem);
    }
    .navToggle {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 44px;
      height: 44px;
      padding: 10px;
      background: transparent;
      border: none;
      cursor: pointer;
      color: #fff;
      align-self: center;
    }
    .navToggle:hover { opacity: 0.9; }
    .navToggleBar {
      display: block;
      width: 22px;
      height: 2px;
      background: currentColor;
      border-radius: 1px;
      transition: transform 0.2s, opacity 0.2s;
    }
    .navbar--open .navToggleBar:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .navbar--open .navToggleBar:nth-child(2) { opacity: 0; }
    .navbar--open .navToggleBar:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }
    .navDrawerBackdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 999;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .navDrawerClose {
      display: none;
    }
    .navLogo {
      display: flex;
      align-items: center;
      padding: 0;
      margin: 0;
      align-self: center;
      flex-shrink: 0;
      min-width: 0;
    }
    .navRight {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      max-width: var(--container-max);
      margin-left: auto;
      width: 100%;
      min-height: 100%;
      min-width: 0;
      overflow: hidden;
      grid-column: 2;
      grid-row: 1;
    }
    /* Frame 12: Utility bar */
    .utilityBar {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
      padding: 0;
      margin-bottom: clamp(0.35rem, 0.3rem + 0.3vw, 0.5rem);
      gap: var(--utility-bar-gap);
      height: 32px;
      min-height: 32px;
    }
    /* Frame 3: Aa- / Aa+ group */
    .utilityBarFontSize {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0;
      gap: 24px;
      width: 98px;
      height: 24px;
      flex: none;
      flex-grow: 0;
    }
    .navDivider {
      width: 100%;
      height: 1px;
      margin: 0;
      border: none;
      background: rgba(255, 255, 255, 0.25);
    }
    .navItemsRow {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;
      padding: clamp(0.25rem, 0.2rem + 0.3vw, 0.5rem) 0 clamp(0.4rem, 0.3rem + 0.3vw, 0.75rem) 0;
      margin: 0;
      min-height: 40px;
    }
    /* Frame 1 / Frame 2: Aa- and Aa+ buttons */
    .utilityItem {
      color: #ffffff;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      font-family: Lusail, sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16px;
      line-height: 24px;
      text-decoration: none;
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: 4px;
      height: 24px;
      flex: none;
      flex-grow: 0;
      transition: opacity 0.2s;
    }
    .utilityItem:hover { opacity: 0.9; }
    .utilityItem[aria-label] { min-width: 2rem; text-align: center; }
    .utilityItemIcon { gap: 0; }
    /* Language switch (Figma Frame 11): icon + العربية */
    /* Frame 11: Language switcher button */
    .utilityItemArabic {
      box-sizing: border-box;
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 6px 12px;
      gap: 6px;
      width: auto;
      min-width: 80px;
      height: 32px;
      border: 1px solid rgba(255, 255, 255, 0.7);
      background: transparent;
      color: #ffffff;
      font-family: Lusail, sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 13px;
      line-height: 20px;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      flex: none;
      flex-grow: 0;
      border-radius: 4px;
      transition: all 0.2s ease;
    }
    .utilityItemArabic:hover { 
      opacity: 0.9; 
      border-color: rgba(255, 255, 255, 0.9);
      transform: translateY(-1px);
    }
    .languageSwitchIcon {
      width: 16px;
      height: 16px;
      flex: none;
      display: block;
      flex-grow: 0;
      display: block;
    }
    .utilityIcon {
      width: 24px;
      height: 24px;
      flex: none;
      display: block;
    }
    .logoLink {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      text-decoration: none;
      color: inherit;
    }
    .logo {
      width: 220px;
      height: 104px;
      display: block;
      object-fit: contain;
      max-width: 100%;
    }
    .navLinks {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      justify-content: space-between;
      gap: 16px;
      width: 100%;
      height: 24px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .navItemsRow .navLinks {
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }
    .navLink {
      padding: 0;
      margin: 0;
    }
    /* Nav items text: Lusail 400 Regular, 18px / 24px, uppercase */
    .navLink a {
      color: var(--nav-text-muted);
      text-decoration: none;
      font-family: Lusail, sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 18px;
      line-height: 24px;
      letter-spacing: 0;
      text-transform: uppercase;
      padding: 0.35rem 0.6rem;
      border-radius: 2px;
      transition: color 0.2s, background 0.2s;
    }
    .navLink a:hover {
      color: var(--nav-text);
      background: var(--nav-hover);
    }

    /* Press Room dropdown */
    .navLink--dropdown { position: static; }
    .navDropdown-trigger {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      padding: 0.35rem 0.6rem;
      border: none;
      border-radius: 2px;
      background: transparent;
      cursor: pointer;
      font-family: Lusail, sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 18px;
      line-height: 24px;
      letter-spacing: 0;
      text-transform: uppercase;
      color: var(--nav-text-muted);
      transition: color 0.2s, background 0.2s;
    }
    .navDropdown-trigger:hover,
    .navLink--dropdown:hover .navDropdown-trigger,
    .navLink--dropdown:focus-within .navDropdown-trigger {
      color: var(--nav-text);
      background: var(--nav-hover);
    }
    .navDropdown-trigger.active {
      color: var(--nav-text);
      background: var(--nav-hover);
    }
    .navDropdown-chevron {
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: 2px;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid currentColor;
      opacity: 0.85;
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }
    .navLink--dropdown.is-open .navDropdown-chevron {
      transform: rotate(180deg);
    }
    .navDropdown {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    @media (min-width: 1024px) {
      .navLink--dropdown { position: relative; }
      .navDropdown {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        min-width: 220px;
        padding: 8px 0;
        background: #ffffff;
        border-radius: 4px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
        z-index: 2000;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s ease;
        pointer-events: none;
      }
      .navLink--dropdown:hover .navDropdown,
      .navLink--dropdown:focus-within .navDropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }
      .navDropdown a {
        display: block;
        padding: 10px 18px;
        font-family: Lusail, sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        text-transform: uppercase;
        color: #00417B;
        border-radius: 0;
        text-decoration: none;
        transition: background 0.15s;
      }
      .navDropdown a:hover {
        color: #00417B;
        background: rgba(0, 65, 123, 0.08);
      }
      .navDropdown a.active {
        background: rgba(0, 65, 123, 0.12);
        font-weight: 500;
      }
      .navLink--dropdown.is-open .navDropdown-trigger,
      .navLink--dropdown .navDropdown-trigger.active {
        color: #00417B;
        background: rgba(255, 255, 255, 0.95);
      }
      .navRight,
      .navItemsRow,
      .navLinks {
        overflow: visible;
      }
      .navLink--dropdown::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 14px;
      }
    }

    /* ─── Hero (mirrors HeroBanner.module.scss) ─── */
    /* Wrapper: navbar + hero = 85vh */
    .hero-banner {
      min-height: 85vh;
      min-height: 85dvh;
      height: 85vh;
      height: 85dvh;
      position: relative;
      overflow: hidden;
    }
    #hero {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
    }
    /* Band from navbar bottom to hero bottom: content vertically centered in this band */
    #hero .hero-content-band {
      position: absolute;
      top: var(--navbar-height);
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      padding: 0 calc(2 * var(--navbar-padding-x));
      box-sizing: border-box;
      z-index: 1;
    }
    /* Figma Rectangle 29: 1920×740, #00417B, mix-blend-mode: multiply */
    #hero .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: linear-gradient(180deg, rgba(0, 65, 123, 0.82) 0%, rgba(0, 65, 123, 0.82) 100%);
      mix-blend-mode: multiply;
    }
    /* Hero content: left-aligned per Figma frame 2001-262; base = 2XL (≥1536px, ref 2160×1440) */
    #hero .content {
      font-family: var(--font-lusail);
      position: relative;
      z-index: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-md);
      padding-left: 0;
      padding-right: 0;
      max-width: 760px;
      width: 100%;
    }
    @keyframes heroContentIn {
      from {
        opacity: 0;
        transform: translateY(16px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    #hero .headline { animation: heroContentIn 0.6s ease-out 0.05s both; }
    #hero .description { animation: heroContentIn 0.6s ease-out 0.2s both; }
    #hero .ctaGroup { animation: heroContentIn 0.6s ease-out 0.35s both; }
    /* Headline: Lusail 400 Regular, reduced desktop size */
    #hero .headline {
      font-family: var(--font-lusail);
      font-weight: 400;
      font-style: normal;
      font-size: 92px;
      line-height: 82px;
      letter-spacing: 0;
      color: var(--color-white);
      margin: 0 0 1rem;
      max-width: none;
      text-shadow: 0 3px 10px rgba(0, 38, 66, 0.3);
    }
    /* Span (Urban Living): Barwa gold accent per Figma hero */
    #hero .headline .headlineHighlight {
      font-family: var(--font-lusail);
      font-weight: 400;
      font-style: normal;
      font-size: inherit;
      line-height: inherit;
      letter-spacing: 0;
      /* color: var(--color-secondary); */
      /* No padding-inline-start: on wrap, left padding indents the first letter of the new line */
      padding: 0.05em 0.12em 0.02em 0;
      display: inline;
    }
    /* Description: first line ends at "value through", then second line; 24px */
    #hero .description {
      font-family: 'Lusail Light', var(--font-lusail);
      font-weight: 300;
      font-style: normal;
      font-size: 24px;
      line-height: 32px;
      color: var(--color-white);
      margin: 0;
      max-width: 100%;
      opacity: 0.95;
      text-shadow: 0 3px 8px rgba(0, 38, 66, 0.28);
    }
    #hero .ctaGroup {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-md);
      margin-top: var(--space-lg);
    }
    #hero .btnPrimary {
      font-family: var(--font-lusail);
      font-weight: 500;
      font-style: normal;
      letter-spacing: 0.02em;
      background: var(--color-white);
      color: var(--color-primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      line-height: 24px;
      min-height: 56px;
      padding: 16px 24px;
      border-radius: 2px;
      text-decoration: none;
      border: 1px solid var(--color-primary);
      transition: opacity 0.2s, background 0.2s;
    }
    #hero .btnPrimary:hover {
      opacity: 0.92;
      background: rgba(255, 255, 255, 0.95);
    }
    #hero .btnSecondary {
      font-family: var(--font-lusail);
      font-weight: 500;
      font-style: normal;
      letter-spacing: 0.02em;
      background: transparent;
      color: var(--color-white);
      border: 1px solid var(--color-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      line-height: 24px;
      min-height: 56px;
      padding: 16px 24px;
      border-radius: 2px;
      text-decoration: none;
      transition: opacity 0.2s, background 0.2s;
    }
    #hero .btnSecondary:hover {
      opacity: 0.92;
      background: rgba(255, 255, 255, 0.1);
    }
    .share-value-pinned {
      position: fixed;
      right: 0;
      z-index: 950;
      width: var(--floating-badge-width);
      min-height: var(--floating-badge-height);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 26%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(155deg, #0A4E8A 0%, #00417B 52%, #002F58 100%);
      border-top: 1px solid rgba(255, 255, 255, 0.16);
      border-bottom: 1px solid rgba(255, 255, 255, 0.16);
      border-left: 1px solid rgba(255, 255, 255, 0.16);
      border-right: none;
      color: #ffffff;
      display: flex;
      box-sizing: border-box;
      font-family: var(--font-lusail);
      box-shadow:
        0 18px 34px rgba(0, 27, 51, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -10px 18px rgba(0, 0, 0, 0.16);
      transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
      transform: translateX(0);
      overflow: hidden;
      top: calc(var(--floating-badge-top) - 20px);
      text-decoration: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 6px;
      padding: 8px 0 10px;
      text-align: center;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .custom-flag {
      position: fixed;
      top: calc(var(--floating-badge-top) - 130px);
      right: 0;
      z-index: 950;
      background: transparent;
      display: flex;
      flex-direction: column;
      gap: 0;
      width: var(--floating-badge-width);
      box-sizing: border-box;
      font-family: var(--font-lusail);
      pointer-events: none;
      overflow: hidden;
    }
    .share-value-pinned::before {
      display: none;
    }
    .share-value-pinned:hover {
      transform: translateX(0);
      box-shadow:
        0 22px 40px rgba(0, 27, 51, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -10px 18px rgba(0, 0, 0, 0.16);
      filter: saturate(1.04) brightness(1.02);
    }
    .custom-flag .flag-body {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 26%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(155deg, #0A4E8A 0%, #00417B 52%, #002F58 100%);
      width: 100%;
      min-height: var(--floating-badge-height);
      border-top: 1px solid rgba(255, 255, 255, 0.16);
      border-bottom: 1px solid rgba(255, 255, 255, 0.16);
      border-left: 1px solid rgba(255, 255, 255, 0.16);
      border-right: none;
      padding: 8px 0 10px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      border-radius: 10px 0 0 10px;
      box-shadow:
        0 18px 34px rgba(0, 27, 51, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -10px 18px rgba(0, 0, 0, 0.16);
    }
    .custom-flag .flag-badge-img {
      width: var(--anniversary-badge-image-size);
      height: auto;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.16));
      transform: translateX(-5px);
    }
    .share-value-pinned-label {
      margin: 0;
      font-size: 9px;
      line-height: 1.1;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      opacity: 0.9;
      position: relative;
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
    }
    .share-value-pinned-value {
      margin: 0;
      font-size: 20px;
      line-height: 1;
      font-weight: 600;
      letter-spacing: 0;
      font-family: "Segoe UI", Arial, sans-serif;
      font-variant-numeric: tabular-nums lining-nums;
      font-feature-settings: "tnum" 1, "lnum" 1;
      direction: ltr;
      unicode-bidi: isolate;
      white-space: nowrap;
      text-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
      position: relative;
    }
    /* Hero responsive: Responsive-Skill breakpoints; reference 2160×1440 (2XL) = 88px/24px */
    /* XL: 1280–1535px */
    @media (max-width: 1535px) {
      #hero .content { padding: var(--space-2xl) var(--space-lg) var(--space-3xl); }
      #hero .headline { font-size: 84px; line-height: 78px; }
      #hero .description { font-size: 22px; }
      #hero .ctaGroup { gap: var(--space-md); margin-top: var(--space-lg); }
    }
    /* LG: 1024–1279px */
    @media (max-width: 1279px) {
      :root { --navbar-height: calc(86px + 2 * var(--navbar-padding-y)); }
      .hero-banner { min-height: 100vh; height: auto; }
      #hero .content { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
      #hero .headline { font-size: 70px; line-height: 66px; }
      #hero .description { font-size: 20px; }
      #hero .ctaGroup { gap: var(--space-md); margin-top: var(--space-lg); }
    }
    /* MD: 768–1023px */
    @media (max-width: 1023px) {
      :root { --navbar-height: calc(66px + 2 * var(--navbar-padding-y)); }
      .hero-banner { min-height: 100vh; height: auto; }
      #hero .content { padding: var(--space-lg) var(--space-md) var(--space-xl); }
      #hero .headline { font-size: 52px; line-height: 50px; }
      #hero .description { font-size: 18px; }
      #hero .ctaGroup { gap: var(--space-sm); margin-top: var(--space-md); }
      .share-value-pinned { display: none; }
    }
    /* SM: 640–767px */
    @media (max-width: 767px) {
      :root { --navbar-height: calc(62px + 2 * var(--navbar-padding-y)); }
      .hero-banner { min-height: 100vh; height: auto; }
      /* Match #about .about-content-col (≤1023): horizontal inset on band only */
      #hero .content {
        padding: var(--space-xl) 0 var(--space-lg);
        max-width: 420px;
        gap: var(--space-sm);
      }
      #hero .headline { font-size: clamp(44px, 8vw, 56px); line-height: 1.08; }
      #hero .description { font-size: 17px; line-height: 1.55; }
      #hero .ctaGroup {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--space-sm);
        margin-top: 0;
        width: 100%;
        max-width: 100%;
      }
      #hero .btnPrimary,
      #hero .btnSecondary {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        text-align: center;
        font-size: clamp(15px, 3.5vw, 18px);
        line-height: 1.35;
        white-space: normal;
        box-sizing: border-box;
      }
      .custom-flag { display: none; }
    }
    /* XS: <640px — headline / subtext balance (~360–430px handsets) */
    @media (max-width: 639px) {
      :root { --navbar-height: calc(52px + 2 * var(--navbar-padding-y)); }
      .hero-banner { min-height: 100vh; height: auto; }
      /* Match #about .about-content-col (≤639): same vertical rhythm, horizontal on band only */
      #hero .content {
        padding: var(--space-lg) 0 var(--space-lg);
        max-width: min(100%, 26rem);
        gap: var(--space-md);
      }
      #hero .headline {
        font-size: clamp(32px, 9.5vw, 44px);
        line-height: 1.1;
        letter-spacing: -0.02em;
        overflow-wrap: anywhere;
        margin-bottom: 0;
      }
      #hero .description {
        font-size: clamp(16px, 4.35vw, 18px);
        line-height: 1.58;
        max-width: 36em;
      }
      #hero .ctaGroup {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--space-xs);
        margin-top: 0;
        width: 100%;
        max-width: 100%;
      }
      #hero .btnPrimary,
      #hero .btnSecondary {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        text-align: center;
        font-size: clamp(14px, 4.2vw, 17px);
        line-height: 1.35;
        padding: 12px 10px;
        white-space: normal;
        box-sizing: border-box;
      }
      .custom-flag { display: none; }
    }

    /* ─── Navbar responsive: same breakpoints as hero (Responsive-Skill) ───────────────────────── */
    /* LG: 1024–1279px */
    @media (max-width: 1279px) {
      .navbar-inner,
      section {
        padding-left: calc(2 * var(--navbar-padding-x-sm));
        padding-right: calc(2 * var(--navbar-padding-x-sm));
      }
      #hero { padding-left: 0; padding-right: 0; }
      #hero .hero-content-band {
        padding-left: calc(2 * var(--navbar-padding-x-sm));
        padding-right: calc(2 * var(--navbar-padding-x-sm));
        box-sizing: border-box;
      }
      #hero .content { margin-left: 0; }
      .navbar-inner {
        padding-top: var(--navbar-padding-y);
        padding-bottom: var(--navbar-padding-y);
        grid-template-columns: auto 1fr;
      }
      .logo { width: 200px; height: 96px; }
      .navLinks { gap: var(--space-md); }
      .navLink a { font-size: 18px; line-height: 24px; }
      .utilityBar { gap: var(--utility-bar-gap); }
    }
    /* MD: 768–1023px — drawer, hamburger */
    @media (max-width: 1023px) {
      .navbar-inner,
      section {
        padding-left: calc(2 * var(--navbar-padding-x-sm));
        padding-right: calc(2 * var(--navbar-padding-x-sm));
      }
      #hero { padding-left: 0; padding-right: 0; }
      .navbar-inner {
        padding-top: var(--navbar-padding-y);
        padding-bottom: var(--navbar-padding-y);
        grid-template-columns: auto 1fr;
        grid-template-rows: auto;
        gap: clamp(0.5rem, 0.5rem + 0.5vw, 1rem);
      }
      .navbar-inner > .navLogo { transform: translateX(7px); }
      .navToggle {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
      }
      .navDrawerBackdrop {
        display: block;
        position: fixed;
        inset: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        pointer-events: none;
      }
      .navbar--open .navDrawerBackdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .navRight {
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: #ffffff;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        z-index: 1001;
        grid-column: unset;
        grid-row: unset;
        margin: 0;
        display: flex;
        flex-direction: column;
        padding: 0;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        justify-content: flex-start;
      }
      .navbar--open .navRight {
        transform: translateX(0);
      }
      .navDrawerClose {
        display: flex;
        order: 0;
        flex: none;
        align-self: flex-end;
        width: 44px;
        height: 44px;
        margin: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 4vw, 1.5rem) 0 0;
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        align-items: center;
        justify-content: center;
      }
      .navDrawerClose:hover { opacity: 0.8; }
      .navDrawerCloseIcon {
        position: absolute;
        width: 20px;
        height: 2px;
        background: #1a1a2e;
        border-radius: 1px;
      }
      .navDrawerCloseIcon:nth-child(1) { transform: rotate(45deg); }
      .navDrawerCloseIcon:nth-child(2) { transform: rotate(-45deg); }
      .navRight .navItemsRow {
        order: 1;
        flex: 1 0 auto;
        min-height: 0;
        padding: clamp(1rem, 3vw, 1.5rem) 0 0;
      }
      .navRight .navDivider {
        order: 2;
        margin: 0 clamp(1rem, 4vw, 1.5rem);
        background: rgba(0, 0, 0, 0.12);
      }
      .navRight .utilityBar {
        order: 3;
        flex: none;
        justify-content: center;
        gap: var(--utility-bar-gap);
        min-height: 56px;
        padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 4vw, 1.5rem) clamp(1rem, 3vw, 1.5rem);
        margin: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
      }
      .navRight .navLinks {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        height: auto;
        justify-content: flex-start;
      }
      .navRight .navLink {
        display: block;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      }
      .navRight .navLink a {
        display: block;
        padding: clamp(0.75rem, 2.5vw, 1rem) clamp(1rem, 4vw, 1.5rem);
        font-size: 18px;
        line-height: 24px;
        color: #1a1a2e;
      }
      .navRight .navLink a:hover {
        background: rgba(0, 0, 0, 0.04);
        color: #003366;
      }
      .navRight .navLink--dropdown {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      }
      .navRight .navDropdown-trigger {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: clamp(0.75rem, 2.5vw, 1rem) clamp(1rem, 4vw, 1.5rem);
        font-size: 18px;
        line-height: 24px;
        color: #1a1a2e;
        border-radius: 0;
      }
      .navRight .navDropdown-trigger:hover,
      .navRight .navLink--dropdown.is-open .navDropdown-trigger {
        background: rgba(0, 0, 0, 0.04);
        color: #003366;
      }
      .navRight .navDropdown-trigger.active {
        color: #003366;
        background: rgba(0, 65, 123, 0.08);
      }
      .navRight .navDropdown {
        display: none;
        position: static;
        background: rgba(0, 65, 123, 0.06);
        box-shadow: none;
        padding: 0;
        border-radius: 0;
      }
      .navRight .navLink--dropdown.is-open .navDropdown {
        display: block;
      }
      .navRight .navDropdown a {
        display: block;
        padding: 0.65rem clamp(1rem, 4vw, 1.5rem) 0.65rem clamp(1.75rem, 5vw, 2.25rem);
        font-size: 16px;
        line-height: 22px;
        text-transform: uppercase;
        color: #1a1a2e;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      }
      .navRight .navDropdown a:hover {
        background: rgba(0, 0, 0, 0.04);
        color: #003366;
      }
      .navRight .navDropdown a.active {
        color: #003366;
        font-weight: 500;
        background: rgba(0, 65, 123, 0.1);
      }
      .navbar--open .navRight .navLink {
        opacity: 0;
        animation: navDrawerItemIn 0.35s ease forwards;
      }
      .navbar--open .navRight .navLink:nth-child(1) { animation-delay: 0.05s; }
      .navbar--open .navRight .navLink:nth-child(2) { animation-delay: 0.1s; }
      .navbar--open .navRight .navLink:nth-child(3) { animation-delay: 0.15s; }
      .navbar--open .navRight .navLink:nth-child(4) { animation-delay: 0.2s; }
      .navbar--open .navRight .navLink:nth-child(5) { animation-delay: 0.25s; }
      .navbar--open .navRight .navLink:nth-child(6) { animation-delay: 0.3s; }
      .navRight .utilityItem {
        color: #1a1a2e;
      }
      .navRight .utilityItem:hover { opacity: 0.8; }
      .navRight .utilityItemIcon .utilityIcon {
        filter: brightness(0);
      }
      .navRight .utilityItemArabic {
        color: #1a1a2e;
        border-color: rgba(0, 0, 0, 0.35);
      }
      .navRight .utilityItemArabic:hover { opacity: 0.9; }
      .navRight .languageSwitchIcon { filter: brightness(0); }
      @keyframes navDrawerItemIn {
        from { opacity: 0; transform: translateX(12px); }
        to { opacity: 1; transform: translateX(0); }
      }
      .navbar--open .navRight .utilityBar {
        opacity: 0;
        animation: navDrawerItemIn 0.3s ease 0.35s forwards;
      }
      .logo { width: 160px; height: 76px; }
      .utilityBarFontSize { gap: 16px; width: auto; }
      .utilityItem { font-size: 14px; line-height: 22px; min-height: 44px; }
      .utilityItemArabic {
        width: auto;
        min-width: 90px;
        height: 28px;
        padding: 4px 12px;
        gap: 8px;
        font-size: 14px;
        line-height: 20px;
      }
      .languageSwitchIcon { width: 20px; height: 20px; }
      .utilityIcon { width: 20px; height: 20px; }
    }
    /* SM: 640–767px — tighter nav, smaller logo */
    @media (max-width: 767px) {
      .navbar-inner,
      section {
        padding-left: calc(2 * var(--navbar-padding-x-xs));
        padding-right: calc(2 * var(--navbar-padding-x-xs));
      }
      #hero { padding-left: 0; padding-right: 0; }
      /* Same horizontal inset as About text for max-width 1023 (see #about .about-content-col) */
      #hero .hero-content-band {
        padding: 0 calc(2 * var(--navbar-padding-x-sm));
        box-sizing: border-box;
        align-items: center;
      }
      #hero .content { margin-left: 0; }
      .logo { width: 150px; height: 72px; }
      .utilityBar { gap: var(--utility-bar-gap); }
      .utilityBarFontSize { gap: var(--space-md); }
      .navLink a { font-size: 16px; line-height: 22px; }
    }
    /* SM–MD: sections that use #id horizontal padding stay aligned with navbar (640–1023px gap fix) */
    @media (max-width: 1023px) {
      #projects,
      #investors,
      #stats {
        padding-left: calc(2 * var(--navbar-padding-x-sm));
        padding-right: calc(2 * var(--navbar-padding-x-sm));
      }
      #news {
        padding-left: calc(2 * var(--navbar-padding-x-sm));
        padding-right: calc(2 * var(--navbar-padding-x-sm));
      }
    }
    @media (max-width: 767px) {
      #projects,
      #investors,
      #stats {
        padding-left: calc(2 * var(--navbar-padding-x-xs));
        padding-right: calc(2 * var(--navbar-padding-x-xs));
      }
      #news {
        padding-left: calc(2 * var(--navbar-padding-x-xs));
        padding-right: calc(2 * var(--navbar-padding-x-xs));
      }
      #subsidiaries .subsidiaries-inner {
        padding-left: calc(2 * var(--navbar-padding-x-xs));
        padding-right: calc(2 * var(--navbar-padding-x-xs));
      }
    }
    /* 768–1023px: 48px left/right padding for investors, sustainable, news, subsidiaries, CTA, footer */
    @media (min-width: 768px) and (max-width: 1023px) {
      #investors {
        padding-left: 48px;
        padding-right: 48px;
      }
      /* Investor cards: text content same horizontal padding as image (no extra inset) */
      #investors .investor-card-body {
        padding-left: 0;
        padding-right: 0;
        padding-top: var(--space-lg);
      }
      #sustainable .sustainable-content {
        padding-left: 48px;
        padding-right: 48px;
      }
      #news {
        padding-left: 48px;
        padding-right: 48px;
      }
      #subsidiaries .subsidiaries-inner {
        padding-left: 48px;
        padding-right: 48px;
      }
      #cta.cta-build-future {
        padding-left: 48px;
        padding-right: 48px;
      }
      #footer {
        padding-left: 48px;
        padding-right: 48px;
      }
    }
    /* 768×1440 only: Footer CTA stacked (email top, button bottom), button at start */
    @media (min-width: 768px) and (max-width: 1023px) and (min-height: 1440px) {
      #footer .footer-newsletter-form-row {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
      }
      #footer .footer-newsletter input[type="email"] { max-width: none; min-width: 0; width: 100%; box-sizing: border-box; }
      #footer .footer-newsletter .footer-newsletter-form-row button {
        align-self: flex-start;
        width: auto;
        margin-right: auto;
      }
    }
    /* XS: <640px — single column, min tap targets, no overflow */
    @media (max-width: 639px) {
      .navbar-inner,
      section {
        padding-left: clamp(var(--space-sm), 2vw + var(--space-xs), var(--space-md));
        padding-right: clamp(var(--space-sm), 2vw + var(--space-xs), var(--space-md));
      }
      #hero { padding-left: 0; padding-right: 0; }
      /* Same horizontal inset as About text for max-width 639 */
      #hero .hero-content-band {
        padding: 0 calc(2 * var(--navbar-padding-x-xs));
        box-sizing: border-box;
        align-items: center;
      }
      #hero .content { margin-left: 0; max-width: min(100%, 26rem); }
      /* Readable body text and 44px min touch targets (393×852, 428×926, 430×932) */
      body { font-size: clamp(15px, 3.8vw, 16px); }
      #hero .btnPrimary, #hero .btnSecondary { min-height: 44px; padding: 12px 10px; }
      .btn-primary, .btn-outline { min-height: 44px; padding: 12px 20px; }
      .navToggle { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
      .navbar-inner {
        padding-top: var(--navbar-padding-y);
        padding-bottom: var(--navbar-padding-y);
      }
      .logo { width: 130px; height: 62px; }
      .navLinks { gap: var(--space-sm) var(--space-md); }
      .navLink a { font-size: 14px; line-height: 20px; padding: 0.35rem 0.3rem; }
      .utilityBar { gap: var(--space-sm); height: 32px; min-height: 32px; }
      .utilityBarFontSize { gap: var(--space-xs); width: auto; }
      .utilityItem { font-size: 12px; line-height: 18px; min-height: 44px; }
      .utilityItemArabic {
        width: auto;
        min-width: 72px;
        height: 26px;
        padding: 2px 8px;
        gap: var(--space-xs);
        font-size: 12px;
        line-height: 18px;
      }
      .languageSwitchIcon { width: 18px; height: 18px; }
      .utilityIcon { width: 18px; height: 18px; }
      .navItemsRow { min-height: 40px; padding: var(--space-sm) 0 var(--space-md); }
    }
    /* Extra-small phones (393×852, 428×926, 430×932): slightly tighter horizontal padding */
    @media (max-width: 430px) {
      .navbar-inner {
        padding-left: clamp(var(--space-sm), 2vw + var(--space-xs), var(--space-md));
        padding-right: clamp(var(--space-sm), 2vw + var(--space-xs), var(--space-md));
      }
      section { padding-left: var(--space-xs); padding-right: var(--space-xs); }
      #hero { padding-left: 0; padding-right: 0; }
      #hero .hero-content-band {
        padding: 0 calc(2 * var(--navbar-padding-x-xs));
        box-sizing: border-box;
        align-items: center;
      }
      #hero .content { margin-left: 0; }
    }

    /* ─── About section: 75vh, grid 50% | 50% equal width ─── */
    #about {
      padding-left: 0;
      padding-right: 0;
      min-height: 75vh;
      height: 75vh;
      height: 75dvh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: hidden;
    }
    #about .about-image-col {
      position: relative;
      min-height: 0;
      overflow: hidden;
    }
    #about .about-image-col img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    #about .about-content-col {
      display: flex;
      align-items: center;
      padding: var(--space-2xl) calc(2 * var(--navbar-padding-x));
      box-sizing: border-box;
      background: var(--color-white);
    }
    #about .about-content-inner {
      max-width: var(--container-max);
      font-family: var(--font-lusail);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-lg);
    }
    #about .about-content-inner h2 {
      font-family: var(--font-lusail);
      font-weight: 400;
      font-size: clamp(28px, 3.4vw, 48px);
      line-height: 1.2;
      color: var(--color-primary);
      margin: 0;
    }
    #about .about-content-inner p {
      font-family: var(--font-lusail);
      font-weight: 400;
      font-size: clamp(15px, 1.2vw, 18px);
      line-height: 1.45;
      color: var(--color-text);
      margin: 0;
    }
    #about .about-content-inner .about-cta {
      margin-top: 0;
    }
    #about .about-content-inner .about-cta a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-lusail);
      font-weight: 500;
      letter-spacing: 0.02em;
      background: var(--color-primary);
      color: var(--color-white);
      min-height: 56px;
      padding: 16px 24px;
      border-radius: 2px;
      text-decoration: none;
      font-size: 16px;
      line-height: 24px;
      transition: opacity 0.2s;
    }
    #about .about-content-inner .about-cta a:hover { opacity: 0.9; }
    @media (max-width: 1023px) {
      #about {
        grid-template-columns: 1fr;
        grid-template-rows: auto 40vh;
        min-height: auto;
        height: auto;
      }
      /* Text block above, image below (DOM has image first) */
      #about .about-content-col { order: -1; padding: var(--space-2xl) calc(2 * var(--navbar-padding-x-sm)); }
      #about .about-image-col { order: 1; min-height: 40vh; }
    }
    @media (max-width: 639px) {
      #about .about-content-col { padding: var(--space-2xl) calc(2 * var(--navbar-padding-x-xs)); }
      /* Match #projects .projects-header-left gap (headline ↔ body ↔ toggles) */
      #about .about-content-inner { gap: var(--space-md); }
    }

    /* ─── Projects & Investments (Figma 2001-289, 2001-498): two-col header, map 55% | cards 45% ─── */
    #projects {
      padding-top: var(--space-3xl);
      padding-bottom: var(--space-3xl);
      padding-left: calc(2 * var(--navbar-padding-x));
      padding-right: calc(2 * var(--navbar-padding-x));
    }
    #projects .projects-header {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: var(--space-2xl);
      align-items: start;
      margin-bottom: var(--space-2xl);
      max-width: var(--container-max);
    }
    #projects .projects-header-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-lg);
    }
    #projects .projects-header-left h2 {
      font-family: var(--font-lusail);
      font-weight: 400;
      font-size: clamp(28px, 3.5vw, 48px);
      line-height: 1.2;
      color: var(--color-primary);
      margin: 0;
    }
    #projects .projects-header-left .projects-desc {
      font-family: var(--font-lusail);
      font-weight: 400;
      font-size: clamp(15px, 1.2vw, 18px);
      line-height: 1.45;
      color: var(--color-text);
      margin: 0;
      max-width: 520px;
    }
    .projects-toggle {
      display: inline-flex;
      gap: 10px;
      font-family: var(--font-lusail);
    }
    .projects-toggle button {
      height: 56px;
      padding: 16px 24px;
      font-family: var(--font-lusail);
      font-size: 16px;
      line-height: 24px;
      font-weight: 500;
      border-radius: 2px;
      cursor: pointer;
      border: 1px solid transparent;
      box-sizing: border-box;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .projects-toggle button:not(.active) {
      border: 1px solid #9F692A;
      background: transparent;
      color: #9F692A;
    }
    .projects-toggle button.active {
      background: #00417B;
      color: var(--color-white);
      border-color: #00417B;
    }
    .projects-toggle button:not(.active):hover {
      background: rgba(0, 51, 102, 0.06);
    }
    .projects-toggle-international:not(.active):hover {
      background: rgba(159, 105, 42, 0.06);
    }
    /* After base .projects-toggle rules so mobile sizing wins */
    @media (max-width: 767px) {
      #projects .projects-toggle {
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
      }
      #projects .projects-toggle button {
        flex: 1 1 auto;
        min-width: 0;
        height: auto;
        min-height: 48px;
        padding: 12px 16px;
        font-size: 15px;
        line-height: 22px;
      }
      #about .about-content-inner .about-cta {
        align-self: flex-start;
        width: 60%;
        max-width: 60%;
        box-sizing: border-box;
      }
      #about .about-content-inner .about-cta a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        height: auto;
        padding: 12px 16px;
        font-size: 15px;
        line-height: 22px;
        box-sizing: border-box;
      }
    }
    /* Desktop: equal-width toggle columns (same max width as .projects-desc) */
    @media (min-width: 768px) {
      #projects .projects-header-left .projects-toggle {
        align-self: stretch;
        width: 100%;
        max-width: 520px;
        box-sizing: border-box;
      }
      #projects .projects-toggle {
        display: flex;
      }
      #projects .projects-toggle button {
        flex: 1 1 0;
        min-width: 0;
      }
    }
    #projects .projects-categories {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0;
      align-self: flex-end;
    }
    #projects .projects-categories a {
      font-family: var(--font-lusail);
      font-size: 24px;
      line-height: 1.4;
      color: var(--color-text);
      padding: 4px 0;
      transition: color 0.2s;
    }
    #projects .projects-categories a:hover {
      color: var(--color-primary);
    }
    #projects .projects-categories a.active {
      color: var(--color-primary);
    }
    .projects-split {
      display: grid;
      grid-template-columns: 55% 45%;
      gap: 24px;
      row-gap: var(--space-2xl);
      min-height: 65vh;
      max-width: 100%;
      min-width: 0;
      margin: 0 auto;
    }
    .projects-map-wrap {
      position: relative;
      background: var(--color-light-gray);
      min-height: 65vh;
      min-width: 0;
      max-width: 100%;
      display: flex;
      align-items: stretch;
      justify-content: stretch;
    }
    .projects-leaflet-map {
      width: 100%;
      max-width: 100%;
      height: 100%;
      min-height: 65vh;
      min-width: 0;
      z-index: 0;
    }
    .projects-leaflet-map .leaflet-marker-icon.leaflet-marker-highlight {
      filter: brightness(1.15);
      transform: scale(1.15);
    }
    .projects-leaflet-map .leaflet-control-zoom { border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; }
    .projects-leaflet-map .leaflet-control-zoom a { color: #333; }
    .projects-leaflet-map .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,0.85); color: #666; }
    .projects-map-empty {
      position: absolute;
      inset: 0;
      z-index: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-xl);
      box-sizing: border-box;
      background: rgba(250, 250, 252, 0.94);
      text-align: center;
      pointer-events: none;
    }
    .projects-map-empty[hidden] {
      display: none !important;
    }
    .projects-map-empty-inner {
      max-width: 22rem;
      pointer-events: auto;
    }
    .projects-map-empty-title {
      font-family: var(--font-lusail);
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--color-primary, #00417B);
      margin: 0 0 0.75rem;
      line-height: 1.35;
    }
    .projects-map-empty-text {
      font-family: var(--font-body, var(--font-lusail));
      font-size: 0.95rem;
      line-height: 1.55;
      color: var(--color-text);
      margin: 0;
      opacity: 0.88;
    }
    .projects-empty-state {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 12rem;
      padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
      max-width: 26rem;
    }
    .projects-empty-state-title {
      font-family: var(--font-lusail);
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--color-primary, #00417B);
      margin: 0 0 0.75rem;
      line-height: 1.35;
    }
    .projects-empty-state-text {
      font-family: var(--font-body, var(--font-lusail));
      font-size: 0.95rem;
      line-height: 1.55;
      color: var(--color-text);
      margin: 0;
      opacity: 0.88;
    }
    .projects-card-list-wrap {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      min-height: 0;
      height: 65vh;
      gap: 0;
    }
    .projects-card-list {
      flex: 1;
      min-width: 0;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      scrollbar-gutter: stable both-edges;
      padding: 0 var(--space-lg) var(--space-lg) 0;
      box-sizing: border-box;
      scrollbar-width: thin;
      scrollbar-color: #9F692A rgba(0, 65, 123, 0.08);
      -ms-overflow-style: auto;
    }
    .projects-card-list::-webkit-scrollbar {
      width: 10px;
    }
    .projects-card-list::-webkit-scrollbar-track {
      background: rgba(0, 65, 123, 0.07);
      border-radius: 999px;
      margin: 4px 0;
    }
    .projects-card-list::-webkit-scrollbar-thumb {
      background: #9F692A;
      border-radius: 999px;
      border: 2px solid rgba(255, 255, 255, 0.55);
      background-clip: padding-box;
    }
    .projects-card-list::-webkit-scrollbar-thumb:hover {
      background: #825522;
    }
    #projects .projects-card-list-more {
      display: none;
      align-self: center;
      font-family: var(--font-lusail);
      font-weight: 500;
      font-size: 15px;
      line-height: 1.4;
      color: #00417B;
      text-decoration: underline;
      padding: var(--space-xs) var(--space-md);
    }
    #projects .projects-card-list-more:hover {
      color: #003366;
    }
    /* Project card — Figma Frame 19: flex row, image 200×200, content column gap 16px */
    .project-card {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0;
      gap: 30px;
      min-height: 200px;
      min-width: 0;
      margin-bottom: var(--space-lg);
      cursor: pointer;
      transition: background 0.15s;
    }
    .project-card:last-child {
      margin-bottom: 0;
    }
    .project-card:last-child .project-card-body {
      border-bottom: none;
      padding-bottom: 0;
    }
    .project-card:hover {
      background: rgba(0, 0, 0, 0.02);
    }
    .project-card.highlight {
      background: rgba(201, 168, 76, 0.08);
    }
    .project-card-thumb {
      width: 200px;
      height: 200px;
      object-fit: cover;
      flex: none;
      flex-grow: 0;
    }
    .project-card-body {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 0 0 var(--space-lg) 0;
      gap: var(--space-md);
      flex: 1;
      min-width: 0;
      border-bottom: 1px dotted rgba(0, 65, 123, 0.35);
    }
    .project-card-category-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--space-sm);
    }
    .project-card-category-bar {
      width: 2px;
      height: 24px;
      background: #9F692A;
      flex: none;
    }
    .project-card-category {
      font-family: var(--font-lusail);
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #000000;
      flex: none;
    }
    .project-card-title {
      font-family: var(--font-lusail);
      font-weight: 300;
      font-size: 32px;
      line-height: 40px;
      color: #00417B;
      margin: 0;
      align-self: stretch;
      overflow-wrap: anywhere;
    }
    .project-card-location {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--space-sm);
      min-width: 0;
      font-family: var(--font-lusail);
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #000000;
    }
    .project-card-location > span:last-child {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .project-card-location-icon {
      width: 32px;
      height: 32px;
      flex: none;
    }
    .project-card-location-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .project-card-link-wrap {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--space-sm);
    }
    .project-card-link {
      font-family: var(--font-lusail);
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      text-decoration: underline;
      color: #00417B;
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
    }
    .project-card-link:hover {
      color: #003366;
    }
    .project-card-link-arrow {
      width: 24px;
      height: 24px;
      flex: none;
    }
    .project-card-link-arrow svg {
      width: 100%;
      height: 100%;
    }
    @media (max-width: 1023px) {
      .projects-split {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(240px, 50vh) auto;
        row-gap: var(--space-2xl);
        min-height: auto;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
      }
      .projects-map-wrap {
        min-width: 0;
        max-width: 100%;
        height: auto;
        min-height: min(50vh, 420px);
        max-height: 480px;
      }
      .projects-leaflet-map {
        min-height: min(50vh, 420px);
        max-height: 480px;
      }
      /* Stacked layout: horizontal project carousel + link (avoids long vertical homepage scroll) */
      #projects .projects-card-list-wrap {
        min-width: 0;
        max-width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        margin-top: var(--space-xl);
        padding-top: var(--space-xl);
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
      }
      #projects .projects-card-list-more {
        display: block;
      }
      #projects .project-scroll-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        flex: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: var(--space-md);
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 10px;
        -webkit-overflow-scrolling: touch;
      }
      #projects .projects-card-list::-webkit-scrollbar {
        height: 8px;
        width: 0;
      }
      #projects .projects-card-list::-webkit-scrollbar-track {
        margin: 0 4px;
      }
      #projects .projects-card-list::-webkit-scrollbar-thumb {
        border-radius: 999px;
      }
      #projects .projects-card-list .project-card {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        align-items: stretch;
        margin: 0 5px;
        margin-bottom: 0;
        padding: 0;
        gap: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        border: 1px solid rgba(0, 65, 123, 0.12);
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
        box-sizing: border-box;
        min-height: 0;
      }
      #projects .project-scroll-container .project-card:first-child {
        margin-inline-start: 0;
      }
      #projects .project-scroll-container .project-card:last-child {
        margin-inline-end: 0;
      }
      #projects .projects-card-list .project-card-thumb {
        width: 100%;
        height: min(38vw, 168px);
        flex: none;
        object-fit: cover;
        border-radius: 0;
      }
      #projects .projects-card-list .project-card .project-card-body {
        border-bottom: none;
        padding: var(--space-md) var(--space-md) var(--space-md);
        flex: 1;
        min-width: 0;
        gap: var(--space-sm);
      }
      #projects .projects-card-list .project-card-category-row {
        gap: var(--space-sm);
      }
      #projects .projects-card-list .project-card-category-bar {
        height: 18px;
      }
      #projects .projects-card-list .project-card-category {
        font-size: 13px;
        line-height: 1.35;
      }
      #projects .projects-card-list .project-card-title {
        font-size: clamp(17px, 4.2vw, 20px);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
      }
      #projects .projects-card-list .project-card-location {
        font-size: 13px;
        line-height: 1.4;
        gap: var(--space-sm);
        min-width: 0;
      }
      #projects .projects-card-list .project-card-location > span:last-child {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
      }
      #projects .projects-card-list .project-card-location-icon {
        width: 22px;
        height: 22px;
      }
      #projects .projects-card-list .project-card-link-wrap {
        margin-top: 0;
      }
      #projects .projects-card-list .project-card-link {
        font-size: 14px;
        line-height: 1.4;
        min-height: 44px;
        align-items: center;
      }
      #projects .projects-card-list .project-card-link-arrow {
        width: 20px;
        height: 20px;
      }
      #projects .projects-card-list .projects-empty-state {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        max-width: none;
        scroll-snap-align: center;
        box-sizing: border-box;
      }
      #projects .projects-header {
        grid-template-columns: 1fr;
      }
      #projects .projects-categories {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
      }
      #projects .projects-categories a {
        font-size: 17px;
        line-height: 1.35;
        padding: 6px 4px;
      }
    }
    /* Project card responsive — Responsive-Skill breakpoints */
    @media (max-width: 1279px) {
      .project-card { gap: var(--space-lg); min-height: 180px; }
      .project-card-thumb { width: 180px; height: 180px; }
      .project-card-title { font-size: 28px; line-height: 36px; }
    }
    @media (max-width: 1023px) {
      .project-card { gap: var(--space-md); min-height: 160px; }
      .project-card-thumb { width: 160px; height: 160px; }
      .project-card-title { font-size: 24px; line-height: 32px; }
      .project-card-category,
      .project-card-location { font-size: 15px; line-height: 22px; }
      .project-card-link { font-size: 15px; }
    }
    @media (max-width: 767px) {
      .project-card { gap: var(--space-md); min-height: 140px; }
      .project-card-thumb { width: 120px; height: 120px; }
      .project-card-title { font-size: 20px; line-height: 28px; }
      .project-card-category-bar { height: 20px; }
      .project-card-category,
      .project-card-location { font-size: 14px; line-height: 20px; }
      .project-card-location-icon { width: 24px; height: 24px; }
      .project-card-link { font-size: 14px; }
      .project-card-link-arrow { width: 20px; height: 20px; }
    }
    @media (max-width: 639px) {
      #projects {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
        padding-left: calc(2 * var(--navbar-padding-x-xs));
        padding-right: calc(2 * var(--navbar-padding-x-xs));
      }
      #projects .projects-header {
        margin-bottom: var(--space-lg);
        gap: var(--space-md);
      }
      #projects .projects-header-left {
        gap: var(--space-md);
      }
      .projects-split {
        grid-template-rows: minmax(200px, 36vh) auto;
        row-gap: var(--space-lg);
      }
      .projects-map-wrap {
        min-height: min(36vh, 300px);
        max-height: 320px;
        border-radius: 10px;
        overflow: hidden;
      }
      .projects-leaflet-map {
        min-height: min(36vh, 300px);
        max-height: 320px;
      }
      .project-card {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
        padding: var(--space-md) 0;
        min-height: 0;
      }
      .project-card-thumb {
        width: 100%;
        height: min(220px, 52vw);
        object-fit: cover;
      }
      .project-card-body { gap: var(--space-sm); }
      .project-card-title {
        font-size: clamp(20px, 5.2vw, 24px);
        line-height: 1.3;
        overflow-wrap: anywhere;
      }
      .project-card-category-bar { height: 18px; }
      .project-card-category,
      .project-card-location {
        font-size: 15px;
        line-height: 1.45;
      }
      .project-card-location-icon { width: 26px; height: 26px; }
      .project-card-link {
        font-size: 15px;
        line-height: 1.4;
        min-height: 44px;
        align-items: center;
      }
      .project-card-link-arrow { width: 22px; height: 22px; }
      #projects .projects-categories {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-sm);
        max-width: 100%;
        gap: var(--space-xs);
        -webkit-overflow-scrolling: touch;
      }
      #projects .projects-categories a {
        white-space: nowrap;
        font-size: 15px;
        line-height: 1.35;
        padding: 8px 6px;
      }
    }

    /* ─── Investors (Figma 2001-275): header same as projects, 2×2 cards ─── */
    #investors {
      padding-top: var(--space-3xl);
      padding-bottom: var(--space-3xl);
      padding-left: calc(2 * var(--navbar-padding-x));
      padding-right: calc(2 * var(--navbar-padding-x));
      background: var(--color-white);
    }
    #investors .investors-header {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: var(--space-2xl);
      align-items: start;
      margin-bottom: var(--space-2xl);
      max-width: var(--container-max);
    }
    /* Frame 28: title + description + button, left-aligned */
    #investors .investors-header-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 0;
      gap: var(--space-lg);
      max-width: 808px;
    }
    #investors .investors-header-left > * {
      margin: 0;
    }
    #investors .investors-header-left h2 {
      font-family: var(--font-lusail);
      font-style: normal;
      font-weight: 400;
      font-size: clamp(28px, 3.4vw, 48px);
      line-height: 1.2;
      color: var(--color-primary);
      margin: 0;
      align-self: stretch;
    }
    #investors .investors-header-left .investors-desc {
      font-family: var(--font-lusail);
      font-style: normal;
      font-weight: 400;
      font-size: clamp(15px, 1.2vw, 18px);
      line-height: 1.45;
      color: var(--color-text);
      margin: 0;
      align-self: stretch;
    }
    /* Frame 14: Enter Investor Portal button */
    #investors .investors-cta {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 16px 24px;
      gap: 10px;
      width: 171px;
      height: 56px;
      background: #00417B;
      color: #FFFFFF;
      font-family: var(--font-lusail);
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      border-radius: 0;
      flex: none;
      transition: opacity 0.2s;
    }
    #investors .investors-cta:hover {
      opacity: 0.92;
    }
    /* 2×2 investor cards grid – each card is horizontal (image | text or text | image), Figma 300+30+300 */
    #investors .investors-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px 40px;
      row-gap: 40px;
      align-items: start;
      max-width: var(--container-max);
    }
    .investor-card {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      width: 100%;
      min-width: 0;
      gap: 30px;
      max-width: 630px;
      background: var(--color-white);
    }
    /* Card 2, 3, 4: image on right */
    .investor-card.investor-card--image-right {
      flex-direction: row-reverse;
    }
    .investor-card-image-wrap {
      width: 300px;
      min-width: 300px;
      height: 350px;
      flex: none;
      background: var(--color-light-gray);
      overflow: hidden;
    }
    .investor-card-image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* Frame 18: card content – fixed 300px width so no stretch/gap, Figma gap 16px */
    .investor-card-body {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 0;
      gap: 16px;
      flex: 0 0 300px;
      width: 300px;
      min-width: 0;
    }
    .investor-card--image-right .investor-card-body {
      padding: 0;
    }
    .investor-card-title {
      font-family: var(--font-lusail);
      font-style: normal;
      font-weight: 300;
      font-size: 32px;
      line-height: 40px;
      color: #00417B;
      margin: 0;
      align-self: stretch;
    }
    .investor-card-desc {
      font-family: var(--font-lusail);
      font-style: normal;
      font-weight: 400;
      font-size: clamp(15px, 1.2vw, 18px);
      line-height: 1.45;
      color: var(--color-text);
      margin: 0;
      align-self: stretch;
    }
    @media (max-width: 1023px) {
      #investors .investors-header-left h2 { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.2; }
      #investors .investors-header-left .investors-desc { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.45; }
      #investors .investors-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        row-gap: var(--space-lg);
      }
      .investor-card { max-width: none; }
      .investor-card-image-wrap { width: 100%; min-width: 0; height: 240px; }
      .investor-card-body {
        flex: 1;
        width: auto;
        justify-content: flex-start;
        padding: var(--space-md);
        gap: var(--space-sm);
      }
    }
    @media (max-width: 639px) {
      #investors { padding-left: calc(2 * var(--navbar-padding-x-xs)); padding-right: calc(2 * var(--navbar-padding-x-xs)); }
      #investors .investors-header { grid-template-columns: 1fr; }
      #investors .investors-header-left h2 { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.2; }
      #investors .investors-grid {
        gap: var(--space-md);
        row-gap: var(--space-md);
      }
      .investor-card {
        flex-direction: column !important;
        max-width: none;
        gap: var(--space-md);
      }
      .investor-card.investor-card--image-right { flex-direction: column !important; }
      .investor-card-image-wrap { width: 100%; min-width: 0; height: 200px; }
      /* Same stack as Financial card: title + copy under image with even padding (no flex-end gap) */
      #investors .investor-card-body,
      #investors .investor-card--image-right .investor-card-body {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        align-items: flex-start;
        padding: var(--space-md);
        gap: var(--space-sm);
        box-sizing: border-box;
      }
      #investors .investor-card-title {
        font-size: clamp(20px, 4.6vw + 0.2rem, 26px);
        line-height: 1.28;
      }
    }

    /* ─── News / Inside Our World (Figma 2001-285, 2001-362): 100vh, heading + cards ─── */
    #news {
      min-height: 100vh;
      min-height: 100dvh;
      padding: var(--space-3xl) calc(2 * var(--navbar-padding-x));
      display: flex;
      flex-direction: column;
      align-items: center;
      background: var(--color-white);
      box-sizing: border-box;
    }
    /* Frame 33: heading + button, centered */
    #news .news-header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0;
      gap: 24px;
      width: 100%;
      max-width: 770px;
      margin: 0 auto var(--space-3xl);
      flex: none;
    }
    #news .news-title {
      font-family: var(--font-lusail);
      font-style: normal;
      font-weight: 400;
      font-size: clamp(28px, 3.4vw, 48px);
      line-height: 1.2;
      text-align: center;
      color: #00417B;
      margin: 0;
      align-self: stretch;
    }
    #news .news-cta {
      display: inline-flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 16px 24px;
      gap: 10px;
      width: auto;
      max-width: 100%;
      min-height: 56px;
      height: auto;
      box-sizing: border-box;
      white-space: nowrap;
      background: #00417B;
      color: #FFFFFF;
      font-family: var(--font-lusail);
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      border-radius: 0;
      flex: none;
      transition: opacity 0.2s;
    }
    #news .news-cta:hover {
      opacity: 0.92;
    }
    #news .news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-2xl);
      width: 100%;
      max-width: var(--container-max);
    }
    .news-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      background: var(--color-white);
      overflow: hidden;
      border-top: 1px solid #D9E1EA;
      padding-top: var(--space-md);
      gap: var(--space-md);
    }
    .news-card-media {
      width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f7f4ee;
    }
    .news-card-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
      flex-shrink: 0;
    }
    .news-card-body {
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }
    .news-card-date {
      font-family: var(--font-lusail);
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0;
      color: var(--color-text);
      margin: 0;
    }
    .news-card-title {
      font-family: var(--font-lusail);
      font-style: normal;
      font-weight: 300;
      font-size: 26px;
      line-height: 34px;
      letter-spacing: 0;
      color: #00417B;
      margin: 0;
    }
    .news-card-title a {
      color: inherit;
      text-decoration: none;
    }
    .news-card-title a:hover {
      text-decoration: underline;
    }
    .news-card-link {
      font-family: var(--font-lusail);
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      color: #00417B;
      text-decoration: underline;
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
    }
    .news-card-link img {
      width: 24px;
      height: 24px;
    }
    @media (max-width: 1023px) {
      #news .news-title { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.2; }
      #news .news-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 639px) {
      #news {
        min-height: auto;
        padding: var(--space-2xl) calc(2 * var(--navbar-padding-x-xs));
      }
      #news .news-title { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.2; }
      #news .news-header { margin-bottom: var(--space-xl); }
      #news .news-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
      #news .news-card-title {
        font-size: clamp(20px, 5vw, 24px);
        line-height: 1.35;
        overflow-wrap: anywhere;
      }
      #news .news-card-date { font-size: 15px; line-height: 22px; }
      #news .news-card-link {
        font-size: 15px;
        min-height: 44px;
        white-space: normal;
        text-align: left;
      }
    }

    /* ─── Subsidiaries: 90vh, #F8F8F8, Local + International ─── */
    #subsidiaries {
      min-height: auto;
      min-height: auto;
      background: #F8F8F8;
      padding: 0 0 var(--space-2xl);
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }
    #subsidiaries .subsidiaries-inner {
      width: 100%;
      max-width: var(--container-max);
      margin: 0 auto;
      padding-top: calc(var(--space-2xl) + var(--space-md));
      padding-right: calc(2 * var(--navbar-padding-x));
      padding-bottom: calc(var(--space-2xl) + var(--space-md));
      padding-left: calc(2 * var(--navbar-padding-x));
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-lg);
      flex: 1;
    }
    #subsidiaries .subsidiaries-title {
      font-family: var(--font-lusail);
      font-weight: 400;
      font-style: normal;
      font-size: 48px;
      line-height: 64px;
      letter-spacing: 0;
      text-align: center;
      color: var(--color-text);
      margin: 0;
    }
    #subsidiaries .subsidiaries-row {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: var(--space-2xl);
      flex-wrap: nowrap;
    }
    #subsidiaries .subsidiaries-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-xl);
      min-width: 0;
      flex: 1 1 0;
      max-width: 560px;
    }
    #subsidiaries .subsidiaries-heading-band {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 72px;
      box-sizing: border-box;
    }
    #subsidiaries .subsidiaries-group h3 {
      font-family: var(--font-lusail);
      font-weight: 400;
      font-style: normal;
      font-size: 28px;
      line-height: 36px;
      letter-spacing: 0;
      text-align: center;
      color: var(--color-text);
      margin: 0;
      white-space: nowrap;
    }
    /* Hairline rule: sharp edge + tight fade (no glow blur) */
    #subsidiaries .subsidiaries-divider {
      flex: 0 0 1px;
      width: 1px;
      align-self: stretch;
      min-height: 170px;
      margin: 0 clamp(14px, 2.5vw, 22px);
      border-radius: 0;
      background: linear-gradient(
        180deg,
        rgba(0, 65, 123, 0) 0%,
        rgba(0, 65, 123, 0.2) 12%,
        #00417b 28%,
        #00417b 72%,
        rgba(0, 65, 123, 0.2) 88%,
        rgba(0, 65, 123, 0) 100%
      );
      box-shadow: 1px 0 0 rgba(255, 255, 255, 0.65);
    }
    #subsidiaries .subsidiaries-logos {
      width: 100%;
      align-items: center;
    }
    #subsidiaries .subsidiaries-group--local .subsidiaries-logos {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }
    #subsidiaries .subsidiaries-group--local {
      flex: 0 0 60%;
      max-width: 60%;
    }
    #subsidiaries .subsidiaries-group--international .subsidiaries-logos {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
      max-width: 500px;
    }
    #subsidiaries .subsidiaries-group--international {
      flex: 0 0 40%;
      max-width: 40%;
    }
    #subsidiaries .subsidiary-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-sm);
      width: 100%;
    }
    #subsidiaries .subsidiary-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-sm);
      text-decoration: none;
      color: inherit;
      transition: opacity 0.2s ease;
    }
    #subsidiaries .subsidiary-link:hover { opacity: 0.85; }
    #subsidiaries .subsidiary-item img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 110px;
      object-fit: contain;
      display: block;
    }
    #subsidiaries .subsidiary-item img[alt="Waseef"] {
      max-width: 118px;
      max-height: 93px;
    }
    #subsidiaries .subsidiary-item img[alt="QPM"] {
      max-width: 170px;
      max-height: 100px;
    }
    #subsidiaries .subsidiary-item img[alt="Barwa Cool"] {
      max-width: 175px;
      max-height: 102px;
    }
    #subsidiaries .subsidiary-item img[alt="Nuzul"],
    #subsidiaries .subsidiary-item img[alt="Shaza Hotels"] {
      max-width: 225px;
      max-height: 96px;
    }
    #subsidiaries .subsidiary-item img[alt="Nuzul"] {
      max-width: 500px;
      max-height: 200px;
      position: relative;
      top: -5px;
    }
    #subsidiaries .subsidiary-item img[alt="Shaza Hotels"] {
      position: relative;
      top: 4px;
    }
    #subsidiaries .subsidiary-name {
      font-family: var(--font-lusail);
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      color: #00417B;
      text-align: center;
    }
    /* Tablet: 60/40 row + vertical divider exceeds width — stack with horizontal rule */
    @media (max-width: 1023px) and (min-width: 640px) {
      #subsidiaries .subsidiaries-row {
        flex-wrap: wrap;
        gap: var(--space-xl);
        justify-content: center;
      }
      #subsidiaries .subsidiaries-group--local,
      #subsidiaries .subsidiaries-group--international {
        flex: 1 1 100%;
        max-width: 520px;
        min-width: 0;
      }
      #subsidiaries .subsidiaries-divider {
        flex: none;
        width: 100%;
        max-width: 320px;
        height: 1px;
        min-height: 0;
        align-self: center;
        margin: var(--space-md) auto;
        border-radius: 0;
        background: linear-gradient(
          90deg,
          rgba(0, 65, 123, 0) 0%,
          rgba(0, 65, 123, 0.22) 14%,
          #00417b 32%,
          #00417b 68%,
          rgba(0, 65, 123, 0.22) 86%,
          rgba(0, 65, 123, 0) 100%
        );
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
      }
      #subsidiaries .subsidiaries-group h3 {
        white-space: normal;
      }
    }
    @media (max-width: 639px) {
      #subsidiaries { padding-bottom: 48px; }
      #subsidiaries .subsidiaries-inner { padding: var(--space-2xl) calc(2 * var(--navbar-padding-x-xs)); }
      #subsidiaries .subsidiaries-row { flex-wrap: wrap; gap: var(--space-lg); }
      #subsidiaries .subsidiaries-group { width: 100%; flex-direction: column; gap: var(--space-md); }
      #subsidiaries .subsidiaries-group--local,
      #subsidiaries .subsidiaries-group--international { flex: 1 1 100%; max-width: 100%; }
      #subsidiaries .subsidiaries-group h3 { font-size: 24px; line-height: 32px; white-space: normal; }
      #subsidiaries .subsidiaries-heading-band { min-height: 56px; }
      #subsidiaries .subsidiaries-divider {
        flex: none;
        width: 100%;
        max-width: 260px;
        height: 1px;
        min-height: 0;
        align-self: center;
        margin: var(--space-md) auto;
        border-radius: 0;
        background: linear-gradient(
          90deg,
          rgba(0, 65, 123, 0) 0%,
          rgba(0, 65, 123, 0.22) 14%,
          #00417b 32%,
          #00417b 68%,
          rgba(0, 65, 123, 0.22) 86%,
          rgba(0, 65, 123, 0) 100%
        );
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
      }
      #subsidiaries .subsidiaries-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg); }
      #subsidiaries .subsidiaries-group--local .subsidiaries-logos,
      #subsidiaries .subsidiaries-group--international .subsidiaries-logos { max-width: none; }
    }

    /* Footer styles moved to assets/css/footer.css */

    /* ─── Sustainable Cities: ~75vh, left content (Frame 32) | right image ─── */
    #sustainable {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 75vh;
      min-height: 75dvh;
      padding: 0;
      overflow: hidden;
    }
    #sustainable .sustainable-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: var(--space-3xl) calc(2 * var(--navbar-padding-x));
      gap: 0;
      flex: 1;
      min-width: 0;
      justify-content: center;
      background: var(--color-primary);
    }
    #sustainable .sustainable-content > * {
      margin: 0;
    }
    #sustainable .sustainable-title {
      font-family: var(--font-lusail);
      font-style: normal;
      font-weight: 400;
      font-size: clamp(28px, 3.4vw, 48px);
      line-height: 1.2;
      letter-spacing: 0;
      color: #FFFFFF;
      margin: 0 0 var(--space-lg);
      align-self: stretch;
    }
    #sustainable .sustainable-desc {
      font-family: var(--font-lusail);
      font-style: normal;
      font-weight: 400;
      font-size: clamp(15px, 1.2vw, 18px);
      line-height: 1.45;
      letter-spacing: 0;
      color: #FFFFFF;
      margin: 0 0 var(--space-lg);
      align-self: stretch;
    }
    #sustainable .sustainable-image-wrap {
      position: relative;
      min-height: 75vh;
      min-height: 75dvh;
      height: 100%;
    }
    #sustainable .sustainable-image-wrap img {
      width: 100%;
      height: 100%;
      min-height: 75vh;
      min-height: 75dvh;
      object-fit: cover;
      display: block;
    }
    @media (max-width: 1023px) {
      #sustainable {
        grid-template-columns: 1fr;
        min-height: auto;
      }
      /* Match #about .about-content-col vertical + horizontal rhythm (stacked layout) */
      #sustainable .sustainable-content {
        justify-content: flex-start;
        gap: var(--space-lg);
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
        padding-left: calc(2 * var(--navbar-padding-x-sm));
        padding-right: calc(2 * var(--navbar-padding-x-sm));
      }
      #sustainable .sustainable-title,
      #sustainable .sustainable-desc {
        margin-bottom: 0;
      }
      #sustainable .sustainable-title { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.2; }
      #sustainable .sustainable-image-wrap { min-height: 50vh; }
    }
    @media (max-width: 639px) {
      #sustainable .sustainable-content {
        justify-content: flex-start;
        gap: var(--space-lg);
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
        padding-left: calc(2 * var(--navbar-padding-x-xs));
        padding-right: calc(2 * var(--navbar-padding-x-xs));
      }
      #sustainable .sustainable-title,
      #sustainable .sustainable-desc {
        margin-bottom: 0;
      }
      #sustainable .sustainable-title { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.2; }
      #sustainable .sustainable-desc { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.45; }
    }

    /* ─── Stats section: 100vh, background image + same overlay as hero (Figma 2001-297, 2001-303) ─── */
    #stats {
      position: relative;
      min-height: 100vh;
      min-height: 100dvh;
      box-sizing: border-box; /* Ensures padding doesn't distort width */
      /* Fix the relative path to step out of the css folder */
      background-image: url('../images/stats.png'); 
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow: hidden;
  
      /* Use !important only if other stylesheets like subsidiaries-section.css try to overwrite it */
      padding-left: calc(2 * var(--navbar-padding-x)) !important;
      padding-right: calc(2 * var(--navbar-padding-x)) !important;
    }
    /* Base #stats sits after earlier global breakpoints — re-apply gutters so mobile matches #projects */
    @media (max-width: 1023px) {
      #stats {
        padding-left: calc(2 * var(--navbar-padding-x-sm));
        padding-right: calc(2 * var(--navbar-padding-x-sm));
        align-items: center;
      }
    }
    @media (max-width: 767px) {
      #stats {
        padding-left: calc(2 * var(--navbar-padding-x-xs));
        padding-right: calc(2 * var(--navbar-padding-x-xs));
      }
    }
    #stats .stats-overlay {
      position: absolute;
      inset: 0;
      background: var(--hero-overlay-bg);
      mix-blend-mode: multiply;
      z-index: 0;
    }
    /* Frame 45: main stats column */
    #stats .stats-content {
      position: relative;
      z-index: 2; /* Increased to stay above the overlay */
      width: 100%;
      max-width: 1288px;
      margin: 0 auto;
      margin-top: var(--space-lg);
      padding: var(--space-3xl) 0;
      display: flex;
      flex-direction: column; /* This is correct for mobile-first stacking */
      align-items: center;
      gap: 40px;
    }
    /* Frame 23: title + description + button */
    #stats .stats-head {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0;
      gap: var(--space-lg);
      width: 100%;
      align-self: stretch;
    }
    #stats .stats-head > * {
      margin: 0;
    }
    #stats .stats-title {
      font-family: var(--font-lusail);
      font-style: normal;
      font-weight: 400;
      font-size: clamp(28px, 3.4vw, 48px);
      line-height: 1.2;
      text-align: center;
      color: #FFFFFF;
      margin: 0;
      align-self: stretch;
    }
    #stats .stats-title .stats-title-line {
      display: block;
    }
    #stats .stats-desc {
      font-family: var(--font-lusail);
      font-style: normal;
      font-weight: 300;
      font-size: clamp(17px, 1.3vw, 20px);
      line-height: 1.5;
      text-align: center;
      color: #FFFFFF;
      margin: 0;
      margin-inline: auto;
      width: min(100%, 820px);
      max-width: 820px;
      align-self: center;
      box-sizing: border-box;
    }
    /* Frame 14: Know More About Us button */
    #stats .stats-cta {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 16px 24px;
      gap: 10px;
      width: 176px;
      height: 56px;
      background: #FFFFFF;
      color: #00417B;
      font-family: var(--font-lusail);
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      border-radius: 0;
      flex: none;
      transition: opacity 0.2s;
    }
    #stats .stats-cta:hover {
      opacity: 0.92;
    }
    /* Frame 44: stats row */
    #stats .stats-row {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap;
      margin-top: var(--space-3xl);
      width: 100%;
      max-width: 1288px;
      min-height: 168px;
      flex: none;
      align-self: stretch;
      gap: 64px;
    }
    /* Frame 24 / 28 / 29: stat blocks — single grid column so label, value, unit share one center axis */
    #stats .stat-block {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      row-gap: 16px;
      justify-items: stretch;
      width: 299px;
      min-height: 168px;
      flex: none;
      color: #FFFFFF;
      font-family: var(--font-lusail);
      text-align: center;
      box-sizing: border-box;
    }
    #stats .stat-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-style: normal;
      font-weight: 500;
      font-size: 20px;
      line-height: 24px;
      text-align: center;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      min-height: calc(2 * 24px);
      box-sizing: border-box;
    }
    #stats .stat-label--experience {
      letter-spacing: -0.015em;
    }
    #stats .stat-metric {
      display: contents;
    }
    #stats .stat-value {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 0.05em;
      width: 100%;
      min-width: 0;
      font-style: normal;
      font-weight: 300;
      font-size: 80px;
      line-height: 1;
      text-align: center;
      direction: ltr;
      unicode-bidi: embed;
    }
    #stats .stat-value-digits {
      line-height: 0.95;
    }
    #stats .stat-value-plus {
      font-size: 0.48em;
      font-weight: 400;
      line-height: 1;
      align-self: center;
    }
    #stats .stat-unit {
      display: block;
      font-style: normal;
      font-weight: 500;
      font-size: 20px;
      line-height: 24px;
      text-align: center;
      width: 100%;
      box-sizing: border-box;
    }
    @media (max-width: 1023px) {
      #stats .stats-content {
        gap: 28px;
        padding: var(--space-2xl) 0;
        margin-top: 0;
      }
      #stats .stats-head {
        gap: var(--space-md);
      }
      #stats .stats-row {
        margin-top: var(--space-2xl);
        gap: 40px;
        min-height: 0;
      }
      #stats .stat-block {
        min-height: 0;
      }
      #stats .stats-title { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.2; }
      #stats .stats-desc { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; }
      #stats .stat-value { font-size: 56px; }
    }
    @media (max-width: 639px) {
      #stats {
        min-height: auto;
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
        align-items: center;
      }
      #stats .stats-content {
        gap: var(--space-lg);
        padding: var(--space-xl) 0;
        margin-top: 0;
      }
      #stats .stats-head { gap: var(--space-md); }
      #stats .stats-title {
        font-size: clamp(16px, 4.55vw + 0.42rem, 23px);
        line-height: 1.22;
        letter-spacing: -0.032em;
      }
      #stats .stats-desc { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.45; }
      #stats .stats-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: var(--space-lg);
        margin-top: var(--space-lg);
        min-height: 0;
      }
      #stats .stat-block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: var(--space-md);
        width: 100%;
        max-width: 100%;
        min-height: 0;
      }
      #stats .stat-label {
        min-height: 0;
      }
      #stats .stat-label,
      #stats .stat-unit { font-size: 18px; line-height: 24px; }
      #stats .stat-value { font-size: 48px; }
      #stats .stats-cta {
        width: auto;
        min-width: min(100%, 200px);
        height: auto;
        min-height: 48px;
        padding: 14px 22px;
      }
    }
    @media (max-width: 359px) {
      #stats .stats-title {
        font-size: clamp(15px, 4vw + 0.35rem, 21px);
        letter-spacing: -0.035em;
      }
    }
    /* --- Added for Newsletter Pop-up --- */

/* The Toast Container */
.subscribe-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #00417B; /* Matches your brand blue from footer.css */
    color: #FFFFFF;
    padding: 16px 28px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: none; /* Hidden by default */
    z-index: 9999;
    font-family: var(--font-lusail, 'Lusail', sans-serif);
    border-left: 5px solid #C9A84C; /* Gold accent */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* State when the toast is active */
.subscribe-toast.show {
    display: block;
    animation: slideInAndFade 0.5s forwards;
}

@keyframes slideInAndFade {
    from { 
        transform: translateY(20px); 
        opacity: 0; 
    }
    to { 
        transform: translateY(0); 
        opacity: 1; 
    }
}

/* Optional: Red border for invalid input */
#footer .footer-newsletter input[type="email"].input-error {
    border-color: #ff4d4d !important;
}
/* ==========================================================================
   ADDED FOR NEWSLETTER POP-UP TOAST
   ========================================================================== */
.subscribe-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #00417B;
    color: #FFFFFF;
    padding: 16px 28px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: none;
    z-index: 9999;
    font-family: var(--font-lusail, 'Lusail', sans-serif);
    align-items: center;
    gap: 16px;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
}

.subscribe-toast.show {
    display: flex;
    transform: translateY(0);
    opacity: 1;
}

.toast-icon-wrap {
    width: 24px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast-icon-wrap svg {
    width: 14px;
    height: 14px;
    fill: #D4AF37;
}

.toast-message {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.toast-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 18px;
    padding: 0 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    line-height: 1;
}

.toast-close-btn:hover {
    color: #FFFFFF;
}

@media (max-width: 480px) {
    .subscribe-toast {
        left: 20px;
        right: 20px;
        bottom: 20px;
        padding: 14px 20px;
    }
}

/* ==========================================================================
   DUAL LANGUAGE SWITCH VISIBILITY RULES
   ========================================================================== */
@media (min-width: 1024px) {
  .navbar-inner .mobileLanguageSwitch {
    display: none !important;
  }
  .utilityBar .barwa-lang-switch {
    display: inline-flex !important;
  }
}

@media (max-width: 1023px) {
  .navbar-inner .mobileLanguageSwitch {
    display: inline-flex !important;
  }
  .utilityBar .barwa-lang-switch {
    display: none !important;
  }
}