/* =========================================================
   VITA UNIKA — 05A THOUGHTFUL APPROACH V2
   Human / editorial / portrait-led
   ========================================================= */

.vita-thoughtful-v2{

  --thought-line:0;
  --thought-img-y:0px;

  position:relative;

  padding:
    144px
    0
    150px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfb 100%
    );

  overflow:hidden;
}


.vita-thoughtful-v2__shell{

  width:
    min(
      1380px,
      calc(100vw - 96px)
    );

  margin:
    0
    auto;
}


/* =========================================================
   META
   ========================================================= */

.vita-thoughtful-v2__meta{

  display:flex;

  align-items:center;

  gap:20px;

  margin-bottom:44px;

  font-size:17px;

  line-height:1;

  font-weight:600;

  letter-spacing:.08em;

  color:#0b7978;
}


.vita-thoughtful-v2__meta::before{

  content:"";

  width:54px;
  height:1px;

  background:#b48d42;
}


/* =========================================================
   TITLE
   ========================================================= */

.vita-thoughtful-v2__heading{

  max-width:1150px;

  margin:0;

  font-size:
    clamp(
      68px,
      7vw,
      116px
    );

  line-height:.89;

  letter-spacing:-.065em;

  font-weight:300;

  color:#132725;
}


.vita-thoughtful-v2__heading span{

  display:block;
}


.vita-thoughtful-v2__heading em{

  display:block;

  margin-top:8px;

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

  font-style:italic;

  font-weight:400;

  letter-spacing:-.035em;

  color:#0b7978;
}


/* =========================================================
   MAIN COMPOSITION
   ========================================================= */

.vita-thoughtful-v2__grid{

  display:grid;

  grid-template-columns:
    minmax(0,.92fr)
    minmax(440px,1.08fr);

  gap:92px;

  align-items:center;

  margin-top:82px;
}


/* =========================================================
   COPY
   ========================================================= */

.vita-thoughtful-v2__copy{

  position:relative;

  padding-left:44px;
}


/* animated vertical gold line */

.vita-thoughtful-v2__copy::before{

  content:"";

  position:absolute;

  left:0;
  top:0;

  width:2px;
  height:100%;

  transform:
    scaleY(
      var(--thought-line)
    );

  transform-origin:
    top center;

  background:
    linear-gradient(
      180deg,
      #b48d42 0%,
      #0b7978 100%
    );

  border-radius:99px;

  transition:
    transform .12s linear;

  box-shadow:
    0 0 20px
    rgba(180,141,66,.12);
}


.vita-thoughtful-v2__statement{

  max-width:610px;

  margin:0;

  font-size:
    clamp(
      28px,
      2.5vw,
      42px
    );

  line-height:1.38;

  letter-spacing:-.035em;

  font-weight:350;

  color:#132725;
}


.vita-thoughtful-v2__statement strong{

  font-weight:450;

  color:#0b7978;
}


.vita-thoughtful-v2__body{

  max-width:570px;

  margin:
    34px
    0
    0;

  font-size:20px;

  line-height:1.78;

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


/* =========================================================
   CTA
   ========================================================= */

.vita-thoughtful-v2__link{

  display:inline-flex;

  align-items:center;

  gap:18px;

  margin-top:38px;

  padding-bottom:9px;

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

  font-size:18px;

  line-height:1;

  font-weight:500;

  color:#132725;

  text-decoration:none;

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


.vita-thoughtful-v2__link svg{

  width:21px;
  height:21px;

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


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

  .vita-thoughtful-v2__link:hover{

    gap:24px;

    color:#0b7978;

    border-color:#0b7978;
  }


  .vita-thoughtful-v2__link:hover svg{

    transform:
      translate3d(
        3px,
        -3px,
        0
      );
  }

}


/* =========================================================
   PORTRAIT
   ========================================================= */

.vita-thoughtful-v2__portrait-wrap{

  position:relative;

  padding:
    26px
    0
    0
    26px;
}


.vita-thoughtful-v2__portrait-wrap::before{

  content:"";

  position:absolute;

  left:0;
  top:0;

  width:58%;
  height:58%;

  border-top:
    1px solid
    rgba(180,141,66,.52);

  border-left:
    1px solid
    rgba(180,141,66,.52);

  border-radius:
    34px
    0
    0
    0;

  pointer-events:none;
}


.vita-thoughtful-v2__portrait{

  position:relative;

  height:
    clamp(
      560px,
      58vw,
      760px
    );

  overflow:hidden;

  border-radius:
    34px;

  background:#eef3f2;

  box-shadow:
    0 28px 72px
    rgba(19,39,37,.09);
}


.vita-thoughtful-v2__portrait img{

  width:100%;
  height:
    calc(100% + 32px);

  object-fit:cover;

  transform:
    translate3d(
      0,
      var(--thought-img-y),
      0
    )
    scale(1.025);

  filter:
    saturate(.96)
    contrast(.99);

  will-change:transform;
}


/* =========================================================
   FLOATING WORD
   ========================================================= */

.vita-thoughtful-v2__portrait-word{

  position:absolute;

  right:-10px;
  bottom:34px;

  z-index:3;

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

  font-style:italic;

  font-size:
    clamp(
      54px,
      5vw,
      84px
    );

  line-height:.9;

  color:#fff;

  text-shadow:
    0 6px 28px
    rgba(0,0,0,.20);

  pointer-events:none;
}


/* =========================================================
   REVEAL
   ========================================================= */

.vita-thoughtful-v2
[data-thought-reveal]{

  opacity:0;

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

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


.vita-thoughtful-v2
[data-thought-reveal].is-visible{

  opacity:1;

  transform:none;
}


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

@media(max-width:1050px){

  .vita-thoughtful-v2{

    padding:
      112px
      0
      118px;
  }


  .vita-thoughtful-v2__shell{

    width:
      calc(
        100vw - 64px
      );
  }


  .vita-thoughtful-v2__grid{

    grid-template-columns:
      minmax(0,.9fr)
      minmax(360px,1.1fr);

    gap:54px;
  }


  .vita-thoughtful-v2__portrait{

    height:
      clamp(
        500px,
        66vw,
        650px
      );
  }

}


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

@media(max-width:760px){

  .vita-thoughtful-v2{

    padding:
      84px
      0
      90px;
  }


  .vita-thoughtful-v2__shell{

    width:
      calc(
        100vw - 36px
      );
  }


  .vita-thoughtful-v2__meta{

    margin-bottom:28px;

    font-size:14px;
  }


  .vita-thoughtful-v2__heading{

    font-size:
      clamp(
        46px,
        13vw,
        64px
      );
  }


  .vita-thoughtful-v2__grid{

    display:flex;

    flex-direction:column-reverse;

    gap:46px;

    margin-top:48px;
  }


  .vita-thoughtful-v2__portrait-wrap{

    width:100%;

    padding:
      18px
      0
      0
      18px;
  }


  .vita-thoughtful-v2__portrait{

    height:110vw;

    max-height:620px;

    border-radius:26px;
  }


  .vita-thoughtful-v2__portrait-word{

    right:8px;
    bottom:24px;

    font-size:54px;
  }


  .vita-thoughtful-v2__copy{

    padding-left:28px;
  }


  .vita-thoughtful-v2__statement{

    font-size:28px;
  }


  .vita-thoughtful-v2__body{

    margin-top:24px;

    font-size:18px;

    line-height:1.68;
  }


  .vita-thoughtful-v2__link{

    margin-top:28px;

    font-size:17px;
  }

}


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

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

  .vita-thoughtful-v2
  [data-thought-reveal]{

    opacity:1 !important;

    transform:none !important;

    transition:none !important;
  }


  .vita-thoughtful-v2__copy::before{

    transform:scaleY(1) !important;
  }


  .vita-thoughtful-v2__portrait img{

    transform:none !important;
  }

}