/*
Theme Name: مؤسسة مشياد البناء | Mashyad Al-Bina
Theme URI: https://example.com
Author: Fares Al-Hamza
Author URI: https://example.com
Description: قالب ووردبريس عربي RTL احترافي لمؤسسة مشياد البناء للحلول الإنشائية والمعدنية. يشمل أنواع محتوى مخصصة للخدمات والمشاريع ومناطق الخدمة وآراء العملاء، محرك مقالات لتحسين محركات البحث، بيانات Schema منظمة، ونظام تواصل مباشر عبر الاتصال وواتساب فقط.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: basmat-imtiaz
Tags: custom-colors, custom-logo, custom-menu, featured-images, rtl-language-support, translation-ready

This theme is Arabic-only and RTL-native by design (not a bilingual LTR/RTL
switcher) -- direction is fixed intentionally. rtl.css adds a small set of
supplementary refinements on top of this file.
*/

/* ==========================================================================
   1) DESIGN TOKENS
   ========================================================================== */
:root{
  /* Graphite (dark) — deepened slightly and given a faint cool undertone
     versus a flat neutral charcoal, for a more engineered, less "workshop"
     feel appropriate to a construction & metal solutions brand. */
  --bmi-charcoal-950:#0e1013;
  --bmi-charcoal-900:#181b20;
  --bmi-charcoal-800:#252932;
  --bmi-charcoal-700:#353a45;

  /* Steel / concrete gray (neutral, not warm-tinted, to stay coherent with
     the cool graphite base) */
  --bmi-steel-600:#565c66;
  --bmi-steel-500:#767d88;
  --bmi-steel-400:#949aa3;
  --bmi-steel-200:#dadde2;
  --bmi-steel-100:#eef0f3;
  --bmi-steel-50:#f6f7f9;

  /* Primary accent: refined bronze/amber-gold — a premium metal finish
     (brass/bronze hardware), replacing a flatter safety-orange. */
  --bmi-gold-700:#9c6c1f;
  --bmi-gold-600:#c2872e;
  --bmi-gold-500:#d9a54f;
  --bmi-gold-100:#f7ead2;

  /* Secondary accent: steel blue, used sparingly (category badges only)
     to give the palette depth without competing with the primary accent —
     gold reads as "act now", blue reads as "category/informational". */
  --bmi-blue-700:#1f4256;
  --bmi-blue-600:#2f5f7a;
  --bmi-blue-100:#dfeaf0;

  --bmi-white:#ffffff;
  --bmi-ink:#181b20;
  --bmi-success:#2e7d4f;
  --bmi-star:#e0a22a;

  /* Semantic */
  --bmi-bg:var(--bmi-white);
  --bmi-bg-alt:var(--bmi-steel-50);
  --bmi-text:var(--bmi-ink);
  --bmi-text-muted:var(--bmi-steel-600);
  --bmi-border:var(--bmi-steel-200);
  --bmi-accent:var(--bmi-gold-600);
  --bmi-accent-hover:var(--bmi-gold-700);
  --bmi-accent-tint:var(--bmi-gold-100);
  --bmi-accent-2:var(--bmi-blue-600);
  --bmi-accent-2-tint:var(--bmi-blue-100);
  --bmi-dark:var(--bmi-charcoal-900);
  --bmi-dark-alt:var(--bmi-charcoal-800);
  --bmi-on-dark:#f2f2f3;
  --bmi-on-dark-muted:#a7abb1;

  /* Type */
  --bmi-font-display:"Cairo",system-ui,sans-serif;
  --bmi-font-body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --bmi-fs-hero:clamp(2.1rem,1.35rem + 3.1vw,3.5rem);
  --bmi-fs-h1:clamp(1.9rem,1.55rem + 1.4vw,2.5rem);
  --bmi-fs-h2:clamp(1.5rem,1.3rem + .85vw,1.95rem);
  --bmi-fs-h3:1.3rem;
  --bmi-fs-h4:1.1rem;
  --bmi-fs-lead:1.15rem;
  --bmi-fs-base:1rem;
  --bmi-fs-sm:.9rem;
  --bmi-fs-xs:.8rem;
  --bmi-lh-tight:1.25;
  --bmi-lh-normal:1.6;
  --bmi-lh-loose:1.85;

  /* Space */
  --bmi-sp-1:.25rem;
  --bmi-sp-2:.5rem;
  --bmi-sp-3:.75rem;
  --bmi-sp-4:1rem;
  --bmi-sp-5:1.5rem;
  --bmi-sp-6:2rem;
  --bmi-sp-8:3rem;
  --bmi-sp-10:4rem;
  --bmi-sp-12:5rem;
  --bmi-sp-16:6.5rem;

  /* Shape / motion */
  --bmi-radius-sm:6px;
  --bmi-radius-md:10px;
  --bmi-cut:16px;
  --bmi-cut-lg:26px;
  --bmi-shadow-sm:0 1px 3px rgba(17,18,21,.08);
  --bmi-shadow-md:0 10px 30px -12px rgba(17,18,21,.22);
  --bmi-ease:220ms cubic-bezier(.3,.1,.2,1);
  --bmi-container:1240px;
  --bmi-container-pad:1.25rem;
  --bmi-header-h:78px;
}

/* ==========================================================================
   2) RESET
   ========================================================================== */
*,*::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:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{margin:0;background:var(--bmi-bg);color:var(--bmi-text)}
img,svg,video{display:block;max-width:100%;height:auto}
ul,ol{padding:0;margin:0;list-style:none}
h1,h2,h3,h4,h5,h6,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea,select{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
iframe{border:0}

/* ==========================================================================
   3) BASE TYPOGRAPHY
   ========================================================================== */
body{
  font-family:var(--bmi-font-body);
  font-size:var(--bmi-fs-base);
  line-height:var(--bmi-lh-normal);
  direction:rtl;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--bmi-font-display);
  line-height:var(--bmi-lh-tight);
  font-weight:700;
  color:var(--bmi-ink);
}
h1{font-size:var(--bmi-fs-h1)}
h2{font-size:var(--bmi-fs-h2)}
h3{font-size:var(--bmi-fs-h3)}
h4{font-size:var(--bmi-fs-h4);font-weight:600}
p{color:var(--bmi-text)}
p+p{margin-top:var(--bmi-sp-4)}

a.link-accent{color:var(--bmi-accent);font-weight:600;transition:color var(--bmi-ease)}
a.link-accent:hover{color:var(--bmi-accent-hover)}

::selection{background:var(--bmi-accent);color:#fff}
:focus-visible{outline:3px solid var(--bmi-gold-500);outline-offset:2px}

/* Base icon sizing: basmat_icon() defaults to class="icon". Scoped
   component rules elsewhere (e.g. .btn svg, .card-icon svg) are more
   specific and win over this, but this keeps any icon used inline with
   text — outside a flex container — sized and aligned sensibly by default,
   rather than falling back to the browser's ~300x150px replaced-element
   default for an unsized SVG. */
.icon{display:inline-block;width:1em;height:1em;vertical-align:-0.125em;flex:none}

.screen-reader-text,.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:-100px;right:12px;z-index:9999;background:var(--bmi-accent);color:#fff;
  padding:.75rem 1.25rem;border-radius:var(--bmi-radius-sm);font-weight:700;transition:top var(--bmi-ease);
}
.skip-link:focus{top:12px}

/* ==========================================================================
   4) LAYOUT
   ========================================================================== */
.container{max-width:var(--bmi-container);margin-inline:auto;padding-inline:var(--bmi-container-pad)}
img.aligncenter{margin-inline:auto}
.section{padding-block:var(--bmi-sp-12)}
.section-sm{padding-block:var(--bmi-sp-8)}
.section--alt{background:var(--bmi-bg-alt)}
.section--dark{background:var(--bmi-dark);color:var(--bmi-on-dark)}
.section--dark h2,.section--dark h3,.section--dark p{color:inherit}

.section-header{max-width:680px;margin-bottom:var(--bmi-sp-8)}
.section-header--center{margin-inline:auto;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--bmi-font-display);
  font-size:var(--bmi-fs-xs);font-weight:700;letter-spacing:.04em;color:var(--bmi-accent);
  margin-bottom:var(--bmi-sp-3);
}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--bmi-accent);display:inline-block}
.section-lead{color:var(--bmi-text-muted);font-size:var(--bmi-fs-lead);margin-top:var(--bmi-sp-3)}
.section--dark .section-lead{color:var(--bmi-on-dark-muted)}
.section-footer{margin-top:var(--bmi-sp-8);text-align:center}

.grid{display:grid;gap:var(--bmi-sp-6)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media(min-width:641px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1025px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* Signature shape: chamfered "cut plate" corners, referencing cut sheet metal.
   Clips two opposite corners. filter:drop-shadow is used instead of box-shadow
   wherever this is combined with elevation, since box-shadow is clipped away
   by clip-path but drop-shadow follows the clipped silhouette. */
.cut-plate{
  clip-path:polygon(0 0,calc(100% - var(--bmi-cut)) 0,100% var(--bmi-cut),100% 100%,var(--bmi-cut) 100%,0 calc(100% - var(--bmi-cut)));
}
.cut-plate-lg{--bmi-cut:var(--bmi-cut-lg)}

/* ==========================================================================
   5) BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--bmi-font-display);font-weight:700;font-size:var(--bmi-fs-sm);
  padding:.9rem 1.6rem;white-space:nowrap;transition:background var(--bmi-ease),color var(--bmi-ease),transform var(--bmi-ease);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--bmi-accent);color:#fff}
.btn-primary:hover{background:var(--bmi-accent-hover)}
.btn-call{background:var(--bmi-charcoal-900);color:#fff}
.btn-call:hover{background:var(--bmi-charcoal-800)}
.btn-whatsapp{background:#25b358;color:#fff}
.btn-whatsapp:hover{background:#1f9a4b}
.btn-outline{background:transparent;color:var(--bmi-ink);box-shadow:inset 0 0 0 2px var(--bmi-border)}
.btn-outline:hover{box-shadow:inset 0 0 0 2px var(--bmi-accent);color:var(--bmi-accent)}
.section--dark .btn-outline{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.section--dark .btn-outline:hover{box-shadow:inset 0 0 0 2px var(--bmi-accent);color:var(--bmi-accent)}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--bmi-sp-3)}

/* ==========================================================================
   6) TOPBAR + HEADER
   ========================================================================== */
.site-topbar{background:var(--bmi-charcoal-950);color:var(--bmi-on-dark-muted);font-size:var(--bmi-fs-xs)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--bmi-sp-4);padding-block:.5rem}
.topbar-info{display:none;align-items:center;gap:var(--bmi-sp-5)}
.topbar-info li{display:flex;align-items:center;gap:.4rem}
.topbar-info svg{width:14px;height:14px;color:var(--bmi-accent)}
.topbar-social{display:flex;align-items:center;gap:.6rem;margin-inline-start:auto}
.topbar-social a{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);color:var(--bmi-on-dark);transition:background var(--bmi-ease)}
.topbar-social a:hover{background:var(--bmi-accent)}
.topbar-social svg{width:13px;height:13px}
@media(min-width:768px){.topbar-info{display:flex}}

.site-header{
  background:var(--bmi-white);border-bottom:1px solid var(--bmi-border);
  position:sticky;top:0;z-index:500;transition:box-shadow var(--bmi-ease);
}
.site-header.is-stuck{box-shadow:var(--bmi-shadow-md)}
.header-inner{display:flex;align-items:center;gap:var(--bmi-sp-6);min-height:var(--bmi-header-h)}
.site-branding{display:flex;align-items:center;gap:.65rem;margin-inline-end:auto}
.site-branding img{max-height:44px;width:auto}
.site-branding .brand-name{font-family:var(--bmi-font-display);font-weight:800;font-size:1.05rem;line-height:1.2;color:var(--bmi-ink)}
.site-branding .brand-tagline{display:block;font-family:var(--bmi-font-body);font-weight:400;font-size:.7rem;color:var(--bmi-text-muted)}

.primary-nav{display:none}
.primary-nav ul{display:flex;align-items:center;gap:var(--bmi-sp-5)}
.primary-nav a{font-weight:600;font-size:.95rem;position:relative;padding-block:.4rem}
.primary-nav a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--bmi-accent);transform:scaleX(0);transition:transform var(--bmi-ease)}
.primary-nav a:hover::after,.primary-nav .current-menu-item>a::after,.primary-nav .current_page_item>a::after{transform:scaleX(1)}
.header-cta{display:none;align-items:center;gap:.6rem}
.header-cta .btn{padding:.7rem 1.1rem;font-size:.85rem}

.menu-toggle{display:grid;place-items:center;width:44px;height:44px;margin-inline-start:auto}
.menu-toggle span{position:relative;width:22px;height:2px;background:var(--bmi-ink);display:block}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;inset-inline:0;width:22px;height:2px;background:var(--bmi-ink);transition:transform var(--bmi-ease)}
.menu-toggle span::before{top:-7px}
.menu-toggle span::after{top:7px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

@media(min-width:1025px){
  .primary-nav{display:block;margin-inline-end:var(--bmi-sp-2)}
  .header-cta{display:flex}
  .menu-toggle{display:none}
}

.mobile-nav{
  position:fixed;inset-block:0;inset-inline-end:0;width:min(320px,86vw);background:var(--bmi-white);
  box-shadow:var(--bmi-shadow-md);transform:translateX(105%);transition:transform var(--bmi-ease);
  z-index:600;overflow-y:auto;padding:var(--bmi-sp-6) var(--bmi-sp-5);
}
html[dir="rtl"] .mobile-nav{transform:translateX(-105%)}
.mobile-nav.is-open{transform:translateX(0)}
.mobile-nav-close{margin-inline-start:auto;display:grid;place-items:center;width:36px;height:36px}
.mobile-nav-close svg{width:20px;height:20px}
.mobile-nav ul{display:flex;flex-direction:column;gap:.2rem;margin-top:var(--bmi-sp-5)}
.mobile-nav a{display:block;padding:.85rem .25rem;border-bottom:1px solid var(--bmi-border);font-weight:600}
.mobile-nav .btn-row{margin-top:var(--bmi-sp-6);flex-direction:column}
.nav-scrim{position:fixed;inset:0;background:rgba(17,18,21,.55);opacity:0;pointer-events:none;transition:opacity var(--bmi-ease);z-index:550}
.nav-scrim.is-visible{opacity:1;pointer-events:auto}

/* ==========================================================================
   7) HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--bmi-dark);color:var(--bmi-on-dark);padding-block:var(--bmi-sp-12) var(--bmi-sp-16)}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 64px);
}
.hero-photo{position:absolute;inset:0;background-position:center;background-size:cover;opacity:.28}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,18,21,.55),var(--bmi-charcoal-950) 92%)}
.hero-accent{position:absolute;inset-inline-end:-6%;top:-8%;width:46%;aspect-ratio:1/1;background:var(--bmi-accent);clip-path:polygon(30% 0,100% 0,100% 70%,70% 100%,0 100%,0 30%);opacity:.16}
.hero-inner{position:relative;z-index:2;max-width:760px}
.hero-kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--bmi-font-display);font-weight:700;font-size:var(--bmi-fs-sm);color:var(--bmi-gold-500);margin-bottom:var(--bmi-sp-4)}
.hero-kicker::before{content:"";width:34px;height:2px;background:var(--bmi-gold-500)}
.hero h1{font-size:var(--bmi-fs-hero);color:#fff;margin-bottom:var(--bmi-sp-5);max-width:16ch}
.hero-desc{font-size:var(--bmi-fs-lead);color:var(--bmi-on-dark-muted);max-width:56ch;margin-bottom:var(--bmi-sp-6)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--bmi-sp-5);margin-top:var(--bmi-sp-8);padding-top:var(--bmi-sp-6);border-top:1px solid rgba(255,255,255,.12)}
.hero-meta-item{display:flex;align-items:center;gap:.6rem;font-size:var(--bmi-fs-sm);color:var(--bmi-on-dark-muted)}
.hero-meta-item svg{width:18px;height:18px;color:var(--bmi-gold-500);flex:none}

/* Operational tagline strip — "تصميم • توريد • تصنيع • تركيب" — a compact
   4-step chain distinct from the fuller .steps-list used in the dedicated
   process section further down the page. */
.process-strip{display:flex;flex-wrap:wrap;gap:0;margin-top:var(--bmi-sp-6)}
.process-step{display:flex;align-items:center;gap:.6rem;padding-inline-end:var(--bmi-sp-5);margin-inline-end:var(--bmi-sp-5);position:relative}
.process-step:not(:last-child){border-inline-end:1px solid rgba(255,255,255,.16)}
.process-step-num{
  width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--bmi-gold-500);color:var(--bmi-gold-500);
  font-family:var(--bmi-font-display);font-weight:700;font-size:.75rem;
}
.process-step-label{font-family:var(--bmi-font-display);font-weight:700;font-size:.85rem;color:#fff;white-space:nowrap}

/* ==========================================================================
   8) CARDS
   ========================================================================== */
.card{background:var(--bmi-white);border:1px solid var(--bmi-border);display:flex;flex-direction:column;transition:transform var(--bmi-ease),filter var(--bmi-ease);height:100%}
.card.cut-plate{filter:drop-shadow(var(--bmi-shadow-sm))}
.card:hover{transform:translateY(-4px);filter:drop-shadow(var(--bmi-shadow-md))}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bmi-steel-100)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--bmi-ease)}
.card:hover .card-media img{transform:scale(1.06)}
.card-media .card-badge{position:absolute;top:var(--bmi-sp-3);inset-inline-start:var(--bmi-sp-3);background:var(--bmi-accent-2);color:#fff;font-size:var(--bmi-fs-xs);font-weight:700;padding:.3rem .7rem;font-family:var(--bmi-font-display)}
.card-body{padding:var(--bmi-sp-5);display:flex;flex-direction:column;gap:.6rem;flex:1}
.card-title{font-size:1.05rem}
.card-title a{position:relative}
.card-title a::after{content:"";position:absolute;inset:0}
.card-excerpt{color:var(--bmi-text-muted);font-size:var(--bmi-fs-sm);line-height:var(--bmi-lh-normal)}
.card-foot{margin-top:auto;padding-top:.6rem;display:flex;align-items:center;justify-content:space-between;font-size:var(--bmi-fs-xs);color:var(--bmi-text-muted)}
.card-more{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;color:var(--bmi-accent);font-size:var(--bmi-fs-xs)}
.card-more svg{width:14px;height:14px;transition:transform var(--bmi-ease)}
.card:hover .card-more svg{transform:translateX(-3px)}
.card-icon{width:52px;height:52px;display:grid;place-items:center;background:var(--bmi-accent-tint);color:var(--bmi-accent);clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}
.card-icon svg{width:24px;height:24px}

.pillars{display:grid;gap:var(--bmi-sp-5);grid-template-columns:1fr}
@media(min-width:641px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1025px){.pillars{grid-template-columns:repeat(4,1fr)}}
.pillar{padding:var(--bmi-sp-5);border-inline-start:3px solid var(--bmi-accent);background:var(--bmi-bg-alt)}
.pillar>svg{display:block;width:34px;height:34px;color:var(--bmi-accent);margin-bottom:1rem}
.section--dark .pillar>svg{color:var(--bmi-gold-500)}
.section--dark .pillar{background:rgba(255,255,255,.04);border-inline-start-color:var(--bmi-gold-500)}
.pillar h3{font-size:1.05rem;margin-block:var(--bmi-sp-3) .4rem}
.pillar p{font-size:var(--bmi-fs-sm);color:var(--bmi-text-muted)}
.section--dark .pillar p{color:var(--bmi-on-dark-muted)}

.chip-grid{display:flex;flex-wrap:wrap;gap:.7rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.1rem;background:var(--bmi-bg-alt);border:1px solid var(--bmi-border);font-weight:600;font-size:var(--bmi-fs-sm);transition:all var(--bmi-ease)}
.chip:hover{background:var(--bmi-accent);color:#fff;border-color:var(--bmi-accent)}
.chip svg{width:15px;height:15px;color:var(--bmi-accent);transition:color var(--bmi-ease)}
.chip:hover svg{color:#fff}

.testimonial-card{padding:var(--bmi-sp-6);background:var(--bmi-white);border:1px solid var(--bmi-border);position:relative}
.testimonial-quote{color:var(--bmi-accent-tint);position:absolute;top:var(--bmi-sp-4);inset-inline-end:var(--bmi-sp-4);width:44px;height:44px}
.testimonial-stars{display:flex;gap:.15rem;margin-bottom:var(--bmi-sp-3)}
.testimonial-stars svg{width:16px;height:16px;color:var(--bmi-steel-200)}
.testimonial-stars svg.is-filled{color:var(--bmi-star)}
.testimonial-text{font-size:var(--bmi-fs-base);color:var(--bmi-text);line-height:var(--bmi-lh-loose)}
.testimonial-person{display:flex;align-items:center;gap:.75rem;margin-top:var(--bmi-sp-5);padding-top:var(--bmi-sp-4);border-top:1px solid var(--bmi-border)}
.testimonial-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--bmi-steel-100);flex:none}
.testimonial-avatar img{width:100%;height:100%;object-fit:cover}
.testimonial-avatar-fallback{display:grid;place-items:center;width:100%;height:100%;background:var(--bmi-charcoal-900);color:#fff;font-family:var(--bmi-font-display);font-weight:700}
.testimonial-name{font-weight:700;font-size:.9rem}
.testimonial-city{font-size:var(--bmi-fs-xs);color:var(--bmi-text-muted)}

/* ==========================================================================
   9) BEFORE / AFTER
   ========================================================================== */
.before-after{position:relative;aspect-ratio:16/10;overflow:hidden;user-select:none;background:var(--bmi-steel-100)}
.before-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.before-after .ba-after{clip-path:inset(0 0 0 50%)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;cursor:ew-resize;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ba-handle::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;
  border-radius:50%;background:#fff;box-shadow:var(--bmi-shadow-md);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231b1d21' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.ba-label{position:absolute;bottom:var(--bmi-sp-3);font-size:var(--bmi-fs-xs);font-weight:700;background:rgba(17,18,21,.72);color:#fff;padding:.3rem .7rem}
.ba-label.ba-label-before{left:var(--bmi-sp-3)}
.ba-label.ba-label-after{right:var(--bmi-sp-3)}

/* ==========================================================================
   10) ARTICLE / SINGLE CONTENT
   ========================================================================== */
.article-header{padding-block:var(--bmi-sp-10) var(--bmi-sp-8);background:var(--bmi-bg-alt)}
.article-title{max-width:46ch}
.article-meta{display:flex;flex-wrap:wrap;gap:var(--bmi-sp-4);margin-top:var(--bmi-sp-4);color:var(--bmi-text-muted);font-size:var(--bmi-fs-sm)}
.article-meta li{display:flex;align-items:center;gap:.4rem}
.article-meta svg{width:15px;height:15px;color:var(--bmi-accent)}
.article-cover{aspect-ratio:16/8;overflow:hidden;margin-top:var(--bmi-sp-6)}
.article-cover img{width:100%;height:100%;object-fit:cover}

.article-layout{display:grid;gap:var(--bmi-sp-10);grid-template-columns:1fr;padding-block:var(--bmi-sp-10)}
@media(min-width:1025px){.article-layout{grid-template-columns:minmax(0,1fr) 280px}}

.article-body{max-width:72ch;font-size:1.03rem;line-height:var(--bmi-lh-loose)}
.article-body>*+*{margin-top:var(--bmi-sp-5)}
.article-body h2{font-size:1.4rem;margin-top:var(--bmi-sp-8);scroll-margin-top:calc(var(--bmi-header-h) + 16px)}
.article-body h3{font-size:1.15rem;margin-top:var(--bmi-sp-6);scroll-margin-top:calc(var(--bmi-header-h) + 16px)}
.article-body ul,.article-body ol{padding-inline-start:1.4rem;list-style:disc}
.article-body ol{list-style:decimal}
.article-body li+li{margin-top:.4rem}
.article-body img{margin-block:var(--bmi-sp-2)}
.article-body blockquote{border-inline-start:4px solid var(--bmi-accent);padding-inline-start:var(--bmi-sp-5);color:var(--bmi-text-muted);font-style:normal;font-size:1.1rem}
.article-body a{color:var(--bmi-accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.article-body figcaption{font-size:var(--bmi-fs-xs);color:var(--bmi-text-muted);margin-top:.4rem;text-align:center}
.article-body table{margin-block:var(--bmi-sp-4);font-size:var(--bmi-fs-sm)}
.article-body th,.article-body td{border:1px solid var(--bmi-border);padding:.6rem .8rem;text-align:start}
.article-body th{background:var(--bmi-bg-alt)}

.article-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--bmi-sp-8)}
.article-tags a{font-size:var(--bmi-fs-xs);background:var(--bmi-bg-alt);border:1px solid var(--bmi-border);padding:.4rem .8rem;font-weight:600}
.article-tags a:hover{border-color:var(--bmi-accent);color:var(--bmi-accent)}

.article-sidebar{position:sticky;top:calc(var(--bmi-header-h) + 24px);align-self:start;display:flex;flex-direction:column;gap:var(--bmi-sp-5)}
.toc-box{border:1px solid var(--bmi-border);background:var(--bmi-bg-alt);padding:var(--bmi-sp-5)}
.toc-box h4{margin-bottom:var(--bmi-sp-3);display:flex;align-items:center;gap:.5rem}
.toc-box h4 svg{width:17px;height:17px;color:var(--bmi-accent)}
.toc-list{display:flex;flex-direction:column;gap:.15rem;border-inline-start:2px solid var(--bmi-border);max-height:340px;overflow-y:auto}
.toc-list a{display:block;padding:.45rem .9rem;font-size:.87rem;color:var(--bmi-text-muted);border-inline-start:2px solid transparent;margin-inline-start:-2px;transition:color var(--bmi-ease),border-color var(--bmi-ease)}
.toc-list a.is-h3{padding-inline-start:1.6rem}
.toc-list a:hover,.toc-list a.is-active{color:var(--bmi-accent);border-inline-start-color:var(--bmi-accent)}
.related-box{border:1px solid var(--bmi-border);padding:var(--bmi-sp-5)}
.related-box h4{margin-bottom:var(--bmi-sp-3)}

/* ==========================================================================
   11) FAQ
   ========================================================================== */
.faq-list{display:flex;flex-direction:column;gap:.8rem;max-width:820px}
.faq-item{background:var(--bmi-white);border:1px solid var(--bmi-border)}
.section--dark .faq-item{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--bmi-sp-4);padding:var(--bmi-sp-5);text-align:start;font-weight:700;font-family:var(--bmi-font-display)}
.faq-q .faq-plus{flex:none;width:26px;height:26px;display:grid;place-items:center;position:relative}
.faq-q .faq-plus::before,.faq-q .faq-plus::after{content:"";position:absolute;background:var(--bmi-accent);transition:transform var(--bmi-ease)}
.faq-q .faq-plus::before{width:14px;height:2px}
.faq-q .faq-plus::after{width:2px;height:14px}
.faq-item[open] .faq-plus::after{transform:rotate(90deg);opacity:0}
.faq-a{padding:0 var(--bmi-sp-5) var(--bmi-sp-5);color:var(--bmi-text-muted);line-height:var(--bmi-lh-loose)}
.section--dark .faq-a{color:var(--bmi-on-dark-muted)}
.faq-item summary{cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}

/* ==========================================================================
   12) CTA BANNER
   ========================================================================== */
.cta-banner{background:var(--bmi-charcoal-900);color:#fff;padding:var(--bmi-sp-10) var(--bmi-sp-6);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--bmi-sp-6);position:relative;overflow:hidden}
.cta-banner::before{content:"";position:absolute;inset-inline-end:-4%;top:-30%;width:32%;aspect-ratio:1/1;background:var(--bmi-accent);opacity:.18;clip-path:polygon(30% 0,100% 0,100% 70%,70% 100%,0 100%,0 30%)}
.cta-banner-text{position:relative;z-index:1;max-width:520px}
.cta-banner h2{color:#fff;font-size:var(--bmi-fs-h2)}
.cta-banner p{color:var(--bmi-on-dark-muted);margin-top:.5rem}
.cta-banner .btn-row{position:relative;z-index:1}

/* ==========================================================================
   13) FOOTER
   ========================================================================== */
.site-footer{background:var(--bmi-charcoal-950);color:var(--bmi-on-dark-muted)}
.footer-top{padding-block:var(--bmi-sp-12)}
.footer-grid{display:grid;gap:var(--bmi-sp-8);grid-template-columns:1fr}
@media(min-width:641px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1025px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.footer-col h4{color:#fff;font-size:1rem;margin-bottom:var(--bmi-sp-4)}
.footer-brand img{max-height:40px;margin-bottom:var(--bmi-sp-4)}
.footer-brand p{font-size:var(--bmi-fs-sm);line-height:var(--bmi-lh-loose)}
.footer-col ul{display:flex;flex-direction:column;gap:.65rem}
.footer-col a{font-size:var(--bmi-fs-sm);transition:color var(--bmi-ease)}
.footer-col a:hover{color:var(--bmi-gold-500)}
.footer-contact li{display:flex;align-items:flex-start;gap:.6rem}
.footer-contact svg{width:16px;height:16px;color:var(--bmi-gold-500);flex:none;margin-top:.15rem}
.footer-social{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--bmi-sp-5)}
.footer-social a{width:36px;height:36px;display:grid;place-items:center;background:rgba(255,255,255,.06);transition:background var(--bmi-ease)}
.footer-social a:hover{background:var(--bmi-accent)}
.footer-social svg{width:16px;height:16px;color:#fff}

.social-row{display:flex;flex-wrap:wrap;gap:.6rem}
.social-row a{width:40px;height:40px;display:grid;place-items:center;background:var(--bmi-bg-alt);border:1px solid var(--bmi-border);color:var(--bmi-ink);transition:all var(--bmi-ease)}
.social-row a:hover{background:var(--bmi-accent);border-color:var(--bmi-accent);color:#fff}
.social-row svg{width:17px;height:17px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:var(--bmi-sp-5)}
.footer-bottom-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--bmi-sp-3);font-size:var(--bmi-fs-xs)}
.footer-credit a{color:var(--bmi-on-dark-muted);text-decoration:underline;text-underline-offset:2px}
.footer-credit a:hover{color:var(--bmi-gold-500)}

/* ==========================================================================
   14) WHATSAPP FLOAT
   ========================================================================== */
.whatsapp-float{position:fixed;bottom:22px;inset-inline-end:22px;z-index:400;width:60px;height:60px;border-radius:50%;background:#25b358;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,179,88,.45);transition:transform var(--bmi-ease)}
.whatsapp-float:hover{transform:scale(1.07)}
.whatsapp-float svg{width:30px;height:30px}
.whatsapp-float::after{content:"";position:absolute;inset:0;border-radius:50%;animation:bmi-pulse 2.4s ease-out infinite}
@keyframes bmi-pulse{0%{box-shadow:0 0 0 0 rgba(37,179,88,.5)}100%{box-shadow:0 0 0 18px rgba(37,179,88,0)}}
@media(prefers-reduced-motion:reduce){.whatsapp-float::after{animation:none}}

/* ==========================================================================
   15) BREADCRUMBS
   ========================================================================== */
.breadcrumbs{padding-block:var(--bmi-sp-4);font-size:var(--bmi-fs-xs);color:var(--bmi-text-muted)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.breadcrumbs a{color:var(--bmi-text-muted);font-weight:600}
.breadcrumbs a:hover{color:var(--bmi-accent)}
.breadcrumbs li:not(:last-child)::after{content:"/";margin-inline-start:.4rem;color:var(--bmi-steel-200)}
.breadcrumbs li[aria-current]{color:var(--bmi-ink);font-weight:600}

/* ==========================================================================
   16) PAGINATION + SEARCH + 404
   ========================================================================== */
.bmi-pagination{display:flex;justify-content:center;gap:.4rem;margin-top:var(--bmi-sp-10);flex-wrap:wrap}
.bmi-pagination a,.bmi-pagination span{min-width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--bmi-border);font-weight:600;font-size:.9rem}
.bmi-pagination .current{background:var(--bmi-charcoal-900);color:#fff;border-color:var(--bmi-charcoal-900)}
.bmi-pagination a:hover{border-color:var(--bmi-accent);color:var(--bmi-accent)}

.search-form{display:flex;max-width:520px;border:2px solid var(--bmi-charcoal-900)}
.search-form input[type="search"]{flex:1;padding:.9rem 1.1rem;border:0;background:transparent;text-align:start}
.search-form button{padding:0 1.3rem;background:var(--bmi-charcoal-900);color:#fff;display:grid;place-items:center}
.search-form button svg{width:18px;height:18px}

.empty-state{text-align:center;padding-block:var(--bmi-sp-12);color:var(--bmi-text-muted)}
.empty-state svg{width:56px;height:56px;color:var(--bmi-steel-200);margin-inline:auto;margin-bottom:var(--bmi-sp-4)}

.error-404{text-align:center;padding-block:var(--bmi-sp-16);max-width:560px;margin-inline:auto}
.error-404 .error-code{font-family:var(--bmi-font-display);font-size:5rem;font-weight:800;color:var(--bmi-accent-tint);-webkit-text-stroke:2px var(--bmi-accent);line-height:1}
.error-404 p{color:var(--bmi-text-muted);margin-block:var(--bmi-sp-4) var(--bmi-sp-6)}

/* ==========================================================================
   17) DETAIL LAYOUTS (service / project / location)
   ========================================================================== */
.detail-hero{background:var(--bmi-dark);color:#fff;padding-block:var(--bmi-sp-10) var(--bmi-sp-8);position:relative;overflow:hidden}
.detail-hero::before{content:"";position:absolute;inset:0;opacity:.5;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 64px)}
.detail-hero .container{position:relative;z-index:1}
.detail-hero .breadcrumbs{color:var(--bmi-on-dark-muted)}
.detail-hero .breadcrumbs a{color:var(--bmi-on-dark-muted)}
.detail-hero .breadcrumbs li[aria-current]{color:#fff}
.detail-hero h1{color:#fff;max-width:36ch}
.detail-hero .section-lead{color:var(--bmi-on-dark-muted);max-width:60ch}

.detail-cover{margin-top:-3rem;position:relative;z-index:3}
.detail-cover .article-cover{filter:drop-shadow(var(--bmi-shadow-md))}

.feature-list{display:grid;gap:.8rem;grid-template-columns:1fr}
@media(min-width:641px){.feature-list{grid-template-columns:repeat(2,1fr)}}
.feature-list li{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;background:var(--bmi-bg-alt);border:1px solid var(--bmi-border)}
.feature-list svg{width:20px;height:20px;color:var(--bmi-success);flex:none}

.steps-list{counter-reset:bmi-step;display:flex;flex-direction:column;gap:1.4rem}
.steps-list li{display:flex;gap:var(--bmi-sp-4);position:relative;padding-inline-start:var(--bmi-sp-4)}
.steps-list li::before{counter-increment:bmi-step;content:counter(bmi-step);flex:none;width:40px;height:40px;display:grid;place-items:center;background:var(--bmi-charcoal-900);color:#fff;font-family:var(--bmi-font-display);font-weight:800;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.steps-list li:not(:last-child)::after{content:"";position:absolute;top:40px;bottom:-1.4rem;inset-inline-start:19px;width:2px;background:var(--bmi-border)}
.steps-list p{padding-top:.6rem}

.gallery-grid{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:641px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
.gallery-grid a{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--bmi-steel-100)}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform var(--bmi-ease)}
.gallery-grid a:hover img{transform:scale(1.08)}

.meta-table{width:100%;font-size:var(--bmi-fs-sm)}
.meta-table tr{border-bottom:1px solid var(--bmi-border)}
.meta-table th,.meta-table td{padding:.75rem .5rem;text-align:start}
.meta-table th{color:var(--bmi-text-muted);font-weight:600;width:38%}

.map-frame{aspect-ratio:16/9;width:100%;background:var(--bmi-steel-100);overflow:hidden}
.map-frame iframe{width:100%;height:100%}

.bmi-lightbox-overlay{
  position:fixed;inset:0;background:rgba(17,18,21,.92);display:flex;align-items:center;justify-content:center;
  z-index:900;opacity:0;pointer-events:none;transition:opacity var(--bmi-ease);padding:2rem;
}
.bmi-lightbox-overlay.is-visible{opacity:1;pointer-events:auto}
.bmi-lightbox-overlay img{max-width:100%;max-height:90vh;object-fit:contain;box-shadow:var(--bmi-shadow-md)}
.bmi-lightbox-close{
  position:fixed;top:1.5rem;inset-inline-end:1.5rem;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.75rem;line-height:1;display:grid;place-items:center;
}
.bmi-lightbox-close:hover{background:rgba(255,255,255,.22)}

/* ==========================================================================
   18) TOP-OF-PAGE OFFSET (admin bar)
   ========================================================================== */
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}