@font-face { font-family: Almarai; src: url('/assets/Almarai-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root { --ink:#071214; --deep:#062920; --emerald:#00a76f; --aqua:#009eea; --lime:#9be400; --mist:#eff7f2; --paper:#f7faf8; --line:rgba(7,18,20,.16); --white:#fff; --display:Almarai, 'Avenir Next', 'Segoe UI', sans-serif; --body:Almarai, 'Avenir Next', 'Segoe UI', sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font:700 16px/1.8 var(--body); text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.skip-link { position:fixed; z-index:30; inset-block-start:10px; inset-inline-start:10px; padding:.6rem 1rem; color:var(--white); background:var(--ink); border-radius:9px; transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
:focus-visible { outline:3px solid var(--aqua); outline-offset:4px; }
.site-header { position:fixed; z-index:20; inset:0 0 auto; display:grid; grid-template-columns:minmax(124px,168px) 1fr auto; align-items:center; gap:clamp(1rem,3vw,4rem); padding:clamp(.85rem,2vw,1.4rem) clamp(1rem,5vw,5.5rem); transition:background .25s ease, box-shadow .25s ease, padding .25s ease; }
.site-header.is-scrolled { padding-block:.6rem; background:rgba(247,250,248,.94); box-shadow:0 10px 28px rgba(0,0,0,.06); backdrop-filter:blur(14px); }
.brand { display:block; inline-size:clamp(72px,7vw,104px); aspect-ratio:1; }
.brand img { inline-size:100%; block-size:100%; object-fit:contain; filter:drop-shadow(0 7px 10px rgba(6,41,32,.14)); }
.site-header nav { display:flex; justify-content:center; gap:clamp(.8rem,2vw,2rem); font-size:.78rem; }
.site-header nav a, .holding-link, .language { transition:color .2s ease, opacity .2s ease; }
.site-header nav a:hover, .holding-link:hover { color:var(--emerald); }
.header-actions { display:flex; align-items:center; gap:1rem; }
.holding-link { padding:.48rem .8rem; border:1px solid var(--line); border-radius:999px; font-size:.72rem; white-space:nowrap; }
.language { display:grid; place-items:center; inline-size:32px; block-size:32px; border-radius:50%; color:var(--white); background:var(--ink); font-size:.75rem; }
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(300px,.98fr); min-height:100svh; overflow:hidden; padding:clamp(8.2rem,14vw,12rem) clamp(1.25rem,8vw,9rem) clamp(3rem,7vw,7rem); background:radial-gradient(circle at 86% 17%,rgba(155,228,0,.16),transparent 22%), radial-gradient(circle at 62% 70%,rgba(0,158,234,.16),transparent 27%), var(--paper); }
.hero::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,rgba(255,255,255,.65),transparent 55%); }
.hero-copy { position:relative; z-index:1; align-self:center; max-inline-size:690px; }
.eyebrow { margin:0 0 1rem; color:var(--emerald); font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; }
h1,h2,h3,p { margin-block-start:0; }
h1,h2 { font-family:var(--display); letter-spacing:-.05em; line-height:1.08; }
h1 { margin-block-end:1.6rem; font-size:clamp(3.15rem,7vw,7.5rem); }
h1 em,h2 em { color:var(--emerald); font-style:normal; }
.lede { max-inline-size:550px; margin-block-end:2rem; font-size:clamp(1.05rem,1.5vw,1.35rem); line-height:1.9; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center; }
.button { display:inline-flex; align-items:center; gap:.7rem; padding:.85rem 1.18rem; border-radius:999px; color:var(--white); background:var(--ink); font-size:.84rem; transition:transform .2s ease, background .2s ease; }
.button:hover { transform:translateY(-2px); background:var(--emerald); }
.text-link { padding-block:.5rem; border-block-end:1px solid currentColor; font-size:.84rem; }
.brand-stage { position:relative; z-index:1; display:grid; place-items:center; align-self:center; min-block-size:clamp(320px,48vw,680px); }
.brand-stage::before { content:''; position:absolute; inline-size:75%; aspect-ratio:1; border:1px solid rgba(0,167,111,.22); border-radius:50%; animation:halo 7s ease-in-out infinite; }
.brand-stage::after { content:''; position:absolute; inline-size:49%; aspect-ratio:1; border:1px dashed rgba(0,158,234,.34); border-radius:50%; animation:halo 7s 1.2s ease-in-out infinite reverse; }
.official-logo-reveal { position:relative; inline-size:min(75vw,600px); aspect-ratio:1; filter:drop-shadow(0 22px 28px rgba(6,41,32,.18)); }
.official-logo-reveal img { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
.logo-orbit { clip-path:polygon(8% 6%,78% 5%,76% 24%,39% 38%,39% 60%,69% 67%,74% 85%,11% 69%); animation:orbit-in .45s cubic-bezier(.2,.8,.2,1) both, layer-out .1s .68s ease forwards; }
.logo-capsule { clip-path:polygon(40% 25%,61% 25%,61% 50%,64% 50%,64% 65%,40% 65%); animation:capsule-in .36s .14s cubic-bezier(.2,.8,.2,1) both, layer-out .1s .68s ease forwards; }
.logo-leaves { clip-path:polygon(61% 18%,83% 18%,86% 72%,57% 76%,61% 62%,77% 49%,58% 37%); animation:leaves-in .4s .28s cubic-bezier(.2,.8,.2,1) both, layer-out .1s .68s ease forwards; }
.logo-complete { opacity:0; animation:complete-in .32s .48s ease forwards; }
.brand-stage > p { position:absolute; inset-block-end:1.5rem; margin:0; color:var(--deep); font-size:.72rem; letter-spacing:.08em; }
.section { padding:clamp(5rem,12vw,11rem) clamp(1.25rem,8vw,9rem); }
.section-label { display:flex; align-items:center; gap:.75rem; margin-block-end:clamp(2rem,5vw,5rem); color:var(--emerald); font-size:.75rem; }
.section-label span { display:grid; place-items:center; inline-size:32px; aspect-ratio:1; border-radius:50%; color:var(--white); background:var(--emerald); font-size:.68rem; }
.section-label p { margin:0; }
.story { background:var(--white); }
.story-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.7fr); gap:clamp(2rem,10vw,10rem); align-items:start; }
h2 { margin-block-end:0; font-size:clamp(2.6rem,5.5vw,6.2rem); }
.story-grid > div { padding-block-start:.5rem; color:#2f3d39; }
.large-copy { font-size:clamp(1.2rem,1.8vw,1.65rem); line-height:1.75; color:var(--ink); }
.growth { background:var(--deep); color:var(--white); }
.growth .section-label { color:#83f0c3; }
.growth .section-label span { color:var(--deep); background:#83f0c3; }
.growth h2 em { color:#a6e600; }
.timeline { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:clamp(3rem,7vw,7rem) 0 0; padding:0; list-style:none; border-block:1px solid rgba(255,255,255,.22); }
.timeline li { min-block-size:260px; padding:clamp(1.3rem,3vw,2.4rem); border-inline-start:1px solid rgba(255,255,255,.22); }
.timeline li:first-child { border-inline-start:0; }
.timeline .year { margin-block-end:3.8rem; color:#a6e600; font-size:clamp(1.35rem,2vw,2rem); direction:ltr; text-align:start; }
.timeline h3 { margin-block-end:.65rem; font-size:1.1rem; }
.timeline li > p:last-child { max-inline-size:270px; color:#b6cfca; font-size:.9rem; }
.promise { background:var(--mist); }
.promise-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,.55fr); gap:clamp(2rem,10vw,10rem); align-items:end; }
.promise-heading > p { margin:0; color:#2f3d39; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-block-start:clamp(3rem,7vw,7rem); }
.principles article { min-block-size:260px; padding:clamp(1.35rem,3vw,2.4rem); background:var(--white); border-radius:20px; box-shadow:0 12px 32px rgba(6,41,32,.05); }
.principles span { display:grid; place-items:center; inline-size:34px; margin-block-end:4rem; aspect-ratio:1; border:1px solid var(--emerald); border-radius:50%; color:var(--emerald); font-size:.7rem; }
.principles h3 { margin-block-end:.55rem; font-size:1.2rem; }
.principles p { color:#52635e; font-size:.9rem; }
.statement { padding:clamp(5rem,12vw,11rem) clamp(1.25rem,8vw,9rem); color:var(--white); background:radial-gradient(circle at 80% 15%,rgba(0,158,234,.38),transparent 27%),linear-gradient(132deg,#063a2e,#051a16 72%); }
.statement .eyebrow { color:#a6e600; }.statement h2 { max-inline-size:900px; margin-block-end:2.3rem; }.statement h2 em { color:#83f0c3; }.button.light { color:var(--ink); background:var(--white); }.button.light:hover { color:var(--white); background:var(--emerald); }
.site-footer { display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center; padding:2rem clamp(1.25rem,8vw,9rem); color:#28443b; background:var(--paper); border-block-start:1px solid rgba(6,41,32,.1); font-size:.78rem; }.footer-brand { inline-size:88px; }.site-footer > div { display:flex; justify-content:center; gap:1.5rem; }.site-footer a:hover { color:var(--emerald); }.site-footer p { margin:0; direction:ltr; }
[dir='ltr'] h1,[dir='ltr'] h2 { letter-spacing:-.065em; } [dir='ltr'] .site-header nav { font-family:'Avenir Next','Segoe UI',sans-serif; font-weight:700; } [dir='ltr'] .timeline li { border-inline-start:1px solid rgba(255,255,255,.22); } [dir='ltr'] .timeline li:first-child { border-inline-start:0; }
@keyframes orbit-in { from { opacity:0; transform:rotate(-18deg) scale(.82); } to { opacity:1; transform:none; } } @keyframes capsule-in { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } } @keyframes leaves-in { from { opacity:0; transform:translateX(30px) rotate(8deg); } to { opacity:1; transform:none; } } @keyframes complete-in { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } } @keyframes layer-out { to { opacity:0; } } @keyframes halo { 50% { transform:scale(1.07); opacity:.45; } }
@media (max-width:860px) { .site-header { grid-template-columns:auto 1fr; gap:.8rem; }.site-header nav { display:none; }.header-actions { justify-content:end; gap:.5rem; }.holding-link { max-inline-size:196px; overflow:hidden; text-overflow:ellipsis; }.hero { grid-template-columns:1fr; min-block-size:auto; }.hero-copy { padding-block-start:1rem; }.brand-stage { min-block-size:340px; }.story-grid,.promise-heading { grid-template-columns:1fr; }.timeline,.principles { grid-template-columns:1fr; }.timeline li,.timeline li:first-child { min-block-size:0; border-inline-start:0; border-block-start:1px solid rgba(255,255,255,.22); }.timeline li:first-child { border-block-start:0; }.timeline .year,.principles span { margin-block-end:1.3rem; }.site-footer { grid-template-columns:auto 1fr; }.site-footer p { grid-column:1/-1; }.site-footer > div { justify-content:flex-start; } }
@media (max-width:470px) { .site-header { padding-inline:1rem; gap:.45rem; }.holding-link { max-inline-size:168px; padding:.42rem .58rem; font-size:.61rem; }.hero { padding-inline:1.25rem; }.hero-actions { align-items:flex-start; flex-direction:column; }.official-logo-reveal { inline-size:min(94vw,420px); }.brand-stage { min-block-size:315px; }.section,.statement { padding-inline:1.25rem; }.site-footer { gap:1rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .logo-orbit,.logo-capsule,.logo-leaves { opacity:0; transform:none; animation:none !important; }.logo-complete { opacity:1; animation:none !important; } }