/* ==========================================================================
   NF GLAZING SYSTEMS & INFRATECH — Design Token System
   Signature concept: "Curtain Wall Grid" — the site is framed the way a
   glazing facade is framed: mullions, corner brackets, glass-sheen sweeps.
   ========================================================================== */

:root{
  --navy:        #001B47;
  --navy-deep:   #000E28;
  --navy-soft:   rgba(0,27,71,.06);
  --charcoal:    #505052;
  --charcoal-lt: #7A7B7D;
  --glass-deep:  #0061A9;
  --glass:       #0090D9;
  --glass-bright:#00B4EF;
  --glass-pale:  #E8F4FB;
  --white:       #FFFFFF;
  --bg-tint:     #F5F8FB;
  --line:        #DCE4EA;
  --line-strong: #B9C6D1;

  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --grid-gap: clamp(24px, 4vw, 64px);
  --radius: 2px;
  --ease: cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--navy);
  background:var(--white);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

h1,h2,h3,h4,.font-display{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.05;
  color:var(--navy);
  text-transform:uppercase;
}
.font-mono{font-family:var(--font-mono);}

a{color:var(--glass-deep); text-decoration:none;}
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--glass-bright); outline-offset:3px;
}

.container{max-width:1240px;}

/* ---------- eyebrow / spec labels ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--glass-deep);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:26px;height:1px;background:var(--glass-deep);
  display:inline-block;
}

.section-title{
  font-size:clamp(2rem, 3.2vw, 3.1rem);
  margin-bottom:18px;
}
.section-lede{
  color:var(--charcoal);
  font-size:1.05rem;
  max-width:640px;
}

section{position:relative;}
.pad-lg{padding:clamp(64px,5vw,120px) 0;}
.pad-md{padding:clamp(48px,6vw,84px) 0;}
.bg-tint{background:var(--bg-tint);}
.bg-navy{background:var(--navy); color:var(--white);}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy .eyebrow{color:var(--white);}
.bg-navy .eyebrow::before{background:var(--glass-bright);}

/* ==========================================================================
   MULLION GRID — background pattern evoking a curtain-wall facade
   ========================================================================== */
.mullion-bg{
  position:relative;
  background-image:
    linear-gradient(90deg, rgba(0,27,71,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,27,71,.06) 1px, transparent 1px);
  background-size:64px 64px;
}
.bg-navy.mullion-bg{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.07) 1px, transparent 1px);
}

/* corner bracket motif — like an aluminium frame joint */
.frame-corners{position:relative;}
.frame-corners::before,
.frame-corners::after{
  content:"";
  position:absolute;
  width:22px;height:22px;
  border:2px solid var(--glass);
  pointer-events:none;
  z-index:2;
}
.frame-corners::before{top:-2px;left:-2px;border-right:none;border-bottom:none;}
.frame-corners::after{bottom:-2px;right:-2px;border-left:none;border-top:none;}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar-nf{
  padding:5px 0;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:padding .3s var(--ease), box-shadow .3s var(--ease);
}
.navbar-nf.is-scrolled{
  padding:8px 0;
  box-shadow:0 8px 24px rgba(0,27,71,.08);
}
.navbar-nf .navbar-brand img{
/*  height:52px;*/
   transition:height .3s var(--ease);
      width: 45%;
}
.navbar-nf.is-scrolled .navbar-brand img{
/*  height:42px;*/
}
.navbar-nf .nav-link{
  font-family:var(--font-mono);
/*  font-size:.78rem;*/
      font-size: 16px;
      font-weight: bold;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--navy) !important;
  margin:0 14px;
  padding:8px 0 !important;
  position:relative;
}
.navbar-nf .nav-link::after{
  content:"";
  position:absolute;left:0;bottom:2px;
  width:0;height:2px;background:var(--glass);
  transition:width .3s var(--ease);
}
.navbar-nf .nav-link:hover::after,
.navbar-nf .nav-link.active::after{width:100%;}
.navbar-nf .nav-link.active{color:var(--glass-deep) !important;}
.btn-quote{
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--navy);
  color:var(--white) !important;
  padding:11px 22px;
  border:1px solid var(--navy);
  transition:all .3s var(--ease);
}
.btn-quote:hover{background:var(--glass-deep); border-color:var(--glass-deep); color:var(--white) !important;}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-nf{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:15px 30px;
  border:1px solid var(--navy);
  color:var(--navy);
  background:transparent;
  transition:color .35s var(--ease), border-color .35s var(--ease);
  z-index:1;
}
.btn-nf::before{
  content:"";
  position:absolute; inset:0;
  background:var(--navy);
  transform:translateX(-101%);
  transition:transform .4s var(--ease);
  z-index:-1;
}
.btn-nf:hover{color:var(--white);}
.btn-nf:hover::before{transform:translateX(0);}
.btn-nf-solid{background:var(--navy); color:var(--white);}
.btn-nf-solid::before{background:var(--glass-deep);}
.btn-nf-solid:hover{color:var(--white);}
.btn-nf-light{border-color:rgba(255,255,255,.5); color:var(--white);}
.btn-nf-light::before{background:var(--white);}
.btn-nf-light:hover{color:var(--navy);}

.fixed-top{
  position: sticky;
}

/* ==========================================================================
   HERO SLIDER
   ========================================================================== */
.hero{
  position:relative;
  height:92vh;
  min-height:620px;
  overflow:hidden;
  background:var(--navy-deep);
}
.hero-slide{
  position:absolute; inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity 1.1s var(--ease);
  display:flex;
  align-items:center;
}
.hero-slide.is-active{opacity:1; visibility:visible; z-index:2;}
.hero-slide .hero-media{
  position:absolute; inset:0;
  overflow:hidden;
}
.hero-slide .hero-media svg{
  position:absolute; right:-4%; top:0; height:100%; width:auto; max-width:none;
  opacity:.9;
}
.hero-slide .hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, var(--navy-deep) 28%, rgba(0,14,40,.55) 55%, rgba(0,14,40,.15) 78%);
}
.hero-content{
  position:relative; z-index:3;
  color:var(--white);
  padding-top:60px;
}
.hero-content .eyebrow{color:var(--glass-bright);}
.hero-content .eyebrow::before{background:var(--glass-bright);}
.hero-title{
  font-size:clamp(2.6rem, 6vw, 5.4rem);
  color:var(--white);
  margin-bottom:22px;
  opacity:0; transform:translateY(24px);
}
.hero-slide.is-active .hero-title{
  animation:heroUp .9s var(--ease) .25s forwards;
}
.hero-sub{
  font-size:1.1rem;
  color:rgba(255,255,255,.82);
  max-width:520px;
  margin-bottom:34px;
  opacity:0; transform:translateY(18px);
}
.hero-slide.is-active .hero-sub{animation:heroUp .9s var(--ease) .45s forwards;}
.hero-cta{opacity:0; transform:translateY(18px);}
.hero-slide.is-active .hero-cta{animation:heroUp .9s var(--ease) .6s forwards;}
@keyframes heroUp{to{opacity:1; transform:translateY(0);}}

.hero-shine{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(115deg, transparent 40%, rgba(0,180,239,.18) 48%, transparent 56%);
  transform:translateX(-100%);
  pointer-events:none;
}
.hero-slide.is-active .hero-shine{animation:heroShine 2.6s var(--ease) .2s 1;}
@keyframes heroShine{to{transform:translateX(100%);}}

.hero-grid-overlay{
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:72px 72px;
}

.hero-nav{
  position:absolute; z-index:4; bottom:38px; left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:22px;
}
.hero-dots{display:flex; gap:10px;}
.hero-dot{
  width:34px; height:3px; background:rgba(255,255,255,.35);
  border:none; padding:0; cursor:pointer; position:relative; overflow:hidden;
}
.hero-dot::after{
  content:""; position:absolute; inset:0; background:var(--glass-bright);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.hero-dot.is-active::after{transform:scaleX(1);}
.hero-arrows{position:absolute; z-index:4; bottom:36px; right:5%; display:flex; gap:10px;}
.hero-arrow{
  width:44px;height:44px;border:1px solid rgba(255,255,255,.4);
  background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;
  transition:all .3s var(--ease); cursor:pointer;
}
.hero-arrow:hover{background:var(--glass-bright); border-color:var(--glass-bright);}
.hero-scroll-cue{
  position:absolute; z-index:4; left:5%; bottom:40px; color:rgba(255,255,255,.7);
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.hero-scroll-cue .line{width:1px; height:34px; background:rgba(255,255,255,.4); position:relative; overflow:hidden;}
.hero-scroll-cue .line::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--glass-bright);animation:scrollCue 1.8s ease-in-out infinite;}
@keyframes scrollCue{50%{top:100%;} 51%{top:100%;} 100%{top:-100%;}}

@media (max-width:767px){
  .hero{height:auto; min-height:88vh; padding:120px 0 100px;}
  .hero-arrows{display:none;}
}

/* ==========================================================================
   STAT STRIP
   ========================================================================== */
.stat-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat-item{
  padding:34px 20px; text-align:center; border-right:1px solid var(--line);
}
.stat-item:last-child{border-right:none;}
.stat-num{
  font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,3vw,3rem);
  color:var(--navy); line-height:1;
}
.stat-num .unit{color:var(--glass-deep);}
.stat-label{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--charcoal-lt); margin-top:8px;
}

/* ==========================================================================
   PANE CARDS (services / products)
   ========================================================================== */
.pane-card{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  padding:42px 32px;
  height:100%;
  overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pane-card::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(0,144,217,.12) 45%, transparent 60%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
  pointer-events:none;
}
.pane-card:hover{
  border-color:var(--glass);
  transform:translateY(-6px);
  box-shadow:0 22px 44px rgba(0,27,71,.1);
}
.pane-card:hover::before{transform:translateX(120%);}
.pane-index{
  font-family:var(--font-mono); font-size:.72rem; color:var(--glass-deep);
  letter-spacing:.1em; margin-bottom:20px; display:block;
}
.pane-icon{
  width:56px; height:56px; margin-bottom:22px;
  color:var(--glass-deep);
}
.pane-card h3{font-size:1.35rem; margin-bottom:12px;}
.pane-card p{color:var(--charcoal); font-size:.95rem; margin-bottom:0;}
.pane-link{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--glass-deep); margin-top:20px; display:inline-flex; align-items:center; gap:8px;
}
.pane-link svg{transition:transform .3s var(--ease);}
.pane-card:hover .pane-link svg{transform:translateX(5px);}

/* ==========================================================================
   PROCESS STEPS
   ========================================================================== */
.process-row{
  display:flex; align-items:flex-start; gap:28px;
  padding:30px 0; border-bottom:1px solid var(--line);
}
.process-row:first-child{border-top:1px solid var(--line);}
.process-num{
  font-family:var(--font-display); font-size:2.6rem; color:var(--glass-pale);
  -webkit-text-stroke:1.5px var(--glass);
  color:transparent;
  min-width:80px;
}
.process-row h4{font-size:1.2rem; margin-bottom:8px;}
.process-row p{color:var(--charcoal); margin-bottom:0; max-width:560px;}

/* ==========================================================================
   BRAND / PARTNER STRIP
   ========================================================================== */
.brand-strip{
  display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line);
}
.brand-chip{
  flex:1 1 240px; padding:30px 26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.brand-chip .b-eyebrow{font-family:var(--font-mono); font-size:.65rem; letter-spacing:.14em; color:var(--glass-deep); text-transform:uppercase;}
.brand-chip h4{font-size:1.1rem; margin:6px 0 6px; text-transform:none; font-family:var(--font-body); font-weight:700;}
.brand-chip p{font-size:.86rem; color:var(--charcoal); margin-bottom:0;}

/* ==========================================================================
   GALLERY / PROJECTS
   ========================================================================== */
.gal-item{
  position:relative; overflow:hidden; cursor:pointer;
/*   background:var(--navy);*/
}
.gal-item svg{width:100%; height:100%; display:block; transition:transform .6s var(--ease);}
.gal-item:hover svg{transform:scale(1.07);}
.gal-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,14,40,.88) 0%, rgba(0,14,40,.1) 60%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px; opacity:0; transition:opacity .35s var(--ease);
  color:#fff;
}
.gal-item:hover .gal-overlay{opacity:1;}
.gal-overlay .g-tag{font-family:var(--font-mono); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--glass-bright);}
.gal-overlay h4{font-size:1.1rem; color:#fff; margin:6px 0 0;}
.gal-filter{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px;
}
.gal-filter button{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  padding:9px 18px; border:1px solid var(--line-strong); background:transparent; color:var(--navy);
  transition:all .3s var(--ease);
}
.gal-filter button.active, .gal-filter button:hover{background:var(--navy); color:#fff; border-color:var(--navy);}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quote-card{
  border-left:3px solid var(--glass); padding:8px 0 8px 28px;
}
.quote-card p{font-size:1.15rem; color:var(--navy); font-style:italic; margin-bottom:18px;}
.quote-card .q-name{font-weight:700; font-size:.9rem;}
.quote-card .q-role{font-family:var(--font-mono); font-size:.7rem; color:var(--charcoal-lt); letter-spacing:.06em;}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{position:relative; overflow:hidden;}
.cta-shine{
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(0,180,239,.14) 50%, transparent 65%);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer.site-footer{background:var(--navy-deep); color:rgba(255,255,255,.75); padding-top:30px;}
footer.site-footer h5{
  color:#fff; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:20px;
}
footer.site-footer a{color:rgba(255,255,255,.68);}
footer.site-footer a:hover{color:var(--glass-bright);}
footer.site-footer ul{list-style:none; padding:0; margin:0;}
footer.site-footer li{margin-bottom:11px; font-size:.92rem;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:25px; padding:10px 0;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; color:rgba(255,255,255,.5);
}
.footer-logo{height:46px; filter:brightness(0) invert(1); margin-bottom:18px;}
.social-row{display:flex; gap:12px; margin-top:22px;}
.social-row a{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center; transition:all .3s var(--ease);
}
.social-row a:hover{background:var(--glass-bright); border-color:var(--glass-bright); color:var(--navy-deep);}

/* ==========================================================================
   PAGE HEADER (inner pages)
   ========================================================================== */
.page-header{
  position:relative; 
/*  padding:170px 0 90px; */
      padding: 35px 0 30px;
  background:var(--navy-deep); 
  color:#fff; 
  overflow:hidden;
}
.page-header .crumb{font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em; color:rgba(255,255,255,.55);}
.page-header .crumb a{color:rgba(255,255,255,.75);}
.page-header h1{color:#fff; font-size:clamp(2.4rem,1.6vw,4rem); margin-top:14px;}

/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-delay-1{transition-delay:.1s;}
.reveal-delay-2{transition-delay:.2s;}
.reveal-delay-3{transition-delay:.3s;}
.reveal-delay-4{transition-delay:.4s;}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-nf label{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--charcoal); margin-bottom:8px; display:block;
}
.form-nf .form-control, .form-nf .form-select{
  border-radius:0; border:1px solid var(--line-strong); padding:13px 16px; font-size:.95rem;
}
.form-nf .form-control:focus, .form-nf .form-select:focus{
  border-color:var(--glass-deep); box-shadow:0 0 0 3px rgba(0,97,169,.14);
}

/* Map / contact block */
.contact-info-row{display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line);}
.contact-info-row:first-child{border-top:1px solid var(--line);}
.contact-info-row .ci-icon{color:var(--glass-deep); flex-shrink:0;}
.contact-info-row h5{font-size:.95rem; margin-bottom:4px; text-transform:none; font-family:var(--font-body); font-weight:700;}
.contact-info-row p{margin-bottom:0; color:var(--charcoal); font-size:.9rem;}

/* Utility */
.text-glass{color:var(--glass-deep) !important;}
.divider-tick{
  height:1px; background:var(--line); position:relative; margin:0;
}
.back-to-top{
  position:fixed; right:26px; bottom:26px; width:48px; height:48px; background:var(--navy);
  color:#fff; display:flex; align-items:center; justify-content:center; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .35s var(--ease); border:none; cursor:pointer;
}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top:hover{background:var(--glass-deep);}

/* Lightbox */
.lb-overlay{
  position:fixed; inset:0; background:rgba(0,14,40,.94); z-index:9999;
  display:none; align-items:center; justify-content:center; padding:40px;
}
.lb-overlay.open{display:flex;}
.lb-body{max-width:640px; width:100%; text-align:center;}
.lb-body .lb-media svg{width:100%; height:auto; max-height:60vh; border:1px solid rgba(255,255,255,.2);}
.lb-caption{margin-top:18px; color:#fff;}
.lb-caption h4{color:#fff; margin-top:6px;}
.lb-close{
  position:absolute; top:26px; right:32px; background:none; border:none; color:#fff;
  font-size:2.4rem; line-height:1; cursor:pointer;
}

/* WhatsApp float */
.wa-float{
  position:fixed; left:26px; bottom:26px; width:52px; height:52px; background:#1ebe5d;
  color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center;
  z-index:60; box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.wa-call{
  position:fixed; left:26px; bottom:90px; width:52px; height:52px; background:#225299;
  color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center;
  z-index:60; box-shadow:0 10px 24px rgba(0,0,0,.22);
}


.project-slider {
    margin: 0 -10px;
}

.project-item {
    padding: 10px;
}

.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    transition: transform 0.3s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    border: 1px solid #a19e9e;
    padding: 5px;
}

.project-img:hover {
    transform: scale(1.03);
}

.accordion-button{
  font-family: 'Inter', sans-serif !important;
}


/*.navbar-brand img {
    height: 60px;
    width: auto;
}*/

@media (max-width: 991.98px) {

  .navbar-brand img {
    height: 80px;
    width: auto;
    width: 100% !important;
}
    .navbar .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .navbar-brand {
        margin-right: 0;
    }

    .navbar-toggler {
        margin-left: auto;
    }

    .navbar-collapse {
        width: 100%;
        margin-top: 10px;
    }

    .navbar-nav {
        text-align: left;
    }
}