*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: #fbf7f1;
  color: #201d1b;
  font-family: "Noto Kufi Arabic", "Noto Sans", system-ui, sans-serif;
  text-rendering: geometricPrecision;
}
img { width: 100%; height: auto; display: block; }
a, button { touch-action: manipulation; }
.font-en { font-family: "Noto Sans", system-ui, sans-serif; }
.site-shell { width: min(100%, 1536px); margin-inline: auto; background: #fbf7f1; box-shadow: 0 0 0 1px rgba(32,29,27,.05); }
.inner { width: min(100% - 96px, 1340px); margin-inline: auto; }
.hair { border-color: rgba(32,29,27,.14); }
.hero-title { font-size: clamp(2.25rem, 4.2vw, 5.6rem); line-height: 1.12; letter-spacing: 0; }
.section-title { font-size: clamp(1.55rem, 2.6vw, 3rem); line-height: 1.18; letter-spacing: 0; }
.lead { font-size: clamp(.96rem, 1.05vw, 1.18rem); line-height: 1.95; }
.case-hero { min-height: clamp(560px, 70vh, 820px); }
.case-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(32,29,27,.08), rgba(32,29,27,.16) 36%, rgba(32,29,27,.78));
  pointer-events: none;
}
.hero-panel {
  width: min(100%, 610px);
  background: rgba(251,247,241,.92);
  border: 1px solid rgba(255,255,255,.58);
  backdrop-filter: blur(12px);
}
.metric { border-inline-start: 1px solid rgba(32,29,27,.16); padding-inline-start: clamp(1rem, 2vw, 2rem); }
.metric:first-child { border-inline-start: 0; padding-inline-start: 0; }
.link-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 1px solid #201d1b;
  padding: .78rem 1.15rem;
  font-weight: 800;
  font-size: clamp(.78rem, .85vw, .95rem);
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.link-button:hover { transform: translateY(-1px); border-color: #d64217; background: #d64217; color: #fff; }
.link-button.primary { border-color: #d64217; background: #d64217; color: #fff; }
.case-card {
  border: 1px solid rgba(32,29,27,.14);
  background: rgba(255,255,255,.54);
  min-height: 100%;
}
.image-tile {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  background: #201d1b;
}
.image-tile img { height: 100%; min-height: 320px; object-fit: cover; }
.spec-row {
  display: grid;
  grid-template-columns: minmax(130px, .72fr) 1fr;
  gap: 1rem;
  border-bottom: 1px solid rgba(32,29,27,.12);
  padding: 1rem 0;
}
.spec-row:last-child { border-bottom: 0; }
.lang-en [data-lang="ar"], .lang-ar [data-lang="en"] { display: none !important; }
.lang-en { direction: ltr; font-family: "Noto Sans", system-ui, sans-serif; }
.lang-ar { direction: rtl; }
@media (max-width: 900px) {
  .inner { width: min(100% - 28px, 1340px); }
  .case-hero { min-height: auto; padding-block: 4.8rem; }
  .case-hero::after { background: linear-gradient(to top, rgba(32,29,27,.76), rgba(32,29,27,.24)); }
  .hero-panel { width: 100%; }
  .metric, .metric:first-child { border-inline-start: 0; border-top: 1px solid rgba(32,29,27,.14); padding: 1rem 0 0; }
  .metric:first-child { border-top: 0; padding-top: 0; }
  .spec-row { grid-template-columns: 1fr; gap: .35rem; }
}