/* ============================================================
   FONTS — self-hosted, per the Brand Guidelines (ch. 04)
   Bricolage Grotesque (Latin) · Rubik (Arabic)
   Variable files: one download covers every weight.
   ============================================================ */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("../assets/fonts/BricolageGrotesque.woff2") format("woff2-variations"),
      url("../assets/fonts/BricolageGrotesque.woff2") format("woff2");
  font-weight:200 800;
  font-stretch:75% 100%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Rubik";
  src:url("../assets/fonts/Rubik.woff2") format("woff2-variations"),
      url("../assets/fonts/Rubik.woff2") format("woff2");
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}
/* let Bricolage pick the right optical size for each text size */
html{font-optical-sizing:auto}

/* ============================================================
   TRIGGER — Site styles
   Built to the 2026 Brand Guidelines (The Missing Piece).
   Forest 50% · Cream 30% · Terracotta 15% · Amber 5%
   ============================================================ */

:root{
  /* --- brand book palette --- */
  --forest:#1F3D2E;
  --forest-deep:#18301F;
  --forest-soft:#2A4C3A;
  --forest-line:#31563F;
  /* Forest mixed 40% toward Cream — the muted middle tone of the hero
     slogan. Derived from the palette, not a new colour. The reference
     art sits at 36% (#6E7F71 = 2.8:1); 40% is the nearest step that
     clears the 3:1 contrast floor for large text, so the line stays
     readable without drifting off-brand.                            */
  --forest-tint:#778678;
  --cream:#FAF3E7;
  --cream-dim:#CFC9BB;
  --terracotta:#E1502E;
  --terracotta-hi:#EC6244;
  --amber:#F0A03C;

  --line:rgba(250,243,231,.13);
  --line-strong:rgba(250,243,231,.26);

  /* --- type --- */
  --font-display:"Bricolage Grotesque","Helvetica Neue",sans-serif;
  --font-body:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:"IBM Plex Mono","Courier New",monospace;

  /* --- soft geometry (no sharp corners) --- */
  --r-xs:8px;
  --r-sm:14px;
  --r:20px;
  --r-lg:28px;
  --r-xl:36px;
  --r-pill:999px;

  --wrap:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
/* no global smooth scrolling: it turns every browser-initiated scroll
   adjustment into a visible slide. Smooth is opted into per action. */
html{scroll-behavior:auto;overflow-anchor:none}
body{
  font-family:var(--font-body);
  background:var(--forest);
  color:var(--cream);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--terracotta);color:#fff}

/* ---------- utility ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.eyebrow{
  font-family:var(--font-mono);font-size:13.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--terracotta);
}
.eyebrow.amber{color:var(--amber)}
.dot{color:var(--terracotta)}
.mono{font-family:var(--font-mono)}
.hide{display:none!important}

/* type scale from the brand book */
.display{font-family:var(--font-display);font-weight:800;line-height:1.1;letter-spacing:-.02em}

.section{padding:clamp(68px,9vw,124px) 0;position:relative}
.section-head{margin-bottom:56px}
.section-head h2{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(34px,5vw,64px);line-height:1.08;letter-spacing:-.02em;margin-top:16px;
}

/* ---------- Pattern B — the Ghost G ---------- */
.ghost-gg{
  position:absolute;top:-4%;right:-2%;font-family:var(--font-display);
  font-weight:800;font-size:clamp(260px,38vw,580px);line-height:.8;
  color:rgba(250,243,231,.035);pointer-events:none;user-select:none;
  z-index:0;letter-spacing:-.05em;
}
/* Pattern A — the Dot */
.dot-field{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(var(--terracotta) 1.6px, transparent 1.7px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 60%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 40%,#000 60%,transparent);
}

/* ---------- buttons (pill, per new identity) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-size:15px;font-weight:600;
  padding:15px 28px;border-radius:var(--r-pill);
  border:1.5px solid var(--line-strong);color:var(--cream);
  transition:.35s var(--ease);background:transparent;position:relative;
}
.btn:hover{border-color:var(--cream);transform:translateY(-2px)}
.btn.solid{background:var(--terracotta);border-color:var(--terracotta);color:#fff}
.btn.solid:hover{background:var(--terracotta-hi);border-color:var(--terracotta-hi);
  box-shadow:0 10px 30px rgba(225,80,46,.32)}
.btn .arw{transition:.35s var(--ease);display:inline-block}
.btn:hover .arw{transform:translateX(4px)}
[dir="rtl"] .btn:hover .arw{transform:translateX(-4px)}

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--terracotta),var(--amber));
  border-radius:0 var(--r-pill) var(--r-pill) 0;transition:width .1s linear;
}
[dir="rtl"] .scroll-progress{left:auto;right:0;border-radius:var(--r-pill) 0 0 var(--r-pill)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 0;transition:.4s var(--ease);background:transparent;
}
.nav.scrolled{
  background:rgba(24,48,31,.82);backdrop-filter:blur(16px);
  padding:13px 0;border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:flex;align-items:center}
.nav-logo svg{height:24px;width:auto;transition:.35s var(--ease)}
.nav-logo:hover svg{transform:scale(1.04)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{
  font-size:15px;font-weight:500;color:var(--cream-dim);transition:.28s;
  position:relative;padding:4px 0;
}
.nav-links a:hover,.nav-links a.active{color:var(--cream)}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;
  background:var(--terracotta);border-radius:var(--r-pill);transition:width .3s var(--ease);
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{margin-left:6px;padding:12px 22px;font-size:14px;white-space:nowrap;flex:none}
.nav-links a{flex:none}
.lang-btn{
  /* one face for both states — "English" and "العربية" must match */
  flex:none;white-space:nowrap;
  font-family:"Bricolage Grotesque","Rubik",sans-serif;
  font-size:14px;font-weight:600;letter-spacing:0;
  background:transparent;border:1.5px solid var(--line-strong);color:var(--cream);
  padding:9px 15px;border-radius:var(--r-pill);transition:.3s var(--ease);line-height:1;
}
.lang-btn:hover{border-color:var(--amber);color:var(--amber)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:6px}
.burger span{width:24px;height:2px;background:var(--cream);border-radius:2px;transition:.3s}

/* ============================================================
   PAGE / REVEAL
   ============================================================ */
.page{animation:fade .55s var(--ease-out)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(30px);transition:.85s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   HERO — the slogan carries the page (no video)
   Three tones straight from the palette:
     Cream #FAF3E7 · Forest tinted 36% toward cream · Terracotta #E1502E
   ============================================================ */
.hero{
  min-height:100svh;display:flex;align-items:center;position:relative;
  padding-top:150px;padding-bottom:120px;overflow:clip;
}
.hero-inner{position:relative;z-index:3;width:100%}

.hero-slogan{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(40px,7.4vw,104px);line-height:1.04;letter-spacing:-.035em;
  max-width:16ch;margin:0;
}
.hero-slogan > span{display:inline}
.hs-a{color:var(--cream)}
.hs-b{color:var(--forest-tint)}      /* the muted middle voice */
.hs-c{color:var(--terracotta)}
.hs-dot{
  display:inline-block;width:.13em;height:.13em;border-radius:50%;
  background:var(--cream);margin-left:.08em;vertical-align:baseline;
}
[dir="rtl"] .hs-dot{margin-left:0;margin-right:.08em}
[dir="rtl"] .hero-slogan{
  font-size:clamp(34px,6.4vw,88px);line-height:1.32;letter-spacing:0;max-width:18ch;
}

.hero-sub{margin-top:30px;max-width:52ch;color:var(--cream-dim);font-size:17px}
.hero-actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}

/* scroll cue — mouse outline with a falling dot, then a chevron */
.hero-scroll{
  position:absolute;bottom:38px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--cream-dim);transition:.3s var(--ease);
}
.hero-scroll:hover{color:var(--cream)}
.hs-mouse{
  width:26px;height:42px;border:1.5px solid currentColor;border-radius:var(--r-pill);
  display:flex;justify-content:center;padding-top:8px;opacity:.75;
}
.hs-wheel{
  width:5px;height:5px;border-radius:50%;background:var(--terracotta);
  animation:hsWheel 1.9s var(--ease) infinite;
}
@keyframes hsWheel{0%{transform:translateY(0);opacity:1}
  70%{transform:translateY(13px);opacity:0}100%{transform:translateY(0);opacity:0}}
.hs-chev{font-size:15px;line-height:1;color:var(--terracotta);opacity:.9;
  animation:hsChev 1.9s var(--ease) infinite}
@keyframes hsChev{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(4px);opacity:1}}

/* the Ghost G watermark sits behind, one per surface */
.hero .ghost-gg{
  display:block;top:50%;right:-6%;transform:translateY(-50%);
  font-size:clamp(420px,58vw,900px);color:rgba(250,243,231,.035);
}
[dir="rtl"] .hero .ghost-gg{right:auto;left:-6%}

/* ============================================================
   marquee strip
   ============================================================ */
.strip{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;overflow:hidden;background:var(--forest-deep);
  /* The rail itself must be LTR. Under dir="rtl" the container anchored its
     content to the right edge, so a translate of 0 left the left half of the
     strip empty and the row visibly drained as it slid. Pinning the rail to
     LTR makes the geometry identical in both languages; reading direction is
     handled by the animation alone. */
  direction:ltr;
}
.strip-track{
  display:flex;align-items:center;gap:26px;white-space:nowrap;width:max-content;
  direction:ltr;                       /* geometry only — words keep their own script */
  animation:marq var(--sp-speed,26s) linear infinite;
  will-change:transform;
}
/* slides exactly one copy of the row, so the loop point is invisible */
@keyframes marq{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(calc(-100% / var(--sp-copies,2)),0,0)}
}
[dir="rtl"] .strip-track{animation-name:marqRTL}
@keyframes marqRTL{
  from{transform:translate3d(calc(-100% / var(--sp-copies,2)),0,0)}
  to  {transform:translate3d(0,0,0)}
}
.strip:hover .strip-track{animation-play-state:paused}

.strip-track .sp-w{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(13px,1.55vw,22px);
  color:var(--cream-dim);letter-spacing:0;line-height:1.2;
  direction:rtl;unicode-bidi:plaintext;   /* each word reads correctly either way */
}
/* the separator dot — same mark that closes the wordmark */
.strip-track .sp-dot{
  flex:none;display:block;border-radius:50%;background:var(--terracotta);
  width:clamp(4px,.55vw,6px);height:clamp(4px,.55vw,6px);
}

/* ============================================================
   stats band — count-up numbers
   ============================================================ */
.stats-band{background:var(--terracotta);color:#fff;border-radius:var(--r-xl);margin:0 24px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:48px 28px;text-align:center;position:relative}
.stat::after{
  content:"";position:absolute;right:0;top:26%;height:48%;width:1px;
  background:rgba(255,255,255,.24);
}
.stat:last-child::after{display:none}
[dir="rtl"] .stat::after{right:auto;left:0}
.stat .v{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(42px,5.2vw,66px);line-height:1;font-variant-numeric:tabular-nums;
}
.stat .l{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;margin-top:12px;opacity:1}

/* ============================================================
   why grid
   ============================================================ */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.why-cell{
  background:var(--forest-soft);padding:38px 34px;border-radius:var(--r);
  border:1px solid var(--line);transition:.4s var(--ease);
}
.why-cell:hover{transform:translateY(-4px);border-color:var(--line-strong);background:#2E5340}
.why-cell h3{font-family:var(--font-display);font-weight:700;font-size:23px;line-height:1.25;
  color:var(--amber);margin-bottom:12px}
.why-cell p{color:var(--cream-dim);max-width:46ch;font-size:15.5px}

/* ============================================================
   services
   ============================================================ */
.svc-list{border-top:1px solid var(--line)}
.svc-row{
  display:grid;grid-template-columns:80px 1fr auto;gap:26px;align-items:center;
  padding:28px 18px;border-bottom:1px solid var(--line);transition:.4s var(--ease);
  position:relative;border-radius:var(--r-sm);
}
.svc-row:hover{background:var(--forest-soft);padding-left:30px}
[dir="rtl"] .svc-row:hover{padding-left:18px;padding-right:30px}
.svc-row .num{font-family:var(--font-mono);color:var(--terracotta);font-size:13px;font-weight:500;letter-spacing:.1em}
.svc-row .name{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(26px,3.6vw,42px);line-height:1.1}
.svc-row .go{font-size:14px;font-weight:500;color:rgba(250,243,231,.5);transition:.3s}
.svc-row:hover .go{color:var(--terracotta)}

.svc-block{padding:52px 0;border-bottom:1px solid var(--line)}
.svc-block-head{display:flex;gap:20px;align-items:baseline;margin-bottom:10px}
.svc-block-head .num{font-family:var(--font-mono);color:var(--terracotta);font-size:15px;font-weight:500}
.svc-block-head h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(30px,4.4vw,52px);line-height:1.1}
.svc-block .intro{color:var(--cream-dim);max-width:62ch;margin-bottom:32px;font-size:17px}
.svc-items{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.svc-item{background:var(--forest-soft);padding:24px 26px;border-radius:var(--r-sm);
  border:1px solid var(--line);transition:.35s var(--ease)}
.svc-item:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.svc-item h4{font-size:16.5px;font-weight:700;margin-bottom:7px;display:flex;align-items:center;gap:10px}
.svc-item h4::before{content:"";width:7px;height:7px;background:var(--terracotta);border-radius:50%;flex:none}
.svc-item p{color:var(--cream-dim);font-size:14.5px}

/* ============================================================
   work grid
   ============================================================ */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.work-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--forest-deep);
  transition:.5s var(--ease-out);border:1px solid var(--line);
  display:flex;flex-direction:column;
}
.work-card:hover{transform:translateY(-8px);border-color:var(--line-strong);
  box-shadow:0 22px 50px rgba(0,0,0,.34)}
.work-thumb{aspect-ratio:4/3;overflow:hidden;background:var(--forest-soft);position:relative;
  border-radius:var(--r-lg) var(--r-lg) 0 0}
.work-thumb img{width:100%;height:100%;object-fit:cover;transition:.75s var(--ease-out)}
.work-card:hover .work-thumb img{transform:scale(1.07)}
.work-thumb .noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:rgba(250,243,231,.4);font-family:var(--font-mono);font-size:12px}
.work-body{padding:24px 24px 28px;flex:1;display:flex;flex-direction:column}
.work-body .date{font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--terracotta)}
.work-body h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:24px;line-height:1.15;margin:9px 0 10px}
.work-body p{color:var(--cream-dim);font-size:14.5px;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tag{
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:var(--cream);border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:7px 14px;
}
.work-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.filter-btn{
  font-size:14px;font-weight:500;color:var(--cream-dim);
  border:1.5px solid var(--line);background:transparent;
  padding:10px 18px;border-radius:var(--r-pill);transition:.3s var(--ease);
}
.filter-btn:hover{color:var(--cream);border-color:var(--line-strong)}
.filter-btn.active{background:var(--terracotta);border-color:var(--terracotta);color:#fff}

/* ============================================================
   project detail
   ============================================================ */
.proj-hero{padding-top:150px}
.proj-top{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.proj-back{color:rgba(250,243,231,.55);font-size:14px;font-weight:500;display:inline-block;transition:.3s}
.proj-back:hover{color:var(--terracotta)}
.proj-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(38px,6vw,72px);line-height:1.05;margin:14px 0 4px}
.proj-body{font-size:17.5px;color:var(--cream);max-width:60ch}
.proj-tags{margin:24px 0}
.proj-did{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.proj-did .lbl{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--terracotta);margin-bottom:11px}
.proj-did p{font-weight:600;font-size:15px}
.proj-metrics{display:flex;gap:42px;margin-top:34px;flex-wrap:wrap}
.proj-metrics .m .v{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:50px;color:var(--terracotta);line-height:1;font-variant-numeric:tabular-nums}
.proj-metrics .m .l{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cream-dim);margin-top:8px}
.proj-gallery{display:grid;gap:18px}
.proj-gallery img{width:100%;border-radius:var(--r);object-fit:cover;border:1px solid var(--line);
  transition:.5s var(--ease-out)}
.proj-gallery img:hover{transform:scale(1.015)}
.proj-nav{display:flex;justify-content:space-between;gap:20px;margin-top:78px;padding-top:34px;
  border-top:1px solid var(--line)}
.proj-nav a{display:flex;flex-direction:column;gap:6px;transition:.3s}
.proj-nav .k{font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(250,243,231,.62)}
.proj-nav .t{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.02em}
.proj-nav a:hover .t{color:var(--terracotta)}
.proj-nav .next{text-align:end;margin-left:auto}
[dir="rtl"] .proj-nav .next{margin-left:0;margin-right:auto}

/* ============================================================
   about
   ============================================================ */
.about-lead{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(23px,3.2vw,36px);line-height:1.22;max-width:22ch}
.about-cols{display:grid;grid-template-columns:1fr 1fr;gap:46px;margin-top:44px}
.about-cols p{color:var(--cream-dim);font-size:17px}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vm-cell{background:var(--forest-deep);padding:46px 42px;border-radius:var(--r-lg);
  border:1px solid var(--line)}
.vm-cell .eyebrow{margin-bottom:18px;display:block}
.vm-cell p{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(20px,2.4vw,27px);line-height:1.32}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.value-cell{background:var(--forest-soft);padding:32px 26px;border-radius:var(--r);
  min-height:212px;display:flex;flex-direction:column;border:1px solid var(--line);
  transition:.4s var(--ease)}
.value-cell:hover{transform:translateY(-5px);background:#2E5340}
.value-cell .n{font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--terracotta);letter-spacing:.1em}
.value-cell h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:25px;margin:14px 0 12px}
.value-cell p{color:var(--cream-dim);font-size:14.5px}

.process{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.proc-step .badge{
  width:54px;height:54px;border-radius:var(--r-pill);background:var(--terracotta);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:800;font-size:22px;margin-bottom:22px;transition:.4s var(--ease);
}
.proc-step:hover .badge{transform:scale(1.1) rotate(-6deg)}
.proc-step:last-child .badge{background:var(--amber);color:var(--forest)}
.proc-step h4{font-family:var(--font-display);font-weight:800;font-size:22px;
  letter-spacing:-.02em;margin-bottom:10px}
.proc-step:last-child h4{color:var(--amber)}
.proc-step p{color:var(--cream-dim);font-size:14.5px}

/* ============================================================
   clients
   ============================================================ */
.clients-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.client-cell{
  background:var(--forest-soft);min-height:118px;display:flex;align-items:center;
  justify-content:center;padding:20px;text-align:center;transition:.4s var(--ease);
  border-radius:var(--r-sm);border:1px solid var(--line);
}
.client-cell:hover{background:var(--terracotta);border-color:var(--terracotta);transform:translateY(-4px)}
.client-cell span{font-family:var(--font-display);font-weight:600;font-size:17px;
  color:var(--cream-dim);transition:.3s}
.client-cell:hover span{color:#fff}

/* ============================================================
   CTA / contact
   ============================================================ */
.cta-band{background:var(--forest-deep);position:relative;overflow:hidden;
  border-radius:var(--r-xl);margin:0 24px}
.cta-inner{position:relative;z-index:2;text-align:center;padding:20px 0}
.cta-inner h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(38px,7vw,86px);line-height:1.04}
.cta-inner p{color:var(--cream-dim);font-size:18px;margin:22px auto 0;max-width:46ch}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.contact-info{display:grid;gap:12px}
.ci-row{background:var(--forest-deep);padding:24px 26px;border-radius:var(--r-sm);
  border:1px solid var(--line);transition:.35s var(--ease)}
.ci-row:hover{border-color:var(--line-strong)}
.ci-row .k{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--terracotta);margin-bottom:9px}
.ci-row .v{font-size:19px;font-weight:600}
.contact-form{display:grid;gap:16px}
.field label{font-size:13.5px;font-weight:500;color:var(--cream-dim);display:block;margin-bottom:8px}
.field input,.field textarea{
  width:100%;background:var(--forest-deep);border:1.5px solid var(--line);color:var(--cream);
  padding:14px 18px;border-radius:var(--r-sm);font-family:var(--font-body);font-size:15px;transition:.3s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--terracotta)}
.field textarea{min-height:130px;resize:vertical;border-radius:var(--r-sm)}
.form-note{font-size:13.5px;color:var(--amber)}

/* ============================================================
   footer
   ============================================================ */
.footer{border-top:1px solid var(--line);padding:56px 0 40px;background:var(--forest-deep)}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.footer-logo svg{height:28px}
.footer-slogan{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--amber);margin-top:14px}
.footer-nav{display:flex;gap:44px;flex-wrap:wrap}
.footer-col h5{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--terracotta);margin-bottom:16px}
.footer-col a,.footer-col p{display:block;color:var(--cream-dim);font-size:15.5px;margin-bottom:11px;transition:.25s}
.footer-col a:hover{color:var(--cream)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;margin-top:46px;
  padding-top:24px;border-top:1px solid var(--line);
  font-size:14px;color:rgba(250,243,231,.62);flex-wrap:wrap;gap:12px;
}

/* ============================================================
   responsive
   ============================================================ */
@media(max-width:960px){
  .nav-links{
    position:fixed;top:0;right:0;height:100svh;width:min(320px,84vw);
    background:var(--forest-deep);flex-direction:column;justify-content:center;
    gap:24px;padding:40px;transform:translateX(105%);transition:.45s var(--ease-out);
    border-left:1px solid var(--line);z-index:99;
    border-radius:var(--r-xl) 0 0 var(--r-xl);
  }
  [dir="rtl"] .nav-links{right:auto;left:0;transform:translateX(-105%);
    border-left:0;border-right:1px solid var(--line);border-radius:0 var(--r-xl) var(--r-xl) 0}
  .nav-links.open{transform:none}
  .nav-links a{font-size:17px}
  .burger{display:flex;z-index:101}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2)::after{display:none}
  .values-grid{grid-template-columns:1fr 1fr}
  .clients-grid{grid-template-columns:repeat(3,1fr)}
  .process{grid-template-columns:1fr 1fr}
  .svc-items{grid-template-columns:1fr}
  .proj-top,.about-cols,.vm-grid,.contact-grid{grid-template-columns:1fr;gap:30px}
  .why-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .stats-band,.cta-band{margin:0 14px;border-radius:var(--r-lg)}
  .work-grid{grid-template-columns:1fr}
  .values-grid,.clients-grid,.stats-grid,.process{grid-template-columns:1fr 1fr}
  .svc-row{grid-template-columns:56px 1fr;gap:14px}
  .svc-row .go{display:none}
  .hero-top{font-size:10px}
  .proj-metrics{gap:26px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   RTL / ARABIC — Rubik per brand book
   ============================================================ */
[dir="rtl"]{
  /* Bricolage is listed first and carries every Latin character
     (brand names, emails, numbers). It has no Arabic glyphs, so the
     browser falls through to Rubik for Arabic — automatically, and
     per-character within the same line. */
  --font-display:"Bricolage Grotesque","Rubik",sans-serif;
  --font-body:"Bricolage Grotesque","Rubik",-apple-system,sans-serif;
}
[dir="rtl"] .eyebrow,[dir="rtl"] .mono,[dir="rtl"] .tag,[dir="rtl"] .stat .l,
[dir="rtl"] .work-body .date,[dir="rtl"] .proj-did .lbl,[dir="rtl"] .proj-metrics .m .l,
[dir="rtl"] .footer-col h5,[dir="rtl"] .footer-slogan,[dir="rtl"] .ci-row .k,
[dir="rtl"] .hero-top,[dir="rtl"] .proj-nav .k,[dir="rtl"] .hero-scroll,
[dir="rtl"] .lang-btn{letter-spacing:0}
/* The wordmark and the Ghost-G pattern are brand marks, not text:
   they must render in Bricolage Grotesque in BOTH languages, so the
   watermark G is the exact same letterform as the G in the logo
   (Brand Guidelines 2.2 & 5.2). Numerals follow the reading language. */
[dir="rtl"] .wm,
[dir="rtl"] .sub-mark,
[dir="rtl"] .ghost-gg{font-family:"Bricolage Grotesque",sans-serif}
[dir="rtl"] .stat .v,[dir="rtl"] .proj-metrics .m .v{font-family:"Rubik",sans-serif}
/* Arabic display type needs a touch more air */
[dir="rtl"] .hero-tag{line-height:1.28;letter-spacing:0}
[dir="rtl"] .section-head h2,[dir="rtl"] .cta-inner h2,[dir="rtl"] .proj-title{
  line-height:1.24;letter-spacing:0}
[dir="rtl"] .about-lead,[dir="rtl"] .vm-cell p,[dir="rtl"] .value-cell h4,
[dir="rtl"] .why-cell h3,[dir="rtl"] .svc-row .name,[dir="rtl"] .svc-block-head h3,
[dir="rtl"] .work-body h3,[dir="rtl"] .proc-step h4,[dir="rtl"] .client-cell span,
[dir="rtl"] .proj-nav .t{letter-spacing:0;line-height:1.4}
/* NOTE: the RTL keyframes for the word strip are defined once, up with the
   .strip rules. An older copy lived here that slid a flat 50% instead of one
   copy width — with 7 copies that made the Arabic rail run ~3x too fast. */

/* ============================================================
   WORDMARK (HTML-built, font-safe) — Brand Guidelines 2.2
   ============================================================ */
.wm{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  letter-spacing:-.012em;line-height:1;color:var(--cream);
  display:inline-flex;align-items:baseline;white-space:nowrap;
}
.wm i{font-style:normal}
.wm-i{color:var(--terracotta)}
.wm-ghost{opacity:.22}                    /* the Ghost G on forest */
.wm.on-light{color:var(--forest)}
.wm.on-light .wm-ghost{opacity:.18}       /* 18% on cream, per the book */
.wm-dot{
  width:.15em;height:.15em;border-radius:50%;background:var(--terracotta);
  display:inline-block;margin-left:.05em;flex:none;
}
[dir="rtl"] .wm{direction:ltr}            /* the wordmark stays Latin, always */
.sub-mark{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  letter-spacing:-.04em;color:var(--cream);line-height:1;display:inline-block;
}

/* drawn dot for headlines — never a font glyph */
.dot{
  display:inline-block;width:.14em;height:.14em;border-radius:50%;
  background:var(--terracotta);margin-left:.07em;vertical-align:baseline;flex:none;
}
[dir="rtl"] .dot{margin-left:0;margin-right:.07em}

/* hero wordmark sizing when used large */
.hero-logo .wm{letter-spacing:-.015em}

/* ============================================================
   REVISIONS — readability, patterns, client logos
   ============================================================ */

/* (7) calmer display sizes; headings flow naturally, never force-stacked */
.section-head h2{font-size:clamp(30px,3.9vw,50px)}
.hero-tag{font-size:clamp(34px,4.8vw,62px);max-width:19ch}
.cta-inner h2{font-size:clamp(32px,4.6vw,58px)}
.proj-title{font-size:clamp(32px,4.6vw,56px)}
/* page headings — the hero slogan sets its own scale and is excluded */
.page h1:not(.hero-slogan){font-size:clamp(34px,4.8vw,60px)!important;line-height:1.1!important}
[dir="rtl"] .page h1:not(.hero-slogan){line-height:1.35!important}
[dir="rtl"] .hero-tag{font-size:clamp(30px,4.2vw,54px)}
.about-lead{font-size:clamp(21px,2.6vw,30px)}
.svc-row .name{font-size:clamp(22px,2.9vw,34px)}
.svc-block-head h3{font-size:clamp(26px,3.4vw,42px)}

/* (6) one pattern per surface — never stack the Ghost G on itself.
   The drifting field is the hero's only pattern; section watermarks
   are single, quiet, and clipped to their own section.            */
.section > .ghost-gg{opacity:1;color:rgba(250,243,231,.028)}
/* clip, not hidden: 'hidden' makes the section a scroll container, so
   focusing a filter button inside it yanks the page. 'clip' does not. */
.section{overflow:clip}
.cta-band .ghost-gg{font-size:clamp(200px,26vw,380px);top:-8%}
/* a section may carry the dot field OR the GG, not both */
.section .dot-field + .ghost-gg,.section .ghost-gg + .dot-field{display:none}

/* (9) CTA pill: text can never spill past the edge */
.btn,.nav-cta{line-height:1.2;text-align:center}
.nav-cta{padding:12px 24px}
.btn.solid{padding-inline:30px}

/* (10) client logos — PNG/SVG sit neatly inside the tile */
.client-cell.has-logo{background:var(--cream);padding:22px 24px}
.client-cell.has-logo:hover{background:#fff}
.client-cell img{max-height:52px;max-width:100%;width:auto;object-fit:contain}
.client-cell span{font-size:16px;line-height:1.35}

/* (12) crisper wordmark rendering at every size */
/* A logo is a fixed mark, not running text: pin the optical-size axis to
   the display cut (96) so the wordmark keeps identical proportions at
   every size. Left on `auto`, Bricolage swapped to its small-text design
   at nav size — thinner strokes and looser spacing, which made the
   letterforms look inconsistent against the round G's natural overshoot. */
.wm,.sub-mark{
  font-optical-sizing:none;
  font-variation-settings:"opsz" 96,"wght" 800,"wdth" 100;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}
.footer-logo .wm{letter-spacing:-.012em}

/* (11) filtering the work grid must not shift anything behind it */
/* filtering must never shorten the page enough to yank the scroll
   position — reserve the grid area so the view stays put */
#workGrid{min-height:min(72vh,760px)}

/* (3) marquee reads as a clean word list */
.strip-track{gap:44px}
.strip{padding:18px 0}

/* ============================================================
   ARABIC LABELS — IBM Plex Mono has no Arabic, so letters break
   apart. Rubik carries every label in RTL instead.
   ============================================================ */
[dir="rtl"] .eyebrow,
[dir="rtl"] .mono,
[dir="rtl"] .tag,
[dir="rtl"] .stat .l,
[dir="rtl"] .work-body .date,
[dir="rtl"] .proj-did .lbl,
[dir="rtl"] .proj-metrics .m .l,
[dir="rtl"] .footer-col h5,
[dir="rtl"] .footer-slogan,
[dir="rtl"] .ci-row .k,
[dir="rtl"] .proj-nav .k,
[dir="rtl"] .hero-scroll,
[dir="rtl"] .proj-back,
[dir="rtl"] .filter-btn{
  font-family:"Bricolage Grotesque","Rubik",sans-serif;
  letter-spacing:0;
  text-transform:none;      /* Arabic has no caps — uppercase does nothing but hurt */
  font-weight:600;
}
[dir="rtl"] .eyebrow{font-size:15px}
[dir="rtl"] .stat .l{font-size:14.5px;font-weight:500}
[dir="rtl"] .tag{font-size:13px;font-weight:500}
[dir="rtl"] .work-body .date{font-size:13.5px}
[dir="rtl"] .footer-col h5{font-size:14.5px}
[dir="rtl"] .footer-slogan{font-size:14px}
[dir="rtl"] .ci-row .k{font-size:14px}
[dir="rtl"] .proj-did .lbl,[dir="rtl"] .proj-metrics .m .l{font-size:14px}
[dir="rtl"] .proj-nav .k,[dir="rtl"] .hero-scroll{font-size:13.5px}
/* Latin-only bits keep the mono face even in RTL */
[dir="rtl"] .footer-bottom{font-family:"Bricolage Grotesque","Rubik",sans-serif;letter-spacing:0}

/* Pattern B stays a quiet backdrop — never competing with a headline
   (Brand Guidelines 5.2: keep at least one quiet zone per application) */
.cta-band .ghost-gg{opacity:.55;top:auto;bottom:-14%;right:-4%}
[dir="rtl"] .cta-band .ghost-gg{right:auto;left:-4%}
.section > .ghost-gg{color:rgba(250,243,231,.022)}

/* ============================================================
   CLIENTS MARQUEE — homepage strip
   Sits inside .wrap, so it spans exactly the same width as the
   project cards above it — not edge to edge.

   The track is forced to LTR internally. Under dir="rtl" a flex row
   starts from the right edge, which pushed the whole track thousands
   of pixels off-screen and left the strip empty until it crawled back.
   Pinning the track to LTR makes the geometry identical in both
   languages; reading direction is handled by the animation instead.
   ============================================================ */
.clients-strip-sec{overflow:clip}
.cm-wrap{
  position:relative;overflow:hidden;padding:6px 0;
  direction:ltr;                       /* geometry only — text stays per-language */
  border-radius:var(--r);
  /* short fade so the rail reads the same width as the cards above */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);
}
.cm-track{
  display:flex;gap:14px;width:max-content;
  animation:cmScroll var(--cm-speed,38s) linear infinite;
  will-change:transform;
}
/* travels exactly one copy of the row, so the reset frame is identical */
@keyframes cmScroll{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(calc(-100% / var(--cm-copies,2)),0,0)}
}
/* Arabic reads right-to-left, so the row travels the other way */
[dir="rtl"] .cm-track{animation-name:cmScrollRTL}
@keyframes cmScrollRTL{
  from{transform:translate3d(calc(-100% / var(--cm-copies,2)),0,0)}
  to  {transform:translate3d(0,0,0)}
}
.cm-wrap:hover .cm-track{animation-play-state:paused}

.cm-item{
  flex:none;min-width:186px;height:94px;
  display:flex;align-items:center;justify-content:center;
  padding:16px 24px;border-radius:var(--r);
  background:var(--forest-soft);border:1px solid var(--line);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
  text-align:center;
}
.cm-item span{
  font-family:var(--font-display);font-weight:600;font-size:15.5px;line-height:1.3;
  color:var(--cream-dim);transition:color .3s;
  direction:rtl;unicode-bidi:plaintext;   /* names read correctly either way */
}
.cm-item:hover{background:var(--terracotta);border-color:var(--terracotta);transform:translateY(-4px)}
.cm-item:hover span{color:#fff}
.cm-item.has-logo{background:var(--cream);border-color:transparent}
.cm-item.has-logo:hover{background:#fff}
.cm-item img{max-height:46px;max-width:140px;width:auto;object-fit:contain}

@media(max-width:560px){
  .cm-item{min-width:148px;height:82px;padding:13px 17px}
  .cm-item span{font-size:14px}
  .cm-item img{max-height:38px;max-width:112px}
}
@media(prefers-reduced-motion:reduce){
  .cm-track{animation:none}
  .cm-wrap{overflow-x:auto}
}

/* ============================================================
   TOP BAR — cream band across the top (Brand Guidelines 3.6:
   on cream the wordmark is Forest and the Ghost G sits at 18%)
   ============================================================ */
.nav{
  background:var(--cream);
  border-bottom:1px solid rgba(31,61,46,.10);
  padding:16px 0;
}
.nav.scrolled{
  background:rgba(250,243,231,.94);
  backdrop-filter:blur(14px);
  padding:11px 0;
  border-bottom-color:rgba(31,61,46,.14);
  box-shadow:0 6px 26px rgba(24,48,31,.10);
}
.nav-links a{color:rgba(31,61,46,.72)}
.nav-links a:hover,.nav-links a.active{color:var(--forest)}
.nav-links a::after{background:var(--terracotta)}
.lang-btn{
  color:var(--forest);
  border-color:rgba(31,61,46,.28);
}
.lang-btn:hover{border-color:var(--terracotta);color:var(--terracotta)}
.nav-cta{background:var(--terracotta);border-color:var(--terracotta);color:#fff}
.nav-cta:hover{background:var(--terracotta-hi);border-color:var(--terracotta-hi);
  box-shadow:0 8px 22px rgba(225,80,46,.28)}
.burger span{background:var(--forest)}

/* the page now starts below a solid bar, so the hero needs less top room */
.hero{padding-top:120px}
.proj-hero{padding-top:132px}

/* mobile drawer stays dark for contrast against the cream bar */
@media(max-width:960px){
  .nav-links{background:var(--forest-deep)}
  .nav-links a{color:var(--cream-dim)}
  .nav-links a:hover,.nav-links a.active{color:var(--cream)}
  .lang-btn{color:var(--cream);border-color:var(--line-strong)}
  .lang-btn:hover{color:var(--amber);border-color:var(--amber)}
  .burger.open span{background:var(--cream)}
}

/* hero fine-tuning to match the reference composition */
.hero-slogan{font-size:clamp(44px,8.2vw,116px);max-width:14ch}
[dir="rtl"] .hero-slogan{font-size:clamp(36px,6.8vw,94px);max-width:16ch}
.hero .ghost-gg{display:block;opacity:1}
/* the closing dot reads as cream, matching the reference */
.hs-dot{width:.135em;height:.135em}
/* the dot is a drawn circle, never a glyph — keep it a box */
.hero-slogan .hs-dot{display:inline-block}

/* Pattern B (Brand Guidelines 5.2) — the watermark is the same G as the
   logo's, so it takes the same display cut of the variable font. */
.ghost-gg{
  font-optical-sizing:none;
  font-variation-settings:"opsz" 96,"wght" 800,"wdth" 100;
}

/* ============================================================
   BARE NAV — homepage hero, before the first scroll
   Only the wordmark shows, on the green. The bar itself, the links
   and the burger fade out; the first scroll brings them in for good.
   ============================================================ */
.nav.bare{
  background:transparent;
  border-bottom-color:transparent;
  box-shadow:none;
  padding:30px 0;
  /* the empty bar must not swallow clicks meant for the hero */
  pointer-events:none;
}
.nav.bare .nav-logo{pointer-events:auto}

/* wordmark flips to its on-dark form: cream ink, Ghost G at 22%
   (Brand Guidelines 3.6 — 18% on cream, 22% on forest) */
.nav.bare .wm{color:var(--cream)}
.nav.bare .wm-ghost{opacity:.22}
.nav.bare .nav-logo .wm{font-size:30px}

/* everything except the logo steps aside */
.nav.bare .nav-links,
.nav.bare .burger{
  opacity:0;
  visibility:hidden;                 /* also removes them from tab order */
  transform:translateY(-8px);
}
.nav-links,.burger{
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
}
.nav .wm{transition:color .4s var(--ease),font-size .4s var(--ease)}
.nav .wm-ghost{transition:opacity .4s var(--ease)}

/* the hero owns the full screen while the bar is away */
.nav.bare ~ #app .hero,
body:has(.nav.bare) .hero{padding-top:150px}

@media(max-width:960px){
  .nav.bare{padding:24px 0}
  .nav.bare .nav-logo .wm{font-size:26px}
  /* the drawer is dark, so its links stay light — but it is closed anyway
     whenever the bar is bare */
}
@media(prefers-reduced-motion:reduce){
  .nav-links,.burger,.nav .wm{transition:none}
}

/* first paint must not animate — kills the cream flash on load/refresh/
   language switch. Removed again after one frame. */
.nav.no-anim,
.nav.no-anim .nav-links,
.nav.no-anim .burger,
.nav.no-anim .wm,
.nav.no-anim .wm-ghost{transition:none!important}

/* word strip — comfortable at every width */
@media(max-width:1024px){          /* tablet / iPad */
  .strip{padding:15px 0}
  .strip-track{gap:20px}
}
@media(max-width:640px){           /* phones */
  .strip{padding:13px 0}
  .strip-track{gap:15px}
  .strip-track .sp-w{font-size:14px}
  .strip-track .sp-dot{width:4px;height:4px}
}
@media(prefers-reduced-motion:reduce){
  .strip-track{animation:none}
  .strip{overflow-x:auto}
}


/* ============================================================
   WORD STRIP — sizing down the range of screens
   The rail is decoration, not headline: it should sit quietly under
   the hero at every width rather than shouting on a phone.
   ============================================================ */
@media(max-width:1024px){          /* tablets / iPad */
  .strip{padding:16px 0}
  .strip-track{gap:20px}
  .strip-track .sp-w{font-size:17px}
  .strip-track .sp-dot{width:5px;height:5px}
}
@media(max-width:640px){           /* large phones */
  .strip{padding:13px 0}
  .strip-track{gap:15px}
  .strip-track .sp-w{font-size:14px}
  .strip-track .sp-dot{width:4px;height:4px}
}
@media(max-width:400px){           /* small phones */
  .strip{padding:11px 0}
  .strip-track{gap:12px}
  .strip-track .sp-w{font-size:12.5px}
  .strip-track .sp-dot{width:3.5px;height:3.5px}
}

/* ============================================================
   HERO — slogan only
   With the paragraph and buttons gone the line carries the whole
   screen, so it scales up and the block centres vertically.
   ============================================================ */
.hero-slogan{
  font-size:clamp(48px,9.4vw,132px);
  max-width:13ch;
}
[dir="rtl"] .hero-slogan{
  font-size:clamp(40px,7.8vw,108px);
  max-width:15ch;
}
/* nothing follows the headline now — let it sit optically centred */
.hero{padding-top:110px;padding-bottom:130px}

/* the cue is decoration: no pointer, no focus, no hover affordance */
.hero-scroll{
  pointer-events:none;
  cursor:default;
  color:var(--cream-dim);
}
.hero-scroll:hover{color:var(--cream-dim)}

@media(max-width:960px){
  .hero-slogan{font-size:clamp(40px,10vw,76px);max-width:12ch}
  [dir="rtl"] .hero-slogan{font-size:clamp(34px,8.4vw,64px);max-width:14ch}
}
@media(max-width:560px){
  .hero{padding-top:96px;padding-bottom:96px}
  /* on a phone the line is the only thing on screen — let it fill it */
  .hero-slogan{font-size:clamp(40px,13.4vw,64px);max-width:11ch}
  [dir="rtl"] .hero-slogan{font-size:clamp(36px,11.6vw,56px);max-width:12ch}
}

/* honeypot — hidden from people, visible to bots that fill everything */
.hidden-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   ADAPTIVE GRIDS — content was trimmed, so the layouts must not
   leave a lone card stretched across a four-column track.
   ============================================================ */
.values-grid[data-count="1"]{grid-template-columns:minmax(0,460px)}
.values-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.values-grid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.why-grid[data-count="1"]{grid-template-columns:minmax(0,560px)}

/* Services are now a clean list of names — no intro, no descriptions.
   Without body copy the cards read better as compact chips in a
   flowing multi-column set than as tall boxes with empty space. */
.svc-items.names-only{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;
}
.svc-items.names-only .svc-item{
  padding:17px 22px;
  display:flex;align-items:center;
}
.svc-items.names-only .svc-item h4{
  margin:0;font-size:16px;font-weight:600;line-height:1.4;
}
/* the section header carries the whole block now, so give it room */
.svc-block{padding:44px 0}
.svc-block-head{margin-bottom:22px}

@media(max-width:640px){
  .svc-items.names-only{grid-template-columns:1fr;gap:10px}
  .svc-items.names-only .svc-item{padding:15px 18px}
  .svc-items.names-only .svc-item h4{font-size:15px}
}

/* a lone value card shouldn't inherit the tall min-height meant for a
   four-across row — it just becomes a box of empty space */
.values-grid[data-count="1"] .value-cell,
.values-grid[data-count="2"] .value-cell{min-height:0;padding:30px 30px 32px}

/* ============================================================
   PHONE NUMBERS — always read left-to-right
   In an RTL page the browser reorders a "+" and digit groups, so
   "+996 54 142 7138" was rendering as "7138 142 54 996+". Isolating
   the run keeps it in dialling order in both languages, while the
   surrounding Arabic layout stays right-aligned.
   ============================================================ */
.num-ltr{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
  font-variant-numeric:tabular-nums;
}
[dir="rtl"] .ci-row .num-ltr{text-align:right}
[dir="rtl"] .footer-col .num-ltr{text-align:right}
a.num-ltr{transition:color .25s}
a.num-ltr:hover{color:var(--terracotta)}

/* direct-email fallback under the contact form */
.form-alt{font-size:14.5px;color:var(--cream-dim);margin-top:4px}
.form-alt a{color:var(--terracotta);border-bottom:1px solid rgba(225,80,46,.4);transition:.25s}
.form-alt a:hover{color:var(--terracotta-hi);border-bottom-color:var(--terracotta-hi)}

/* footer tagline (only shown when it differs from the slogan) */
.footer-tagline{color:var(--cream-dim);max-width:34ch;margin-top:16px;font-size:14.5px}

/* ============================================================
   Hide the "Powered by Netlify" badge that the free plan injects
   into the bottom-right corner. Selectors are deliberately narrow
   so they never touch .proc-step .badge used by the process cards.
   ============================================================ */
#netlify-badge,
.netlify-badge,
div[id^="netlify-badge"],
a[href*="netlify.com/?utm_source=badge"],
a[href*="netlify.app/?utm_source=badge"]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}