/* Start custom CSS for html, class: .elementor-element-b924836 *//* =========================================================
   NEW VISION COMMERCIAL — SHARED / FOOTER CSS
========================================================= */

:root{
  --ink:#0a0a0b;
  --charcoal:#151517;
  --panel:#1c1c1f;
  --panel-2:#232326;
  --line:#2a2a2e;
  --line-soft:#232327;
  --volt:#c6ff3d;
  --volt-dim:#9fd92e;
  --volt-soft:rgba(198,255,61,.1);
  --paper:#f5f5f2;
  --grey:#9a9a9f;
  --grey-dim:#6b6b70;
  --radius:2px;
  --ease:cubic-bezier(.2,.7,.2,1);
}


/* =========================================================
   BASE
========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Archivo',sans-serif;
  overflow-x:hidden;
}

::selection{
  background:var(--volt);
  color:var(--ink);
}

.display{
  font-family:'Anton',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.92;
}

.mono{
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.04em;
}

a{
  color:inherit;
  text-decoration:none;
}

.text-grey{
  color:var(--grey);
}

.text-grey-dim{
  color:var(--grey-dim);
}


/* =========================================================
   FOCUS
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--volt);
  outline-offset:3px;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:var(--ink);
}

::-webkit-scrollbar-thumb{
  background:var(--line);
}

::-webkit-scrollbar-thumb:hover{
  background:var(--grey-dim);
}


/* =========================================================
   CONTAINER
========================================================= */

.container-xl{
  max-width:1320px;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(20px,4vw,56px);
  padding-right:clamp(20px,4vw,56px);
  width:100%;
}


/* =========================================================
   FOOTER
========================================================= */

.nvc-footer{
  position:relative;
  background:var(--ink);
  border-top:1px solid var(--line);
  padding:70px 0 26px;
  overflow:hidden;
}

.nvc-footer::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:120px;
  height:1px;
  background:var(--volt);
}


/* BRAND */

.nvc-footer .brand-mark{
  margin-bottom:20px;
  display:inline-flex;
  align-items:center;
  transition:transform .25s var(--ease);
}

.nvc-footer .brand-mark:hover{
  transform:translateY(-2px);
}

.nvc-footer .brand-mark img{
  height:34px;
  width:auto;
  display:block;
}


/* DESCRIPTION */

.nvc-footer-description{
  max-width:36ch;
  line-height:1.7;
  margin-top:16px;
  margin-bottom:0;
  font-size:.9rem;
}


/* DRE */

.nvc-dre{
  font-size:.72rem;
  margin-top:18px;
  letter-spacing:.05em;
}


/* FOOTER HEADINGS */

.nvc-footer h4{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grey-dim);
  margin:0 0 18px;
}


/* =========================================================
   FOOTER NAVIGATION
========================================================= */

.nvc-footer-nav,
.nvc-footer-contact{
  list-style:none;
  padding:0;
  margin:0;
}

.nvc-footer-nav li,
.nvc-footer-contact li{
  margin-bottom:11px;
}

.nvc-footer-nav li a,
.nvc-footer-contact li a{
  position:relative;
  display:inline-block;
  color:var(--grey);
  font-size:.92rem;
  line-height:1.5;
  transition:
    color .2s ease,
    transform .2s ease;
}


/* Navigation hover underline */

.nvc-footer-nav li a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:1px;
  background:var(--volt);
  transition:
    width .25s var(--ease);
}

.nvc-footer-nav li a:hover{
  color:var(--volt);
  transform:translateX(3px);
}

.nvc-footer-nav li a:hover::after{
  width:100%;
}


/* CONTACT */

.nvc-footer-contact li span{
  font-size:.92rem;
  line-height:1.5;
}

.nvc-footer-contact li a:hover{
  color:var(--volt);
}


/* =========================================================
   SOCIAL
========================================================= */

.nvc-footer .social-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.nvc-footer .social-row a{
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:50%;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin:0;

  color:var(--grey);

  transition:
    border-color .25s ease,
    color .25s ease,
    background .25s ease,
    transform .25s ease;
}

.nvc-footer .social-row a:hover{
  border-color:var(--volt);
  background:var(--volt-soft);
  color:var(--volt);
  transform:translateY(-3px);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.nvc-footer .footer-bottom{
  border-top:1px solid var(--line);
  margin-top:50px;
  padding-top:24px;

  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;

  color:var(--grey-dim);
  letter-spacing:.03em;
}

.nvc-footer .footer-bottom span{
  line-height:1.6;
}


/* =========================================================
   ACCESSIBILITY BUTTON
========================================================= */

.a11y-btn{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1200;

  width:52px;
  height:52px;

  border-radius:50%;
  border:none;

  background:var(--volt);

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 8px 24px rgba(0,0,0,.4);

  cursor:pointer;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.a11y-btn:hover{
  transform:scale(1.08);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}

.a11y-btn img{
  width:24px;
  height:24px;
}

.a11y-btn img.spin{
  animation:spin 6s linear infinite;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}


/* =========================================================
   ACCESSIBILITY PANEL
========================================================= */

.a11y-panel{
  position:fixed;
  right:22px;
  bottom:86px;
  z-index:1200;

  width:240px;

  background:var(--charcoal);
  border:1px solid var(--line);

  padding:18px;

  transform:translateY(12px) scale(.96);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    transform .25s ease,
    opacity .25s ease,
    visibility .25s ease;
}

.a11y-panel.open{
  transform:translateY(0) scale(1);

  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.a11y-panel h5{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;

  color:var(--volt);

  margin:0 0 14px;
}

.a11y-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;

  padding:8px 0;

  border-bottom:1px solid var(--line);

  font-size:.84rem;
  color:var(--grey);
}

.a11y-row:last-child{
  border-bottom:none;
}


/* TOGGLE */

.a11y-toggle{
  width:36px;
  height:20px;

  background:var(--line);
  border:none;
  border-radius:20px;

  position:relative;

  cursor:pointer;
  flex-shrink:0;

  transition:background .2s ease;
}

.a11y-toggle::after{
  content:"";

  position:absolute;

  top:2px;
  left:2px;

  width:16px;
  height:16px;

  border-radius:50%;

  background:var(--paper);

  transition:
    transform .2s ease,
    background .2s ease;
}

.a11y-toggle.on{
  background:var(--volt);
}

.a11y-toggle.on::after{
  transform:translateX(16px);
  background:var(--ink);
}


/* =========================================================
   HIGH CONTRAST
========================================================= */

body.high-contrast{
  background:#000;
}

body.high-contrast .display,
body.high-contrast p,
body.high-contrast span,
body.high-contrast a{
  color:#fff !important;
}

body.high-contrast .spec-card img,
body.high-contrast .about-figure img,
body.high-contrast .listing-img-wrap img{
  filter:contrast(1.3) !important;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-top{
  position:fixed;
  left:22px;
  bottom:22px;
  z-index:1150;

  width:44px;
  height:44px;

  border-radius:50%;

  background:var(--charcoal);
  border:1px solid var(--line);

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--grey);

  opacity:0;
  visibility:hidden;

  transform:translateY(10px);

  transition:
    opacity .3s ease,
    visibility .3s ease,
    transform .3s ease,
    border-color .25s ease,
    color .25s ease;
}

.back-top.show{
  opacity:1;
  visibility:visible;
  transform:none;
}

.back-top:hover{
  border-color:var(--volt);
  color:var(--volt);
  transform:translateY(-3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:991.98px){

  .nvc-footer{
    padding:60px 0 24px;
  }

  .nvc-footer .footer-bottom{
    margin-top:40px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767.98px){

  .nvc-footer{
    padding:52px 0 22px;
  }

  .nvc-footer-description{
    max-width:100%;
  }

  .nvc-footer h4{
    margin-bottom:15px;
  }

  .nvc-footer-nav li,
  .nvc-footer-contact li{
    margin-bottom:10px;
  }

  .nvc-footer .footer-bottom{
    margin-top:35px;
    padding-top:20px;
    flex-direction:column;
  }

  .a11y-btn{
    right:16px;
    bottom:16px;

    width:48px;
    height:48px;
  }

  .a11y-panel{
    right:16px;
    bottom:76px;

    width:min(
      240px,
      calc(100vw - 32px)
    );
  }

  .back-top{
    left:16px;
    bottom:16px;

    width:42px;
    height:42px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px){

  .nvc-footer .brand-mark img{
    height:30px;
  }

  .nvc-footer-description{
    font-size:.86rem;
  }

  .nvc-footer-nav li a,
  .nvc-footer-contact li a,
  .nvc-footer-contact li span{
    font-size:.86rem;
  }

}/* End custom CSS */