/* Elwan · Brand & Digital Studio — dark by default, light via toggle or system */
:root {
  --bg:#0C0D12; --surface:#15171F; --surface-2:#1D2029; --text:#F2EFE8; --muted:#9B9CA8;
  --line:rgba(255,255,255,.09); --accent:#FF6B57; --on-accent:#0C0D12;
  --saffron:#F2B134; --teal:#2EC4B6; --violet:#7B61FF; --leaf:#7BD389;
  --spectrum:linear-gradient(90deg,var(--saffron),var(--accent),var(--violet),var(--teal));
  --font-head:"Fraunces",Georgia,serif; --font-body:"DM Sans",system-ui,sans-serif;
  --font-ar:"Cairo","Noto Naskh Arabic",sans-serif; --radius:14px; color-scheme:dark;
}
:root[data-theme="light"] {
  --bg:#FAF7F2; --surface:#FFFFFF; --surface-2:#F1ECE3; --text:#14151B; --muted:#5F6070;
  --line:rgba(20,21,27,.11); --accent:#C93A26; --on-accent:#FFFFFF;
  --saffron:#C98A06; --teal:#10907F; --violet:#5B3FE0; --leaf:#2F9A4F; color-scheme:light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#FAF7F2; --surface:#FFFFFF; --surface-2:#F1ECE3; --text:#14151B; --muted:#5F6070;
    --line:rgba(20,21,27,.11); --accent:#C93A26; --on-accent:#FFFFFF;
    --saffron:#C98A06; --teal:#10907F; --violet:#5B3FE0; --leaf:#2F9A4F; color-scheme:light;
  }
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { margin:0; background:var(--bg); color:var(--text); font:400 1.0625rem/1.65 var(--font-body); -webkit-font-smoothing:antialiased; }
a { color:inherit; } img { max-width:100%; }
.container { width:min(1120px,100% - 40px); margin-inline:auto; }
.muted { color:var(--muted); }
h1,h2,h3 { font-family:var(--font-head); font-weight:600; line-height:1.12; margin:0 0 .5em; letter-spacing:-.015em; }
h1 { font-size:clamp(2.5rem,7vw,5rem); } h2 { font-size:clamp(1.9rem,4.5vw,3rem); } h3 { font-size:1.35rem; }
.eyebrow { font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.spectrum-text { background:var(--spectrum); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; }
section { padding:clamp(64px,10vw,120px) 0; border-top:1px solid var(--line); }
.hero { border-top:0; padding-top:clamp(56px,9vw,120px); }
.hero p.lead { max-width:640px; font-size:1.2rem; color:var(--muted); margin:0 0 32px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.rule { height:3px; width:96px; background:var(--spectrum); border-radius:3px; margin:0 0 28px; }

/* nav */
.nav { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav-inner { display:flex; align-items:center; gap:12px; height:68px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.brand-name { font:600 1.5rem var(--font-head); } .brand-ar { font:600 1.1rem var(--font-ar); color:var(--muted); }
.dots { display:inline-flex; gap:3px; } .dots i { width:8px; height:8px; border-radius:50%; }
.dots i:nth-child(1){background:var(--saffron)} .dots i:nth-child(2){background:var(--accent)}
.dots i:nth-child(3){background:var(--violet)} .dots i:nth-child(4){background:var(--teal)}
.nav-links { display:flex; align-items:center; gap:26px; font-size:.95rem; }
.nav-links a { text-decoration:none; color:var(--muted); } .nav-links a:hover { color:var(--text); }
.nav-links a.btn { color:var(--on-accent); }
.icon-btn { display:inline-grid; place-items:center; padding:0; background:none; border:1px solid var(--line); color:var(--text); width:40px; height:40px; border-radius:50%; font-size:1.1rem; cursor:pointer; }
.icon-btn.menu { display:none; }

/* buttons */
.btn { display:inline-flex; align-items:center; background:var(--accent); color:var(--on-accent); border:0; border-radius:999px; padding:14px 28px; font:600 1rem var(--font-body); text-decoration:none; cursor:pointer; }
.btn:hover { filter:brightness(1.08); } .btn:disabled { opacity:.6; }
.btn-sm { padding:9px 18px; font-size:.9rem; }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--line); }

/* cards */
.grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:40px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; border-top:3px solid var(--c,var(--accent)); }
.card p { color:var(--muted); margin:0; } .card .tag { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c,var(--accent)); margin-bottom:10px; display:block; }
.card a { text-decoration:none; } .card a:hover h3 { text-decoration:underline; }
.steps { counter-reset:s; } .steps .card { border-top-width:1px; }
.steps .card::before { counter-increment:s; content:"0" counter(s); font:600 2rem var(--font-head); color:var(--c); display:block; margin-bottom:8px; }

/* form */
.brief-wrap { display:grid; gap:48px; grid-template-columns:1fr 1.2fr; align-items:start; }
form { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:grid; gap:16px; }
label { font-size:.85rem; color:var(--muted); display:grid; gap:6px; }
input,select,textarea { font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px; width:100%; }
input:focus,select:focus,textarea:focus,a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.hp { position:absolute; left:-9999px; }
.form-msg { display:none; font-size:.95rem; } .form-msg.show { display:block; } .form-msg.ok { color:var(--leaf); } .form-msg.err { color:var(--accent); }

/* footer */
footer { border-top:1px solid var(--line); padding:56px 0 28px; }
.foot { display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.foot-links { display:flex; flex-direction:column; gap:8px; } .foot-links a { text-decoration:none; color:var(--muted); }
.foot-bottom { margin-top:36px; padding-top:20px; border-top:1px solid var(--line); font-size:.85rem; color:var(--muted); }
footer a:hover { color:var(--text); }

@media (max-width:820px) {
  .icon-btn.menu { display:inline-grid; }
  .nav-links { display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:18px; padding:24px 20px; background:var(--bg); border-bottom:1px solid var(--line); }
  .nav-links.open { display:flex; }
  .brief-wrap { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

/* images */
.shot { margin:0; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.shot img { display:block; width:100%; height:auto; }
:root:not([data-theme="light"]) .shot img { filter:brightness(.93) contrast(1.02); }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px); align-items:center; }
.hero h1 { font-size:clamp(2.4rem,5.6vw,4.4rem); }
.shot-wide, #services .shot { max-width:960px; margin:40px auto 0; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
#brief .shot { margin-top:28px; }

/* scroll animations (only when JS is on; honours reduced motion) */
#progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:30; background:var(--spectrum); transform:scaleX(0); transform-origin:0 50%; }
.nav.scrolled { box-shadow:0 8px 30px rgba(0,0,0,.18); }
.js .reveal { opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0) * 90ms); }
.js .reveal.in { opacity:1; transform:none; }
.js .img-reveal img { transform:scale(1.07); transition:transform 1.4s cubic-bezier(.2,.7,.2,1); }
.js .img-reveal.in img { transform:scale(1); }
.card { transition:translate .25s ease; }
.card:hover { translate:0 -4px; }
.js .card.reveal { transition:opacity .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms), transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms), translate .25s ease 0s; }
@media (max-width:820px) { .hero-grid,.split { grid-template-columns:1fr; } .hero-grid .shot { max-width:420px; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal,.js .img-reveal img { opacity:1; transform:none; transition:none; }
  #progress { display:none; } .card:hover { translate:none; }
}