.site-logo { width:clamp(44px,9vw,72px); height:clamp(44px,9vw,72px); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.site-logo img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; object-position:center; flex-shrink:0; }
body { font-family:'Tajawal',sans-serif; background-color:#030712; overflow-x:clip; }
html,body { max-width:100%; }.eng-num { font-family:'Roboto',sans-serif; font-variant-numeric:tabular-nums; }
#main-header { background:rgba(3,7,18,.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.04); transition:background .55s ease,border-color .55s ease,box-shadow .55s ease,backdrop-filter .55s ease; }
#main-header.scrolled { background:rgba(3,7,18,.88); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid rgba(59,130,246,.3); box-shadow:0 14px 35px -18px rgba(0,0,0,.9),0 0 22px -12px rgba(59,130,246,.25); }
#main-header .nav-link { text-shadow:0 2px 14px rgba(0,0,0,.7); } #main-header.scrolled .nav-link { text-shadow:none; }
.whatsapp-luxury { width:auto; min-width:164px; height:42px; overflow:visible; white-space:nowrap; color:#fff; background:#25D366; border:1px solid #25D366; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 10px 28px rgba(37,211,102,.24); transition:background .35s ease,border-color .35s ease,box-shadow .35s ease; }
.whatsapp-luxury:hover,.whatsapp-luxury:focus-visible { width:auto; color:#fff; background:#1EBE57; border-color:#1EBE57; box-shadow:0 14px 34px rgba(37,211,102,.32); }.whatsapp-luxury i { flex:0 0 auto; color:#fff; font-size:17px; transition:color .3s ease; }.whatsapp-luxury:hover i,.whatsapp-luxury:focus-visible i { color:#fff; }.whatsapp-luxury span { opacity:1; }

.about-hero { position:relative; isolation:isolate; min-height:620px; overflow:hidden; background:#020617; }.about-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }.about-hero__shade { position:absolute; inset:0; background:linear-gradient(270deg,rgba(2,6,23,.96) 0%,rgba(2,6,23,.62) 37%,rgba(2,6,23,.10) 70%,rgba(2,6,23,.42) 100%),radial-gradient(ellipse at 65% 74%,rgba(37,99,235,.12),transparent 34%); }.about-hero__content { position:relative; z-index:2; min-height:620px; padding:166px 2rem 128px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; color:#fff; text-align:right; }.about-eyebrow { margin-bottom:14px; color:#60a5fa; font-size:.78rem; font-weight:700; letter-spacing:.25em; }.about-hero h1 { max-width:820px; margin:0 0 18px; color:#fff; font-size:clamp(2.8rem,6vw,4.5rem); line-height:1.08; font-weight:900; letter-spacing:-.02em; text-wrap:balance; text-shadow:0 4px 10px rgba(0,0,0,.8); }.about-hero__content p { max-width:570px; margin:0; color:#f1f5f9; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.9; font-weight:300; text-shadow:0 2px 8px rgba(0,0,0,.9); }
.hero-context { position:absolute; bottom:31px; left:7%; z-index:10; display:flex; align-items:center; gap:10px; color:rgba(226,232,240,.62); font-family:'Roboto','Tajawal',sans-serif; font-size:10px; letter-spacing:.04em; }.hero-context strong { color:rgba(248,250,252,.88); font-weight:700; }.hero-context-divider { width:1px; height:30px; background:rgba(148,163,184,.3); }.hero-date-stack { display:flex; flex-direction:column; align-items:flex-start; gap:2px; white-space:nowrap; line-height:1.25; }.hero-date-primary { color:rgba(248,250,252,.88); font-weight:700; }.hero-date-hijri { color:rgba(203,213,225,.64); font-size:.84em; }.hero-weather-carousel { display:block; inline-size:118px; min-inline-size:0; }.hero-weather-viewport { height:48px; overflow:hidden; }.hero-weather-track { will-change:transform; }.hero-weather-row { height:16px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; column-gap:4px; white-space:nowrap; transition:opacity 480ms ease,color 480ms ease; }.hero-weather-row--active { color:rgba(248,250,252,.96); opacity:1; font-weight:700; }.hero-weather-row--neighbor { color:rgba(191,219,254,.72); opacity:.48; }.hero-weather-row--outer { color:rgba(148,163,184,.55); opacity:.18; }.hero-weather-city { min-inline-size:0; }.hero-weather-temperature { font-family:'Roboto',sans-serif; font-variant-numeric:tabular-nums; }.hero-weather-icon { color:rgba(125,211,252,.92); font-size:.92em; }.hero-weather-value { color:rgba(147,197,253,.82); }.hero-weather-value.is-pending { color:rgba(148,163,184,.62); }.hero-weather-fallback { display:block; line-height:48px; white-space:nowrap; }
.about-story { padding:80px 24px 94px; background:#030712; }.about-story__inner { max-width:1120px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.92fr); gap:78px; align-items:center; direction:ltr; }.about-copy,.about-collage { direction:rtl; }.about-copy { padding-top:8px; text-align:right; }.about-copy__label { margin:0 0 24px; color:#60a5fa; font-size:1rem; font-weight:800; }.about-copy h2 { margin:0 0 32px; color:#fff; font-size:2.25rem; line-height:1.42; font-weight:900; letter-spacing:-.04em; white-space:pre-line; }.about-copy>p:not(.about-copy__label):not(.about-copy__highlight) { margin:0 0 20px; color:#cbd5e1; font-size:1rem; line-height:1.95; white-space:pre-line; }.about-copy__highlight { margin:30px 0 22px; color:#60a5fa; font-size:1.1rem; font-weight:800; line-height:1.75; white-space:pre-line; }.about-cta { display:inline-flex; min-width:220px; min-height:53px; align-items:center; justify-content:center; gap:45px; padding:0 22px; color:#fff; border:1px solid rgba(96,165,250,.4); border-radius:.75rem; background:#2563eb; box-shadow:0 16px 40px rgba(37,99,235,.28),0 0 24px rgba(59,130,246,.16); font-weight:700; text-decoration:none; transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,background .35s ease; }.about-cta:hover { background:#3b82f6; transform:translateY(-3px); box-shadow:0 20px 48px rgba(37,99,235,.35),0 0 32px rgba(59,130,246,.22); }.about-cta i { font-size:1.05rem; }
.about-collage { position:relative; min-height:540px; padding:0 48px 42px 0; }.about-collage img { display:block; object-fit:cover; }.about-collage__primary { width:100%; height:500px; border-radius:13px; box-shadow:0 18px 44px rgba(0,0,0,.42); }.about-collage__secondary { position:absolute; right:0; bottom:0; width:58%; height:300px; border:5px solid #030712; border-radius:14px; box-shadow:0 18px 42px rgba(0,0,0,.58); }
@media (max-width:1050px) { .about-story__inner { gap:45px; grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); }.about-copy h2 { font-size:1.95rem; }.about-collage { min-height:490px; }.about-collage__primary { height:450px; }.about-collage__secondary { height:255px; } }
@media (max-width:767px) { .about-hero { min-height:560px; }.about-hero>img { object-position:34% center; }.about-hero__content { min-height:560px; padding:144px 28px 128px; }.about-hero h1 { font-size:clamp(2.6rem,12vw,3.3rem); }.hero-context { left:16px; right:16px; bottom:32px; justify-content:center; gap:6px; font-size:8px; letter-spacing:.02em; }.hero-weather-carousel { inline-size:104px; }.hero-weather-row { column-gap:2px; }.about-story { padding:58px 24px 72px; }.about-story__inner { grid-template-columns:1fr; gap:34px; }.about-copy { order:1; }.about-collage { order:2; max-width:570px; width:100%; margin:auto; }.about-copy h2 { font-size:2rem; } }
@media (max-width:480px) { .about-hero { min-height:520px; }.about-hero__content { min-height:520px; padding:128px 21px 128px; }.about-eyebrow { margin-bottom:10px; }.about-hero h1 { margin-bottom:10px; }.about-hero__content p { font-size:1rem; }.about-story { padding:46px 18px 62px; }.about-copy__label { margin-bottom:15px; }.about-copy h2 { margin-bottom:23px; font-size:1.7rem; }.about-copy>p:not(.about-copy__label):not(.about-copy__highlight) { font-size:.94rem; line-height:1.95; }.about-copy__highlight { margin-top:24px; font-size:1rem; }.about-cta { width:100%; gap:55px; }.about-collage { min-height:430px; padding:0 28px 24px 0; }.about-collage__primary { height:405px; }.about-collage__secondary { width:61%; height:196px; border-width:3px; } }
@media (max-width:359px) { .hero-context { gap:4px; }.hero-weather-carousel { inline-size:96px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto!important; }.about-cta { transition:none; } }