/* ==========================================================================
   Deep Clean SA — Design tokens
   Brand palette matched to the client's own logo (teal badge + wordmark),
   darkened slightly to clear the enhanced 7:1 contrast target.
   Style: Flat Design + Accessible & Ethical (ui-ux-pro-max, ui-reasoning.csv #55)
   — no gradients, no shadows, 2-4px corners, simple color/opacity hovers only.
   Font: Alexandria — variable, Arabic + Latin in one family (google-fonts.csv)
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand palette — teal from the client logo, terracotta CTA accent */
  --color-primary: #1D6070;          /* 7.1:1 with white (enhanced target) */
  --color-primary-foreground: #FFFFFF;
  --color-primary-hover: #144653;
  --color-secondary: #3FA9C9;        /* decorative use only, not text-bearing */
  --color-accent: #8F3F1F;           /* 7.2:1 with white (enhanced target) */
  --color-accent-hover: #6E3018;
  --color-accent-bright: #D96A3A;    /* decorative use only, not text-bearing */
  --color-accent-foreground: #FFFFFF;

  /* Surfaces & text */
  --color-background: #FFFFFF;
  --color-background-alt: #EAF5F7;
  --color-foreground: #0F172A;
  --color-muted: #E3F1F3;
  --color-muted-foreground: #475569; /* 7.5:1 with white */
  --color-card: #FFFFFF;
  --color-border: #BFE3EA;
  --color-destructive: #991B1B;      /* 8.3:1 with white (enhanced target) */
  --color-destructive-foreground: #FFFFFF;
  --color-ring: #1D6070;
  --color-success: #14532D;          /* 9:1+ with white/near-white */

  /* Service-division accents (scope-of-work badges) — 8:1+ with white */
  --color-pest: #2F5233;
  --color-maintenance: #34495E;

  /* Typography */
  --font-sans: 'Alexandria', 'Segoe UI', Tahoma, sans-serif;
  --fs-body: 1rem;
  --lh-body: 1.6;

  /* Spacing scale (marketing page — spacious tier) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Layout — flat design: 2-4px corners, no shadows, no gradients */
  --container-max: 1200px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

/* ==========================================================================
   Dark theme — same flat-design rules (no shadows/gradients), brand colors
   brightened to clear contrast against dark surfaces, with the "foreground"
   pairs flipped to dark text so buttons/fills stay readable either way.
   Applied via .dark on <html>; toggled in js/main.js, persisted per visitor.
   ========================================================================== */

html.dark {
  color-scheme: dark;

  --color-primary: #4FB3CC;          /* 7.2:1 against dark bg, used as text/icon */
  --color-primary-foreground: #0B1518; /* dark text for content ON primary fills */
  --color-primary-hover: #6BC3D8;
  --color-secondary: #7DD3E8;
  --color-accent: #F0925C;           /* 7.5:1 against dark bg */
  --color-accent-hover: #F5AD80;
  --color-accent-bright: #FFA873;
  --color-accent-foreground: #0B1518;

  --color-background: #0E1A1D;
  --color-background-alt: #152428;
  --color-foreground: #E7F1F3;
  --color-muted: #1B2C31;
  --color-muted-foreground: #9FB8BD;
  --color-card: #15262A;
  --color-border: #2A3F44;
  --color-destructive: #F87171;
  --color-destructive-foreground: #0B1518;
  --color-ring: #4FB3CC;
  --color-success: #4ADE80;

  --color-pest: #7DC98C;
  --color-maintenance: #8FB4D9;
}

html.dark .stars { color: #FCD34D; }
html.dark .form-status { background: #10281C; }

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* حاجز ضد التمدد الأفقي: عنصر واحد أعرض من الشاشة يفتح تمريرًا جانبيًا
   ويترك فراغًا على يسار الصفحة في وضع RTL. */
html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-foreground);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

:focus-visible {
  outline: 4px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: -100px;
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top var(--transition-base);
}
.skip-link:focus { top: var(--space-4); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 640px) {
  .container { padding-inline: var(--space-6); }
}

.section { padding-block: var(--space-16); }
.section-alt { background: var(--color-background-alt); }

.section-header {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--space-12);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-primary);
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.section-title {
  font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.75rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-foreground);
  text-wrap: balance;
}

.section-desc {
  margin-block-start: var(--space-3);
  color: var(--color-muted-foreground);
  font-size: 1.0625rem;
  line-height: 1.8;
}

/* Latin script tolerates tighter leading/tracking than Arabic, whose
   ascenders, descenders and connected forms need the looser defaults above. */
html[lang="en"] .hero-title {
  line-height: 1.15;
  letter-spacing: -0.015em;
}
html[lang="en"] .section-title {
  line-height: 1.2;
  letter-spacing: -0.01em;
}
html[lang="en"] .hero-desc,
html[lang="en"] .section-desc { line-height: 1.6; }

.grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Buttons — solid fills, no gradients/shadows, simple hover color shift
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 50px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base);
  white-space: nowrap;
}
.btn:active { opacity: 0.85; }

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-foreground);
}
.btn-primary:hover { background: var(--color-accent-hover); }

.btn-secondary {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
.btn-secondary:hover { background: var(--color-primary-hover); }

.btn-outline {
  background: var(--color-background);
  border-color: var(--color-border);
  border-width: 1.5px;
  color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-muted); border-color: var(--color-primary); }

.btn-block { width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-background);
  border-block-end: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 76px;
}

.brand {
  display: flex;
  align-items: center;
}
.brand-logo { height: 40px; width: auto; display: block; }

@media (min-width: 640px) {
  .brand-logo { height: 48px; }
}

.main-nav {
  display: none;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-weight: 600;
  font-size: 0.9375rem;
}

.main-nav a {
  padding: var(--space-2) 0;
  color: var(--color-foreground);
  border-block-end: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.main-nav a:hover { color: var(--color-primary); border-block-end-color: var(--color-primary); }

@media (min-width: 960px) {
  .main-nav { display: block; }
  .nav-toggle { display: none; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.lang-switch:hover { background: var(--color-muted); border-color: var(--color-primary); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.nav-toggle:hover { background: var(--color-muted); border-color: var(--color-primary); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.theme-toggle:hover { background: var(--color-muted); border-color: var(--color-primary); }
.theme-toggle .icon-moon { display: none; }
html.dark .theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle .icon-moon { display: block; }

.mobile-nav {
  display: none;
  border-block-end: 1px solid var(--color-border);
  background: var(--color-background);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-2);
}
.mobile-nav a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  min-height: 44px;
}
.mobile-nav a:hover { background: var(--color-muted); }

@media (min-width: 960px) {
  .mobile-nav { display: none !important; }
}

/* ==========================================================================
   Hero — flat: solid color block, no texture/gradient decoration
   ========================================================================== */

.hero {
  position: relative;
  background: var(--color-background-alt);
  padding-block: var(--space-16) var(--space-24);
}

.hero-divider { display: none; }

.hero-grid {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
}

.hero-title {
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.25rem);
  line-height: 1.45;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--color-foreground);
}
.hero-title .accent-text { color: var(--color-primary); }

.hero-desc {
  margin-block-start: var(--space-5);
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--color-muted-foreground);
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-8);
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-8);
}

.hero-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted-foreground);
}
.hero-badge .icon { color: var(--color-primary); width: 20px; height: 20px; flex-shrink: 0; }

.hero-visual {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  min-height: 340px;
  overflow: hidden;
}

.hero-visual img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }

/* ==========================================================================
   Trust strip
   ========================================================================== */

.trust-strip {
  padding-block: var(--space-12);
  border-block: 1px solid var(--color-border);
  background: var(--color-background);
}

.trust-strip .grid { text-align: center; }

.trust-num {
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}
.trust-label { color: var(--color-muted-foreground); font-size: 0.9375rem; margin-block-start: var(--space-1); }

/* ==========================================================================
   Cards (services / why-us / steps / testimonials)
   — flat: solid fills, border-color hover only, no lift/shadow
   ========================================================================== */

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  height: 100%;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.card:hover { border-color: var(--color-primary); }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  margin-block-end: var(--space-5);
  transition: background-color var(--transition-base), color var(--transition-base);
}
.card:hover .card-icon,
.feature-row:hover .card-icon {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
.card-icon .icon { width: 26px; height: 26px; }

.card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-block-end: var(--space-2);
}

.card p { color: var(--color-muted-foreground); font-size: 0.9375rem; }

/* Services bento: first card featured — spans two rows, solid brand color block */
@media (min-width: 900px) {
  .services-grid-featured {
    grid-row: span 2;
    background: var(--color-primary);
    border-color: var(--color-primary);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .services-grid-featured h3,
  .services-grid-featured p { color: var(--color-primary-foreground); }
  .services-grid-featured p { opacity: 0.9; }
  .services-grid-featured .card-icon {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--color-primary-foreground);
  }
  .services-grid-featured:hover .card-icon { background: rgba(255, 255, 255, 0.28); }
}

/* Why-us: horizontal feature row style */
.feature-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-base);
}
.feature-row:hover { background: var(--color-background-alt); }
.feature-row .card-icon { margin-block-end: 0; flex-shrink: 0; }
.feature-row h3 { margin-block-end: var(--space-1); font-size: 1.0625rem; letter-spacing: -0.005em; }
.feature-row p { font-size: 0.9375rem; }

/* Steps */
.step-card { position: relative; }
.step-num {
  position: absolute;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-border);
  line-height: 1;
}

/* Testimonials */
.stars {
  display: flex;
  gap: 2px;
  color: #B45309; /* darkened amber — 4.5:1+ against white, still reads as gold */
  margin-block-end: var(--space-3);
}
.stars .icon { width: 18px; height: 18px; }

.testimonial-quote {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-foreground);
  margin-block-end: var(--space-4);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.author-name { font-weight: 700; font-size: 0.9375rem; }
.author-role { font-size: 0.8125rem; color: var(--color-muted-foreground); }

.testimonials-marquee {
  margin-block-start: var(--space-8);
  padding-block: var(--space-2) var(--space-4);
}
.testimonials-marquee .marquee-track {
  animation-duration: 100s;
  gap: var(--space-6);
}

.testimonial-card {
  width: 340px;
  flex-shrink: 0;
  white-space: normal;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color var(--transition-base);
}
.testimonial-card:hover { border-color: var(--color-primary); }
.testimonial-card .testimonial-quote {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.placeholder-note {
  margin-block-start: var(--space-6);
  text-align: center;
  font-size: 0.875rem;
}
.placeholder-note a {
  color: var(--color-primary);
  font-weight: 700;
}
.placeholder-note a:hover { text-decoration: underline; }

/* ==========================================================================
   Service areas
   ========================================================================== */

.area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.area-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.area-chip:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-foreground);
}
.area-chip:hover .icon { color: var(--color-primary-foreground); }
.area-chip .icon { width: 18px; height: 18px; color: var(--color-primary); transition: color var(--transition-base); }

/* ==========================================================================
   Contact / quote section
   ========================================================================== */

.contact-grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1.1fr; }
}

.contact-info-card {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  height: 100%;
}

.contact-info-card h3 { font-size: 1.375rem; font-weight: 700; margin-block-end: var(--space-2); }
.contact-info-card > p { opacity: 0.9; margin-block-end: var(--space-6); }

.contact-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-end: 1px solid rgba(255, 255, 255, 0.18);
}
.contact-line:last-of-type { border-block-end: none; }
.contact-line .icon { width: 22px; height: 22px; flex-shrink: 0; }
.contact-line a { font-weight: 600; }
.contact-line a:hover { text-decoration: underline; }

.contact-line-label { font-size: 0.8125rem; opacity: 0.8; }

.portfolio-cta {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid rgba(255, 255, 255, 0.18);
}
.portfolio-cta .contact-line-label { font-weight: 700; opacity: 1; margin-block-end: var(--space-3); }

.social-row {
  display: flex;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}
.portfolio-cta .social-row { margin-block-start: 0; }
.social-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base);
}
.social-btn:hover { background: rgba(255, 255, 255, 0.24); }
.social-btn .icon { width: 20px; height: 20px; }

.quote-form-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.form-row {
  display: grid;
  gap: var(--space-4);
  margin-block-end: var(--space-4);
}

@media (min-width: 560px) {
  .form-row-2 { grid-template-columns: repeat(2, 1fr); }
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-block-end: var(--space-2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  transition: border-color var(--transition-fast);
}

.field textarea { min-height: 110px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-primary);
}

.field-error {
  color: var(--color-destructive);
  font-size: 0.8125rem;
  margin-block-start: var(--space-1);
  display: none;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--color-destructive); }
.field.has-error .field-error { display: block; }

.form-status {
  margin-block-start: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: #ECFDF5;
  color: var(--color-success);
  font-weight: 600;
  font-size: 0.9375rem;
  display: none;
}
.form-status.is-visible { display: block; }

.form-hint {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
  margin-block-start: var(--space-2);
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  text-align: center;
}
.cta-band h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 800; letter-spacing: -0.01em; }
.cta-band p { margin-block-start: var(--space-3); opacity: 0.92; max-width: 55ch; margin-inline: auto; }
.cta-band .hero-actions { justify-content: center; margin-block-start: var(--space-6); }
.cta-band .btn-outline { border-color: rgba(255,255,255,0.5); color: var(--color-primary-foreground); background: transparent; }
.cta-band .btn-outline:hover { background: rgba(255,255,255,0.14); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: #0A1E24;
  color: #C7DEE3;
  padding-block: var(--space-16) var(--space-8);
}

.footer-grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

.footer-brand { display: flex; align-items: center; margin-block-end: var(--space-4); }
.footer-logo { height: 38px; }
.site-footer p { font-size: 0.9375rem; line-height: 1.7; }

.footer-heading { color: #fff; font-weight: 700; font-size: 0.9375rem; margin-block-end: var(--space-4); }
.footer-links li { margin-block-end: var(--space-3); }
.footer-links a:hover { color: #fff; }

.footer-bottom {
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: space-between;
  font-size: 0.8125rem;
  color: #94A3B8;
}

.footer-legal-name {
  font-weight: 600;
  color: #CBD5E1;
}

/* ==========================================================================
   Floating WhatsApp button — flat, no shadow/pulse
   ========================================================================== */

.whatsapp-fab {
  position: fixed;
  bottom: var(--space-6);
  inset-inline-end: var(--space-6);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #1E9E52; /* darkened WhatsApp green for stronger flat contrast */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  transition: background-color var(--transition-fast);
}
.whatsapp-fab:hover { background: #17803F; }
.whatsapp-fab .icon { width: 30px; height: 30px; }

/* ==========================================================================
   Icon base
   ========================================================================== */

.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Phone numbers are LTR content inside an RTL page — isolate them so the
   digit groups and "+" prefix never get bidi-reordered/flipped. */
a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }

/* ==========================================================================
   Reveal-on-scroll (subtle, respects reduced motion)
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Clients marquee
   ========================================================================== */

.clients-section { padding-block: var(--space-8) var(--space-16); }
.clients-section .section-header { margin-block-end: var(--space-8); }

#scope .section-header { max-width: 780px; }

/* ==========================================================================
   Scope of work — the 3 real service divisions (cleaning, pest control,
   maintenance), each as a colored icon badge + matching wordmark.
   ========================================================================== */

.scope-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8) var(--space-12);
}

.scope-badge {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.scope-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.scope-icon .icon { width: 28px; height: 28px; color: #FFFFFF; }

.scope-wordmark {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}

.scope-label {
  font-size: 0.9375rem;
  color: var(--color-muted-foreground);
}

.marquee {
  overflow: hidden;
  padding-block: var(--space-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-12);
  animation-name: marquee-scroll;
  animation-duration: 32s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* In RTL, flex "row" lays the first item at the right edge and the track
   extends leftward into negative coordinates — the mirror image of LTR.
   Shifting translateX further negative (the LTR direction) moves the
   viewport into space where no content exists, going blank for most of
   the cycle. RTL needs the opposite sign to reveal the rest of the track. */
html[dir="rtl"] .marquee-track {
  animation-name: marquee-scroll-rtl;
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marquee-scroll-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  padding: var(--space-4) var(--space-6);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-muted-foreground);
  filter: grayscale(1);
  opacity: 0.8;
  transition: opacity var(--transition-base), filter var(--transition-base), color var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
}
.marquee-item:hover {
  filter: grayscale(0);
  opacity: 1;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.marquee-item .icon { width: 26px; height: 26px; }

/* Client logos arrive with mixed backgrounds (some transparent, some with
   baked-in white), so the chip is always white in both themes — otherwise
   the white-backed ones read as pale boxes against a dark card. */
.marquee-item-logo {
  padding: var(--space-3) var(--space-6);
  background: #FFFFFF;
  filter: none;
  opacity: 1;
}
.marquee-item-logo img { height: 34px; width: auto; display: block; }
.marquee-item-dark { background: #0A1E24; border-color: #0A1E24; }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track,
  html[dir="rtl"] .marquee-track { animation: none; }
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq-list {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-primary); }

.faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  transition: transform var(--transition-base);
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-item p {
  padding: 0 var(--space-6) var(--space-5);
  margin: 0;
  color: var(--color-muted-foreground);
  line-height: 1.7;
}

/* ==========================================================================
   Terms & Conditions / Privacy pages
   ========================================================================== */

.terms-body {
  max-width: 760px;
  margin-inline: auto;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

@media (min-width: 640px) {
  .terms-body { padding: var(--space-12); }
}

.terms-intro {
  color: var(--color-muted-foreground);
  font-size: 1.0625rem;
  padding-block-end: var(--space-6);
  margin-block-end: var(--space-6);
  border-block-end: 1px solid var(--color-border);
}

.terms-body h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-block: var(--space-8) var(--space-4);
}
.terms-body h2:first-of-type { margin-block-start: 0; }

.terms-body > p {
  color: var(--color-foreground);
  margin-block-end: var(--space-3);
}

.terms-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.terms-list li {
  position: relative;
  padding-inline-start: var(--space-6);
  color: var(--color-foreground);
  line-height: 1.7;
}

.terms-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-secondary);
}

.terms-back {
  margin-block-start: var(--space-8);
}

/* ==========================================================================
   الهيدر — إعادة ترتيب أولويات الشريط العلوي (2026-10-05)
   أثمن مساحة في الشاشة هي الشريط الثابت على الجوال. كانت تُنفَق على مفتاح
   الوضع الليلي بينما زر طلب السعر مخفي. هذه القواعد تعكس الترتيب.
   ========================================================================== */

/* زر طلب السعر: ظاهر على كل المقاسات، مضغوط على الجوال */
.header-cta {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 44px;
  padding-inline: var(--space-3);
  font-size: 0.875rem;
}
@media (min-width: 420px) { .header-cta { padding-inline: var(--space-4); } }

/* الوضع الليلي ينتقل داخل قائمة الجوال؛ يبقى في الشريط على الشاشات الكبيرة */
.theme-toggle { display: none; }
@media (min-width: 960px) { .theme-toggle { display: inline-flex; } }

/* نسخة الوضع الليلي داخل القائمة تأخذ شكل عناصر القائمة لا شكل الزر الدائري */
.theme-toggle-item {
  display: block;
  width: 100%;
  height: auto;
  text-align: inherit;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-foreground);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  cursor: pointer;
}
.theme-toggle-item:hover { background: var(--color-muted); }
@media (min-width: 960px) { .theme-toggle-item { display: none; } }

/* تبديل اللغة يبقى ظاهرًا بطلب المالك — مضغوط على الجوال */
.lang-switch { padding-inline: var(--space-3); }
@media (min-width: 960px) { .lang-switch { padding-inline: var(--space-4); } }

/* على الشاشات الضيقة جدًا يختصر الشعار لئلا يزاحم الزر */
@media (max-width: 380px) {
  .brand-logo { height: 34px; }
  .header-actions { gap: var(--space-1); }
}

/* زر القائمة ☰ كان يظهر على الكمبيوتر مع القائمة الكاملة: تعريف .nav-toggle
   في السطر ~385 يأتي بعد استعلام 960 فيلغي إخفاءه. هذه القاعدة الأخيرة تحسمه. */
@media (min-width: 960px) { .nav-toggle { display: none; } }

/* ==========================================================================
   حاسبة تسعير النظافة التأهيلية — صفحة calculator.html
   ========================================================================== */

.calc-page { padding-block-end: var(--space-24); }
.calc-form { max-width: 620px; margin-inline: auto;
  /* فراغ أسفل النموذج بقدر الشريط الثابت حتى لا يحجب آخر حقل */
  padding-block-end: calc(132px + env(safe-area-inset-bottom, 0px)); }
.calc-group { border: 0; padding: 0; margin: 0 0 var(--space-6); min-width: 0; }
.calc-group legend {
  font-size: 0.8125rem; font-weight: 700; color: var(--color-muted-foreground);
  padding: 0; margin-block-end: var(--space-2);
}
.calc-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.calc-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--color-border);
  min-width: 0;
}
.calc-row:first-child { border-block-start: 0; }
.calc-row > label, .calc-lbl { flex: 1; min-width: 0; font-weight: 500; }
.calc-hint {
  display: block; font-style: normal; font-size: 0.75rem; font-weight: 400;
  color: var(--color-muted-foreground); margin-block-start: 2px;
}
.calc-row.block { display: block; }
.calc-row.block input, .calc-row.block textarea {
  width: 100%; margin-block-start: var(--space-2);
}
.calc-row input, .calc-row select, .calc-row textarea {
  font-family: inherit; font-size: 1rem; color: var(--color-foreground);
  background: var(--color-background);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); min-height: 44px;
}
.calc-row input[type="number"] { width: 110px; }
.calc-row select { cursor: pointer; max-width: 60%; }
.calc-row textarea { min-height: 76px; line-height: 1.7; resize: vertical; }
.calc-row input:focus-visible, .calc-row select:focus-visible, .calc-row textarea:focus-visible {
  outline: 3px solid var(--color-ring); outline-offset: 1px;
}

.calc-step { display: flex; align-items: center; gap: var(--space-4); flex: none; }
/* ترتيب الـDOM (+ ثم - ) صحيح في العربية فقط؛ في الإنجليزية يُقلب
   ليصير - يسارًا و+ يمينًا كما يتوقع القارئ من اليسار لليمين. */
[dir="ltr"] .calc-step { flex-direction: row-reverse; }
.calc-step button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--color-background);
  color: var(--color-foreground); font-size: 1.25rem; line-height: 1;
  cursor: pointer; font-family: inherit;
}
.calc-step button:hover { border-color: var(--color-primary); background: var(--color-muted); }
.calc-step output { min-width: 24px; text-align: center; font-weight: 700; }

.calc-sw { position: relative; width: 48px; height: 28px; flex: none; }
.calc-sw input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.calc-sw > span {
  position: absolute; inset: 0; background: var(--color-border);
  border-radius: 999px; transition: background-color var(--transition-base); pointer-events: none;
}
.calc-sw > span::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 22px; height: 22px; background: #fff; border-radius: 50%;
  transition: transform var(--transition-base);
}
.calc-sw input:checked + span { background: var(--color-primary); }
/* الراحة عند بداية السطر منطقيًا، والحركة فيزيائية — فتلزم إزاحة معاكسة في RTL،
   وإلا خرج الزر من مساره كما كان يحدث في العربية. */
.calc-sw input:checked + span::after { transform: translateX(20px); }
[dir="rtl"] .calc-sw input:checked + span::after { transform: translateX(-20px); }

/* الشريط ثابت فوق كل شيء، فيلزم التذييل فراغ بقدره وإلا غطّى سطر الحقوق. */
.page-calc .site-footer { padding-block-end: calc(132px + env(safe-area-inset-bottom, 0px)); }
.calc-sw input:focus-visible + span { outline: 3px solid var(--color-ring); outline-offset: 2px; }

.calc-err { display: none; color: var(--color-destructive); font-size: 0.8125rem; margin-block-start: var(--space-1); }
.calc-err.is-on { display: block; }

.calc-note {
  max-width: 620px; margin: var(--space-6) auto 0;
  border-inline-start: 4px solid var(--color-primary);
  background: var(--color-muted);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9375rem; line-height: 1.8;
}

/* شريط الملخّص الثابت أسفل الشاشة */
.calc-bar {
  /* ثابت لا لاصق: الشريط آخر عنصر في <main>، فلا مجال تحته ليلتصق فيه.
     sticky كان يجعله يقف ساكنًا في آخر الصفحة بدل أن يرافق العميل. */
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  background: var(--color-background);
  border-block-start: 1px solid var(--color-border);
  padding-block: var(--space-3);
  padding-block-end: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}
.calc-bar-inner { display: flex; align-items: center; gap: var(--space-4); }
.calc-sum { flex: 1; min-width: 0; font-size: 0.8125rem; color: var(--color-muted-foreground); line-height: 1.6; margin: 0; }
.calc-sum b { color: var(--color-foreground); }
.calc-bar .btn { flex: none; }

/* بطاقات «من الموقع» في صفحة الأعمال — صورة فوق وسطر وصف تحتها */
.biz-shot { margin: 0; min-width: 0; }
/* عمودان على الجوال حتى لا يصير القسم شريطًا طويلًا */
.biz-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 900px) { .biz-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.biz-shot img {
  display: block; width: 100%; max-width: 100%; height: auto;
  aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-muted);
}
.biz-shot figcaption {
  margin-block-start: var(--space-3);
  font-size: 0.9375rem; line-height: 1.7;
  color: var(--color-muted-foreground);
}