/* Home page */

.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-block: 7rem var(--space-6);
  background:
    radial-gradient(60rem 40rem at 85% 20%, rgb(17 98 74 / 0.55), transparent 60%),
    radial-gradient(50rem 36rem at 5% 95%, rgb(10 74 55 / 0.6), transparent 65%),
    var(--green);
}
/* film grain */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-mark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -6%;
  transform: translateY(-50%);
  width: min(44vw, 34rem);
  opacity: 0.09;
  pointer-events: none;
  animation: drift 26s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translateY(-50%) rotate(0deg) scale(1); }
  50% { transform: translateY(-46%) rotate(4deg) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .hero-mark { animation: none; } }
.hero .container { position: relative; z-index: 1; }
.hero-eyebrow { opacity: 0.7; }
.hero-title {
  font-size: var(--text-display);
  font-weight: 600;
  max-inline-size: 14ch;
  margin-block: var(--space-3) var(--space-4);
}
[lang="ar"] .hero-title { font-weight: 600; }
.hero-sub {
  font-size: var(--text-lg);
  font-weight: 300;
  max-inline-size: 46ch;
  opacity: 0.85;
  margin-block-end: var(--space-5);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-scroll {
  position: absolute;
  inset-block-end: var(--space-4);
  inset-inline-start: var(--gutter);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  opacity: 0.6;
  animation: bob 2.2s ease-in-out infinite;
}
[lang="ar"] .hero-scroll { text-transform: none; letter-spacing: 0; }
@keyframes bob { 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hero-scroll { animation: none; } }

.stat { text-align: center; }
.stat-big {
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-inline-size: 24ch;
  margin-inline: auto;
  margin-block: var(--space-4);
}
[lang="ar"] .stat-big { font-weight: 600; }
.stat-sub { font-size: var(--text-lg); opacity: 0.75; }

.b2b-inner { max-inline-size: var(--container); }
.b2b-p { font-size: var(--text-lg); max-inline-size: 50ch; opacity: 0.85; margin-block: var(--space-3) var(--space-4); }

.work-p { font-size: var(--text-lg); max-inline-size: 50ch; opacity: 0.85; }
.work-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}
.work-item {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--cream-line);
  box-shadow: 0 12px 30px rgb(5 50 37 / 0.08);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.work-item:nth-child(odd) { transform: rotate(-1.4deg); }
.work-item:nth-child(even) { transform: rotate(1.4deg) translateY(10px); }
.work-item:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 22px 44px rgb(5 50 37 / 0.16); }
.work-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 60rem) {
  .work-gallery { grid-template-columns: repeat(2, 1fr); }
}

.blogband { background: var(--cream-dim); }
.blogband-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.blogband p { max-inline-size: 48ch; opacity: 0.85; }