/* Shared across every page: fonts, reset, design tokens, and the
   glass-card + language/direction rules used on both the homepage
   and the work subpages. Loaded before home.css / work.css. */

@font-face{font-family:"Expo Arabic";src:url("https://db.onlinewebfonts.com/t/9004b72f96afb1e5f13389f489791113.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Expo Arabic";src:url("https://db.onlinewebfonts.com/t/b009a8fb757127bf4c5ad1d5abd060e9.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Expo Arabic";src:url("https://db.onlinewebfonts.com/t/5a46b722115434b86e5e9719ff7f6f23.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --green:#11524e;
  --gold:#e2b961;
  --navy:#071b2f;
  --ink:#061b1b;
  --white:#f7f6f1;
  --muted:rgba(247,246,241,.68);
  --line:rgba(226,185,97,.23);
  --shadow:0 8px 20px rgba(0,0,0,.4),0 22px 70px rgba(0,0,0,.34);
  --radius:20px;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* .glass's own fill — split out from --surface-rgb so the light theme can use a
     stronger, independently-tuned tint (see the light override below and the
     "Light theme card contrast" note near .glass) without touching --surface-rgb,
     which every low-opacity UI chip (nav buttons, slider controls, socials) also
     depends on and which still works correctly as-is in both themes. */
  --glass-fill-1:rgba(var(--surface-rgb),.075);
  --glass-fill-2:rgba(var(--surface-rgb),.025);

  /* Theme-aware tokens — dark is the default/native palette (--white/--muted
     above stay FIXED and are used on purpose wherever text sits on a
     permanently-dark surface, e.g. service cards, CTA, work/gallery overlays,
     which never flip). These --text-* tokens are for content that sits
     directly on the page background or on a .glass surface, both of which do
     flip with the theme. */
  --text-rgb:247,246,241;
  --text:var(--white);
  --text-muted:var(--muted);
  /* --gold-text: gold, but only where it's used as TEXT sitting on a
     surface that flips (kickers, footer titles, star ratings, the contact
     page's highlight value). --gold itself (buttons, borders, decorative
     glows, dot indicators) stays untouched, since those never have this
     problem. Plain --gold text on the light theme's page/.glass backgrounds
     measures ~1.7:1 contrast (WCAG needs 4.5:1 for normal text) — gold and
     the light theme's cream tone are both light, warm hues, so at full
     brightness gold nearly disappears there even though it reads perfectly
     fine on the dark theme's near-black backgrounds (~10:1). */
  --gold-text:var(--gold);
  --gold-text-rgb:226,185,97;
  /* Big decorative background numbers only (.step-num, .contact-step span) — kept gold in dark
     mode (unchanged look) but switched to near-black in light mode by request; see the light
     override below for why this needs its own token instead of reusing --gold-text-rgb.
     Opacity is also its own token (not shared with the light override) — the light theme needed a
     noticeably higher opacity for these numbers to read as "dark black" rather than a faint tint,
     but the *same* higher opacity applied to dark mode's gold would over-saturate/darken it, which
     was never asked for and isn't the goal here. */
  --step-num-rgb:226,185,97;
  --step-num-a1:.24;--step-num-a2:.42;--step-num-a3:.3;
  --bg-1:#041314;--bg-2:#071e1e;--bg-3:#061a2b;
  --bg-radial-1:rgba(17,82,78,.42);
  --bg-radial-2:rgba(226,185,97,.10);
  --surface-rgb:255,255,255;
  --nav-bg-rgb:8,31,31;--nav-bg-a:.5;
  --nav-bg-scrolled-rgb:6,20,21;--nav-bg-scrolled-a:.82;
  --hairline-rgb:255,255,255;
  --grid-line-rgb:255,255,255;
}
:root[data-theme="light"]{
  --text-rgb:6,27,27;
  --text:var(--ink);
  --text-muted:rgba(6,27,27,.62);
  --gold-text:#785a14;
  --gold-text-rgb:120,90,20;
  /* Requested by the client specifically for the big background numbers, in two rounds: first
     "black, but not the darkest" (near-black base + the original low opacity), then a follow-up
     "خليها أسود غامق" (make it dark black) once that read as too faint/washed-out in practice — so
     the opacity tokens below were raised substantially for light mode specifically, on top of the
     near-black (not pure #000) base color. Kept as its own token rather than repurposing
     --gold-text-rgb (which every other gold-as-text element — kickers, footer titles, stars, the
     contact page's highlight value — still needs to stay bronze/gold). */
  --step-num-rgb:12,11,9;
  --step-num-a1:.55;--step-num-a2:.74;--step-num-a3:.6;
  /* Wider tonal range than the original near-flat #faf7ee→#e9e1cb wash (all three
     stops sat within ~5% lightness of each other, so the page background and every
     .glass card tinted from it read as one undifferentiated beige field — reported
     as "dull/gloomy"). Brighter top stop + a visibly richer honey-tan bottom stop
     gives the gradient actual depth; radial accents bumped so the teal/gold glows
     actually register instead of nearly disappearing into the flat beige. */
  --bg-1:#fdfbf5;--bg-2:#f3ecd6;--bg-3:#e6d6ac;
  --bg-radial-1:rgba(17,82,78,.14);
  --bg-radial-2:rgba(226,185,97,.20);
  --surface-rgb:6,27,27;
  /* Light-theme .glass card contrast: reusing the dark theme's own approach — a
     low-opacity dark-ink tint meant to read as a highlight against whatever's
     behind it — doesn't translate here. On a near-black page a light tint pops;
     on this warm-beige page a *darker* tint just reads as slightly-duller beige,
     nearly indistinguishable from the page itself (cards read as barely-there
     smudges, reported as "dull/gloomy"). The fix isn't more opacity of the same
     dark tint, it's flipping direction: a bright, mostly-opaque WHITE fill, which
     is what actually contrasts against a warm cream/tan canvas — genuine "white
     card floating on a tinted background" instead of a variation on the page's
     own hue. Paired with a darker bronze border (plain bright --gold reads
     low-contrast on a warm-light background, same reason --gold-text exists) and
     a soft neutral shadow for lift. */
  --glass-fill-1:rgba(255,255,255,.86);
  --glass-fill-2:rgba(255,255,255,.58);
  --line:rgba(120,90,20,.28);
  --shadow:0 6px 16px rgba(20,20,15,.07),0 20px 46px rgba(20,20,15,.09);
  --nav-bg-rgb:250,247,238;--nav-bg-a:.72;
  --nav-bg-scrolled-rgb:250,247,238;--nav-bg-scrolled-a:.9;
  --hairline-rgb:6,27,27;
  --grid-line-rgb:6,27,27;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}

.glass{
  background:linear-gradient(145deg,var(--glass-fill-1),var(--glass-fill-2));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(var(--surface-rgb),.09),var(--shadow);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

html[dir="rtl"] body{font-family:"Expo Arabic",Arial,sans-serif;direction:rtl}
html[dir="ltr"] body{font-family:"Manrope",Arial,sans-serif;direction:ltr}

/* ==================== Header (shared — identical on every page) ==================== */
header{position:fixed;top:18px;inset-inline:0;z-index:50}
.nav{
  min-height:64px;border-radius:20px;padding:7px 16px;
  display:flex;align-items:center;gap:24px;
  background:rgba(var(--nav-bg-rgb),var(--nav-bg-a));border-color:rgba(226,185,97,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
header.scrolled .nav{
  background:rgba(var(--nav-bg-scrolled-rgb),var(--nav-bg-scrolled-a));border-color:rgba(226,185,97,.28);
  box-shadow:0 14px 38px rgba(0,0,0,.28);
}
.logo{height:40px;width:auto;object-fit:contain;display:block;flex:0 0 auto}
.navlinks{display:flex;gap:18px;align-items:center;margin-inline:auto}
.navlinks a{
  position:relative;padding:6px 1px;
  color:var(--text-muted);font-size:14px;font-weight:600;
  transition:color .25s var(--ease);
}
.navlinks a:after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:center;
  transition:transform .3s var(--ease);
}
.navlinks a:hover{color:var(--text)}
.navlinks a:hover:after{transform:scaleX(1)}
.navlinks a.active{color:var(--text)}
.navlinks a.active:after{transform:scaleX(1)}
.actions{display:flex;align-items:center;gap:9px}
.lang{
  border:1px solid rgba(226,185,97,.22);background:rgba(var(--surface-rgb),.04);
  color:var(--text);padding:10px 13px;border-radius:12px;cursor:pointer;
  font-size:13px;font-weight:700;transition:border-color .25s var(--ease),background .25s var(--ease);
}
.lang:hover{border-color:rgba(226,185,97,.45);background:rgba(var(--surface-rgb),.07)}
.theme-toggle{
  border:1px solid rgba(226,185,97,.22);background:rgba(var(--surface-rgb),.04);
  color:var(--text);width:40px;height:40px;padding:0;border-radius:12px;cursor:pointer;
  display:grid;place-items:center;position:relative;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.theme-toggle:hover{border-color:rgba(226,185,97,.45);background:rgba(var(--surface-rgb),.07)}
.theme-toggle svg{width:18px;height:18px;position:absolute;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s var(--ease),transform .35s var(--ease)}
.theme-toggle .icon-moon{opacity:0;transform:scale(.4) rotate(-40deg)}
.theme-toggle .icon-sun{opacity:1;transform:scale(1) rotate(0)}
:root[data-theme="light"] .theme-toggle .icon-sun{opacity:0;transform:scale(.4) rotate(40deg)}
:root[data-theme="light"] .theme-toggle .icon-moon{opacity:1;transform:scale(1) rotate(0)}
.gold-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 20px;border-radius:14px;border:1px solid rgba(226,185,97,.55);
  background:var(--gold);color:#000;font-weight:800;box-shadow:0 10px 28px rgba(226,185,97,.14);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s
}
.gold-btn:hover{transform:translateY(-2px);box-shadow:0 15px 35px rgba(226,185,97,.23);filter:brightness(1.04)}
.menu{display:none;background:none;border:0;color:var(--text);font-size:25px;cursor:pointer}

/* Safety net for the "squeeze zone" just above the mobile hamburger breakpoint (981-1180px,
   common laptop/tablet-landscape widths) — 7 nav items + logo + actions need more room than
   they get by default at these widths. Only the header tightens here; the rest of the page's
   layout keeps using the normal 980px breakpoint. */
@media(min-width:981px) and (max-width:1180px){
  .navlinks{gap:10px}
  .navlinks a{font-size:13px}
  .gold-btn{padding:0 14px}
}

@media(max-width:980px){
  header{top:10px}
  .nav{min-height:60px;padding-block:6px;gap:10px}
  .logo{height:36px}
  .navlinks{
    display:none;position:absolute;top:calc(100% + 8px);inset-inline:0;
    flex-direction:column;align-items:stretch;gap:4px;margin:0;padding:10px;
    border-radius:16px;
    background:rgba(var(--nav-bg-scrolled-rgb),.94);border:1px solid rgba(226,185,97,.18);
    box-shadow:0 20px 50px rgba(0,0,0,.30);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
  }
  .navlinks a{
    padding:12px 14px;font-size:14px;text-align:center;border-radius:11px;
    background:rgba(var(--surface-rgb),.03);
  }
  .navlinks a:after{display:none}
  .navlinks a:hover,.navlinks a.active{background:rgba(226,185,97,.1);color:var(--text)}
  .actions{gap:7px;margin-inline-start:auto}
  .lang{padding:9px 11px;border-radius:11px;font-size:14px}
  .theme-toggle{width:36px;height:36px;border-radius:11px}
  .theme-toggle svg{width:17px;height:17px}
  .actions .gold-btn{display:none}
  .menu{display:block;width:40px;height:40px;padding:0;border-radius:11px;border:1px solid rgba(226,185,97,.20);background:rgba(var(--surface-rgb),.035);font-size:23px;line-height:1}
}
@media(max-width:420px){
  .nav .logo{height:33px}
  .nav{min-height:56px;padding-block:5px}
  .lang{padding:8px 10px}
  .menu{width:38px;height:38px}
}

/* ==================== Footer (shared — identical on every page) ==================== */
footer{padding:55px 0 30px;border-top:1px solid rgba(var(--hairline-rgb),.07)}
.footer-grid{display:grid;grid-template-columns:1.25fr .8fr .9fr 1fr;gap:40px}
.footer-brand p{color:var(--text-muted);line-height:1.9;max-width:320px;font-size:14px}
.footer-title{color:var(--gold-text);font-weight:800;margin-bottom:15px}
.footer-links{display:grid;gap:9px}
.footer-links a{color:var(--text-muted);font-size:13px}
.footer-links a:hover{color:var(--text)}
.socials{display:flex;flex-wrap:wrap;gap:8px}
.socials a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--surface-rgb),.04);border:1px solid rgba(226,185,97,.18)}
.socials svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.socials svg.brand{width:16px;height:16px;fill:currentColor;stroke:none}
.copy{display:flex;justify-content:center;text-align:center;gap:20px;margin-top:45px;padding-top:22px;border-top:1px solid rgba(var(--hairline-rgb),.07);color:rgba(var(--text-rgb),.42);font-size:12px}

@media(max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .copy{display:block;line-height:1.8}
  .copy span{display:block;margin-top:8px}
}
@media(max-width:420px){
  .footer-grid{grid-template-columns:1fr;gap:24px}
}