/* Packaging: a carton you can turn, the real photos, features and pack types */
.pk-hero { padding: 130px 0 clamp(40px, 6vw, 80px); background: linear-gradient(180deg, #f6f1e7 0%, #fff 100%); overflow: hidden; }
.pk-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 30px; align-items: center; min-height: 560px; }
.pk-hero__copy { display: grid; gap: 22px; }
.pk-hint { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.pk-hint svg { width: 22px; height: 22px; animation: pk-turn 3s ease-in-out infinite; }
@keyframes pk-turn { 50% { transform: rotate(180deg); } }

/* the carton: six faces in 3D */
.box-stage { --bw: clamp(200px, 22vw, 290px); --bh: calc(var(--bw) * .82); --bd: calc(var(--bw) * .82); position: relative; height: calc(var(--bh) * 2.2); perspective: 1400px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.box-stage:active { cursor: grabbing; }
.box { position: absolute; left: 50%; top: 42%; width: var(--bw); height: var(--bh); margin: calc(var(--bh) * -.5) 0 0 calc(var(--bw) * -.5); transform-style: preserve-3d; transform: rotateX(var(--rx, -18deg)) rotateY(var(--ry, -32deg)); }
.box__face { position: absolute; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; background:
    linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, .06)),
    repeating-linear-gradient(90deg, rgba(120, 80, 40, .05) 0 2px, transparent 2px 7px), #c8955c;
  border: 1px solid rgba(90, 55, 25, .35); color: #3a2410; backface-visibility: hidden; }
.box__front, .box__back { width: var(--bw); height: var(--bh); }
.box__right, .box__left { width: var(--bd); height: var(--bh); left: calc((var(--bw) - var(--bd)) / 2); }
.box__top, .box__bottom { width: var(--bw); height: var(--bd); top: calc((var(--bh) - var(--bd)) / 2); }
.box__front { transform: translateZ(calc(var(--bd) / 2)); }
.box__back { transform: rotateY(180deg) translateZ(calc(var(--bd) / 2)); }
.box__right { transform: rotateY(90deg) translateZ(calc(var(--bw) / 2)); filter: brightness(.86); }
.box__left { transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2)); filter: brightness(.86); }
.box__top { transform: rotateX(90deg) translateZ(calc(var(--bh) / 2)); filter: brightness(1.1); }
.box__bottom { transform: rotateX(-90deg) translateZ(calc(var(--bh) / 2)); filter: brightness(.7); }
.box__face img { width: 46%; height: auto; mix-blend-mode: multiply; }
.box__face b { font-weight: 600; font-size: clamp(14px, 1.4vw, 18px); letter-spacing: .02em; }
.box__face span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.box__face em { margin-top: 6px; font-style: normal; font-size: 10px; padding: 4px 8px; border: 1px solid currentColor; opacity: .7; }
.tape { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .05)), #b98a52; border-bottom: 1px solid rgba(90, 55, 25, .3); }
.tape--v { left: 42%; right: 42%; top: 0; bottom: 0; height: auto; border: 0; border-left: 1px solid rgba(90, 55, 25, .25); border-right: 1px solid rgba(90, 55, 25, .25); }
.arrows { display: flex; gap: 6px; font-size: 22px; line-height: 1; }
.arrows b { font-weight: 600; }
/* the pallet: a slab under the carton, built in 3D so it turns with it */
.pal { --pw: calc(var(--bw) * 1.08); --pd: calc(var(--bd) * 1.08); --ph: 18px; position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transform: translateY(calc(var(--bh) / 2 + var(--ph) / 2 + 1px)); }
.pal i { position: absolute; display: block; width: var(--pw); height: var(--ph); left: calc(var(--pw) / -2); top: calc(var(--ph) / -2); backface-visibility: hidden;
  background: linear-gradient(#cfa66c 0 34%, transparent 34%), linear-gradient(90deg, #9a7444 0 11%, transparent 11% 44.5%, #9a7444 44.5% 55.5%, transparent 55.5% 89%, #9a7444 89%); }
.pal .pal__top { height: var(--pd); top: calc(var(--pd) / -2); background: repeating-linear-gradient(90deg, #d9b37a 0 15%, #c79d63 15% 16.5%, transparent 16.5% 20.5%); transform: rotateX(90deg) translateZ(calc(var(--ph) / 2)); }
.pal .pal__f { transform: translateZ(calc(var(--pd) / 2)); }
.pal .pal__b { transform: rotateY(180deg) translateZ(calc(var(--pd) / 2)); }
.pal .pal__l, .pal .pal__r { width: var(--pd); left: calc(var(--pd) / -2); filter: brightness(.85); }
.pal .pal__l { transform: rotateY(-90deg) translateZ(calc(var(--pw) / 2)); }
.pal .pal__r { transform: rotateY(90deg) translateZ(calc(var(--pw) / 2)); }
.box-shadow { position: absolute; left: 50%; top: calc(42% + var(--bh) * .5 + 30px); width: calc(var(--bw) * 1.6); height: 40px; margin-left: calc(var(--bw) * -.8); border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 40, 20, .35), transparent); filter: blur(4px); }

.pk-promise__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.pk-promise__copy { display: grid; gap: 20px; }
.photos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 200px 200px; gap: 14px; }
.photo { position: relative; margin: 0; border-radius: 20px; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.photo:hover img { transform: scale(1.05); }
.photo figcaption { position: absolute; left: 12px; bottom: 12px; font-size: 12.5px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); }
.photo--a { grid-column: 1 / 4; grid-row: 1 / 3; }
.photo--b { grid-column: 4 / 7; grid-row: 1; }
.photo--c { grid-column: 4 / 7; grid-row: 2; }

.feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: f; }
.feat { position: relative; display: grid; gap: 14px; align-content: start; padding: 28px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); counter-increment: f; }
.feat::after { content: "0" counter(f); position: absolute; top: 22px; right: 22px; font-size: 12px; color: var(--muted); letter-spacing: .1em; }
.feat svg { width: 46px; height: 46px; color: #8a5a2a; }
.feat h3 { font-size: 19px; line-height: 1.25; }
.feat p { color: var(--muted); font-size: 15px; }

.types { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.type { display: grid; justify-items: center; gap: 6px; padding: 26px 12px 22px; border-radius: 22px; border: 1px solid var(--line); text-align: center; transition: transform .4s var(--ease), box-shadow .4s; }
.type:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.type b { font-weight: 500; font-size: 15.5px; margin-top: 10px; }
.type small { font-size: 12.5px; color: var(--muted); }
/* little drawn packs */
.type__art { position: relative; width: 70px; height: 84px; }
.type__art::before, .type__art::after { content: ""; position: absolute; }
.type__art--valve::before { inset: 6px 8px 0; border-radius: 6px 6px 10px 10px; background: linear-gradient(90deg, #e9d6b4, #d4b78a); box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .06); }
.type__art--valve::after { right: 12px; top: 0; width: 12px; height: 14px; border-radius: 3px; background: #c3a170; }
.type__art--box::before { inset: 14px 6px 4px; background: #c8955c; border-radius: 4px; box-shadow: inset 0 14px 0 #b98a52; }
.type__art--jumbo::before { inset: 10px 4px 0; border-radius: 10px; background: #f2f4f7; border: 2px solid #d5dbe4; }
.type__art--jumbo::after { left: 14px; right: 14px; top: 0; height: 16px; border: 3px solid #3d6ce0; border-bottom: 0; border-radius: 10px 10px 0 0; }
.type__art--lope::before { inset: 4px 10px 2px; border-radius: 8px; background: linear-gradient(120deg, rgba(220, 235, 255, .9), rgba(190, 210, 240, .7)); border: 1px solid #c4d3ea; }
.type__art--hessian::before { inset: 6px 8px 0; border-radius: 10px; background: repeating-linear-gradient(0deg, #b89a6a 0 3px, #a88a5a 3px 6px), #b89a6a; background-blend-mode: multiply; }
.type__art--hessian::after { inset: 6px 8px 0; border-radius: 10px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 6px); }
.type__art--hdpe::before { inset: 6px 8px 0; border-radius: 6px; background: repeating-linear-gradient(45deg, #2f6fd6 0 4px, #3b7be0 4px 8px); }
.ispm { display: flex; align-items: center; gap: 22px; padding: 24px 28px; border-radius: 22px; background: #0d1424; color: #fff; }
.ispm__seal { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; letter-spacing: .08em; border: 2px solid rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 5px #0d1424, inset 0 0 0 6px rgba(255, 255, 255, .5); }
.ispm p { color: rgba(255, 255, 255, .8); }
.ispm b { color: #fff; font-weight: 500; }

@media (max-width: 1000px) {
  .pk-hero__grid, .pk-promise__grid { grid-template-columns: 1fr; min-height: 0; }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .photos { grid-template-rows: 160px 160px; }
  .feats { grid-template-columns: 1fr; }
  .types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ispm { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .pk-hint svg { animation: none; } }