/* =========================================================
   VITA UNIKA — SECTION 2 ULTRALIGHT V3
   ========================================================= */

.vita-philosophy-v3{
  position:relative;
  padding:120px 0 118px;
  background:#fff;
  overflow:hidden;
}

.vita-philosophy-v3__shell{
  width:min(1380px, calc(100vw - 96px));
  margin:0 auto;
}


/* ---------------------------------------------------------
   TOP LABEL
   --------------------------------------------------------- */

.vita-philosophy-v3__label{
  display:flex;
  align-items:center;
  gap:18px;

  margin-bottom:46px;

  font-size:16px;
  line-height:1;

  font-weight:500;
  letter-spacing:.12em;

  color:#0b7978;
}

.vita-philosophy-v3__label::before{
  content:"";

  width:54px;
  height:1px;

  background:#b48d42;

  transform-origin:left center;

  animation:
    vitaPhiloLine
    2.2s
    cubic-bezier(.16,1,.3,1)
    both;
}


/* ---------------------------------------------------------
   MAIN TYPOGRAPHY
   --------------------------------------------------------- */

.vita-philosophy-v3 h2{
  max-width:1180px;

  margin:0;

  font-size:
    clamp(
      66px,
      7.2vw,
      120px
    );

  line-height:.91;

  letter-spacing:-.065em;

  font-weight:300;

  color:#132725;
}

.vita-philosophy-v3 h2 span{
  display:block;
}

.vita-philosophy-v3 h2 em{
  display:block;

  margin-top:8px;

  color:#0b7978;

  font-family:
    "DM Serif Display",
    Georgia,
    serif;

  font-style:italic;
  font-weight:400;

  letter-spacing:-.035em;
}


/* ---------------------------------------------------------
   BOTTOM ROW
   --------------------------------------------------------- */

.vita-philosophy-v3__bottom{
  display:grid;

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

  gap:70px;

  align-items:end;

  margin-top:54px;

  padding-top:30px;

  border-top:
    1px solid
    rgba(19,39,37,.11);
}


.vita-philosophy-v3__bottom p{
  max-width:760px;

  margin:0;

  font-size:20px;
  line-height:1.75;

  color:
    rgba(19,39,37,.60);
}


/* ---------------------------------------------------------
   SIMPLE CTA
   --------------------------------------------------------- */

.vita-philosophy-v3__link{
  display:inline-flex;

  align-items:center;

  gap:16px;

  padding-bottom:8px;

  border-bottom:
    1px solid
    rgba(11,121,120,.28);

  color:#132725;

  text-decoration:none;

  font-size:18px;
  line-height:1;

  font-weight:500;

  white-space:nowrap;

  transition:
    color .4s ease,
    gap .55s cubic-bezier(.16,1,.3,1),
    border-color .4s ease;
}


.vita-philosophy-v3__link svg{
  width:21px;
  height:21px;

  transition:
    transform .55s cubic-bezier(.16,1,.3,1);
}


@media(hover:hover) and (pointer:fine){

  .vita-philosophy-v3__link:hover{
    color:#0b7978;

    gap:22px;

    border-color:#0b7978;
  }

  .vita-philosophy-v3__link:hover svg{
    transform:
      translate3d(3px,-3px,0);
  }

}


/* ---------------------------------------------------------
   REVEAL
   --------------------------------------------------------- */

.vita-philosophy-v3 [data-philo-reveal]{
  opacity:0;

  transform:
    translate3d(0,26px,0);

  transition:
    opacity .9s ease,
    transform 1.05s cubic-bezier(.16,1,.3,1);
}


.vita-philosophy-v3
[data-philo-reveal].is-visible{
  opacity:1;

  transform:
    translate3d(0,0,0);
}


.vita-philosophy-v3
[data-philo-delay="1"]{
  transition-delay:.10s;
}


.vita-philosophy-v3
[data-philo-delay="2"]{
  transition-delay:.20s;
}


/* ---------------------------------------------------------
   GOLD LINE
   --------------------------------------------------------- */

@keyframes vitaPhiloLine{

  from{
    transform:scaleX(0);
  }

  to{
    transform:scaleX(1);
  }

}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media(max-width:1050px){

  .vita-philosophy-v3__shell{
    width:calc(100vw - 64px);
  }

  .vita-philosophy-v3__bottom{
    grid-template-columns:1fr;
    gap:30px;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:760px){

  .vita-philosophy-v3{
    padding:82px 0 86px;
  }

  .vita-philosophy-v3__shell{
    width:calc(100vw - 36px);
  }

  .vita-philosophy-v3__label{
    margin-bottom:30px;

    font-size:14px;
  }

  .vita-philosophy-v3 h2{
    font-size:
      clamp(
        46px,
        13vw,
        64px
      );
  }

  .vita-philosophy-v3__bottom{
    margin-top:38px;
    padding-top:24px;
  }

  .vita-philosophy-v3__bottom p{
    font-size:18px;
    line-height:1.65;
  }

  .vita-philosophy-v3__link{
    font-size:17px;
  }

}

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

  .vita-philosophy-v3 [data-philo-reveal]{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  .vita-philosophy-v3__label::before{
    animation:none!important;
  }

}