/* =========================================================
   GIN TATTOOS
   FOOTER
   ========================================================= */

.site-footer {

  --red: #d9000a;
  --red-light: #ff3038;
  --black: #111111;

  position: relative;

  width: 100%;

  padding:
    75px 0 25px;

  background:
    #111111;

  color:
    #ffffff;

  overflow: hidden;

  font-family:
    "Roboto",
    sans-serif;
}


/* =========================================================
   TOP RED LINE
   ========================================================= */

.site-footer::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--red),
      #ff3038,
      var(--red),
      transparent
    );
}


/* =========================================================
   BACKGROUND GLOW
   ========================================================= */

.site-footer::after {

  content: "";

  position: absolute;

  width: 450px;
  height: 450px;

  right: -250px;
  bottom: -250px;

  border-radius: 50%;

  background:
    rgba(217,0,10,0.13);

  filter:
    blur(90px);

  pointer-events:
    none;
}


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

.footer-container {

  position:
    relative;

  z-index:
    2;

  width:
    min(
      1280px,
      calc(100% - 80px)
    );

  margin:
    0 auto;
}


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

.footer-top {

  display:
    grid;

  grid-template-columns:
    1.5fr
    0.8fr
    0.9fr
    1fr;

  gap:
    70px;

  padding-bottom:
    65px;

  border-bottom:
    1px solid
    rgba(255,255,255,0.09);
}


/* =========================================================
   BRAND
   ========================================================= */

.footer-brand {

  min-width:
    0;
}


.footer-logo {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    14px;

  color:
    #ffffff;

  text-decoration:
    none;
}


.footer-logo-mark {

  width:
    55px;

  height:
    55px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(255,255,255,0.15);

  border-radius:
    15px;

  background:
    rgba(255,255,255,0.04);

  overflow:
    hidden;
}


.footer-logo-mark img {

  width:
    38px;

  height:
    38px;

  object-fit:
    contain;
}


.footer-logo-copy {

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.footer-logo-copy span {

  color:
    #ffffff;

  font-size:
    1.05rem;

  font-weight:
    900;

  letter-spacing:
    0.08em;
}


.footer-logo-copy small {

  color:
    #777777;

  font-size:
    0.53rem;

  font-weight:
    700;

  letter-spacing:
    0.15em;
}


.footer-brand > p {

  max-width:
    280px;

  margin:
    25px 0 18px;

  color:
    #888888;

  font-size:
    0.8rem;

  line-height:
    1.7;
}


.footer-phone {

  color:
    #ffffff;

  font-size:
    1rem;

  font-weight:
    900;

  text-decoration:
    none;

  transition:
    color 0.3s ease;
}


.footer-phone:hover {

  color:
    var(--red-light);
}


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

.footer-column {

  min-width:
    0;
}


.footer-column-label {

  display:
    block;

  margin-bottom:
    23px;

  color:
    var(--red-light);

  font-size:
    0.62rem;

  font-weight:
    900;

  letter-spacing:
    0.18em;
}


/* =========================================================
   LINKS
   ========================================================= */

.footer-links {

  display:
    flex;

  flex-direction:
    column;

  gap:
    13px;
}


.footer-links a {

  width:
    fit-content;

  color:
    #999999;

  text-decoration:
    none;

  font-size:
    0.78rem;

  font-weight:
    600;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}


.footer-links a:hover {

  color:
    #ffffff;

  transform:
    translateX(5px);
}


.footer-links a::before {

  content:
    "↗";

  margin-right:
    7px;

  color:
    var(--red);

  opacity:
    0;

  transition:
    opacity 0.3s ease;
}


.footer-links a:hover::before {

  opacity:
    1;
}


/* =========================================================
   SOCIALS
   ========================================================= */

.footer-socials {

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}


.footer-socials a {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    10px 0;

  color:
    #999999;

  border-bottom:
    1px solid
    rgba(255,255,255,0.07);

  text-decoration:
    none;

  font-size:
    0.76rem;

  font-weight:
    600;

  transition:
    color 0.3s ease;
}


.footer-socials a > span {

  width:
    28px;

  height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(255,255,255,0.12);

  border-radius:
    8px;

  color:
    #ffffff;

  font-size:
    0.65rem;

  font-weight:
    900;

  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}


.footer-socials a b {

  margin-left:
    auto;

  color:
    #666666;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}


.footer-socials a:hover {

  color:
    #ffffff;
}


.footer-socials a:hover > span {

  background:
    var(--red);

  border-color:
    var(--red);
}


.footer-socials a:hover b {

  color:
    var(--red-light);

  transform:
    translate(2px,-2px);
}


/* =========================================================
   ADDRESS
   ========================================================= */

.footer-address address {

  margin:
    0 0 20px;

  color:
    #999999;

  font-size:
    0.78rem;

  font-style:
    normal;

  line-height:
    1.8;
}


.footer-map-link {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  color:
    #ffffff;

  text-decoration:
    none;

  font-size:
    0.63rem;

  font-weight:
    900;

  letter-spacing:
    0.1em;

  transition:
    color 0.3s ease;
}


.footer-map-link span {

  color:
    var(--red);
}


.footer-map-link:hover {

  color:
    var(--red-light);
}


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

.footer-bottom {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

  padding-top:
    25px;
}


.footer-bottom span {

  color:
    #666666;

  font-size:
    0.58rem;

  font-weight:
    700;

  letter-spacing:
    0.08em;
}


.footer-bottom a {

  color:
    #888888;

  text-decoration:
    none;

  font-size:
    0.58rem;

  font-weight:
    900;

  letter-spacing:
    0.1em;

  transition:
    color 0.3s ease;
}


.footer-bottom a:hover {

  color:
    var(--red-light);
}


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

@media (max-width: 1000px) {

  .footer-container {

    width:
      calc(100% - 60px);
  }


  .footer-top {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      50px;
  }

}


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

@media (max-width: 600px) {

  .site-footer {

    padding:
      60px 0 22px;
  }


  .footer-container {

    width:
      calc(100% - 32px);
  }


  .footer-top {

    grid-template-columns:
      1fr;

    gap:
      42px;

    padding-bottom:
      45px;
  }


  .footer-brand > p {

    margin-top:
      20px;
  }


  .footer-bottom {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      13px;
  }


  .footer-bottom a {

    order:
      -1;
  }

}


/* =========================================================
   VERY SMALL
   ========================================================= */

@media (max-width: 380px) {

  .footer-container {

    width:
      calc(100% - 24px);
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .site-footer *,
  .site-footer *::before,
  .site-footer *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}