/* Preloader */
    #preloader { position:fixed; inset:0; background:#fff; display:flex; align-items:center; justify-content:center; z-index:5000; }
    .loader { width:50px; height:50px; border:5px solid #eee; border-top-color:var(--jkc-gold); border-radius:50%; animation:spin .7s linear infinite; }
    @keyframes spin { to { transform:rotate(360deg); } }

    /* Buttons */
    .btn-gold { background:var(--jkc-gold); color:#fff; border:none; }
    

    /* Scroll-to-top */
    #scrollTopBtn {
      position:fixed;
      right:1%; bottom:10%;
      width:45px;
      height:45px;
      border-radius:50%;
      background:var(--jkc-gold);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      box-shadow:0 4px 12px rgba(0,0,0,0.15);
      display:none;
      z-index:1100;
    }

    /* Topbar */
    .topbar { background:var(--jkc-maroon); color:#fff; font-size:14px; }

    /* Header */
    header.sticky-top { box-shadow:0 0 18px rgba(0,0,0,0.08); background:#fff; }

     /* Footer */
    footer#footer { background:#0f1112; color:#ddd; }
    footer#footer .gold { color: var(--jkc-gold); font-weight:700; }
    footer#footer a { color: #cfe0ff; text-decoration: none; }
    footer#footer a:hover { color: var(--jkc-gold); }
    
    /* Modal branding side */
    .contact-brand-box {
      background:var(--jkc-maroon);
      color:white;
      padding:30px;
      text-align:center;
    }
    .contact-brand-box img { height:70px; object-fit:contain; margin-bottom:15px; }
    /* ============================================================
      JKC PREMIUM NAVBAR ANIMATIONS + ACTIVE STATE + SCROLL EFFECT
    ===============================================================*/

    /* Basic link styling */
    .navmenu ul li a {
      position: relative;
      padding: 8px 14px;
      display: inline-block;
      font-weight: 500;
      transition: color .3s ease, opacity .3s ease;
    }

    /* TOP & BOTTOM GOLD LINES */
    .navmenu ul li a::before,
    .navmenu ul li a::after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--jkc-gold);
      transform: scaleX(0);
      transition: transform .35s ease;
    }

    /* top line → slide from LEFT */
    .navmenu ul li a::before {
      top: 0;
      transform-origin: left;
    }

    /* bottom line → slide from RIGHT */
    .navmenu ul li a::after {
      bottom: 0;
      transform-origin: right;
    }

    /* Hover effect */
    .navmenu ul li a:hover {
      color: var(--jkc-maroon);
      opacity: 1;
    }

    .navmenu ul li a:hover::before {
      transform: scaleX(1);
      transform-origin: left;
    }
    .navmenu ul li a:hover::after {
      transform: scaleX(1);
      transform-origin: right;
    }

    /* Active page */
    .navmenu ul li a.active {
      color: var(--jkc-maroon);
      font-weight: 600;
    }
    .navmenu ul li a.active::before,
    .navmenu ul li a.active::after {
      transform: scaleX(1);
    }

    /* Dropdown support */
    .dropdown-menu .dropdown-item {
      position: relative;
      padding: 6px 14px;
    }

    .dropdown-menu .dropdown-item::before,
    .dropdown-menu .dropdown-item::after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--jkc-gold);
      transform: scaleX(0);
      transition: transform .35s ease;
    }

    .dropdown-menu .dropdown-item::before {
      top: 0;
      transform-origin: left;
    }
    .dropdown-menu .dropdown-item::after {
      bottom: 0;
      transform-origin: right;
    }

    .dropdown-menu .dropdown-item:hover::before,
    .dropdown-menu .dropdown-item:hover::after {
      transform: scaleX(1);
    }

    /* Fade-in animation for header */
    header .navmenu ul li {
      opacity: 0;
      transform: translateY(-6px);
      animation: fadeSlide 0.6s forwards;
    }
    header .navmenu ul li:nth-child(1) { animation-delay: 0.10s; }
    header .navmenu ul li:nth-child(2) { animation-delay: 0.18s; }
    header .navmenu ul li:nth-child(3) { animation-delay: 0.26s; }
    header .navmenu ul li:nth-child(4) { animation-delay: 0.34s; }
    header .navmenu ul li:nth-child(5) { animation-delay: 0.42s; }
    header .navmenu ul li:nth-child(6) { animation-delay: 0.50s; }

    @keyframes fadeSlide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Sticky shrink header */
    header.sticky-top {
      transition: all .3s ease;
    }
    header.shrink {
      padding-top: 4px !important;
      padding-bottom: 4px !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    }
    header.shrink img {
      height: 48px !important;
      transition: height .3s ease;
    }

    /* Mobile nav slide animation */
    #mobileNav {
      opacity: 0;
      transform: translateY(-10px);
      transition: all .3s ease;
    }
    #mobileNav.showNav {
      opacity: 1;
      transform: translateY(0);
    }

  /* small tweaks for hero */
  .hero-section .swiper-slide { min-height: 320px; }
  .process-step { cursor: default; }
  .before-after-wrap { max-width: 900px; margin: 0 auto; }
  .brand-grid img { height: 60px; object-fit:contain; margin:8px; }

/* ---------- Cinematic + Architectural styles ---------- */
.cinematic-hero { position:relative; overflow:hidden; }
.cinematic-hero .video-bg { position:absolute; inset:0; object-fit:cover; width:100%; height:100%; z-index:0; filter:brightness(.45) contrast(1.02); }
.cinematic-hero .hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,12,12,.22), rgba(255,255,255,0)); z-index:1; pointer-events:none; }

.container-hero { position:relative; z-index:2; }

.cinematic-title-block {
  display:flex; align-items:center; gap:18px; justify-content:center; flex-direction:column;
  margin-bottom:34px;
}

/* ARCHITECTURAL BLOCK style (C) */
.arch-block {
  display:flex; align-items:center; gap:16px;
}
.arch-accent { width:36px; height:36px; background:var(--jkc-gold); border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,.08); }
.arch-title { font-family:'Ubuntu',sans-serif; font-weight:800; font-size:34px; letter-spacing:1px; color:var(--jkc-dark); }

/* CINEMATIC film style (D): letter-by-letter + background line */
.cine-animate {
  position:relative; overflow:visible;
}
.cine-animate .line {
  height:6px; width:80%; background:linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent);
  margin-top:-18px; opacity:.6;
}
.cine-letters { display:inline-block; font-family:'Ubuntu',sans-serif; font-weight:800; font-size:48px; color:#fff; letter-spacing:1px; text-transform:none; }
.cine-letters span { opacity:0; display:inline-block; transform: translateY(10px); }

/* section backgrounds & parallax utility */
.section-bg {
  position:relative; overflow:hidden;
}
.bg-image { position:absolute; inset:0; object-fit:cover; width:100%; height:100%; z-index:0; transform:translateZ(0); }
.bg-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(0,0,0,.18)); z-index:1; }
.section-inner { position:relative; z-index:2; }

/* fancy section title with no dashes (as requested) */
.section-heading {
  display:flex; align-items:center; gap:20px; justify-content:center; margin-bottom:36px;
}
.section-heading .label-box { background:var(--jkc-maroon); color:#fff; padding:8px 14px; border-radius:8px; font-weight:700; }
.section-heading h2 { margin:0; font-family:'Ubuntu',sans-serif; font-weight:800; font-size:34px; }

/* cards and parallax images */
.card-premium { background:rgba(255,255,255,.96); border-radius:14px; padding:22px; box-shadow:0 20px 50px rgba(3,3,3,.08);}

/* timeline (polished) */
.process-timeline { display:flex; gap:36px; align-items:flex-start; overflow:auto; padding:26px 8px; scroll-behavior:smooth; }
.process-step { min-width:200px; text-align:center; background:rgba(255,255,255,.98); border-radius:12px; padding:18px; box-shadow:0 14px 36px rgba(0,0,0,.06); }
.process-step .dot { width:64px; height:64px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; background:#fff; border:6px solid rgba(0,0,0,.06); margin-bottom:10px; }

/* Lottie wrapper */
.lottie-sm { width:88px; height:88px; }


/* responsive */
@media (max-width:991px){
  .cine-letters { font-size:30px; }
  .arch-title { font-size:22px; }
  .process-step { min-width:160px; }
  .section-heading h2 { font-size:24px; }
}


  /* Constrain modal on very small screens — stacked but not full-screen */
  @media (max-width: 575px) {
    .modal-dialog.modal-lg {
      max-width: 90%;
      margin: 1rem auto;
    }
    .modal-content {
      border-radius: 10px;
      max-height: 92vh;
      overflow-y: auto;
    }
    /* make branding box stack under form on small screens */
    .contact-brand-box { text-align:center; padding:20px; }
  }

  /* ensure modal body scrolls (keeps header/buttons visible) */
  .modal-content { overflow: hidden; }
  .modal-body { overflow-y: auto; }