/* =========================================================
   VEROLIFE BUSINESS VALUES PAGE
   Page-specific CSS only
   Common header/footer styles remain in style.css
========================================================= */

/* =========================================================
   PAGE WRAPPER
========================================================= */
.bv-page{
  width:100%;
  padding:18px 22px 65px;
  overflow:hidden;
}

/* =========================================================
   HERO SECTION - NEW FLOATING IMAGE CARD LAYOUT
========================================================= */
.bv-hero{
  width:min(1420px,100%);
  margin:0 auto;
}

.bv-hero__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(500px,1.14fr);
  gap:55px;
  min-height:610px;
  padding:100px 32px 32px 68px;
  overflow:hidden;
  border-radius:30px;
  background:
    radial-gradient(circle at 15% 35%,rgba(183,235,167,.44),transparent 38%),
    radial-gradient(circle at 41% 88%,rgba(205,239,194,.26),transparent 38%),
    #f5fbf2;
}

.bv-hero__inner::before{
  content:"";
  position:absolute;
  width:390px;
  height:390px;
  left:-180px;
  bottom:-170px;
  border-radius:50%;
  border:1px solid rgba(77,151,54,.09);
  box-shadow:0 0 0 40px rgba(77,151,54,.025),0 0 0 80px rgba(77,151,54,.018);
  pointer-events:none;
}

/* =========================================================
   HERO LEFT CONTENT
========================================================= */
.bv-hero__content{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:45px 0;
}

.bv-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:30px;
  padding:5px 14px;
  border:1px solid rgba(75,151,51,.08);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#488f34;
  font-family: "DM Sans", sans-serif;
  font-size:12px;
  font-weight:600;
  line-height:1;
  letter-spacing:.35px;
  text-transform:uppercase;
}

.bv-hero__content h1{
  max-width:480px;
  margin:28px 0 0;
  font-family: "DM Sans", sans-serif;
  font-size:74px;
  font-weight:400;
  line-height:.92;
  letter-spacing:-2px;
  color:#232725;
}

.bv-hero__content h1 span{
  display:block;
  color:#4c9932;
}

.bv-hero__content > p{
  max-width:510px;
  margin:31px 0 0;
  color:#5f7076;
  font-family: "DM Sans", sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.75;
}

.bv-hero__tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:31px;
}

.bv-hero__tags span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:39px;
  padding:0 17px;
  border:1px solid #dbe8d7;
  border-radius:999px;
  background:#fff;
  color:#596963;
  font-family: "DM Sans", sans-serif;
  font-size:13px;
  font-weight:500;
  box-shadow:0 8px 20px rgba(43,78,43,.05);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.bv-hero__tags span:hover{
  transform:translateY(-2px);
  border-color:rgba(75,154,51,.26);
  box-shadow:0 11px 25px rgba(43,78,43,.09);
}

/* =========================================================
   HERO IMAGE CARD
   IMAGE FILE: ./assets/image/business-values-hero.jpg
   RECOMMENDED SOURCE DIMENSIONS: 1920px × 1080px
========================================================= */
.bv-hero__visual{
  position:relative;
  align-self:center;
  width:100%;
  height:545px;
  padding:0;
  overflow:visible;
}

.bv-hero__visual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  border-radius:28px;
  max-width:none;
  box-shadow:0 24px 60px rgba(55,88,56,.14);
  transition:transform .7s ease,box-shadow .7s ease;
}

.bv-hero__visual:hover img{
  transform:translateY(-4px);
  box-shadow:0 30px 68px rgba(55,88,56,.18);
}

.bv-hero__visual::after{
  display:none !important;
  content:none !important;
}

/* =========================================================
   FLOATING LEAF BADGE
========================================================= */
.bv-hero__leaf{
  position:absolute;
  left:-7%;
  top:42%;
  z-index:7;
  display:grid;
  place-items:center;
  width:94px;
  height:94px;
  border:5px solid #fff;
  border-radius:50%;
  background:#f8fcf6;
  color:#4a9832;
  transform:none;
  box-shadow:0 18px 42px rgba(44,87,44,.17);
}

.bv-hero__leaf svg{
  width:47px;
  height:47px;
  fill:currentColor;
}

.bv-hero__leaf-line{
  fill:none !important;
  stroke:currentColor;
  stroke-width:2;
}

/* =========================================================
   HERO RESPONSIVE
========================================================= */
@media(max-width:1200px){
  .bv-hero__inner{
    grid-template-columns:minmax(0,.92fr) minmax(440px,1.08fr);
    gap:38px;
    padding:28px 28px 28px 48px;
  }
  .bv-hero__content{padding:38px 0;}
  .bv-hero__content h1{font-size:64px;}
  .bv-hero__content > p{font-size:15px;}
  .bv-hero__visual{height:500px;}
  .bv-hero__leaf{width:82px;height:82px;left:-31px;bottom:45px;}
  .bv-hero__leaf svg{width:41px;height:41px;}
}

@media(max-width:980px){
  .bv-hero__inner{
    display:flex;
    flex-direction:column;
    gap:25px;
    min-height:auto;
    padding:55px 28px 28px;
  }
  .bv-hero__content{order:1;align-items:center;padding:0;text-align:center;}
  .bv-hero__content h1{max-width:620px;font-size:60px;}
  .bv-hero__content > p{max-width:650px;margin-left:auto;margin-right:auto;}
  .bv-hero__tags{justify-content:center;}
  .bv-hero__visual{order:2;width:100%;height:450px;margin-top:8px;overflow:hidden;border-radius:22px;}
  .bv-hero__visual img{border-radius:22px;}
  .bv-hero__leaf{display:none;}
}

@media(max-width:620px){
  .bv-hero__inner{padding:42px 12px 12px;border-radius:22px;}
  .bv-hero__content{padding:0 8px;}
  .bv-label{min-height:27px;padding:4px 11px;font-size:12px;}
  .bv-hero__content h1{margin-top:21px;font-size:48px;line-height:.95;letter-spacing:-1.2px;}
  .bv-hero__content > p{margin-top:22px;font-size:14px;line-height:1.68;}
  .bv-hero__tags{margin-top:24px;gap:7px;}
  .bv-hero__tags span{min-height:34px;padding:0 13px;font-size:12px;}
  .bv-hero__visual{height:320px;margin-top:8px;border-radius:16px;}
  .bv-hero__visual img{border-radius:16px;object-position:center;}
}

@media(max-width:390px){
  .bv-hero__content h1{font-size:43px;}
  .bv-hero__visual{height:280px;}
}

/* =========================================================
   VALUES SECTION
========================================================= */

.bv-values{
  width:min(1360px,100%);

  margin:105px auto 0;
}


/* VALUES HEADING */

.bv-values__head{
  max-width:700px;

  margin:0 auto 50px;

  text-align:center;
}


.bv-values__head .bv-label{
  margin:0 auto;
}


.bv-values__head h2{
  margin:24px 0 0;

  font-family: "DM Sans", sans-serif;

  font-size:58px;
  font-weight:400;

  line-height:.98;

  letter-spacing:-1.4px;

  color:#252525;
}


.bv-values__head p{
  max-width:570px;

  margin:22px auto 0;

  color:#627276;

  font-family: "DM Sans", sans-serif;

  font-size:15px;

  line-height:1.65;
}


/* =========================================================
   VALUES GRID
========================================================= */

.bv-grid{
  display:grid;

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

  gap:17px;
}


/* =========================================================
   VALUE CARD
========================================================= */

.bv-card{
  position:relative;

  min-height:410px;

  padding:32px 24px 28px;

  overflow:hidden;

  border:
    1px solid rgba(52,91,57,.10);

  border-radius:22px;

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

  text-align:center;

  box-shadow:
    0 14px 38px rgba(47,77,53,.06);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}


/* CARD SOFT GLOW */

.bv-card::before{
  content:"";

  position:absolute;

  left:50%;
  top:-35px;

  width:190px;
  height:190px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(198,232,188,.35),
      transparent 70%
    );

  transform:
    translateX(-50%);

  pointer-events:none;
}


.bv-card:hover{
  transform:
    translateY(-8px);

  border-color:
    rgba(72,151,48,.25);

  box-shadow:
    0 23px 55px rgba(47,77,53,.12);
}


/* NUMBER */

.bv-card__number{
  position:absolute;

  right:20px;
  top:18px;

  color:#4c9633;

  font-family: "DM Sans", sans-serif;

  font-size:15px;
  font-weight:700;
}


/* =========================================================
   CARD ICON
========================================================= */

.bv-card__icon{
  position:relative;
  z-index:2;

  display:grid;
  place-items:center;

  width:116px;
  height:116px;

  margin:6px auto 0;

  border:
    1px solid rgba(72,146,50,.23);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      #fff 0%,
      #f0f8ed 100%
    );

  color:#367f2a;

  font-size:47px;

  box-shadow:
    0 12px 28px rgba(48,86,48,.09);
}


/* PARTIAL RING */

.bv-card__icon::before{
  content:"";

  position:absolute;

  left:-2px;
  top:-2px;

  width:58%;
  height:58%;

  border-top:
    2px solid currentColor;

  border-left:
    2px solid currentColor;

  border-radius:
    100% 0 0 0;

  transform:
    rotate(10deg);

  pointer-events:none;
}


.bv-card__icon--teal{
  color:#2d8366;
}


.bv-card__icon--blue{
  color:#2474c9;
}


/* =========================================================
   CARD TEXT
========================================================= */

.bv-card h3{
  position:relative;
  z-index:2;

  margin:23px 0 0;

  color:#34772b;

  font-family: "DM Sans", sans-serif;

  font-size:19px;
  font-weight:700;

  line-height:1.25;
}


.bv-card p{
  position:relative;
  z-index:2;

  margin:18px 0 0;

  color:#5b696e;

  font-family: "DM Sans", sans-serif;

  font-size:13px;

  line-height:1.68;
}


/* =========================================================
   FINAL MESSAGE
========================================================= */

.bv-message{
  position:relative;

  width:min(1360px,100%);

  min-height:250px;

  display:flex;
  flex-direction:column;

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

  margin:64px auto 0;

  padding:55px 28px 45px;

  overflow:hidden;

  border:
    1px solid rgba(64,126,52,.09);

  border-radius:26px;

  background:
    radial-gradient(
      70% 120% at 50% 50%,
      rgba(203,237,195,.56),
      rgba(240,248,236,.84) 66%,
      rgba(255,255,255,.96) 100%
    );

  text-align:center;
}


/* MESSAGE DECORATION */

.bv-message::before,
.bv-message::after{
  content:"";

  position:absolute;

  width:250px;
  height:250px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(147,213,129,.24),
      transparent 70%
    );
}


.bv-message::before{
  left:-115px;
  bottom:-120px;
}


.bv-message::after{
  right:-115px;
  top:-120px;
}


/* MESSAGE ICON */

.bv-message__icon{
  position:relative;
  z-index:2;

  display:grid;
  place-items:center;

  width:75px;
  height:75px;

  border-radius:50%;

  background:#fff;

  color:#489831;

  font-size:34px;

  box-shadow:
    0 12px 30px rgba(54,95,48,.12);
}


/* MESSAGE TEXT */

.bv-message p{
  position:relative;
  z-index:2;

  max-width:850px;

  margin:24px auto 0;

  color:#3d4c50;

  font-family: "DM Sans", sans-serif;

  font-size:18px;

  line-height:1.65;
}


.bv-message strong{
  color:#347b29;
}


/* =========================================================
   SCROLL / LOAD ANIMATIONS
========================================================= */

.bv-hero__content,
.bv-hero__visual,
.bv-values__head,
.bv-card,
.bv-message{
  opacity:0;

  will-change:
    transform,
    opacity;
}


/* HERO */

body.is-loaded
.bv-hero__content{
  animation:
    bvLeftIn .8s ease .08s forwards;
}


body.is-loaded
.bv-hero__visual{
  animation:
    bvRightIn .9s ease .15s forwards;
}


/* VALUES */

.bv-values.is-visible
.bv-values__head{
  animation:
    bvFadeUp .75s ease forwards;
}


.bv-values.is-visible
.bv-card:nth-child(1){
  animation:
    bvFadeUp .65s ease .08s forwards;
}


.bv-values.is-visible
.bv-card:nth-child(2){
  animation:
    bvFadeUp .65s ease .14s forwards;
}


.bv-values.is-visible
.bv-card:nth-child(3){
  animation:
    bvFadeUp .65s ease .20s forwards;
}


.bv-values.is-visible
.bv-card:nth-child(4){
  animation:
    bvFadeUp .65s ease .26s forwards;
}


.bv-values.is-visible
.bv-card:nth-child(5){
  animation:
    bvFadeUp .65s ease .32s forwards;
}


.bv-values.is-visible
.bv-card:nth-child(6){
  animation:
    bvFadeUp .65s ease .38s forwards;
}


.bv-values.is-visible
.bv-card:nth-child(7){
  animation:
    bvFadeUp .65s ease .44s forwards;
}


.bv-values.is-visible
.bv-card:nth-child(8){
  animation:
    bvFadeUp .65s ease .50s forwards;
}


/* MESSAGE */

.bv-message.is-visible{
  animation:
    bvFadeUp .75s ease forwards;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes bvLeftIn{

  from{
    opacity:0;

    transform:
      translateX(-35px);
  }

  to{
    opacity:1;

    transform:
      translateX(0);
  }

}


@keyframes bvRightIn{

  from{
    opacity:0;

    transform:
      translateX(40px);
  }

  to{
    opacity:1;

    transform:
      translateX(0);
  }

}


@keyframes bvFadeUp{

  from{
    opacity:0;

    transform:
      translateY(30px);
  }

  to{
    opacity:1;

    transform:
      translateY(0);
  }

}


/* =========================================================
   LARGE TABLET / SMALL LAPTOP
========================================================= */

@media(max-width:1200px){

  .bv-hero__inner{
    grid-template-columns:
      47% 53%;
  }


  .bv-hero__content{
    padding:
      65px 30px 60px 48px;
  }


  .bv-hero__content h1{
    font-size:64px;
  }


  .bv-hero__content > p{
    font-size:15px;
  }


  .bv-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .bv-card{
    min-height:350px;
  }

}


/* =========================================================
   TABLET - 980PX
========================================================= */

@media(max-width:980px){

  .bv-page{
    padding:
      12px 14px 50px;
  }


  .bv-hero__inner{
    display:flex;
    flex-direction:column;

    min-height:auto;
  }


  /* CONTENT FIRST */

  .bv-hero__content{
    order:1;

    align-items:center;

    padding:
      70px 35px 48px;

    text-align:center;
  }


  .bv-hero__content h1{
    max-width:620px;

    font-size:60px;
  }


  .bv-hero__content > p{
    max-width:650px;

    margin-left:auto;
    margin-right:auto;
  }


  .bv-hero__tags{
    justify-content:center;
  }


  /* IMAGE SECOND */

  .bv-hero__visual{
    order:2;

    width:calc(100% - 30px);
    height:470px;

    margin:
      0 15px 15px;

    padding:0;

    overflow:hidden;

    border-radius:22px;
  }


  .bv-hero__visual img{
    width:100%;
    height:100%;

    border-radius:22px;

    object-fit:cover;
  }


  .bv-hero__visual::after{
    display:none;
  }


  .bv-hero__leaf{
    display:none;
  }


  .bv-values{
    margin-top:80px;
  }


  .bv-values__head h2{
    font-size:48px;
  }

}


/* =========================================================
   MOBILE - 620PX
========================================================= */

@media(max-width:620px){

  .bv-page{
    padding:
      8px 8px 42px;
  }


  .bv-hero__inner{
    border-radius:21px;
  }


  .bv-hero__content{
    padding:
      48px 20px 36px;
  }


  .bv-label{
    min-height:27px;

    padding:
      4px 11px;

    font-size:12px;
  }


  .bv-hero__content h1{
    margin-top:22px;

    font-size:48px;

    line-height:.95;

    letter-spacing:-1.2px;
  }


  .bv-hero__content > p{
    margin-top:22px;

    font-size:14px;

    line-height:1.68;
  }


  .bv-hero__tags{
    margin-top:25px;
  }


  .bv-hero__tags span{
    min-height:34px;

    padding:
      0 13px;

    font-size:12px;
  }


  /*
    HERO SOURCE IMAGE:
    1920px × 1080px
  */

  .bv-hero__visual{
    width:calc(100% - 18px);

    height:330px;

    margin:
      0 9px 9px;

    border-radius:17px;
  }


  .bv-hero__visual img{
    border-radius:17px;

    object-position:center;
  }


  /* VALUES */

  .bv-values{
    margin-top:65px;
  }


  .bv-values__head{
    margin-bottom:35px;
  }


  .bv-values__head h2{
    font-size:39px;

    letter-spacing:-.8px;
  }


  .bv-values__head p{
    font-size:13px;
  }


  .bv-grid{
    grid-template-columns:1fr;

    gap:13px;
  }


  .bv-card{
    min-height:auto;

    padding:
      27px 20px 26px;

    border-radius:18px;
  }


  .bv-card__icon{
    width:103px;
    height:103px;

    font-size:42px;
  }


  .bv-card h3{
    font-size:18px;
  }


  .bv-card p{
    max-width:360px;

    margin-left:auto;
    margin-right:auto;
  }


  /* MESSAGE */

  .bv-message{
    min-height:300px;

    margin-top:45px;

    padding:
      48px 19px 38px;

    border-radius:20px;
  }


  .bv-message p{
    font-size:15px;
  }

}


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

@media(max-width:390px){

  .bv-hero__content h1{
    font-size:43px;
  }


  .bv-hero__visual{
    height:290px;
  }


  .bv-values__head h2{
    font-size:35px;
  }


  .bv-card{
    padding:
      25px 17px;
  }

}


/* =========================================================
   VISIBILITY FALLBACK
========================================================= */

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

  .bv-hero__content,
  .bv-hero__visual,
  .bv-values__head,
  .bv-card,
  .bv-message{
    opacity:1 !important;

    transform:none !important;

    animation:none !important;
  }

}


/* =========================================================
   EXTRA FALLBACK
   If JS fails, section should not remain blank forever
========================================================= */

html.no-js
.bv-hero__content,

html.no-js
.bv-hero__visual,

html.no-js
.bv-values__head,

html.no-js
.bv-card,

html.no-js
.bv-message{
  opacity:1;
}

/* =========================================================
   GLOBAL FONT CONSISTENCY - ICON SAFE
   Do not override ::before / ::after because icon libraries
   use their own font-family on pseudo-elements.
========================================================= */
html,
body,
button,
input,
select,
textarea {
  font-family: "DM Sans", sans-serif;
}