/* ═══════════════════════════════════════════════════════════════
   MQ DRONES — stylesheet
   Palette and spacing all live in :root below. Change a value there
   and it updates everywhere on the site.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── Colours ── */
  --bg:          #0A0A0B;
  --bg-2:        #0E0E10;
  --surface:     #141417;
  --surface-2:   #1A1A1E;
  --text:        #F4F4F5;
  --muted:       #8C8E94;
  --muted-2:     #63656B;

  /* Hairlines — the logo is monoline, so the site is too */
  --line:        rgba(255,255,255,.09);
  --line-mid:    rgba(255,255,255,.16);
  --line-strong: rgba(255,255,255,.30);

  /* ── Type ── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-ar:      'Tajawal', system-ui, sans-serif;

  /* ── Layout ── */
  --container: 1240px;
  --gutter: 24px;
  --radius: 4px;
  --nav-h: 76px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Arabic mode swaps the whole type stack */
html[lang="ar"]{
  --font-display: 'Tajawal', system-ui, sans-serif;
  --font-body:    'Tajawal', system-ui, sans-serif;
}

/* ═══════════════ RESET ═══════════════ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3{ font-family:var(--font-display); font-weight:500; line-height:1.08; letter-spacing:-.02em; margin:0; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3{ letter-spacing:0; line-height:1.25; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

/* Hidden until focused. Uses clip rather than an off-screen offset —
   a -9999px offset creates a huge horizontal scroll area in RTL. */
.skip-link{
  position:absolute; top:0; inset-inline-start:0; z-index:200;
  background:var(--text); color:var(--bg); padding:12px 20px;
  width:1px; height:1px; overflow:hidden; white-space:nowrap;
  clip-path:inset(50%);
}
.skip-link:focus{ width:auto; height:auto; clip-path:none; }

:focus-visible{ outline:2px solid var(--line-strong); outline-offset:3px; }

/* ═══════════════ LOGO INTRO ═══════════════
   Sequence: monogram fades in → baseline extends outward → panel lifts away.
   Total ~1.5s. Skipped entirely on repeat visits and for reduced motion. */
.intro{
  position:fixed; inset:0; z-index:500; overflow:hidden;
  background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .55s var(--ease), visibility .55s;
}
/* ONE clip sweeping across the full viewport width, so the line's speed is
   identical the whole way — through the artwork and out to the edges. Two
   separate animations handing over mid-flight is what caused the stall.
   --clip-l / --clip-r are set by JS to the monogram's exact position, since
   they depend on viewport width. Timing is linear: no ease, no slowdown. */
.intro__band{
  position:relative; width:100vw;
  display:flex; justify-content:center;
  opacity:0;
  --clip-l:25%; --clip-r:25%;
  clip-path:inset(0 var(--clip-r) 0 var(--clip-l));
  animation:
    introFade  .40s var(--ease) .10s forwards,
    introSweep 1.15s linear     .40s forwards;
}
@keyframes introFade  { to { opacity:1; } }
@keyframes introSweep { to { clip-path:inset(0 0 0 0); } }

.intro__lockup{ position:relative; width:clamp(260px, 46vw, 640px); flex:none; }
.intro__logo{ width:100%; height:auto; display:block; }

/* Continue the baseline past the artwork to both screen edges.
   The extension isn't a drawn line — it's an 8px vertical slice of the logo
   itself (logo-edge.png), full height, stretched horizontally. Because it
   scales vertically exactly as the artwork does, its thickness, position and
   soft edges match the real stroke automatically at any size. A hand-set
   height in % can't do that: it lands at ~87% of the stroke's weight and
   reads visibly thinner. */
.intro__rule{
  position:absolute; top:0; height:100%; width:100vw;
  /* auto 100% + repeat-x keeps the slice's aspect ratio, so it goes through the
     same uniform scale the <img> does; stretching it (100% 100%) resamples the
     vertical axis differently and comes out slightly light. */
  background:url(../assets/logo-edge.png) 0 0 / auto 100% repeat-x;
}
/* Overlap 0.4% back into the artwork rather than butting exactly against it —
   at fractional scale factors an exact join can leave a hairline gap. The
   artwork is a plain horizontal rule here, so the overlap is invisible. */
.intro__rule--l{ right:99.6%; }
.intro__rule--r{ left:99.6%;  }

/* dismissed */
.intro.is-done{ opacity:0; visibility:hidden; }

/* repeat visit or reduced motion — never rendered at all */
html.no-intro .intro{ display:none; }
/* while the intro is up, keep the page from scrolling underneath it */
body.intro-lock{ overflow:hidden; }

/* ═══════════════ REVEAL ANIMATION ═══════════════ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ═══════════════ SHARED BITS ═══════════════ */
.eyebrow{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:20px; font-weight:500;
}
html[lang="ar"] .eyebrow{ letter-spacing:.08em; font-size:12px; }

.section{ padding:clamp(72px,10vw,140px) 0; position:relative; }
.section--alt{ background:var(--bg-2); border-block:1px solid var(--line); }
.section__head{ max-width:640px; margin-bottom:clamp(40px,5vw,64px); }
.section__title{ font-size:clamp(30px,4.6vw,54px); margin-bottom:18px; }
.section__lead{ color:var(--muted); font-size:16px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:var(--radius);
  font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid transparent; transition:all .3s var(--ease); white-space:nowrap;
}
html[lang="ar"] .btn{ letter-spacing:0; text-transform:none; font-size:15px; }
.btn--primary{ background:var(--text); color:var(--bg); }
.btn--primary:hover{ background:#fff; transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line-mid); color:var(--text); }
.btn--ghost:hover{ border-color:var(--line-strong); background:rgba(255,255,255,.04); }
.btn--full{ width:100%; }

/* ═══════════════ NAV ═══════════════ */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(10,10,11,.82);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand__img{ height:40px; width:auto; transition:opacity .25s; }
.brand:hover .brand__img{ opacity:.75; }

.nav__links{ display:flex; align-items:center; gap:34px; margin-inline-start:auto; }
.nav__links a{
  font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); transition:color .25s; position:relative; padding-block:6px;
}
html[lang="ar"] .nav__links a{ letter-spacing:0; text-transform:none; font-size:15px; }
.nav__links a::after{
  content:''; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:var(--text); transform:scaleX(0); transform-origin:inline-start;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__cta{
  border:1px solid var(--line-mid); padding:10px 20px !important;
  border-radius:var(--radius); color:var(--text) !important;
}
.nav__cta::after{ display:none !important; }
.nav__cta:hover{ border-color:var(--line-strong); background:rgba(255,255,255,.05); }

.nav__tools{ display:flex; align-items:center; gap:14px; }
.lang-toggle{
  display:flex; align-items:stretch;
  /* padding:0 matters — buttons carry a UA default (1px 6px) that the reset
     above doesn't clear, which stops the active half filling the box */
  padding:0;
  border:1px solid var(--line-mid); border-radius:var(--radius);
  overflow:hidden; font-size:11px; letter-spacing:.06em;
}
.lang-toggle__opt{
  display:grid; place-items:center;
  min-width:50px; padding:7px 8px;    /* equal halves despite "EN" vs "عربي" */
  color:var(--muted); transition:background .25s, color .25s; line-height:1;
}
/* Arabic joins its letters, so the tracking used on the Latin label has to come
   off, and it needs the Arabic face explicitly — Inter has no Arabic glyphs. */
.lang-toggle__opt[data-lang="ar"]{
  font-family:var(--font-ar); font-size:13px; letter-spacing:0;
}
.lang-toggle__opt:not(.is-active):hover{ color:var(--text); }
.lang-toggle__opt.is-active{ background:var(--text); color:var(--bg); }

.burger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.burger span{ width:22px; height:1.5px; background:var(--text); transition:transform .3s var(--ease), opacity .2s; }
.burger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ═══════════════ FIRST SCREEN (hero + stats) ═══════════════
   On desktop these share one 100svh block: the hero takes whatever is left
   after the stats row, so the full stats strip is on the first screen and
   nothing gets cut in half. On phones the stats stack into four rows, which
   is far too tall to share the fold, so they go back to sitting below it. */
@media (min-width:821px){
  .firstscreen{ min-height:100svh; display:flex; flex-direction:column; }
  .firstscreen .hero{ flex:1 1 auto; min-height:0; }
}

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:var(--nav-h); overflow:hidden;
}
/* Fallback look while no hero image is in place — still reads as designed */
.hero__media{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(90% 70% at 50% 0%, #17171B 0%, var(--bg) 65%),
    var(--bg);
}
.hero__img,.hero__video{ width:100%; height:100%; object-fit:cover; opacity:.70; }
/* Two scrims doing different jobs: the horizontal one darkens the side the
   headline sits on so white text stays readable over sky, while leaving the
   towers on the other side visible; the vertical one seats the photo into the
   nav at the top and into the stats bar at the bottom. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right,
      rgba(10,10,11,.90) 0%, rgba(10,10,11,.83) 30%,
      rgba(10,10,11,.50) 58%, rgba(10,10,11,.16) 80%, rgba(10,10,11,.28) 100%),
    linear-gradient(to bottom,
      rgba(10,10,11,.74) 0%, rgba(10,10,11,.34) 28%,
      rgba(10,10,11,.46) 70%, var(--bg) 100%);
}
/* in Arabic the headline moves to the right, so the scrim flips with it */
html[dir="rtl"] .hero__scrim{ transform:scaleX(-1); }

/* On a phone the copy spans the full width, so a side gradient buys nothing —
   it just leaves the small eyebrow text sitting over bright rooftops. A
   slightly stronger vertical-only scrim is what keeps that readable. */
@media (max-width:820px){
  .hero__scrim{
    background:linear-gradient(to bottom,
      rgba(10,10,11,.84) 0%, rgba(10,10,11,.60) 30%,
      rgba(10,10,11,.66) 70%, var(--bg) 100%);
  }
  html[dir="rtl"] .hero__scrim{ transform:none; }
}
/* faint technical grid — echoes the logo's drafted feel */
/* the drafting grid was carrying the empty hero; over a photo it only adds
   noise, so it's dialled right back */
.hero__grid{
  position:absolute; inset:0; opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 100%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 100%);
}
.hero__content{ position:relative; z-index:2; max-width:900px; }
.hero__title{ font-size:clamp(38px,6vw,74px); margin-bottom:26px; font-weight:500; }
.hero__sub{ font-size:clamp(15px,1.7vw,19px); color:#E4E6EA; max-width:560px; margin-bottom:38px; line-height:1.7; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* physical left/transform so it centres identically in LTR and RTL */
.hero__scroll{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  z-index:2; width:1px; height:56px; overflow:hidden;
}
.hero__scroll-line{ display:block; width:1px; height:100%; background:var(--line-strong); animation:scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }

/* over a photo the muted greys used elsewhere don't hold up — these two are
   lifted so they stay legible against the brightest part of the skyline */
.hero .eyebrow{ color:#D6D8DC; }

/* ═══════════════ STATS ═══════════════ */
.stats{ border-block:1px solid var(--line); background:var(--bg-2); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{
  padding:40px 24px; text-align:center;
  border-inline-end:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center;
}
.stat:last-child{ border-inline-end:0; }
.stat__value{ display:flex; align-items:flex-start; justify-content:center; gap:2px; }
.stat__num{ font-family:var(--font-display); font-size:clamp(30px,4vw,46px); font-weight:500; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat__plus{ font-family:var(--font-display); font-size:20px; line-height:1; color:var(--muted-2); }
.stat__label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-top:14px; }
html[lang="ar"] .stat__label{ letter-spacing:0; text-transform:none; font-size:13px; }

/* ═══════════════ WORK / PORTFOLIO ═══════════════ */
.filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:38px; }
.filter{
  padding:9px 20px; border:1px solid var(--line); border-radius:100px;
  font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  transition:all .28s var(--ease);
}
html[lang="ar"] .filter{ letter-spacing:0; text-transform:none; font-size:14px; }
.filter:hover{ border-color:var(--line-mid); color:var(--text); }
.filter.is-active{ background:var(--text); border-color:var(--text); color:var(--bg); }

.work-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:20px; }

.work{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--surface); cursor:pointer;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
  opacity:0; animation:cardIn .55s var(--ease) forwards;
}
@keyframes cardIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.work:hover{ border-color:var(--line-mid); transform:translateY(-4px); }
.work.is-hidden{ display:none; }

.work__thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--surface-2); }
.work__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), opacity .4s; opacity:.88; }
.work:hover .work__thumb img{ transform:scale(1.05); opacity:1; }
.work__play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(to top, rgba(10,10,11,.6), rgba(10,10,11,.05));
}
.work__play span{
  width:56px; height:56px; border:1px solid rgba(255,255,255,.55); border-radius:50%;
  display:grid; place-items:center; backdrop-filter:blur(6px);
  background:rgba(10,10,11,.28); transition:all .35s var(--ease);
}
.work__play svg{ width:15px; height:15px; margin-inline-start:3px; fill:#fff; }
.work:hover .work__play span{ background:var(--text); border-color:var(--text); transform:scale(1.06); }
.work:hover .work__play svg{ fill:var(--bg); }
.work__dur{
  position:absolute; bottom:12px; inset-inline-end:12px;
  background:rgba(10,10,11,.8); border:1px solid var(--line);
  padding:3px 9px; border-radius:3px; font-size:11px; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.work__body{ padding:20px 22px 24px; }
.work__cat{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); }
html[lang="ar"] .work__cat{ letter-spacing:.05em; text-transform:none; font-size:12px; }
.work__title{ font-size:19px; margin:8px 0 6px; }
.work__meta{ font-size:13px; color:var(--muted); }

.work-empty{ color:var(--muted); padding:40px 0; grid-column:1/-1; text-align:center; }

/* Placeholder card, shown until you paste a video ID into js/content.js */
.work--slot{ cursor:default; border-style:dashed; }
.work--slot:hover{ transform:none; border-color:var(--line); }
.work__ph{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 12px, transparent 12px 24px),
    var(--surface-2);
}
.work__ph span{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2);
  border:1px solid var(--line); padding:8px 16px; border-radius:100px;
}
html[lang="ar"] .work__ph span{ letter-spacing:.05em; text-transform:none; font-size:13px; }

/* ═══════════════ SERVICE CARDS ═══════════════ */
/* subgrid lines the icon / title / intro / list rows up across all four cards,
   so the bullet lists start at the same height even when the copy differs.
   Browsers without subgrid just fall back to normal stacking. */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  grid-template-rows:auto auto auto auto;
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
@supports (grid-template-rows: subgrid){
  .cards{ grid-auto-rows:min-content; }
  .card{ display:grid; grid-row:span 4; grid-template-rows:subgrid; align-content:start; }
}
.card{ background:var(--bg-2); padding:38px 32px 34px; transition:background .35s var(--ease); }
.card:hover{ background:var(--surface); }
.card__icon{ width:38px; height:38px; color:var(--muted); margin-bottom:22px; }
.card__icon svg{ width:100%; height:100%; }
.card h3{ font-size:20px; margin-bottom:12px; }
.card p{ color:var(--muted); font-size:14.5px; margin-bottom:20px; }
.card__list li{
  font-size:13.5px; color:var(--muted-2); padding-block:7px;
  border-top:1px solid var(--line); padding-inline-start:16px; position:relative;
}
.card__list li::before{
  content:''; position:absolute; inset-inline-start:0; top:50%;
  width:6px; height:1px; background:var(--line-strong);
}

/* ═══════════════ ABOUT ═══════════════ */
.about{
  display:grid; grid-template-columns:1.2fr .8fr;
  gap:clamp(36px,6vw,80px);
  align-items:center;      /* pillars sit level with the middle of the copy */
}
.about__text{ max-width:640px; }
.about__lead{ color:var(--text) !important; font-size:clamp(17px,1.9vw,21px); line-height:1.55; }
.about__text p{ color:var(--muted); margin-bottom:20px; }

/* three numbered pillars, set as their own column beside the copy */
.pillars{ border-top:1px solid var(--line); }
.pillars .pillar:last-child{ border-bottom:0; }
.pillar{
  display:grid; grid-template-columns:auto 1fr; column-gap:18px; align-items:baseline;
  padding-block:20px; border-bottom:1px solid var(--line);
}
.pillar__n{
  font-family:var(--font-display); font-size:11px; letter-spacing:.14em;
  color:var(--muted-2); grid-row:span 2;
}
.pillar strong{ font-size:15px; font-weight:500; }
.pillar__d{ font-size:13.5px; color:var(--muted-2); grid-column:2; margin-top:3px; }

@media (max-width:900px){
  .about{ grid-template-columns:1fr; gap:8px; }
  .about__text{ max-width:none; }
  .pillars{ margin-top:20px; }
}

/* ═══════════════ FLEET ═══════════════ */
.fleet-head{ margin-top:clamp(56px,7vw,90px); margin-bottom:clamp(28px,3vw,40px); }
.fleet-head .section__title{ font-size:clamp(24px,3vw,36px); margin-bottom:0; }

.fleet{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1px;
        background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.fleet__card{ background:var(--bg-2); padding:26px 26px 30px; transition:background .35s var(--ease); }
.fleet__card:hover{ background:var(--surface); }

.fleet__art{
  display:grid; place-items:center;
  aspect-ratio:16/10; margin-bottom:22px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg);
  color:var(--text);            /* the SVGs draw with currentColor */
}
.fleet__art svg{ width:82%; height:auto; overflow:visible; }
/* props and duct rings sit back so the airframe reads first */
.fleet__art .prop{ opacity:.32; }
.fleet__art .duct{ opacity:.55; }
.fleet__card:hover .fleet__art .prop{ opacity:.5; }

.fleet__body h4{ font-family:var(--font-display); font-size:18px; font-weight:500; letter-spacing:-.01em; margin:0 0 4px; }
html[lang="ar"] .fleet__body h4{ letter-spacing:0; }
.fleet__role{ display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; }
html[lang="ar"] .fleet__role{ letter-spacing:0; text-transform:none; font-size:13px; }

.fleet__specs li{
  font-size:13.5px; color:var(--muted); padding-block:8px;
  border-top:1px solid var(--line); padding-inline-start:16px; position:relative;
}
.fleet__specs li::before{
  content:''; position:absolute; inset-inline-start:0; top:calc(50% - .5px);
  width:6px; height:1px; background:var(--line-strong);
}

/* ═══════════════ PROCESS ═══════════════ */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.step{ background:var(--bg-2); padding:34px 28px 32px; }
.step__n{ font-family:var(--font-display); font-size:12px; letter-spacing:.14em; color:var(--muted-2); display:block; margin-bottom:20px; }
.step h3{ font-size:18px; margin-bottom:10px; }
.step p{ font-size:14px; color:var(--muted); }

/* ═══════════════ QUOTES ═══════════════ */
/* ═══════════════ CLIENT LOGO WALL ═══════════════
   Logos arrive in every colour and on every background, so they're all
   rendered as white silhouettes and held back to ~58% — that makes a mixed
   set read as one row instead of a scrapbook. Hover brings one forward. */
.logos{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.logos__item{
  background:var(--bg-2); display:grid; place-items:center;
  padding:26px 22px; min-height:112px;
  transition:background .35s var(--ease);
}
/* Each logo carries its own --h, set from an optical-weight measurement of the
   artwork (ink area blended with height) rather than one flat max-height —
   a bold compact mark and a thin wide wordmark need different heights to
   read as equals. max-width keeps the very wide ones inside their cell. */
.logos__item img{
  height:var(--h,40px); width:auto; max-width:100%;
  opacity:.58; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.logos__item:hover{ background:var(--surface); }
.logos__item:hover img{ opacity:1; transform:scale(1.04); }

@media (max-width:1000px){ .logos{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){
  .logos{ grid-template-columns:repeat(2,1fr); }
  .logos__item{ padding:20px 14px; min-height:92px; }
  /* scale the per-logo heights down together, keeping their relative balance */
  .logos__item img{ height:calc(var(--h,40px) * .78); }
}

/* ═══════════════ CONTACT ═══════════════ */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,72px); align-items:start; }
.contact__intro > p{ color:var(--muted); max-width:44ch; }
.contact__direct{ margin-top:36px; border-top:1px solid var(--line); }
.contact__direct li{ display:flex; justify-content:space-between; gap:16px; align-items:center; padding-block:15px; border-bottom:1px solid var(--line); font-size:14.5px; }
.contact__direct li > span:first-child{ color:var(--muted-2); font-size:12px; letter-spacing:.13em; text-transform:uppercase; }
html[lang="ar"] .contact__direct li > span:first-child{ letter-spacing:0; text-transform:none; font-size:14px; }
.contact__direct a{ border-bottom:1px solid var(--line-mid); padding-bottom:1px; transition:border-color .25s; }
.contact__direct a:hover{ border-color:var(--text); }
.contact__direct b{ font-weight:400; }

.form{ border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,34px); background:var(--bg); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:block; margin-bottom:16px; }
.field > span{ display:block; font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted-2); margin-bottom:8px; }
html[lang="ar"] .field > span{ letter-spacing:0; text-transform:none; font-size:14px; }
.field input,.field select,.field textarea{
  width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:13px 15px; color:var(--text);
  font-family:inherit; font-size:15px; transition:border-color .25s, background .25s;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--line-strong); background:var(--surface-2); }
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-2); }
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:var(--surface); color:var(--text); }
.form .btn{ margin-top:8px; }
.form__note{ font-size:13.5px; margin-top:14px; min-height:20px; color:var(--muted); text-align:center; }
.form__note.is-ok{ color:#8FE3B0; }
.form__note.is-err{ color:#E88B8B; }
/* Honeypot — hidden via clip, not an off-screen offset (see .skip-link) */
.hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); opacity:0; }

/* ═══════════════ FOOTER ═══════════════ */
.footer{ border-top:1px solid var(--line); padding:52px 0 40px; background:var(--bg-2); }
.footer__inner{ display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:start; }
.footer__brand img{ height:34px; width:auto; margin-bottom:16px; }
.footer__brand p{ color:var(--muted-2); font-size:13.5px; max-width:34ch; }
.footer__links{ display:flex; gap:26px; flex-wrap:wrap; justify-content:flex-end; }
.footer__links a{ font-size:13px; color:var(--muted); transition:color .25s; }
.footer__links a:hover{ color:var(--text); }
.footer__legal{
  grid-column:1/-1; border-top:1px solid var(--line); margin-top:20px; padding-top:22px;
  display:flex; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--muted-2);
}

/* ═══════════════ LIGHTBOX ═══════════════ */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(6,6,7,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.lightbox.is-open{ display:flex; animation:fadeIn .3s var(--ease); }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.lightbox__frame{ width:min(1100px,100%); aspect-ratio:16/9; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#000; }
.lightbox__frame iframe{ width:100%; height:100%; border:0; display:block; }
.lightbox__close{
  position:absolute; top:22px; inset-inline-end:26px; font-size:34px; line-height:1;
  color:var(--muted); transition:color .25s; padding:6px;
}
.lightbox__close:hover{ color:var(--text); }
body.no-scroll{ overflow:hidden; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1000px){
  .about{ grid-template-columns:1fr; }
  .about__kit{ position:static; }
  .contact{ grid-template-columns:1fr; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-inline-end:0; }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}

@media (max-width:820px){
  :root{ --nav-h:66px; --gutter:20px; }
  .burger{ display:flex; }

  .nav__links{
    position:fixed; inset-block:var(--nav-h) auto; inset-inline:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(10,10,11,.97); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    padding:8px 20px 24px; margin:0;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
    max-height:calc(100svh - var(--nav-h)); overflow-y:auto;
  }
  .nav__links.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav__links a{ padding:16px 4px; border-bottom:1px solid var(--line); font-size:15px; }
  .nav__links a::after{ display:none; }
  .nav__cta{ margin-top:18px; text-align:center; border-bottom:0 !important; }

  .brand__img{ height:26px; }
  .hero__title{ font-size:clamp(34px,9vw,52px); }
  .hero__actions .btn{ flex:1; min-width:150px; }
  .work-grid{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; gap:0; }
  .footer__inner{ grid-template-columns:1fr; }
  .footer__links{ justify-content:flex-start; }
  .lightbox__close{ top:14px; inset-inline-end:16px; }
}

@media (max-width:480px){
  .stats__grid{ grid-template-columns:1fr; }
  .stat{ border-inline-end:0 !important; border-bottom:1px solid var(--line); }
  .stat:last-child{ border-bottom:0; }
}