/* Printing Methods: scoped body component, using the existing theme font. */
.hcb-pg-guide {
    --pg-blue: var(--hcb-primary, #005e9e);
    --pg-dark: #101f39;
    --pg-text: #465771;
    --pg-line: #dbe5f0;
    --pg-tint: #eaf5ff;
    --pg-atlas: url("../images/printing-guide/printing-atlas.png");
    color: var(--pg-dark);
    background: #fff;
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: break-word;
}
.hcb-pg-guide *, .hcb-pg-guide *::before, .hcb-pg-guide *::after { box-sizing: border-box; }
.hcb-pg-guide [id] { scroll-margin-top: 160px; }
.hcb-pg-guide .hcb-pg-shell { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }
.hcb-pg-guide h1, .hcb-pg-guide h2, .hcb-pg-guide h3, .hcb-pg-guide p, .hcb-pg-guide figure { margin: 0; }
.hcb-pg-guide h1, .hcb-pg-guide h2, .hcb-pg-guide h3 { color: var(--pg-dark); font-weight: 700; line-height: 1.17; letter-spacing: -.035em; }
.hcb-pg-guide h2 { font-size: clamp(27px, 2.6vw, 36px); }
.hcb-pg-guide h3 { font-size: 20px; }
.hcb-pg-guide p { color: var(--pg-text); }
.hcb-pg-guide a { color: inherit; text-decoration: none; }
.hcb-pg-guide a:hover { text-decoration: underline; }
.hcb-pg-guide a:focus-visible, .hcb-pg-guide summary:focus-visible, .hcb-pg-guide [tabindex]:focus-visible { outline: 3px solid #e99b35; outline-offset: 5px; }
.hcb-pg-guide .hcb-pg-eyebrow { font-size: 10px; font-weight: 700; color: var(--pg-blue); letter-spacing: .15em; margin-bottom: 13px; }
.hcb-pg-guide .hcb-pg-section { padding: 58px 0; }
.hcb-pg-guide .hcb-pg-section-head { margin-bottom: 27px; }
.hcb-pg-guide .hcb-pg-section-head > p:not(.hcb-pg-eyebrow) { margin-top: 11px; font-size: 14px; }
.hcb-pg-guide .hcb-pg-hero { background: linear-gradient(115deg,#e7f4ff,#f3f8ff); padding: 22px 0 38px; }
.hcb-pg-guide .hcb-pg-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #586b85; font-size: 10px; margin-bottom: 32px; }
.hcb-pg-guide .hcb-pg-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 30px; }
.hcb-pg-guide h1 { font-size: clamp(36px, 3.5vw, 48px); line-height: 1.12; }
.hcb-pg-guide h1 em { color: var(--pg-blue); font-style: normal; }
.hcb-pg-guide .hcb-pg-lead { font-size: 15px; max-width: 530px; line-height: 1.75; margin: 22px 0 25px; }
.hcb-pg-guide .hcb-pg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hcb-pg-guide .hcb-pg-button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 47px; padding: 12px 19px; background: var(--pg-blue); color: #fff; border: 1px solid var(--pg-blue); border-radius: 5px; font-size: 12px; font-weight: 600; line-height: 1.4; text-decoration: none; }
.hcb-pg-guide .hcb-pg-button:hover { background: #034b81; color: #fff; text-decoration: none; }
.hcb-pg-guide .hcb-pg-button-outline { background: transparent; color: var(--pg-blue); }
.hcb-pg-guide .hcb-pg-button-outline:hover { background: #deedfc; color: var(--pg-blue); }
.hcb-pg-guide .hcb-pg-hero-notes { display: flex; flex-wrap: wrap; gap: 21px; font-size: 10px; color: #314c6f; margin-top: 26px; }
.hcb-pg-guide .hcb-pg-hero-notes span::before { content: '◇'; color: var(--pg-blue); font-size: 16px; margin-right: 7px; vertical-align: -1px; }
.hcb-pg-guide .hcb-pg-hero-image img { display: block; width: 100%; height: auto; aspect-ratio: 1.5; object-fit: cover; border-radius: 8px; }
.hcb-pg-guide .hcb-pg-jump { background: #fff; padding: 20px 0; border-bottom: 1px solid var(--pg-line); }
.hcb-pg-guide .hcb-pg-jump .hcb-pg-shell { display: flex; justify-content: center; flex-wrap: wrap; gap: 35px; }
.hcb-pg-guide .hcb-pg-jump a { font-size: 12px; font-weight: 600; }
.hcb-pg-guide .hcb-pg-method-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 23px; }
.hcb-pg-guide .hcb-pg-method { border: 1px solid var(--pg-line); border-radius: 8px; overflow: hidden; background: #fff; }
.hcb-pg-guide .hcb-pg-photo { position: relative; height: 200px; overflow: hidden; --pg-x: 0%; --pg-y: 0%; }
.hcb-pg-guide .hcb-pg-photo::before { content: ''; position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 1; transform: translateY(-50%); background-image: var(--pg-atlas); background-size: 300% 200%; background-position: var(--pg-x) var(--pg-y); background-repeat: no-repeat; }
.hcb-pg-guide .hcb-pg-tile-0 { --pg-x: 0%; --pg-y: 0%; }
.hcb-pg-guide .hcb-pg-tile-1 { --pg-x: 50%; --pg-y: 0%; }
.hcb-pg-guide .hcb-pg-tile-2 { --pg-x: 100%; --pg-y: 0%; }
.hcb-pg-guide .hcb-pg-tile-3 { --pg-x: 0%; --pg-y: 100%; }
.hcb-pg-guide .hcb-pg-tile-4 { --pg-x: 50%; --pg-y: 100%; }
.hcb-pg-guide .hcb-pg-tile-5 { --pg-x: 100%; --pg-y: 100%; }
.hcb-pg-guide .hcb-pg-method-copy { padding: 21px 24px 23px; }
.hcb-pg-guide .hcb-pg-number { display: block; font-size: 11px; font-weight: 700; color: var(--pg-blue); margin-bottom: 5px; }
.hcb-pg-guide .hcb-pg-method h3 { margin-bottom: 10px; }
.hcb-pg-guide .hcb-pg-method p { font-size: 13px; }
.hcb-pg-guide .hcb-pg-best { margin-top: 7px; }
.hcb-pg-guide .hcb-pg-best strong { color: #263e60; }
.hcb-pg-guide details summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; list-style: none; cursor: pointer; font-weight: 600; }
.hcb-pg-guide details summary::-webkit-details-marker { display: none; }
.hcb-pg-guide details summary > span { font-size: 20px; color: var(--pg-blue); font-weight: 400; flex-shrink: 0; }
.hcb-pg-guide details[open] summary > span { transform: rotate(45deg); }
.hcb-pg-guide .hcb-pg-method-detail { border-top: 1px solid #e6edf6; margin-top: 16px; padding-top: 12px; }
.hcb-pg-guide .hcb-pg-method-detail summary { color: var(--pg-blue); font-size: 12px; }
.hcb-pg-guide .hcb-pg-method-detail p { margin-top: 12px; font-size: 12px; }
.hcb-pg-guide .hcb-pg-link { display: inline-block; color: var(--pg-blue); font-size: 12px; font-weight: 600; margin-top: 12px; }
.hcb-pg-guide .hcb-pg-method-copy > .hcb-pg-link { display: block; }
.hcb-pg-guide .hcb-pg-uv-note { display: flex; align-items: flex-start; gap: 19px; background: var(--pg-tint); padding: 22px 24px; border-radius: 7px; margin-top: 24px; }
.hcb-pg-guide .hcb-pg-uv-icon { color: var(--pg-blue); font-size: 30px; line-height: 1; }
.hcb-pg-guide .hcb-pg-uv-note h3 { font-size: 17px; margin-bottom: 6px; }
.hcb-pg-guide .hcb-pg-uv-note p { font-size: 12px; }
.hcb-pg-guide .hcb-pg-tint { background: var(--pg-tint); }
.hcb-pg-guide .hcb-pg-color-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 23px; }
.hcb-pg-guide .hcb-pg-color-card { border-radius: 7px; background: #fff; overflow: hidden; }
.hcb-pg-guide .hcb-pg-color-card > div:not(.hcb-pg-photo) { padding: 20px 23px 22px; }
.hcb-pg-guide .hcb-pg-color-card h3 { margin-bottom: 9px; }
.hcb-pg-guide .hcb-pg-color-card p { font-size: 13px; }
.hcb-pg-guide .hcb-pg-color-note { margin-top: 21px; font-size: 12px; }
.hcb-pg-guide .hcb-pg-color-note span { color: var(--pg-blue); font-size: 17px; margin-right: 8px; }
.hcb-pg-guide .hcb-pg-table-scroll { overflow-x: auto; border: 1px solid var(--pg-line); border-radius: 6px; }
.hcb-pg-guide table { width: 100%; min-width: 650px; border-collapse: collapse; text-align: left; font-size: 12px; }
.hcb-pg-guide caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hcb-pg-guide thead { background: var(--pg-blue); color: #fff; }
.hcb-pg-guide th, .hcb-pg-guide td { padding: 14px 19px; border-bottom: 1px solid var(--pg-line); vertical-align: top; }
.hcb-pg-guide tbody td { color: var(--pg-text); }
.hcb-pg-guide tbody th { width: 21%; font-weight: 600; }
.hcb-pg-guide tbody tr:nth-child(even) { background: #eff6fe; }
.hcb-pg-guide tbody tr:last-child th, .hcb-pg-guide tbody tr:last-child td { border-bottom: 0; }
.hcb-pg-guide .hcb-pg-table-note { font-size: 12px; margin-top: 15px; }
.hcb-pg-guide .hcb-pg-stock-section { padding-top: 10px; }
.hcb-pg-guide .hcb-pg-stock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: start; }
.hcb-pg-guide .hcb-pg-stock-list { list-style: none; padding: 0; margin: 21px 0 8px; }
.hcb-pg-guide .hcb-pg-stock-list li { position: relative; padding-left: 23px; margin-bottom: 12px; font-size: 13px; color: var(--pg-text); }
.hcb-pg-guide .hcb-pg-stock-list li::before { content: '✓'; position: absolute; left: 0; color: var(--pg-blue); font-weight: 700; }
.hcb-pg-guide .hcb-pg-finishes-note { margin-top: 14px; font-size: 12px; }
.hcb-pg-guide .hcb-pg-stock-tiles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.hcb-pg-guide .hcb-pg-stock-photo { aspect-ratio: 1; width: 100%; border-radius: 6px; background-image: url("../images/material-guide/materials-atlas.png"); background-size: 400% 300%; background-repeat: no-repeat; }
.hcb-pg-guide .hcb-pg-stock-white { background-position: 0% 0%; }
.hcb-pg-guide .hcb-pg-stock-kraft { background-position: 66.666667% 0%; }
.hcb-pg-guide .hcb-pg-stock-corrugated { background-position: 33.333333% 0%; }
.hcb-pg-guide .hcb-pg-stock-tiles figcaption { padding-top: 10px; font-size: 10px; line-height: 1.5; color: var(--pg-text); }
.hcb-pg-guide .hcb-pg-stock-tiles strong { display: block; color: var(--pg-dark); font-size: 11px; margin-bottom: 3px; }
.hcb-pg-guide .hcb-pg-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin: 0; padding: 0; list-style: none; }
.hcb-pg-guide .hcb-pg-steps li { display: flex; align-items: flex-start; gap: 13px; background: #fff; border-radius: 7px; padding: 23px 18px; }
.hcb-pg-guide .hcb-pg-step-number { width: 29px; height: 29px; flex-shrink: 0; border: 1px solid var(--pg-blue); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--pg-blue); }
.hcb-pg-guide .hcb-pg-steps h3 { font-size: 13px; letter-spacing: -.02em; line-height: 1.45; margin-bottom: 7px; }
.hcb-pg-guide .hcb-pg-steps p { font-size: 11px; line-height: 1.65; }
.hcb-pg-guide .hcb-pg-proof-note { font-size: 11px; margin-top: 20px; }
.hcb-pg-guide .hcb-pg-resource-links { display: flex; gap: 27px; justify-content: center; flex-wrap: wrap; }
.hcb-pg-guide .hcb-pg-resource-links:empty { display: none; }
.hcb-pg-guide .hcb-pg-faq-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 55px; }
.hcb-pg-guide .hcb-pg-faq-grid > div:first-child p { font-size: 13px; margin-top: 16px; }
.hcb-pg-guide .hcb-pg-faq-list details { border: 1px solid var(--pg-line); border-radius: 5px; padding: 14px 17px; margin-bottom: 11px; }
.hcb-pg-guide .hcb-pg-faq-list summary { font-size: 12px; }
.hcb-pg-guide .hcb-pg-faq-list details p { margin-top: 13px; font-size: 12px; }
.hcb-pg-guide .hcb-pg-cta-section { padding: 0 0 25px; }
.hcb-pg-guide .hcb-pg-cta { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(110deg,#004b95,#0084d6); border-radius: 9px; padding: 38px; }
.hcb-pg-guide .hcb-pg-cta::after { content: ''; position: absolute; z-index: -1; inset: 0 0 0 60%; background: linear-gradient(90deg,#0066b3dd,#0066b34d),url("../images/printing-guide/printing-hero.png") center/cover; opacity: .45; }
.hcb-pg-guide .hcb-pg-cta > div { max-width: 850px; }
.hcb-pg-guide .hcb-pg-cta h2 { color: #fff; font-size: 29px; }
.hcb-pg-guide .hcb-pg-cta p { color: #e3f1ff; font-size: 13px; margin: 15px 0 21px; }
.hcb-pg-guide .hcb-pg-button-white { color: var(--pg-blue); background: #fff; border-color: #fff; }
.hcb-pg-guide .hcb-pg-button-white:hover { background: #e6f2ff; color: var(--pg-blue); }
.hcb-pg-guide .hcb-pg-image-note { font-size: 10px; color: #77899d; text-align: center; margin-top: 16px; }
body.page-template-page-printing-methods #content, body.page-template-page-printing-methods-php #content { width: 100%; max-width: none; padding: 0; margin: 0; }
@media(max-width:1050px) {
    .hcb-pg-guide .hcb-pg-shell { width: calc(100% - 48px); }
    .hcb-pg-guide h1 { font-size: 38px; }
    .hcb-pg-guide .hcb-pg-hero-grid { gap: 25px; }
    .hcb-pg-guide .hcb-pg-hero-notes { gap: 12px; }
    .hcb-pg-guide .hcb-pg-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .hcb-pg-guide .hcb-pg-stock-grid { gap: 25px; }
    .hcb-pg-guide .hcb-pg-stock-tiles { gap: 10px; }
    .hcb-pg-guide .hcb-pg-photo { height: 175px; }
}
@media(max-width:760px) {
    .hcb-pg-guide .hcb-pg-shell { width: calc(100% - 36px); }
    .hcb-pg-guide .hcb-pg-section { padding: 43px 0; }
    .hcb-pg-guide .hcb-pg-hero { padding: 18px 0 28px; }
    .hcb-pg-guide .hcb-pg-breadcrumb { margin-bottom: 27px; font-size: 9px; gap: 8px; }
    .hcb-pg-guide .hcb-pg-hero-grid { grid-template-columns: 1fr; gap: 27px; }
    .hcb-pg-guide h1 { font-size: clamp(34px,6.7vw,44px); }
    .hcb-pg-guide .hcb-pg-lead { max-width: none; font-size: 14px; }
    .hcb-pg-guide .hcb-pg-jump .hcb-pg-shell { justify-content: flex-start; gap: 16px 23px; }
    .hcb-pg-guide .hcb-pg-jump a { font-size: 11px; }
    .hcb-pg-guide .hcb-pg-method-grid, .hcb-pg-guide .hcb-pg-color-grid { gap: 17px; }
    .hcb-pg-guide .hcb-pg-method-copy { padding: 18px; }
    .hcb-pg-guide .hcb-pg-method h3 { font-size: 18px; }
    .hcb-pg-guide .hcb-pg-photo { height: 155px; }
    .hcb-pg-guide .hcb-pg-stock-grid, .hcb-pg-guide .hcb-pg-faq-grid { grid-template-columns: 1fr; gap: 27px; }
    .hcb-pg-guide .hcb-pg-stock-section { padding-top: 0; }
    .hcb-pg-guide .hcb-pg-stock-tiles { gap: 15px; }
    .hcb-pg-guide .hcb-pg-cta { padding: 29px 25px; }
    .hcb-pg-guide .hcb-pg-cta h2 { font-size: 26px; }
    .hcb-pg-guide .hcb-pg-cta::after { left: 45%; opacity: .22; }
}
@media(max-width:520px) {
    .hcb-pg-guide .hcb-pg-method-grid, .hcb-pg-guide .hcb-pg-color-grid { grid-template-columns: 1fr; }
    .hcb-pg-guide .hcb-pg-photo { height: 195px; }
    .hcb-pg-guide .hcb-pg-method-copy { padding: 21px; }
    .hcb-pg-guide .hcb-pg-method h3 { font-size: 22px; }
    .hcb-pg-guide .hcb-pg-method p, .hcb-pg-guide .hcb-pg-color-card p { font-size: 13px; }
    .hcb-pg-guide .hcb-pg-actions .hcb-pg-button { font-size: 11px; padding: 12px 14px; gap: 10px; }
    .hcb-pg-guide .hcb-pg-hero-notes { gap: 11px; font-size: 9px; }
    .hcb-pg-guide .hcb-pg-hero-notes span::before { margin-right: 5px; }
    .hcb-pg-guide .hcb-pg-uv-note { padding: 19px; gap: 13px; }
    .hcb-pg-guide .hcb-pg-steps { gap: 12px; }
    .hcb-pg-guide .hcb-pg-steps li { display: block; padding: 18px 15px; }
    .hcb-pg-guide .hcb-pg-step-number { margin-bottom: 12px; }
    .hcb-pg-guide .hcb-pg-stock-tiles { gap: 10px; }
    .hcb-pg-guide .hcb-pg-stock-tiles strong { font-size: 10px; }
    .hcb-pg-guide .hcb-pg-stock-tiles figcaption { font-size: 9px; }
}
