/* Bab Al Hadi Technical Services LLC
   Design system: "above grade / below grade".
   Palette drawn from the company mark (gold) and site materials
   (excavated sand, wet concrete, bitumen). */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-stretch:80% 105%;
  font-display:swap;
  src:url('/assets/fonts/archivo-latin-var.woff2') format('woff2');
}

:root{
  /* surfaces */
  --sand:      #E7E3D8;
  --sand-2:    #DCD6C8;
  --concrete:  #C9C5BB;
  --bitumen:   #201C17;
  --subsoil:   #2C261F;
  --sub-2:     #3A3229;

  /* ink */
  --ink:       #16130F;
  --body:      #4A4137;
  --body-dk:   #C3B9A9;
  --line:      #C2BBAC;
  --line-dk:   #4A4137;

  /* brand gold, sampled from the mark */
  --gold:      #B8862F;
  --gold-lt:   #D9A94B;
  --gold-pale: #EBD9A8;

  --wrap: 1180px;
  --r: 3px;
  --rhythm: 56px;

  --step-0: clamp(1rem, .96rem + .18vw, 1.075rem);
  --step-1: clamp(1.18rem, 1.1rem + .34vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.3rem + .66vw, 1.85rem);
  --step-3: clamp(1.8rem, 1.55rem + 1.15vw, 2.6rem);
  --step-4: clamp(1.95rem, 1.6rem + 2.1vw, 3.5rem);
}

@media (min-width:768px){ :root{ --rhythm:74px; } }

*,*::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:.001ms!important; transition-duration:.001ms!important; }
}

body{
  margin:0;
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-variation-settings:'wdth' 100;
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--body);
  background:var(--sand);
  padding-block-end:64px; /* clears the dock */
}
@media (min-width:768px){ body{ padding-block-end:0; } }

img{ max-width:100%; height:auto; display:block; }
picture{ display:contents; }
a{ color:inherit; }

h1,h2,h3,h4{
  color:var(--ink);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.018em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:var(--step-4); font-variation-settings:'wdth' 88; font-weight:700; }
h2{ font-size:var(--step-3); font-variation-settings:'wdth' 92; }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); }
p{ margin:0 0 1em; max-width:68ch; }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
@media (min-width:768px){ .wrap{ width:min(100% - 72px, var(--wrap)); } }

.skip{
  position:absolute; inset-block-start:-100px; inset-inline-start:12px; z-index:200;
  background:var(--gold); color:var(--ink); padding:10px 16px; border-radius:var(--r);
  font-weight:600; text-decoration:none;
}
.skip:focus{ inset-block-start:12px; }

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

/* ---------- header ---------- */

.head{
  position:sticky; inset-block-start:0; z-index:100;
  background:var(--bitumen);
  border-block-end:1px solid var(--sub-2);
}
.head__in{ display:flex; align-items:center; gap:20px; min-height:66px; }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-inline-end:auto; }
.brand__mark{ width:40px; height:40px; object-fit:contain; }
.brand__name{
  display:flex; flex-direction:column; line-height:1.06;
  color:var(--gold-pale); font-weight:700; font-size:1.02rem;
  font-variation-settings:'wdth' 92; letter-spacing:.01em;
}
.brand__sub{
  color:var(--body-dk); font-weight:400; font-size:.66rem;
  letter-spacing:.09em; opacity:.8;
}

.nav{ display:none; gap:22px; }
.nav a{
  color:var(--body-dk); text-decoration:none; font-size:.88rem;
  padding-block:6px; border-block-end:2px solid transparent;
}
.nav a:hover, .nav a.on{ color:#fff; border-block-end-color:var(--gold); }

.head__call{
  display:none; text-decoration:none; color:var(--ink); background:var(--gold-lt);
  font-weight:600; font-size:.88rem; padding:9px 15px; border-radius:var(--r);
}
.head__call:hover{ background:var(--gold-pale); }

@media (min-width:1000px){
  .nav{ display:flex; }
  .head__call{ display:inline-block; }
}

.burger{
  display:grid; place-content:center; gap:5px; width:42px; height:42px;
  background:none; border:1px solid var(--sub-2); border-radius:var(--r); cursor:pointer;
}
.burger span{ display:block; width:19px; height:2px; background:var(--gold-pale); }
@media (min-width:1000px){ .burger{ display:none; } }

/* off-canvas drawer, below 1000px */
@media (max-width:999px){
  .nav{
    display:flex; flex-direction:column; gap:0;
    position:fixed; inset-block:0; inset-inline-start:0;
    width:min(84vw,330px); z-index:140;
    background:var(--subsoil); border-inline-end:1px solid var(--sub-2);
    padding:24px 26px 86px; /* clears the fixed dock */
    transform:translateX(-100%);
    visibility:hidden;
    transition:transform .38s cubic-bezier(.32,.72,0,1), visibility 0s linear .38s;
    overflow-y:auto; overscroll-behavior:contain;
    box-shadow:none;
  }
  .head.open .nav{
    transform:translateX(0); visibility:visible; box-shadow:0 0 60px rgba(0,0,0,.5);
    transition:transform .38s cubic-bezier(.32,.72,0,1), visibility 0s;
  }
  .nav a{
    font-size:1.06rem; padding-block:15px;
    border-block-end:1px solid var(--sub-2); border-block-start:0;
  }
  .nav a:first-of-type{ border-block-start:1px solid var(--sub-2); }
  .nav__tel{ border-block-start:0!important; }
  .nav a:hover,.nav a.on{ border-block-end-color:var(--sub-2); color:var(--gold-lt); }
}

.nav__brand{
  display:none; align-items:center; gap:10px;
  color:var(--gold-pale); font-weight:700; font-size:1.05rem;
  margin-block-end:22px;
}
.nav__brand img{ width:34px; height:34px; object-fit:contain; }
.nav__tel{
  margin-block-start:auto; padding-block:18px 0!important;
  border-block-end:0!important; color:var(--gold-lt)!important;
  font-weight:600;
}
@media (max-width:999px){ .nav__brand{ display:flex; } }
@media (min-width:1000px){ .nav__tel{ display:none; } }

.nav__close{
  position:absolute; inset-block-start:16px; inset-inline-end:16px;
  width:40px; height:40px; line-height:1; font-size:1.9rem;
  background:none; border:1px solid var(--sub-2); border-radius:var(--r);
  color:var(--gold-pale); cursor:pointer;
}
@media (min-width:1000px){ .nav__close{ display:none; } }

.scrim{
  position:fixed; inset:0; z-index:130; background:rgba(12,10,8,.62);
  opacity:0; transition:opacity .38s ease; backdrop-filter:blur(2px);
}
.scrim[hidden]{ display:none; }
.head.open .scrim{ opacity:1; }
body.locked{ overflow:hidden; }

/* ---------- hero: above grade / below grade ---------- */

.hero{ background:var(--bitumen); }

.hero__sky{ position:relative; isolation:isolate; }
.hero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%; z-index:-2;
}
.hero__sky::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(178deg, rgba(20,17,13,.62) 0%, rgba(20,17,13,.78) 52%, rgba(32,28,23,.95) 100%);
}
.hero__copy{ padding-block:clamp(72px,13vw,148px) clamp(48px,8vw,86px); }
.hero h1{ color:#fff; max-width:21ch; }
.hero__lede{
  color:var(--body-dk); font-size:var(--step-1); max-width:52ch;
  margin-block:22px 30px; line-height:1.5;
}

.hero__act{ display:flex; flex-wrap:wrap; gap:12px; }
.btn{
  display:inline-block; text-decoration:none; font-weight:600; font-size:.95rem;
  padding:14px 24px; border-radius:var(--r); border:1px solid transparent;
}
.btn--gold{ background:var(--gold-lt); color:var(--ink); }
.btn--gold:hover{ background:var(--gold-pale); }
.btn--ghost{ border-color:rgba(235,217,168,.42); color:var(--gold-pale); }
.btn--ghost:hover{ border-color:var(--gold-lt); background:rgba(217,169,75,.1); }

/* the finished ground level */
.grade{ position:relative; height:10px; background:var(--bitumen); overflow:hidden; }
.grade__line{
  position:absolute; inset-block-start:3px; inset-inline-start:0;
  height:3px; width:100%; background:var(--gold);
  transform-origin:left center;
}
@media (prefers-reduced-motion:no-preference){
  .grade__line{ animation:grade 1.15s cubic-bezier(.16,.84,.34,1) .15s both; }
  @keyframes grade{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
}

.hero__specs{ background:var(--subsoil); }
.specs{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--sub-2); border-inline:1px solid var(--sub-2);
}
@media (min-width:860px){ .specs{ grid-template-columns:repeat(4,1fr); } }
.spec{ background:var(--subsoil); padding:26px 22px 28px; }
.spec b{
  display:block; color:var(--gold-pale); font-size:clamp(1.5rem,1.2rem+1.3vw,2.05rem);
  font-weight:700; font-variation-settings:'wdth' 86; letter-spacing:-.02em; line-height:1.05;
}
.spec span{
  display:block; margin-block-start:9px; color:var(--body-dk);
  font-size:.82rem; line-height:1.4; max-width:22ch;
}

/* ---------- bands ---------- */

.band{ padding-block:var(--rhythm); }
.band--sand{ background:var(--sand); }
.band--dark{ background:var(--bitumen); color:var(--body-dk); }
.band--dark h2,.band--dark h3,.band--dark h4{ color:#fff; }

.band h2{ margin-block-end:.35em; }
.intro{ font-size:var(--step-1); max-width:60ch; margin-block-end:44px; line-height:1.5; }
.band--sand .intro{ color:var(--body); }
.sub{
  margin-block:48px 22px; padding-block-end:10px;
  border-block-end:1px solid var(--line); font-size:var(--step-1); font-weight:600;
}
.sub:first-of-type{ margin-block-start:8px; }

/* ---------- what we build ---------- */

.ticks{ list-style:none; margin:18px 0 0; padding:0; }
.ticks li{
  position:relative; padding-inline-start:22px; padding-block:7px;
  border-block-end:1px solid var(--line);
}
.band--dark .ticks li{ border-block-end-color:var(--line-dk); }
.ticks li::before{
  content:''; position:absolute; inset-inline-start:0; inset-block-start:16px;
  width:9px; height:2px; background:var(--gold);
}

/* ---------- gallery ---------- */

.g{ margin:0; background:var(--subsoil); border-radius:var(--r); overflow:hidden; }
.g img{ width:100%; object-fit:cover; object-position:center 40%; }
.g figcaption{
  padding:11px 14px 13px; font-size:.8rem; color:var(--body-dk); line-height:1.35;
}

/* carousel: phone and tablet */
@media (max-width:859px){
  .galwrap{ position:relative; }
  .gallery{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-behavior:smooth; overscroll-behavior-x:contain;
    padding-block-end:4px; margin-inline:-20px; padding-inline:20px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .gallery::-webkit-scrollbar{ display:none; }
  .g{ flex:0 0 clamp(255px,78%,420px); scroll-snap-align:center; display:flex; flex-direction:column; }
  .g img{ height:218px; flex:0 0 auto; }
  .g figcaption{ flex:1 1 auto; }
  .dots{ display:flex; justify-content:center; gap:2px; margin-block-start:12px; }
  .dot{
    width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer;
    display:grid; place-items:center;
  }
  .dot::before{
    content:''; width:7px; height:7px; border-radius:50%;
    background:var(--sub-2);
    transition:background .25s ease, width .25s ease;
  }
  .dot.on::before{ background:var(--gold-lt); width:20px; border-radius:4px; }
}

/* grid: desktop */
@media (min-width:860px){
  .gallery{ display:grid; gap:14px; grid-template-columns:repeat(6,1fr); margin-block-start:8px; }
  .g{ display:flex; flex-direction:column; }
  .g img{ flex:0 0 auto; }
  .g--wide{ grid-column:span 3; }
  .g--wide img{ height:264px; }
  .g--third{ grid-column:span 2; }
  .g--third img{ height:212px; }
  .g--full{ grid-column:span 6; }
  .g--full img{ height:300px; object-position:center 55%; }
  .dots{ display:none; }
}

.meta{ margin:0; display:grid; gap:7px; align-content:start; }
.meta > div{ display:flex; flex-wrap:wrap; gap:0 10px; font-size:.85rem; }
.meta dt{ flex:0 0 auto; min-width:112px; color:#5C5248; }
.meta dd{ margin:0; flex:1 1 180px; color:var(--ink); font-weight:600; }
.band--dark .meta dt{ color:var(--body-dk); }
.band--dark .meta dd{ color:#fff; }
.meta--stack{ gap:14px; margin-block-start:20px; }
.meta--stack > div{ flex-direction:column; flex-wrap:nowrap; gap:3px; }
.meta--stack dt{ min-width:0; font-size:.78rem; letter-spacing:.03em; }
.meta--stack dd{ flex:0 0 auto; }

/* ---------- team ---------- */

.cols2{ display:grid; gap:40px; }
@media (min-width:860px){ .cols2{ grid-template-columns:1fr 1fr; gap:56px; align-items:start; } }
.cols2 + .cols2{ margin-block-start:56px; padding-block-start:44px; border-block-start:1px solid var(--line); }

/* ---------- contact ---------- */

.contact{ display:grid; gap:14px; }
@media (min-width:760px){ .contact{ grid-template-columns:repeat(3,1fr); } }
.ccard{
  display:block; text-decoration:none; padding:24px 22px 22px;
  background:var(--subsoil); border-radius:var(--r);
  border:1px solid var(--sub-2);
}
a.ccard:hover{ border-color:var(--gold); background:#332B23; }
.ccard__k{ display:block; font-size:.76rem; color:var(--body-dk); letter-spacing:.05em; }
.ccard strong{
  display:block; margin-block:9px 7px; color:var(--gold-pale);
  font-size:1.02rem; font-weight:600; line-height:1.3; overflow-wrap:anywhere;
}
.ccard__h{ display:block; font-size:.8rem; color:var(--body-dk); }

/* ---------- footer ---------- */

.foot{ background:var(--subsoil); color:var(--body-dk); padding-block:46px 40px; }
.foot__in{ display:grid; gap:30px; }
@media (min-width:820px){ .foot__in{ grid-template-columns:1.4fr 1fr 1fr; gap:40px; } }
.foot__logo{ width:auto; max-width:230px; height:auto; margin-block-end:16px; }
.foot__addr{ font-size:.85rem; line-height:1.6; margin:0; }
.foot__nav{ display:flex; flex-direction:column; gap:9px; font-size:.88rem; }
.foot__nav a{ text-decoration:none; }
.foot__nav a:hover{ color:#fff; }
.foot__meta{ font-size:.88rem; }
.foot__meta a{ color:var(--gold-pale); text-decoration:none; }
.foot__meta a:hover{ text-decoration:underline; }
.foot__by{ margin-block-start:16px; font-size:.8rem; opacity:.85; }
.foot__by a{ color:inherit; text-decoration:underline; }

/* ---------- sticky dock (mobile) ---------- */

.dock{
  position:fixed; inset-block-end:0; inset-inline:0; z-index:120;
  display:grid; grid-template-columns:1.6fr 1fr; gap:1px;
  background:var(--sub-2); border-block-start:1px solid var(--sub-2);
}
@media (min-width:768px){ .dock{ display:none; } }
.dock__b{
  display:flex; align-items:center; justify-content:center; min-height:56px;
  text-decoration:none; font-weight:600; font-size:.95rem;
}
.dock__b--call{ background:var(--gold-lt); color:var(--ink); }

/* ---------- map ---------- */

.mapgrid{ display:grid; gap:20px; }
@media (min-width:880px){ .mapgrid{ grid-template-columns:1.55fr 1fr; gap:32px; align-items:stretch; } }
.mapbox{
  position:relative; min-height:300px; border-radius:var(--r); overflow:hidden;
  background:var(--sand-2); border:1px solid var(--line);
}
@media (min-width:880px){ .mapbox{ min-height:400px; } }
.mapbox iframe{ position:absolute; inset:0; width:100%; height:100%; }
.mapside{
  background:var(--bitumen); color:var(--body-dk);
  border-radius:var(--r); padding:28px 26px 26px;
  display:flex; flex-direction:column;
}
.mapside h3{ color:#fff; margin-block-end:.5em; }
.mapside p{ font-size:.95rem; line-height:1.65; margin-block-end:0; }
.mapside .meta--stack{ margin-block-start:22px; }
.mapside .meta--stack dt{ color:var(--body-dk); opacity:.8; }
.mapside .meta--stack dd{ color:#fff; }
.btn--dark{
  align-self:flex-start; margin-block-start:26px;
  border-color:rgba(235,217,168,.42); color:var(--gold-pale); font-size:.9rem; padding:12px 20px;
}
.btn--dark:hover{ border-color:var(--gold-lt); background:rgba(217,169,75,.1); }

/* ---------- services grid ---------- */

.svcgrid{ display:grid; gap:16px; grid-template-columns:1fr; margin-block-start:6px; }
@media (min-width:640px){ .svcgrid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .svcgrid{ grid-template-columns:repeat(3,1fr); gap:18px; } }
.svc{
  background:var(--subsoil); border:1px solid var(--sub-2); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
}
.svc picture img{ width:100%; height:186px; object-fit:cover; flex:0 0 auto; }
.svc__body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1 1 auto; }
.svc h3{ font-size:var(--step-1); margin-block-end:.45em; }
.svc p{ font-size:.92rem; margin-block-end:14px; }
.mini{ list-style:none; margin:auto 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.mini li{
  font-size:.74rem; letter-spacing:.01em; color:var(--gold-pale);
  border:1px solid var(--sub-2); border-radius:99px; padding:4px 10px;
}

/* ---------- mission / vision ---------- */

.mv{ background:var(--sand-2); border-radius:var(--r); padding:26px 26px 22px; }
.mv h3{ font-size:var(--step-1); margin-block-end:.4em; }
.mv h3 + p{ margin-block-end:1.2em; }
.mv p:last-child{ margin-block-end:0; }

/* ---------- core values ---------- */

.vlist{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
@media (min-width:700px){ .vlist{ grid-template-columns:1fr 1fr; column-gap:48px; } }
@media (min-width:1040px){ .vlist{ grid-template-columns:repeat(3,1fr); column-gap:36px; } }
.vlist li{
  padding-block:13px; border-block-end:1px solid var(--line);
  font-size:.92rem; line-height:1.5;
}
.vlist b{ display:block; color:var(--ink); font-weight:600; }

/* ---------- automatic doors ---------- */

.doorgrid{ display:grid; gap:26px; }
@media (min-width:880px){ .doorgrid{ grid-template-columns:1.25fr 1fr; gap:44px; align-items:start; } }
.doorlist{ margin-block-start:0; }
@media (min-width:560px){ .doorlist{ display:grid; grid-template-columns:1fr 1fr; column-gap:36px; } }
.doorcta{
  background:var(--bitumen); color:var(--body-dk);
  border-radius:var(--r); padding:28px 26px 26px;
}
.doorcta h3{ color:#fff; margin-block-end:.45em; }
.doorcta p{ font-size:.95rem; margin-block-end:20px; }

/* ---------- why choose us ---------- */

.whygrid{ display:grid; gap:0 44px; margin-block-start:10px; }
@media (min-width:700px){ .whygrid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .whygrid{ grid-template-columns:repeat(3,1fr); column-gap:36px; } }
.why{ padding-block:20px; border-block-start:2px solid var(--gold); margin-block-start:-2px; }
.why:first-child{ margin-block-start:0; }
.why h3{ font-size:var(--step-1); margin-block-end:.35em; }
.why p{ font-size:.92rem; margin-block-end:0; }

/* ---------- contact on a light band ---------- */

.contact--light .ccard{ background:var(--sand-2); border-color:var(--line); }
.contact--light a.ccard:hover{ border-color:var(--gold); background:#D3CCBC; }
.contact--light .ccard__k{ color:#5C5248; }
.contact--light .ccard strong{ color:var(--ink); }
.contact--light .ccard__h{ color:#5C5248; }
.who{ margin-block-start:26px; font-size:.95rem; }
.who b{ color:var(--ink); }

/* ---------- WhatsApp dock button ---------- */

.dock__b--wa{ background:#1F7A4C; color:#fff; }