/* ============================================================
   MAIN.CSS — variables, reset, base typography, layout & reveal
   Loaded first on every page. Absorbs the few rules from the
   legacy assets/css/common.css that were actually in use
   (reset, .sr-only, .container--narrow, focus ring, scrollbar);
   everything else in that file was unused and has been dropped.
   ============================================================ */

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, select, textarea { font: inherit; }

/* ===== ACCESSIBILITY / UTILITIES (from common.css) ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}
.container--narrow { max-width: 960px; margin: 0 auto; padding: 0 2rem; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

/* ===== SCROLLBAR STYLING (from common.css) ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }

/* ===== DESIGN TOKENS ===== */
:root{
  --teal:#0A4F52;
  --teal-bright:#0E7A7E;
  --teal-deep:#063335;
  --ivory:#F7F3EA;
  --gold:#B8933F;
  --gold-light:#E4D2A1;
  --charcoal:#1A1A1A;
  --gray:#6B6B6B;
  --orange:#F2784B;
  --wa:#25D366;
  --white:#FFFFFF;
  --line:#E7E2D6;

  --serif:'Fraunces', serif;
  --sans:'Manrope', system-ui, sans-serif;
  --sans-ar:'Tajawal', system-ui, sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --header-h:78px;
  --radius:14px;
  --max:1320px;
}

/* ===== BASE TYPOGRAPHY ===== */
body{font-family:var(--sans); color:var(--charcoal); background:var(--white); font-size:16px; line-height:1.6;}
h1,h2,h3,h4{font-family:var(--serif); line-height:1.15; letter-spacing:-0.01em; font-weight:600; color:var(--teal);}
p{color:var(--gray); line-height:1.7;}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}
.eyebrow::before{content:""; width:28px; height:2px; background:var(--gold); display:block;}

/* ===== LAYOUT ===== */
.container{width:100%; max-width:var(--max); margin:0 auto; padding:0 24px;}
.section-head{max-width:680px; margin:0 auto 56px; text-align:center;}
.section-head h2{font-size:clamp(28px,4vw,42px); margin-bottom:14px;}
.section-head p{font-size:17px;}
.bg-ivory{background:var(--ivory);}
.bg-teal{background:var(--teal); color:var(--white);}
.bg-teal h2, .bg-teal h3, .bg-teal h4{color:var(--white);}
.bg-teal p{color:rgba(255,255,255,.78);}
section{padding:88px 0;}
@media(max-width:768px){ section{padding:56px 0;} .section-head{margin-bottom:36px;} }

/* ===== REVEAL ANIMATION ===== */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 90ms);}

/* ===== ARABIC / RTL (global typography) ===== */
html[dir="rtl"] body{font-family:var(--sans-ar), var(--sans);}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4{font-family:var(--sans-ar), var(--sans); font-weight:800;}
html[dir="rtl"] .eyebrow::before{order:2;}