/* /packing-process – container packing procedure (11 steps, packing by type, inside the container, QA/QC, 10 rules, documents, gallery, related pages) */

/* intro + procedure overview */
.pk-intro{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,64px);align-items:start}
.pk-intro .prose strong{color:var(--navy)}
.pk-intro__pts{margin-top:22px}
.pk-flow{position:sticky;top:calc(var(--hdr) + 20px);padding:24px 22px;border-radius:var(--r-lg);background:var(--navy);color:#D6DEE9;box-shadow:var(--sh-lg)}
.pk-flow__h{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 .8rem/1.2 var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l)}
.pk-flow__h svg{width:18px;height:18px}
.pk-flow ol{list-style:none;display:grid;gap:2px;counter-reset:none}
.pk-flow a{display:flex;align-items:baseline;gap:12px;padding:7px 8px;border-radius:8px;color:#fff;font-size:.95rem;line-height:1.35;transition:background .2s}
.pk-flow a:hover{background:rgba(255,255,255,.08);color:#fff}
.pk-flow a span{flex:none;font:700 .95rem/1 var(--f-head);color:var(--gold-l);min-width:2ch}

/* 11 steps */
.pk-steps{list-style:none;display:grid;gap:clamp(22px,3vw,34px)}
.pk-step{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 10px 30px -22px rgba(0,36,74,.45);scroll-margin-top:calc(var(--hdr) + 16px)}
.pk-step:nth-child(even) .pk-step__img{order:2}
.pk-step__img{position:relative;margin:0;min-height:100%;background:var(--steel)}
.pk-step__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.pk-step__n{position:absolute;left:18px;top:14px;font:700 clamp(2.6rem,4.4vw,3.8rem)/1 var(--f-head);color:#fff;text-shadow:0 4px 20px rgba(0,23,47,.55)}
.pk-step__body{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:center}
.pk-step__k{margin:0 0 6px;font:600 .78rem/1.2 var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.pk-step h3{font-size:clamp(1.35rem,2vw,1.7rem);margin-bottom:.4em}
.pk-step__body>p{color:var(--ink-2);font-size:1rem}
.pk-checks{list-style:none;display:grid;gap:8px;margin-top:4px;padding-top:16px;border-top:1px dashed var(--line)}
.pk-checks li{display:flex;gap:10px;font-size:.95rem;line-height:1.45;color:var(--ink)}
.pk-checks svg{flex:none;width:18px;height:18px;margin-top:2px;color:#1c8c4e}

/* inside the container */
.pk-secure__in{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,3.5vw,52px);align-items:center}
.pk-secure__img{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.pk-secure__img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pk-secure__list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pk-secure__list li{display:flex;gap:14px;padding:18px;border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1)}
.pk-secure__list li>span{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(204,153,43,.14);color:var(--gold-l)}
.pk-secure__list li>span svg{width:22px;height:22px}
.pk-secure__list h3{font-size:1.1rem;margin:0 0 .3em}
.pk-secure__list p{margin:0;font-size:.93rem;color:#B7C3D3;line-height:1.5}

/* materials table */
.pk-mat td:first-child{white-space:nowrap}

/* QA/QC */
.pk-qc{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.pk-qc li{position:relative;padding:26px 22px 22px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.pk-qc li::before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(90deg,var(--red),var(--gold))}
.pk-qc span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--gold-l);font:700 1.1rem/1 var(--f-head);margin-bottom:14px}
.pk-qc h3{font-size:1.15rem;margin-bottom:.35em}
.pk-qc p{margin:0;font-size:.93rem;color:var(--ink-2);line-height:1.5}

/* 10 rules */
.pk-rules{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.pk-rules li{padding:22px 20px;border-radius:var(--r);background:var(--tint);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s}
.pk-rules li:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.pk-rules__n{display:block;font:700 2rem/1 var(--f-head);color:var(--red);margin-bottom:10px}
.pk-rules h3{font-size:1.08rem;margin-bottom:.4em}
.pk-rules p{display:flex;gap:8px;margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.45}
.pk-rules p svg{flex:none;width:16px;height:16px;margin-top:3px;color:#1c8c4e}

/* documents */
.pk-docs{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,60px);align-items:center}
.pk-doclist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pk-doclist li{display:flex;gap:12px;padding:16px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.pk-doclist li>span{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(196,29,48,.08);color:var(--red)}
.pk-doclist li>span svg{width:20px;height:20px}
.pk-doclist h3{font-size:1.05rem;margin:0 0 .25em}
.pk-doclist p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.45}
.pk-docs__img{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.pk-docs__img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pk-docs__img figcaption{position:absolute;left:18px;bottom:18px}

/* related pages */
.pk-links{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pk-links--3{grid-template-columns:repeat(3,1fr)}
.pk-link{position:relative;display:flex;flex-direction:column;padding:22px 22px 46px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);color:var(--ink);transition:transform .35s var(--ease),box-shadow .35s}
.pk-link:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);color:var(--ink)}
.pk-link__ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--navy);color:var(--gold-l);margin-bottom:14px}
.pk-link__ic svg{width:22px;height:22px}
.pk-link h3{font-size:1.15rem;margin-bottom:.3em}
.pk-link p{margin:0;font-size:.92rem;color:var(--ink-2);line-height:1.45}
.pk-link__go{position:absolute;right:20px;bottom:18px;color:var(--red)}
.pk-link__go svg{width:18px;height:18px}

@media (max-width:1180px){
  .pk-qc,.pk-rules{grid-template-columns:repeat(3,1fr)}
  .pk-links{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .pk-intro,.pk-secure__in,.pk-docs{grid-template-columns:1fr}
  .pk-flow{position:static}
  .pk-step{grid-template-columns:1fr}
  .pk-step:nth-child(even) .pk-step__img{order:0}
  .pk-step__img img{height:auto}
}
@media (max-width:640px){
  .pk-secure__list,.pk-doclist{grid-template-columns:1fr}
  .pk-qc,.pk-rules{grid-template-columns:1fr 1fr}
  .pk-links{grid-template-columns:1fr}
  .pk-mat td:first-child{white-space:normal}
  .pk-docs__img figcaption{left:12px;right:12px;bottom:12px}
  .pk-docs__img .btn{width:100%;justify-content:center}
}
@media (max-width:420px){
  .pk-qc,.pk-rules{grid-template-columns:1fr}
}