/* TRD-05 方寸印务 — packaging & printing. Sora, ink on paper with CMYK accents.
   The four process inks are fixed template variables (printer's marks look the
   same on any paper); all text colours come from the palette. */
.tpl-trd-05{
  --gut:clamp(20px,5vw,80px);--max:1260px;--pad-x:max(var(--gut),calc((100% - var(--max))/2));
  --sans:"Sora","Noto Sans SC",system-ui,sans-serif;
  --cy:#00A3DA;--mg:#E0127C;--yl:#FFD200;--kk:var(--fg);--on-cy:#0B1A22;--on-mg:#FFFFFF;--on-yl:#1A1600;
  --r:6px;
  --card:color-mix(in srgb,var(--bg) 50%,#fff);
  --dock-bg:var(--fg);--dock-fg:var(--bg);
  font-family:var(--sans);font-size:16px;line-height:1.75;
}
.tpl-trd-05 main{overflow-x:clip}
.tpl-trd-05 h1,.tpl-trd-05 h2,.tpl-trd-05 h3{font-family:var(--sans);font-weight:600;letter-spacing:-.035em}
:lang(zh-Hans) .tpl-trd-05 h1,:lang(zh-Hans) .tpl-trd-05 h2,:lang(zh-Hans) .tpl-trd-05 h3{letter-spacing:0;font-weight:700}
.tpl-trd-05 ::selection{background:var(--yl);color:var(--on-yl)}
.p5-sec{padding:clamp(80px,10vw,148px) var(--pad-x) 0}

/* printer's marks */
.p5-bar{display:inline-flex;gap:3px;flex:none}
.p5-bar i{width:9px;height:9px;border-radius:50%;background:var(--cy)}
.p5-bar i:nth-child(2){background:var(--mg)}
.p5-bar i:nth-child(3){background:var(--yl)}
.p5-bar i:nth-child(4){background:var(--kk)}
.p5-crop{position:relative;margin:0}
.p5-crop::before{content:"";position:absolute;inset:-16px;pointer-events:none;z-index:1;--m:color-mix(in srgb,var(--fg) 55%,transparent);background:
  linear-gradient(var(--m),var(--m)) left 16px top 0/1px 10px no-repeat,
  linear-gradient(var(--m),var(--m)) left 0 top 16px/10px 1px no-repeat,
  linear-gradient(var(--m),var(--m)) right 16px top 0/1px 10px no-repeat,
  linear-gradient(var(--m),var(--m)) right 0 top 16px/10px 1px no-repeat,
  linear-gradient(var(--m),var(--m)) left 16px bottom 0/1px 10px no-repeat,
  linear-gradient(var(--m),var(--m)) left 0 bottom 16px/10px 1px no-repeat,
  linear-gradient(var(--m),var(--m)) right 16px bottom 0/1px 10px no-repeat,
  linear-gradient(var(--m),var(--m)) right 0 bottom 16px/10px 1px no-repeat}

/* header */
.p5-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 28px;padding:18px var(--pad-x)}
.p5-brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:18px;font-weight:600;letter-spacing:-.02em;text-decoration:none}
.p5-brand:not(:has(img))::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--cy) 0 25%,var(--mg) 0 50%,var(--yl) 0 75%,var(--kk) 0)}
.p5-nav{display:flex;flex-wrap:wrap}
.p5-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:14.5px;text-decoration:none;color:var(--muted);transition:color .2s}
.p5-nav a:hover{color:var(--fg)}

/* buttons */
.p5-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:34px}
.p5-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:12px 30px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:15.5px;text-decoration:none;text-align:center;transition:transform .2s}
.p5-btn:hover{transform:translateY(-2px)}
.p5-btn--inv{background:var(--bg);color:var(--fg)}
.p5-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:15.5px;text-decoration:none}
.p5-link::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--mg);transition:transform .2s}
.p5-link:hover::after{transform:scale(1.4)}

/* hero */
.p5-main>.p5-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(48px,7vw,112px);align-items:center;padding:clamp(40px,6vw,96px) var(--pad-x) 0}
.p5-hero--text{grid-template-columns:minmax(0,1fr)!important}
.p5-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 28px;font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.p5-hero h1{font-size:clamp(46px,6.6vw,104px);line-height:1;letter-spacing:-.05em}
:lang(zh-Hans) .p5-hero h1{font-size:clamp(40px,5.6vw,86px);line-height:1.18;letter-spacing:-.01em}
.p5-sub{margin-top:28px;font-size:clamp(16.5px,1.3vw,18.5px);color:var(--muted);max-width:27em}
.p5-sub p:last-child{margin:0}
.p5-hero-art{padding:16px}
.p5-hero-ph{overflow:visible}
.p5-hero-ph img{width:100%;aspect-ratio:4/5;object-fit:cover}
.p5-strip{display:block;height:14px;margin-top:30px;background:linear-gradient(90deg,var(--cy) 0 12.5%,var(--mg) 0 25%,var(--yl) 0 37.5%,var(--kk) 0 50%,color-mix(in srgb,var(--fg) 75%,var(--bg)) 0 62.5%,color-mix(in srgb,var(--fg) 50%,var(--bg)) 0 75%,color-mix(in srgb,var(--fg) 25%,var(--bg)) 0 87.5%,color-mix(in srgb,var(--fg) 8%,var(--bg)) 0)}

/* heads */
.p5-head{max-width:44rem;margin-bottom:clamp(36px,4.5vw,64px)}
.p5-k{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.p5-k::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat,linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat}
.p5-main h2{font-size:clamp(32px,4.2vw,60px);line-height:1.08;letter-spacing:-.045em}
:lang(zh-Hans) .p5-main h2{line-height:1.28;letter-spacing:-.005em}
.p5-intro{margin-top:18px;color:var(--muted);font-size:17px;max-width:32em}
.p5-intro p:last-child{margin:0}

/* about + press path */
.p5-about-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(48px,7vw,112px);align-items:end}
.p5-about-top--text{grid-template-columns:minmax(0,1fr)}
.p5-about-top .p5-head{margin-bottom:0}
.p5-about-ph{margin:0;overflow:hidden;border-radius:var(--r)}
.p5-about-ph img{width:100%;aspect-ratio:3/2;object-fit:cover}
.p5-press{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:28px clamp(16px,2.4vw,36px);margin-top:clamp(56px,7vw,96px);padding-top:4px}
.p5-press--2{--n:2}.p5-press--3{--n:3}.p5-press--5{--n:5}.p5-press--6{--n:3}
.p5-press::before{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:linear-gradient(90deg,var(--cy),var(--mg),var(--yl),var(--kk))}
.p5-press--6::before{display:none}
.p5-press li{position:relative}
.p5-dot{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--bg);border:2px solid var(--cy);font-weight:600;font-size:18px}
.p5-press li:nth-child(4n+2) .p5-dot{border-color:var(--mg)}
.p5-press li:nth-child(4n+3) .p5-dot{border-color:var(--yl)}
.p5-press li:nth-child(4n) .p5-dot{border-color:var(--kk);background:var(--fg);color:var(--bg)}
.p5-press p{margin:20px 0 0;font-size:clamp(16.5px,1.3vw,18.5px);font-weight:500;line-height:1.55;max-width:15em}

/* services */
.p5-main>.p5-services{margin-top:clamp(80px,10vw,148px);padding-bottom:clamp(80px,10vw,148px);background:var(--soft)}
.p5-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,3.6vw,52px) clamp(14px,1.6vw,20px);padding-top:18px}
.p5-card{position:relative;display:flex;flex-direction:column;padding:clamp(28px,2.8vw,38px);border-radius:0 var(--r) var(--r) var(--r);background:var(--card);box-shadow:0 1px 0 var(--line)}
.p5-tab{position:absolute;left:0;bottom:100%;padding:3px 14px 1px;border-radius:var(--r) var(--r) 0 0;background:var(--cy);color:var(--on-cy);font-size:12px;font-weight:600;line-height:1.5}
.p5-card:nth-child(4n+2) .p5-tab{background:var(--mg);color:var(--on-mg)}
.p5-card:nth-child(4n+3) .p5-tab{background:var(--yl);color:var(--on-yl)}
.p5-card:nth-child(4n) .p5-tab{background:var(--fg);color:var(--bg)}
.p5-card h3{font-size:clamp(20px,1.7vw,24px);line-height:1.3;margin-bottom:10px}
.p5-card-d{color:var(--muted);font-size:15px}
.p5-card-d p{margin:0}
.p5-price{margin:12px 0 0;font-weight:600}
.p5-ask{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-top:auto;padding-top:16px;font-size:14.5px;font-weight:600;text-decoration:none}
.p5-ask:hover{text-decoration:underline}

/* gallery: proof sheet */
.p5-sheet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(44px,5vw,72px) clamp(36px,4vw,60px);padding:16px}
.p5-proof{margin:0;grid-column:span 4}
.p5-proof:nth-child(4n+1){grid-column:span 7}
.p5-proof:nth-child(4n+2){grid-column:span 5}
.p5-proof:nth-child(4n+3){grid-column:span 5}
.p5-proof:nth-child(4n){grid-column:span 7}
.p5-proof-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.p5-proof:nth-child(4n+2) img,.p5-proof:nth-child(4n+3) img{aspect-ratio:1/1}
.p5-proof:nth-child(4n+1) img,.p5-proof:nth-child(4n) img{aspect-ratio:3/2}
.p5-proof figcaption{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:14.5px;font-weight:500}
.p5-proof figcaption::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--mg)}
.p5-proof:nth-child(3n+2) figcaption::before{background:var(--cy)}
.p5-proof:nth-child(3n) figcaption::before{background:var(--yl)}

/* testimonials */
.p5-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.p5-quote-list figure{padding:clamp(26px,3vw,36px);border-radius:var(--r);background:var(--soft)}
.p5-quote-list blockquote{font-size:clamp(17.5px,1.4vw,20px);line-height:1.6;font-weight:500}
.p5-quote-list blockquote p:last-child{margin:0}
.p5-quote-list figcaption{margin-top:16px;font-size:14px;font-weight:600}
.p5-quote-list figcaption span{color:var(--muted);font-weight:400}

/* faq */
.p5-faq .p5-head{margin-inline:auto;text-align:center}
.p5-faq .p5-k{justify-content:center}
.p5-faq-list{max-width:50rem;margin:0 auto;border-top:1px solid var(--fg)}
.p5-faq-list details{border-bottom:1px solid var(--line)}
.p5-faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:74px;padding:18px 0;font-weight:600;font-size:clamp(16.5px,1.35vw,19px);line-height:1.45}
.p5-faq-list summary::after{flex:none;display:grid;place-items:center;width:34px;height:34px;margin:0;border-radius:50%;border:1.5px solid var(--fg);font-size:19px;line-height:1}
.p5-faq-list details:nth-child(4n+1)[open] summary::after{background:var(--cy);border-color:var(--cy);color:var(--on-cy)}
.p5-faq-list details:nth-child(4n+2)[open] summary::after{background:var(--mg);border-color:var(--mg);color:var(--on-mg)}
.p5-faq-list details:nth-child(4n+3)[open] summary::after{background:var(--yl);border-color:var(--yl);color:var(--on-yl)}
.p5-faq-list details:nth-child(4n)[open] summary::after{background:var(--fg);color:var(--bg)}
.p5-faq-list details p{margin:0 0 24px;color:var(--muted);max-width:40em}

/* contact */
.p5-contact-in{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px clamp(40px,6vw,96px);align-items:end;padding:clamp(56px,7vw,96px) clamp(28px,6vw,88px) clamp(40px,6vw,80px);border-radius:var(--r);background:var(--fg);color:var(--bg)}
.p5-contact-bar{position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(90deg,var(--cy) 0 25%,var(--mg) 0 50%,var(--yl) 0 75%,color-mix(in srgb,var(--bg) 50%,var(--fg)) 0)}
.p5-contact .p5-k{color:color-mix(in srgb,var(--bg) 75%,var(--fg))}
.p5-contact h2{font-size:clamp(34px,4.6vw,64px);margin-bottom:20px}
.p5-contact-intro{font-size:17px;max-width:30em;margin-bottom:32px;color:color-mix(in srgb,var(--bg) 80%,var(--fg))}
.p5-contact-intro p:last-child{margin:0}
.p5-contact-list li{padding:14px 0;border-top:1px solid color-mix(in srgb,var(--bg) 20%,transparent)}
.p5-contact-list .bc-k{font-size:11.5px;letter-spacing:.18em;opacity:.7}
.p5-contact-list a{display:inline-flex;align-items:center;min-height:44px;margin:-6px 0;font-size:18px;font-weight:600;text-decoration:none}
.p5-contact-list span a{font-size:15px;text-decoration:underline}
.p5-social{display:flex;flex-wrap:wrap;gap:4px 18px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--bg) 20%,transparent)}
.p5-social a{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;font-weight:600}

/* footer */
.p5-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 24px;padding:32px var(--pad-x) 40px;font-size:13.5px;color:var(--muted)}
.p5-foot-brand{display:inline-flex;align-items:center;gap:12px;font-weight:600;color:var(--fg)}

@media (max-width:1000px){
  .p5-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p5-press,.p5-press--5{--n:2}
  .p5-press::before{display:none}
}
@media (max-width:900px){
  .p5-main>.p5-hero,.p5-about-top,.p5-contact-in{grid-template-columns:minmax(0,1fr)}
  .p5-hero-art{max-width:520px;width:100%;justify-self:center}
}
@media (max-width:700px){
  .p5-top{padding-block:12px 4px}
  .p5-nav{width:calc(100% + 16px);margin:0 -8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .p5-nav a{flex:none;padding:0 10px;font-size:14px}
  .p5-actions>.p5-btn{flex:1 1 100%}
  .p5-hero-ph img{aspect-ratio:1/1}
  .p5-press,.p5-press--5,.p5-press--6{grid-template-columns:minmax(0,1fr);gap:0}
  .p5-press li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start;padding-bottom:22px}
  .p5-press li:not(:last-child)::after{content:"";position:absolute;left:23px;top:52px;bottom:4px;width:2px;background:var(--line)}
  .p5-dot{width:48px;height:48px;font-size:17px}
  .p5-press p{margin:11px 0 0}
  .p5-cards{grid-template-columns:minmax(0,1fr);gap:40px}
  .p5-card{padding:24px 22px 16px}
  .p5-sheet{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px 30px}
  .p5-proof:nth-child(n){grid-column:span 1}
  .p5-proof:nth-child(4n+1),.p5-proof:nth-child(4n){grid-column:1/-1}
  .p5-proof figcaption{font-size:13.5px;margin-top:20px}
  .p5-contact{padding-inline:12px}
  .p5-contact-in{padding:52px 22px 28px}
}