/* footer.css — desktop unchanged; mobile uses 426x126 layout like mockup */

:root{
  --dw: 1440;
}

/* ===================== DESKTOP (UNCHANGED) ===================== */
.Footer {
  position: relative;
  width: 100%;
  height: calc(322/var(--dw) * 100vw);
  overflow: hidden;
}
.Footer .bg-top {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: calc(258/var(--dw) * 100vw);
  background: #A26769;
  z-index: 0;
}
.Footer .bg-bottom {
  position: absolute;
  left: 0;
  top: calc(258/var(--dw) * 100vw);
  width: 100%;
  height: calc(64/var(--dw) * 100vw);
  background: #000;
  z-index: 0;
}

/* Brand (desktop coordinates) */
.Footer .brandmark {
  position: absolute;
  left: calc(1142.67/var(--dw) * 100vw);
  top:  calc(44/var(--dw) * 100vw);
  width: calc(253.6/var(--dw) * 100vw);
  height: calc(89.92/var(--dw) * 100vw);
  z-index: 2;
}
.Footer .brandmark img { width: 100%; height: 100%; object-fit: contain; }

.Footer .logotype {
  position: absolute;
  left: calc(1143/var(--dw) * 100vw);
  top:  calc(149/var(--dw) * 100vw);
  width: calc(253/var(--dw) * 100vw);
  height: calc(16/var(--dw) * 100vw);
  z-index: 2;
}
.Footer .logotype img { width: 100%; height: 100%; object-fit: contain; }

/* Links (desktop coordinates) */
.Footer .links { position: relative; z-index: 2; }
.Footer .links a{
  position: absolute;
  color: #fff;
  text-decoration: none;
  font-family: Roboto, system-ui, sans-serif;
  font-weight: 400;
  font-size: calc(20/var(--dw) * 100vw);
  line-height: 1;
  white-space: nowrap;

  /* underline animation */
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .5s ease;
}
.Footer .links a:hover{ background-size: 100% 1px; }

/* Left column */
.Footer .links .Shop       { left: calc(57/var(--dw) * 100vw); top: calc(46/var(--dw) * 100vw); }
.Footer .links .Sauna      { left: calc(57/var(--dw) * 100vw); top: calc(90/var(--dw) * 100vw); }
.Footer .links .Treatments { left: calc(57/var(--dw) * 100vw); top: calc(134/var(--dw) * 100vw); }
.Footer .links .Retreats   { left: calc(57/var(--dw) * 100vw); top: calc(174/var(--dw) * 100vw); }
.Footer .links .About      { left: calc(57/var(--dw) * 100vw); top: calc(214/var(--dw) * 100vw); }

/* Right column */
.Footer .links .Account  { left: calc(254/var(--dw) * 100vw); top: calc(46/var(--dw) * 100vw); }
.Footer .links .Terms    { left: calc(254/var(--dw) * 100vw); top: calc(90/var(--dw) * 100vw); }
.Footer .links .Contact  { left: calc(254/var(--dw) * 100vw); top: calc(134/var(--dw) * 100vw); }
.Footer .links .Location { left: calc(254/var(--dw) * 100vw); top: calc(174/var(--dw) * 100vw); }

/* Credit (desktop) */
.Footer .site-credit {
  position: absolute;
  left: calc(461/var(--dw) * 100vw);
  top:  calc(272/var(--dw) * 100vw);
  color: #fff;
  font-size: calc(20/var(--dw) * 100vw);
  font-weight: 400;
  z-index: 2;
}

/* ===================== MOBILE (426x126 LAYOUT LIKE MOCKUP) ===================== */
@media (max-width: 900px) {
  .Footer{
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: calc(126/426 * 100vw);
    overflow: hidden;
    background: #000;
  }

  .Footer .bg-top{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc((94/426 * 100vw) + 1px);
    background: #A26769;
    z-index: 0;
  }

  .Footer .bg-bottom{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(32/426 * 100vw);
    background: #000;
    z-index: 0;
  }

  .Footer .brandmark,
  .Footer .logotype{
    display: none;
  }

  .Footer .links a{
    position: absolute;
    text-align: center;
    color: #fff;
    font-family: Roboto, system-ui, sans-serif;
    font-weight: 300;
    font-size: calc(14/426 * 100vw);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    background-image: none;
    padding: 0;
  }

  /* Left column */
  .Footer .links .Account{
    left: calc(19/426 * 100vw);
    top:  calc(11/426 * 100vw);
  }
  .Footer .links .About{
    left: calc(19/426 * 100vw);
    top:  calc(37/426 * 100vw);
  }
  .Footer .links .Shop{
    left: calc(19/426 * 100vw);
    top:  calc(63/426 * 100vw);
  }

  /* Middle column */
  .Footer .links .Retreats{
    left: calc(170/426 * 100vw);
    top:  calc(11/426 * 100vw);
  }
  .Footer .links .Treatments{
    left: calc(170/426 * 100vw);
    top:  calc(37/426 * 100vw);
  }
  .Footer .links .Sauna{
    left: calc(170/426 * 100vw);
    top:  calc(63/426 * 100vw);
  }

  /* Right column */
  .Footer .links .Location{
    left: calc(357/426 * 100vw);
    top:  calc(11/426 * 100vw);
  }
  .Footer .links .Contact{
    left: calc(357/426 * 100vw);
    top:  calc(37/426 * 100vw);
  }
  .Footer .links .Terms{
    left: calc(357/426 * 100vw);
    top:  calc(63/426 * 100vw);
  }

  /* Site credit */
  .Footer .site-credit{
    position: absolute;
    left: calc(29/426 * 100vw);
    top:  calc(102/426 * 100vw);
    color: #fff;
    font-family: Roboto, system-ui, sans-serif;
    font-weight: 400;
    font-size: calc(14/426 * 100vw);
    white-space: nowrap;
    z-index: 2;
  }
}