:root {
      --sage-mid: #658c4c;
      --stone-mid: #a68d6e;
      --cream: #faf8f3;
      --ink: #1c1c18;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      background-color: var(--cream);
      color: var(--ink);
      font-family: 'DM Sans', sans-serif;
      overflow-x: hidden;
    }

    /* Arabic overrides */
    [lang="ar"] body,
    body.lang-ar { font-family: 'Noto Naskh Arabic', serif; direction: rtl; }
    body.lang-ar .font-display { font-family: 'Noto Naskh Arabic', serif; }

    .font-display { font-family: 'Cormorant Garamond', serif; }

    /* Grain texture overlay */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 999;
      opacity: 0.4;
    }

    /* Nav */
    #navbar {
      transition: background 0.4s, box-shadow 0.4s;
    }
    #navbar.scrolled {
      background: rgba(250,248,243,0.95);
      backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    }

    /* Hero */
    .hero-bg {
      background: linear-gradient(165deg, #2a3820 0%, #3c562c 40%, #4e6f39 70%, #658c4c 100%);
      position: relative;
      overflow: hidden;
    }
    .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .hero-leaf {
      position: absolute;
      opacity: 0.07;
      pointer-events: none;
    }

    /* Section divider */
    .divider-leaf {
      width: 40px;
      height: 2px;
      background: var(--sage-mid);
      display: inline-block;
      vertical-align: middle;
      margin: 0 12px;
    }

    /* Service card */
    .service-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .service-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    }

    /* Swiper custom */
    .swiper-button-next,
    .swiper-button-prev {
      color: var(--sage-mid) !important;
      background: rgba(250,248,243,0.9);
      width: 44px !important;
      height: 44px !important;
      border-radius: 50%;
      box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
      font-size: 14px !important;
      font-weight: 700;
    }
    .swiper-pagination-bullet-active {
      background: var(--sage-mid) !important;
    }
    .swiper-pagination-bullet {
      background: #ccc;
    }

    /* WhatsApp button */
    .wa-btn {
      background: #25d366;
      transition: background 0.2s, transform 0.2s;
    }
    .wa-btn:hover {
      background: #1ebe5d;
      transform: translateY(-2px);
    }

    /* Fade-in on scroll */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* Lang button active */
    .lang-btn.active {
      background: var(--sage-mid);
      color: #fff;
    }

    /* Stats */
    .stat-number {
      font-family: 'Cormorant Garamond', serif;
      font-size: 3rem;
      font-weight: 300;
      color: var(--sage-mid);
      line-height: 1;
    }

    /* Process step */
    .process-line {
      position: absolute;
      top: 24px;
      left: calc(50% + 24px);
      right: calc(-50% + 24px);
      height: 1px;
      background: linear-gradient(to right, var(--sage-mid), transparent);
    }

    /* Testimonial */
    .testimonial-card {
      background: #fff;
      border-left: 3px solid var(--sage-mid);
    }

    /* Before/After */
    .ba-label {
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    /* Mobile menu */
    #mobile-menu {
      transition: max-height 0.4s ease, opacity 0.4s ease;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
    }
    #mobile-menu.open {
      max-height: 400px;
      opacity: 1;
    }

    /* RTL swiper arrows */
    body.lang-ar .swiper-button-next { left: 10px; right: auto; }
    body.lang-ar .swiper-button-prev { right: 10px; left: auto; }

    /* Placeholder images — lush garden photos from Unsplash */
    .img-placeholder {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }