/* ==========================================================================
   FABSOL ENGINEERS — Premium Corporate Stylesheet
   Author: FABSOL · Built on precision and trust
   ========================================================================== */

/* ---------- 1. ROOT TOKENS ---------- */
:root{
  --fab-blue:        #0a2a5e;       /* deep corporate blue */
  --fab-blue-2:      #103e85;       /* mid blue */
  --fab-blue-3:      #1e5fb0;       /* accent blue */
  --fab-red:         #c8102e;       /* brand red */
  --fab-red-2:       #e62739;
  --fab-dark:        #0b1220;       /* near-black industrial */
  --fab-dark-2:      #131c2e;
  --fab-grey:        #f4f6f9;
  --fab-grey-2:      #e6ebf2;
  --fab-text:        #1a2235;
  --fab-muted:       #5b6478;
  --fab-white:       #ffffff;
  --fab-line:        rgba(255,255,255,.12);

  --grad-blue:       linear-gradient(135deg, #0a2a5e 0%, #1e5fb0 100%);
  --grad-blue-dark:  linear-gradient(135deg, #06183a 0%, #0a2a5e 100%);
  --grad-red:        linear-gradient(135deg, #c8102e 0%, #e62739 100%);
  --grad-overlay:    linear-gradient(180deg, rgba(6,12,30,.55) 0%, rgba(6,12,30,.85) 100%);
  --grad-hero:       linear-gradient(120deg, rgba(6,12,30,.92) 0%, rgba(10,42,94,.78) 50%, rgba(6,12,30,.55) 100%);

  --font-head:       'Oswald', 'Bebas Neue', sans-serif;
  --font-body:       'Inter', system-ui, -apple-system, sans-serif;

  --shadow-sm:       0 4px 14px rgba(10,20,40,.08);
  --shadow-md:       0 14px 40px rgba(10,20,40,.12);
  --shadow-lg:       0 24px 60px rgba(10,20,40,.18);
  --shadow-blue:     0 18px 40px rgba(10,42,94,.32);

  --radius-sm:       8px;
  --radius-md:       14px;
  --radius-lg:       22px;

  --container-pad:   2.5rem;
  --section-pad:     6rem;
}

/* ---------- 2. BASE ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  color: var(--fab-text);
  background: var(--fab-white);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.no-scroll{ overflow:hidden; }

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--fab-dark);
  line-height: 1.15;
  text-transform: uppercase;
}
h1{ font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 700; }
h2{ font-size: clamp(2rem, 3.6vw, 3rem); }
h3{ font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
p{ color: var(--fab-muted); }
a{ color: var(--fab-blue-3); text-decoration:none; transition: all .3s ease; }
a:hover{ color: var(--fab-red); }
img{ max-width:100%; height:auto; display:block; }

.container{ max-width: 1280px; }

/* selection */
::selection{ background: var(--fab-red); color:#fff; }

/* ---------- 3. UTILITIES ---------- */
.section{ padding: var(--section-pad) 0; position:relative; }
.section-sm{ padding: 4rem 0; }
.bg-grey{ background: var(--fab-grey); }
.bg-dark-corp{ background: var(--fab-dark); color:#cfd6e4; }
.bg-dark-corp h1,.bg-dark-corp h2,.bg-dark-corp h3,.bg-dark-corp h4,.bg-dark-corp h5,.bg-dark-corp h6{ color:#fff; }
.bg-dark-corp p{ color: #b8c5dc; }
.bg-dark-corp small{ color: #8898b4; }
.bg-dark-corp .about-list li{ color: #cdd6e8; }
.bg-dark-corp .about-list li i{ background: rgba(200,16,46,.22); color: #ff8a98; }
.bg-dark-corp .divider-accent{ background: var(--grad-red); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family: var(--font-body);
  font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: 3px;
  color: var(--fab-red);
  padding: .35rem 0; margin-bottom: 1rem;
  position: relative;
}
.eyebrow::before{
  content:""; width: 36px; height:2px; background: var(--fab-red); display:inline-block;
}
.bg-dark-corp .eyebrow{ color: #ff5d6d; }

.section-title{ margin-bottom: 1rem; }
.section-lead{ max-width: 760px; margin: 0 auto 3rem; text-align:center; color: var(--fab-muted); font-size: 1.05rem; }
.text-center .eyebrow::before{ display:none; }
.text-center .eyebrow{ padding: .35rem 1rem; border-top: 2px solid var(--fab-red); border-bottom: 2px solid var(--fab-red); }

/* divider accent */
.divider-accent{
  display:block; width: 60px; height: 4px; background: var(--grad-red);
  margin: 1rem 0 1.5rem; border-radius: 4px;
}
.text-center .divider-accent{ margin-left:auto; margin-right:auto; }

/* ---------- 4. BUTTONS ---------- */
.btn{
  font-family: var(--font-body); font-weight: 600; letter-spacing: .5px;
  padding: .85rem 1.7rem; border-radius: 50px; border: none;
  display: inline-flex; align-items:center; justify-content:center;
  transition: all .35s cubic-bezier(.2,.8,.2,1);
  position: relative; overflow:hidden;
}
.btn-cta{
  background: var(--grad-red); color:#fff;
  box-shadow: 0 12px 26px rgba(200,16,46,.35);
}
.btn-cta:hover{ transform: translateY(-3px); color:#fff; box-shadow: 0 18px 34px rgba(200,16,46,.45); }
.btn-cta-outline{
  background: transparent; color:#fff; border: 2px solid #fff;
}
.btn-cta-outline:hover{ background:#fff; color: var(--fab-blue); transform: translateY(-3px); }
.btn-cta-light{
  background:#fff; color: var(--fab-blue);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.btn-cta-light:hover{ transform: translateY(-3px); color: var(--fab-red); }
.btn-ghost-light{
  background: transparent; color:#fff; border: 2px solid rgba(255,255,255,.4);
}
.btn-ghost-light:hover{ background: #fff; color: var(--fab-blue); border-color:#fff; }
.btn-blue{ background: var(--grad-blue); color:#fff; box-shadow: var(--shadow-blue); }
.btn-blue:hover{ transform: translateY(-3px); color:#fff; box-shadow: 0 22px 50px rgba(10,42,94,.45); }

/* ---------- 5. PRELOADER ---------- */
.fab-preloader{
  position: fixed; inset: 0; background: var(--fab-dark);
  z-index: 99999; display:flex; align-items:center; justify-content:center;
  transition: opacity .6s ease, visibility .6s ease;
}
.fab-preloader.is-hidden{ opacity:0; visibility:hidden; }
.loader-wrap{ text-align:center; }
.loader-text{
  font-family: var(--font-head); color:#fff; letter-spacing: 6px;
  font-size: 1.6rem; font-weight: 600;
}
.loader-text span{ color: var(--fab-red); }
.loader-bar{
  width: 220px; height: 3px; background: rgba(255,255,255,.1);
  margin: 0 auto 1.5rem; position: relative; overflow: hidden; border-radius: 4px;
}
.loader-bar::after{
  content:""; position:absolute; inset:0; width: 30%;
  background: var(--grad-red);
  animation: loaderSlide 1.1s ease-in-out infinite;
}
@keyframes loaderSlide{
  0%{ left:-30%; } 100%{ left: 100%; }
}

/* ---------- 6. TOP BAR ---------- */
.topbar{
  background: var(--fab-dark);
  color: #b9c2d6; font-size: .82rem;
  padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar a{ color:#b9c2d6; }
.topbar a:hover{ color: #fff; }
.topbar i{ color: var(--fab-red); }
.topbar-badge{
  background: rgba(200,16,46,.12); color:#ff8a98;
  padding: .25rem .8rem; border-radius: 50px; font-size:.75rem;
}

/* ---------- 7. HEADER / NAV ---------- */
.site-header{
  position: sticky; top:0; left:0; right:0; z-index: 1040;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(10,42,94,.08);
  transition: all .35s ease;
}
.site-header.is-scrolled{
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 28px rgba(10,20,40,.08);
}
.site-header .navbar{ padding: .2rem 0 !important; transition: padding .3s ease; }
.site-header.is-scrolled .navbar{ padding: .55rem 0 !important; }

.brand-logo{
  height: 60px; width: auto; transition: height .3s ease;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.08));
}
.site-header.is-scrolled .brand-logo{ height: 50px; }
.brand-text{
  margin-left: .85rem; line-height: 1; font-family: var(--font-head);
  color: var(--fab-blue); letter-spacing: 2px;
}
.brand-text strong{ display:block; font-size: 1.25rem; font-weight: 700; }
.brand-text small{ display:block; font-size: .68rem; color: var(--fab-red); letter-spacing: 5px; font-weight: 600; }

.navbar-nav .nav-link{
  color: var(--fab-text) !important;
  font-weight: 600; font-size: .92rem;
  padding: .85rem 1rem !important;
  position: relative; text-transform: uppercase; letter-spacing: .5px;
}
.navbar-nav .nav-link::after{
  content:""; position:absolute; left: 1rem; right: 1rem; bottom: .35rem;
  height: 2px; background: var(--fab-red);
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{ transform: scaleX(1); }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{ color: var(--fab-blue) !important; }

/* mobile toggler */
.toggler-icon{ display:inline-block; width:28px; height:22px; position:relative; }
.toggler-icon span{
  position:absolute; left:0; right:0; height:2px; background: var(--fab-blue);
  transition: all .3s ease;
}
.toggler-icon span:nth-child(1){ top:0; }
.toggler-icon span:nth-child(2){ top:50%; transform: translateY(-50%); }
.toggler-icon span:nth-child(3){ bottom:0; }

/* offcanvas mobile nav */
.fab-offcanvas{
  background: var(--fab-dark); color:#fff; width: 340px !important;
}
.fab-offcanvas .offcanvas-body{
  scrollbar-width: thin;
  scrollbar-color: rgba(200,16,46,.6) rgba(255,255,255,.04);
}
.fab-offcanvas .offcanvas-body::-webkit-scrollbar{
  width: 6px;
}
.fab-offcanvas .offcanvas-body::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
}
.fab-offcanvas .offcanvas-body::-webkit-scrollbar-thumb{
  background: var(--fab-red);
  border-radius: 6px;
}
.fab-offcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover{
  background: #ff5d6d;
}
.fab-offcanvas .offcanvas-header{
  border-bottom: 2px solid rgba(200,16,46,.3); padding: 1.5rem 1.5rem 1rem;
  display:flex; justify-content:space-between; align-items:center;
}
.brand-mobile{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family: var(--font-head); color:#fff; font-weight: 700; letter-spacing: 1.5px;
}
.brand-mobile img{ height: 60px; width: auto; }
.brand-mobile span{ font-size: .9rem; }
.brand-mobile span{ color: var(--fab-red); }
.btn-close-fab{
  background: rgba(255,255,255,.1); border:none; color:#fff;
  width: 38px; height: 38px; border-radius: 50%; transition: all .3s;
  font-size: .95rem; flex-shrink: 0;
}
.btn-close-fab:hover{ background: var(--fab-red); transform: rotate(90deg); }
.mobile-nav-list{ list-style:none; padding: .5rem 0; margin: 0; }
.mobile-nav-list li a{
  display:flex; justify-content:space-between; align-items:center;
  padding: .85rem 1.4rem; color:#b8c5dc; font-weight:600; letter-spacing:.5px;
  border-bottom: 1px solid rgba(255,255,255,.05); text-transform:uppercase; font-size:.88rem;
  transition: all .3s ease;
}
.mobile-nav-list li a span{ flex:1; }
.mobile-nav-list li a i{ opacity:0; transform: translateX(-12px); transition: all .3s; color: var(--fab-red); font-size: .75rem; }
.mobile-nav-list li a:active, .mobile-nav-list li a.active{
  background: linear-gradient(90deg, rgba(200,16,46,.2) 0%, transparent 80%);
  border-left: 3px solid var(--fab-red);
  padding-left: 1.1rem;
  color:#fff;
}
.mobile-nav-list li a:active i, .mobile-nav-list li a.active i{ opacity:1; transform: translateX(0); }
.mobile-cta{ padding: 1.2rem 1.4rem; border-top: 2px solid rgba(200,16,46,.2); }
.mobile-cta .btn-cta{ width: 100%; font-size: .92rem; padding: .8rem 1.4rem; }
.mobile-contact{ display:flex; flex-direction:column; gap:.7rem; margin-top: 1rem; }
.mobile-contact a{
  color:#b8c5dc; font-size:.88rem; display:inline-flex; align-items:center; gap:.6rem;
  transition: all .3s; padding: .5rem 0;
}
.mobile-contact a:hover{ color:#fff; }
.mobile-contact a i{ color: var(--fab-red); width: 16px; font-size: .8rem; }

/* ---------- 8. HERO ---------- */
.hero{
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden; color:#fff;
}
.hero-slider{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0; background-size: cover; background-position: center;
  opacity:0; transition: opacity 1.6s ease, transform 8s ease;
  transform: scale(1.06);
}
.hero-slide.is-active{ opacity:1; transform: scale(1); }
.hero-slide::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(110deg, rgba(5,10,24,.95) 0%, rgba(10,42,94,.82) 42%, rgba(5,10,24,.45) 100%);
}

/* ---- Main content area ---- */
.hero-content{
  flex: 1; display: flex; align-items: center;
  position: relative; z-index: 3;
  padding: 9rem 0 3rem;
}

/* Red left accent on heading */
.hero-heading-wrap{
  position: relative; padding-left: 1.6rem; margin-bottom: 1.6rem;
}
.hero-heading-wrap::before{
  content:""; position:absolute; left:0; top: 4px; height: 82%;
  width: 5px; background: var(--fab-red); border-radius: 50px;
  box-shadow: 0 0 22px rgba(200,16,46,.7);
}

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2);
  padding: .55rem 1.25rem; border-radius: 50px;
  font-size: .76rem; letter-spacing: 3.5px; text-transform:uppercase; font-weight:600;
  color:#fff; margin-bottom: 1.6rem; backdrop-filter: blur(8px);
}
.hero-eyebrow .dot{
  width:8px; height:8px; background: var(--fab-red); border-radius:50%;
  box-shadow: 0 0 0 5px rgba(200,16,46,.3); animation: pulseDot 1.6s infinite;
}
@keyframes pulseDot{ 50%{ box-shadow: 0 0 0 12px rgba(200,16,46,0); } }

.hero h1{
  color:#fff; font-size: clamp(2.8rem, 5.8vw, 5.2rem);
  line-height: 1.05; letter-spacing: 1.5px; margin-bottom: 0;
}
.hero h1 .accent{ color: var(--fab-red); }
.hero h1 .stroke{ -webkit-text-stroke: 2px #fff; color: transparent; }

.hero-sub{
  font-size: 1.08rem; max-width: 600px; color: #cdd5e6;
  margin-bottom: 2.2rem; line-height: 1.75;
}
.hero-actions .btn{ margin-right: .8rem; margin-bottom: .8rem; font-size: .95rem; }

/* ---- Stats bar pinned at bottom ---- */
.hero-meta{
  position: relative; z-index: 3; width: 100%;
  background: rgba(6,12,30,.92);
  backdrop-filter: blur(16px);
  border-top: 2px solid rgba(200,16,46,.5);
}
.hero-meta .row{ margin:0; }
.hero-meta .stat-col{
  border-right: 1px solid rgba(255,255,255,.08);
}
.hero-meta .stat-col:last-child{ border-right:none; }
.hero-meta .item{
  display:flex; align-items:center; gap: 1.1rem; color:#fff;
  padding: 1.5rem 1.8rem; width:100%;
  transition: background .3s;
}
.hero-meta .item:hover{ background: rgba(255,255,255,.03); }
.hero-meta .ico-wrap{
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-red); font-size: 1.15rem; color:#fff;
  box-shadow: 0 8px 22px rgba(200,16,46,.4);
}
.hero-meta .num{
  font-family: var(--font-head); font-size: 1.55rem; font-weight: 700;
  color: #fff; line-height: 1; display:block; margin-bottom: .25rem;
}
.hero-meta .lbl{
  font-size: .73rem; color: #9aacc6; letter-spacing: 2px; text-transform:uppercase;
}

/* ---- Scroll indicator (above stats bar on desktop) ---- */
.scroll-indicator{
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 100px; /* sits above stats bar */
  z-index: 4; color:#fff; font-size:.72rem; letter-spacing: 4px; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  animation: floatY 2s ease-in-out infinite; pointer-events:none;
}
.scroll-indicator .mouse{
  width: 22px; height: 36px; border: 2px solid rgba(255,255,255,.7); border-radius: 14px;
  position:relative;
}
.scroll-indicator .mouse::after{
  content:""; position:absolute; left:50%; top: 8px; transform: translateX(-50%);
  width:3px; height:6px; background:#fff; border-radius: 2px;
  animation: scrollWheel 1.6s infinite;
}
@keyframes scrollWheel{ 0%{ opacity:1; top:8px; } 100%{ opacity:0; top:18px; } }
@keyframes floatY{ 50%{ transform: translate(-50%, 8px); } }

/* ---- Slider nav controls ---- */
.hero-slider-controls{
  position:absolute; right: 2rem; bottom: 130px; z-index: 5;
  display:flex; flex-direction:column; gap:.5rem;
}
.hero-slider-controls button{
  width: 46px; height: 46px; border-radius: 50%; border:1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08); color:#fff; transition: all .3s; cursor:pointer;
}
.hero-slider-controls button:hover{ background: var(--fab-red); border-color: var(--fab-red); }

/* floating engineering shapes */
.hero-shapes{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero-shapes .shape{
  position:absolute; opacity:.06; color:#fff; font-size: 8rem;
  animation: floatShape 9s ease-in-out infinite;
}
.hero-shapes .s1{ top: 12%; left: 6%; animation-delay: 0s; }
.hero-shapes .s2{ bottom: 18%; right: 8%; font-size: 12rem; animation-delay: 2s; }
.hero-shapes .s3{ top: 40%; right: 22%; font-size: 6rem; animation-delay: 4s; }
@keyframes floatShape{ 50%{ transform: translateY(-20px) rotate(8deg); } }

/* ---------- 9. PAGE HEADER (inner pages) ---------- */
.page-header{
  position: relative; padding: 9rem 0 6rem;
  background: var(--grad-blue-dark);
  color:#fff; overflow: hidden;
}
.page-header::before{
  content:""; position:absolute; inset:0;
  background-image: var(--ph-bg, none);
  background-size: cover; background-position: center;
  opacity: .25; mix-blend-mode: overlay;
}
.page-header::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 80% 20%, rgba(200,16,46,.25), transparent 60%);
}
.page-header .container{ position: relative; z-index: 2; }
.page-header h1{ color:#fff; margin-bottom: 1rem; }
.page-header p{ color:#cdd6e8; max-width: 720px; }
.breadcrumb-fab{
  display:inline-flex; align-items:center; gap:.6rem;
  background: rgba(255,255,255,.08); padding: .5rem 1.1rem; border-radius: 50px;
  font-size:.82rem; color:#fff; letter-spacing:1px; backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
}
.breadcrumb-fab a{ color:#fff; opacity:.7; }
.breadcrumb-fab a:hover{ opacity:1; color: var(--fab-red); }
.breadcrumb-fab .sep{ opacity:.4; }

/* ---------- 10. CARDS ---------- */
.feature-card{
  background:#fff; border-radius: var(--radius-md); padding: 2.2rem 1.8rem;
  box-shadow: var(--shadow-sm); transition: all .4s ease;
  position: relative; overflow: hidden; height: 100%;
  border: 1px solid #eef0f5;
}
.feature-card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height: 4px;
  background: var(--grad-red); transform: scaleX(0); transform-origin:left; transition: transform .4s;
}
.feature-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); }
.feature-card:hover::before{ transform: scaleX(1); }
.feature-card .ico{
  width: 64px; height: 64px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(10,42,94,.08), rgba(30,95,176,.08));
  color: var(--fab-blue); display:inline-flex; align-items:center; justify-content:center;
  font-size: 1.5rem; margin-bottom: 1.4rem; transition: all .4s;
}
.feature-card:hover .ico{ background: var(--grad-blue); color:#fff; transform: rotate(-6deg); }
.feature-card h4{ font-size: 1.15rem; margin-bottom: .8rem; }
.feature-card p{ font-size: .92rem; margin: 0; }

/* service card variant */
.service-card{
  background:#fff; border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-sm); transition: all .4s ease; height:100%;
  display:flex; flex-direction:column; border: 1px solid #eef0f5;
  position: relative;
}
.service-card .img-wrap{
  position:relative; aspect-ratio: 4/3; overflow:hidden;
}
.service-card .img-wrap img{
  width:100%; height:100%; object-fit:cover; transition: transform .8s ease;
}
.service-card .img-wrap::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,18,32,.85) 100%);
}
.service-card .img-wrap .num{
  position:absolute; top: 1rem; right: 1rem; z-index:2;
  background: var(--grad-red); color:#fff;
  width: 44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head); font-weight:600;
}
.service-card .img-wrap .pill{
  position:absolute; left: 1rem; bottom: 1rem; z-index:2;
  background: rgba(255,255,255,.9); color: var(--fab-blue);
  padding:.35rem .8rem; border-radius:50px; font-size:.72rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
}
.service-card:hover .img-wrap img{ transform: scale(1.08); }
.service-card .body{
  padding: 1.6rem 1.6rem 1.8rem; display:flex; flex-direction:column; gap:.8rem; flex:1;
}
.service-card h4{ font-size: 1.1rem; margin: 0; }
.service-card p{ font-size: .9rem; margin: 0; flex:1; }
.service-card .more{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; color: var(--fab-blue); font-size:.85rem; text-transform:uppercase; letter-spacing:1px;
}
.service-card .more i{ transition: transform .3s; }
.service-card:hover .more{ color: var(--fab-red); }
.service-card:hover .more i{ transform: translateX(4px); }

/* ---------- 11. ABOUT BLOCK ---------- */
.about-grid{ position: relative; }
.about-img-wrap{
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.about-img-wrap img{ width:100%; height: 100%; object-fit:cover; }
.about-img-wrap::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 60%, rgba(10,42,94,.45));
}
.about-experience{
  position:absolute; bottom: -28px; left: -28px;
  background: var(--grad-red); color:#fff; padding: 1.4rem 1.8rem;
  border-radius: var(--radius-md); box-shadow: 0 22px 50px rgba(200,16,46,.4);
  display:flex; align-items:center; gap: 1rem; z-index: 3;
}
.about-experience .num{ font-family: var(--font-head); font-size: 3rem; font-weight: 700; line-height:1; }
.about-experience .lbl{ font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; line-height:1.2; }

.about-list{ list-style:none; padding:0; margin: 1.2rem 0 1.5rem; }
.about-list li{
  display:flex; align-items:flex-start; gap:.85rem; margin-bottom: .7rem; color: var(--fab-text);
}
.about-list li i{
  color: var(--fab-red); margin-top: 4px;
  background: rgba(200,16,46,.08); width: 26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:.7rem;
}

/* signature bar */
.about-signature{
  display:flex; align-items:center; gap: 1.2rem; margin-top: 2rem;
  padding: 1.2rem 1.4rem; background: var(--fab-grey); border-left: 4px solid var(--fab-red);
  border-radius: 8px;
}
.about-signature .av{
  width: 56px; height:56px; border-radius:50%;
  background: var(--grad-blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem;
}
.about-signature h6{ margin:0; font-family: var(--font-head); color: var(--fab-blue); letter-spacing:1px; }
.about-signature small{ color: var(--fab-muted); font-size:.78rem; letter-spacing:1px; text-transform: uppercase; }

/* ---------- 12. STATS / COUNTERS ---------- */
.stats-strip{
  background: var(--grad-blue-dark); color:#fff; padding: 4rem 0;
  position: relative; overflow:hidden;
}
.stats-strip::before{
  content:""; position:absolute; inset:0;
  background: url('../img/hero/hero2.jpeg') center/cover no-repeat;
  opacity: .12; mix-blend-mode: overlay;
}
.stat-box{ text-align:center; padding: 1.2rem; position:relative; z-index:2; }
.stat-box .num{
  font-family: var(--font-head); font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 700;
  color:#fff; line-height:1; display:block; margin-bottom:.5rem;
}
.stat-box .num .plus{ color: var(--fab-red); }
.stat-box .lbl{ color:#cdd6e8; font-size:.92rem; letter-spacing:1px; text-transform:uppercase; }
.stat-box .ico{
  width: 60px; height:60px; border-radius:50%;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom: 1rem; color: var(--fab-red); font-size:1.4rem;
}

/* ---------- 13. PROCESS / WHY ---------- */
.process-step{
  background:#fff; border-radius: var(--radius-md); padding: 2rem 1.6rem 1.8rem;
  border: 1px solid #eef0f5; height:100%; position: relative; transition: all .4s;
}
.process-step:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.process-step .step-num{
  font-family: var(--font-head); font-size: 3rem; font-weight: 700;
  color: var(--fab-grey-2); line-height:1;
}
.process-step:hover .step-num{ color: var(--fab-red); }
.process-step h5{ margin-top: .5rem; }
.process-step .ico{ font-size: 1.6rem; color: var(--fab-blue); margin-bottom: 1rem; }

/* ---------- 13b. SHOWCASE GRID (home) ---------- */
.showcase-grid .gallery-card{
  display:block; overflow:hidden; border-radius: var(--radius-md);
  aspect-ratio: 16 / 10;
  box-shadow: var(--shadow-md);
}
.showcase-grid .gallery-card img{
  width:100%; height:100%; object-fit:cover;
  display:block; transition: transform .9s ease;
}
.showcase-grid .gallery-card:hover img{ transform: scale(1.07); }
.showcase-grid .gallery-card .overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,42,94,0) 45%, rgba(6,12,30,.92) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 1.4rem 1.5rem; opacity:0; transition: all .45s ease;
}
.showcase-grid .gallery-card:hover .overlay{ opacity:1; }
.showcase-grid .gallery-card .overlay .cat{
  font-size:.72rem; letter-spacing:2px; text-transform:uppercase; color:#ff8a98; font-weight:700;
}
.showcase-grid .gallery-card .overlay h5{ color:#fff; margin: .35rem 0 0; font-size:1rem; }
.showcase-grid .gallery-card .zoom{
  position:absolute; top:.9rem; right:.9rem;
  width:38px; height:38px; border-radius:50%;
  background: var(--grad-red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform: scale(.6); transition: all .4s;
  font-size:.85rem;
}
.showcase-grid .gallery-card:hover .zoom{ opacity:1; transform: scale(1); }

/* ---------- 14. PROJECTS / GALLERY ---------- */
.gallery-filters{
  display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; margin-bottom: 3rem;
  padding: 0 1rem;
}
.gallery-filters button{
  background: #fff; border: 1.5px solid #e0e8f0; color: var(--fab-blue);
  padding: .65rem 1.6rem; border-radius: 50px; font-weight: 600; font-size: .8rem;
  letter-spacing: 1.2px; text-transform: uppercase; transition: all .35s ease;
  box-shadow: 0 2px 8px rgba(10,42,94,0.06);
  cursor: pointer; position: relative;
}
.gallery-filters button:hover{
  border-color: var(--fab-blue); transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(10,42,94,0.12);
}
.gallery-filters button.is-active{
  background: var(--grad-blue); color:#fff; border-color: var(--fab-blue);
  box-shadow: 0 8px 20px rgba(10,42,94,0.25);
  transform: translateY(-3px);
}

/* Masonry Gallery Grid */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
  grid-auto-rows: 280px;
  width: 100%;
}
.gallery-item{
  position: relative;
  width: 100%;
}
.gallery-item.size-w2{
  grid-column: span 2;
  grid-row: span 1;
}

.gallery-card{
  position: relative; overflow:hidden; border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); cursor: zoom-in; display:flex;
  flex-direction: column;
  height: 100%;
  transition: all .4s ease;
}
.gallery-card:hover{
  box-shadow: 0 16px 40px rgba(10,42,94,0.25);
  transform: translateY(-8px);
}
.gallery-card img{
  width:100%; height: 100%; object-fit: cover; transition: transform 1s ease;
}
.gallery-card .overlay{
  position:absolute; inset:0; background: linear-gradient(135deg, rgba(10,42,94,.15) 0%, rgba(6,12,30,.88) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 1.8rem; opacity:0; transition: all .5s ease;
}
.gallery-card:hover img{ transform: scale(1.12); }
.gallery-card:hover .overlay{ opacity:1; }
.gallery-card .overlay .cat{
  font-size:.7rem; letter-spacing:2.5px; text-transform:uppercase; color: #ff8a98;
  font-weight:700; margin-bottom: .5rem;
}
.gallery-card .overlay h5{
  color:#fff; margin: 0; font-size: 1.15rem; font-weight: 600;
  line-height: 1.3;
}
.gallery-card .zoom{
  position:absolute; top:1.2rem; right:1.2rem;
  width:48px; height:48px; border-radius:50%; background: var(--grad-red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform: scale(.6); transition: all .4s ease;
  font-size: 1.3rem;
}
.gallery-card:hover .zoom{ opacity:1; transform: scale(1); }

/* ---------- 15. CLIENTS ---------- */
.client-logo{
  background:#fff; border:1px solid #eef0f5; border-radius: var(--radius-md);
  padding: 1.6rem 1.2rem; height: 110px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; transition: all .4s; box-shadow: var(--shadow-sm);
}
.client-logo span{
  font-family: var(--font-head); color: var(--fab-blue);
  letter-spacing: 1.5px; font-weight: 600; font-size: .95rem;
}
.client-logo:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--fab-blue); }
.client-logo:hover span{ color: var(--fab-red); }

/* ---------- 16. TIMELINE / FINANCIAL ---------- */
.fin-card{
  background: #fff; border-radius: var(--radius-md); padding: 2rem;
  box-shadow: var(--shadow-sm); border:1px solid #eef0f5; height:100%;
  position: relative; overflow:hidden;
}
.fin-card .year{
  font-family: var(--font-head); color: var(--fab-red);
  letter-spacing: 2px; font-weight: 600; font-size: .92rem;
}
.fin-card .amount{
  font-family: var(--font-head); font-size: 2.6rem; font-weight: 700;
  color: var(--fab-blue); line-height:1; margin: .4rem 0;
}
.fin-bar{
  height: 8px; background: var(--fab-grey-2); border-radius: 50px; overflow:hidden; margin-top: 1.2rem;
}
.fin-bar > span{
  display:block; height:100%; background: var(--grad-blue); border-radius:50px;
  width: 0; transition: width 1.4s ease;
}
.fin-card.is-peak .amount{ color: var(--fab-red); }
.fin-card.is-peak .fin-bar > span{ background: var(--grad-red); }

.timeline{ position: relative; padding: 2rem 0; }
.timeline::before{
  content:""; position:absolute; left: 50%; top:0; bottom:0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--fab-blue) 12%, var(--fab-blue) 88%, transparent);
  transform: translateX(-50%);
}
.timeline-item{ width: 50%; padding: 1rem 2.5rem; position: relative; }
.timeline-item:nth-child(odd){ margin-left: 0; text-align:right; }
.timeline-item:nth-child(even){ margin-left: 50%; }
.timeline-item .dot{
  width: 18px; height: 18px; background: var(--fab-red); border:4px solid #fff;
  border-radius:50%; position: absolute; top: 2rem; box-shadow: 0 0 0 3px var(--fab-blue);
}
.timeline-item:nth-child(odd) .dot{ right: -9px; }
.timeline-item:nth-child(even) .dot{ left: -9px; }
.timeline-card{
  background:#fff; padding: 1.4rem 1.6rem; border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); border:1px solid #eef0f5;
}
.timeline-card .yr{ color: var(--fab-red); font-weight:700; letter-spacing:2px; font-size:.85rem; }
.timeline-card h5{ margin: .3rem 0 .5rem; }

/* ---------- 17. QUALITY / FEATURES STRIP ---------- */
.q-card{
  background:#fff; border-radius: var(--radius-md); padding: 2rem 1.6rem;
  box-shadow: var(--shadow-sm); border:1px solid #eef0f5; height:100%;
  display:flex; gap:1.2rem; transition: all .4s;
}
.q-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.q-card .ico{
  width: 56px; height: 56px; flex-shrink:0; border-radius: 14px;
  background: var(--grad-blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size: 1.3rem;
}
.q-card h5{ margin: 0 0 .5rem; font-size: 1.05rem; }
.q-card p{ margin:0; font-size:.9rem; }

/* ---------- 18. CTA STRIP ---------- */
.cta-strip{
  background: var(--grad-blue-dark); color:#fff; padding: 4rem 0;
  position:relative; overflow:hidden;
}
.cta-strip::before{
  content:""; position:absolute; inset:0;
  background: url('../img/gallery/gallery3.jpeg') center/cover no-repeat;
  opacity: .15; mix-blend-mode: overlay;
}
.cta-strip::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 90% 10%, rgba(200,16,46,.4), transparent 50%);
}
.cta-strip > .container{ position:relative; z-index:2; }
.cta-strip h2{ color:#fff; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.cta-strip h2 span{ color: #ff8a98; }

/* ---------- 19. FOOTER ---------- */
.site-footer{
  background: #06101e; color:#9aa6c0;
}
.footer-top{ padding: 5rem 0 3rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.footer-brand{
  display:inline-flex; align-items:center; gap: .7rem;
  font-family: var(--font-head); color:#fff; letter-spacing: 2px;
}
.footer-brand img{ height: 70px; }
.footer-brand strong{ color:#fff; font-size: 1.1rem; }
.footer-brand span small{ color: var(--fab-red); }
.footer-about{ font-size: .92rem; line-height: 1.7; }
.footer-title{
  color:#fff; font-family: var(--font-head); letter-spacing:2px;
  margin-bottom: 1.4rem; font-size: 1rem; position:relative; padding-bottom:.7rem;
}
.footer-title::after{
  content:""; position:absolute; left:0; bottom:0;
  width: 36px; height:3px; background: var(--fab-red);
}
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom: .55rem; }
.footer-links a{ color:#9aa6c0; font-size:.92rem; transition: all .3s; }
.footer-links a::before{
  content:"\f105"; font-family:"Font Awesome 6 Free"; font-weight:900;
  margin-right:.5rem; color: var(--fab-red); opacity: 0; transition: all .3s;
}
.footer-links a:hover{ color:#fff; padding-left: 6px; }
.footer-links a:hover::before{ opacity:1; }

.footer-contact{ list-style:none; padding:0; margin:0; }
.footer-contact li{ display:flex; gap:.85rem; margin-bottom: .9rem; font-size:.9rem; line-height:1.55; }
.footer-contact i{ color: var(--fab-red); margin-top: 4px; width: 18px; }
.footer-contact a{ color:#9aa6c0; }
.footer-contact a:hover{ color:#fff; }

.footer-social{ margin-top: 1.4rem; display:flex; gap:.6rem; }
.footer-social a{
  width: 38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.06); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
  transition: all .3s;
}
.footer-social a:hover{ background: var(--fab-red); transform: translateY(-3px); }

.footer-bottom{ padding: 1.4rem 0; font-size:.85rem; color:#7984a3; }
.footer-bottom strong{ color:#fff; }

/* ---------- 20. FLOATING BUTTONS ---------- */
.float-btns{
  position: fixed; right: 18px; bottom: 18px; z-index: 1080;
  display:flex; flex-direction:column; gap:.6rem;
}
.float-btns .fab{
  width: 48px; height: 48px; border-radius: 50%; border:none;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size: 1.05rem; box-shadow: 0 12px 28px rgba(0,0,0,.18);
  transition: all .3s ease; position:relative; overflow:hidden;
}
.float-btns .fab span{
  position:absolute; right: 56px; top:50%; transform: translateY(-50%);
  background: var(--fab-dark); color:#fff; padding: .35rem .7rem; border-radius: 6px;
  font-size:.78rem; white-space:nowrap; opacity:0; pointer-events:none; transition: all .3s;
}
.float-btns .fab:hover span{ opacity:1; right: 60px; }
.float-btns .whatsapp{ background: #25d366; }
.float-btns .call{ background: var(--fab-blue); }
.float-btns .top{ background: var(--fab-red); opacity: 0; pointer-events:none; transform: translateY(20px); }
.float-btns .top.is-visible{ opacity:1; pointer-events:auto; transform: translateY(0); }
.float-btns .fab:hover{ transform: translateY(-3px); }

/* ---------- 21. CONTACT FORM ---------- */
.contact-card{
  background:#fff; border-radius: var(--radius-lg); padding: 2.5rem;
  box-shadow: var(--shadow-md); border:1px solid #eef0f5;
}
.form-control, .form-select{
  border: 1px solid #dde2ec; border-radius: 10px;
  padding: .9rem 1rem; font-size: .95rem; transition: all .3s;
  background: #fafbfd;
}
.form-control:focus, .form-select:focus{
  border-color: var(--fab-blue); box-shadow: 0 0 0 4px rgba(10,42,94,.08);
  background:#fff;
}
.form-label{ font-weight:600; color: var(--fab-text); font-size:.85rem; letter-spacing:.5px; text-transform:uppercase; margin-bottom:.4rem; }

.contact-info-card{
  background: var(--fab-dark); color:#fff; border-radius: var(--radius-lg);
  padding: 2.5rem; height:100%; position: relative; overflow:hidden;
}
.contact-info-card::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 90% 10%, rgba(200,16,46,.45), transparent 50%);
}
.contact-info-card > *{ position:relative; z-index:2; }
.contact-info-card h3{ color:#fff; }
.info-item{ display:flex; gap:1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.info-item:last-child{ border-bottom:none; }
.info-item .ico{
  width: 46px; height:46px; border-radius: 12px;
  background: var(--grad-red); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.info-item h6{ color:#fff; margin: 0 0 .2rem; font-size:.9rem; letter-spacing:1px; }
.info-item p, .info-item a{ color:#cdd6e8; font-size:.92rem; margin:0; }
.info-item a:hover{ color:#fff; }

/* map embed */
.map-frame{
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md);
  border: 1px solid #eef0f5;
}
.map-frame iframe{ display:block; width:100%; height: 460px; border:0; }

/* ---------- 22b. FACTORY STRENGTH SECTION ---------- */
.factory-strength-section{
  position: relative; overflow: hidden;
}
.factory-bg{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.35) saturate(.7);
}
.factory-strength-inner{
  position: relative; z-index: 2;
  color: #fff;
}
.factory-strength-inner h2,
.factory-strength-inner h3,
.factory-strength-inner h4{ color: #fff; }
.factory-strength-inner p{ color: #c8d5e8; }
.factory-strength-inner .about-list li{ color: #cdd6e8; }
.factory-strength-inner .about-list li i{
  background: rgba(200,16,46,.25); color: #ff8a98;
}
.factory-strength-inner .eyebrow{ color: #ff8a98; }
.factory-strength-inner .eyebrow::before{ background: #ff8a98; }

.factory-img{
  width: 100%; height: 215px; object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
  display: block;
  border: 2px solid rgba(255,255,255,.08);
}
.factory-img-wide{
  height: 235px;
}

/* ---------- 23. MISC ---------- */
.split-heading{ display:inline-block; position:relative; }
.split-heading::after{
  content:""; position:absolute; left: -10px; right: -10px; bottom: 6px; height: 14px;
  background: rgba(200,16,46,.18); z-index:-1;
}

.tag-pill{
  display:inline-flex; gap:.4rem; align-items:center;
  padding:.35rem .85rem; border-radius:50px; font-size:.78rem;
  font-weight:600; text-transform:uppercase; letter-spacing:1px;
  background: rgba(10,42,94,.08); color: var(--fab-blue);
}

.bg-blueprint{
  background-color: #f7f9fc;
  background-image:
    linear-gradient(rgba(10,42,94,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,42,94,.05) 1px, transparent 1px);
  background-size: 36px 36px;
}