/* ============================================================
   ABH SERVICES — DESIGN TOKENS
   Palette grounded in trade/maintenance work: steel blue (brand,
   trust), safety orange (hi-vis, the color of the trade itself),
   warm sand (Saudi context) and paper for breathing room.
   ============================================================ */
:root{
  --ink:#12181f;
  --steel:#1f3345;
  --steel-light:#2c4a63;
  --steel-pale:#e7edf1;
  --sand:#efe7d8;
  --paper:#faf8f4;
  --white:#ffffff;
  --accent:#d8630f;
  --accent-dark:#b04f0c;
  --line: rgba(18,24,31,0.12);

  --font-display: "Archivo", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;

  --maxw: 1180px;
  --radius: 4px;
}

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

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--steel);
  line-height:1.12;
  margin:0 0 0.5em;
  font-weight:700;
}
h1{ font-size:clamp(2.1rem, 3.6vw, 3.4rem); font-weight:800; letter-spacing:-0.01em; }
h2{ font-size:clamp(1.6rem, 2.6vw, 2.3rem); }
h3{ font-size:1.4rem; }
p{ margin:0 0 1em; max-width:64ch; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--steel); color:var(--white);
  padding:0.75em 1.2em; z-index:200;
}
.skip-link:focus{ left:1em; top:1em; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.75em 1.5em;
  border-radius:var(--radius);
  font-weight:600;
  font-size:0.95rem;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn-accent{ background:var(--accent); color:var(--white); }
.btn-accent:hover{ background:var(--accent-dark); }
.btn-outline{ border-color:var(--steel); color:var(--steel); background:transparent; }
.btn-outline:hover{ background:var(--steel); color:var(--white); }
.btn-lg{ padding:0.9em 1.9em; font-size:1rem; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:28px;
  min-height:76px;
}
.logo{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.logo-img{ height:48px; width:auto; max-width:none; display:block; }
.logo-mark{
  width:14px; height:32px; background:var(--accent);
  transform:skewX(-12deg);
  flex:none;
}
.logo-text{ font-family:var(--font-display); font-size:1.25rem; color:var(--steel); }
.logo-text strong{ color:var(--accent); font-weight:800; }
.logo-text.light{ color:var(--white); }
.logo-text.light strong{ color:var(--accent); }

.main-nav ul{ display:flex; gap:28px; }
.main-nav > ul > li{ position:relative; }
.main-nav a{ font-weight:600; font-size:0.95rem; color:var(--steel); padding:8px 0; }
.main-nav a:hover{ color:var(--accent); }

.has-sub .sub-nav{
  position:absolute; top:100%; left:0;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  min-width:220px;
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity 150ms ease, transform 150ms ease;
  box-shadow:0 12px 24px rgba(18,24,31,0.08);
}
.has-sub:hover .sub-nav,
.has-sub:focus-within .sub-nav{
  opacity:1; visibility:visible; transform:translateY(0);
}
.sub-nav li a{ display:block; padding:8px 10px; border-radius:3px; font-weight:500; }
.sub-nav li a:hover{ background:var(--steel-pale); }

.header-cta{ display:flex; align-items:center; gap:18px; }
.header-phone{ font-weight:600; color:var(--steel); font-size:0.92rem; white-space:nowrap; }
.lang-toggle{
  display:flex; align-items:center; gap:4px; font-size:0.82rem; font-weight:700;
  background:var(--steel-pale); border:none; border-radius:100px; padding:6px 12px;
  cursor:pointer; color:var(--steel);
}
.lang-sep{ opacity:0.4; }
.lang-opt{ padding:1px 2px; opacity:0.5; }
.lang-opt.is-active{ opacity:1; color:var(--accent-dark); }

.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; border:none; background:transparent; cursor:pointer;
}
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--steel); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:0; position:relative; min-height:88vh; display:flex; align-items:flex-end; }
.hero-ksa-bg{
  background-image:
    linear-gradient(100deg, rgba(18,24,31,0.88) 0%, rgba(18,24,31,0.78) 38%, rgba(18,24,31,0.55) 62%, rgba(18,24,31,0.35) 100%),
    url("https://images.pexels.com/photos/12694176/pexels-photo-12694176.jpeg?auto=compress&cs=tinysrgb&w=1920&h=1080&fit=crop");
  background-size:cover;
  background-position:center 55%;
  background-repeat:no-repeat;
}
.hero-ksa-bg h1,
.hero-ksa-bg .hero-lede{ color:var(--white); }
.hero-ksa-bg .hero-tag{ color:#ffb27a; }
.hero-ksa-bg .hero-tags li{ background:rgba(255,255,255,0.12); color:var(--white); }
.hero-bg-overlay{ display:none; }
.hero-grid{
  display:flex; justify-content:center; width:100%;
  position:relative; z-index:1;
  padding-bottom:9vh;
}
.hero-copy{
  max-width:800px; text-align:center;
}
.hero-tag{
  font-weight:600; color:var(--accent-dark);
  margin-top:16px; margin-bottom:0; font-size:1.05rem;
  max-width:60ch; margin-left:auto; margin-right:auto;
}
.hero-lede{ font-size:1.08rem; color:#3a4552; margin-left:auto; margin-right:auto; }
.hero-actions{ display:flex; gap:14px; margin:34px 0 0; flex-wrap:wrap; justify-content:center; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.hero-tags li{
  font-size:0.82rem; font-weight:600; color:var(--steel);
  background:var(--steel-pale);
  padding:7px 12px; border-radius:100px;
}

/* ---------- Trust strip ---------- */
.trust-strip{ background:var(--steel); color:var(--white); padding:20px 0; overflow:hidden; }
.trust-strip-inner{ display:flex; align-items:center; gap:24px; }
.trust-strip-inner p{ margin:0; font-weight:700; white-space:nowrap; color:var(--accent); flex:none; }
.trust-marquee{
  display:flex; overflow:hidden; flex:1;
  mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.trust-track{
  display:flex; gap:28px; flex:none; padding-right:28px;
  animation:trust-scroll 28s linear infinite;
}
.trust-marquee span{
  font-size:0.9rem; font-weight:500; white-space:nowrap; opacity:0.9;
}
@keyframes trust-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-100%); }
}
@media (prefers-reduced-motion: reduce){
  .trust-track{ animation:none; }
  .trust-marquee{ overflow-x:auto; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{ padding:88px 0; }
.about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
.about-media img{ border-radius:var(--radius); aspect-ratio:4/5; object-fit:cover; }
.about-points{ display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.about-points li{ padding-left:20px; border-left:3px solid var(--accent); }
.about-points strong{ display:block; color:var(--steel); }

/* ============================================================
   OUR APPROACH
   ============================================================ */
.approach{ padding:88px 0; background:var(--bg-alt, #f6f4ef); }
.approach-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
.approach-media{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch;
}
.approach-img{ width:100%; height:100%; border-radius:var(--radius); object-fit:cover; box-shadow:0 18px 40px rgba(18,24,31,0.18); }
.approach-img-a, .approach-img-b{ aspect-ratio:3/4; margin-bottom:0; }
.approach-copy p{ margin-top:16px; }
.approach-copy p:first-of-type{ margin-top:14px; }

/* ============================================================
   HIGHLIGHTS
   ============================================================ */
.highlights{ background:var(--steel-pale); padding:44px 0; }
.highlights-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
}
.highlight-card{
  padding:0 24px; border-left:1px solid var(--line);
}
.highlight-card:first-child{ border-left:none; padding-left:0; }
.highlight-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; background:var(--accent); color:var(--white);
  border-radius:3px; font-size:1rem; margin-bottom:12px;
}
.highlight-card h4{ margin-bottom:6px; font-size:1.02rem; }
.highlight-card p{ font-size:0.88rem; color:#4c5560; margin:0; }

/* ============================================================
   SERVICES
   ============================================================ */
.services-intro{ text-align:center; padding:40px 0 8px; }
.services-intro p{ margin:0 auto; }

.service-block{ padding:64px 0; border-top:1px solid var(--line); }
.service-block.alt{ background:var(--sand); }
.service-grid{
  display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center;
}
.service-grid.reverse .service-media{ order:2; }
.service-media{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.service-media img{ border-radius:var(--radius); aspect-ratio:3/4; object-fit:cover; width:100%; }

.service-tab{
  display:inline-block; font-weight:700; font-size:0.8rem;
  color:var(--white); padding:6px 12px; border-radius:3px; margin-bottom:14px;
}
.tab-maintenance{ background:var(--accent); }
.tab-electrical{ background:#2c4a63; }
.tab-plumbing{ background:#3c6e71; }
.tab-cleaning{ background:#8a5a34; }
.tab-events{ background:#7a4b8f; }

.service-cols{ display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; margin:18px 0; }
.service-list{ display:flex; flex-direction:column; gap:9px; }
.service-list li{
  padding-left:18px; position:relative; font-size:0.95rem; color:#333d47;
}
.service-list li::before{
  content:""; position:absolute; left:0; top:0.55em;
  width:7px; height:7px; background:var(--accent);
}
.service-list.two-col{
  display:grid; grid-template-columns:1fr 1fr; gap:9px 20px; margin:18px 0;
}
.service-note{ font-size:0.9rem; color:#5a6470; border-left:3px solid var(--line); padding-left:14px; }
.cleaning-intro{ grid-template-columns:1fr 0.85fr; }
.service-copy-wide{ max-width:760px; }
.role-card.cleaning-intro-card{ align-self:start; max-width:none; flex:none; width:100%; }
.cleaning-intro-card img{ aspect-ratio:4/3; width:100%; object-fit:cover; object-position:50% 18%; }

/* ---------- Spec cards (trade sub-services) ---------- */
.spec-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:20px 0;
}
.spec-card{
  display:flex; align-items:center; gap:10px;
  background:var(--white); border:1px solid var(--line); border-radius:3px;
  padding:12px 14px; font-size:0.88rem; font-weight:600; color:var(--steel);
}
.service-block.alt .spec-card{ background:var(--paper); }
.spec-icon{ font-size:1.1rem; flex:none; }

/* ---------- Role cards (staffing, photo-led) ---------- */
.role-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:36px;
}
.role-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
  flex:1 1 calc(33.333% - 14px); max-width:calc(33.333% - 14px);
  transition:transform 180ms ease, box-shadow 180ms ease;
}
.role-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 28px rgba(18,24,31,0.1);
}
.service-block.alt .role-card{ background:var(--white); }
.role-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 18%; }
.role-card h4{ margin:16px 16px 4px; font-size:1.02rem; }
.role-card p{ margin:0 16px 16px; font-size:0.86rem; color:#5a6470; }

/* ============================================================
   INDUSTRIES
   ============================================================ */
.industries{ padding:80px 0; text-align:center; }
.industry-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:36px;
}
.industry-card{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:26px 14px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  font-weight:600; color:var(--steel); font-size:0.95rem;
}
.industry-icon{ font-size:1.8rem; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{ padding:80px 0; }
.testimonials h2{ text-align:center; margin-bottom:36px; }
.testimonial-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.testimonial-card{
  margin:0; background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; border-top:3px solid var(--accent);
}
.testimonial-card p{ font-size:0.95rem; color:#333d47; max-width:none; }
.testimonial-card footer{ margin-top:14px; font-size:0.84rem; font-weight:700; color:var(--steel); font-style:normal; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{ background:var(--steel); color:var(--white); padding:64px 0; }
.cta-band-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-band h2{ color:var(--white); margin:0; max-width:32ch; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding:88px 0; }
.contact-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; }
.contact-info dl div{ margin-bottom:16px; }
.contact-info dt{ font-size:0.8rem; font-weight:700; color:var(--accent-dark); text-transform:uppercase; letter-spacing:0.04em; }
.contact-info dd{ margin:2px 0 0; font-size:1.05rem; font-weight:600; color:var(--steel); }

.contact-form{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:32px; }
.form-row{ margin-bottom:18px; display:flex; flex-direction:column; gap:6px; }
.form-row label{ font-size:0.85rem; font-weight:600; color:var(--steel); }
.form-row input, .form-row select, .form-row textarea{
  font-family:var(--font-body); font-size:0.95rem;
  padding:0.7em 0.85em; border:1px solid var(--line); border-radius:3px; background:var(--paper);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:2px solid var(--accent); border-color:var(--accent); }
.form-row.two-up{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row.two-up > div{ display:flex; flex-direction:column; gap:6px; }
.form-status{ margin-top:14px; font-weight:600; color:var(--accent-dark); min-height:1.2em; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:#c7cdd4; padding:64px 0 0; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:48px;
}
.footer-brand p{ font-size:0.9rem; color:#9aa3ac; margin-top:12px; }
.footer-col h4{ color:var(--white); font-family:var(--font-display); font-size:1rem; margin-bottom:14px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:0.9rem; color:#c7cdd4; }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding:20px 0; font-size:0.82rem; color:#7d868f;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .main-nav, .header-cta{ display:none; }
  .nav-toggle{ display:flex; }

  .site-header.nav-open .main-nav{
    display:block; position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:16px 24px 24px;
  }
  .site-header.nav-open .main-nav ul{ flex-direction:column; gap:4px; }
  .site-header.nav-open .has-sub .sub-nav{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:none; padding-left:12px; display:none;
  }
  .site-header.nav-open .has-sub.open .sub-nav{ display:block; }
  .site-header.nav-open .header-cta{
    display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:12px;
  }

  .hero-grid, .about-grid, .approach-grid, .service-grid, .contact-grid{
    grid-template-columns:1fr; gap:32px;
  }
  .approach-media{ grid-template-columns:1fr 1fr; }
  .approach-img-b{ margin-bottom:0; }
  .service-grid.reverse .service-media{ order:0; }
  .service-cols, .service-list.two-col, .form-row.two-up{ grid-template-columns:1fr; }
  .spec-grid{ grid-template-columns:1fr 1fr; }
  .role-grid{ }
  .role-card{ flex-basis:calc(50% - 10px); max-width:calc(50% - 10px); }
  .testimonial-grid{ grid-template-columns:1fr 1fr; }
  .highlights-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .highlight-card{ border-left:none; padding-left:0; }
  .industry-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .cta-band-inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 520px){
  .industry-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .spec-grid, .testimonial-grid, .highlights-grid{ grid-template-columns:1fr; }
  .role-card{ flex-basis:100%; max-width:100%; }

  .hero{ min-height:70vh; padding:0; }
  .hero-grid{ padding-bottom:6vh; }
  .trust-strip{ padding:16px 0; }
  .trust-strip-inner{ gap:14px; }
  .about{ padding:56px 0; }
  .service-block{ padding:44px 0; }
  .industries, .testimonials, .contact{ padding:56px 0; }
  .contact-form{ padding:22px; }
  .cta-band{ padding:44px 0; }
  .logo-text{ font-size:1.1rem; }
}

/* ============================================================
   RTL (Arabic) SUPPORT
   ============================================================ */
[dir="rtl"] body{ font-family:"Tahoma","Segoe UI",var(--font-body,sans-serif); }
[dir="rtl"] .about-points li{ padding-left:0; padding-right:20px; border-left:none; border-right:3px solid var(--accent); }
[dir="rtl"] .highlight-card{ border-left:none; padding-left:24px; border-right:1px solid var(--line); padding-right:24px; }
[dir="rtl"] .highlight-card:first-child{ border-right:none; padding-right:0; }
[dir="rtl"] .service-note{ border-left:none; padding-left:0; border-right:3px solid var(--line); padding-right:14px; }
[dir="rtl"] .trust-track{ animation-direction:reverse; }
@media (max-width:520px){
  [dir="rtl"] .highlight-card{ border-right:none; padding-right:0; }
}