:root {
    --sheet: #FFFFFF;
    --guide: #EEF1F4;
    --c: #00A0E3;
    --m: #E5007D;
    --y: #FFED00;
    --k: #231F20;
    --rule: #D5DAE0;
    --muted: #5B6470;
    --focus: #00A0E3;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'IBM Plex Sans Thai', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--k);
    background: var(--guide);
    font-variant-numeric: tabular-nums;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Header */
.site-head { background: var(--sheet); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 30; }
.site-head .wrap { display: flex; align-items: center; gap: 32px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.brand small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); letter-spacing: 0; }
.nav { display: flex; gap: 24px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--k); }
.head-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 3px; font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; border: 1.5px solid var(--k); background: var(--k); color: #fff; }
.btn:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--k); }
.btn-ghost:hover { background: var(--guide); }
.btn-line { background: #06C755; border-color: #06C755; }
.btn-line:hover { background: #05B24C; }
.menu-toggle { display: none; margin-left: auto; background: none; border: 1.5px solid var(--k); border-radius: 3px; padding: 8px 12px; font: inherit; font-weight: 600; }

/* Hero */
.hero { padding: 64px 0 0; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; }
.hero-copy { padding-top: 24px; }
.overprint { display: grid; font-size: clamp(44px, 6.2vw, 84px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 24px; }
.overprint span { grid-area: 1 / 1; }
.overprint .sep-c { color: var(--c); mix-blend-mode: multiply; transform: translate(-7px, -5px); animation: register 1.1s cubic-bezier(.2,.7,.2,1) .25s forwards; }
.overprint .sep-m { color: var(--m); mix-blend-mode: multiply; transform: translate(6px, 4px); animation: register 1.1s cubic-bezier(.2,.7,.2,1) .35s forwards; }
.overprint .sep-k { color: var(--k); opacity: 0; animation: ink-k .5s ease-out 1.3s forwards; }
@keyframes register { to { transform: translate(0, 0); } }
@keyframes ink-k { to { opacity: 1; } }
.hero-lead { font-size: 19px; color: var(--muted); max-width: 27em; margin: 0 0 28px; }
.hero-facts { display: flex; gap: 36px; margin: 36px 0 0; padding: 20px 0 0; border-top: 1px solid var(--rule); list-style: none; }
.hero-facts li { font-size: 14px; color: var(--muted); }
.hero-facts strong { display: block; font-size: 22px; color: var(--k); }

/* Proof sheet (quote card) */
.proof { position: relative; background: var(--sheet); padding: 32px 32px 0; box-shadow: 0 1px 0 var(--rule), 0 24px 60px -30px rgba(35, 31, 32, 0.35); }
.proof::before, .proof::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--k); border-style: solid; }
.proof::before { top: -12px; left: -12px; border-width: 0 1px 1px 0; }
.proof::after { bottom: -12px; right: -12px; border-width: 1px 0 0 1px; }
.proof h2 { font-size: 22px; margin: 0 0 4px; }
.proof .sub { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.field { margin-bottom: 16px; }
.field > label, .field > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
select, input[type="text"], input[type="tel"], input[type="number"] { width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; border: 1.5px solid var(--rule); border-radius: 3px; background: #fff; color: var(--k); }
select:focus, input:focus { border-color: var(--k); outline: none; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 7px 14px; border: 1.5px solid var(--rule); border-radius: 3px; font-size: 14px; cursor: pointer; }
.chip input:checked + span { border-color: var(--k); background: var(--k); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.checks label { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 10px; border: 1.5px solid var(--rule); border-radius: 3px; cursor: pointer; }
.checks input { accent-color: var(--k); }
.total { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 20px 0; margin-top: 8px; border-top: 1px dashed var(--rule); }
.total .price { font-size: 38px; font-weight: 700; line-height: 1; }
.total .price small { font-size: 16px; font-weight: 500; }
.total .meta { text-align: right; font-size: 14px; color: var(--muted); }
.total .meta strong { color: var(--k); }
.proof .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 20px; }
.colorbar { display: grid; grid-template-columns: repeat(12, 1fr); height: 14px; margin: 0 -32px; }
.colorbar i:nth-child(4n+1) { background: var(--c); }
.colorbar i:nth-child(4n+2) { background: var(--m); }
.colorbar i:nth-child(4n+3) { background: var(--y); }
.colorbar i:nth-child(4n+4) { background: var(--k); }
.colorbar i:nth-child(n+5):nth-child(-n+8) { opacity: .5; }
.colorbar i:nth-child(n+9) { opacity: .25; }

/* Sections */
section { padding: 96px 0; }
.sheet-band { background: var(--sheet); }
.sec-head { max-width: 640px; margin-bottom: 40px; }
.sec-head h2 { font-size: 34px; line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 12px; }
.sec-head p { color: var(--muted); margin: 0; }

/* Price table */
.price-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.price-table th { text-align: left; font-size: 14px; font-weight: 600; color: var(--muted); padding: 0 16px 12px 0; border-bottom: 1.5px solid var(--k); }
.price-table td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.price-table td:first-child { font-weight: 600; font-size: 17px; }
.price-table td.num { font-weight: 600; white-space: nowrap; }
.price-table button { font: inherit; font-size: 14px; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

/* Paper swatches */
.papers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.paper figure { margin: 0; }
.paper .stock { height: 220px; border: 1px solid var(--rule); position: relative; }
.stock.gloss { background: linear-gradient(115deg, #fff 30%, #F1F4F7 45%, #fff 60%); }
.stock.matte { background: #FAFAF9; }
.stock.uncoated { background: #FBFBF8 radial-gradient(circle at 20% 30%, rgba(0,0,0,.03) 1px, transparent 1.5px) 0 0 / 7px 7px; }
.stock.kraft { background: #C9A47A radial-gradient(circle, rgba(90,60,30,.18) 1px, transparent 1.6px) 0 0 / 9px 9px; border-color: #B8926A; }
.stock.card { background: #fff; box-shadow: inset 0 -6px 0 #ECEFF2, inset 0 -7px 0 var(--rule); }
.paper figcaption { padding-top: 12px; font-size: 14px; color: var(--muted); }
.paper figcaption strong { display: block; font-size: 16px; color: var(--k); }
.finishes { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid var(--k); }
.finishes div { padding: 20px 20px 0 0; }
.finishes div + div { padding-left: 20px; border-left: 1px solid var(--rule); }
.finishes h3 { font-size: 17px; margin: 0 0 6px; }
.finishes p { margin: 0; font-size: 14px; color: var(--muted); }

/* Process */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { padding: 0 28px 0 0; position: relative; }
.steps li::before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1.5px solid var(--k); border-radius: 50%; font-weight: 700; margin-bottom: 20px; background: var(--guide); position: relative; z-index: 1; }
.steps li::after { content: ""; position: absolute; top: 20px; left: 40px; right: 0; border-top: 1px dashed var(--muted); }
.steps li:last-child::after { display: none; }
.steps h3 { font-size: 18px; margin: 0 0 6px; }
.steps p { margin: 0; font-size: 15px; color: var(--muted); max-width: 22em; }

/* Tracking */
.track { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.track form { display: flex; gap: 10px; }
.track form .btn { white-space: nowrap; flex-shrink: 0; }
.track-hint { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.track-result { border: 1px solid var(--rule); background: var(--sheet); padding: 24px; min-height: 180px; }
.track-result .empty { color: var(--muted); margin: 0; }
.track-result .err { color: #B42318; margin: 0; }
.job-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.job-head h3 { margin: 0; font-size: 18px; }
.job-head span { font-size: 14px; color: var(--muted); }
.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; list-style: none; padding: 0; margin: 0; }
.stages li { font-size: 13px; color: var(--muted); padding-top: 12px; border-top: 4px solid var(--rule); }
.stages li.done { border-color: var(--k); color: var(--k); }
.stages li.now { border-color: var(--m); color: var(--k); font-weight: 600; }
.job-note { margin: 18px 0 0; font-size: 15px; }

/* Work */
.work { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.work figure { margin: 0; background: var(--sheet); }
.work figure:first-child { grid-row: span 2; }
.work img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.work figure:first-child { display: flex; flex-direction: column; }
.work figure:first-child img { aspect-ratio: auto; flex: 1; min-height: 0; height: auto; }
.work figure:not(:first-child) img { aspect-ratio: 16 / 10; }
.work figcaption { padding: 12px 16px 16px; font-size: 14px; color: var(--muted); }
.work figcaption strong { color: var(--k); font-size: 15px; }

/* B2B */
.b2b { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.b2b ul { list-style: none; padding: 0; margin: 0; border-top: 1.5px solid var(--k); }
.b2b li { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.b2b li strong { font-weight: 600; }
.b2b li span { color: var(--muted); }

/* FAQ */
.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 20px; color: var(--muted); max-width: 40em; }

/* CTA + footer */
.cta { background: var(--k); color: #fff; }
.cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.cta h2 { font-size: 30px; margin: 0 0 8px; }
.cta p { margin: 0; color: #C9CDD2; }
.cta .btns { display: flex; gap: 12px; flex-shrink: 0; }
.cta .btn-ghost { color: #fff; border-color: #fff; }
.cta .btn-ghost:hover { background: rgba(255,255,255,.08); }
footer { background: var(--k); color: #C9CDD2; font-size: 14px; padding: 0 0 40px; }
footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-top: 40px; border-top: 1px solid #3A3536; }
footer h3 { color: #fff; font-size: 15px; margin: 0 0 12px; }
footer p, footer ul { margin: 0; padding: 0; list-style: none; }
footer li { margin-bottom: 6px; }
footer a { text-decoration: none; }
footer a:hover { color: #fff; }

@media (max-width: 1024px) {
    .hero .wrap, .track, .b2b { grid-template-columns: 1fr; }
    .papers { grid-template-columns: repeat(3, 1fr); }
    .finishes { grid-template-columns: 1fr 1fr; }
    .finishes div:nth-child(3) { padding-left: 0; border-left: 0; }
    .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
    .steps li:nth-child(2)::after { display: none; }
    footer .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .wrap { padding: 0 16px; }
    .nav { display: none; }
    .nav.open { display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: var(--sheet); padding: 16px; border-bottom: 1px solid var(--rule); gap: 14px; }
    .menu-toggle { display: inline-block; }
    .head-actions { display: none; }
    .hero { padding-top: 36px; }
    .proof { padding: 24px 20px 0; }
    .colorbar { margin: 0 -20px; }
    .checks { grid-template-columns: 1fr 1fr; }
    .hero-facts { gap: 20px; flex-wrap: wrap; }
    section { padding: 64px 0; }
    .sec-head h2 { font-size: 27px; }
    .papers { grid-template-columns: 1fr 1fr; }
    .paper .stock { height: 140px; }
    .finishes, .steps { grid-template-columns: 1fr; }
    .finishes div + div { padding-left: 0; border-left: 0; }
    .steps li::after { display: none; }
    .price-table thead { display: none; }
    .price-table tr { display: grid; grid-template-columns: 1fr auto; padding: 14px 0; border-bottom: 1px solid var(--rule); }
    .price-table td { border: 0; padding: 2px 0; }
    .price-table td:nth-child(2) { grid-column: 1 / -1; order: 3; color: var(--muted); font-size: 14px; }
    .price-table td:nth-child(4) { display: none; }
    .price-table td:nth-child(5) { grid-column: 1 / -1; order: 4; padding-top: 6px; }
    .work { grid-template-columns: 1fr; }
    .work figure:first-child { grid-row: auto; }
    .work figure:first-child img { height: auto; aspect-ratio: 4 / 3; }
    .b2b li { grid-template-columns: 1fr; gap: 2px; }
    .track form { flex-direction: column; }
    .cta .wrap { flex-direction: column; align-items: flex-start; }
    .cta .btns { flex-direction: column; width: 100%; }
    footer .wrap { grid-template-columns: 1fr; }
}

/* ===== Colour pass: ink on the sheet ===== */
.hero { position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; }
.rosette { position: absolute; right: -40px; top: -70px; width: 860px; height: 820px; pointer-events: none; }
.rosette i { position: absolute; width: 470px; height: 470px; border-radius: 50%; mix-blend-mode: multiply; }
.rosette i:nth-child(1) { left: 70px; top: 320px; background: radial-gradient(circle, var(--c) 42%, transparent 44%) 0 0 / 13px 13px; transform: rotate(15deg); }
.rosette i:nth-child(2) { left: 330px; top: 0; background: radial-gradient(circle, var(--m) 42%, transparent 44%) 0 0 / 13px 13px; transform: rotate(75deg); }
.rosette i:nth-child(3) { left: 420px; top: 360px; background: radial-gradient(circle, var(--y) 46%, transparent 48%) 0 0 / 13px 13px; }
.hero-facts li:nth-child(1) strong { color: var(--c); }
.hero-facts li:nth-child(2) strong { color: var(--m); }
.hero-facts li:nth-child(3) strong { background: linear-gradient(transparent 58%, var(--y) 58%); width: fit-content; }
.chip input:checked + span { background: var(--c); border-color: var(--c); color: var(--k); font-weight: 600; }
.checks input { accent-color: var(--m); }
.btn-m { background: var(--m); border-color: var(--m); }
.btn-m:hover { background: #C8006C; border-color: #C8006C; }
.total .price { color: var(--m); }

.price-table tbody tr td:first-child { padding-left: 16px; box-shadow: inset 5px 0 0 var(--c); }
.price-table tbody tr:nth-child(4n+2) td:first-child { box-shadow: inset 5px 0 0 var(--m); }
.price-table tbody tr:nth-child(4n+3) td:first-child { box-shadow: inset 5px 0 0 var(--y); }
.price-table tbody tr:nth-child(4n+4) td:first-child { box-shadow: inset 5px 0 0 var(--k); }
.price-table tbody tr:hover td { background: #F3FAFE; }
.price-table td.num { color: var(--m); }

#papers { background: #FFF8C2; }
#papers .stock { border-color: #E9DA7A; }
.finishes { border-top: 0; }
.finishes div { border-top: 5px solid var(--c); padding-top: 18px; }
.finishes div:nth-child(2) { border-top-color: var(--m); }
.finishes div:nth-child(3) { border-top-color: var(--y); }
.finishes div:nth-child(4) { border-top-color: var(--k); }

#process { background: #E1F4FC; }
.steps li::before { border: 0; color: #fff; background: var(--c); }
.steps li:nth-child(2)::before { background: var(--m); }
.steps li:nth-child(3)::before { background: var(--y); color: var(--k); }
.steps li:nth-child(4)::before { background: var(--k); }
.steps li::after { border-top: 2px dotted var(--k); }

#track { background: #FDE4F1; }
#track .track-result { border-color: #F5B8D8; }
.stages li.now { border-color: var(--m); }

#work figure { border-top: 5px solid var(--c); }
#work figure:nth-child(2) { border-top-color: var(--m); }
#work figure:nth-child(3) { border-top-color: var(--y); }

#business { background: var(--sheet); }
.b2b ul { border-top: 5px solid var(--m); }
.b2b li strong { color: var(--m); }

.cta { background: var(--m); }
.cta p { color: #FFE0F0; }
.cta .btn-line { box-shadow: 0 0 0 2px #fff; }
footer { border-top: 0; }
footer::before { content: ""; display: block; height: 8px; background: linear-gradient(90deg, var(--c) 0 25%, var(--m) 25% 50%, var(--y) 50% 75%, #FFFFFF 75% 100%); opacity: .95; margin-bottom: 0; }
.cta + * { margin-top: 0; }

/* Stacked layout: the copy spans the full width, so dots anchored to the top
   printed straight over the headline. Anchor them to the hero's bottom
   instead, behind the quote card, the way they frame it on desktop. */
@media (max-width: 1024px) {
    .rosette { right: -200px; top: auto; bottom: -160px; transform: scale(.75); opacity: .75; }
}
@media (max-width: 760px) {
    .rosette { right: -300px; top: auto; bottom: -200px; transform: scale(.6); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
    .overprint .sep-c, .overprint .sep-m { animation: none; transform: none; }
    .overprint .sep-k { animation: none; opacity: 1; }
    html { scroll-behavior: auto; }
}