@font-face{font-family:EdurimaArabic;src:url('/assets/NotoSansArabic.ttf') format('truetype');font-display:swap;font-weight:100 900}
:root{color-scheme:light;--surface:#fff;--page:#f8faff;--ink:#00132f;--secondary:#425973;--stroke:#d7e2ee;--accent:#0956ff;--mint-ink:#007d7d}
:root[data-theme=dark]{color-scheme:dark;--surface:#10233d;--page:#081526;--ink:#edf4ff;--secondary:#b8c9df;--stroke:#2b425f;--accent:#80adff;--mint-ink:#65dbcd;--navy:#edf4ff;--blue:#80adff;--teal:#65dbcd;--muted:#b8c9df;--line:#2b425f;--teal-ink:#65dbcd}
body{background:var(--page);color:var(--ink)}
/* Keep the original lockup left-aligned; compensate for its SVG inset below. */
.brand{direction:ltr;align-items:center;gap:12px}
.brand-type{display:grid;justify-items:start;gap:6px;min-width:0}
.brand .brand-wordmark{object-position:left center;margin:0;padding:0}
.brand-slogan{margin:0;padding:0;text-align:left;align-self:start;line-height:1.35}
.header-actions{display:flex;align-items:center;gap:16px;min-width:0}
.preferences{display:flex;align-items:center;gap:6px}
.preference-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border:1px solid var(--stroke);background:var(--surface);color:var(--ink);border-radius:10px;padding:8px 12px;font-size:12px;font-weight:600}
.preference-button:hover{border-color:var(--accent);background:var(--page)}
.language-toggle{font-family:EdurimaArabic,system-ui,sans-serif;min-width:70px}
.theme-toggle{width:42px;padding:10px}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sun-icon{display:none}
[data-theme=dark] .sun-icon{display:block}
[data-theme=dark] .moon-icon{display:none}
[data-theme=dark] header,[data-theme=dark] footer{border-color:var(--stroke)}
[data-theme=dark] header nav .social-button{background:var(--surface);color:var(--ink);border-color:var(--stroke)}
[data-theme=dark] header nav .social-button:hover{background:#193451;border-color:var(--accent);color:var(--ink)}
[data-theme=dark] .social-arrow,[data-theme=dark] .intro,[data-theme=dark] .production-note,[data-theme=dark] .game-note,[data-theme=dark] .expertise-intro,[data-theme=dark] .service-grid p,[data-theme=dark] .service-detail,[data-theme=dark] .service-footnote,[data-theme=dark] footer,[data-theme=dark] .section-eyebrow{color:var(--secondary)}
[data-theme=dark] .specialisms,[data-theme=dark] .game-note span,[data-theme=dark] .service-footnote>span,[data-theme=dark] footer>span:last-child{color:var(--mint-ink)}
[data-theme=dark] .brand-wordmark{filter:brightness(0) invert(1)}

[data-theme=dark] .brand-slogan{color:#c4ddff}
[data-theme=dark] .construction-badge,[data-theme=dark] .requests-soon{color:#7ee5d7;background:#0e302f;border-color:#285653}
[data-theme=dark] .pillars li,[data-theme=dark] .pillars li+li,[data-theme=dark] .service-grid article,[data-theme=dark] .service-grid article+article{background:var(--surface);border-color:var(--stroke);color:var(--ink)}
[data-theme=dark] .build-zone{background:var(--surface);border-color:var(--stroke)}
[data-theme=dark] .yard-header{background:var(--surface);border-color:var(--stroke)}
[data-theme=dark] .live-label{color:#7ee5d7}
[data-theme=dark] .game-label,[data-theme=dark] .scene-caption{color:#b8c9df}
[data-theme=dark] .construction-scene,[data-theme=dark] .complete .construction-scene{background-color:#0d2038;background-image:linear-gradient(#547bac22 1px,transparent 1px),linear-gradient(90deg,#547bac22 1px,transparent 1px)}
[data-theme=dark] .station-labels{fill:#c5d9f2}
[data-theme=dark] .game-block:not(.built) rect{fill:#203d60;stroke:#6d8fb9}
[data-theme=dark] .scaffold{stroke:#7198c5}
[data-theme=dark] .crane{stroke:#83adf0}
[data-theme=dark] .foundations{fill:#6387b4}
[data-theme=dark] .floating-reward{text-shadow:0 2px 0 #081526}
[data-theme=dark] .skip-link{background:var(--surface);color:var(--ink)}
[data-theme=dark] ::selection{background:#285484;color:white}
[lang=ar] body{font-family:EdurimaArabic,system-ui,sans-serif}
[lang=ar] h1{letter-spacing:0;line-height:1.5;font-weight:650}
[lang=ar] .brand-slogan{font-family:EdurimaArabic,system-ui,sans-serif;direction:rtl;justify-self:start;letter-spacing:0;font-size:11px}
[lang=ar] .brand-slogan>span{display:inline-block}
[lang=ar] .construction-badge,[lang=ar] .section-eyebrow,[lang=ar] .service-detail,[lang=ar] .specialisms,[lang=ar] .live-label,[lang=ar] .game-label,[lang=ar] .stat-label,[lang=ar] .boost-description,[lang=ar] .scene-caption,[lang=ar] .game-progress>div:first-child{letter-spacing:0}
[lang=ar] .build-zone,[lang=ar] .boost-copy{text-align:right}
[lang=ar] .boost-copy{align-items:flex-start}
[lang=ar] .construction-scene{direction:ltr}
[lang=ar] .scene-caption{direction:rtl;font-family:EdurimaArabic,system-ui,sans-serif}
[lang=ar] .station-labels{font-family:EdurimaArabic,system-ui,sans-serif;letter-spacing:0}
[lang=ar] .game-progress{padding-right:0}
[lang=ar] #progress-label,[lang=ar] #streak,[lang=ar] #floating-reward{direction:ltr;unicode-bidi:isolate}
[lang=ar] .game-progress strong{font-family:EdurimaArabic,system-ui,sans-serif}
[lang=ar] .game-hint{margin-left:0;margin-right:auto}
[lang=ar] .boost-plus{margin-left:0;margin-right:7px}
[lang=ar] .game-note span{margin-left:0;margin-right:8px}
[lang=ar] .service-footnote>span{margin-left:0;margin-right:auto}
[lang=ar] .service-grid article{align-items:flex-start}
[lang=ar] .social-arrow{margin-left:0;margin-right:3px}
@media(max-width:1050px){header{height:auto;min-height:100px;flex-wrap:wrap;padding:20px 0;gap:20px}.header-actions{gap:12px}header nav .social-button{padding:10px;font-size:11px}}
@media(max-width:760px){header{justify-content:space-between;gap:16px;padding:18px 0}.header-actions{display:contents}.preferences{margin-inline-start:auto;gap:7px}header nav{width:100%;gap:10px}header nav .social-button{flex:1;justify-content:center;min-height:44px}.brand{gap:10px}.preference-button{min-height:44px}.theme-toggle{width:44px}.brand-slogan{font-size:9px}[lang=ar] .brand-slogan{font-size:9px}[lang=ar] .boost-plus{margin-right:auto}[lang=ar] .service-footnote>span{margin-right:0}[lang=ar] .pillars li{font-size:12px!important;white-space:normal;text-align:center}[lang=ar] .specialisms{font-size:11px;gap:8px;flex-wrap:wrap}[lang=ar] .scene-caption{font-size:8px}}
@media(max-width:480px){header nav .social-button>span:not(.sr-only){font-size:11px}header nav .youtube-button>span:first-of-type::after,header nav .linkedin-button>span:first-of-type::after{content:none}header nav .social-arrow{display:none}.language-toggle{min-width:64px;padding:8px}.brand .brand-mark{width:31px;height:37px}.brand .brand-wordmark{width:115px}.brand-slogan{font-size:8.5px}.preferences{gap:5px}.header-actions{gap:8px}[lang=ar] .yard-header h2{font-size:12px}[lang=ar] .expertise-heading{flex-wrap:wrap}}
/* Match the first visible E inside the original SVG's transparent viewBox. */
.brand-type{--wordmark-width:156px}
.brand-slogan{margin-left:calc(var(--wordmark-width) * .017)}
@media(max-width:760px){.brand-type{--wordmark-width:124px}}
@media(max-width:480px){.brand-type{--wordmark-width:115px}}
@media(max-width:360px){.brand-type{--wordmark-width:106px}}

/* Keep brand and header controls in fixed positions in both writing directions. */
header,.header-actions,header nav,.preferences{direction:ltr}
header nav .social-button{width:192px;justify-content:center}
[lang=ar] header nav .social-button{direction:rtl}
.brand{align-items:flex-start}
.brand-type{padding-top:0}

.brand .brand-mark{height:56px;object-position:top left}
@media(max-width:1050px){header nav .social-button{width:176px}}
@media(max-width:760px){header nav .social-button{width:auto}.brand-type{padding-top:0}.brand .brand-mark{height:45px}}
@media(max-width:480px){.brand .brand-mark{height:42px}}

/* The backing is a separate layer: switching themes never resizes the artwork. */
.brand-icon{position:relative;display:block;flex-shrink:0;isolation:isolate}
.brand .brand-mark{position:relative;z-index:1;padding:0;background:transparent;border-radius:0}
[data-theme=dark] .brand-icon::before{content:'';position:absolute;top:0;left:0;width:100%;aspect-ratio:232 / 273;border-radius:6px;background:#f8faff;box-shadow:0 0 0 3px #f8faff;z-index:0;pointer-events:none}

/* Three evenly spaced social channels across screen sizes. */
header nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
header nav .social-button{width:auto;padding:10px 11px;font-size:11px;gap:7px;background:var(--surface);color:var(--ink);border-color:var(--stroke)}
.facebook-button svg rect{fill:#1877f2;stroke:none}
.facebook-button svg path{fill:#fff;stroke:none}
header nav .facebook-button:hover{border-color:var(--accent);background:var(--page);color:var(--accent);translate:0 -1px}
@media(max-width:1050px){header nav{grid-template-columns:repeat(3,minmax(0,1fr))}header nav .social-button{width:auto}}
@media(max-width:760px){header nav{width:100%;gap:8px}header nav .social-button{min-height:44px;justify-content:center}}

/* Compact social links with readable platform names and smaller icons. */
header nav .social-button{padding:8px 10px;gap:6px;min-height:40px}
header nav .social-button svg{width:15px;height:15px}
header nav .social-arrow{display:none}
@media(max-width:760px){header nav .social-button{min-height:44px;padding:8px 10px}}