:root{
    --bg:        #FFFFFF;
    --surface:   #F6F8FA;
    --surface-2: #ECEFF3;
    --line:      #E1E5EB;
    --text:      #141821;
    --muted:     #5B6472;
    --teal:      #00BFAE;
    --teal-deep: #0C8C7E;
    --orange:    #FF6A3D;
    --orange-deep:#C1440E;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; line-height:1.6; }
  h1,h2,h3,h4,.display-font{ font-family:'Space Grotesk',sans-serif; letter-spacing:-0.01em; }
  h1{ font-size:clamp(2.1rem, 4.2vw, 3.5rem); font-weight:700; line-height:1.12; }
  a{ color:var(--teal-deep); text-decoration:none; }
  a:hover{ color:var(--orange-deep); }
  .container-xl{ max-width:1200px; }
  .section{ padding:96px 0; }
  @media (max-width:768px){ .section{ padding:60px 0; } }
  .muted{ color:var(--muted); }
  .text-teal{ color:var(--teal-deep) !important; }
  .text-orange{ color:var(--orange-deep) !important; }
  .bg-surface{ background:var(--surface); }
  .section-head{ max-width:640px; margin-bottom:48px; }
  .section-head h2{ font-size:clamp(1.7rem,2.6vw,2.4rem); font-weight:700; }
  .section-kicker{ color:var(--orange-deep); font-weight:600; font-size:0.95rem; margin-bottom:10px; display:block; }

  /* ---------- Top bar ---------- */
  .topbar{ background:#000000; border-bottom:1px solid #000000; font-size:0.85rem; color:#FFFFFF; }
  .topbar a{ color:#FFFFFF; }
  .topbar a:hover{ color:var(--teal); }
  .topbar i{ color:#FFFFFF; }
  .topbar .social a{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.35); margin-left:6px; color:#FFFFFF; transition:.2s;
  }
  .topbar .social a:hover{ border-color:var(--teal); color:var(--teal); }

  /* ---------- Navbar ---------- */
.navbar {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);

    margin: 0 !important;
    padding: 0 !important;
}
  .navbar-brand{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.4rem; color:var(--text) !important; }
  .navbar-brand .dot{ color:var(--teal-deep); }
  .brand-logo{ height:98px; width:auto; max-width:220px; object-fit:contain; vertical-align:middle; margin-left:-120px;transform: translateY(7px);}
  .nav-link{ color:var(--text) !important; font-weight:500; margin:0 4px; position:relative; }
  .nav-link::after{ content:''; position:absolute; left:0; bottom:2px; width:0; height:2px; background:var(--teal); transition:width .25s ease; }
  .nav-link:hover::after{ width:100%; }
  .nav-link.active-page{ color:var(--teal) !important; font-weight:700; }
  .nav-link.active-page::after{ width:100%; background:var(--teal); }
  .btn-quote{ background:var(--teal); color:#04121A; font-weight:600; border-radius:6px; padding:8px 18px; border:none; white-space:nowrap; }
  .btn-quote:hover{ background:var(--orange); color:#1a0900; }
  .btn-ghost{ border:1px solid var(--line); color:var(--text); border-radius:6px; padding:7px 16px; }
  .btn-ghost:hover{ border-color:var(--teal-deep); color:var(--teal-deep); }

  /* Mega menu */
  .dropdown-menu{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:20px; margin-top:10px !important;
  }
  .dropdown-item{ color:var(--text); }
  .dropdown-item:hover, .dropdown-item:focus{ background:var(--surface-2); color:var(--teal-deep); }

  /* ---------- Products: hover flyout menu ---------- */
  .product-mega{ position:relative; }
  .product-mega > .nav-link{ display:flex; align-items:center; gap:4px; cursor:pointer; }
  .mega-panel{
    position:absolute; top:100%; left:0; margin-top:10px;
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    min-width:270px; padding:10px; display:none; z-index:1050;
    box-shadow:0 12px 28px rgba(20,23,31,0.08);
  }
  @media (min-width:992px){
    .mega-panel{ transition:opacity .12s ease; }
  }
  .product-mega.open > .mega-panel{ display:block; }
  .mega-cats{ list-style:none; margin:0; padding:0; }
  .mega-cat{ position:relative; }
  .mega-cat > span{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding:11px 14px; border-radius:8px; font-size:0.9rem; cursor:pointer; color:var(--text);
  }
  .mega-cat > span i{ font-size:0.75rem; color:var(--muted); }
  .mega-cat:hover > span, .mega-cat.open > span{ background:var(--surface-2); color:var(--teal-deep); }
  .mega-sub{
    position:absolute; top:0; left:100%; margin-left:8px;
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    min-width:280px; max-height:360px; overflow-y:auto; padding:14px;
    display:none; z-index:1060;
    box-shadow:0 12px 28px rgba(20,23,31,0.08);
  }
  .mega-cat.open > .mega-sub{ display:block; }
  .mega-sub a{ display:block; padding:6px 4px; font-size:0.85rem; color:var(--text); }
  .mega-sub a:hover{ color:var(--teal-deep); padding-left:8px; transition:.15s; }
  .mega-sub::-webkit-scrollbar{ width:5px; }
  .mega-sub::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
  @media (max-width:991.98px){
    .mega-panel{ position:static; margin-top:6px; box-shadow:none; }
    .mega-sub{ position:static; margin-left:0; margin-top:4px; box-shadow:none; background:var(--surface-2); }
  }

  /* ---------- Product detail "page" ---------- */
  #pageProduct{ display:block; }
  .breadcrumb-bar{ padding:24px 0 0; }
  .breadcrumb-bar .breadcrumb-nav{ font-size:0.85rem; color:var(--muted); }
  .breadcrumb-nav a{ color:var(--muted); }
  .breadcrumb-nav a:hover{ color:var(--teal-deep); }
  .pd-visual{
    border-radius:16px; border:1px solid var(--line);
    background:var(--surface-2);
    aspect-ratio:4/3; position:relative; overflow:hidden;
  }
  .pd-image{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
  .pd-image.pd-image-missing{ object-fit:contain; padding:0; background:#EEF1F3; }
  .pd-category-tag{
    display:inline-block; background:rgba(0,191,174,0.12); color:var(--teal-deep);
    font-size:0.78rem; font-weight:600; padding:4px 12px; border-radius:20px; margin-bottom:14px;
  }
  .spec-table{ width:100%; border-collapse:collapse; }
  .spec-table tr{ border-bottom:1px solid var(--line); }
  .spec-table td{ padding:12px 4px; font-size:0.9rem; }
  .spec-table td:first-child{ color:var(--muted); width:44%; }
  .spec-table td:last-child{ font-weight:600; }
  .pd-feature{ display:flex; gap:10px; margin-bottom:12px; align-items:flex-start; }
  .pd-feature i{ color:var(--teal-deep); margin-top:3px; }
  .related-card{
    background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px; height:100%;
    cursor:pointer; transition:border-color .2s;
  }
  .related-card:hover{ border-color:var(--teal); }
  .related-card h5{ font-size:0.95rem; margin-bottom:4px; }
  .related-card span{ font-size:0.8rem; color:var(--muted); }

  /* ---------- Hero: full-width slider ---------- */
.hero-slider{
    width:100%;
    border-bottom:1px solid var(--line);
    background:#0B0E14;
}
 .hero-slide-img{
    width:100%;
    height:500px;
    object-fit:cover;
    object-position:center;
    display:block;
}

  .carousel-control-prev, .carousel-control-next{ width:64px; opacity:1; }
  .hero-arrow{
    display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:50%;
    background:rgba(10,14,20,0.45); color:#fff; font-size:1.3rem;
    transition:background .2s;
  }
  .carousel-control-prev:hover .hero-arrow, .carousel-control-next:hover .hero-arrow{ background:rgba(10,14,20,0.72); }

  .hero-indicators{ position:absolute; bottom:16px; margin:0; z-index:2; }
  .hero-indicators [data-bs-target]{
    width:11px !important; height:11px !important; border-radius:50% !important;
    background-color:rgba(255,255,255,0.55) !important; border:none !important;
    margin:0 5px !important; opacity:1 !important; text-indent:-9999px;
  }
  .hero-indicators .active{ background-color:var(--teal) !important; }
  .hero-lede{ max-width:560px; font-size:1.06rem; color:var(--muted); }

  /* ---------- Home About Company: equal-width, equal-height split ---------- */
  .home-about-row{ padding:64px 0; }
  .home-about-photos{
    display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
    gap:12px; height:100%; min-height:340px;
  }
  .home-about-photos img{ width:100%; height:100%; object-fit:cover; border-radius:12px; display:block; }

  /* ---------- Pillars ---------- */
  .pillar-card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:30px; height:100%; transition:border-color .2s; }
  .pillar-card:hover{ border-color:var(--teal); }
  .pillar-icon{ width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(0,191,174,0.12); color:var(--teal-deep); font-size:1.25rem; margin-bottom:18px; }

  /* ---------- Product tabs / cards ---------- */
  .cat-tabs .nav-link{ color:var(--muted) !important; border:1px solid var(--line); border-radius:8px; margin:0 6px 8px 0; padding:8px 16px; font-size:0.88rem; }
  .cat-tabs .nav-link::after{ display:none; }
  .cat-tabs .nav-link.active{ background:var(--teal); color:#04121A !important; border-color:var(--teal); }
  .product-card{
    background:linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
    border:1px solid var(--line); border-radius:14px; padding:26px; height:100%; position:relative; overflow:hidden;
  }
  .product-card::before{ content:''; position:absolute; top:-40%; right:-30%; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(0,191,174,0.16), transparent 70%); }
  .product-icon{ width:44px; height:44px; border-radius:10px; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--orange-deep); font-size:1.2rem; margin-bottom:16px; }
  .product-card h3{ font-size:1.08rem; font-weight:600; margin-bottom:8px; }
  .product-card p{ color:var(--muted); font-size:0.9rem; margin-bottom:14px; }
  .product-link{ font-size:0.86rem; font-weight:600; color:var(--teal-deep); }
  .product-link i{ transition:transform .2s; display:inline-block; }
  .product-card:hover .product-link i{ transform:translateX(4px); }

  /* ---------- Stats band ---------- */
  .stats-band{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .stat-num{ font-family:'Space Grotesk',sans-serif; font-size:clamp(2rem,3.4vw,2.8rem); font-weight:700; color:var(--teal-deep); }
  .stat-label{ color:var(--muted); font-size:0.88rem; }

  /* ---------- Features grid (8 items) ---------- */
  .feature-tile{
    background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:24px; height:100%; text-align:center;
    transition:transform .2s, border-color .2s;
  }
  .feature-tile:hover{ border-color:var(--orange); transform:translateY(-4px); }
  .feature-tile .fi{ width:50px; height:50px; margin:0 auto 14px; border-radius:12px; background:rgba(193,68,14,0.1); color:var(--orange-deep); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
  .feature-tile h4{ font-size:0.95rem; font-weight:600; margin-bottom:0; }

  /* ---------- Photo-background tile variant (Case Studies / Datasheet cards) ---------- */
  .photo-tile{ position:relative; overflow:hidden; color:#fff; min-height:220px; display:flex; flex-direction:column; justify-content:center; }
  .photo-tile-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  .photo-tile::before{
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(8,12,20,0.60) 0%, rgba(8,12,20,0.82) 100%);
  }
  .photo-tile > *{ position:relative; z-index:2; }
  .photo-tile h4{ color:#fff; }
  .photo-tile p.muted{ color:rgba(255,255,255,0.85) !important; }
  .photo-tile .fi{ background:rgba(255,255,255,0.18); color:#fff; }
  .photo-tile .btn-ghost{ border-color:rgba(255,255,255,0.7); color:#fff; }
  .photo-tile .btn-ghost:hover{ background:rgba(255,255,255,0.18); border-color:#fff; color:#fff; }
  .photo-tile:hover{ border-color:var(--teal); }

  /* ---------- Certifications & Clients marquee ---------- */
  .marquee-wrap{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent); mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
  .marquee-track{ display:flex; gap:16px; width:max-content; animation:scrollLeft 28s linear infinite; }
  .marquee-track.slow{ animation-duration:38s; }
  @keyframes scrollLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .logo-chip{
    flex:0 0 auto; width:140px; height:70px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
    display:flex; align-items:center; justify-content:center; color:var(--muted); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.85rem; text-align:center; padding:8px;
  }
  /* Certification chips: optional background image (images/certifications/*.jpg) with centered text */
  .cert-chip{
    color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.7);
    background-color:#2a2f3a;
    background-size:cover; background-position:center; background-repeat:no-repeat;
  }
  .marquee-wrap:hover .marquee-track{ animation-play-state:paused; }

  /* ---------- Gallery ---------- */
  .gallery-tabs .nav-link{ color:var(--muted) !important; }
  .gallery-tabs .nav-link.active{ color:var(--teal-deep) !important; background:transparent; border-bottom:2px solid var(--teal); border-radius:0; }
  .gallery-tile{
    aspect-ratio:4/3; border-radius:12px; border:1px solid var(--line);
    position:relative; overflow:hidden; background:var(--surface-2);
  }
  .gallery-img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
  .gallery-tile-full{ background:#0B0E14; }
  .gallery-tile-full .gallery-img{ object-fit:contain; object-position:center; }
  .gallery-caption{
    position:absolute; left:0; right:0; bottom:0; z-index:1;
    background:rgba(10,14,20,0.68); color:#F2F4F7; font-size:0.78rem;
    padding:6px 10px; line-height:1.3;
  }

  /* ---------- Career split ---------- */
  .split-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:36px; height:100%; }
  .split-card .icon-lg{ width:56px; height:56px; border-radius:12px; background:rgba(0,191,174,0.12); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:18px; }

  /* ---------- Testimonials ---------- */
  .testi-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:30px; height:100%; }
  .testi-card p.quote{ font-size:0.96rem; color:var(--text); }
  .testi-avatar{ width:40px; height:40px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--teal-deep); font-family:'Space Grotesk',sans-serif; }
  .carousel-indicators [data-bs-target]{ background:var(--muted); width:8px; height:8px; border-radius:50%; }
  .carousel-indicators .active{ background:var(--teal-deep); }

  /* ---------- CTA ---------- */
  .cta-band{ background:linear-gradient(120deg, #E3FBF7 0%, #FFFFFF 65%); border:1px solid var(--line); border-radius:18px; padding:52px; }
  @media (max-width:768px){
    .hero-slide-img{
        height:300px;
    }
}

  /* ---------- Page banners (About / Contact): 80% of the Home slider's height ---------- */
  .page-banner{ position:relative; }
  .page-banner-img{
    width:100%;
    height:400px;
    object-fit:cover;
    object-position:center;
    display:block;
  }
  @media (max-width:768px){ .page-banner-img{ height:240px; } }
  @media (max-width:480px){ .page-banner-img{ height:176px; } }

  /* ---------- Enquiry success panel (stays until dismissed) ---------- */
  .enquiry-success{
    background:linear-gradient(135deg,#E3FBF7 0%,#FFFFFF 70%);
    border:1px solid rgba(0,191,174,0.45); border-left:6px solid var(--teal);
    border-radius:14px; padding:38px 30px; text-align:center;
    box-shadow:0 10px 28px rgba(20,23,31,0.08);
    animation:successPop .35s ease;
  }
  .enquiry-success:focus{ outline:none; }
  .enquiry-success-icon{
    width:66px; height:66px; border-radius:50%; background:var(--teal); color:#04121A;
    display:flex; align-items:center; justify-content:center; font-size:2.2rem; margin:0 auto 16px;
  }
  .enquiry-success .lead-msg{ font-size:1.15rem; font-weight:600; color:var(--text); }
  @keyframes successPop{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }

  /* ---------- Footer brand: align logo with the text below it ---------- */
  footer .footer-brand{ padding:0; margin-right:0; }
  footer .footer-brand .brand-logo{ margin-left:0; transform:none; }

  /* ---------- Contact ---------- */
  .form-control, .form-select{ background:#FFFFFF; border:1px solid var(--line); color:var(--text); padding:12px 14px; }
  .form-control:focus, .form-select:focus{ background:#FFFFFF; color:var(--text); border-color:var(--teal); box-shadow:0 0 0 0.2rem rgba(0,191,174,0.15); }
  .form-control::placeholder{ color:var(--muted); }
  .form-label{ font-size:0.86rem; color:var(--muted); margin-bottom:6px; }
  .btn-submit{ background:var(--orange); color:#1a0900; font-weight:600; border:none; border-radius:6px; padding:12px 26px; }
  .btn-submit:hover{ background:var(--teal); color:#04121A; }
  .contact-info-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px; }
  .contact-info-card i{ color:var(--teal-deep); }
  .map-embed{ border-radius:14px; overflow:hidden; border:1px solid var(--line); }

  /* ---------- Footer ---------- */
  footer{ background:#000000; border-top:1px solid #000000; padding:60px 0 22px; }
  footer h5{ font-size:0.92rem; font-weight:600; margin-bottom:16px; color:#FFFFFF; }
  footer, footer p{ color:#FFFFFF; }
  footer a{ color:#FFFFFF; font-size:0.9rem; }
  footer a:hover{ color:var(--teal); }
  footer ul{ list-style:none; padding:0; }
  footer ul li{ margin-bottom:9px; }
  footer .muted{ color:rgba(255,255,255,0.65) !important; }
  .footer-bottom{ border-top:1px solid rgba(255,255,255,0.15); margin-top:34px; padding-top:18px; font-size:0.83rem; color:rgba(255,255,255,0.65); }
  .location-pill{ display:inline-block; background:#FFFFFF; border:1px solid var(--line); border-radius:20px; padding:4px 12px; font-size:0.78rem; margin:0 6px 8px 0; color:var(--muted); }
  footer .location-pill{ background:#000000; border-color:rgba(255,255,255,0.35); color:#FFFFFF; }
  footer .social a{ border-color:rgba(255,255,255,0.35); color:#FFFFFF; }
  footer .social a:hover{ border-color:var(--teal); color:var(--teal); }

  .footer-map{ border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,0.25); }

  /* ---------- Admin list pages ---------- */
  .admin-table-wrap{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:6px; }
  .admin-table{ margin-bottom:0; font-size:0.88rem; }
  .admin-table thead th{ color:var(--muted); font-weight:600; border-bottom:1px solid var(--line); white-space:nowrap; }
  .admin-table td{ vertical-align:top; border-bottom:1px solid var(--line); color:var(--text); }
  .admin-note{
    background:rgba(255,106,61,0.08); border:1px solid rgba(193,68,14,0.25); border-radius:10px;
    padding:14px 16px; font-size:0.85rem; color:var(--text);
  }

  /* ---------- Floating buttons ---------- */
  #backToTop{
    position:fixed; bottom:24px; right:24px; z-index:999; width:44px; height:44px; border-radius:50%;
    background:var(--teal); color:#04121A; border:none; display:none; align-items:center; justify-content:center; font-size:1.1rem;
    box-shadow:0 6px 16px rgba(20,23,31,0.18);
  }
  #whatsappBtn{
    position:fixed; bottom:24px; left:24px; z-index:999; border-radius:16px;
    background:#25D366; color:#fff; border:none; box-shadow:0 6px 16px rgba(20,23,31,0.22);
    display:flex; align-items:center; gap:10px; padding:10px 16px;
  }
  #whatsappBtn:hover{ transform:scale(1.03); }
  #whatsappBtn .wa-icon{ font-size:1.7rem; line-height:1; }
  #whatsappBtn .wa-text{ text-align:left; line-height:1.2; }
  #whatsappBtn .wa-title{ display:block; font-weight:700; font-size:0.92rem; }
  #whatsappBtn .wa-sub{ display:block; font-size:0.72rem; opacity:0.9; font-weight:400; }
  @media (max-width:480px){
    .hero-slide-img{
        height:220px;
    }
}

  .modal-content{ background:#FFFFFF; color:var(--text); border:1px solid var(--line); border-radius:14px; }

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline:2px solid var(--teal-deep); outline-offset:2px;
  }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .live-dot, .marquee-track, .enquiry-success{ animation:none; }
  }

  /* =========================================================
     MOBILE RESPONSIVE FIXES
     These rules apply only below the Bootstrap desktop breakpoint.
     Desktop/web styling above 991.98px is intentionally unchanged.
     ========================================================= */
  @media (max-width:991.98px){
    html, body{
      width:100%;
      max-width:100%;
      overflow-x:hidden;
    }

    img, video, iframe, svg{
      max-width:100%;
    }

    /* Mobile navbar */
    .navbar{
      width:100%;
      min-height:70px;
    }

    .navbar > .container-xl{
      width:100%;
      max-width:100%;
      padding-left:12px;
      padding-right:12px;
      display:flex;
      align-items:center;
    }

    .navbar-brand{
      margin-right:0;
      padding:0;
      max-width:calc(100% - 58px);
      display:flex;
      align-items:center;
      flex-shrink:1;
      min-width:0;
    }

    /* The desktop -120px offset is the reason the logo is cut off on mobile. */
    .navbar .brand-logo{
      height:64px;
      width:auto;
      max-width:180px;
      margin-left:0;
      transform:none;
      object-fit:contain;
      display:block;
    }

    .navbar-toggler{
      flex:0 0 auto;
      margin-left:auto;
      padding:7px 9px;
      border:1px solid var(--line) !important;
      border-radius:7px;
    }

    .navbar-toggler:focus{
      box-shadow:0 0 0 0.15rem rgba(0,191,174,0.18);
    }

    /* Bootstrap's navbar-toggler-icon needs an explicit icon because
       the navbar itself is not using navbar-light/navbar-dark. */
    .navbar-toggler-icon{
      width:1.35em;
      height:1.35em;
      background-image:none !important;
      position:relative;
      display:block;
    }

    .navbar-toggler-icon::before{
      content:'\2630';
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--text);
      font-size:1.35rem;
      line-height:1;
    }

    .navbar-collapse{
      width:100%;
      flex-basis:100%;
    }

    .navbar-nav{
      width:100%;
      padding:8px 0 12px;
      align-items:stretch !important;
    }

    .navbar-nav .nav-item{
      width:100%;
    }

    .navbar-nav .nav-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      width:100%;
      margin:0;
      padding:9px 4px;
    }

    .navbar-nav .btn-ghost,
    .navbar-nav .btn-quote{
      display:block;
      width:100%;
      text-align:center;
      margin-right:0 !important;
    }

    .navbar-nav .nav-item.ms-lg-2,
    .navbar-nav .nav-item.mt-2{
      margin-left:0 !important;
      margin-top:7px !important;
    }

    /* Products flyout becomes a normal in-flow mobile menu. */
    .product-mega{
      width:100%;
    }

    .product-mega > .nav-link{
      justify-content:space-between;
    }

    .mega-panel{
      position:static;
      width:100%;
      min-width:0;
      max-width:100%;
      margin:4px 0 8px;
      padding:6px;
      border-radius:10px;
      box-shadow:none;
      overflow:hidden;
    }

    .mega-cat > span{
      padding:10px 9px;
      font-size:.88rem;
    }

    .mega-sub{
      position:static;
      width:100%;
      min-width:0;
      max-width:100%;
      margin:3px 0 5px;
      padding:8px 10px;
      max-height:300px;
      overflow-y:auto;
      overflow-x:hidden;
      border-radius:9px;
    }

    .mega-sub a{
      padding:7px 3px;
      line-height:1.35;
      overflow-wrap:anywhere;
    }

    /* General mobile spacing */
    .section{
      padding:52px 0;
    }

    .section-head{
      max-width:100%;
      margin-bottom:32px;
    }

    .section-head h2{
      line-height:1.2;
    }

    .home-about-row{
      padding:44px 0;
    }

    .home-about-photos{
      min-height:280px;
      gap:8px;
    }

    .hero-lede{
      max-width:100%;
      font-size:1rem;
    }

    .cta-band{
      padding:28px 22px;
      border-radius:14px;
    }

    .cta-band h2{
      font-size:1.55rem;
    }

    .cta-band .btn{
      width:100%;
      text-align:center;
    }

    /* Product detail */
    .breadcrumb-bar{
      padding:18px 0 0;
    }

    .breadcrumb-nav{
      overflow-wrap:anywhere;
      line-height:1.7;
    }

    .pd-visual{
      aspect-ratio:4/3;
    }

    .pd-image{
      object-fit:contain;
    }

    .spec-table{
      display:block;
      width:100%;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }

    .spec-table tbody,
    .spec-table tr{
      width:100%;
    }

    .spec-table td{
      min-width:120px;
    }

    /* Tabs should wrap rather than create horizontal page overflow. */
    .cat-tabs,
    .gallery-tabs{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }

    .cat-tabs .nav-link{
      margin:0;
    }

    /* Gallery captions remain readable on narrow screens. */
    .gallery-caption{
      font-size:.72rem;
      padding:5px 7px;
    }

    /* Footer */
    footer{
      padding:44px 0 18px;
    }

    footer .footer-brand .brand-logo{
      height:64px;
      max-width:180px;
    }

    .footer-map iframe{
      width:100% !important;
      max-width:100%;
    }

    .footer-bottom{
      text-align:center;
    }

    /* Floating controls stay inside the viewport. */
    #backToTop{
      right:12px;
      bottom:14px;
      width:42px;
      height:42px;
    }

    #whatsappBtn{
      left:12px;
      bottom:14px;
      max-width:calc(100vw - 70px);
      padding:9px 12px;
      border-radius:13px;
      gap:8px;
    }

    #whatsappBtn .wa-title{
      font-size:.86rem;
    }

    #whatsappBtn .wa-sub{
      font-size:.68rem;
    }

    /* Prevent long admin/form content from widening the viewport. */
    .admin-note,
    .contact-info-card,
    .split-card,
    .testi-card,
    .product-card,
    .feature-tile,
    .pillar-card,
    .enquiry-success{
      overflow-wrap:anywhere;
    }

    .form-control,
    .form-select,
    textarea{
      max-width:100%;
    }

    .modal-dialog{
      margin-left:12px;
      margin-right:12px;
    }
  }

  @media (max-width:575.98px){
    .navbar .brand-logo,
    footer .footer-brand .brand-logo{
      height:58px;
      max-width:165px;
    }

    .navbar{
      min-height:64px;
    }

    .navbar > .container-xl{
      padding-left:10px;
      padding-right:10px;
    }

    .home-about-photos{
      min-height:240px;
    }

    .home-about-row{
      padding:34px 0;
    }

    .section{
      padding:46px 0;
    }

    .hero-slide-img{
      height:220px;
    }

    .page-banner-img{
      height:176px;
    }

    .feature-tile,
    .product-card,
    .pillar-card,
    .split-card,
    .testi-card{
      padding:20px;
    }

    .cta-band{
      padding:24px 18px;
    }

    .pd-visual{
      aspect-ratio:1/1;
    }

    .pd-feature{
      gap:8px;
    }

    .related-card{
      padding:16px;
    }

    .enquiry-success{
      padding:28px 18px;
    }
  }

  .section h1{ font-size:clamp(1.7rem,2.6vw,2.4rem); font-weight:700; line-height:1.2; }
  .section-head h1{ font-size:clamp(1.7rem,2.6vw,2.4rem); font-weight:700; line-height:1.2; }


/* ---------- Gallery: sub-headings and video tiles ---------- */
.gallery-subhead{ font-size:1.15rem; font-weight:600; margin:0 0 14px; }
.gallery-subhead-videos{ margin-top:40px; padding-top:28px; border-top:1px solid var(--line); }
.gallery-video-tile{ display:block; width:100%; padding:0; cursor:pointer; text-align:left; background:#0B0E14; }
.gallery-video-tile .gallery-img{ object-position:center; transition:transform .25s ease; }
.gallery-video-tile:hover .gallery-img, .gallery-video-tile:focus-visible .gallery-img{ transform:scale(1.04); }
.gallery-video-tile:focus-visible{ outline:3px solid var(--teal); outline-offset:2px; }
.gallery-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-60%);
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(0,191,174,0.92); color:#04121A; font-size:1.9rem; padding-left:3px;
}
@media (prefers-reduced-motion: reduce){ .gallery-video-tile .gallery-img{ transition:none; } }

  /* ---------- Mobile menu: contact details (mobile only; hidden on desktop via d-lg-none) ---------- */
  .mobile-menu-contact{ display:block; margin-top:14px !important; padding-top:14px; border-top:1px solid var(--line); }
  .mobile-menu-contact .mmc-row{
    display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:12px;
    width:100%; box-sizing:border-box; margin:0 0 10px 0;
    padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
    color:var(--text); text-decoration:none;
  }
  .mobile-menu-contact .mmc-row:last-child{ margin-bottom:0; }
  .mobile-menu-contact .mmc-row:active{ background:var(--surface-2); }
  .mobile-menu-contact .mmc-icon{
    flex:0 0 38px; width:38px; height:38px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    background:var(--teal); color:#04121A; font-size:1.05rem;
  }
  .mobile-menu-contact .mmc-text{ display:block; flex:1 1 auto; min-width:0; line-height:1.4; font-size:.88rem; }
  .mobile-menu-contact .mmc-label{ font-weight:700; color:var(--text); margin-right:4px; }
  .mobile-menu-contact .mmc-value{ display:inline-block; font-weight:500; color:var(--teal-deep); overflow-wrap:anywhere; }