/* ==========================================================================
   ABAAD SOIL & BUILDING MATERIAL TESTING LAB LLC — Website Stylesheet
   Brand: Deep engineering red #A6222E / Near-black #1A1A1A / White / Light grey #F5F5F5
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Kufi+Arabic:wght@400;500;600;700;800&family=Poppins:wght@700&display=swap');

:root{
  --red:#A6222E;
  --red-dark:#7E1A23;
  --black:#1A1A1A;
  --white:#FFFFFF;
  --grey:#F5F5F5;
  --grey-mid:#E3E3E3;
  --grey-text:#5A5A5A;
  --navy:#152A4E;
  --font:'Inter', 'Noto Kufi Arabic', Arial, sans-serif;
  --container:1240px;
  --radius:4px;
  --shadow: 0 4px 24px rgba(26,26,26,0.08);
  --shadow-lg: 0 12px 40px rgba(26,26,26,0.14);
  --transition: all .25s ease;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--black);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[dir="rtl"] body{font-family:'Noto Kufi Arabic','Inter',Arial,sans-serif;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5{margin:0 0 .5em;font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1.2;}
p{margin:0 0 1em;color:var(--grey-text);}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
section{position:relative;padding:88px 0;}
.section-alt{background:var(--grey);}
.section-dark{background:var(--black);color:var(--white);}
.section-dark p{color:#c9c9c9;}
button{font-family:inherit;cursor:pointer;}

/* ---------- Eyebrow / kicker ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--red);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:.8rem;margin-bottom:14px;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--red);display:inline-block;}
.section-head{max-width:760px;margin-bottom:52px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.5rem);}
.section-head p{font-size:1.05rem;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 30px;border-radius:var(--radius);font-weight:700;text-transform:uppercase;
  font-size:.85rem;letter-spacing:.06em;border:2px solid transparent;transition:var(--transition);
  white-space:nowrap;
}
.btn-primary{background:var(--red);color:var(--white);}
.btn-primary:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:var(--shadow);}
.btn-dark{background:var(--black);color:var(--white);}
.btn-dark:hover{background:#000;transform:translateY(-2px);}
.btn-outline{background:transparent;border-color:var(--black);color:var(--black);}
.btn-outline:hover{background:var(--black);color:var(--white);}
.btn-outline-light{background:transparent;border-color:var(--white);color:var(--white);}
.btn-outline-light:hover{background:var(--white);color:var(--black);}
.btn-sm{padding:9px 14px;font-size:.68rem;}
.btn-block{width:100%;}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.top-strip{
  background:var(--black);color:#ccc;font-size:.8rem;
}
.top-strip .container{display:flex;justify-content:space-between;align-items:center;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:6px;}
.top-strip a{color:#ccc;}
.top-strip .top-contact{display:flex;gap:20px;flex-wrap:wrap;}
.top-strip .top-contact span{display:inline-flex;align-items:center;gap:6px;}
.lang-switch{display:flex;gap:0;border:1px solid #444;border-radius:3px;overflow:hidden;}
.lang-switch button{background:transparent;color:#ccc;border:none;padding:3px 10px;font-size:.75rem;font-weight:600;}
.lang-switch button.active{background:var(--red);color:#fff;}

header.site-header{
  position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.97);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--grey-mid);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:var(--container);margin:0 auto;gap:20px;}
.logo-box{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo-mark{width:46px;height:46px;flex-shrink:0;}
.logo-text{display:flex;flex-direction:column;line-height:1.1;}
.logo-text .name-en{font-weight:900;font-size:1.15rem;letter-spacing:.03em;color:var(--black);}
.logo-text .name-ar{font-weight:700;font-size:.85rem;color:var(--red);font-family:'Noto Kufi Arabic',sans-serif;}
.logo-placeholder-tag{font-size:.55rem;color:#aaa;text-transform:uppercase;letter-spacing:.06em;font-weight:600;}

nav.main-nav{display:flex;align-items:center;gap:16px;}
nav.main-nav a{font-weight:600;font-size:.77rem;text-transform:uppercase;letter-spacing:.015em;padding:6px 0;border-bottom:2px solid transparent;transition:var(--transition);white-space:nowrap;}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--red);border-color:var(--red);}
.header-cta{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.header-phone{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;white-space:nowrap;}
.header-phone svg{fill:var(--red);width:18px;height:18px;}
.nav-toggle{display:none;background:none;border:none;padding:6px;}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--black);margin:5px 0;transition:var(--transition);}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;min-height:88vh;display:flex;align-items:center;color:var(--white);
  background:linear-gradient(120deg, rgba(20,20,20,.86), rgba(20,20,20,.55) 55%, rgba(166,34,46,.55)), var(--black);
  background-size:cover;background-position:center;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-10%;bottom:-20%;width:60%;height:140%;
  background:var(--red);opacity:.14;transform:skewX(-14deg);z-index:0;
}
.hero .container{position:relative;z-index:2;}
.hero-inner{max-width:760px;}
.hero-inner h1{font-size:clamp(2.1rem,4.6vw,3.6rem);color:var(--white);margin-bottom:20px;}
.hero-inner h1 span{color:#ffc94d;text-shadow:0 2px 10px rgba(0,0,0,.6);}
.hero-inner p.lead{font-size:1.15rem;color:#eee;max-width:620px;}
.hero-cta{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;}
.hero-badges{display:flex;gap:28px;margin-top:56px;flex-wrap:wrap;align-items:center;}
.hero-badge{display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fff;opacity:.92;}
.hero-badge .badge-icon{width:34px;height:34px;border:2px solid var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(255,255,255,.06);}
.hero-badge .badge-icon svg{width:16px;height:16px;fill:#fff;}

.hero-stats-strip{background:var(--red);color:#fff;}
.hero-stats-strip .container{display:flex;flex-wrap:wrap;justify-content:space-between;padding:22px 24px;gap:16px;}
.hero-stat{text-align:center;flex:1;min-width:140px;}
.hero-stat .num{font-size:1.9rem;font-weight:900;display:block;}
.hero-stat .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;opacity:.9;}

/* page header (non-home pages) */
.page-header{
  position:relative;color:var(--white);
  width:100%;aspect-ratio:2172/580;
  background:url('../images/page-banner.jpg') center top/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.page-header .container{
  position:relative;z-index:2;
  width:min(640px,70%);margin:0 auto;padding:0;text-align:center;
}
.page-header .eyebrow{color:#ffffff;font-size:.95rem;font-weight:800;letter-spacing:.15em;text-shadow:0 2px 10px rgba(0,0,0,.7);}
.page-header .eyebrow::before{background:#ff3b3b;height:3px;width:34px;}
.page-header h1{color:#fff;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.15;margin-bottom:8px;text-shadow:0 2px 10px rgba(0,0,0,.65);}
.page-header .breadcrumb{color:#ffffff;font-weight:700;font-size:.85rem;letter-spacing:.08em;text-shadow:0 2px 10px rgba(0,0,0,.8);}
.page-header .breadcrumb a{color:#ffffff;}
.page-header .container p:not(.breadcrumb):not(.eyebrow){color:#f0f0f0;font-size:.95rem;text-shadow:0 2px 10px rgba(0,0,0,.75);margin-top:10px;}
.page-header .quote{
  position:absolute;z-index:2;left:4%;max-width:480px;line-height:1.25;
  font-family:'Poppins',Arial,sans-serif;font-weight:700;
}
.page-header .quote span{font-size:clamp(1.3rem,2.6vw,2rem);display:block;}
.page-header .quote .l1{color:#d6414c;text-shadow:0 2px 6px rgba(0,0,0,.85),0 4px 18px rgba(0,0,0,.7);}
.page-header .quote .l2{color:#3a6690;text-shadow:0 2px 6px rgba(0,0,0,.85),0 4px 18px rgba(0,0,0,.7);}
.page-header .quote.qt-up{top:6%;}
.page-header .quote.qt-mid{top:38%;}
.page-header .quote.qt-down{bottom:14%;}
.breadcrumb{font-size:.8rem;color:#bbb;text-transform:uppercase;letter-spacing:.05em;}
.breadcrumb a{color:#bbb;}
.breadcrumb a:hover{color:var(--red);}

/* ==========================================================================
   CARDS / GRIDS
   ========================================================================== */
.grid{display:grid;gap:28px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.card{background:var(--white);border:1px solid var(--grey-mid);border-radius:var(--radius);padding:34px 28px;transition:var(--transition);}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--red);}
.card .icon{width:52px;height:52px;margin-bottom:18px;background:var(--grey);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.card .icon svg{width:26px;height:26px;fill:var(--red);}
.card h3{font-size:1.05rem;margin-bottom:10px;}
.card p{font-size:.92rem;margin-bottom:0;}

/* numbered badge cards (Our Promises / steps) */
.numbered-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.numbered-card{position:relative;background:var(--white);border:1px solid var(--grey-mid);padding:44px 28px 28px;border-top:4px solid var(--red);}
.numbered-card .num{
  position:absolute;top:-26px;left:28px;width:52px;height:52px;background:var(--black);color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.1rem;
  border:4px solid var(--white);
}
html[dir="rtl"] .numbered-card .num{left:auto;right:28px;}
.numbered-card h3{margin-top:6px;font-size:1.05rem;}

/* value / vision-mission cards */
.vmv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--grey-mid);}
.vmv-item{padding:38px 30px;border-right:1px solid var(--grey-mid);}
.vmv-item:last-child{border-right:none;}
html[dir="rtl"] .vmv-item{border-right:none;border-left:1px solid var(--grey-mid);}
html[dir="rtl"] .vmv-item:last-child{border-left:none;}
.vmv-item .tag{color:var(--red);font-weight:800;text-transform:uppercase;font-size:.78rem;letter-spacing:.1em;margin-bottom:12px;display:block;}
.vmv-item h3{font-size:1.2rem;}
.values-list{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:40px;}
.value-chip{background:var(--grey);border-left:4px solid var(--red);padding:16px 18px;font-weight:700;font-size:.85rem;text-align:center;text-transform:uppercase;letter-spacing:.02em;}
html[dir="rtl"] .value-chip{border-left:none;border-right:4px solid var(--red);}

/* ---------- Hexagon photo grid ---------- */
.hex-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:0 0;margin:0 auto;max-width:900px;}
.hex{
  width:220px;height:254px;margin:-22px 6px;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position:relative;overflow:hidden;background:var(--black);flex-shrink:0;
}
.hex img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:var(--transition);}
.hex:hover img{opacity:1;transform:scale(1.08);}
.hex .hex-label{
  position:absolute;bottom:18%;left:0;right:0;text-align:center;color:#fff;font-weight:700;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;padding:0 30px;
}
.hex-row-offset{margin-top:60px;}

/* ---------- About "Who We Are" feature quote ---------- */
.quote-feature{
  background:#fff;border:1px solid var(--grey-mid);
  border-radius:12px;padding:56px 48px;color:var(--navy);position:relative;
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:360px;
}
.quote-feature-mark{
  font-family:Georgia,'Times New Roman',serif;font-size:5.5rem;line-height:1;
  color:var(--navy);opacity:.18;font-weight:900;margin-bottom:-18px;
}
.quote-feature-text{
  font-size:1.55rem;font-weight:700;font-style:italic;line-height:1.45;
  max-width:400px;margin:0 0 26px;color:var(--navy);
}
.quote-feature-divider{width:56px;height:3px;background:var(--navy);opacity:.5;margin-bottom:18px;border-radius:2px;}
.quote-feature-attribution{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;opacity:.85;margin:0;color:var(--navy);}
@media (max-width:900px){
  .quote-feature{min-height:280px;padding:44px 30px;}
  .quote-feature-text{font-size:1.25rem;}
}
.hex.hex-quote{background:linear-gradient(135deg, var(--red), var(--red-dark));display:flex;align-items:center;justify-content:center;padding:0 40px;}
.hex.hex-quote .hex-quote-mark{position:absolute;top:20%;left:50%;transform:translateX(-50%);font-size:2.6rem;line-height:1;color:rgba(255,255,255,.35);font-weight:900;font-family:Georgia,serif;}
.hex.hex-quote .hex-quote-text{color:#fff;font-weight:700;font-size:.85rem;text-align:center;line-height:1.45;font-style:italic;}

/* ---------- Intro single-photo with stat badge (home "Who We Are") ---------- */
.intro-photo-wrap{position:relative;}
.intro-photo{border-radius:8px;overflow:hidden;aspect-ratio:4/3;}
.intro-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.intro-badge{
  position:absolute;left:-16px;bottom:-16px;background:var(--red);color:#fff;
  padding:16px 22px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.intro-badge .n{font-size:1.6rem;font-weight:900;display:block;line-height:1;}
.intro-badge .l{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;opacity:.9;}

/* ---------- Org chart ---------- */
.orgchart{display:flex;flex-direction:column;align-items:center;gap:0;}
.org-level{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;position:relative;margin-bottom:36px;width:100%;}
.org-node{
  background:var(--white);border:2px solid var(--black);padding:14px 20px;border-radius:var(--radius);
  font-weight:700;font-size:.82rem;text-align:center;text-transform:uppercase;letter-spacing:.02em;min-width:160px;
  box-shadow:var(--shadow);
}
.org-node.top{background:var(--black);color:#fff;border-color:var(--black);}
.org-node.accent{border-color:var(--red);}
.org-connector{width:2px;background:var(--grey-mid);height:28px;margin:0 auto 8px;}

/* ---------- Accordion ---------- */
.accordion-item{border:1px solid var(--grey-mid);margin-bottom:14px;border-radius:var(--radius);overflow:hidden;background:#fff;}
.accordion-head{
  display:flex;align-items:center;justify-content:space-between;padding:20px 24px;cursor:pointer;
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:.95rem;background:var(--white);
  transition:var(--transition);
}
.accordion-head:hover{background:var(--grey);}
.accordion-head .plus{width:26px;height:26px;border:2px solid var(--red);border-radius:50%;position:relative;flex-shrink:0;transition:var(--transition);}
.accordion-head .plus::before,.accordion-head .plus::after{content:"";position:absolute;background:var(--red);top:50%;left:50%;transform:translate(-50%,-50%);}
.accordion-head .plus::before{width:12px;height:2px;}
.accordion-head .plus::after{width:2px;height:12px;transition:var(--transition);}
.accordion-item.open .plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.accordion-item.open .accordion-head{background:var(--black);color:#fff;}
.accordion-item.open .accordion-head .plus{border-color:#fff;}
.accordion-item.open .accordion-head .plus::before{background:#fff;}
.accordion-body{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.accordion-body-inner{padding:6px 24px 26px;}
.test-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;}
.test-list li{position:relative;padding-left:20px;font-size:.92rem;color:var(--grey-text);}
.test-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--red);}
html[dir="rtl"] .test-list li{padding-left:0;padding-right:20px;}
html[dir="rtl"] .test-list li::before{left:auto;right:0;}

/* service category top cards */
.service-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:56px;}
.service-cat{background:var(--white);border:1px solid var(--grey-mid);border-bottom:4px solid var(--red);padding:30px 22px;text-align:center;}
.service-cat .icon{width:56px;height:56px;background:var(--black);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.service-cat .icon svg{width:26px;height:26px;fill:var(--white);}
.service-cat h3{font-size:.95rem;}
.service-cat p{font-size:.85rem;}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--grey-mid);}
table.data-table{width:100%;border-collapse:collapse;min-width:640px;background:#fff;}
table.data-table th{
  background:var(--black);color:#fff;text-align:left;padding:16px 20px;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.05em;
}
html[dir="rtl"] table.data-table th{text-align:right;}
table.data-table td{padding:14px 20px;border-bottom:1px solid var(--grey-mid);font-size:.9rem;color:var(--grey-text);}
table.data-table tr:nth-child(even) td{background:var(--grey);}
table.data-table tr:hover td{background:#f0e2e3;}

/* ---------- Gallery strip ---------- */
.gallery-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
.gallery-tile{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--black);aspect-ratio:4/3;cursor:zoom-in;}
.gallery-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1);display:block;}
.gallery-tile:hover img,.gallery-tile:focus-within img{transform:scale(1.12);}
.gallery-cap{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg, rgba(0,0,0,.92) 20%, rgba(0,0,0,.55) 65%, transparent);color:#fff;padding:16px;}
.gallery-cap .cap-title{display:block;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.02em;}
.gallery-cap .cap-desc{display:block;font-weight:400;font-size:.76rem;line-height:1.45;letter-spacing:.01em;text-transform:none;color:#e4e4e4;max-height:0;opacity:0;margin-top:0;overflow:hidden;transition:max-height .35s ease,opacity .3s ease,margin-top .3s ease;}
.gallery-tile:hover .gallery-cap .cap-desc,.gallery-tile:focus-within .gallery-cap .cap-desc{max-height:100px;opacity:1;margin-top:8px;}

/* ---------- Brand photo gallery (full, uncropped photos with native captions) ---------- */
.brand-gallery{columns:3 300px;column-gap:22px;margin-top:8px;}
.brand-gallery figure{margin:0 0 22px;break-inside:avoid;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.brand-gallery figure img{width:100%;height:auto;display:block;}
.brand-gallery figcaption{padding:14px 16px;border-left:3px solid var(--red);}
.brand-gallery figcaption .cap-title{display:block;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.02em;color:var(--black);}
.brand-gallery figcaption .cap-desc{display:block;font-weight:400;font-size:.8rem;line-height:1.5;color:#555;margin-top:6px;}
@media (max-width:700px){
  .brand-gallery{columns:2 220px;}
}
@media (max-width:480px){
  .brand-gallery{columns:1;}
}

/* ---------- Equipment ---------- */
.equip-subhead{font-size:1rem;color:var(--black);margin:0 0 20px;padding-left:14px;border-left:4px solid var(--red);}
.equip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.equip-item{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--grey-mid);padding:20px;border-radius:var(--radius);}
.equip-item .icon{width:40px;height:40px;background:var(--grey);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.equip-item .icon svg{width:20px;height:20px;fill:var(--red);}
.equip-item h4{font-size:.88rem;margin:0 0 4px;text-transform:none;font-weight:700;}
.equip-item p{font-size:.82rem;margin:0;}
.rig-card{background:var(--black);color:#fff;border-radius:var(--radius);overflow:hidden;}
.rig-card .photo{aspect-ratio:16/10;background:#2b2b2b;}
.rig-card .photo img{width:100%;height:100%;object-fit:cover;display:block;}
.rig-card .body{padding:22px;}
.rig-card h3{font-size:1rem;color:#fff;margin-bottom:6px;}
.rig-card .spec{font-size:.78rem;color:#ff8a94;text-transform:uppercase;font-weight:700;letter-spacing:.03em;}
.rig-card p{color:#ccc;font-size:.85rem;margin-top:8px;}

/* ---------- Machine spec cards ---------- */
.machine-card{background:#fff;border:1px solid var(--grey-mid);border-radius:var(--radius);padding:24px;}
.machine-card .cap{display:inline-block;background:var(--red);color:#fff;font-size:.72rem;font-weight:800;padding:4px 10px;border-radius:3px;text-transform:uppercase;margin-bottom:12px;}
.machine-card h3{font-size:.98rem;}

/* ---------- Tabs (projects/services) ---------- */
.tabs-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;}
.tab-btn{
  padding:12px 22px;border:2px solid var(--black);background:transparent;font-weight:700;
  text-transform:uppercase;font-size:.78rem;letter-spacing:.03em;border-radius:30px;transition:var(--transition);
}
.tab-btn.active,.tab-btn:hover{background:var(--black);color:#fff;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* project cards */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.project-card:not(:has(.photo)){order:1;}
.project-card{background:#fff;border:1px solid var(--grey-mid);border-radius:var(--radius);overflow:hidden;transition:var(--transition);}
.project-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.project-card .photo{aspect-ratio:16/10;background:var(--grey-mid);position:relative;}
.project-card .photo img{width:100%;height:100%;object-fit:cover;display:block;}
.project-card .photo.no-photo{display:none;}
.project-card .photo.photo-natural img{object-fit:contain;}
.project-card .year-tag{position:absolute;top:14px;right:14px;background:var(--red);color:#fff;font-weight:800;font-size:.75rem;padding:4px 10px;border-radius:3px;}
html[dir="rtl"] .project-card .year-tag{right:auto;left:14px;}
.project-card .body{padding:22px;}
.project-card h3{font-size:.98rem;margin-bottom:10px;text-transform:none;font-weight:800;}
.project-meta{font-size:.8rem;color:var(--grey-text);}
.project-meta div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--grey-mid);}
.project-meta div:last-child{border-bottom:none;}
.project-meta b{color:var(--black);font-weight:700;}

/* ---------- Logo marquee (homepage "trusted by" strip) ---------- */
.logo-marquee{
  overflow:hidden;position:relative;
  -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;align-items:center;gap:20px;width:max-content;
  animation:marquee-scroll 46s linear infinite;
}
.logo-marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
html[dir="rtl"] .marquee-track{animation-direction:reverse;}
.marquee-logo{
  flex:0 0 auto;width:260px;height:120px;background:var(--white);border:1px solid var(--grey-mid);
  border-radius:var(--radius);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px 22px;
  transition:var(--transition);
}
.marquee-logo:hover{border-color:var(--red);transform:translateY(-2px);}
.marquee-logo span{font-weight:800;font-size:.8rem;text-transform:uppercase;color:var(--black);letter-spacing:.01em;line-height:1.25;}
.marquee-logo img{max-width:100%;max-height:100%;object-fit:contain;}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
  .logo-marquee{overflow-x:auto;}
}

/* ---------- Client logo tiles ---------- */
.client-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.client-tile{
  background:#fff;border:1px solid var(--grey-mid);border-radius:var(--radius);height:110px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;transition:var(--transition);
}
.client-tile:hover{border-color:var(--red);box-shadow:var(--shadow);}
.client-tile span{font-weight:800;font-size:.82rem;text-transform:uppercase;color:var(--black);letter-spacing:.01em;line-height:1.25;}
.client-tile img{max-width:100%;max-height:100%;object-fit:contain;}

/* ---------- Certifications ---------- */
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.cert-card{background:#fff;border:1px solid var(--grey-mid);border-radius:var(--radius);padding:32px;text-align:center;}
.cert-badge{
  width:96px;height:96px;margin:0 auto 20px;border:3px solid var(--red);border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--grey);
}
.cert-badge svg{width:44px;height:44px;fill:var(--red);}
.cert-card h3{font-size:1rem;}
.cert-card .cert-no{display:inline-block;margin-top:10px;font-size:.78rem;background:var(--grey);padding:5px 12px;border-radius:3px;color:var(--black);font-weight:700;}
.cert-scan{display:block;margin-top:14px;border:1px solid var(--grey-mid);border-radius:4px;overflow:hidden;}
.cert-scan img{width:100%;height:180px;object-fit:cover;object-position:top;display:block;transition:var(--transition);}
.cert-scan:hover img{transform:scale(1.04);}
.cert-scan-label{display:block;margin-top:8px;font-size:.72rem;color:var(--grey-text);text-transform:uppercase;letter-spacing:.04em;font-weight:700;}

/* ---------- Placeholder tags (upload zones) ---------- */
.placeholder-img{
  position:relative;width:100%;height:100%;background:repeating-linear-gradient(45deg,#2a2a2a,#2a2a2a 10px,#232323 10px,#232323 20px);
  display:flex;align-items:center;justify-content:center;color:#bbb;
}
.placeholder-img .ph-inner{text-align:center;padding:14px;}
.placeholder-img svg{width:30px;height:30px;fill:#888;margin-bottom:8px;}
.placeholder-img .ph-text{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:#ccc;}
.placeholder-img .ph-sub{font-size:.6rem;color:#888;margin-top:4px;}
.upload-flag{
  display:inline-flex;align-items:center;gap:6px;background:#FFF7D6;color:#8a6d00;border:1px dashed #d8b800;
  padding:4px 10px;border-radius:3px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--red);color:#fff;padding:64px 0;position:relative;overflow:hidden;
}
.cta-band::before{content:"";position:absolute;left:-6%;top:-40%;width:40%;height:180%;background:#000;opacity:.12;transform:skewX(-14deg);}
.cta-band .container{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;}
.cta-band h2{color:#fff;margin:0;font-size:clamp(1.4rem,2.6vw,2rem);}
.cta-band p{color:#ffe1e4;margin:6px 0 0;}

/* ---------- Diagonal divider ---------- */
.diagonal-divider{height:70px;position:relative;overflow:hidden;}
.diagonal-divider svg{width:100%;height:100%;display:block;}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:20px;}
.form-group.full{grid-column:1/-1;}
.form-group label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--black);}
.form-group input,.form-group select,.form-group textarea{
  padding:13px 16px;border:1px solid var(--grey-mid);border-radius:var(--radius);font-family:inherit;font-size:.92rem;
  background:#fff;transition:var(--transition);color:var(--black);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(166,34,46,.12);}
.form-group textarea{resize:vertical;min-height:130px;}
.form-note{font-size:.78rem;color:#888;margin-top:6px;}
.form-status{margin-top:16px;font-size:.88rem;font-weight:600;padding:12px 16px;border-radius:var(--radius);display:none;}
.form-status.show{display:block;}
.form-status.success{background:#e7f6ea;color:#1c7a34;}
.form-status.error{background:#fdeceb;color:var(--red);}

/* ---------- Contact info blocks ---------- */
.contact-info-list{display:flex;flex-direction:column;gap:26px;}
.contact-info-item{display:flex;gap:16px;align-items:flex-start;}
.contact-info-item .icon{width:44px;height:44px;background:var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contact-info-item .icon svg{width:20px;height:20px;fill:#fff;}
.contact-info-item h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;}
.contact-info-item p{margin:0;font-size:.92rem;}
.map-embed{border:0;width:100%;height:340px;border-radius:var(--radius);filter:grayscale(15%);}
.hours-table{width:100%;border-collapse:collapse;margin-top:10px;}
.hours-table td{padding:8px 0;font-size:.88rem;border-bottom:1px solid var(--grey-mid);}
.hours-table td:first-child{padding-right:16px;}
.hours-table td:last-child{text-align:right;font-weight:700;color:var(--black);white-space:nowrap;}
html[dir="rtl"] .hours-table td:last-child{text-align:left;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer.site-footer{background:var(--black);color:#bbb;padding-top:70px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:50px;border-bottom:1px solid #333;}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.footer-logo .name-en{color:#fff;font-weight:900;font-size:1.1rem;}
.footer-logo .name-ar{color:var(--red);font-weight:700;font-size:.82rem;font-family:'Noto Kufi Arabic',sans-serif;}
.footer-col h4{color:#fff;font-size:.82rem;letter-spacing:.05em;margin-bottom:18px;}
.footer-col ul{display:flex;flex-direction:column;gap:11px;}
.footer-col a{font-size:.88rem;color:#bbb;transition:var(--transition);}
.footer-col a:hover{color:var(--red);}
.footer-col p{font-size:.88rem;color:#999;}
.footer-badges{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.footer-badge{width:50px;height:50px;border:1px solid #444;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.footer-badge svg{width:22px;height:22px;fill:#999;}
.social-row{display:flex;gap:10px;margin-top:16px;}
.social-row a{width:36px;height:36px;border:1px solid #444;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.social-row a:hover{background:var(--red);border-color:var(--red);}
.social-row svg{width:16px;height:16px;fill:#ccc;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:.8rem;color:#888;flex-wrap:wrap;gap:10px;}
.footer-bottom a{color:#888;}

/* ==========================================================================
   SCROLL REVEAL ANIMATION
   ========================================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.1s;}
.reveal-delay-2{transition-delay:.2s;}
.reveal-delay-3{transition-delay:.3s;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .service-cats{grid-template-columns:repeat(2,1fr);}
  .client-grid{grid-template-columns:repeat(4,1fr);}
  .project-grid,.equip-grid,.gallery-strip,.cert-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  nav.main-nav{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--white);flex-direction:column;
    justify-content:center;align-items:center;gap:26px;transform:translateX(-100%);transition:transform .35s ease;z-index:1200;}
  html[dir="rtl"] nav.main-nav{transform:translateX(100%);}
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav a{font-size:1.1rem;}
  .nav-toggle{display:block;z-index:1300;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .header-phone span.phone-txt{display:none;}
  .grid-2,.grid-3,.vmv-grid,.numbered-cards,.values-list,.footer-grid{grid-template-columns:1fr;}
  .vmv-item{border-right:none !important;border-left:none !important;border-bottom:1px solid var(--grey-mid);}
  .org-level{flex-direction:column;align-items:center;}
  .form-grid{grid-template-columns:1fr;}
  .top-strip .top-contact span:nth-child(3){display:none;}
}
@media (max-width:720px){
  .client-grid,.service-cats,.project-grid,.equip-grid,.gallery-strip,.cert-grid{grid-template-columns:1fr 1fr;}
  .test-list{grid-template-columns:1fr;}
  section{padding:60px 0;}
  .hex{width:150px;height:174px;margin:-15px 4px;}
}
@media (max-width:520px){
  .client-grid,.cert-grid{grid-template-columns:1fr;}
  .hero-stats-strip .container{justify-content:center;}
  .cta-band .container{flex-direction:column;text-align:center;}
  .intro-badge{left:0;padding:12px 16px;}
  .intro-badge .n{font-size:1.3rem;}
}