/*
THESIS: Each package reads like a production work order, not a generic pricing page.
OWN-WORLD: Ink, blueprint navy, plan-sheet white, worksite red, square controls, clipped section edges.
STORY: Confirm the package, inspect every deliverable, understand the workflow and cost boundary, request it.
FIRST VIEWPORT: Package name and price lead left; one real print artifact stands at full height on the right.
FORM: Production-roadmap structure, third-ranked grounded concept, seed bb9fc6dd.
*/
*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#0A0F1C;
  --navy:#002768;
  --navy-deep:#001A4A;
  --red:#C8262A;
  --red-deep:#A90100;
  --white:#FFFFFF;
  --surface:#F4F5F7;
  --smoke:#5B6471;
  --line:#D9DEE7;
  --container:1180px;
}
html{scroll-behavior:smooth}
body.package-page{
  margin:0;
  overflow-x:hidden;
  background:var(--ink);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.package-page a{color:inherit}
.pkg-wrap{position:relative;z-index:2;width:min(100% - 44px,var(--container));margin-inline:auto}
.pkg-section{position:relative;padding:clamp(76px,8vw,118px) 0;overflow:hidden}
.pkg-section::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.32;background-image:url("assets/print-collateral-blueprintBg.webp");background-size:cover;background-position:center}
.pkg-light{background:var(--surface)}
.pkg-light::after{opacity:.11;filter:grayscale(1)}
.pkg-navy{background:var(--navy);color:var(--white)}
.pkg-ink{background:var(--ink);color:var(--white)}
.pkg-clipped{clip-path:polygon(0 14px,61% 14px,64% 0,100% 0,100% 100%,0 100%)}
.pkg-kicker{
  display:block;
  margin-bottom:14px;
  color:var(--red);
  font-size:12px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.pkg-display,.pkg-heading{
  margin:0;
  color:inherit;
  font-family:"Archivo Black","Archivo",sans-serif;
  font-weight:900;
  letter-spacing:-.025em;
  line-height:.96;
  text-transform:uppercase;
  text-wrap:balance;
}
.pkg-display{font-size:clamp(48px,7vw,94px)}
.pkg-heading{font-size:clamp(36px,5vw,66px)}
.pkg-red{color:var(--red)}
.pkg-lede{max-width:680px;margin:22px 0 0;font-size:clamp(17px,1.6vw,20px);line-height:1.6}
.pkg-copy{max-width:70ch;font-size:16px;line-height:1.7}
.pkg-hero{
  position:relative;
  min-height:760px;
  padding:clamp(96px,10vw,140px) 0 84px;
  overflow:hidden;
  background:var(--ink);
  color:var(--white);
  isolation:isolate;
}
.pkg-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(10,15,28,.97) 0%,rgba(10,15,28,.9) 49%,rgba(0,39,104,.5) 100%),
    url("assets/print-collateral-blueprintDark.webp") center/cover;
}
.pkg-hero::after{
  content:"";
  position:absolute;
  right:-7vw;
  bottom:-26vh;
  z-index:-1;
  width:40vw;
  height:110vh;
  transform:rotate(10deg);
  background:linear-gradient(90deg,var(--red) 0 10px,rgba(0,39,104,.32) 10px);
}
.pkg-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:52px;
  color:rgba(255,255,255,.78);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-decoration:none;
  text-transform:uppercase;
}
.pkg-back:hover{color:var(--white)}
.pkg-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);gap:48px;align-items:center}
.pkg-hero-copy{position:relative;z-index:2}
.pkg-price{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-top:34px;
  font-family:"Archivo Black","Archivo",sans-serif;
  white-space:nowrap;
}
.pkg-price .currency{color:var(--red);font-size:28px}
.pkg-price .amount{font-size:clamp(52px,6vw,78px);line-height:.9}
.pkg-price .unit{color:rgba(255,255,255,.65);font-family:"Archivo",sans-serif;font-size:15px;font-weight:700}
.pkg-price-note{margin:10px 0 0;color:rgba(255,255,255,.68);font-size:13px}
.pkg-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.pkg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:16px 26px;
  border:2px solid var(--red);
  background:var(--red);
  color:var(--white)!important;
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  text-decoration:none;
  text-transform:uppercase;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.pkg-btn:hover,.pkg-btn:focus-visible{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--white);background:var(--red-deep)}
.pkg-btn.secondary{border-color:rgba(255,255,255,.56);background:transparent}
.pkg-btn.secondary:hover,.pkg-btn.secondary:focus-visible{border-color:var(--white);background:var(--white);color:var(--ink)!important;box-shadow:5px 5px 0 var(--red)}
.pkg-hero-visual{position:relative;height:580px}
.pkg-hero-visual img{
  position:absolute;
  inset:-10% -5% -4% 0;
  width:105%;
  height:114%;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.42));
}
.pkg-stamp{
  position:absolute;
  right:1%;
  bottom:4%;
  z-index:2;
  display:grid;
  place-items:center;
  width:126px;
  aspect-ratio:1;
  border:3px solid var(--red);
  border-radius:50%;
  color:var(--white);
  font-family:"Archivo Black",sans-serif;
  font-size:13px;
  line-height:1.05;
  text-align:center;
  text-transform:uppercase;
  transform:rotate(-8deg);
}
.pkg-section-head{max-width:840px;margin-bottom:54px}
.pkg-deliverables{border-top:1px solid rgba(10,15,28,.25)}
.pkg-deliverable{
  display:grid;
  grid-template-columns:86px minmax(210px,.7fr) minmax(0,1.3fr);
  gap:28px;
  align-items:start;
  padding:28px 0;
  border-bottom:1px solid rgba(10,15,28,.18);
}
.pkg-deliverable .index{
  color:var(--red);
  font-family:"Archivo Black",sans-serif;
  font-size:26px;
  line-height:1;
}
.pkg-deliverable h3{margin:0;font-family:"Archivo Black",sans-serif;font-size:21px;line-height:1.1;text-transform:uppercase}
.pkg-deliverable p{max-width:65ch;margin:0;color:var(--smoke);font-size:15px;line-height:1.65}
.pkg-quantity-table{margin-top:54px;border-block:1px solid var(--line)}
.pkg-quantity-row{display:grid;grid-template-columns:minmax(190px,1fr) minmax(170px,.7fr) minmax(210px,.9fr);gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.pkg-quantity-row:last-child{border-bottom:0}
.pkg-quantity-row.header{color:var(--navy);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pkg-quantity-row strong{font-family:"Archivo Black",sans-serif;font-size:16px;text-transform:uppercase}
.pkg-quantity-row span{color:var(--smoke);font-size:14px;line-height:1.45}
.pkg-quantity-row .included{color:var(--ink);font-weight:800}
.pkg-quantity-note{margin:18px 0 0;color:var(--smoke);font-size:13px;line-height:1.6}
.pkg-scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,7vw,90px);align-items:start}
.pkg-scope-title{margin:0 0 26px;font-family:"Archivo Black",sans-serif;font-size:clamp(25px,3vw,38px);line-height:1;text-transform:uppercase}
.pkg-scope-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.22)}
.pkg-scope-list li{position:relative;padding:18px 0 18px 34px;border-bottom:1px solid rgba(255,255,255,.16);font-size:15px;line-height:1.55}
.pkg-scope-list li::before{content:"✓";position:absolute;left:0;top:17px;color:var(--red);font-size:19px;font-weight:900}
.pkg-scope-list.cost li::before{content:"+"}
.pkg-process{display:grid;grid-template-columns:repeat(4,1fr);margin-top:54px;border-block:1px solid rgba(10,15,28,.2)}
.pkg-step{position:relative;padding:32px 28px 34px;border-right:1px solid rgba(10,15,28,.16)}
.pkg-step:last-child{border-right:0}
.pkg-step .num{color:var(--red);font-family:"Archivo Black",sans-serif;font-size:34px}
.pkg-step h3{margin:40px 0 10px;font-family:"Archivo Black",sans-serif;font-size:17px;line-height:1.1;text-transform:uppercase}
.pkg-step p{margin:0;color:var(--smoke);font-size:14px;line-height:1.55}
.pkg-close{text-align:center}
.pkg-close .pkg-heading{max-width:900px;margin-inline:auto}
.pkg-close .pkg-lede{margin-inline:auto;color:rgba(255,255,255,.78)}
.pkg-close .pkg-actions{justify-content:center}
.pkg-note{margin-top:32px;color:rgba(255,255,255,.64);font-size:13px}
@media(max-width:900px){
  .pkg-hero{min-height:auto;padding-top:78px}
  .pkg-hero-grid{grid-template-columns:1fr}
  .pkg-hero-copy{order:2}
  .pkg-hero-visual{order:1;height:min(68vw,520px);margin:-30px 0 -76px}
  .pkg-stamp{right:8%;bottom:16%}
  .pkg-deliverable{grid-template-columns:58px 1fr}
  .pkg-deliverable p{grid-column:2}
  .pkg-scope-grid{grid-template-columns:1fr}
  .pkg-quantity-row{grid-template-columns:1fr 1fr}
  .pkg-quantity-row strong{grid-column:1/-1}
  .pkg-quantity-row.header{display:none}
  .pkg-process{grid-template-columns:1fr 1fr}
  .pkg-step:nth-child(2){border-right:0}
  .pkg-step:nth-child(-n+2){border-bottom:1px solid rgba(10,15,28,.16)}
}
@media(max-width:560px){
  .pkg-wrap{width:min(100% - 36px,var(--container))}
  .pkg-clipped{clip-path:polygon(0 10px,58% 10px,63% 0,100% 0,100% 100%,0 100%)}
  .pkg-back{margin-bottom:32px}
  .pkg-hero{padding-bottom:68px}
  .pkg-hero-grid{gap:20px}
  .pkg-hero-visual{height:370px;margin:-42px 0 -54px}
  .pkg-stamp{width:94px;font-size:10px}
  .pkg-actions{flex-direction:column}
  .pkg-btn{width:100%}
  .pkg-deliverable{grid-template-columns:42px 1fr;gap:14px}
  .pkg-deliverable .index{font-size:20px}
  .pkg-quantity-row{grid-template-columns:1fr;gap:7px}
  .pkg-quantity-row strong{grid-column:auto}
  .pkg-process{grid-template-columns:1fr}
  .pkg-step{border-right:0;border-bottom:1px solid rgba(10,15,28,.16)}
  .pkg-step:last-child{border-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pkg-btn{transition:none}
}