
/* -- PAGE LOADER -- */
#page-loader{position:fixed;inset:0;z-index:99999;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .55s ease,visibility .55s ease}
#page-loader.done{opacity:0;visibility:hidden}
@keyframes honeycomb{0%,20%,80%,100%{opacity:0;transform:scale(0)}30%,70%{opacity:1;transform:scale(1)}}
.honeycomb{height:24px;position:relative;width:24px}
.honeycomb div{animation:honeycomb 2.1s infinite backwards;background:#D42020;height:12px;margin-top:6px;position:absolute;width:24px}
.honeycomb div::after,.honeycomb div::before{content:'';border-left:12px solid transparent;border-right:12px solid transparent;position:absolute;left:0;right:0}
.honeycomb div::after{top:-6px;border-bottom:6px solid #D42020}
.honeycomb div::before{bottom:-6px;border-top:6px solid #D42020}
.honeycomb div:nth-child(1){animation-delay:0s;left:-28px;top:0}
.honeycomb div:nth-child(2){animation-delay:.1s;left:-14px;top:22px}
.honeycomb div:nth-child(3){animation-delay:.2s;left:14px;top:22px}
.honeycomb div:nth-child(4){animation-delay:.3s;left:28px;top:0}
.honeycomb div:nth-child(5){animation-delay:.4s;left:14px;top:-22px}
.honeycomb div:nth-child(6){animation-delay:.5s;left:-14px;top:-22px}
.honeycomb div:nth-child(7){animation-delay:.6s;left:0;top:0}

.skip-link{position:absolute;top:-100%;left:1rem;z-index:9999;background:#D42020;color:#fff;padding:.5rem 1.25rem;border-radius:0 0 8px 8px;font-size:.85rem;font-weight:600;text-decoration:none;transition:top .15s;outline:none}
.skip-link:focus{top:0}
#nav a:focus-visible,.nd-toggle:focus-visible,.nav-cta:focus-visible,.nav-ham:focus-visible{outline:2px solid #D42020;outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}}

/* -- HAMBURGER BUTTON -- */
.nav-ham{display:none;background:none;border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:7px 9px;cursor:pointer;color:#fff;transition:color .3s,border-color .3s;flex-shrink:0;line-height:0}
#nav.s .nav-ham{color:#0A0A0F;border-color:rgba(0,0,0,.14)}
.nav-ham svg{display:block;transition:transform .2s}

/* -- MOBILE NAV OVERLAY -- */
@media(max-width:768px){
  /* Always-visible white nav on mobile, translateZ forces its own GPU layer above all content */
  #nav{background:#fafafa!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:1px solid rgba(0,0,0,.1)!important;box-shadow:0 1px 8px rgba(0,0,0,.08)!important;z-index:9999!important;overflow:visible!important;transform:translateZ(0)!important;-webkit-transform:translateZ(0)!important}
  /* Dark logo text on mobile */
  #nav .logo-t{color:#0A0A0F!important}
  /* Middle polygon invisible on white nav, make it a visible light grey */
  #nav .logo svg polygon:nth-child(2){fill:#D8D9DB!important}
  /* Hamburger, absolute inside nav; no backdrop-filter on nav so no containing-block trap */
  #nav .nav-ham{
    display:flex!important;align-items:center;justify-content:center;
    position:absolute!important;top:50%!important;right:1rem!important;margin-top:-18px!important;
    z-index:10000!important;background:none!important;
    color:#0A0A0F!important;border-color:rgba(0,0,0,.2)!important;
  }
  #nav .nav-cta{display:none!important}
  #nav .nav-i{padding:.75rem 1.25rem!important;padding-right:3.5rem!important;overflow:visible!important;max-width:100%!important}

  /* Full-screen overlay */
  #nav .nav-links{
    display:none!important;
    position:fixed!important;top:0!important;left:0!important;
    width:100%!important;height:100vh!important;
    padding:64px 1.25rem 2rem!important;
    background:#fafafa!important;
    flex-direction:column!important;
    z-index:1001!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    box-shadow:none!important;
    border-radius:0!important;
    transform:none!important;
  }
  #nav .nav-links.open{display:flex!important}

  /* Links in overlay */
  #nav .nav-links>a{
    font-size:1rem!important;color:#0A0A0F!important;
    padding:.85rem 0!important;border-bottom:1px solid rgba(0,0,0,.08)!important;
    font-weight:400!important;display:block!important;
    position:static!important;background:none!important;
    transform:none!important;
  }
  #nav .nav-links>a::after{display:none!important}

  /* Products accordion row */
  #nav .nav-dd{width:100%!important;position:static!important;display:block!important;transform:none!important}
  #nav .nd-toggle{
    font-size:1rem!important;color:#0A0A0F!important;
    padding:.85rem 0!important;border-bottom:1px solid rgba(0,0,0,.08)!important;
    width:100%!important;display:flex!important;justify-content:space-between!important;
    align-items:center!important;background:none!important;
    border-left:none!important;border-right:none!important;border-top:none!important;border-radius:0!important;
  }

  /* Mega-wrap: hidden by default, shown via JS class */
  #nav .mega-wrap{
    display:none!important;
    position:static!important;top:auto!important;left:auto!important;
    transform:none!important;width:100%!important;
    border-radius:12px!important;box-shadow:none!important;
    border:1px solid rgba(0,0,0,.09)!important;background:#fff!important;
    overflow:visible!important;opacity:1!important;
    margin:.4rem 0 .75rem!important;
    transition:none!important;z-index:auto!important;
  }
  #nav .mega-wrap::before,#nav .mega-wrap::after{display:none!important}
  #nav .mega-bg{display:none!important}
  #nav .nav-dd.open .mega-wrap{display:block!important}

  /* Mega header */
  #nav .mega-head{padding:.5rem 1rem .35rem!important;display:flex!important;align-items:center!important}
  #nav .mega-eye{font-size:.62rem!important;letter-spacing:.1em!important}
  #nav .mega-divider{margin:0!important}

  /* Single-column product grid */
  #nav .mega-grid{display:grid!important;grid-template-columns:1fr!important;gap:0!important;padding:.2rem .5rem .5rem!important}

  /* Horizontal card row */
  #nav .mc{
    display:grid!important;grid-template-columns:52px 1fr!important;
    grid-template-rows:auto auto!important;column-gap:.7rem!important;row-gap:.05rem!important;
    padding:.6rem .5rem!important;border-radius:8px!important;
    border-bottom:1px solid rgba(0,0,0,.06)!important;
    background:transparent!important;align-items:center!important;
    overflow:visible!important;text-decoration:none!important;transform:none!important;
  }
  #nav .mc:last-child{border-bottom:none!important}
  #nav .mc::before,#nav .mc::after{display:none!important}

  /* Card image */
  #nav .mc-img-w{
    grid-column:1!important;grid-row:1/3!important;
    height:44px!important;width:52px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    margin:0!important;background:rgba(0,0,0,.04)!important;
    border-radius:8px!important;overflow:hidden!important;
  }
  #nav .mc-img-w img{height:38px!important;width:100%!important;object-fit:contain!important;filter:none!important;transform:none!important;transition:none!important}

  /* Card text */
  #nav .mc-badge{display:none!important}
  #nav .mc-name{grid-column:2!important;grid-row:1!important;font-size:.9rem!important;margin:0!important;line-height:1.25!important;color:#0A0A0F!important}
  #nav .mc-desc{display:none!important}
  #nav .mc-link{grid-column:2!important;grid-row:2!important;font-size:.7rem!important;opacity:1!important;transform:none!important;margin:0!important;display:block!important}

  .wrap{padding:0 1.25rem!important}
}
@media(max-width:480px){
  .wrap{padding:0 1rem!important}
}
.mc-rental:hover{background:rgba(217,119,6,.05)}.mc-rental:hover::after{border-color:rgba(217,119,6,.22)}.mc-rental .mc-link{color:#D97706}
.logo-img{height:72px;width:auto;display:block;filter:brightness(0) invert(1);transition:filter .4s ease}
#nav.nav-solid .logo-img,#nav.s .logo-img{filter:brightness(0)}
@media(max-width:768px){.logo-img{filter:brightness(0)!important;height:40px!important}}
/* -- DESKTOP NAV -- */
#nav{position:fixed;top:0;left:0;right:0;z-index:1000}
.nav-i{max-width:1280px;margin:0 auto;padding:1.2rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.logo{display:flex;align-items:center;gap:10px}
.logo-t{font-size:1.3rem;font-weight:400;letter-spacing:-.02em}
.logo-t em{color:#D42020;font-style:normal}
.nav-links{display:flex;gap:1.75rem;align-items:center}
.nav-links a{font-size:.875rem;font-weight:500;transition:color .2s;position:relative;padding-bottom:2px}
.nav-cta{background:#D42020;color:#FFF;border:none;border-radius:100px;padding:.6rem 1.4rem;font-size:.875rem;font-weight:400;cursor:pointer;transition:transform .2s,box-shadow .2s;font-family:'Poppins',sans-serif;white-space:nowrap;display:inline-block}
.nav-cta:hover{transform:scale(1.04);box-shadow:0 0 24px rgba(212,32,32,.35)}
/* light nav (always white opaque) */
#nav[data-nav="light"]{background:rgba(250,250,250,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.09);box-shadow:0 1px 0 rgba(0,0,0,.06)}
#nav[data-nav="light"] .logo-img{filter:brightness(0)!important}
#nav[data-nav="light"] .logo-t{color:#0A0A0F}
#nav[data-nav="light"] .nav-links a{color:#6B7280}
#nav[data-nav="light"] .nav-links a:hover,#nav[data-nav="light"] .nav-links a.cur{color:#0A0A0F}
#nav[data-nav="light"] .nd-toggle{color:#6B7280}
#nav[data-nav="light"] .nav-dd.open .nd-toggle,#nav[data-nav="light"] .nd-toggle:hover{color:#0A0A0F}
/* transparent→light nav (index, about, contact — .s scroll class) */
#nav[data-nav="transparent"]{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-bottom:1px solid transparent;transition:background .4s,border-color .4s,box-shadow .4s,backdrop-filter .4s}
#nav[data-nav="transparent"] .logo-t{color:#FFF;transition:color .3s}
#nav[data-nav="transparent"] .nav-links a{color:rgba(255,255,255,.7)}
#nav[data-nav="transparent"] .nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:#D42020;border-radius:1px;transition:width .25s ease}
#nav[data-nav="transparent"] .nav-links a:hover,#nav[data-nav="transparent"] .nav-links a.cur{color:#FFF}
#nav[data-nav="transparent"] .nav-links a:hover::after,#nav[data-nav="transparent"] .nav-links a.cur::after{width:100%}
#nav[data-nav="transparent"] .nd-toggle{color:rgba(255,255,255,.7)}
#nav[data-nav="transparent"] .nav-dd.open .nd-toggle,#nav[data-nav="transparent"] .nd-toggle:hover{color:#FFF}
#nav[data-nav="transparent"].s{background:rgba(250,250,250,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:rgba(0,0,0,.09);box-shadow:0 1px 0 rgba(0,0,0,.06)}
#nav[data-nav="transparent"].s .logo-t{color:#0A0A0F}
#nav[data-nav="transparent"].s .nav-links a{color:#6B7280}
#nav[data-nav="transparent"].s .nav-links a:hover,#nav[data-nav="transparent"].s .nav-links a.cur{color:#0A0A0F}
#nav[data-nav="transparent"].s .nd-toggle{color:#6B7280}
#nav[data-nav="transparent"].s .nav-dd.open .nd-toggle,#nav[data-nav="transparent"].s .nd-toggle:hover{color:#0A0A0F}
/* hero nav (use-cases — transparent→white via .nav-solid scroll class) */
#nav[data-nav="hero"]{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-bottom:1px solid transparent;transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease,box-shadow .4s ease}
#nav[data-nav="hero"] .logo-t{color:#fff}
#nav[data-nav="hero"] .nav-links a{color:rgba(255,255,255,.5);font-weight:400}
#nav[data-nav="hero"] .nav-links a:hover,#nav[data-nav="hero"] .nav-links a.cur{color:#fff}
#nav[data-nav="hero"] .nd-toggle{color:rgba(255,255,255,.5);font-weight:400}
#nav[data-nav="hero"] .nav-dd.open .nd-toggle,#nav[data-nav="hero"] .nd-toggle:hover{color:#fff}
#nav[data-nav="hero"].nav-solid{background:rgba(255,255,255,.97)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;border-bottom-color:rgba(0,0,0,.08)!important;box-shadow:0 1px 12px rgba(0,0,0,.06)!important}
#nav[data-nav="hero"].nav-solid .logo-t{color:#0A0A0A!important}
#nav[data-nav="hero"].nav-solid .nav-links a{color:rgba(0,0,0,.55)!important}
#nav[data-nav="hero"].nav-solid .nav-links a:hover,#nav[data-nav="hero"].nav-solid .nav-links a.cur{color:#0A0A0A!important}
#nav[data-nav="hero"].nav-solid .nd-toggle{color:rgba(0,0,0,.55)!important}
#nav[data-nav="hero"].nav-solid .nav-dd.open .nd-toggle,#nav[data-nav="hero"].nav-solid .nd-toggle:hover{color:#0A0A0A!important}
#nav[data-nav="hero"].nav-solid .nav-ham{color:#0A0A0A!important;border-color:rgba(0,0,0,.2)!important}
@media(max-width:768px){#nav[data-nav="hero"]:not(.nav-solid){background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;border-bottom-color:transparent!important}}
/* Transparent nav on mobile — override the always-white rule above */
@media(max-width:768px){
  #nav[data-nav="transparent"]:not(.s){background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;border-bottom-color:transparent!important}
  #nav[data-nav="transparent"]:not(.s) .logo-img{filter:brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0,0,0,.5))!important}
  #nav[data-nav="transparent"]:not(.s) .nav-ham{color:#fff!important;border-color:rgba(255,255,255,.4)!important}
  #nav[data-nav="transparent"].s{background:#fafafa!important;border-bottom-color:rgba(0,0,0,.1)!important;box-shadow:0 1px 8px rgba(0,0,0,.08)!important}
  #nav[data-nav="transparent"].s .logo-img{filter:brightness(0)!important}
  #nav[data-nav="transparent"].s .nav-ham{color:#0A0A0F!important;border-color:rgba(0,0,0,.2)!important}
}
/* mega menu */
.nav-dd{position:static;display:flex;align-items:center}
.nd-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:.875rem;border:none;background:none;font-family:'Poppins',sans-serif;padding:0;transition:color .2s;position:relative;padding-bottom:2px}
.nd-chev{transition:transform .25s ease;flex-shrink:0}
.nav-dd.open .nd-chev{transform:rotate(180deg)}
.mega-wrap{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-12px);width:min(1080px,calc(100vw - 2rem));background:#FFFFFF;border:1px solid rgba(0,0,0,.09);border-radius:20px;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,.04),0 20px 50px rgba(0,0,0,.1);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s cubic-bezier(.22,1,.36,1);z-index:400}
.nav-dd.open .mega-wrap{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-wrap::before{content:"";position:absolute;top:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(212,32,32,.8) 40%,rgba(212,32,32,.9) 50%,rgba(212,32,32,.8) 60%,transparent);z-index:2}
.mega-bg{position:absolute;inset:0;background:transparent}
.mega-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.5rem .85rem;position:relative;z-index:1}
.mega-eye{font-size:.6rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:rgba(0,0,0,.35)}
.mega-all-link{font-size:.76rem;color:rgba(0,0,0,.4);transition:color .2s;display:flex;align-items:center;gap:.35rem}
.mega-all-link:hover{color:rgba(0,0,0,.8)}
.mega-divider{height:1px;background:rgba(0,0,0,.08)}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;padding:1rem;position:relative;z-index:1}
.mc{display:flex;flex-direction:column;padding:1.3rem 1.2rem 1.4rem;border-radius:14px;text-decoration:none;position:relative;overflow:hidden;transition:background .2s}
.mc::after{content:"";position:absolute;inset:0;border-radius:14px;border:1px solid transparent;transition:border-color .2s;pointer-events:none}
.mc-img-w{height:160px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:.9rem}
.mc-img-w img{height:150px;width:auto;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.2));transition:transform .35s cubic-bezier(.22,1,.36,1),filter .35s ease}
.mc:hover .mc-img-w img{transform:translateY(-8px) scale(1.06);filter:drop-shadow(0 10px 24px rgba(0,0,0,.28))}
.mc-svg-w{height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.mc:hover .mc-svg-w{transform:translateY(-6px) scale(1.05)}
.mc-badge{display:inline-block;font-size:.59rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;padding:.17rem .65rem;border-radius:100px;margin-bottom:.45rem;width:fit-content}
.mc-name{font-size:.95rem;font-weight:400;color:#0A0A0F;letter-spacing:-.01em;margin-bottom:.3rem}
.mc-desc{font-size:.71rem;color:rgba(0,0,0,.45);line-height:1.55;flex:1}
.mc-link{display:inline-flex;align-items:center;gap:.3rem;margin-top:.7rem;font-size:.72rem;font-weight:400;opacity:0;transform:translateX(-5px);transition:opacity .18s,transform .18s}
.mc:hover .mc-link{opacity:1;transform:none}
.mc-vrt:hover{background:rgba(212,32,32,.05)}.mc-vrt:hover::after{border-color:rgba(212,32,32,.2)}.mc-vrt .mc-badge{background:rgba(212,32,32,.1);color:#EF5050;border:1px solid rgba(212,32,32,.22)}.mc-vrt .mc-link{color:#EF5050}
.mc-plus:hover{background:rgba(184,134,11,.05)}.mc-plus:hover::after{border-color:rgba(146,64,14,.22)}.mc-plus .mc-badge{background:rgba(184,134,11,.1);color:#92400E;border:1px solid rgba(146,64,14,.25)}.mc-plus .mc-link{color:#92400E}
.mc-home:hover{background:rgba(20,184,166,.05)}.mc-home:hover::after{border-color:rgba(15,118,110,.2)}.mc-home .mc-badge{background:rgba(20,184,166,.1);color:#0F766E;border:1px solid rgba(15,118,110,.22)}.mc-home .mc-link{color:#0F766E}
.mc-vr:hover{background:rgba(37,99,235,.05)}.mc-vr:hover::after{border-color:rgba(37,99,235,.2)}.mc-vr .mc-badge{background:rgba(37,99,235,.1);color:#60A5FA;border:1px solid rgba(37,99,235,.22)}.mc-vr .mc-link{color:#60A5FA}
.mega-foot{display:flex;align-items:center;gap:1.25rem;padding:.85rem 1.5rem;border-top:1px solid rgba(0,0,0,.08);position:relative;z-index:1}
.mf-link{display:flex;align-items:center;gap:.45rem;font-size:.76rem;color:rgba(0,0,0,.45);transition:color .2s;text-decoration:none;white-space:nowrap}
.mf-link:hover{color:rgba(0,0,0,.75)}
.mf-sep{width:1px;height:14px;background:rgba(0,0,0,.1);flex-shrink:0}
.mf-cta{color:rgba(212,32,32,.75)!important}.mf-cta:hover{color:#D42020!important}
