/* =========================================================
   PACKAGING PAGE
   Top section = selected reference
   Rest = latest green layout
========================================================= */

:root{
  --pk-white:#fff;
  --pk-mint:#eaf7e5;
  --pk-mint-2:#f4faf1;
  --pk-green:#4aa244;
  --pk-green-dark:#17602d;
  --pk-green-deep:#0c4f29;
  --pk-text:#202923;
  --pk-muted:#586860;
  --pk-border:rgba(66,111,67,.13);
}

.pk-page{
  width:100%;
  padding:18px 22px 70px;
  overflow:hidden;
  background:#fff;
  color:var(--pk-text);
  font-family: "DM Sans", sans-serif;
}

/* HERO */
.pk-hero{
  position:relative;
  width:min(1420px,100%);
  min-height:720px;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  margin:0 auto;
  padding-bottom:142px;
  overflow:hidden;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 35%,rgba(184,233,170,.29),transparent 36%),
    linear-gradient(125deg,#fbfdf9 0%,#f4faf1 50%,#edf7e9 100%);
}

.pk-hero__copy{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px 48px 55px 58px;
}

.pk-eyebrow{
  color:#397b37;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.35px;
  text-transform:uppercase;
}

.pk-hero h1{
  max-width:560px;
  margin:24px 0 0;
  color:#1e2923;
  font-size:61px;
  font-weight:700;
  line-height:.94;
  letter-spacing:-2.4px;
}

.pk-hero h1 span{
  display:block;
  color:#3f8f3d;
}

.pk-title-rule{
  width:45px;
  height:2px;
  margin-top:24px;
  background:#4f9948;
}

.pk-hero__copy > p{
  max-width:540px;
  margin:25px 0 0;
  color:#53635b;
  font-size:14px;
  line-height:1.78;
}

.pk-hero__media{
  position:relative;
  min-height:578px;
  overflow:hidden;
}

.pk-hero__media::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  background:linear-gradient(90deg,#f6fbf3 0%,rgba(246,251,243,.26) 14%,transparent 40%);
  pointer-events:none;
}

.pk-hero__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* HERO TRUST STRIP */
.pk-hero-trust{
  position:absolute;
  z-index:10;
  left:32px;
  right:32px;
  bottom:28px;
  min-height:116px;
  display:grid;
  grid-template-columns:1.2fr 1.6fr;
  align-items:center;
  gap:22px;
  padding:17px 20px;
  border:1px solid rgba(69,116,68,.13);
  border-radius:18px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  box-shadow:0 16px 38px rgba(45,78,47,.08);
}

.pk-hero-trust__intro{
  display:grid;
  grid-template-columns:70px 1fr;
  align-items:center;
  gap:16px;
  padding-right:20px;
  border-right:1px solid rgba(69,116,68,.12);
}

.pk-ring-icon{
  position:relative;
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border:1px solid #cce1c6;
  border-radius:50%;
  color:#348337;
  font-size:27px;
  background:#f8fcf6;
}

.pk-ring-icon::after{
  content:"";
  position:absolute;
  inset:6px;
  border:4px solid transparent;
  border-left-color:#4f9b48;
  border-bottom-color:#4f9b48;
  border-radius:50%;
  transform:rotate(16deg);
}

.pk-hero-trust__intro p{
  margin:0;
  color:#53635b;
  font-size:12px;
  line-height:1.62;
}

.pk-hero-trust__items{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.pk-trust-item{
  min-height:70px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-right:1px solid rgba(69,116,68,.11);
  text-align:center;
}

.pk-trust-item:last-child{border-right:0;}

.pk-trust-item i{
  color:#3b8a3b;
  font-size:26px;
}

.pk-trust-item strong{
  color:#35473c;
  font-size:12px;
}

/* PROMISE */
.pk-promise{
  width:min(1320px,calc(100% - 44px));
  min-height:180px;
  display:grid;
  grid-template-columns:1.2fr repeat(4,1fr);
  align-items:center;
  margin:36px auto 0;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(105deg,#0c4e29 0%,#14622f 55%,#0d4f2a 100%);
  box-shadow:0 18px 42px rgba(19,77,38,.15);
}

.pk-promise__title{
  padding:30px 34px;
  color:#fff;
}

.pk-promise__title span,
.pk-promise__title strong{display:block;}

.pk-promise__title span{font-size:22px;}
.pk-promise__title strong{margin-top:3px;font-size:30px;line-height:1.05;}

.pk-promise__item{
  min-height:100px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-left:1px solid rgba(255,255,255,.16);
  color:#fff;
  text-align:center;
}

.pk-promise__item i{color:#9ad16e;font-size:28px;}
.pk-promise__item strong{font-size:15px;}
.pk-promise__item span{color:rgba(255,255,255,.78);font-size:12px;line-height:1.4;}

/* STANDARDS */
.pk-standards{
  width:min(1320px,calc(100% - 44px));
  margin:62px auto 0;
}

.pk-section-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.pk-section-title h2{
  margin:0;
  color:#243129;
  font-size:29px;
  font-weight:700;
}

.pk-section-title > span{
  position:relative;
  width:75px;
  height:1px;
  background:#bad6b4;
}

.pk-section-title > span:first-child::after,
.pk-section-title > span:last-child::before{
  content:"";
  position:absolute;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#4c9746;
  transform:translateY(-50%);
}

.pk-section-title > span:first-child::after{right:0;}
.pk-section-title > span:last-child::before{left:0;}

.pk-standards__grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  margin-top:28px;
  overflow:hidden;
  border:1px solid var(--pk-border);
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 34px rgba(47,78,48,.05);
}

.pk-standards__list{
  padding:12px 22px;
  border-right:1px solid var(--pk-border);
}

.pk-standard-row{
  display:grid;
  grid-template-columns:58px 1fr 18px;
  gap:15px;
  align-items:center;
  min-height:104px;
  padding:12px 0;
  border-bottom:1px solid rgba(69,116,68,.10);
}

.pk-standard-row:last-child{border-bottom:0;}

.pk-standard-row__icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#eef8e9;
  color:#458d3f;
  font-size:22px;
}

.pk-standard-row h3{
  margin:0;
  color:#285d30;
  font-size:15px;
  font-weight:700;
}

.pk-standard-row p{
  margin:6px 0 0;
  color:#5b6a62;
  font-size:12px;
  line-height:1.5;
}

.pk-standard-row > i{
  color:#367b38;
  font-size:12px;
}

.pk-standards__visual{
  position:relative;
  min-height:570px;
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
  background:#fbfdf9;
}

.pk-standards__visual-copy{
  position:relative;
  z-index:2;
  padding:34px 36px 8px;
}

.pk-standards__visual-copy h3{
  margin:0;
  color:#2b7134;
  font-size:24px;
  line-height:1.08;
}

.pk-standards__visual-copy h3::after{
  content:"";
  display:block;
  width:36px;
  height:2px;
  margin-top:13px;
  background:#66a859;
}

.pk-standards__visual-copy p{
  max-width:500px;
  margin:16px 0 0;
  color:#5c6b63;
  font-size:12px;
  line-height:1.65;
}

.pk-standards__image{
  min-height:390px;
}

.pk-standards__image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center bottom;
}

/* STORAGE */
.pk-storage{
  width:min(1320px,calc(100% - 44px));
  min-height:310px;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  margin:28px auto 0;
  overflow:hidden;
  border:1px solid var(--pk-border);
  border-radius:22px;
  background:#fff;
}

.pk-storage__image{
  min-height:310px;
  overflow:hidden;
}

.pk-storage__image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.pk-storage__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:34px 42px;
}

.pk-storage__eyebrow{
  color:#4d9146;
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.pk-storage__content h2{
  margin:8px 0 0;
  color:#233029;
  font-size:31px;
  font-weight:700;
  line-height:1.05;
}

.pk-storage__content h2 span{
  display:block;
  color:#4c9346;
}

.pk-storage__content > p{
  max-width:640px;
  margin:16px 0 0;
  color:#5b6a62;
  font-size:12px;
  line-height:1.7;
}

.pk-storage__features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:25px;
}

.pk-storage__features > div{
  min-height:68px;
  display:grid;
  grid-template-columns:40px 1fr;
  align-items:center;
  gap:10px;
  padding:5px 18px 5px 0;
  border-right:1px solid rgba(69,116,68,.12);
}

.pk-storage__features > div:nth-child(2){padding-left:18px;}
.pk-storage__features > div:last-child{border-right:0;padding-right:0;padding-left:18px;}

.pk-storage__features i{
  color:#3f8d3e;
  font-size:23px;
}

.pk-storage__features span{
  color:#46574e;
  font-size:12px;
  font-weight:600;
  line-height:1.45;
}

/* FINAL */
.pk-final{
  width:min(1320px,calc(100% - 44px));
  min-height:210px;
  display:grid;
  grid-template-columns:1fr 410px;
  align-items:center;
  gap:20px;
  margin:28px auto 0;
  padding:34px 42px;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(105deg,#0b4827,#0c5a2d);
}

.pk-final__copy > span{
  color:#fff;
  font-size:22px;
  font-weight:600;
}

.pk-final__copy h2{
  margin:1px 0 0;
  color:#9ccf69;
  font-size:30px;
  font-weight:700;
}

.pk-final__copy p{
  max-width:630px;
  margin:12px 0 0;
  color:rgba(255,255,255,.82);
  font-size:12px;
  line-height:1.65;
}

.pk-final__copy strong{
  display:block;
  margin-top:15px;
  color:#fff;
  font-size:21px;
}

.pk-final__icons{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.pk-final__icons > div{
  min-height:100px;
  display:grid;
  place-items:center;
  border:1px solid rgba(173,217,127,.28);
  border-radius:18px;
  color:#9ed06e;
  font-size:38px;
}

/* REVEAL */
.pk-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease;
}

.pk-reveal.is-visible{
  opacity:1;
  transform:none;
}

/* RESPONSIVE */
@media(max-width:1180px){
  .pk-hero h1{font-size:54px;}
  .pk-promise{grid-template-columns:1fr repeat(4,.9fr);}
}

@media(max-width:900px){
  .pk-page{padding:12px 12px 55px;}

  .pk-hero{
    grid-template-columns:1fr;
    padding-bottom:0;
  }

  .pk-hero__copy{
    align-items:center;
    padding:58px 30px 38px;
    text-align:center;
  }

  .pk-hero h1{max-width:650px;}
  .pk-title-rule{margin-left:auto;margin-right:auto;}
  .pk-hero__copy > p{max-width:650px;}

  .pk-hero__media{min-height:480px;}

  .pk-hero-trust{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    grid-template-columns:1fr;
    margin:16px;
  }

  .pk-hero-trust__intro{
    padding-right:0;
    padding-bottom:16px;
    border-right:0;
    border-bottom:1px solid rgba(69,116,68,.12);
  }

  .pk-promise{
    width:100%;
    grid-template-columns:repeat(2,1fr);
  }

  .pk-promise__title{
    grid-column:1/-1;
    text-align:center;
    padding:26px;
  }

  .pk-promise__item{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.14);
  }

  .pk-promise__item:nth-of-type(even){
    border-left:1px solid rgba(255,255,255,.14);
  }

  .pk-standards,
  .pk-storage,
  .pk-final{width:100%;}

  .pk-standards__grid{grid-template-columns:1fr;}

  .pk-standards__list{
    border-right:0;
    border-bottom:1px solid var(--pk-border);
  }

  .pk-storage{grid-template-columns:1fr;}
  .pk-storage__image{min-height:350px;}

  .pk-final{grid-template-columns:1fr;}
  .pk-final__copy{text-align:center;}
  .pk-final__copy p{margin-left:auto;margin-right:auto;}
}

@media(max-width:620px){
  .pk-page{padding:8px 8px 45px;}
  .pk-hero{border-radius:20px;}
  .pk-hero__copy{padding:46px 18px 30px;}
  .pk-eyebrow{font-size:12px;}
  .pk-hero h1{font-size:44px;letter-spacing:-1.3px;}
  .pk-hero__copy > p{font-size:13px;line-height:1.7;}
  .pk-hero__media{min-height:330px;}

  .pk-hero-trust{margin:10px;padding:15px;}
  .pk-hero-trust__intro{grid-template-columns:54px 1fr;}
  .pk-ring-icon{width:52px;height:52px;font-size:21px;}

  .pk-hero-trust__items{grid-template-columns:repeat(2,1fr);}
  .pk-trust-item{min-height:75px;border-bottom:1px solid rgba(69,116,68,.10);}
  .pk-trust-item:nth-child(2){border-right:0;}
  .pk-trust-item:nth-last-child(-n+2){border-bottom:0;}

  .pk-promise{grid-template-columns:1fr 1fr;}
  .pk-promise__item{min-height:130px;}

  .pk-section-title h2{font-size:24px;}
  .pk-section-title > span{width:38px;}

  .pk-standards{margin-top:45px;}
  .pk-standards__list{padding:10px 14px;}

  .pk-standard-row{
    grid-template-columns:50px 1fr 12px;
    gap:11px;
  }

  .pk-standard-row__icon{width:46px;height:46px;font-size:18px;}
  .pk-standard-row h3{font-size:13px;}
  .pk-standard-row p{font-size:12px;}

  .pk-standards__visual{min-height:490px;}
  .pk-standards__visual-copy{padding:28px 20px 8px;}
  .pk-standards__visual-copy h3{font-size:21px;}

  .pk-storage__image{min-height:245px;}
  .pk-storage__content{padding:28px 20px;}
  .pk-storage__content h2{font-size:27px;}

  .pk-storage__features{
    grid-template-columns:1fr;
    gap:4px;
  }

  .pk-storage__features > div,
  .pk-storage__features > div:nth-child(2),
  .pk-storage__features > div:last-child{
    padding:10px 0;
    border-right:0;
    border-bottom:1px solid rgba(69,116,68,.10);
  }

  .pk-storage__features > div:last-child{border-bottom:0;}

  .pk-final{padding:30px 18px;}
  .pk-final__copy > span{font-size:18px;}
  .pk-final__copy h2{font-size:25px;}
  .pk-final__icons{gap:8px;}
  .pk-final__icons > div{min-height:82px;font-size:30px;}
}

@media(prefers-reduced-motion:reduce){
  .pk-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* =========================================================
   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;
}