:root{
      --navy:#0b1f44;
      --navy-2:#122e63;
      --blue:#24468f;
      --red:#e51f32;
      --red-2:#bc1425;
      --ink:#101828;
      --muted:#667085;
      --line:#e8ebf0;
      --soft:#f6f8fb;
      --white:#ffffff;
      --radius:22px;
      --shadow:0 18px 50px rgba(11,31,68,.10);
      --container:min(1180px, calc(100% - 40px));
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color:var(--ink);
      background:#fff;
      line-height:1.6;
      overflow-x:hidden;
    }
    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}
    button,input,textarea,select{font:inherit}
    .container{width:var(--container);margin-inline:auto}
    .section{padding:96px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:10px;
      font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
      color:var(--red);
    }
    .eyebrow::before{
      content:"";width:28px;height:2px;background:var(--red);border-radius:2px;
    }
    .section-title{
      margin:12px 0 14px;
      font-size:clamp(2rem,4vw,3.7rem);
      line-height:1.05;letter-spacing:-.045em;
      color:var(--navy);
    }
    .section-sub{
      margin:0;max-width:720px;color:var(--muted);font-size:1.04rem;
    }

    /* Top bar */
    .topbar{
      background:var(--navy);
      color:#dbe5fb;
      font-size:.86rem;
    }
    .topbar-inner{
      min-height:40px;
      display:flex;align-items:center;justify-content:space-between;gap:18px;
    }
    .topbar-left,.topbar-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
    .top-pill{display:flex;align-items:center;gap:7px}
    .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.12)}

    /* Header */
    .header{
      position:sticky;top:0;z-index:1000;
      background:rgba(255,255,255,.94);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(232,235,240,.85);
      transition:.25s ease;
    }
    .header.scrolled{box-shadow:0 10px 30px rgba(11,31,68,.08)}
    .nav{
      min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px;
    }
    .brand{display:flex;align-items:center;gap:12px;min-width:165px}
    .brand img{width:150px;height:auto}
    .nav-links{display:flex;align-items:center;gap:28px;font-weight:700;font-size:.94rem}
    .nav-links a{position:relative;padding:30px 0}
    .nav-links a::after{
      content:"";position:absolute;left:0;bottom:20px;width:0;height:2px;background:var(--red);
      transition:.22s ease;
    }
    .nav-links a:hover::after{width:100%}
    .nav-actions{display:flex;align-items:center;gap:10px}
    .btn{
      border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;
      min-height:48px;padding:0 20px;border-radius:12px;font-weight:800;transition:.22s ease;
    }
    .btn-primary{background:var(--red);color:#fff;box-shadow:0 12px 24px rgba(229,31,50,.22)}
    .btn-primary:hover{background:var(--red-2);transform:translateY(-2px)}
    .btn-dark{background:var(--navy);color:#fff}
    .btn-dark:hover{background:var(--navy-2);transform:translateY(-2px)}
    .btn-outline{border:1px solid #d8deea;background:#fff;color:var(--navy)}
    .btn-outline:hover{border-color:var(--navy);transform:translateY(-2px)}
    .menu-btn{
      display:none;border:0;background:var(--soft);width:46px;height:46px;border-radius:12px;cursor:pointer;
    }
    .menu-btn span{display:block;width:20px;height:2px;background:var(--navy);margin:4px auto;transition:.2s}

    /* Hero */
    .hero{
      position:relative;
      background:
        radial-gradient(circle at 80% 10%, rgba(36,70,143,.12), transparent 32%),
        radial-gradient(circle at 5% 85%, rgba(229,31,50,.08), transparent 28%),
        linear-gradient(180deg,#fbfcff 0%, #ffffff 100%);
      overflow:hidden;
      padding:82px 0 58px;
    }
    .hero::before{
      content:"";position:absolute;inset:0;
      background-image:linear-gradient(rgba(11,31,68,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(11,31,68,.035) 1px,transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 85%);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:70px;
    }
    .hero-kicker{
      display:inline-flex;align-items:center;gap:9px;
      background:#fff;border:1px solid var(--line);border-radius:999px;
      padding:8px 13px;font-size:.82rem;font-weight:800;color:var(--navy);
      box-shadow:0 8px 24px rgba(11,31,68,.06);
    }
    .hero-kicker strong{color:var(--red)}
    .hero h1{
      margin:22px 0 20px;
      font-size:clamp(3.2rem,6.5vw,6.3rem);
      line-height:.92;letter-spacing:-.065em;color:var(--navy);
      max-width:780px;
    }
    .hero h1 span{color:var(--red)}
    .hero-copy{font-size:1.12rem;color:var(--muted);max-width:650px;margin:0 0 28px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .trust-row{
      margin-top:32px;display:flex;gap:24px;flex-wrap:wrap;color:#344054;font-size:.9rem;font-weight:700;
    }
    .trust-row span{display:flex;align-items:center;gap:8px}
    .check{
      width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
      background:#eaf7ef;color:#128743;font-size:.72rem;font-weight:900;
    }
    .hero-visual{position:relative;min-height:570px}
    .hero-photo{
      position:absolute;right:0;top:10px;width:86%;height:500px;border-radius:34px;
      object-fit:cover;box-shadow:0 35px 80px rgba(11,31,68,.18);
    }
    .hero-photo-overlay{
      position:absolute;right:0;top:10px;width:86%;height:500px;border-radius:34px;
      background:linear-gradient(180deg,transparent 45%,rgba(11,31,68,.55));
    }
    .hero-card{
      position:absolute;left:0;bottom:28px;width:270px;background:rgba(255,255,255,.95);
      border:1px solid rgba(255,255,255,.9);border-radius:22px;padding:20px;box-shadow:var(--shadow);
      backdrop-filter:blur(12px);
    }
    .hero-card-top{display:flex;align-items:center;justify-content:space-between;gap:15px}
    .hero-card-icon{
      width:50px;height:50px;border-radius:15px;background:linear-gradient(135deg,var(--navy),var(--blue));
      color:#fff;display:grid;place-items:center;font-weight:900;
    }
    .hero-card strong{font-size:1.4rem;color:var(--navy)}
    .hero-card p{margin:8px 0 0;color:var(--muted);font-size:.9rem}
    .mini-badge{
      position:absolute;right:20px;bottom:35px;background:var(--red);color:#fff;border-radius:16px;
      padding:13px 16px;font-size:.82rem;font-weight:900;box-shadow:0 16px 30px rgba(229,31,50,.26);
    }
    .floating-tag{
      position:absolute;right:35px;top:46px;background:#fff;border:1px solid var(--line);border-radius:14px;
      padding:10px 14px;font-weight:800;color:var(--navy);box-shadow:var(--shadow);
    }

    /* Stats */
    .stats{
      margin-top:8px;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      background:#fff;
    }
    .stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
    .stat{
      padding:34px 22px;border-right:1px solid var(--line);
    }
    .stat:last-child{border-right:0}
    .stat strong{display:block;color:var(--navy);font-size:2rem;line-height:1}
    .stat span{display:block;color:var(--muted);font-size:.9rem;margin-top:8px}

    /* Products */
    .product-toolbar{
      margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
    }
    .filter-row{display:flex;gap:8px;flex-wrap:wrap}
    .filter-btn{
      border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 15px;font-weight:800;
      color:#475467;cursor:pointer;transition:.2s;
    }
    .filter-btn.active,.filter-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
    .products-grid{
      margin-top:30px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:22px;
      align-items:stretch;
    }
    .product-card{
      display:flex;
      flex-direction:column;
      height:100%;
      border:1px solid var(--line);
      border-radius:20px;
      background:#fff;
      overflow:hidden;
      transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      position:relative;
    }
    .product-card:hover{
      transform:translateY(-7px);
      box-shadow:var(--shadow);
      border-color:#dbe1eb;
    }
    .product-image{
      height:240px;
      overflow:hidden;
      background:#eef1f6;
      position:relative;
      flex-shrink:0;
    }
    .product-image img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .4s ease;
    }
    .product-card:hover .product-image img{
      transform:scale(1.05);
    }
    .product-body{
      padding:22px;
      display:flex;
      flex-direction:column;
      flex-grow:1;
    }
    .product-body h3{
      margin:4px 0 8px;
      color:var(--navy);
      font-size:1.14rem;
      line-height:1.35;
    }
    .product-body p{
      margin:0 0 14px;
      color:var(--muted);
      font-size:.88rem;
      line-height:1.6;
    }
    .product-body .card-specs-row{
      margin-top:auto;
      margin-bottom:14px;
    }
    .product-body .card-footer-actions,
    .product-body .product-card-footer,
    .product-body > div:last-child{
      margin-top:auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      padding-top:14px;
      border-top:1px solid var(--line);
    }
    .product-link{
      display:inline-flex;
      align-items:center;
      gap:4px;
      color:var(--red);
      font-weight:900;
      font-size:.88rem;
      text-decoration:none;
      transition:transform .2s ease;
    }
    .product-link:hover{
      transform:translateX(3px);
    }

    /* About */
    .about{background:var(--soft)}
    .about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center}
    .about-media{position:relative}
    .about-media img{width:100%;height:560px;object-fit:cover;border-radius:28px;box-shadow:var(--shadow)}
    .about-chip{
      position:absolute;right:-18px;bottom:30px;background:var(--navy);color:#fff;border-radius:18px;padding:18px 20px;max-width:240px;
      box-shadow:0 24px 50px rgba(11,31,68,.2);
    }
    .about-chip strong{display:block;font-size:1.25rem}
    .about-chip span{font-size:.87rem;color:#d7e2fb}
    .feature-list{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .feature{
      background:#fff;border:1px solid #e5e9f0;border-radius:16px;padding:17px;
      display:flex;gap:12px;align-items:flex-start;
    }
    .feature-num{flex:0 0 36px;height:36px;border-radius:11px;background:#fff1f3;color:var(--red);display:grid;place-items:center;font-weight:900}
    .feature h4{margin:0 0 4px;color:var(--navy)}
    .feature p{margin:0;color:var(--muted);font-size:.86rem}

    /* Advantage */
    .adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
    .adv-card{
      border:1px solid var(--line);border-radius:20px;padding:24px;min-height:210px;transition:.25s;background:#fff;
    }
    .adv-card:hover{border-color:#cad4e2;box-shadow:var(--shadow);transform:translateY(-5px)}
    .adv-icon{width:46px;height:46px;border-radius:14px;background:#eef3ff;color:var(--blue);display:grid;place-items:center;font-weight:900;margin-bottom:28px}
    .adv-card:nth-child(even) .adv-icon{background:#fff0f2;color:var(--red)}
    .adv-card h3{margin:0 0 8px;color:var(--navy)}
    .adv-card p{margin:0;color:var(--muted);font-size:.92rem}

    /* Process */
    .process{background:var(--navy);color:#fff;position:relative;overflow:hidden}
    .process::before{
      content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(255,255,255,.06);
      border-radius:50%;right:-190px;top:-240px;
    }
    .process .eyebrow{color:#ff6d79}.process .eyebrow::before{background:#ff6d79}
    .process .section-title{color:#fff}
    .process .section-sub{color:#b8c7e3}
    .process-grid{position:relative;margin-top:38px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .process-card{
      border:1px solid rgba(255,255,255,.12);border-radius:19px;padding:22px;background:rgba(255,255,255,.045);
    }
    .process-no{font-size:.8rem;font-weight:900;color:#ff818c;letter-spacing:.1em}
    .process-card h3{margin:12px 0 7px}
    .process-card p{margin:0;color:#b8c7e3;font-size:.88rem}

    /* Industries */
    .industries-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
    .industry-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
    .industry-tag{
      border:1px solid var(--line);background:#fff;border-radius:14px;padding:13px 15px;font-weight:800;color:#344054;
      transition:.2s;
    }
    .industry-tag:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
    .material-box{
      background:linear-gradient(135deg,#f7f9fd,#eef3ff);border:1px solid #e2e8f2;border-radius:24px;padding:30px;
    }
    .material{padding:17px 0;border-bottom:1px solid #dce3ee;display:flex;justify-content:space-between;gap:18px}
    .material:last-child{border-bottom:0}
    .material strong{color:var(--navy)}
    .material span{color:var(--muted);font-size:.9rem;text-align:right}

    /* CTA */
    .cta{padding:38px 0 96px}
    .cta-box{
      background:
        radial-gradient(circle at 90% 0%, rgba(255,255,255,.1),transparent 28%),
        linear-gradient(135deg,var(--red),#b70f20);
      border-radius:30px;padding:48px;color:#fff;display:grid;grid-template-columns:1fr .85fr;gap:40px;align-items:center;
      box-shadow:0 28px 70px rgba(229,31,50,.22);
    }
    .cta-box h2{font-size:clamp(2.2rem,4vw,4rem);line-height:1;letter-spacing:-.04em;margin:8px 0 16px}
    .cta-box p{color:#ffe1e5;margin:0;max-width:580px}
    .quote-form{
      background:#fff;border-radius:22px;padding:22px;color:var(--ink);
      display:grid;grid-template-columns:1fr 1fr;gap:12px;
    }
    .form-group{display:flex;flex-direction:column;gap:6px}
    .form-group.full{grid-column:1/-1}
    .form-group label{font-size:.78rem;font-weight:800;color:#475467}
    .form-group input,.form-group select,.form-group textarea{
      width:100%;border:1px solid #d8dee8;border-radius:11px;padding:12px 13px;outline:none;background:#fff;
      transition:.2s;
    }
    .form-group input:focus,.form-group select:focus,.form-group textarea:focus{
      border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,70,143,.08)
    }
    .form-group textarea{min-height:85px;resize:vertical}
    .form-note{grid-column:1/-1;font-size:.78rem;color:#667085;margin-top:-2px}
    .form-success{
      display:none;grid-column:1/-1;background:#eaf7ef;color:#166534;border:1px solid #b7e4c7;
      padding:10px 12px;border-radius:10px;font-weight:700;font-size:.88rem;
    }

    /* Footer */
    footer{background:#07152f;color:#d9e2f2;padding:62px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.25fr .75fr .75fr 1fr;gap:40px}
    .footer-logo{width:180px;background:#fff;border-radius:10px;padding:8px 10px}
    .footer-about{color:#9db0cf;max-width:390px;font-size:.9rem;margin-top:18px}
    footer h4{margin:0 0 16px;color:#fff}
    .footer-links{display:grid;gap:10px;color:#9db0cf;font-size:.9rem}
    .footer-links a:hover{color:#fff}
    .footer-contact{display:grid;gap:12px;color:#9db0cf;font-size:.9rem}
    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.08);margin-top:40px;padding-top:20px;
      display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#8297b8;font-size:.84rem;
    }

    /* Floating buttons */
    .back-top{
      position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:15px;border:0;background:var(--navy);
      color:#fff;display:grid;place-items:center;box-shadow:0 15px 35px rgba(11,31,68,.25);cursor:pointer;opacity:0;pointer-events:none;
      transform:translateY(10px);transition:.2s;z-index:999;
    }
    .back-top.show{opacity:1;pointer-events:auto;transform:none}

    /* Reveal */
    .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
    .reveal.visible{opacity:1;transform:none}

    @media (max-width:1020px){
      .nav-links{display:none}
      .menu-btn{display:block}
      .nav-actions .btn{display:none}
      .mobile-menu{
        position:absolute;left:20px;right:20px;top:78px;background:#fff;border:1px solid var(--line);border-radius:18px;
        box-shadow:var(--shadow);padding:14px;display:none;
      }
      .mobile-menu.open{display:grid}
      .mobile-menu a{padding:13px 12px;border-radius:10px;font-weight:800;color:var(--navy)}
      .mobile-menu a:hover{background:var(--soft)}
      .hero-grid,.about-grid,.cta-box,.industries-grid{grid-template-columns:1fr}
      .hero{padding-top:55px}
      .hero-visual{min-height:520px}
      .hero-photo,.hero-photo-overlay{width:92%}
      .products-grid{grid-template-columns:repeat(2,1fr)}
      .adv-grid{grid-template-columns:repeat(2,1fr)}
      .process-grid{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
      .footer-grid>div:last-child{grid-column:1/-1}
      .topbar-right{display:none}
    }

    @media (max-width:680px){
      :root{--container:min(100% - 28px, 1180px)}
      .section{padding:70px 0}
      .topbar-inner{min-height:36px}
      .topbar-left{font-size:.78rem}
      .brand img{width:132px}
      .nav{min-height:72px}
      .mobile-menu{top:68px}
      .hero{padding:42px 0 35px}
      .hero h1{font-size:clamp(2.9rem,14vw,4.7rem)}
      .hero-copy{font-size:1rem}
      .hero-actions .btn{width:100%}
      .trust-row{gap:12px}
      .hero-visual{min-height:420px;margin-top:6px}
      .hero-photo,.hero-photo-overlay{width:100%;height:370px;border-radius:24px}
      .hero-card{bottom:0;width:225px;padding:16px}
      .mini-badge{bottom:12px;right:8px}
      .floating-tag{top:25px;right:12px;font-size:.78rem}
      .stats-grid{grid-template-columns:1fr 1fr}
      .stat:nth-child(2){border-right:0}
      .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
      .products-grid,.adv-grid,.process-grid,.feature-list{grid-template-columns:1fr}
      .product-image{height:250px}
      .about-media img{height:420px}
      .about-chip{right:10px}
      .cta-box{padding:26px 20px}
      .quote-form{grid-template-columns:1fr}
      .form-group.full,.form-note,.form-success{grid-column:1}
      .footer-grid{grid-template-columns:1fr}
      .footer-grid>div:last-child{grid-column:auto}
      .footer-bottom{display:block}
      .footer-bottom span{display:block;margin-top:6px}
    }
  
    /* =========================================================
       PREMIUM HEADER UPGRADE — HEADER/TOPBAR ONLY
       ========================================================= */
    .topbar{
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 8% 50%, rgba(229,31,50,.20), transparent 24%),
        linear-gradient(90deg,#071a3b 0%,#0b2857 52%,#071a3b 100%);
      color:#eaf1ff;
      border-bottom:1px solid rgba(255,255,255,.08);
      font-size:.82rem;
      letter-spacing:.01em;
    }
    .topbar::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.18;
      background-image:
        linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.12) 47%, transparent 48% 100%);
      background-size:48px 48px;
    }
    .topbar-inner{
      position:relative;
      z-index:1;
      min-height:42px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
    }
    .topbar-left,.topbar-right{
      display:flex;
      align-items:center;
      gap:20px;
      flex-wrap:wrap;
    }
    .topbar-left>span:not(.top-pill),
    .topbar-right>span{
      color:#c7d7f4;
    }
    .top-pill{
      display:inline-flex;
      align-items:center;
      gap:9px;
      font-weight:800;
      color:#fff;
    }
    .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:#4ade80;
      box-shadow:
        0 0 0 4px rgba(74,222,128,.12),
        0 0 18px rgba(74,222,128,.65);
      animation:dcmPulse 2.2s ease-in-out infinite;
    }
    @keyframes dcmPulse{
      0%,100%{transform:scale(1);opacity:1}
      50%{transform:scale(.78);opacity:.68}
    }

    .header{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(20px) saturate(150%);
      -webkit-backdrop-filter:blur(20px) saturate(150%);
      border-bottom:1px solid rgba(11,31,68,.08);
      box-shadow:0 1px 0 rgba(255,255,255,.85) inset;
      transition:
        box-shadow .28s ease,
        background .28s ease,
        border-color .28s ease;
    }
    .header::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-1px;
      height:2px;
      background:linear-gradient(90deg,transparent 0%,var(--blue) 22%,var(--red) 52%,var(--blue) 78%,transparent 100%);
      opacity:.22;
      pointer-events:none;
    }
    .header.scrolled{
      background:rgba(255,255,255,.97);
      border-bottom-color:rgba(11,31,68,.10);
      box-shadow:0 16px 42px rgba(11,31,68,.10);
    }
    .nav{
      min-height:92px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:32px;
    }
    .brand{
      position:relative;
      display:flex;
      align-items:center;
      gap:12px;
      min-width:185px;
      padding:7px 0;
    }
    .brand::before{
      content:"";
      position:absolute;
      left:-18px;
      top:50%;
      width:4px;
      height:36px;
      transform:translateY(-50%);
      border-radius:99px;
      background:linear-gradient(180deg,var(--blue),var(--red));
      opacity:.9;
    }
    .brand img{
      width:168px;
      height:auto;
      transition:transform .25s ease,filter .25s ease;
      filter:drop-shadow(0 5px 10px rgba(11,31,68,.07));
    }
    .brand:hover img{
      transform:translateY(-1px);
      filter:drop-shadow(0 8px 14px rgba(11,31,68,.11));
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:8px;
      font-weight:800;
      font-size:.91rem;
      color:#263a5c;
      padding:6px;
      border:1px solid rgba(11,31,68,.06);
      background:rgba(247,249,253,.72);
      border-radius:999px;
      box-shadow:0 7px 22px rgba(11,31,68,.045);
    }
    .nav-links > a,
    .nav-dropdown-toggle{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:5px;
      padding:10px 16px;
      border-radius:999px;
      line-height:1.2;
      color:#263a5c;
      text-decoration:none;
      transition:color .22s ease,background .22s ease,transform .22s ease,box-shadow .22s ease;
    }
    .nav-links > a::after,
    .nav-dropdown-toggle::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:5px;
      width:4px;
      height:4px;
      border-radius:50%;
      background:var(--red);
      transform:translateX(-50%) scale(0);
      transition:transform .22s ease;
    }
    .nav-links > a:hover,
    .nav-dropdown-toggle:hover,
    .nav-dropdown:hover .nav-dropdown-toggle{
      color:var(--navy);
      background:#fff;
      transform:translateY(-1px);
      box-shadow:0 7px 18px rgba(11,31,68,.07);
    }
    .nav-links > a:hover::after,
    .nav-dropdown-toggle:hover::after,
    .nav-dropdown:hover .nav-dropdown-toggle::after{
      transform:translateX(-50%) scale(1);
    }

    /* Mega Dropdown for Bag Categories */
    .nav-dropdown{
      position:relative;
      display:inline-flex;
      align-items:center;
    }
    .nav-dropdown-toggle{
      display:inline-flex;
      align-items:center;
      gap:4px;
      cursor:pointer;
    }
    .nav-dropdown-toggle .nav-caret{
      font-size:.72rem;
      transition:transform .2s ease;
      display:inline-block;
    }
    .nav-dropdown:hover .nav-dropdown-toggle .nav-caret{
      transform:rotate(180deg);
    }
    .nav-dropdown-menu{
      position:absolute;
      top:calc(100% + 14px);
      left:50%;
      transform:translateX(-50%) translateY(10px);
      width:580px;
      background:#ffffff;
      border:1px solid rgba(11,31,68,.10);
      border-radius:20px;
      box-shadow:0 24px 60px rgba(11,31,68,.16);
      padding:16px;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .22s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1), visibility .22s;
      z-index:1200;
      text-align:left;
    }
    .nav-dropdown-menu::before{
      content:"";
      position:absolute;
      top:-16px;
      left:0;
      right:0;
      height:16px;
    }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform:translateX(-50%) translateY(0);
    }
    .nav-dropdown-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:4px 10px 10px;
      border-bottom:1px solid rgba(11,31,68,.06);
      margin-bottom:8px;
    }
    .nav-dropdown-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:6px;
    }
    .nav-dropdown-item{
      display:flex !important;
      align-items:center !important;
      gap:12px !important;
      padding:9px 12px !important;
      border-radius:12px !important;
      color:var(--navy) !important;
      text-decoration:none !important;
      background:transparent !important;
      transform:none !important;
      box-shadow:none !important;
      transition:background .18s ease, transform .18s ease !important;
    }
    .nav-dropdown-item::after{
      display:none !important;
    }
    .nav-dropdown-item:hover{
      background:#f4f7fc !important;
      transform:translateX(3px) !important;
      box-shadow:0 4px 14px rgba(11,31,68,.05) !important;
    }
    .nav-dropdown-icon{
      font-size:1.4rem;
      width:36px;
      height:36px;
      border-radius:10px;
      background:#ffffff;
      border:1px solid rgba(11,31,68,.08);
      display:grid;
      place-items:center;
      flex-shrink:0;
      box-shadow:0 2px 6px rgba(0,0,0,.04);
    }
    .nav-dropdown-info{
      display:flex;
      flex-direction:column;
      line-height:1.3;
    }
    .nav-dropdown-title{
      font-size:.88rem;
      font-weight:800;
      color:var(--navy);
    }
    .nav-dropdown-desc{
      font-size:.73rem;
      color:var(--muted);
      font-weight:500;
    }
    .nav-dropdown-footer{
      margin-top:10px;
      padding-top:10px;
      border-top:1px solid rgba(11,31,68,.06);
      text-align:center;
    }
    .nav-dropdown-footer a{
      display:inline-block;
      font-size:.82rem;
      font-weight:800;
      color:var(--red);
      padding:6px 12px !important;
      background:transparent !important;
      box-shadow:none !important;
    }
    .nav-dropdown-footer a::after{
      display:none !important;
    }
    .nav-dropdown-footer a:hover{
      color:var(--red-2);
      text-decoration:underline;
    }

    /* Mobile category section */
    .mobile-menu-section{
      padding:10px 8px;
      border-top:1px solid rgba(11,31,68,.08);
      border-bottom:1px solid rgba(11,31,68,.08);
      margin:6px 0;
    }
    .mobile-menu-label{
      display:block;
      font-size:.72rem;
      text-transform:uppercase;
      letter-spacing:.06em;
      color:var(--muted);
      font-weight:800;
      margin-bottom:8px;
      padding-left:4px;
    }
    .mobile-cat-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:6px;
    }
    .mobile-cat-link{
      display:flex !important;
      align-items:center !important;
      gap:8px !important;
      padding:8px 10px !important;
      border-radius:10px !important;
      background:#f7f9fd !important;
      font-size:.82rem !important;
      font-weight:700 !important;
      color:var(--navy) !important;
      text-decoration:none !important;
    }
    .mobile-cat-link:hover{
      background:#eef2fa !important;
      color:var(--red) !important;
    }

    .nav-actions{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .nav-actions .btn-primary{
      position:relative;
      isolation:isolate;
      min-height:50px;
      padding:0 22px;
      border-radius:14px;
      background:linear-gradient(135deg,#ef2639 0%,#d91328 100%);
      box-shadow:
        0 12px 25px rgba(229,31,50,.22),
        0 1px 0 rgba(255,255,255,.24) inset;
      overflow:hidden;
    }
    .nav-actions .btn-primary::before{
      content:"";
      position:absolute;
      z-index:-1;
      top:-120%;
      left:-35%;
      width:34%;
      height:340%;
      transform:rotate(24deg);
      background:rgba(255,255,255,.18);
      transition:left .55s ease;
    }
    .nav-actions .btn-primary:hover{
      background:linear-gradient(135deg,#e91d32 0%,#bb1022 100%);
      transform:translateY(-2px);
      box-shadow:0 16px 30px rgba(229,31,50,.27);
    }
    .nav-actions .btn-primary:hover::before{left:125%}

    .menu-btn{
      display:none;
      border:1px solid rgba(11,31,68,.08);
      background:linear-gradient(180deg,#fff,#f5f7fb);
      width:48px;
      height:48px;
      border-radius:14px;
      cursor:pointer;
      box-shadow:0 8px 20px rgba(11,31,68,.07);
      transition:.22s ease;
    }
    .menu-btn:hover{
      transform:translateY(-1px);
      box-shadow:0 11px 24px rgba(11,31,68,.10);
    }
    .menu-btn span{
      display:block;
      width:20px;
      height:2px;
      background:var(--navy);
      margin:4px auto;
      border-radius:99px;
      transition:.2s;
    }

    @media (max-width:1020px){
      .nav{min-height:82px}
      .brand{min-width:auto}
      .brand::before{left:-10px;height:30px}
      .brand img{width:150px}
      .mobile-menu{
        top:78px;
        border:1px solid rgba(11,31,68,.08);
        border-radius:20px;
        box-shadow:0 24px 60px rgba(11,31,68,.16);
        padding:10px;
        background:rgba(255,255,255,.98);
        backdrop-filter:blur(18px);
      }
      .mobile-menu a{
        padding:14px 14px;
        border-radius:12px;
        color:var(--navy);
      }
      .mobile-menu a:hover{
        background:linear-gradient(90deg,#f4f7fc,#fff4f5);
      }
    }

    @media (max-width:680px){
      .topbar-inner{min-height:38px}
      .topbar-left{
        width:100%;
        justify-content:center;
        font-size:.74rem;
        gap:10px;
      }
      .topbar-left>span:not(.top-pill){display:none}
      .nav{min-height:74px}
      .brand{padding-left:5px}
      .brand::before{display:none}
      .brand img{width:138px}
      .mobile-menu{top:70px}
    }

  
    /* =========================================================
       PERFECT LUXURY HEADER & TOPBAR (EXACT DCM HOME THEME MATCH)
       Left: Logo with Accent Bar | Center: Floating Frosted Pill Capsule | Right: Glowing Red Action
       ========================================================= */
    .topbar {
      display: block;
      background: var(--navy);
      color: #dbe5fb;
      font-size: .84rem;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .topbar-inner {
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .topbar-left, .topbar-right {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
    }
    .top-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #fff;
      font-weight: 700;
    }
    .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #4ade80;
      box-shadow: 0 0 0 4px rgba(74,222,128,.12);
      animation: dcmPulse 2.2s ease-in-out infinite;
    }
    @keyframes dcmPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(.8); opacity: .7; }
    }

    .header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(20px) saturate(150%);
      -webkit-backdrop-filter: blur(20px) saturate(150%);
      border-bottom: 1px solid rgba(232,235,240,.85);
      box-shadow: 0 1px 0 rgba(255,255,255,.85) inset;
      transition: box-shadow .28s ease, background .28s ease;
    }
    .header::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, var(--blue) 22%, var(--red) 52%, var(--blue) 78%, transparent 100%);
      opacity: 0;
      transition: opacity .3s ease;
    }
    .header.scrolled {
      background: rgba(255,255,255,.98);
      box-shadow: 0 14px 40px rgba(11,31,68,.09);
    }
    .header.scrolled::after {
      opacity: 1;
    }

    @media (min-width: 1021px) {
      .mobile-menu {
        display: none !important;
      }
      .nav {
        min-height: 84px;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 24px;
      }
      .brand {
        justify-self: start;
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
        padding: 4px 0;
      }
      .brand::before {
        content: "";
        position: absolute;
        left: -14px;
        top: 50%;
        width: 4px;
        height: 32px;
        transform: translateY(-50%);
        border-radius: 99px;
        background: linear-gradient(180deg, var(--blue), var(--red));
        opacity: .95;
      }
      .brand img {
        width: 145px;
        height: auto;
        display: block;
        filter: drop-shadow(0 4px 10px rgba(11,31,68,.07));
        transition: transform .25s ease, filter .25s ease;
      }
      .brand:hover img {
        transform: translateY(-1px);
        filter: drop-shadow(0 6px 14px rgba(11,31,68,.12));
      }

      .nav-links {
        justify-self: center;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 8px;
        border: 1px solid rgba(11,31,68,.07);
        background: rgba(247,249,253,.85);
        border-radius: 999px;
        box-shadow: 0 6px 20px rgba(11,31,68,.04);
        font-size: .91rem;
        font-weight: 700;
      }
      .nav-links > a, .nav-dropdown-toggle {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 9px 16px;
        border-radius: 999px;
        color: #263a5c;
        transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
      }
      .nav-links > a:hover, .nav-dropdown:hover .nav-dropdown-toggle {
        color: var(--navy);
        background: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(11,31,68,.08);
      }

      .nav-actions {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .nav-actions .btn-primary {
        position: relative;
        isolation: isolate;
        min-height: 48px;
        padding: 0 22px;
        border-radius: 12px;
        background: linear-gradient(135deg, #ef2639 0%, #d91328 100%);
        box-shadow: 0 12px 24px rgba(229,31,50,.22), 0 1px 0 rgba(255,255,255,.24) inset;
        overflow: hidden;
        color: #fff;
        font-weight: 800;
        transition: transform .22s ease, box-shadow .22s ease;
      }
      .nav-actions .btn-primary::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -120%;
        left: -35%;
        width: 34%;
        height: 340%;
        transform: rotate(24deg);
        background: rgba(255,255,255,.22);
        transition: left .55s ease;
      }
      .nav-actions .btn-primary:hover {
        background: linear-gradient(135deg, #e91d32 0%, #bb1022 100%);
        transform: translateY(-2px);
        box-shadow: 0 16px 30px rgba(229,31,50,.28);
      }
      .nav-actions .btn-primary:hover::before {
        left: 125%;
      }
    }

    @media (max-width: 1020px) {
      .nav {
        min-height: 74px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .brand img {
        width: 130px;
      }
      .nav-links {
        display: none;
      }
      .nav-actions .btn {
        display: none;
      }
      .menu-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 44px;
        height: 44px;
        border: 1px solid rgba(11,31,68,.10);
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 4px 12px rgba(11,31,68,.06);
        cursor: pointer;
      }
      .menu-btn span {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--navy);
        border-radius: 99px;
        transition: .2s;
        margin: 0;
      }
      .mobile-menu {
        top: 74px;
        left: 16px;
        right: 16px;
        border: 1px solid rgba(11,31,68,.08);
        border-radius: 20px;
        box-shadow: 0 24px 60px rgba(11,31,68,.16);
        padding: 14px;
        background: rgba(255,255,255,.98);
        backdrop-filter: blur(18px);
      }
      .mobile-menu.open {
        display: grid;
      }
      .mobile-menu a {
        padding: 12px 14px;
        border-radius: 12px;
        color: var(--navy);
        font-weight: 700;
      }
      .mobile-menu a:hover {
        background: linear-gradient(90deg, #f4f7fc, #fff4f5);
      }
    }

    /* Footer logo & alignment */
    footer .footer-logo {
      width: 150px;
      height: auto;
      margin-bottom: 18px;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
    }
    footer .footer-about {
      color: #94a3b8;
      font-size: .92rem;
      line-height: 1.7;
      margin: 0;
      max-width: 300px;
    }

    /* Mobile Category Tabs Horizontal Scroll */
    @media (max-width: 680px) {
      .product-toolbar {
        display: block;
        overflow: visible;
      }
      .filter-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        padding: 2px 2px 10px;
        margin: 0 0 14px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
      }
      .filter-row::-webkit-scrollbar {
        display: none;
      }
      .filter-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
      }
    }

/* =========================================================
   INNER PAGES DESIGN EXTENSIONS (UNIFIED THEME)
   ========================================================= */

.page-hero {
  padding: 56px 0 40px;
  background:
    radial-gradient(circle at 85% 15%, rgba(36,70,143,.09), transparent 32%),
    radial-gradient(circle at 10% 85%, rgba(229,31,50,.06), transparent 28%),
    linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.page-hero .container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--muted);
}
.breadcrumbs a {
  color: var(--muted);
  transition: color 0.2s;
}
.breadcrumbs a:hover {
  color: var(--red);
}
.breadcrumbs span {
  color: #cbd5e1;
}

/* Category Filter Tabs on Products page */
.category-filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.category-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: #475467;
  font-size: 0.88rem;
  font-weight: 700;
  transition: all 0.2s;
}
.category-pill:hover,
.category-pill.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(11,31,68,.12);
}

/* Product Detail Page */
.product-detail-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: start;
}
.product-media-column {
  position: sticky;
  top: 100px;
}
.product-main-image {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 12px 35px rgba(11,31,68,.06);
}
.product-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.product-gallery img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
  background: #fff;
}
.product-gallery img:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}
.product-info-column h1 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.1;
  color: var(--navy);
  margin: 8px 0 16px;
}
.product-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--blue);
  background: #eef3ff;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 28px 0;
}
.spec-item {
  background: var(--soft);
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 14px 16px;
}
.spec-item strong {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 4px;
}
.spec-item span {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}

.variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.variant-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.variant-card:hover {
  border-color: #cad4e2;
  box-shadow: 0 10px 24px rgba(11,31,68,.06);
}
.variant-card strong {
  color: var(--navy);
  display: block;
  margin-bottom: 4px;
}

/* E-Catalogs List */
.catalog-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.catalog-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  display: flex;
  flex-direction: column;
}
.catalog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: #cad4e2;
}
.catalog-card-image {
  height: 220px;
  background: linear-gradient(135deg, var(--navy), #1e3a70);
  overflow: hidden;
  position: relative;
}
.catalog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.catalog-card:hover .catalog-card-image img {
  transform: scale(1.05);
}
.catalog-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.catalog-card-body h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 1.25rem;
}
.catalog-card-body p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.92rem;
  flex-grow: 1;
}
.catalog-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Standalone Single Catalog Page */
.catalog-page {
  font-family: var(--catalog-font, Inter, sans-serif);
  color: var(--catalog-text, var(--ink));
}
.catalog-preview-banner {
  background: #fef9c3;
  border: 1px solid #fde047;
  color: #854d0e;
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 24px;
  font-weight: 700;
}
.catalog-cover {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  border-radius: 28px;
  padding: 48px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 24px 60px rgba(11,31,68,.18);
  margin-bottom: 32px;
}
.catalog-cover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.catalog-cover-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
}
.catalog-cover-content h1 {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  margin: 8px 0 12px;
  line-height: 1.05;
}
.catalog-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 40px;
}
.catalog-products {
  display: grid;
  grid-template-columns: repeat(var(--catalog-cols, 2), minmax(0, 1fr));
  gap: 24px;
}
.catalog-item {
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}
.catalog-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.catalog-product-image {
  height: 240px;
  background: var(--soft);
  display: block;
  overflow: hidden;
}
.catalog-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
}
.catalog-item-body {
  padding: 22px;
}
.catalog-item-body h2 {
  margin: 6px 0 10px;
  font-size: 1.25rem;
  color: var(--navy);
}
.catalog-share-box {
  margin-top: 48px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  box-shadow: 0 12px 36px rgba(11,31,68,.05);
}

/* Standalone Enquiry Page Form Box */
.enquiry-card-wrap {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 42px;
  box-shadow: var(--shadow);
}
.enquiry-card-wrap h1 {
  font-size: 2.2rem;
  color: var(--navy);
  margin: 0 0 10px;
}

/* Generic Content Page */
.page-content-wrap {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 44px;
  box-shadow: 0 10px 30px rgba(11,31,68,.04);
  font-size: 1.05rem;
  line-height: 1.8;
  color: #334155;
}
.page-content-wrap h1 {
  color: var(--navy);
  font-size: 2.5rem;
  margin-top: 0;
}
.page-content-wrap h2 {
  color: var(--navy);
  font-size: 1.8rem;
  margin: 32px 0 14px;
}
.page-content-wrap h3 {
  color: var(--navy);
  font-size: 1.3rem;
  margin: 24px 0 10px;
}

/* Responsive inner pages */
@media (max-width: 1020px) {
  .product-detail-grid {
    grid-template-columns: 1fr;
  }
  .product-media-column {
    position: static;
  }
  .catalog-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .catalog-products {
    grid-template-columns: 1fr;
  }
  .enquiry-card-wrap,
  .page-content-wrap {
    padding: 28px 20px;
    border-radius: 20px;
  }
}

@media (max-width: 680px) {
  .catalog-list-grid {
    grid-template-columns: 1fr;
  }
  .specs-grid {
    grid-template-columns: 1fr;
  }
  .catalog-share-box {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   CATEGORY PORTALS & ADVANCED CATALOGUE STYLES
   ========================================================= */
.category-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cat-portal-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}
.cat-portal-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--red));
  opacity: 0;
  transition: opacity 0.22s ease;
}
.cat-portal-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(11, 31, 68, 0.08);
  border-color: #cbd5e1;
}
.cat-portal-card:hover::before {
  opacity: 1;
}
.cat-portal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cat-portal-icon {
  font-size: 1.8rem;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--soft);
  border: 1px solid rgba(11, 31, 68, 0.06);
  display: grid;
  place-items: center;
}
.cat-portal-badge {
  font-size: 0.76rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(36, 70, 143, 0.08);
  color: var(--navy);
  border: 1px solid rgba(36, 70, 143, 0.12);
}
.cat-portal-title {
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 8px;
}
.cat-portal-desc {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
  margin: 0 0 16px;
  flex-grow: 1;
}
.cat-portal-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--red);
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.cat-arrow {
  transition: transform 0.2s ease;
}
.cat-portal-card:hover .cat-arrow {
  transform: translateX(4px);
}

/* Catalogue Filter Bar */
.catalogue-filter-bar {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px 24px;
  box-shadow: 0 8px 30px rgba(11, 31, 68, 0.04);
  margin-bottom: 28px;
}
.filter-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.filter-search-box {
  position: relative;
  flex-grow: 1;
  min-width: 260px;
}
.filter-search-box .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--muted);
}
.filter-search-box input {
  width: 100%;
  height: 46px;
  padding: 0 16px 0 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--soft);
  font-size: 0.92rem;
  color: var(--navy);
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.filter-search-box input:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(11, 31, 68, 0.08);
}
.filter-sort-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter-sort-box select {
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
}
.filter-tabs-scroller {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.filter-pill {
  white-space: nowrap;
  border: 1px solid var(--line);
  background: #ffffff;
  color: #475467;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-pill:hover,
.filter-pill.active {
  background: var(--navy);
  color: #ffffff;
  border-color: var(--navy);
  box-shadow: 0 4px 14px rgba(11, 31, 68, 0.15);
}

/* Card Specs & Badges */
.product-corner-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(11, 31, 68, 0.88);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.code-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid var(--line);
  padding: 2px 7px;
  border-radius: 6px;
}
.eyebrow-link {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--red);
  text-decoration: none;
}
.eyebrow-link:hover {
  text-decoration: underline;
}
.card-specs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 10px 12px;
  background: var(--soft);
  border-radius: 10px;
  font-size: 0.80rem;
  color: #475467;
}
.card-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
}

/* Custom MFG CTA Banner */
.custom-mfg-cta {
  margin-top: 56px;
  background: linear-gradient(135deg, #071a3b 0%, #0b2f6d 100%);
  border-radius: 28px;
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  box-shadow: 0 20px 50px rgba(7, 26, 59, 0.20);
}
.custom-mfg-content {
  flex-grow: 1;
}
.custom-mfg-btn {
  flex-shrink: 0;
}

/* Gallery Thumb active state */
.product-gallery img.thumb-active {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(229, 31, 50, 0.20);
}

@media (max-width: 1020px) {
  .category-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .custom-mfg-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
  }
}
@media (max-width: 680px) {
  .category-showcase-grid {
    grid-template-columns: 1fr;
  }
  .catalogue-filter-bar {
    padding: 16px;
  }
  .filter-controls-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Category Hero Stat Card */
.category-hero-stat {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 28px;
  box-shadow: var(--shadow);
  min-width: 250px;
  align-self: center;
}

/* Category Sticky Switcher Bar */
.category-nav-bar {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 92px;
  z-index: 900;
  box-shadow: 0 4px 20px rgba(11, 31, 68, 0.04);
  transition: top 0.25s ease;
}
.header.scrolled ~ main .category-nav-bar,
.category-nav-bar.scrolled {
  top: 82px;
}
.category-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.category-nav-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
}
.category-nav-pills::-webkit-scrollbar {
  display: none;
}
.category-nav-action {
  flex-shrink: 0;
}

/* Category Toolbar */
.category-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.category-toolbar-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.category-count-badge {
  font-size: 0.82rem;
  color: var(--navy);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 800;
}
.category-toolbar-search input {
  min-width: 280px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.88rem;
  background: #ffffff;
  color: var(--navy);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.category-toolbar-search input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(11, 31, 68, 0.08);
}

/* Product Detail Main Image Wrap */
.product-main-image-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid var(--line);
}
.product-main-image-wrap .product-main-image {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  display: block;
}

/* Responsive Grid Polish */
@media (max-width: 1160px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .category-showcase-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 860px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .category-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .category-hero-stat {
    width: 100%;
    min-width: unset;
    align-self: stretch;
    margin-top: 14px;
  }
  .category-nav-bar {
    top: 82px;
  }
}
@media (max-width: 580px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
  .category-showcase-grid {
    grid-template-columns: 1fr;
  }
  .product-image {
    height: 220px;
  }
  .category-nav-bar {
    top: 74px;
  }
  .category-toolbar-search input {
    min-width: 100%;
    width: 100%;
  }
  .category-toolbar-row {
    flex-direction: column;
    align-items: stretch;
  }
  .category-nav-action {
    display: none;
  }
}

/* Real Image Enhancements & Dropdown Media */
.nav-dropdown-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: #f1f4f9;
  border: 1px solid rgba(11,31,68,.08);
  flex-shrink: 0;
  display: block;
}
.nav-dropdown-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.nav-dropdown-item:hover .nav-dropdown-thumb img {
  transform: scale(1.08);
}

.cat-portal-image {
  position: relative;
  width: 100%;
  height: 180px;
  background: #f4f6fa;
  overflow: hidden;
}
.cat-portal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.cat-portal-card:hover .cat-portal-image img {
  transform: scale(1.06);
}
.cat-portal-count {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(11, 31, 68, 0.82);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Category Hero Two-Column Layout with Real Image */
.category-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 36px;
  align-items: center;
  margin-top: 14px;
}
.category-hero-showcase {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 12px 36px rgba(11, 31, 68, 0.07);
}
.category-hero-img-box {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  background: #f4f6fa;
}
.category-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.category-hero-showcase:hover .category-hero-img {
  transform: scale(1.04);
}
.category-hero-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(11, 31, 68, 0.88);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.82rem;
  padding: 6px 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.2);
}
.category-hero-features {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 8px 4px;
  font-size: 0.82rem;
  color: var(--muted);
  flex-wrap: wrap;
}
@media (max-width: 920px) {
  .category-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 960px) {
  .enquiry-grid-wrap {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

@media print {
  .header, .topbar, .back-top, footer, .catalog-actions, .no-print {
    display: none !important;
  }
  .container {
    width: 100% !important;
    max-width: none !important;
  }
}
/* Mobile Category Menu Grid */
.mobile-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.mobile-cat-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  text-decoration: none !important;
}
.mobile-cat-thumb {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

/* =========================================================
   MOBILE EXPERIENCE HARDENING — v0.4.4.5
   Fixes navigation, touch targets, overflow and storefront
   layouts on phones/tablets without changing desktop design.
   ========================================================= */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body.site-menu-open { overflow:hidden; touch-action:none; }
.menu-btn { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.mobile-menu-backdrop { display:none; }

/* Custom Menu Builder navigation — desktop */
.nav-links > .nav-item { position:relative; display:flex; align-items:center; }
.nav-links > .nav-item > a {
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px; border-radius:999px; color:#263a5c;
}
.nav-links > .nav-item > a::after {
  content:""; position:absolute; left:16px; right:16px; bottom:5px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
.nav-links > .nav-item:hover > a::after,
.nav-links > .nav-item:focus-within > a::after { transform:scaleX(1); }
.nav-links .nav-item .submenu {
  display:none; position:absolute; top:calc(100% + 10px); left:0; min-width:230px;
  padding:8px; border:1px solid var(--line); border-radius:14px; background:#fff;
  box-shadow:0 20px 50px rgba(11,31,68,.14); z-index:1300;
}
.nav-links .nav-item:hover > .submenu,
.nav-links .nav-item:focus-within > .submenu { display:grid; gap:2px; }
.nav-links .submenu .nav-item { display:block; position:relative; }
.nav-links .submenu .nav-item > a {
  display:flex; justify-content:space-between; gap:12px; padding:10px 12px;
  border-radius:9px; color:var(--navy); white-space:nowrap;
}
.nav-links .submenu .nav-item > a:hover { background:var(--soft); }
.nav-links .submenu .submenu { top:0; left:calc(100% + 6px); }

@media (max-width:1020px) {
  .topbar { font-size:.76rem; }
  .topbar-inner { min-height:34px; }
  .topbar-left { width:100%; justify-content:center; gap:8px; }
  .topbar-left > span:not(.top-pill), .topbar-right { display:none !important; }

  .header { z-index:1200; }
  .nav { min-height:70px !important; gap:12px !important; }
  .brand { min-width:0 !important; flex:1 1 auto; }
  .brand img { width:auto !important; max-width:148px; max-height:54px; object-fit:contain; }
  .nav-links { display:none !important; }
  .nav-actions { margin-left:auto; flex:0 0 auto; }
  .nav-actions .btn { display:none !important; }
  .menu-btn {
    display:flex !important; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; width:46px; height:46px; min-width:46px; padding:0; border:1px solid #dfe4ec;
    border-radius:13px; background:#fff; color:var(--navy); box-shadow:0 5px 16px rgba(11,31,68,.08);
    position:relative; z-index:1203; cursor:pointer;
  }
  .menu-btn span { width:21px !important; height:2px !important; margin:0 !important; background:var(--navy); border-radius:99px; transition:transform .2s ease, opacity .2s ease; }
  .menu-btn.is-open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .menu-btn.is-open span:nth-child(2) { opacity:0; }
  .menu-btn.is-open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

  .mobile-menu {
    display:none !important; position:absolute !important; top:calc(100% + 8px) !important;
    left:12px !important; right:12px !important; z-index:1202 !important;
    max-height:calc(100dvh - 96px); overflow-y:auto; overscroll-behavior:contain;
    padding:12px !important; border:1px solid rgba(11,31,68,.10) !important;
    border-radius:18px !important; background:rgba(255,255,255,.99) !important;
    box-shadow:0 24px 70px rgba(11,31,68,.22) !important; backdrop-filter:blur(18px);
    -webkit-overflow-scrolling:touch;
  }
  .mobile-menu.open { display:block !important; animation:mobileMenuIn .18s ease-out; }
  @keyframes mobileMenuIn { from { opacity:0; transform:translateY(-7px) scale(.985); } to { opacity:1; transform:none; } }
  .mobile-menu > a,
  .mobile-nav-row > a {
    display:flex !important; align-items:center; min-height:46px; padding:11px 12px !important;
    border-radius:11px !important; color:var(--navy) !important; font-weight:800 !important;
    line-height:1.3; flex:1 1 auto;
  }
  .mobile-menu > a:hover, .mobile-menu > a:focus-visible,
  .mobile-nav-row > a:hover, .mobile-nav-row > a:focus-visible { background:#f4f7fc !important; }
  .mobile-menu-backdrop {
    position:fixed; inset:0; z-index:1190; border:0; padding:0; margin:0;
    background:rgba(4,15,36,.44); backdrop-filter:blur(2px); cursor:default;
  }
  body.site-menu-open .mobile-menu-backdrop { display:block; }

  .mobile-nav-item { display:block; border-bottom:1px solid #edf0f5; }
  .mobile-nav-item:last-child { border-bottom:0; }
  .mobile-nav-row { display:flex; align-items:center; gap:4px; }
  .mobile-submenu-toggle {
    width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center;
    border:0; border-radius:10px; background:#f5f7fb; color:var(--navy); cursor:pointer;
  }
  .mobile-submenu-toggle span { font-size:19px; line-height:1; transition:transform .18s ease; }
  .mobile-nav-item.submenu-open > .mobile-nav-row .mobile-submenu-toggle span { transform:rotate(180deg); }
  .mobile-submenu { display:none; padding:0 0 8px 12px; }
  .mobile-nav-item.submenu-open > .mobile-submenu { display:block; }
  .mobile-submenu .mobile-nav-row > a { font-size:.92rem; font-weight:700 !important; }

  .section { padding:72px 0; }
  .hero-grid, .about-grid, .industries-grid, .cta-box, .product-detail-grid, .enquiry-grid-wrap { grid-template-columns:1fr !important; }
  .hero-visual { margin-top:10px; }
  .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important; }
  .adv-grid, .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .catalog-list-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .category-showcase-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .category-hero-grid { grid-template-columns:1fr !important; gap:24px !important; }
  .category-hero-img-box { max-width:680px; width:100%; }
  .category-nav-inner { overflow:hidden; }
  .category-nav-pills { overflow-x:auto; flex-wrap:nowrap !important; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:3px; }
  .category-nav-pills::-webkit-scrollbar { display:none; }
  .category-pill { flex:0 0 auto; white-space:nowrap; }
  .category-toolbar-row, .filter-controls-row { gap:12px; }
  .product-gallery { overflow-x:auto; flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
  .product-gallery img { flex:0 0 76px; }
  .catalog-actions { flex-wrap:wrap; }
  .catalog-share-box { gap:12px; }
  .catalog-url { overflow-wrap:anywhere; word-break:break-word; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width:680px) {
  :root { --container:min(100% - 28px, var(--container-width,1180px)); }
  body { overflow-x:hidden; }
  .container { width:min(100% - 28px, var(--container-width,1180px)) !important; }
  .section { padding:54px 0 !important; }
  .section-title { font-size:clamp(1.85rem,9vw,2.7rem) !important; line-height:1.08; letter-spacing:-.035em; }
  .section-sub { font-size:.96rem; }
  .page-hero { padding:38px 0 28px !important; }
  .page-hero .section-title { margin-top:8px !important; }
  .breadcrumbs { max-width:100%; overflow-x:auto; white-space:nowrap; scrollbar-width:none; font-size:.82rem; }
  .breadcrumbs::-webkit-scrollbar { display:none; }

  .topbar { display:none; }
  .nav { min-height:68px !important; }
  .brand img { max-width:132px; max-height:48px; }
  .menu-btn { width:44px; height:44px; min-width:44px; }
  .mobile-menu { left:10px !important; right:10px !important; top:calc(100% + 6px) !important; max-height:calc(100dvh - 82px); border-radius:16px !important; padding:10px !important; }
  .mobile-cat-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:7px !important; }
  .mobile-cat-link { min-width:0; padding:8px !important; font-size:.78rem !important; }
  .mobile-cat-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .hero { padding:36px 0 28px !important; }
  .hero h1 { font-size:clamp(2.35rem,13vw,3.65rem) !important; line-height:.96 !important; }
  .hero-copy { font-size:.96rem !important; }
  .hero-actions { display:grid !important; grid-template-columns:1fr !important; width:100%; gap:10px !important; }
  .hero-actions .btn { width:100% !important; justify-content:center; min-height:48px; }
  .trust-row { gap:8px 12px !important; font-size:.82rem; }
  .hero-visual { min-height:340px !important; }
  .hero-photo, .hero-photo-overlay { height:310px !important; border-radius:20px !important; }
  .hero-card { max-width:205px; padding:14px !important; }
  .floating-tag { font-size:.72rem !important; }

  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .stat { padding:20px 12px !important; }
  .stat strong { font-size:1.65rem !important; }
  .products-grid, .adv-grid, .process-grid, .catalog-list-grid, .category-showcase-grid, .feature-list { grid-template-columns:1fr !important; }
  .product-card { border-radius:18px !important; }
  .product-image { height:230px !important; }
  .product-body { padding:17px !important; }
  .card-footer-actions { display:grid !important; grid-template-columns:1fr !important; gap:8px !important; }
  .card-footer-actions .btn, .card-footer-actions a { width:100%; justify-content:center; }

  .product-toolbar { display:block !important; }
  .filter-row, .filter-tabs-scroller { display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
  .filter-row::-webkit-scrollbar, .filter-tabs-scroller::-webkit-scrollbar { display:none; }
  .filter-btn, .filter-pill { flex:0 0 auto; white-space:nowrap; }
  .filter-controls-row, .category-toolbar-row { flex-direction:column !important; align-items:stretch !important; }
  .filter-search-box, .filter-sort-box, .category-toolbar-search { width:100%; }
  .filter-search-box input, .filter-sort-box select, .category-toolbar-search input { width:100% !important; min-width:0 !important; min-height:46px; }

  .category-hero-showcase, .category-hero-img-box, .category-hero-img { width:100% !important; }
  .category-hero-img { max-height:330px; object-fit:cover; }
  .category-hero-stat { min-width:0 !important; width:100%; }
  .category-nav-bar { top:68px !important; }
  .category-nav-action { display:none !important; }

  .product-main-image-wrap { border-radius:18px; }
  .product-main-image { width:100%; max-height:420px; object-fit:contain; }
  .product-info-column .btn { width:100%; justify-content:center; margin:4px 0; }
  .specs-grid { grid-template-columns:1fr !important; }
  .spec-item { min-width:0; }

  .catalog-cover { border-radius:20px !important; overflow:hidden; }
  .catalog-cover-content { padding:24px 18px !important; }
  .catalog-actions { display:grid !important; grid-template-columns:1fr !important; gap:9px !important; }
  .catalog-actions .btn { width:100%; justify-content:center; }
  .catalog-products { grid-template-columns:1fr !important; }
  .catalog-item { grid-template-columns:1fr !important; }
  .catalog-share-box { flex-direction:column !important; align-items:stretch !important; }

  .quote-form { grid-template-columns:1fr !important; gap:12px !important; }
  .form-group.full, .form-note, .form-success { grid-column:1 !important; }
  input, select, textarea, button { max-width:100%; }
  input, select { min-height:46px; }
  textarea { min-height:120px; }
  .btn { min-height:44px; }
  .cta-box { padding:24px 18px !important; border-radius:20px !important; }
  .custom-mfg-cta { margin-top:34px !important; padding:26px 20px !important; border-radius:20px !important; }
  .custom-mfg-btn, .custom-mfg-btn .btn { width:100%; }

  .about-media img { height:auto !important; max-height:390px; }
  .about-chip { position:static !important; margin-top:10px; max-width:none !important; }
  .footer { padding-top:52px !important; }
  .footer-grid { grid-template-columns:1fr !important; gap:28px !important; }
  .footer-bottom { display:block !important; }
  .footer-bottom span { display:block; margin-top:8px; }
  .back-top { right:14px !important; bottom:14px !important; width:44px !important; height:44px !important; }
  .page-content-wrap, .enquiry-card-wrap { padding:22px 16px !important; border-radius:16px !important; }
}

@media (max-width:390px) {
  :root { --container:min(100% - 20px, var(--container-width,1180px)); }
  .container { width:min(100% - 20px, var(--container-width,1180px)) !important; }
  .mobile-cat-grid { grid-template-columns:1fr !important; }
  .hero h1 { font-size:2.25rem !important; }
  .stats-grid { grid-template-columns:1fr !important; }
  .stat { border-right:0 !important; border-bottom:1px solid var(--line); }
}

/* ==========================================================================
   v0.4.4.6 — accessibility, resilience and homepage slider
   ========================================================================== */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:3000;background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700}
.skip-link:focus{left:12px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
main:focus{outline:none}
/* Keyboard users previously had no visible focus on links, buttons, pills or thumbnails. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.header.header-static{position:relative}

/* Respect reduced-motion preferences; never leave content hidden waiting on a scroll animation. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* In-page jump targets sit below the sticky header + category bar instead of underneath them. */
#categoryProductsGrid,#categoryQuote,#products,#about,#process,#industries,#contact{scroll-margin-top:170px}
@media (max-width:1020px){#categoryProductsGrid,#categoryQuote,#products,#about,#process,#industries,#contact{scroll-margin-top:140px}}

.form-error{display:none;grid-column:1/-1;background:#fff1f2;color:#9f1239;border:1px solid #fecdd3;padding:10px 12px;border-radius:10px;font-weight:700;font-size:.88rem}
.form-success[role="status"],.form-error[role="alert"]{line-height:1.5}
.quote-form button[disabled]{opacity:.65;cursor:progress}
.empty-results{display:none;padding:40px 20px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:20px;margin-top:20px;color:var(--muted)}
.empty-results.show{display:block}

.footer-subheading{display:block;color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;margin-top:8px}
.footer-contact a{color:#9db0cf}
.footer-contact a:hover{color:#fff}

/* Product variants */
.variant-table{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.variant-table th,.variant-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
.variant-table th{background:var(--soft);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.variant-table tr:last-child td{border-bottom:0}
.variant-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Homepage hero slider (Admin → Banners / Slider, placement "home_hero") */
.hero-slider{position:relative;overflow:hidden;background:var(--navy);color:#fff}
.hero-slide{display:none;position:relative;min-height:min(72vh,600px);align-items:center;padding:72px 0;
  background-color:var(--navy);background-size:cover;background-position:center;
  background-image:linear-gradient(rgba(4,15,36,var(--overlay,.35)),rgba(4,15,36,var(--overlay,.35))),var(--slide-desktop,none)}
.hero-slide.active{display:flex;animation:heroSlideIn .5s ease}
@keyframes heroSlideIn{from{opacity:.4}to{opacity:1}}
.hero-slide-inner{display:flex;flex-direction:column;gap:14px;align-items:flex-start;text-align:left;max-width:var(--container-width,1180px)}
.hero-slide-inner.align-center{align-items:center;text-align:center}
.hero-slide-inner.align-right{align-items:flex-end;text-align:right}
.hero-slide-inner>*{max-width:680px}
.hero-slide h1,.hero-slide h2{margin:0;color:#fff;font-size:clamp(2rem,5vw,3.6rem);line-height:1.08;letter-spacing:-.03em}
.hero-slide p{margin:0;color:#e6eefc;font-size:1.08rem;line-height:1.7}
.hero-slide-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.hero-slider .btn-outline{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55)}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(4,15,36,.45);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.hero-arrow:hover{background:rgba(4,15,36,.75)}
.hero-arrow[data-prev]{left:14px}
.hero-arrow[data-next]{right:14px}
.hero-dots{position:absolute;left:0;right:0;bottom:16px;z-index:3;display:flex;gap:4px;justify-content:center}
.hero-dot{width:24px;height:24px;border:0;background:transparent;cursor:pointer;padding:0;position:relative}
.hero-dot::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:rgba(255,255,255,.5);transition:.2s}
.hero-dot.active::after{background:#fff;transform:scale(1.25)}
@media (max-width:680px){
  .hero-slide{min-height:480px;padding:56px 0 64px;background-image:linear-gradient(rgba(4,15,36,var(--overlay,.35)),rgba(4,15,36,var(--overlay,.35))),var(--slide-mobile,var(--slide-desktop,none))}
  .hero-arrow{display:none}
  .hero-slide-actions .btn{width:100%;justify-content:center}
}

@media (max-width:680px){.catalog-spec-line{grid-template-columns:1fr!important}}