/* =========================================================
   BUILDX — main stylesheet entry
   ========================================================= */
@import url("./tokens.css");
@import url("./components.css");
@import url("./rtl.css");

/* Fonts (Manrope + Tajawal) */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

/* Concept imagery — used in lieu of licensed photography.  These are SVG-based
   illustrations rendered as data URIs via background-image. Each section sets
   its own --img variable so the same component can take different visuals. */
:root {
  --img-hero-1: url("../img/hero-1.webp");
  --img-hero-2: url("../img/hero-2.webp");
  --img-editorial-1: url("../img/editorial-1.webp");
  --img-spotlight-roads: url("../img/spotlight-roads.webp");
  --img-cta-1: url("../img/cta-1.webp");
  --img-group-1: url("../img/group-1.webp");
  --img-quality-1: url("../img/quality-1.webp");
  --img-infrastructure-1: url("../img/infrastructure-1.webp");
  --img-bridges-1: url("../img/bridges-1.webp");
  --img-civil-1: url("../img/civil-1.webp");
  --img-construction-1: url("../img/construction-1.webp");
  --img-procurement-1: url("../img/procurement-1.webp");
  --img-pm-1: url("../img/pm-1.webp");
  --img-tradehub-1: url("../img/tradehub-1.webp");
  --img-news-1: url("../img/news-1.webp");
  --img-news-2: url("../img/news-2.webp");
  --img-news-3: url("../img/news-3.webp");
  --img-careers-1: url("../img/careers-1.webp");
  --img-contact-1: url("../img/contact-1.webp");
  --img-rfp-1: url("../img/rfp-1.webp");
  --img-project-1: url("../img/project-1.webp");
  --img-project-2: url("../img/project-2.webp");
  --img-project-3: url("../img/project-3.webp");
  --img-project-4: url("../img/project-4.webp");
  --img-project-5: url("../img/project-5.webp");
  --img-project-6: url("../img/project-6.webp");
}

/* Apply imagery to components that reference the variables */
.bx-hero__media { background-image: var(--img-hero-1); }
.bx-subhero__media { background-image: var(--img-hero-1); }
.bx-editorial__media { background-image: var(--img-editorial-1); }
.bx-spotlight__bg   { background-image: var(--img-spotlight-roads); }
.bx-cta__bg         { background-image: var(--img-cta-1); }
.bx-group__visual   { background-image: var(--img-group-1); }

/* service tile backgrounds (set per tile) */
.bx-service[data-bg="roads"]::before          { background-image: var(--img-spotlight-roads); }
.bx-service[data-bg="construction"]::before   { background-image: var(--img-construction-1); }
.bx-service[data-bg="infrastructure"]::before { background-image: var(--img-infrastructure-1); }
.bx-service[data-bg="bridges"]::before        { background-image: var(--img-bridges-1); }
.bx-service[data-bg="civil"]::before          { background-image: var(--img-civil-1); }
.bx-service[data-bg="pm"]::before             { background-image: var(--img-pm-1); }
.bx-service[data-bg="procurement"]::before    { background-image: var(--img-procurement-1); }
.bx-service[data-bg="tradehub"]::before       { background-image: var(--img-tradehub-1); }

/* project card backgrounds */
.bx-project[data-bg="p1"] .bx-project__media { background-image: var(--img-project-1); }
.bx-project[data-bg="p2"] .bx-project__media { background-image: var(--img-project-2); }
.bx-project[data-bg="p3"] .bx-project__media { background-image: var(--img-project-3); }
.bx-project[data-bg="p4"] .bx-project__media { background-image: var(--img-project-4); }
.bx-project[data-bg="p5"] .bx-project__media { background-image: var(--img-project-5); }
.bx-project[data-bg="p6"] .bx-project__media { background-image: var(--img-project-6); }

/* insight card covers */
.bx-insight[data-bg="n1"] .bx-insight__cover { background-image: var(--img-news-1); background-size: cover; background-position: center; }
.bx-insight[data-bg="n2"] .bx-insight__cover { background-image: var(--img-news-2); background-size: cover; background-position: center; }
.bx-insight[data-bg="n3"] .bx-insight__cover { background-image: var(--img-news-3); background-size: cover; background-position: center; }

/* Page-specific hero overrides */
.bx-page-roads .bx-subhero__media { background-image: var(--img-spotlight-roads); }
.bx-page-construction .bx-subhero__media { background-image: var(--img-construction-1); }
.bx-page-infrastructure .bx-subhero__media { background-image: var(--img-infrastructure-1); }
.bx-page-bridges .bx-subhero__media { background-image: var(--img-bridges-1); }
.bx-page-civil .bx-subhero__media { background-image: var(--img-civil-1); }
.bx-page-pm .bx-subhero__media { background-image: var(--img-pm-1); }
.bx-page-procurement .bx-subhero__media { background-image: var(--img-procurement-1); }
.bx-page-tradehub .bx-subhero__media { background-image: var(--img-tradehub-1); }
.bx-page-about .bx-subhero__media { background-image: var(--img-editorial-1); }
.bx-page-projects .bx-subhero__media { background-image: var(--img-construction-1); }
.bx-page-careers .bx-subhero__media { background-image: var(--img-careers-1); }
.bx-page-contact .bx-subhero__media { background-image: var(--img-contact-1); }
.bx-page-rfp .bx-subhero__media { background-image: var(--img-rfp-1); }
.bx-page-insights .bx-subhero__media { background-image: var(--img-news-1); }
.bx-page-group .bx-subhero__media { background-image: var(--img-group-1); }
.bx-page-quality .bx-subhero__media { background-image: var(--img-quality-1); }

/* RTL fix: keep SVG logo text in LTR coordinate flow so marks do not overlap Arabic wordmarks */
[dir="rtl"] svg, [dir="rtl"] svg text { direction: ltr; unicode-bidi: normal; }
@media (max-width: 760px) { .bx-service--xl { flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 1.75rem; min-height: 420px; } .bx-service--xl .bx-service__title { font-size: 2rem; } }

/* Form status messages */
.bx-form-msg{display:none;margin-top:1rem;padding:1rem 1.2rem;border-radius:10px;font-weight:600;line-height:1.5;grid-column:1/-1}
.bx-form-msg.is-on{display:block}
.bx-form-msg.is-ok{background:#E8F3EC;color:#1E5B34;border:1px solid #9CC9AA}
.bx-form-msg.is-err{background:#FBECEA;color:#8A2A1E;border:1px solid #E3A99F}

/* BuildX logo (image-based, always LTR) */
.bx-logo { display: inline-flex; align-items: center; direction: ltr; unicode-bidi: isolate; line-height: 0; flex-shrink: 0; }
.bx-logo img { display: block; height: 36px; width: auto; max-width: none; }
.bx-nav .bx-logo--light { display: none; }
.bx-nav--on-dark:not(.bx-nav--scrolled) .bx-logo--light { display: block; }
.bx-nav--on-dark:not(.bx-nav--scrolled) .bx-logo--dark { display: none; }
.bx-footer__brand .bx-logo img { height: 44px; margin-bottom: 1.2rem; }
@media (max-width: 760px) { .bx-nav .bx-logo img { height: 30px; } .bx-footer__brand .bx-logo img { height: 38px; } }

/* ===== v3: refined typography ===== */
:root{
  --bx-fs-xl: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  --bx-fs-2xl: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
  --bx-fs-3xl: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  --bx-fs-4xl: clamp(1.9rem, 1.4rem + 1.7vw, 2.8rem);
  --bx-fs-5xl: clamp(2.1rem, 1.5rem + 2.3vw, 3.2rem);
  --bx-fs-6xl: clamp(2.3rem, 1.6rem + 2.8vw, 3.6rem);
  --bx-lh-tight: 1.15; --bx-lh-snug: 1.25;
}
h1,h2,h3,h4,.bx-display,.bx-h1,.bx-h2,.bx-h3,.bx-h4{font-weight:700;letter-spacing:-0.01em;line-height:1.18}
h3{font-size:1.25rem}
.bx-hero__headline{font-size:clamp(2.1rem,1.5rem + 2.5vw,3.4rem)!important;line-height:1.1!important;font-weight:700!important}
.bx-subhero h1{font-size:clamp(1.9rem,1.4rem + 1.7vw,2.8rem);line-height:1.15;max-width:24ch;font-weight:700}
.bx-subhero p{font-size:clamp(1rem,.95rem + .25vw,1.15rem);max-width:60ch;line-height:1.7}
.bx-spotlight h2,.bx-cta h2{font-size:clamp(1.6rem,1.25rem + 1.4vw,2.3rem);line-height:1.2;max-width:26ch;font-weight:700}
.bx-service__title{font-size:1.25rem;font-weight:700}
.bx-service--xl .bx-service__title{font-size:clamp(1.5rem,1.25rem + 1vw,2rem)}
.bx-project__title{font-size:1.1rem;font-weight:700}
.bx-stats__num{font-size:clamp(1.8rem,1.4rem + 1.3vw,2.4rem);font-weight:700}
.bx-value__title,.bx-industry__name{font-weight:700;font-size:1.1rem}
.bx-lede{font-size:clamp(1.02rem,.98rem + .25vw,1.15rem)}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] .bx-h1,html[dir="rtl"] .bx-h2,html[dir="rtl"] .bx-h3,html[dir="rtl"] .bx-display{font-weight:700;letter-spacing:0;line-height:1.35}
html[dir="rtl"] .bx-hero__headline{font-size:clamp(1.95rem,1.4rem + 2.2vw,3.1rem)!important;line-height:1.3!important}
html[dir="rtl"] .bx-subhero h1{font-size:clamp(1.75rem,1.3rem + 1.5vw,2.55rem);line-height:1.35}
html[dir="rtl"] .bx-h1{font-size:clamp(1.75rem,1.3rem + 1.5vw,2.55rem)}
html[dir="rtl"] .bx-h2{font-size:clamp(1.4rem,1.15rem + 1vw,1.95rem)}
html[dir="rtl"] .bx-cta h2,html[dir="rtl"] .bx-spotlight h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);line-height:1.4}
@media (max-width:600px){.bx-subhero{padding:7.5rem 0 3rem}.bx-section{padding-block:3.5rem}}

/* ===== v3: content components ===== */
.bx-x-crumb{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem;font-size:.82rem;color:rgba(243,246,246,.7)}
.bx-x-crumb a{color:rgba(243,246,246,.75)} .bx-x-crumb a:hover{color:var(--bx-orange)} .bx-x-crumb .is-cur{color:rgba(243,246,246,.95)}
.bx-x-title{margin-top:.8rem}
.bx-x-p{margin-top:1rem}
.bx-x-head{max-width:62ch;margin-bottom:2.25rem}
.bx-x-lede{margin-top:1rem}
.bx-x-alt{background:#EEECE6}
.bx-x-split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.bx-x-split.is-rev>div:first-child{order:2}
@media (max-width:900px){.bx-x-split{grid-template-columns:1fr}.bx-x-split.is-rev>div:first-child{order:0}}
.bx-x-img{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 20px 50px -25px rgba(20,42,49,.45)}
.bx-x-img img{width:100%;height:100%;object-fit:cover;display:block}
.bx-x-checks{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.7rem}
.bx-x-checks li{display:flex;gap:.7rem;align-items:flex-start;font-weight:600;color:var(--bx-graphite,#1A3139)}
.bx-x-checks .bx-x-ico{width:26px;height:26px;padding:4px;flex:0 0 26px;border-radius:50%}
.bx-x-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:11px;border-radius:12px;background:rgba(31,127,145,.12);color:var(--bx-orange,#1F7F91)}
.bx-x-ico svg{width:100%;height:100%}
.bx-x-grid{display:grid;gap:1.25rem}
.bx-x-grid--3{grid-template-columns:repeat(3,1fr)} .bx-x-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.bx-x-grid--3,.bx-x-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.bx-x-grid--3,.bx-x-grid--4{grid-template-columns:1fr}}
.bx-x-card{background:#fff;border:1px solid rgba(20,42,49,.08);border-radius:16px;padding:1.6rem;transition:transform .3s,box-shadow .3s}
.bx-x-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(20,42,49,.35)}
.bx-x-card h3{font-size:1.1rem;margin-top:1.1rem}
.bx-x-card p{margin-top:.55rem;color:var(--bx-fg-muted);font-size:.95rem;line-height:1.7}
.bx-x-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;counter-reset:s}
@media (max-width:900px){.bx-x-steps{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.bx-x-steps{grid-template-columns:1fr}}
.bx-x-step{position:relative;padding:1.5rem 1.4rem;border-top:3px solid var(--bx-orange,#1F7F91);background:#fff;border-radius:0 0 14px 14px;box-shadow:0 10px 30px -22px rgba(20,42,49,.35)}
.bx-x-step__n{font-size:.8rem;font-weight:700;letter-spacing:.18em;color:var(--bx-orange,#1F7F91)}
.bx-x-step h3{font-size:1.05rem;margin-top:.6rem} .bx-x-step p{margin-top:.5rem;font-size:.93rem;color:var(--bx-fg-muted);line-height:1.7}
.bx-x-band{background:var(--bx-graphite,#1A3139);color:#F3F6F6}
.bx-x-quote{margin:0;text-align:center}
.bx-x-quote p{font-size:clamp(1.2rem,1rem + .9vw,1.6rem);line-height:1.6;font-weight:600;max-width:48ch;margin:0 auto}
.bx-x-quote cite{display:block;margin-top:1rem;font-style:normal;color:var(--bx-orange,#1F7F91);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase}
.bx-x-link{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;border:1px solid rgba(20,42,49,.08);transition:transform .3s,box-shadow .3s}
.bx-x-link:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(20,42,49,.35)}
.bx-x-link__img{display:block;aspect-ratio:16/9;background-size:cover;background-position:center}
.bx-x-link__body{display:flex;flex-direction:column;gap:.35rem;padding:1.2rem 1.3rem 1.4rem}
.bx-x-link__body strong{font-size:1.05rem} .bx-x-link__body span{color:var(--bx-fg-muted);font-size:.92rem}
.bx-x-link__body em{font-style:normal;color:var(--bx-orange,#1F7F91);font-weight:700;margin-top:.3rem}
.bx-x-faq{border-bottom:1px solid rgba(20,42,49,.12);padding:1.1rem 0}
.bx-x-faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.bx-x-faq summary::-webkit-details-marker{display:none}
.bx-x-faq summary::after{content:"+";color:var(--bx-orange,#1F7F91);font-size:1.3rem;line-height:1}
.bx-x-faq[open] summary::after{content:"−"}
.bx-x-faq p{margin-top:.7rem;color:var(--bx-fg-muted);line-height:1.75}
.bx-x-cta{grid-template-columns:1fr!important}
.bx-x-cta__p{margin-top:1rem;color:rgba(243,246,246,.8);max-width:56ch;line-height:1.7}

/* ===== v3: mobile footer ===== */
@media (max-width:600px){
  .bx-footer{padding-top:3rem}
  .bx-footer__top{grid-template-columns:1fr 1fr!important;gap:2rem 1.25rem}
  .bx-footer__brand-wrap{grid-column:1/-1;text-align:center;display:flex;flex-direction:column;align-items:center;padding-bottom:1.75rem;border-bottom:1px solid rgba(243,246,246,.1)}
  .bx-footer__intro{margin:0 auto;font-size:.88rem;line-height:1.7}
  .bx-footer__social{justify-content:center}
  .bx-footer h6{font-size:.7rem;margin-bottom:.7rem}
  .bx-footer__list li{padding:.22rem 0}
  .bx-footer__list a{font-size:.86rem;color:rgba(243,246,246,.82)}
  .bx-footer__top>div:last-child{grid-column:1/-1}
  .bx-footer__top>div:last-child .bx-footer__list{display:grid;grid-template-columns:1fr 1fr;column-gap:1.25rem}
  .bx-footer__bottom{flex-direction:column;align-items:center;text-align:center;gap:.8rem;margin-top:2rem;padding-top:1.5rem;font-size:.78rem}
  .bx-footer__legal{justify-content:center;gap:.9rem}
}
.bx-x-doc .bx-reveal{max-width:72ch!important}
.bx-x-doc h3{font-size:1.1rem}
/* v4 nav: never wrap, tighter, burger earlier */
.bx-nav__link,.bx-nav__cta .bx-btn,.bx-nav__cta .bx-lang{white-space:nowrap}
.bx-nav__menu{gap:.1rem;flex-wrap:nowrap}
.bx-nav__link{padding:.6rem .62rem;font-size:.86rem}
@media (max-width:1440px){.bx-nav__link{padding:.55rem .5rem;font-size:.84rem}.bx-nav__cta{gap:.45rem}.bx-nav__cta .bx-btn{padding-inline:1rem;font-size:.8rem}}
@media (max-width:1320px){.bx-nav__menu,.bx-nav__cta .bx-btn--ghost,.bx-nav__cta .bx-lang{display:none}.bx-burger{display:inline-flex}}
html[dir=rtl] .bx-nav__link{font-size:.9rem}
/* v4 contact cards */
.bx-x-contact{display:grid;gap:1rem}
.bx-x-contact a.bx-x-card{display:block;color:inherit;text-decoration:none;transition:transform .2s,box-shadow .2s}
.bx-x-contact a.bx-x-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(14,31,37,.08)}
.bx-x-contact .bx-x-card em{display:inline-block;margin-top:.6rem;color:#1F7F91;font-style:normal;font-weight:600;font-size:.88rem}
.bx-x-formwrap{background:#fff;border:1px solid rgba(14,31,37,.08);border-radius:18px;padding:clamp(1.25rem,3vw,2.25rem);box-shadow:0 18px 40px rgba(14,31,37,.05)}
/* v5 footer address */
.bx-footer__addr{display:inline-flex;align-items:flex-start;gap:.5rem;margin-top:1.1rem;font-size:.86rem;line-height:1.55;color:rgba(243,246,246,.72);text-decoration:none;max-width:34ch}
.bx-footer__addr svg{flex:none;margin-top:.15rem;color:#1F7F91}
.bx-footer__addr:hover{color:#fff}
.bx-x-card--office{border-top:3px solid #1F7F91}
/* v6 theme: teal on dark surfaces uses the bright brand teal for contrast */
:root{--bx-teal:#5DB7CF;--bx-teal-dark:#1F7F91;--bx-teal-deep:#176574;--bx-teal-tint:#E4F2F5;--bx-shadow-orange:0 10px 26px rgba(31,127,145,.28)}
.bx-footer,.bx-cta,.bx-subhero,.bx-hero,.bx-mobile,.bx-x-band,[class*="--on-dark"]{--bx-orange:#5DB7CF;--bx-accent:#5DB7CF}
.bx-footer .bx-footer__addr svg,.bx-hero__headline em,.bx-hero__eyebrow,.bx-eyebrow--on-dark.bx-eyebrow--accent,.bx-subhero .bx-eyebrow--accent,.bx-cta .bx-eyebrow--accent,.bx-footer__list a:hover,.bx-footer__legal a:hover,.bx-lang--on-dark a.is-active{color:#5DB7CF}
.bx-hero .bx-btn--primary,.bx-cta .bx-btn--primary,.bx-subhero .bx-btn--primary,.bx-nav--on-dark:not(.bx-nav--scrolled) .bx-btn--primary{--bx-btn-bg:#5DB7CF;--bx-btn-bd:#5DB7CF;--bx-btn-fg:#0E1F25}
.bx-hero .bx-btn--primary:hover,.bx-cta .bx-btn--primary:hover,.bx-subhero .bx-btn--primary:hover,.bx-nav--on-dark:not(.bx-nav--scrolled) .bx-btn--primary:hover{--bx-btn-bg:#7CC7DA;--bx-btn-bd:#7CC7DA;--bx-btn-fg:#0E1F25}
.bx-footer{background:#0F242B}
:focus-visible{outline:2px solid #1F7F91;outline-offset:2px}
.bx-footer :focus-visible,.bx-hero :focus-visible,.bx-cta :focus-visible{outline-color:#5DB7CF}
::selection{background:#5DB7CF;color:#0E1F25}
/* v7 phone */
.bx-footer__tel{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:.7rem;font-size:.86rem}
.bx-footer__tel a{display:inline-flex;align-items:center;gap:.5rem;color:rgba(243,246,246,.72);text-decoration:none}
.bx-footer__tel a:hover{color:#fff}.bx-footer__tel svg{color:#5DB7CF;flex:none}
.bx-x-card--phone{border-top:3px solid #1F7F91}
.bx-x-tel{font-weight:700;font-size:1.1rem;color:inherit;text-decoration:none;unicode-bidi:isolate}
.bx-x-phone-links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}.bx-x-phone-links a{text-decoration:none}
.bx-x-phone-links em{display:inline-flex;align-items:center;gap:.35rem;color:#1F7F91;font-style:normal;font-weight:600;font-size:.88rem}
.bx-x-phone-links em svg{width:15px!important;height:15px!important;flex:none;display:inline-block;margin:0!important}.bx-x-phone-links em{white-space:nowrap}