/* Design philosophy: Desert Ledger — contemporary Saudi editorial modernism with warm institutional clarity. */
/* Ported verbatim from the original client/src/index.css (Tailwind build directives removed; none of the
   markup below relies on Tailwind utility classes, only these plain custom classes). */
:root { --radius: 0.75rem; --background: #f5f4f0; --foreground: #173d35; --card: #fff; --card-foreground: #173d35; --border: #d8d9d2; --primary: #173d35; --primary-foreground: #fff; --ink: #173d35; --brown: #6a4a38; --brass: #b79a63; --sand: #e8e2d5; --mist: #ecece7; --muted: #68756e; --ease-out: cubic-bezier(.23,1,.32,1); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--ink); font-family: 'Manrope', sans-serif; }
button, a { font: inherit; }
button { border: 0; background: none; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.site { min-height: 100vh; overflow: hidden; background: var(--background); }
.site-header { height: 74px; padding: 0 clamp(20px, 5vw, 72px); display: flex; align-items: center; gap: 38px; position: sticky; top: 0; z-index: 20; background: rgba(245,244,240,.92); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(23,61,53,.12); }
.brand-lockup { display:flex; align-items:center; gap:10px; flex-shrink:0; cursor:pointer; text-align:left; }
.brand-lockup img, .footer-brand img { width:32px; height:32px; object-fit:contain; }
.brand-lockup strong, .footer-brand strong { display:block; letter-spacing:.18em; font-size:13px; line-height:1; }
.brand-lockup small { display:block; margin-top:4px; color:var(--muted); font-size:8px; letter-spacing:.2em; }
.desktop-nav { display:flex; align-items:center; justify-content:flex-end; gap:clamp(12px,1.8vw,28px); width:100%; }
.desktop-nav button { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#54635c; white-space:nowrap; transition:color .18s var(--ease-out); }
.desktop-nav button:hover { color:var(--brown); }
.header-actions { display:flex; align-items:center; gap:14px; }
.lang-toggle { display:flex; align-items:center; gap:7px; font-size:10px; color:var(--muted); cursor:pointer; }.lang-toggle .active { color:var(--ink); font-weight:800; }.lang-toggle i { width:1px; height:13px; background:var(--border); }.menu-toggle { display:none; cursor:pointer; }
.disclosure-bar { min-height: 42px; padding: 0 clamp(20px, 5vw, 72px); display: flex; align-items: center; gap: 24px; background: #173d35; color: #f5f4f0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 10px; }
.disclosure-label { display: flex; align-items: center; gap: 9px; color: #d4bd89; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.pulse-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #d4bd89; box-shadow: 0 0 0 3px rgba(212,189,137,.14); }
.disclosure-message { color: #b8c9c1; flex: 1; }
.disclosure-link { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 800; white-space: nowrap; cursor: pointer; transition: color .18s var(--ease-out), transform .18s var(--ease-out); }
.disclosure-link:hover { color: #d4bd89; transform: translateX(2px); }
.rtl .disclosure-link:hover { transform: translateX(-2px); }
.section-pad { padding: 96px clamp(20px, 8vw, 125px); }.hero { display:grid; grid-template-columns: .9fr 1.1fr; align-items:center; gap:clamp(50px,8vw,140px); padding-top:74px; padding-bottom:92px; background:var(--sand); }.hero-copy { max-width:530px; }.kicker { display:flex; align-items:center; gap:10px; color:var(--brown); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.kicker b { color:var(--ink); font-size:9px; letter-spacing:.08em; }.dot,.live-dot { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--brass); }.hero h1 { margin:27px 0 22px; font-size:clamp(45px,5.4vw,78px); line-height:.98; letter-spacing:-.065em; max-width:650px; }.hero p { max-width:490px; color:#59655f; line-height:1.75; font-size:15px; }.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:43px; padding:0 18px; font-size:11px; font-weight:800; letter-spacing:.02em; transition:transform .16s var(--ease-out), background .18s, color .18s; }.button:active { transform:scale(.97); }.button-primary { background:var(--ink); color:white; }.button-primary:hover { background:var(--brown); }.button-ghost { border:1px solid rgba(23,61,53,.3); }.button-ghost:hover { background:rgba(255,255,255,.45); }.button-dark { background:var(--ink); color:white; }.button-light { background:#f5f4f0; color:var(--ink); }.hero-visual { position:relative; min-height:440px; background:linear-gradient(135deg,#213f37,#6b4d3c); border-radius:2px; }.hero-visual img { width:100%; height:100%; min-height:440px; object-fit:cover; filter:saturate(.82); display:block; }.hero-caption { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; padding:15px 18px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.6)); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.market-section { background:var(--ink); color:#f5f4f0; }.market-top,.finance-head,.announcement-head { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; }.section-intro { position:relative; padding-left:54px; }.rtl .section-intro { padding-left:0; padding-right:54px; }.section-intro-dark { color:#f5f4f0; }.section-number { position:absolute; left:0; top:2px; color:var(--brass); font-size:10px; letter-spacing:.1em; }.rtl .section-number { left:auto; right:0; }.section-eyebrow { font-size:10px; letter-spacing:.14em; color:var(--brass); font-weight:800; text-transform:uppercase; }.section-intro h2 { margin:10px 0 0; font-size:clamp(30px,3.5vw,53px); letter-spacing:-.055em; line-height:1; }.arabic-label { margin:10px 0 0; color:var(--muted); font-size:12px; }.section-intro-dark .arabic-label { color:#afbbb4; }.source-chip { padding:9px 12px; border:1px solid rgba(245,244,240,.2); color:#b5c1ba; font-size:10px; }.market-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:20px; margin-top:55px; }.quote-card,.chart-card { border:1px solid rgba(245,244,240,.2); min-height:286px; padding:28px; }.quote-card { display:flex; flex-direction:column; justify-content:space-between; background:rgba(255,255,255,.04); }.quote-label { color:#b7c5bd; letter-spacing:.12em; font-size:11px; }.price-placeholder { margin-top:30px; font-size:22px; color:#aebbb4; }.price-placeholder em { font-style:normal; font-size:52px; letter-spacing:-.07em; color:#f5f4f0; }.pending { display:block; margin-top:18px; color:#9dacA5; font-size:11px; }.quote-status { color:var(--brass); font-size:10px; }.live-dot { background:#92b59b; margin-right:5px; }.chart-card { background:#204c42; }.chart-head { display:flex; justify-content:space-between; font-size:11px; color:#cad2cc; }.periods { display:flex; gap:14px; }.periods button { color:#9eafa7; font-size:10px; cursor:pointer; }.periods .selected { color:#fff; border-bottom:1px solid var(--brass); padding-bottom:4px; }.chart-placeholder { margin-top:36px; color:var(--brass); }.chart-placeholder svg { width:100%; height:150px; }.chart-axis { display:flex; justify-content:space-between; color:#9eafa7; font-size:9px; }
.paper-section { background:#fbfaf7; }.why-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(50px,10vw,160px); margin-top:64px; }.why-statement { color:var(--brown); max-width:370px; }.big-quote { display:block; font-family:Georgia,serif; font-size:80px; height:45px; color:var(--brass); }.why-statement p { font-size:24px; line-height:1.3; letter-spacing:-.03em; }.pillars { border-top:1px solid var(--border); }.pillar { display:grid; grid-template-columns:48px 1fr; gap:15px; padding:22px 0; border-bottom:1px solid var(--border); }.pillar > span { color:var(--brass); font-size:10px; }.pillar h3 { margin:0 0 8px; font-size:17px; letter-spacing:-.02em; }.pillar p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }.operating-strip { display:flex; gap:70px; align-items:flex-end; margin-top:72px; padding-top:23px; border-top:1px solid var(--border); }.operating-strip div { display:flex; flex-direction:column; }.operating-strip strong { font-size:54px; letter-spacing:-.07em; line-height:1; }.operating-strip strong span { color:var(--brass); }.operating-strip small { margin-top:7px; color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }.operating-strip p { margin:0 0 4px auto; color:var(--muted); font-size:10px; }
.brands-section { background:#ede9df; }.brand-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:58px; }.brand-card { min-height:310px; padding:24px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; transition:transform .2s var(--ease-out); }.brand-card:hover { transform:translateY(-5px); }.brand-oud { background:#213f37; color:#f6f1e7; }.brand-oso { background:#c0a36d; color:#213f37; }.brand-thannah { background:#b6aa96; color:#302f27; }.brand-rimath { background:#6b4d3c; color:#f7f1e8; }.brand-symbol { position:absolute; top:28px; left:24px; font-size:31px; letter-spacing:-.08em; font-weight:800; }.brand-symbol span { font-weight:400; }.brand-type { font-size:9px; letter-spacing:.1em; opacity:.72; }.brand-card p { font-size:12px; line-height:1.55; max-width:210px; margin:12px 0 23px; opacity:.82; }.brand-card svg { position:absolute; right:22px; bottom:22px; width:17px; }
.finance-section { background:#e3e6df; }.year-switch { border:1px solid var(--border); display:flex; gap:0; padding:4px; }.year-switch span { padding:8px 14px; font-size:11px; color:var(--muted); }.year-switch .active { background:var(--ink); color:white; }.financial-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:60px; border-top:1px solid var(--border); border-left:1px solid var(--border); }.financial-card { padding:25px 23px; min-height:155px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }.financial-card > span { font-size:11px; color:var(--muted); }.financial-card strong { display:flex; align-items:baseline; gap:8px; margin-top:18px; font-size:36px; letter-spacing:-.07em; }.financial-card strong small { color:var(--brown); font-size:10px; letter-spacing:0; }.comparison { display:flex; align-items:center; gap:10px; margin-top:15px; color:var(--muted); font-size:10px; }.comparison b { font-size:11px; color:var(--ink); }.comparison i { font-style:normal; color:#4a8662; }.comparison i.negative { color:#aa6d58; }.finance-note { display:flex; justify-content:space-between; margin-top:22px; color:var(--muted); font-size:10px; }.finance-note a,.text-link { display:flex; align-items:center; gap:7px; color:var(--brown); font-weight:800; }
.report-list { margin-top:55px; border-top:1px solid var(--border); }.report-row { display:grid; grid-template-columns:110px 1fr 20px; align-items:center; gap:22px; padding:24px 0; border-bottom:1px solid var(--border); transition:padding .2s var(--ease-out); }.report-row:hover { padding-left:10px; }.report-year { color:var(--brass); font-size:12px; font-weight:800; }.report-row h3 { margin:0 0 5px; font-size:17px; }.report-row span,.muted-note { color:var(--muted); font-size:11px; }.muted-note { margin-top:20px; }.announcements-section { background:#f0eee8; }.announcement-empty { margin-top:55px; border:1px dashed #b7bbb1; text-align:center; padding:64px 20px; max-width:720px; margin-left:auto; margin-right:auto; }.empty-mark { color:var(--brass); font-size:28px; }.announcement-empty h3 { margin:13px 0 10px; font-size:22px; letter-spacing:-.04em; }.announcement-empty p { max-width:440px; margin:0 auto 24px; color:var(--muted); font-size:12px; line-height:1.6; }.announcement-empty .button { display:inline-flex; }
.share-info-section { background:#d8dfd7; }.share-info-grid { display:grid; grid-template-columns:.5fr 1.5fr; gap:60px; margin-top:60px; }.share-company { display:flex; align-items:flex-start; gap:18px; }.share-company img { width:65px; height:65px; }.share-company span,.share-company small { display:block; font-size:11px; color:var(--muted); }.share-company strong { display:block; font-size:44px; line-height:1; letter-spacing:-.08em; margin:8px 0; }.data-list { border-top:1px solid #bbc5bb; }.data-list > div { display:flex; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid #bbc5bb; font-size:12px; }.data-list span { color:var(--muted); }.data-list strong { font-weight:700; text-align:right; }
.governance-section { background:#f5f4f0; }.governance-list { display:grid; grid-template-columns:1fr 1fr; gap:0 40px; margin-top:55px; border-top:1px solid var(--border); }.governance-list a { display:flex; align-items:center; gap:15px; padding:21px 0; border-bottom:1px solid var(--border); font-size:14px; }.governance-list a span { color:var(--brass); font-size:10px; }.governance-list a svg { margin-left:auto; color:var(--muted); }
.contact-section { background:var(--ink); color:#f5f4f0; display:grid; grid-template-columns:1fr .65fr; gap:70px; align-items:end; }.contact-copy { max-width:450px; color:#afbbb4; font-size:14px; line-height:1.7; margin:26px 0 25px; }.contact-meta { display:flex; flex-direction:column; gap:13px; color:#b8c5be; font-size:12px; border-left:1px solid rgba(255,255,255,.2); padding-left:28px; }.rtl .contact-meta { border-left:0; border-right:1px solid rgba(255,255,255,.2); padding-left:0; padding-right:28px; }.contact-meta span:first-child { color:white; font-weight:800; }.contact-meta small { color:var(--brass); margin:0 8px; }.site-footer { padding:32px clamp(20px,8vw,125px) 38px; background:#102e29; color:#b4c3bb; display:grid; grid-template-columns:1fr auto; gap:25px; align-items:start; }.footer-brand { display:flex; align-items:center; gap:13px; }.footer-brand strong { color:white; }.footer-brand span { display:block; margin-top:5px; font-size:8px; letter-spacing:.13em; }.footer-links { display:flex; gap:20px; font-size:10px; align-items:center; }.footer-links a { display:flex; align-items:center; gap:5px; }.site-footer p { grid-column:1/-1; padding-top:18px; margin:0; border-top:1px solid rgba(255,255,255,.12); font-size:10px; color:#8fa69c; }
.rtl { font-family:'IBM Plex Sans Arabic','Manrope',sans-serif; }.rtl .hero h1,.rtl .section-intro h2 { letter-spacing:0; line-height:1.25; }.rtl .desktop-nav button { letter-spacing:0; text-transform:none; }.rtl .brand-lockup { text-align:right; }.rtl .hero-copy,.rtl .section-intro,.rtl .pillar,.rtl .data-list strong { text-align:right; }.rtl .hero-actions { flex-direction:row-reverse; justify-content:flex-start; }.rtl .operating-strip p { margin:0 auto 4px 0; }.rtl .brand-symbol { left:auto; right:24px; }.rtl .brand-card { text-align:right; }.rtl .brand-card svg { right:auto; left:22px; }.rtl .report-row:hover { padding-left:0; padding-right:10px; }.rtl .governance-list a svg { margin-left:0; margin-right:auto; }
.mobile-nav { display:none; }
@media (max-width:1050px) { .desktop-nav { gap:13px; }.desktop-nav button { font-size:9px; }.site-header { gap:18px; } }
@media (max-width:760px) { .site-header { height:66px; } .disclosure-bar { min-height: auto; padding: 11px 20px; gap: 10px; flex-wrap: wrap; } .disclosure-label { width: 100%; } .disclosure-message { font-size: 10px; } .disclosure-link { font-size: 10px; }.desktop-nav { display:none; }.menu-toggle { display:block; }.mobile-nav { display:flex; position:absolute; top:65px; left:0; right:0; padding:15px 22px 20px; background:#f5f4f0; border-bottom:1px solid var(--border); flex-direction:column; box-shadow:0 12px 30px rgba(23,61,53,.1); }.mobile-nav button { display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--border); font-size:12px; text-align:left; }.rtl .mobile-nav button { text-align:right; }.section-pad { padding:70px 20px; }.hero { display:flex; flex-direction:column; gap:36px; align-items:stretch; padding-top:54px; }.hero h1 { font-size:52px; }.hero-visual,.hero-visual img { min-height:300px; }.market-top,.finance-head,.announcement-head { align-items:flex-start; flex-direction:column; }.market-grid,.why-layout,.share-info-grid,.contact-section { grid-template-columns:1fr; }.market-grid { margin-top:35px; }.quote-card,.chart-card { min-height:250px; }.why-layout { margin-top:40px; gap:35px; }.operating-strip { gap:30px; flex-wrap:wrap; margin-top:50px; }.operating-strip p { width:100%; margin:0; }.brand-grid { grid-template-columns:1fr 1fr; margin-top:40px; }.brand-card { min-height:260px; padding:18px; }.brand-symbol { left:18px; top:20px; font-size:25px; }.rtl .brand-symbol { right:18px; }.financial-grid { grid-template-columns:1fr 1fr; margin-top:40px; }.financial-card { padding:18px 14px; min-height:140px; }.financial-card strong { font-size:27px; }.financial-card strong small { font-size:8px; }.report-row { grid-template-columns:60px 1fr 18px; gap:12px; }.governance-list { grid-template-columns:1fr; }.contact-meta { border:0; border-top:1px solid rgba(255,255,255,.2); padding:25px 0 0; }.rtl .contact-meta { border:0; border-top:1px solid rgba(255,255,255,.2); padding:25px 0 0; }.site-footer { grid-template-columns:1fr; }.footer-links { flex-wrap:wrap; }.site-footer p { grid-column:auto; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* Icon sizing for the inline SVGs used in place of lucide-react (see template) */
.icon { display:inline-block; vertical-align:middle; }

/* Live quote change indicator (investor/services.py) */
.pending.positive { color:#8fcaa1; }
.pending.negative { color:#e0a08f; }