/* =========================================================================
   Bilingual designer portfolio — stylesheet
   Sections:
     1. Tokens & themes        7. Projects (cards, grid, filters)
     2. Reset & base           8. Project detail + lightbox
     3. Buttons & utilities    9. Clients
     4. Header / nav          10. Contact + forms
     5. Hero                  11. Footer + WhatsApp float
     6. Marquee (from centre) 12. Reveal animations & responsive
   ========================================================================= */

/* ---------- 1. Tokens & themes ---------- */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  --bg: #ffffff;
  --surface: #f7f8fc;
  --surface-2: #eef0f7;
  --border: #e3e6f0;
  --border-strong: #cfd4e3;
  --text: #12131a;
  --text-muted: #5b5f73;
  --text-faint: #8b8fa3;

  --accent: #4f46e5;
  --accent-2: #0ea5e9;
  --accent-soft: rgba(79, 70, 229, 0.1);
  --on-accent: #ffffff;

  --whatsapp: #25d366;
  --whatsapp-dark: #1da851;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 18, 33, 0.06), 0 2px 8px rgba(16, 18, 33, 0.05);
  --shadow-md: 0 6px 24px rgba(16, 18, 33, 0.09);
  --shadow-lg: 0 18px 50px rgba(16, 18, 33, 0.16);

  --wrap: 1160px;
  --header-h: 68px;
  --marquee-gap: 3rem;
  --marquee-speed: 42s;
}

[data-theme='dark'] {
  /* A calm charcoal, not near-black — softer on the eyes than the previous
     OLED-style #0a0b0f while keeping the same depth ladder (bg < surface <
     surface-2) so cards still read as raised. */
  --bg: #17181d;
  --surface: #1e2026;
  --surface-2: #262930;
  --border: #343841;
  --border-strong: #454a56;
  --text: #f0f1f5;
  --text-muted: #a8adc0;
  --text-faint: #7d8298;

  --accent: #7c74ff;
  --accent-2: #38bdf8;
  --accent-soft: rgba(124, 116, 255, 0.16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 20px 55px rgba(0, 0, 0, 0.5);
}

/* ---------- Arabic: right-to-left ----------
   Switching to Arabic runs the whole page right-to-left: `<html dir="rtl">`
   flips flex order, grid order and every logical property, so the layout
   mirrors the English version. Only the marquees stay pinned to
   `direction: ltr` (see "Marquee") so they keep scrolling the same way. */

body.is-rtl,
body.is-rtl .brand-name,
body.is-rtl h1, body.is-rtl h2, body.is-rtl h3, body.is-rtl h4,
body.is-rtl .btn,
body.is-rtl input, body.is-rtl textarea, body.is-rtl select,
body.is-rtl .hero-name, body.is-rtl .section-title, body.is-rtl .detail-title,
body.is-rtl .stat-value {
  font-family: 'Tajawal', 'Inter', system-ui, sans-serif;
}
body.is-rtl { letter-spacing: 0; }

/* Text-bearing elements. Redundant under an RTL document, but kept so text
   stays RTL inside the LTR-pinned marquees. */
body.is-rtl h1,
body.is-rtl h2,
body.is-rtl h3,
body.is-rtl h4,
body.is-rtl p,
body.is-rtl dd,
body.is-rtl dt,
body.is-rtl label,
body.is-rtl input,
body.is-rtl textarea,
body.is-rtl select,
body.is-rtl .brand-name,
body.is-rtl .site-nav a,
body.is-rtl .mobile-nav a,
body.is-rtl .filter-btn,
body.is-rtl .marquee-caption,
body.is-rtl .tool-name,
body.is-rtl .stat-label,
body.is-rtl .project-cat,
body.is-rtl .project-title,
body.is-rtl .project-meta-sub,
body.is-rtl .project-meta-title,
body.is-rtl .project-meta-views,
body.is-rtl .project-tag,
body.is-rtl .project-badge,
body.is-rtl .filter-count,
body.is-rtl .category-title > span,
body.is-rtl .project-nav-label,
body.is-rtl .project-nav-title,
body.is-rtl .form-msg,
body.is-rtl .footer-copy,
body.is-rtl .empty-note,
body.is-rtl .btn > span,
body.is-rtl .whatsapp-label,
body.is-rtl .live-badge > span,
body.is-rtl .back-link > span {
  direction: rtl;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
dl, dd, dt { margin: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.section { padding-block: clamp(64px, 9vw, 112px); }
.section--top-tight { padding-top: 0; }

.eyebrow {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 0.6em;
}
body.is-rtl .eyebrow { letter-spacing: 0; }

.section-title { font-size: clamp(1.75rem, 3.6vw, 2.6rem); margin-bottom: 0.35em; }
.section-lead { color: var(--text-muted); font-size: 1.05rem; max-width: 56ch; margin: 0; }
.section-head { margin-bottom: clamp(32px, 5vw, 56px); }

.section-cta { display: flex; justify-content: center; margin-top: 48px; }
.empty-note { color: var(--text-muted); text-align: center; padding: 40px 0; }

.skip-link {
  position: absolute; inset-inline-start: 16px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 18px; border-radius: var(--radius-sm); transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

/* ---------- 3. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: 0.7em 1.4em; border: 1px solid transparent; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 0.95rem; cursor: pointer; white-space: nowrap;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 0.85em 1.7em; font-size: 1rem; }
.btn-sm { padding: 0.5em 1em; font-size: 0.85rem; }

.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover { box-shadow: var(--shadow-md); filter: brightness(1.06); }

.btn-outline { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.btn-whatsapp {
  background: var(--whatsapp); color: #fff; box-shadow: var(--shadow-sm);
  animation: whatsapp-pulse 2.6s ease-out infinite;
}
.btn-whatsapp:hover {
  background: var(--whatsapp-dark); box-shadow: var(--shadow-md);
  animation-play-state: paused;
}
/* A slow, gentle ring pulse — draws the eye to the call-to-action without
   being a constant distraction (~2.6s, most of it sitting still). */
@keyframes whatsapp-pulse {
  0%   { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70%  { box-shadow: var(--shadow-sm), 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(37, 211, 102, 0); }
}
.btn-icon { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }

/* One shared icon contract: 20px box, currentColor stroke, never squashed by a
   flex parent, never mirrored when the page language changes. */
.icon {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
.social-links .icon { width: 19px; height: 19px; }

/* ---------- 4. Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
/* Scrolled away from the hero: the bar settles into a compact, solid state. */
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.site-header.is-compact {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-md);
}

.header-inner {
  display: flex; align-items: center; gap: 20px;
  min-height: var(--header-h);
  transition: min-height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.site-header.is-compact .header-inner { min-height: 54px; }

.brand {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 700;
  transition: gap 0.35s ease;
}
.brand-mark {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1rem;
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              font-size 0.35s ease, border-radius 0.35s ease;
}
.site-header.is-compact .brand-mark { width: 28px; height: 28px; font-size: 0.85rem; border-radius: 8px; }
.brand-name {
  font-family: var(--font-display); font-size: 1.02rem; white-space: nowrap;
  transition: font-size 0.35s ease;
}
.site-header.is-compact .brand-name { font-size: 0.94rem; }

/* Uploaded logo. Height is fixed and width is capped, with object-fit:contain
   so the artwork is letterboxed inside that box rather than stretched — a
   2000px logo and a 120px logo both render at exactly the same height. */
.brand-logo {
  height: 38px; width: auto;
  max-width: 190px;
  object-fit: contain; object-position: left center;
  transition: height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), max-width 0.35s ease;
}
.site-header.is-compact .brand-logo { height: 30px; max-width: 160px; }
/* Two <img> tags stacked, one shown at a time — swapping the src via JS on
   every theme toggle would risk a flash of the wrong logo; this can't. */
.brand-logo--dark { display: none; }
[data-theme='dark'] .brand-logo--light { display: none; }
[data-theme='dark'] .brand-logo--dark { display: block; }

/* Reading-progress line pinned to the bottom edge of the sticky bar. */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; overflow: hidden; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: left center;
  will-change: transform;
}

.site-nav { margin-inline-start: auto; }
.site-nav ul { display: flex; gap: 4px; }
.site-nav a {
  display: block; padding: 8px 14px; border-radius: var(--radius-pill);
  color: var(--text-muted); font-size: 0.94rem; font-weight: 500;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.site-nav a:hover { color: var(--text); background: var(--surface-2); }
.site-nav a.is-current { color: var(--accent); background: var(--accent-soft); }

.header-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: 8px; }

/* Arabic header on every screen size: controls (menu, theme, language) and
   the nav sit on the right, logo on the left. */
body.is-rtl .header-inner { flex-direction: row-reverse; }
body.is-rtl .site-nav { margin-inline-start: 0; margin-inline-end: auto; }
body.is-rtl .header-actions { flex-direction: row-reverse; margin-inline-start: 0; }
/* The language switch sits inside the header, so open its menu inwards (leftwards). */
body.is-rtl .lang-menu { inset-inline-end: auto; inset-inline-start: 0; }

/* Language dropdown with flags */
.lang-switch { position: relative; }

.lang-current {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.lang-current:hover { border-color: var(--border-strong); }
.lang-switch.is-open .lang-current { border-color: var(--accent); background: var(--accent-soft); }

/* Flags are normalised to one box so any artwork lines up. */
.flag {
  width: 22px; height: 16px; flex: 0 0 auto;
  object-fit: cover; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
/* Fixed width so "EN" and "ع" produce an identically sized pill — otherwise
   the whole header shifts a few pixels when the language changes. */
.lang-code {
  min-width: 22px; text-align: center;
  font-size: 0.82rem; font-weight: 700; color: var(--text); line-height: 1;
}
.lang-caret {
  width: 14px; height: 14px; flex: 0 0 auto;
  fill: none; stroke: var(--text-faint); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.22s ease;
}
.lang-switch.is-open .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 120;
  min-width: 178px; padding: 6px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  animation: lang-menu-in 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.lang-menu[hidden] { display: none; }

@keyframes lang-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.lang-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 500; color: var(--text-muted);
  transition: background-color 0.16s ease, color 0.16s ease;
}
.lang-item:hover { background: var(--surface-2); color: var(--text); }
.lang-item.is-active { color: var(--accent); font-weight: 600; }
.lang-name { flex: 1; white-space: nowrap; }
.lang-check {
  width: 16px; height: 16px; flex: 0 0 auto; opacity: 0;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.lang-item.is-active .lang-check { opacity: 1; }

.theme-toggle, .menu-toggle {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.theme-toggle:hover, .menu-toggle:hover { border-color: var(--border-strong); }
.theme-toggle .icon { width: 18px; height: 18px; }
.icon-moon { display: none; }
[data-theme='dark'] .icon-sun { display: none; }
[data-theme='dark'] .icon-moon { display: block; }

/* Hamburger. The bars must be centred on BOTH axes — without an explicit
   justify-content a column flex container stacks them against the top edge. */
.menu-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}
.menu-toggle span {
  display: block; width: 18px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.18s ease, width 0.24s ease;
}
.menu-toggle[aria-expanded='true'] { background: var(--accent-soft); border-color: var(--accent); }
.menu-toggle[aria-expanded='true'] span { background: var(--accent); }
.menu-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.menu-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav { border-top: 1px solid var(--border); background: var(--bg); padding: 12px 24px 20px; }
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { display: grid; gap: 2px; }
.mobile-nav a { display: block; padding: 12px 8px; border-radius: var(--radius-sm); font-weight: 500; }
.mobile-nav a:hover { background: var(--surface-2); }

/* ---------- 5. Hero ---------- */
/* Horizontal-only clipping — .hero-glow bleeds past the left/right edges on
   purpose and still needs that clipped so it can't cause a horizontal
   scrollbar, but a vertical clip here is what was cutting off the tool
   chips' hover-scale near the bottom of the section. */
.hero { position: relative; padding-top: clamp(48px, 7vw, 84px); overflow-x: hidden; overflow-y: visible; }
.hero-glow {
  position: absolute; left: 50%; top: -180px; transform: translateX(-50%);
  width: min(900px, 120vw); height: 520px; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, var(--accent-soft), transparent 72%);
  filter: blur(10px);
}
.hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }

.hero-photo-wrap { position: relative; display: inline-block; margin-bottom: 26px; }
.hero-photo {
  width: clamp(150px, 22vw, 200px); aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; background: var(--surface-2);
  border: 4px solid var(--bg); box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo-fallback {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 3.4rem; color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), transparent);
}

.verified-badge {
  position: absolute; inset-inline-end: 6px; bottom: 8px;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--bg); border-radius: 50%; box-shadow: var(--shadow-md);
}
.verified-badge svg { width: 34px; height: 34px; }
.verified-shape { fill: var(--accent-2); stroke: none; }
.verified-check { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.hero-name { font-size: clamp(2rem, 5.5vw, 3.4rem); margin-bottom: 0.25em; }
.hero-headline {
  font-size: clamp(1.02rem, 2.1vw, 1.25rem); color: var(--text-muted);
  max-width: 60ch; margin: 0 auto 34px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- 6. Marquee — streams outward from the centre ---------- */
.tools-marquee-wrap { margin-top: clamp(52px, 8vw, 88px); }
.marquee-caption {
  text-align: center; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 22px;
}
body.is-rtl .marquee-caption { letter-spacing: 0; }

/* One continuous direction, identical in English and Arabic — the marquee is
   pinned to `direction: ltr` so the page language can never reverse it. */
.marquee {
  direction: ltr;
  width: 100%;
  padding-block: 10px;
}
.marquee-viewport {
  /* Horizontal-only clipping — the marquee still needs to hide items that
     have scrolled past the row, but a hover-scaled chip should be free to
     spill past the top/bottom edge instead of getting cut off. */
  overflow-x: hidden;
  overflow-y: visible;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  transition: -webkit-mask-image 0.2s ease, mask-image 0.2s ease;
}
/* The edge fade is a mask, not an overflow clip — overflow:visible above
   doesn't stop it from fading/cropping a chip that happens to be sitting
   near the left or right edge of the row when it's hovered and scales up.
   Drop the mask while any chip in the row is hovered (the scroll is already
   paused then, so there's nothing left for the fade to disguise). */
.marquee:hover .marquee-viewport,
.marquee:focus-within .marquee-viewport {
  -webkit-mask-image: none;
  mask-image: none;
  /* A chip right at the row's edge can still push past this box's own
     horizontal bound once it scales up — .hero above still clips at the
     page level, so this can't cause a horizontal scrollbar. */
  overflow-x: visible;
}

.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-scroll var(--marquee-speed) linear infinite;
}

/* Three identical copies. Travel is exactly one copy (33.3333% of the track),
   so the restart is seamless and neither endpoint can leave a gap. */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

.marquee-group { display: flex; align-items: center; flex: 0 0 auto; }
.marquee-item { flex: 0 0 auto; margin-right: var(--marquee-gap); }

/* Tool chips */
.tool-item {
  display: flex; align-items: center; gap: 12px;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tool-item:hover { transform: scale(1.1); }
.tool-icon {
  width: 38px; height: 38px; flex: 0 0 auto; object-fit: contain;
  border-radius: 10px; background: var(--surface-2); padding: 6px;
  filter: grayscale(1); opacity: 0.72;
  transition: filter 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}
.marquee:hover .tool-icon { filter: grayscale(0); opacity: 1; }
.tool-item:hover .tool-icon { box-shadow: var(--shadow-md); }
.tool-icon--empty {
  display: grid; place-items: center; padding: 0;
  font-family: var(--font-display); font-weight: 700; color: var(--accent);
  filter: none; opacity: 1;
}
.tool-name { font-size: 0.95rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }

/* ---------- 7. About ---------- */
.about-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-template-areas: "photo heading" "photo copy";
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.about-heading { grid-area: heading; }
.about-media { grid-area: photo; position: relative; }
.about-copy { grid-area: copy; }
.about-photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.about-photo--empty { display: block; background: linear-gradient(135deg, var(--accent-soft), var(--surface-2)); }
.about-bio { color: var(--text-muted); font-size: 1.02rem; }

.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px; margin-top: 34px;
}
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 16px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.stat:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.stat-icon { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }
.stat-value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--text); }
.stat-label { font-size: 0.86rem; color: var(--text-muted); margin-top: 4px; }

/* ---------- 8. Projects ---------- */
.category-block { margin-bottom: clamp(44px, 6vw, 72px); }
.category-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.15rem; margin-bottom: 22px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.category-count {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
  padding: 2px 9px; border-radius: var(--radius-pill);
}

.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 34px 26px; }
.project-card.is-hidden { display: none; }

/* The cover is the positioning context for the overlay, badges and live link. */
.project-cover {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.project-card:hover .project-cover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.project-cover-link { display: block; position: relative; }
.project-img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.project-card:hover .project-img { transform: scale(1.05); }
.project-img--empty {
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 3rem; color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
}

.project-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 4px; padding: 20px;
  background: linear-gradient(to top, rgba(8, 9, 16, 0.86) 0%, rgba(8, 9, 16, 0.35) 45%, transparent 78%);
  color: #fff; opacity: 0; transition: opacity 0.28s ease;
}
.project-card:hover .project-overlay,
.project-cover-link:focus-visible .project-overlay { opacity: 1; }
.project-cat { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #c9c6ff; }
body.is-rtl .project-cat { letter-spacing: 0; }
.project-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.3; }

/* Featured pill, top-start corner. Decorative — the cover link covers the
   whole card, so this never intercepts the click. */
.project-badge {
  position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, #08090d 78%, transparent);
  color: #fff; font-size: 0.72rem; font-weight: 700;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.project-badge svg { width: 12px; height: 12px; fill: var(--accent-2); stroke: none; }

/* Small "open" affordance, top-end corner — purely decorative, the whole
   cover is already a link. */
.project-open {
  position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, #08090d 55%, transparent);
  color: #fff;
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.project-open svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.project-card:hover .project-open { opacity: 1; transform: scale(1); }

/* "View Live" badge sits on top of the cover image, below the open icon. */
.live-badge {
  position: absolute; top: 52px; inset-inline-end: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  color: var(--text); font-size: 0.78rem; font-weight: 600;
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(-4px);
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.live-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.live-badge:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.live-badge--lg { top: 18px; inset-inline-end: 18px; padding: 10px 18px; font-size: 0.9rem; opacity: 1; transform: none; }

.project-meta { padding: 18px 4px 0; }
.project-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.project-meta-title { font-size: 1.05rem; margin: 0; }
.project-meta-title a:hover { color: var(--accent); }
.project-meta-year { flex: 0 0 auto; font-size: 0.82rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.project-meta-sub { font-size: 0.86rem; color: var(--text-muted); margin: 3px 0 0; }
.project-meta-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.project-tag {
  padding: 4px 11px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.74rem; font-weight: 600;
}
.project-meta-views {
  display: flex; align-items: center; gap: 5px;
  margin: 11px 0 0; font-size: 0.78rem; color: var(--text-faint);
}
.project-meta-views .icon { width: 15px; height: 15px; stroke-width: 1.6; }

/* Filter bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.filter-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px 8px 18px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: all 0.18s ease;
}
body.is-rtl .filter-btn { padding: 8px 18px 8px 16px; }
.filter-btn:hover { color: var(--text); border-color: var(--border-strong); }
.filter-btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.filter-count {
  padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text-faint);
  font-size: 0.72rem; font-weight: 700;
}
.filter-btn.is-active .filter-count { background: rgba(255, 255, 255, 0.22); color: var(--on-accent); }

.page-head { padding-bottom: 32px; }

/* ---------- 9. Project detail ---------- */
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-weight: 600; font-size: 0.9rem; margin-bottom: 24px; }
.back-link:hover { color: var(--accent); }
.back-link .icon { width: 16px; height: 16px; }
body.is-rtl .back-link .icon { transform: scaleX(-1); }

.detail-cover { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--surface-2); }
.detail-cover img { width: 100%; max-height: 620px; object-fit: cover; }

.detail-head { max-width: 780px; margin: 44px auto 0; text-align: center; }
.detail-title { font-size: clamp(1.9rem, 4.4vw, 3rem); }
.detail-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin-top: 26px; }
.detail-meta dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
body.is-rtl .detail-meta dt { letter-spacing: 0; }
.detail-meta dd { font-weight: 600; }

.detail-body { max-width: 720px; margin: 36px auto 0; color: var(--text-muted); font-size: 1.06rem; }

.detail-gallery { margin-top: clamp(48px, 7vw, 80px); }
.gallery-title { font-size: 1.3rem; margin-bottom: 20px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.gallery-item {
  padding: 0; border: 0; cursor: zoom-in; background: var(--surface-2);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.gallery-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* WhatsApp call-to-action closing the project detail page */
.project-cta {
  position: relative; overflow: hidden;
  margin-top: clamp(52px, 7vw, 84px);
  padding: clamp(32px, 5vw, 52px) clamp(22px, 4vw, 48px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.project-cta-glow {
  position: absolute; left: 50%; top: -60%;
  width: min(620px, 110%); height: 260px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(37, 211, 102, 0.22), transparent 72%);
  pointer-events: none;
}
.project-cta-inner { position: relative; z-index: 1; }
.project-cta-title { font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin-bottom: 0.4em; }
.project-cta-text { color: var(--text-muted); max-width: 52ch; margin: 0 auto 24px; }

.project-nav {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin-top: clamp(52px, 7vw, 84px); padding-top: 28px; border-top: 1px solid var(--border);
}
.project-nav-link { display: inline-flex; align-items: center; gap: 8px; max-width: 47%; }
.project-nav-link--next { margin-inline-start: auto; }
.project-nav-text { display: flex; flex-direction: column; min-width: 0; }
.project-nav-link--next .project-nav-text { text-align: end; }
.project-nav-icon {
  width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-faint);
  transition: transform 0.18s ease, color 0.18s ease;
}
.project-nav-link:hover .project-nav-icon { color: var(--accent); }
.project-nav-link--prev:hover .project-nav-icon { transform: translateX(-3px); }
.project-nav-link--next:hover .project-nav-icon { transform: translateX(3px); }
/* RTL: the links swap sides, so the chevrons must point the other way too. */
body.is-rtl .project-nav-icon { transform: scaleX(-1); }
body.is-rtl .project-nav-link--prev:hover .project-nav-icon { transform: translateX(3px) scaleX(-1); }
body.is-rtl .project-nav-link--next:hover .project-nav-icon { transform: translateX(-3px) scaleX(-1); }
.project-nav-label { display: block; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
body.is-rtl .project-nav-label { letter-spacing: 0; }
.project-nav-title { display: block; font-family: var(--font-display); font-weight: 600; margin-top: 4px; }
.project-nav-link:hover .project-nav-title { color: var(--accent); }

.not-found { text-align: center; padding-block: 60px; }
.not-found .section-lead { margin: 0 auto 28px; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 5vmin;
  background: rgba(6, 7, 12, 0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox-close {
  position: absolute; top: 18px; inset-inline-end: 22px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 28px; line-height: 1;
  cursor: pointer; transition: background-color 0.2s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  cursor: pointer; transition: background-color 0.2s ease;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox-nav[hidden] { display: none; }
.lightbox-nav .icon { width: 24px; height: 24px; stroke: currentColor; }
.lightbox-prev { left: 3vmin; }
.lightbox-next { right: 3vmin; }
.lightbox-counter {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  padding: 5px 14px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12); color: #fff;
  font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* It's a <p>, so "body.is-rtl p { direction: rtl }" (higher specificity via
   the tag selector) would otherwise flip "1 / 3" into "3 / 1" — force it
   back with the id, which nothing outranks. */
#lightboxCounter { direction: ltr; }

/* ---------- 10. Clients ---------- */
.clients .section-head { text-align: center; }
.clients .section-lead { margin-inline: auto; }
.client-item { display: flex; align-items: center; }
/* Fixed box, not width:auto — the marquee must keep its width before the
   lazy-loaded logos arrive, otherwise the track collapses and the loop
   restarts with a visible jump on first paint. */
.client-logo {
  width: 150px; height: 44px; object-fit: contain;
  filter: grayscale(1); opacity: 0.6;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.marquee:hover .client-logo { filter: grayscale(0); opacity: 1; }
.client-logo--empty {
  display: grid; place-items: center; width: auto; min-width: 150px; height: 44px; padding: 0 18px;
  font-family: var(--font-display); font-weight: 600; color: var(--text-faint);
  border: 1px solid var(--border); border-radius: var(--radius);
  filter: none; opacity: 1;
}

/* ---------- 11. Contact + forms ---------- */
.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Desktop only: the WhatsApp CTA sits under the form, in the form's own
     column, while the copy column spans the full height beside them both. */
  grid-template-areas: "copy form" "copy cta";
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.contact-copy { grid-area: copy; }
.contact-form { grid-area: form; }
.contact-cta { grid-area: cta; }
.contact-text { color: var(--text-muted); font-size: 1.02rem; max-width: 48ch; }

/* Same aspect ratio and treatment as .about-photo, so the two portraits on
   this page read as one consistent pair rather than two different shapes. */
.contact-photo {
  width: 100%; max-width: 320px; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-lg);
  margin: 22px 0; background: var(--surface-2);
}

/* WhatsApp call-to-action beside the contact form */
/* Always stacked. Left as a wrapping row it broke onto two lines in English
   but stayed on one in Arabic, so the card changed shape with the language. */
.contact-cta {
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  margin: 22px 0;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.11), transparent 70%), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.contact-cta-copy { min-width: 0; }
.contact-cta-title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin: 0 0 2px; }
.contact-cta-sub { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
.contact-cta .btn { flex: 0 0 auto; width: 100%; }

.social-links { display: flex; gap: 10px; }
.social-links a {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--text-muted);
  transition: all 0.18s ease;
}
.social-links a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }

.contact-form {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--shadow-sm);
}
.form-row { margin-bottom: 16px; }
/* Honeypot — off-screen rather than display:none/visibility:hidden, since
   simple spam bots specifically skip fields hidden that way. Real visitors
   never see or reach it (also tabindex="-1" and out of the reading order). */
/* Clipped rather than pushed off-screen: a -9999px offset adds a huge scrollable area in RTL. */
.form-row--trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-row label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 6px; color: var(--text-muted); }
.contact-form input,
.contact-form textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 0.96rem;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form .btn { width: 100%; }
.contact-form .btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

.form-msg {
  margin-top: 14px; padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 500;
}
.form-msg[hidden] { display: none; }
.form-msg.is-success { background: rgba(34, 197, 94, 0.12); color: #16a34a; border: 1px solid rgba(34, 197, 94, 0.3); }
.form-msg.is-error { background: rgba(239, 68, 68, 0.12); color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.3); }
.form-msg.is-loading { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
[data-theme='dark'] .form-msg.is-success { color: #4ade80; }
[data-theme='dark'] .form-msg.is-error { color: #f87171; }

/* ---------- 12. Footer + WhatsApp float ---------- */
.site-footer { border-top: 1px solid var(--border); padding-block: 30px; }
.footer-inner { display: flex; justify-content: center; }
.footer-copy { margin: 0; font-size: 0.88rem; color: var(--text-muted); text-align: center; }

.whatsapp-float {
  position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 150;
  height: 56px; display: inline-flex; align-items: center; gap: 10px;
  padding-inline: 20px 16px;
  background: var(--whatsapp); color: #fff; border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.42);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.22s ease, opacity 0.28s ease;
}
.whatsapp-label { font-size: 0.86rem; font-weight: 700; white-space: nowrap; }
.whatsapp-float svg { width: 30px; height: 30px; flex: 0 0 auto; fill: currentColor; stroke: none; }
.whatsapp-float:hover { background: var(--whatsapp-dark); transform: scale(1.08); }

/* Two identical green WhatsApp buttons on top of each other reads as a smudge,
   so the floating one steps aside while the contact CTA is on screen. */
.whatsapp-float.is-hidden {
  opacity: 0;
  transform: scale(0.6) translateY(10px);
  pointer-events: none;
}

/* ---------- 13. Motion: page transitions, reveal, responsive ---------- */

/* Fade the page in on arrival and out on internal navigation, so moving
   around the site reads as one continuous motion instead of a hard cut.
   Opacity only — a transform here would become the containing block for the
   fixed-position lightbox and WhatsApp button. */
@keyframes page-enter { from { opacity: 0; } to { opacity: 1; } }
main { animation: page-enter 0.4s ease both; }
body.is-leaving { opacity: 0; transition: opacity 0.18s ease; }

/* Hero eases away as you scroll into the page (driven by js/main.js). */
.hero-inner { will-change: opacity, transform; }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Staggered entrance for grids, so cards arrive in sequence. */
.project-grid [data-reveal] { transition-delay: calc(var(--stagger, 0) * 70ms); }
.stat-grid [data-reveal] { transition-delay: calc(var(--stagger, 0) * 90ms); }

@media (max-width: 1100px) {
  .site-nav a { padding: 8px 11px; font-size: 0.9rem; }
  .header-inner { gap: 14px; }
}

/* Desktop only — the copy column (photo + social icons) was ending well
   above the form + WhatsApp CTA column beside it. Sizing the photo and the
   icon row up closes that gap so both columns read as one balanced block
   instead of one side trailing off short. */
@media (min-width: 901px) {
  .contact-photo { max-width: 420px; margin-inline: auto; }
  /* Center the icon row itself (not just its box) so it sits in the middle
     below the photo, matching the photo's own centering. */
  .social-links { justify-content: center; }
  .social-links a { width: 48px; height: 48px; }
  .social-links .icon { width: 22px; height: 22px; }
}

@media (max-width: 900px) {
  .about-inner, .contact-inner { grid-template-columns: 1fr; }
  .about-inner { grid-template-areas: "heading" "photo" "copy"; }
  /* Below 900px the WhatsApp CTA goes back to sitting right after the copy
     column (its original spot, ahead of the separate contact form) — the
     "move it under the form" request was explicitly desktop-only. */
  .contact-inner { grid-template-areas: "copy" "cta" "form"; }
  .about-media { max-width: 420px; margin-inline: auto; }
  .site-nav { display: none; }
  .menu-toggle { display: flex; }
  .header-inner { justify-content: space-between; }
  .header-actions { margin-inline-start: auto; }
  .detail-cover img { max-height: 420px; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

@media (max-width: 640px) {
  :root { --marquee-gap: 2rem; --header-h: 60px; }
  body { font-size: 15.5px; }
  .brand-name { display: none; }
  .about-media { max-width: 220px; }
  .project-grid { grid-template-columns: 1fr; }
  .detail-meta { gap: 12px 24px; }
  .project-nav { gap: 10px; }
  .project-nav-link { max-width: 48%; gap: 6px; }
  .project-nav-icon { width: 16px; height: 16px; }
  .project-nav-label { font-size: 0.68rem; }
  .project-nav-title { font-size: 0.9rem; }
  .whatsapp-float { height: 50px; padding-inline: 16px 14px; gap: 8px; inset-inline-end: 16px; bottom: 16px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
  .whatsapp-label { font-size: 0.78rem; }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-inline: auto; }
  .hero-actions .btn { width: 100%; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-icon { width: 32px; height: 32px; }
  .tool-name { font-size: 0.88rem; }
  .client-logo { width: 120px; height: 38px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .filter-bar { gap: 8px; }
  .filter-btn { padding: 7px 14px; font-size: 0.85rem; }
  /* The floating WhatsApp button must not sit on top of the form's send button. */
  .contact-form { padding-bottom: 26px; }
  .contact-cta { text-align: center; }
}

@media (max-width: 480px) {
  /* Keep the header controls from crowding: the flag alone identifies the
     language, so the EN / ع code drops out. */
  .lang-code { display: none; }
  .lang-current { padding: 0 8px; gap: 5px; }
  .brand-logo { height: 32px; max-width: 130px; }
}

@media (max-width: 420px) {
  .wrap { padding-inline: 18px; }
  .header-actions { gap: 6px; }
  .theme-toggle, .menu-toggle, .lang-current { width: 36px; height: 36px; }
  .lang-current { justify-content: center; padding: 0; }
  .lang-caret { display: none; }
  .lang-menu { min-width: 165px; }
  .stat-grid { grid-template-columns: 1fr; }
  .social-links { flex-wrap: wrap; }
}

/* Touch devices have no hover — keep the project overlay readable. */
@media (hover: none) {
  .project-overlay { opacity: 1; }
  .project-open { opacity: 1; transform: none; }
  .tool-icon, .client-logo { filter: grayscale(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}