/* ==========================================================================
   Beirut Web® — styles.css
   Palette: stone paper, ink black, one blue accent from the logo.
   Type: Space Grotesk (display) · Inter (body) · Tajawal (Arabic)
   ========================================================================== */

:root{
  --stone:#EAEAE7;
  --paper:#F6F6F4;
  --ink:#14161A;
  --soft:#5A5F66;
  --line:rgba(20,22,26,.13);
  --blue:#1B3BE0;
  --white:#fff;
  --r:10px;
  --pad:14px;
  --gutter:clamp(20px,3.4vw,42px);
  --sec-y:clamp(72px,9vw,140px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure,blockquote,ol{margin:0}
ol{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--sec-y) 0}
.ar{font-family:"Tajawal",sans-serif;direction:rtl;unicode-bidi:isolate}
.accent{color:var(--blue)}
.dim{color:var(--soft)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"Space Grotesk",sans-serif;
  font-size:13.5px;font-weight:500;letter-spacing:-.01em;
  padding:11px 20px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:opacity .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
}
.btn--dark{background:var(--ink);color:var(--white)}
.btn--dark:hover{opacity:.85}
.btn--line{border-color:var(--line);color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn--lg{padding:13px 24px;font-size:14px}
.btn--block{width:100%;justify-content:center}

/* ============ MASTHEAD ============ */
.bw-mast{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
  padding:18px 26px 16px;font-family:"Space Grotesk",sans-serif;
}
.bw-brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;letter-spacing:-.025em;white-space:nowrap}
.bw-brand svg{border-radius:7px}
.bw-brand sup{font-size:.62em;font-weight:500}
.bw-menu{display:flex;justify-content:space-evenly;align-items:center;gap:22px}
.bw-menu a{position:relative;font-size:13.5px;font-weight:500;letter-spacing:-.01em;padding:4px 2px}
.bw-menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.bw-menu a:hover::after{transform:scaleX(1)}
.bw-burger{width:34px;height:16px;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:5px}
.bw-burger span{display:block;height:1.5px;background:var(--ink);transition:transform .3s ease}
.bw-burger[aria-expanded="true"] span:first-child{transform:translateY(3.2px) rotate(6deg)}
.bw-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.2px) rotate(-6deg)}

.bw-drawer{display:none;flex-direction:column;padding:2px 26px 16px;border-bottom:1px solid var(--line);font-family:"Space Grotesk",sans-serif}
.bw-drawer--open{display:flex}
.bw-drawer a{font-size:15px;font-weight:500;padding:10px 0;border-bottom:1px solid var(--line)}
.bw-drawer a:last-child{border-bottom:0}

/* ============ HERO ============ */
.bw-stage{padding:0 var(--pad) var(--pad);font-family:"Space Grotesk",sans-serif}
.bw-card{position:relative;height:clamp(540px,86vh,900px);border-radius:var(--r);overflow:hidden;isolation:isolate;background:#0B0F14}
.bw-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:bwSettle 1.9s cubic-bezier(.19,.72,.21,1) forwards}
@keyframes bwSettle{to{transform:scale(1)}}
.bw-card__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,13,19,.44) 0%,rgba(9,13,19,.10) 30%,rgba(9,13,19,.14) 52%,rgba(9,13,19,.62) 82%,rgba(9,13,19,.80) 100%)}

.bw-lockup{position:absolute;top:13%;left:0;right:0;text-align:center;padding:0 20px;color:var(--white)}
.bw-wordmark{font-size:clamp(40px,8.4vw,120px);font-weight:700;letter-spacing:-.04em;line-height:.94;text-shadow:0 1px 40px rgba(0,0,0,.22)}
.bw-wordmark sup{font-size:.3em;font-weight:500;letter-spacing:0;position:relative;top:-.92em;margin-left:.05em}
.bw-wordmark-ar{margin-top:clamp(12px,1.6vw,22px);font-family:"Tajawal",sans-serif;font-weight:300;direction:rtl;font-size:clamp(14px,1.45vw,22px);letter-spacing:.2em;color:rgba(255,255,255,.86)}

.bw-ticks{position:absolute;left:8%;right:8%;top:56%;display:flex;justify-content:space-between;color:rgba(255,255,255,.48);font-size:14px;pointer-events:none;user-select:none}

.bw-rail{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px;padding:0 var(--gutter) clamp(22px,2.6vw,34px)}
.bw-statement{max-width:40ch;font-size:clamp(14.5px,1.15vw,17.5px);line-height:1.42;letter-spacing:-.012em;color:rgba(255,255,255,.66)}
.bw-statement b{color:var(--white);font-weight:600}
.bw-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.bw-tags span{font-size:12px;font-weight:500;color:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.07);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:6.5px 13px;border-radius:999px;white-space:nowrap;transition:background .25s ease,color .25s ease,border-color .25s ease}
.bw-tags span:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.bw-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.bw-meta span{font-size:11.5px;color:rgba(255,255,255,.5);white-space:nowrap}
.bw-scroll{font-size:11.5px;color:rgba(255,255,255,.78);display:inline-flex;align-items:center;gap:7px}
.bw-scroll::after{content:"↓";transition:transform .3s ease}
.bw-scroll:hover::after{transform:translateY(3px)}

/* ============ MARQUEE ============ */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin-top:var(--pad)}
.marquee__track{display:flex;align-items:center;gap:26px;width:max-content;animation:slide 42s linear infinite;font-family:"Space Grotesk",sans-serif}
.marquee__track span{font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--soft);white-space:nowrap}
.marquee__track i{font-style:normal;font-size:9px;color:var(--blue)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ SECTION HEADS ============ */
.sec-head{margin-bottom:clamp(36px,4.4vw,64px)}
.label{display:block;font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);margin-bottom:14px}
.label em{font-style:normal;color:var(--blue);margin-right:6px}
.sec-title{font-family:"Space Grotesk",sans-serif;font-size:clamp(30px,4.6vw,58px);font-weight:700;letter-spacing:-.038em;line-height:1.04}
.sec-title .dim{font-weight:400}
.sec-title sup{font-size:.34em;top:-.9em;position:relative}
.sec-note{margin-top:14px;max-width:52ch;color:var(--soft);font-size:15px}

/* ============ WORK ============ */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.work-card figure{position:relative;overflow:hidden;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);margin:0}
.work-card img{width:100%;aspect-ratio:4/3;object-fit:contain;object-position:center;padding:10px;transition:transform .7s cubic-bezier(.19,.72,.21,1)}
.work-card:hover img{transform:scale(1.045)}
.wc-go{position:absolute;top:12px;right:12px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);font-size:14px;opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease}
.work-card:hover .wc-go{opacity:1;transform:none}
.wc-meta{padding:14px 2px 0}
.wc-no{display:block;font-family:"Space Grotesk",sans-serif;font-size:11.5px;letter-spacing:.05em;color:var(--soft);margin-bottom:5px}
.wc-meta h3{font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:600;letter-spacing:-.02em}

/* ============ BAND ============ */
.band{position:relative;margin:0 var(--pad);border-radius:var(--r);overflow:hidden;min-height:clamp(300px,42vw,460px);display:grid;place-items:center;isolation:isolate}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,13,19,.55),rgba(9,13,19,.72))}
.band__content{position:relative;text-align:center;color:var(--white)}
.band__ar{font-family:"Tajawal",sans-serif;direction:rtl;font-size:clamp(24px,3.6vw,46px);font-weight:700;line-height:1.35}
.band__en{margin-top:14px;font-family:"Space Grotesk",sans-serif;font-size:clamp(14px,1.3vw,18px);color:rgba(255,255,255,.72);letter-spacing:-.015em}

/* ============ STATEMENT + STATS ============ */
.big-statement{font-family:"Space Grotesk",sans-serif;font-size:clamp(22px,3.1vw,40px);font-weight:500;line-height:1.28;letter-spacing:-.03em;max-width:22ch}
.big-statement .label{margin-bottom:20px}
.big-statement .ar{font-weight:500}
/* statement: image + text layout */
.statement__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,72px);align-items:center}
.statement__fig{position:relative;margin:0;border-radius:var(--r);overflow:hidden;isolation:isolate}
.statement__fig img{width:100%;aspect-ratio:5/4;object-fit:cover;transition:transform 1s cubic-bezier(.19,.72,.21,1)}
.statement__fig:hover img{transform:scale(1.04)}
.statement__badge{
  position:absolute;top:14px;right:14px;
  font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.06em;
  background:var(--white);color:var(--ink);
  padding:7px 13px;border-radius:999px;box-shadow:0 8px 24px rgba(6,10,16,.18);
}
.statement__tag{
  position:absolute;left:14px;bottom:14px;
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:500;color:var(--white);
  background:rgba(9,13,19,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:9px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
}
.statement__tag .ar{font-family:"Tajawal",sans-serif;font-size:12.5px;color:rgba(255,255,255,.85)}
.statement__body .big-statement{max-width:none;font-size:clamp(20px,2.3vw,31px)}
.statement__body .stat-grid{margin-top:clamp(30px,3.5vw,48px)}
.statement__body .stat-num{font-size:clamp(38px,4.6vw,66px)}

.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(48px,6vw,84px)}
.stat-block{position:relative;padding-top:22px;border-top:1px solid var(--line)}
.stat-num{display:block;font-family:"Space Grotesk",sans-serif;font-size:clamp(44px,7vw,92px);font-weight:700;letter-spacing:-.05em;line-height:1}
.stat-idx{position:absolute;top:22px;right:0;font-family:"Space Grotesk",sans-serif;font-size:11.5px;color:var(--soft)}
.stat-block p{margin-top:14px;max-width:40ch;color:var(--soft)}

.feature-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px);margin-top:clamp(48px,6vw,80px)}
.fi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.fi-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--white);margin-bottom:16px}
.fi-ico svg{width:18px;height:18px}
.fi b{display:block;font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:600;letter-spacing:-.02em}
.fi em{display:block;font-family:"Tajawal",sans-serif;direction:rtl;font-style:normal;font-size:13.5px;color:var(--soft);margin-top:3px}

/* ============ SERVICES ============ */
.svc-item{display:grid;grid-template-columns:96px minmax(0,1fr) 190px 56px;gap:clamp(18px,2.4vw,36px);align-items:center;padding:clamp(24px,2.8vw,36px) 0;border-top:1px solid var(--line)}
.svc-item:last-child{border-bottom:1px solid var(--line)}
.svc-head{display:flex;flex-direction:column;gap:14px}
.svc-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line)}
.svc-ico svg{width:17px;height:17px}
.svc-no{font-family:"Space Grotesk",sans-serif;font-size:11.5px;color:var(--soft)}
.svc-main h3{font-family:"Space Grotesk",sans-serif;font-size:clamp(20px,2.4vw,30px);font-weight:600;letter-spacing:-.03em}
.svc-main h3 .ar{font-size:.6em;font-weight:500;color:var(--soft);margin-right:8px}
.svc-main p{margin-top:10px;max-width:46ch;color:var(--soft)}
.svc-cats{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.svc-cats span{font-family:"Space Grotesk",sans-serif;font-size:11.5px;padding:5.5px 11px;border:1px solid var(--line);border-radius:999px;color:var(--soft)}
.svc-img {
  width: 280px;
  height: 190px;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f0;
  flex-shrink: 0;
}

.svc-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}
.svc-item:hover .svc-img img{transform:scale(1.05)}
.svc-count{font-family:"Space Grotesk",sans-serif;font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-.03em;text-align:right;color:var(--soft)}

/* ============ ABOUT ============ */
.about__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.about__head .btn{margin-top:26px}
.about__img{border-radius:var(--r);overflow:hidden}
.about__img img{width:100%;aspect-ratio:16/10;object-fit:cover}
.about__list{margin-top:26px}
.about__list li{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line);color:var(--soft);font-size:14.5px}
.about__list li span{font-family:"Space Grotesk",sans-serif;font-size:11.5px;color:var(--blue);padding-top:2px}
/* ABOUT SECTION — DARK STYLE */
.about {
  background-color: #111111;
  color: #ffffff;
}

.about .label,
.about .sec-title,
.about .sec-note,
.about .about__list li {
  color: #ffffff;
}

/* Keep all numbers blue */
.about .label em,
.about .about__list li span {
  color: var(--blue);
}

/* Arabic text white */
.about .ar {
  color: #ffffff;
}

/* List borders on dark background */
.about .about__list li {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Button */
.about .btn--dark {
  background-color: #ffffff;
  color: #111111;
}

.about .btn--dark:hover {
  background-color: var(--blue);
  color: #ffffff;
}

/* ============ TESTIMONIALS ============ */
.rating{margin-top:16px;font-size:14px;color:var(--soft)}
.rating b{font-family:"Space Grotesk",sans-serif;font-size:19px;font-weight:700;color:var(--ink)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.quotes blockquote{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.quotes p{font-size:15px;line-height:1.62}
.quotes blockquote:first-child p{font-family:"Tajawal",sans-serif;direction:rtl}
.quotes footer{display:flex;align-items:center;gap:12px}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.quotes strong{display:block;font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:600;letter-spacing:-.02em}
.quotes em{font-style:normal;font-size:12.5px;color:var(--soft)}

/* ============ MEGASTATS ============ */
.megastats{position:relative;margin:0 var(--pad);border-radius:var(--r);overflow:hidden;padding:clamp(56px,7vw,110px) 0;isolation:isolate}
.megastats__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.megastats__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,13,19,.62),rgba(9,13,19,.78))}
.megastats__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);color:var(--white)}
.ms-num{display:block;font-family:"Space Grotesk",sans-serif;font-size:clamp(34px,4.6vw,64px);font-weight:700;letter-spacing:-.05em;line-height:1}
.megastats__grid p{margin-top:12px;font-size:14px;color:rgba(255,255,255,.68);max-width:22ch}

/* ============ FAQ ============ */
.faq__inner {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.faq__list details {
  border-top: 1px solid var(--line);
}

.faq__list details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.faq__list summary::-webkit-details-marker {
  display: none;
}

.faq__list summary i {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}

.faq__list summary i::before,
.faq__list summary i::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform .3s ease;
}

.faq__list summary i::before {
  top: 6.5px;
  left: 0;
  width: 14px;
  height: 1.5px;
}

.faq__list summary i::after {
  left: 6.5px;
  top: 0;
  width: 1.5px;
  height: 14px;
}

.faq__list details[open] summary i::after {
  transform: scaleY(0);
}

.faq__list details p {
  padding: 0 0 22px;
  max-width: 60ch;
  color: var(--soft);
}

/* ============ CONTACT ============
   Blue section — background is the same --blue as the "conversation"
   accent. White form card, WhatsApp-native submit, bottom marquee. */

.section.contact{
  position:relative;overflow:hidden;
  color:var(--white);
  background:
    radial-gradient(1100px 600px at 85% -10%,rgba(79,163,247,.5) 0%,transparent 55%),
    radial-gradient(900px 700px at -10% 110%,rgba(7,13,60,.75) 0%,transparent 60%),
    var(--blue);
  padding-bottom:0;
}
.contact__inner{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,80px);align-items:center;
  padding-bottom:var(--sec-y);
}
.contact a:focus-visible,.contact button:focus-visible{outline-color:var(--white)}
.contact__card :focus-visible{outline-color:var(--blue)}

/* left: pitch */
.contact__pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:"Space Grotesk",sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.02em;
}
.contact__pill .dot{
  width:8px;height:8px;border-radius:50%;background:#25D366;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:contactPulse 2s infinite;
}
@keyframes contactPulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
  70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

.contact__title{
  margin-top:22px;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(48px,7.5vw,104px);
  font-weight:700;letter-spacing:-.045em;line-height:.95;
}
.contact__title em{font-style:normal;opacity:.55}
/* stretched Arabic echo — width comes from tatweel (ـ) in the markup,
   never letter-spacing (it disconnects Arabic letters) */
.contact__title-ar{
  display:block;font-weight:500;
  font-size:clamp(20px,2.6vw,34px);
  margin-top:.55em;opacity:.92;line-height:1;letter-spacing:0;
}

.contact__lede{margin-top:24px;max-width:34rem;font-size:clamp(15px,1.3vw,17px);line-height:1.65;color:rgba(255,255,255,.82)}
.contact__lede strong{color:var(--white)}

.contact__feats{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;margin-top:34px;max-width:34rem}
.contact__feat h4{display:flex;align-items:center;gap:8px;font-family:"Space Grotesk",sans-serif;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.contact__feat h4 svg{width:17px;height:17px;flex:none}
.contact__feat p{margin-top:7px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.72)}

/* WhatsApp person card */
.contact__person{
  margin-top:36px;
  display:inline-flex;align-items:center;gap:16px;
  padding:12px 20px 12px 12px;
  background:var(--white);color:var(--ink);
  border-radius:16px;box-shadow:0 20px 50px rgba(6,10,16,.28);
  transition:transform .25s ease,box-shadow .25s ease;
}
.contact__person:hover{transform:translateY(-3px);box-shadow:0 26px 60px rgba(6,10,16,.34)}
.contact__person img{width:62px;height:62px;border-radius:12px;object-fit:cover;background:#e8e8e8}
.contact__person-meta small{display:block;font-size:11.5px;color:var(--soft);font-weight:500}
.contact__person-meta strong{display:block;font-family:"Space Grotesk",sans-serif;font-size:16px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.contact__person-cta{
  margin-top:7px;display:inline-flex;align-items:center;gap:8px;
  font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:600;
  background:var(--ink);color:var(--white);
  padding:6px 13px;border-radius:999px;
}
.contact__person-cta .dot{width:7px;height:7px;border-radius:50%;background:#25D366}
.contact__local{margin-top:16px;font-size:12.5px;color:rgba(255,255,255,.65)}

/* right: form card */
.contact__card{
  background:var(--white);color:var(--ink);
  border-radius:18px;border:0;
  padding:clamp(26px,3.5vw,44px);
  box-shadow:0 30px 80px rgba(6,10,16,.3);
}
.contact__card-brand{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  font-family:"Space Grotesk",sans-serif;font-size:14.5px;font-weight:700;letter-spacing:-.01em;
}
.contact__card-brand sup{font-size:.62em;font-weight:500}
.contact__card-brand .ar{font-family:"Tajawal",sans-serif;font-weight:500;font-size:13px;color:var(--soft)}
.contact__card h3{
  margin-top:18px;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(24px,2.6vw,32px);
  font-weight:700;line-height:1.15;letter-spacing:-.03em;
}
.contact__card h3 span{color:#9AA0A6}

/* project-type chips */
.contact__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.contact__chip{
  font-family:"Space Grotesk",sans-serif;font-size:13px;font-weight:500;
  padding:8px 15px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--white);color:var(--ink);
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.contact__chip:hover{border-color:#c7cdd6}
.contact__chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--white)}

.contact__field{margin-top:18px}
.contact__field label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;color:var(--soft);
  margin-bottom:8px;
}
.contact__field label .ar{font-family:"Tajawal",sans-serif;text-transform:none;letter-spacing:0;font-size:12.5px;color:#9AA0A6}
.contact__field input,
.contact__field textarea{
  width:100%;font:inherit;font-size:14.5px;color:var(--ink);
  padding:12px 14px;border-radius:8px;
  border:1.5px solid transparent;background:#F1F1EF;
  transition:border-color .18s ease,background .18s ease;resize:vertical;
}
.contact__field input::placeholder,
.contact__field textarea::placeholder{color:#9AA0A6}
.contact__field input:focus,
.contact__field textarea:focus{outline:none;background:var(--white);border-color:var(--blue)}

.contact__submit{
  margin-top:24px;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:600;letter-spacing:-.01em;
  padding:16px 24px;border:0;border-radius:999px;
  background:var(--ink);color:var(--white);cursor:pointer;
  transition:transform .2s ease,background .2s ease;
}
.contact__submit:hover{background:var(--blue);transform:translateY(-2px)}
.contact__submit svg{width:18px;height:18px}

.contact__note{margin-top:16px;text-align:center;font-size:12.5px;color:var(--soft)}
.contact__note[data-state="sent"]{color:#15803d;font-weight:600}

/* bottom marquee */
.contact__marquee{
  border-top:1px solid rgba(255,255,255,.18);
  padding:17px 0;overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.contact__marquee-track{
  display:inline-block;
  animation:contactMarquee 28s linear infinite;
  font-family:"Space Grotesk",sans-serif;font-size:13px;font-weight:500;letter-spacing:.06em;
  color:rgba(255,255,255,.75);
}
.contact__marquee-track span{margin:0 26px}
.contact__marquee-track .ar{font-family:"Tajawal",sans-serif;letter-spacing:0}
@keyframes contactMarquee{to{transform:translateX(-50%)}}

/* ============ FOOTER ============ */
.footer{border-top:1px solid var(--line);padding-top:clamp(48px,6vw,88px);margin-top:0}
.footer__inner{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,60px);align-items:start}
.footer__big{font-family:"Space Grotesk",sans-serif;font-size:clamp(38px,6.4vw,88px);font-weight:700;letter-spacing:-.05em;line-height:.95}
.footer__big sup{font-size:.3em;top:-.9em;position:relative}
.footer__big-en{display:block}
.footer__big-ar{
  display:block;font-family:"Tajawal",sans-serif;direction:rtl;
  font-weight:500;font-size:.28em;margin-top:.35em;
  letter-spacing:0;line-height:1;
}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.footer__cols h4{font-family:"Space Grotesk",sans-serif;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);margin-bottom:14px;font-weight:500}
.footer__cols a{display:block;padding:5px 0;font-size:14px;color:var(--ink);transition:color .2s ease}
.footer__cols a:hover{color:var(--blue)}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(90px,9vw,120px);font-size:12.5px;color:var(--soft)}

/* ============ WHATSAPP CARD ============ */
.wa-card{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:flex;align-items:center;gap:12px;
  background:var(--white);border-radius:14px;padding:10px 16px 10px 10px;
  box-shadow:0 14px 40px rgba(6,10,16,.20);
  transition:transform .25s ease,box-shadow .25s ease;
}
.wa-card:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(6,10,16,.26)}
.wa-av{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--ink);color:var(--white);font-family:"Space Grotesk",sans-serif;font-size:13px;font-weight:600;letter-spacing:-.02em;flex:none}
.wa-txt em{display:block;font-style:normal;font-size:11.5px;color:var(--soft)}
.wa-txt b{display:block;font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:600;letter-spacing:-.02em}
.wa-dot{width:8px;height:8px;border-radius:50%;background:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.18);flex:none}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.19,.72,.21,1),transform .8s cubic-bezier(.19,.72,.21,1)}
.reveal.is-in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .bw-menu{gap:16px;justify-content:flex-end}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .feature-icons{grid-template-columns:repeat(2,1fr)}
  .megastats__grid{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr}
  .svc-item{grid-template-columns:72px minmax(0,1fr) 150px}
  .svc-count{display:none}
}

@media (max-width:860px){
  .about__inner,.faq__inner,.contact__inner,.footer__inner{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr}
  .svc-item{grid-template-columns:1fr;gap:18px}
  .svc-head{flex-direction:row;align-items:center;gap:12px}
  .svc-img{order:-1}
}

@media (max-width:760px){
  .bw-menu{display:none}
  .bw-card{height:clamp(500px,88vh,760px)}
  .bw-lockup{top:16%}
  .bw-ticks{display:none}
  .bw-rail{grid-template-columns:1fr;align-items:start;gap:14px;padding:0 20px 22px}
  .bw-statement{max-width:none}
  .bw-meta{align-items:flex-start;text-align:left}
  .work-grid{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr 1fr}
  .wa-card{right:12px;bottom:12px;padding:9px 14px 9px 9px}
  .wa-av{width:38px;height:38px}
  .contact__feats{grid-template-columns:1fr}
  .contact__person{width:100%;max-width:420px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bw-card__img{animation:none;transform:none}
  .marquee__track{animation:none}
  .contact__pill .dot,.contact__marquee-track{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms !important}
}
.wa-av {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}