/* Brand palette: change these five values to update the website's colors. */
:root {
  --paper: #FAFAF7;
  --ink: #1F2925;
  --secondary: #D9DCD4;
  --accent: #A8A18F;
  --white: #FFFFFF;
  --green: var(--ink);
  --line: var(--secondary);
  /* Dark text blend preserves contrast; accent is reserved for decorative use. */
  --muted: #58605B;
}
body { background: var(--paper); color: var(--ink); }
header, .navlinks { background: var(--white); }
header { border-bottom-color: var(--secondary); }
.announcement, .dark { background: var(--ink); color: var(--white); }
.announcement { color: var(--secondary); }
.dark p, .dark figcaption { color: var(--secondary); }
.dark .eyebrow, .step span { color: var(--accent); }
.steps, .step { border-color: #FFFFFF30; }
h1 em, h2 em { color: var(--ink); }
.eyebrow, .service-icon, .ribbon, .category .number,
.tags span, .category .photo-caption, .photo-option { color: var(--muted); }
.dot, .processgrid span { color: var(--ink); }
.dot { background: var(--accent); }
.btn { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn.light { background: transparent; color: var(--ink); border-color: var(--accent); }
.btn.light:hover { background: var(--secondary); color: var(--ink); border-color: var(--ink); }
.dark .btn.light { color: var(--white); border-color: var(--accent); }
.dark .btn.light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.textlink { border-color: var(--accent); }
.textlink:hover { color: var(--ink); border-color: var(--ink); }
.ribbon { background: var(--secondary); padding-inline: 22px; border-color: var(--secondary); }
.ribbon span:before { color: var(--ink); }
.intro-strip { border-color: var(--secondary); }
#collections { background: var(--paper); }
#customization, .quality { background: var(--secondary); }
.custom-process, #why-us, .about-principles { background: var(--paper); }
.servicegrid article, .qualitygrid>div, .detail-story,
.processgrid article, .qc-intro { border-color: var(--accent); }
.tags span { border-color: var(--secondary); background: var(--white); }
.category .picture, .category#hoodies .picture,
.category#activewear .picture, .category#streetwear .picture { background: var(--white); }
.photo-option { background: var(--white); border-color: var(--secondary); }
.photo-option[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.photo-option:hover { background: var(--secondary); }
.artlabel, .visual-caption, .about-photo-disclosure { background: var(--white); color: var(--ink); }
.heroart, .about-visual, .aboutimage { background: var(--secondary); }
.heroart:after { border-color: #FFFFFF80; }
.swatches i { background: var(--accent); border-color: var(--white); box-shadow: 0 1px 3px #1F292520; }
.swatches i:nth-child(2) { background: var(--secondary); }
.swatches i:nth-child(3) { background: var(--ink); }
.swatches i:nth-child(4) { background: var(--white); }
.brand-label { background: var(--ink); color: var(--white); }
.reason-list article>span, .brief-checklist li:before { color: var(--muted); }
.cta { background: var(--ink); color: var(--white); border-color: var(--ink); }
.cta .eyebrow { color: var(--accent); }
.cta p { color: var(--secondary); }
.cta .btn { background: var(--white); color: var(--ink); border-color: var(--white); }
.cta .btn:hover { background: var(--accent); border-color: var(--accent); }
footer { background: var(--white); }
form { background: var(--white); border-color: var(--secondary); box-shadow: 0 15px 50px #1F292508; }
input, select, textarea { background: var(--paper); border-color: var(--accent); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline-color: var(--ink); border-color: var(--ink); }
.status:not(:empty) { background: var(--secondary); border-color: var(--accent); }
.menu { color: var(--ink); border-color: var(--secondary); }
.skip { background: var(--white); color: var(--ink); }
::selection { background: var(--secondary); color: var(--ink); }
/* Supplied logo is white on transparent; retain its original colors on dark. */
.oem-odm{background:var(--white)}.oem-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.oem-grid article{border-top:2px solid var(--accent);padding:30px;background:var(--paper)}.oem-grid .eyebrow{display:block;font-size:9px;margin-bottom:20px}.oem-grid h3{font-size:30px}.oem-grid p{color:var(--muted);font-size:14px}@media(max-width:650px){.oem-grid{grid-template-columns:1fr;gap:24px}.oem-grid article{padding:24px}.oem-grid h3{font-size:27px}}
.direct-contact{border-top:1px solid var(--line);padding-top:20px}.direct-contact strong{font-size:20px;color:var(--ink)}.direct-contact a[href^="tel:"]{color:var(--ink);text-decoration:underline}.contact-qrs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:25px 0}.contact-qrs figure{margin:0;background:var(--white);padding:10px;border:1px solid var(--line)}.contact-qrs img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}.contact-qrs figcaption{text-align:center;font-size:10px;color:var(--ink)}
.brand-logo { display:inline-flex; align-items:center; justify-content:center; background:var(--ink); padding:5px 12px; flex-shrink:0; }
.brand-logo img { display:block; width:84px; height:60px; object-fit:contain; }
.foot .brand-logo img { width:98px; height:70px; }
@media(max-width:850px){ .brand-logo { padding:3px 10px; } .brand-logo img { width:70px; height:50px; } }