/* =========================================================
   0. TOKENS
========================================================= */
:root{
  --navy: #0B1F3A;
  --navy-deep: #071426;
  --navy-mid: #12294D;
  --orange: #F7941D;
  --orange-dark: #D97B0A;
  --white: #FFFFFF;
  --grey-bg: #F4F6F8;
  --grey-panel: #ECEFF3;
  --steel: #4A5A70;
  --slate: #8B95A1;
  --line-orange: rgba(247,148,29,0.32);
  --line-white: rgba(255,255,255,0.10);

  --font-display: 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 6px;
  --shadow-soft: 0 20px 50px -20px rgba(11,31,58,0.25);
  --shadow-card: 0 10px 30px -12px rgba(11,31,58,0.18);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-display);
  color: var(--navy);
  background: var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background: var(--orange); color:#fff; }

.mono{ font-family: var(--font-mono); letter-spacing:.04em; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

a{ text-decoration:none; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

.container-xl{ max-width:1280px; }

/* =========================================================
   1. BLUEPRINT / TITLE-BLOCK MOTIF (signature element)
========================================================= */
.crop-mark{
  position:absolute; width:22px; height:22px; pointer-events:none; z-index:3;
}
.crop-mark::before, .crop-mark::after{ content:""; position:absolute; background:var(--orange); }
.crop-mark::before{ width:100%; height:2px; top:0; left:0; }
.crop-mark::after{ width:2px; height:100%; top:0; left:0; }
.crop-mark.tl{ top:18px; left:18px; }
.crop-mark.tr{ top:18px; right:18px; }
.crop-mark.tr::before{ left:auto; right:0; }
.crop-mark.tr::after{ left:auto; right:0; }
.crop-mark.bl{ bottom:18px; left:18px; }
.crop-mark.bl::before{ top:auto; bottom:0; }
.crop-mark.bl::after{ top:auto; bottom:0; }
.crop-mark.br{ bottom:18px; right:18px; }
.crop-mark.br::before{ top:auto; bottom:0; left:auto; right:0; }
.crop-mark.br::after{ top:auto; bottom:0; left:auto; right:0; }
.crop-mark.light::before, .crop-mark.light::after{ background: rgba(255,255,255,0.55); }

.sheet-label{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--orange-dark);
  margin-bottom:18px;
}
.sheet-label::before{
  content:""; display:inline-block; width:26px; height:1px; background:var(--orange);
}
.sheet-label.on-dark{ color:#FFC978; }
.sheet-label.on-dark::before{ background:#FFC978; }

.blueprint-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-white) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-white) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.15) 85%);
}

/* =========================================================
   2. NAVBAR
========================================================= */
.navbar-meridian{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:22px 0;
  transition: all .4s var(--ease);
  background: transparent;
}
.navbar-meridian.scrolled{
  padding:12px 0;
  background: rgba(11,31,58,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -15px rgba(0,0,0,0.5);
}
.nav-brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-weight:700; font-size:1.35rem;
  color:#fff !important; letter-spacing:.01em;
}
.nav-brand .mark{
  width:38px; height:38px; border-radius:9px;
  background: linear-gradient(145deg, var(--orange), var(--orange-dark));
  display:flex; align-items:center; justify-content:center;
  color:var(--navy-deep); font-weight:900; font-size:1.05rem;
  box-shadow: 0 6px 16px -4px rgba(247,148,29,0.6);
}
.nav-brand .brand-sub{
  display:block; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.22em; font-weight:400; color:#FFC978; margin-top:-2px;
}
.navbar-meridian .nav-link{
  color: rgba(255,255,255,0.82) !important;
  font-weight:500; font-size:.92rem; letter-spacing:.02em;
  margin:0 4px; padding:8px 4px !important;
  position:relative;
  transition:color .25s var(--ease);
}
.navbar-meridian .nav-link::after{
  content:""; position:absolute; left:4px; right:4px; bottom:2px; height:2px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.navbar-meridian .nav-link:hover{ color:#fff !important; }
.navbar-meridian .nav-link:hover::after{ transform:scaleX(1); }
.btn-quote{
  background:var(--orange); color:var(--navy-deep) !important; font-weight:600;
  padding:11px 26px; border-radius:8px; font-size:.9rem; letter-spacing:.02em;
  box-shadow: 0 8px 20px -8px rgba(247,148,29,0.7);
  transition: all .3s var(--ease);
  border:1px solid var(--orange);
}
.btn-quote:hover{ background:transparent; color:#fff !important; transform:translateY(-2px); }
.navbar-toggler{ border:none; color:#fff; }
.navbar-toggler i{ color:#fff; font-size:1.4rem; }

.navbar-meridian .nav-link .active { color:#f07102 !important; font-weight:600; }

/* =========================================================
   3. HERO
========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-mid) 100%);
  overflow:hidden;
  padding-top:100px;
}
.hero-photo{
  position:absolute; inset:0;
  background-image:url('images/Slider221.jpg');
  background-size:cover; background-position:center;
  opacity:0.9;
  mix-blend-mode:luminosity;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,20,38,0.15) 0%, rgba(7,20,38,0.55) 60%, var(--navy-deep) 100%);
}
.hero-grid-anim{
  position:absolute; inset:-50px;
  background-image:
    linear-gradient(var(--line-orange) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-orange) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:0.12;
  animation: drift 26s linear infinite;
}
@keyframes drift{
  0%{ transform: translate(0,0); }
  100%{ transform: translate(64px,64px); }
}
.hero-content{ position:relative; z-index:2; }
.hero-eyebrow{
  font-family:var(--font-mono); font-size:12.5px; color:#FFC978;
  letter-spacing:.22em; text-transform:uppercase; margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.hero-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(247,148,29,0.25); }
.hero h1{
  font-weight:800; color:#fff; line-height:1.06;
  font-size: clamp(1.4rem, 5vw, 3.3rem);
  letter-spacing:-0.01em;
  margin-bottom:26px;
}
.hero h1 em{ font-style:normal; color:var(--orange); position:relative; }
.hero p.lead-text{
  color:rgba(255,255,255,0.72); font-size:1.12rem; font-weight:300;
  max-width:560px; margin-bottom:38px; line-height:1.7;
}
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:70px; }
.btn-primary-mer{
  background:var(--orange); border:1px solid var(--orange); color:var(--navy-deep);
  font-weight:600; padding:15px 32px; border-radius:8px; font-size:.95rem;
  transition:all .3s var(--ease); box-shadow: 0 12px 28px -10px rgba(247,148,29,0.65);
}
.btn-primary-mer:hover{ background:var(--orange-dark); border-color:var(--orange-dark); color:#fff; transform:translateY(-3px); }
.btn-outline-mer{
  border:1px solid rgba(255,255,255,0.35); color:#fff; font-weight:500;
  padding:15px 30px; border-radius:8px; font-size:.95rem; background:rgba(255,255,255,0.04);
  backdrop-filter:blur(6px); transition:all .3s var(--ease);
  display:inline-flex; align-items:center; gap:10px;
}
.btn-outline-mer:hover{ background:rgba(255,255,255,0.12); border-color:#fff; color:#fff; }

/* hero spec strip - title block styling */
.spec-strip{
  position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,0.14);
  padding-top:30px;
}
.spec-item{ padding:0 28px 0 0; border-right:1px solid rgba(255,255,255,0.14); }
.spec-item:last-child{ border-right:none; }
.spec-num{
  font-family:var(--font-mono); font-weight:600; color:#fff;
  font-size:clamp(1.5rem,3vw,2.1rem); line-height:1;
}
.spec-num span{ color:var(--orange); }
.spec-cap{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.5); margin-top:8px;
}
.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:2; color:rgba(255,255,255,0.55); font-size:1.3rem;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* =========================================================
   4. SECTION GENERICS
========================================================= */
section{ position:relative; }
.section-pad{ padding:120px 0; }
@media (max-width: 767.98px){ .section-pad{ padding:80px 0; } }
.bg-grey{ background:var(--grey-bg); }
.bg-navy{ background: var(--navy-deep); color:#fff; }

.section-title{
  font-weight:700; letter-spacing:-0.01em; color:var(--navy);
  font-size:clamp(1.9rem, 3.2vw, 2.8rem); line-height:1.15; margin-bottom:20px;
}
.section-title.on-dark{ color:#fff; }
.section-sub{
  color:var(--steel); font-size:1.05rem; font-weight:300; line-height:1.7; max-width:620px;
}
.section-sub.on-dark{ color:rgba(255,255,255,0.65); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(28px); transition: all .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* =========================================================
   5. ABOUT / GLASS STAT CARDS
========================================================= */
.about-visual{ position:relative; }
.about-img-wrap{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-soft);
}
.about-img-wrap img{ width:100%; display:block; height:520px; object-fit:cover; }
.glass-float{
  position:absolute; bottom:-34px; right:-24px; z-index:4;
  background: rgba(11,31,58,0.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-md);
  padding:26px 30px; color:#fff; width:230px;
  box-shadow: 0 20px 40px -14px rgba(11,31,58,0.5);
}
@media (max-width:991.98px){ .glass-float{ position:static; margin-top:-40px; margin-left:20px; width:calc(100% - 40px);} }
.glass-float .num{ font-family:var(--font-mono); font-size:2.4rem; font-weight:600; color:var(--orange); }
.glass-float .cap{ font-size:.85rem; color:rgba(255,255,255,0.7); margin-top:4px; }

.about-checks{ list-style:none; padding:0; margin:30px 0 0; }
.about-checks li{
  display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; color:var(--steel); font-size:.98rem;
}
.about-checks i{
  color:var(--orange); background:rgba(247,148,29,0.1); width:30px; height:30px; flex:0 0 30px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; margin-top:2px;
}

/* =========================================================
   6. SERVICES
========================================================= */
.service-card{
  background:#fff; border-radius:var(--radius-md); padding:38px 30px;
  box-shadow: var(--shadow-card); height:100%;
  border:1px solid rgba(11,31,58,0.05);
  transition: all .4s var(--ease); position:relative; overflow:hidden;
}
.service-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--orange), var(--orange-dark));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.service-card:hover{ transform:translateY(-8px); box-shadow: 0 26px 50px -20px rgba(11,31,58,0.28); }
.service-card:hover::before{ transform:scaleX(1); }
.service-icon{
  width:60px; height:60px; border-radius:14px;
  background: linear-gradient(145deg, var(--navy), var(--navy-mid));
  color:var(--orange); display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin-bottom:24px; transition: all .4s var(--ease);
}
.service-card:hover .service-icon{ background: linear-gradient(145deg, var(--orange), var(--orange-dark)); color:#fff; }
.service-card h5{ font-weight:600; margin-bottom:12px; color:var(--navy); }
.service-card p{ color:var(--steel); font-size:.93rem; line-height:1.7; margin-bottom:0; }
.service-index{
  position:absolute; top:24px; right:28px; font-family:var(--font-mono);
  font-size:.75rem; color:var(--slate); letter-spacing:.1em;
}

/* =========================================================
   7. PROJECTS
========================================================= */
.project-card{
  position:relative; border-radius:var(--radius-md); overflow:hidden; height:420px;
  box-shadow: var(--shadow-card);
}
.project-card img{
  width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease);
}
.project-card:hover img{ transform:scale(1.08); }
.project-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 30%, rgba(7,20,38,0.94) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:30px;
}
.project-tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange); margin-bottom:8px; display:block;
}
.project-overlay h5{ color:#fff; font-weight:600; margin-bottom:6px; }
.project-overlay p{ color:rgba(255,255,255,0.65); font-size:.85rem; margin-bottom:0; }
.project-arrow{
  position:absolute; top:22px; right:22px; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,0.14); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; color:#fff;
  opacity:0; transform:translateY(-8px); transition: all .35s var(--ease);
}
.project-card:hover .project-arrow{ opacity:1; transform:translateY(0); }

/* filter pills */
.filter-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.filter-pill{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 20px; border-radius:30px; border:1px solid rgba(11,31,58,0.15);
  color:var(--steel); background:transparent; cursor:pointer; transition:all .3s var(--ease);
}
.filter-pill:hover{ border-color:var(--orange); color:var(--orange-dark); }
.filter-pill.active{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* =========================================================
   8. PROCESS
========================================================= */
.process-track{ position:relative; }
.process-track::before{
  content:""; position:absolute; top:34px; left:0; right:0; height:1px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 8px, transparent 8px 16px);
  display:none;
}
@media (min-width:992px){ .process-track::before{ display:block; } }
.process-step{ position:relative; padding-top:0; }
.process-step-num{
  font-family:var(--font-mono); font-size:.85rem; color:var(--orange);
  width:68px; height:68px; border:1px solid rgba(255,255,255,0.2); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:1.1rem;
  background:var(--navy-deep); margin-bottom:26px; position:relative; z-index:2;
}
.process-step h5{ color:#fff; font-weight:600; margin-bottom:10px; }
.process-step p{ color:rgba(255,255,255,0.6); font-size:.9rem; line-height:1.7; }

/* =========================================================
   9. TESTIMONIALS
========================================================= */
.testi-card{
  background:#fff; border-radius:var(--radius-lg); padding:44px 40px;
  box-shadow: var(--shadow-card); position:relative;
}
.testi-quote-icon{ color:var(--orange); font-size:2.2rem; opacity:.35; margin-bottom:16px; }
.testi-text{ font-size:1.15rem; font-weight:300; color:var(--navy); line-height:1.75; margin-bottom:30px; }
.testi-person{ display:flex; align-items:center; gap:14px; }
.testi-person img{ width:52px; height:52px; border-radius:50%; object-fit:cover; }
.testi-person h6{ font-weight:600; margin-bottom:2px; color:var(--navy); }
.testi-person span{ font-size:.82rem; color:var(--slate); }
.carousel-indicators-mer{ display:flex; gap:8px; margin-top:34px; }
.carousel-indicators-mer button{
  width:34px; height:4px; border-radius:2px; border:none; background:rgba(11,31,58,0.15); cursor:pointer;
  transition:all .3s var(--ease);
}
.carousel-indicators-mer button.active{ background:var(--orange); width:48px; }

/* =========================================================
   10. CTA BANNER
========================================================= */
.cta-banner{
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--radius-lg);
  padding: 70px 60px; position:relative; overflow:hidden;
  box-shadow: var(--shadow-soft);
}
@media (max-width:767.98px){ .cta-banner{ padding:50px 28px; } }
.cta-banner h3{ color:#fff; font-weight:700; font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:14px; }
.cta-banner p{ color:rgba(255,255,255,0.65); max-width:480px; margin-bottom:0; }

/* =========================================================
   11. FOOTER (title block)
========================================================= */
footer.site-footer{ background:var(--navy-deep); color:rgba(255,255,255,0.6); }
.footer-top{ padding:90px 0 60px; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:20px; color:#fff; font-weight:700; font-size:1.3rem; }
.footer-col h6{
  font-family:var(--font-mono); color:#fff; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:22px;
}
.footer-col ul{ list-style:none; padding:0; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col ul li a{ color:rgba(255,255,255,0.55); font-size:.92rem; transition:color .25s var(--ease); }
.footer-col ul li a:hover{ color:var(--orange); }
.footer-social{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:8px; border:1px solid rgba(255,255,255,0.15); color:#fff; transition:all .3s var(--ease);
}
.footer-social:hover{ background:var(--orange); border-color:var(--orange); color:var(--navy-deep); }
.footer-bottom{
  padding:26px 0; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.03em;
  color:rgba(255,255,255,0.4);
}
.form-control-mer{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); color:#fff;
  border-radius:8px 0 0 8px; padding:12px 16px; font-size:.9rem;
}
.form-control-mer:focus{ background:rgba(255,255,255,0.09); color:#fff; box-shadow:none; border-color:var(--orange); }
.form-control-mer::placeholder{ color:rgba(255,255,255,0.4); }
.btn-sub{ background:var(--orange); border:1px solid var(--orange); color:var(--navy-deep); border-radius:0 8px 8px 0; padding:0 20px; font-weight:600; }

/* back to top */
.back-to-top{
  position:fixed; bottom:28px; right:28px; z-index:999;
  width:48px; height:48px; border-radius:50%; background:var(--orange); color:var(--navy-deep);
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 26px -8px rgba(247,148,29,0.7);
  opacity:0; visibility:hidden; transform:translateY(12px); transition:all .35s var(--ease); border:none;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* loader */
#page-loader{
  position:fixed; inset:0; z-index:2000; background:var(--navy-deep);
  display:flex; align-items:center; justify-content:center; transition: opacity .6s var(--ease), visibility .6s;
}
#page-loader.hide{ opacity:0; visibility:hidden; }
.loader-mark{
  width:56px; height:56px; border-radius:14px; background:linear-gradient(145deg,var(--orange),var(--orange-dark));
  display:flex; align-items:center; justify-content:center; color:var(--navy-deep); font-weight:900; font-size:1.4rem;
  animation: pulseLoad 1.1s ease-in-out infinite;
}
@keyframes pulseLoad{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(0.88); opacity:.7;} }


.member-card{
    border-radius:20px;
    overflow:hidden;
    transition:.4s;
    background:#fff;
}

.member-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.18)!important;
}

.member-img{
    overflow:hidden;
    height:380px;
    position:relative;
}

.member-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s;
}

.member-card:hover img{
    transform:scale(1.08);
}

.member-card .card-body{
    padding:30px;
}

.member-card h4{
    color:#0b1f3a;
}

.member-card .badge{
    font-size:.75rem;
    letter-spacing:1px;
    border-radius:30px;
}

.member-card i{
    width:20px;
}


#page-banner{
    position:relative;
    min-height:320px;
    background:url('images/Slider221.jpg') center center/cover no-repeat;
    display:flex;
    align-items:center;
}

.banner-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(7,25,45,.88) 0%,
            rgba(7,25,45,.72) 45%,
            rgba(7,25,45,.35) 100%);
}

#page-banner .container{
    position:relative;
    z-index:2;
}

#page-banner h1{
    text-shadow:0 5px 18px rgba(0,0,0,.35);
}

#page-banner .lead{
    max-width:650px;
    color:rgba(255,255,255,.9);
}

.breadcrumb-item + .breadcrumb-item::before{
    color:rgba(255,255,255,.7);
}

.breadcrumb a{
    transition:.3s;
}

.breadcrumb a:hover{
    color:#ffc107 !important;
}