@font-face{font-family:'Arial Bold';src:url('8aa93966-13c0-4902-808f-10e816121c50.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Arial Bold Italic';src:url('f89df56f-dd1f-4d39-b392-32a7c496d23e.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Arial Italic';src:url('2f6dae45-2a6f-41b6-9b0b-cfe3e345666b.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Arial Regular';src:url('1dc770e9-49d6-4739-9431-eccd67f50086.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Denim INK TRIAL Bold';src:url('9829292f-0cce-48c6-8af6-1255b80045a7.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Denim INK TRIAL Bold Italic';src:url('77636141-92d9-47f3-a93a-655ca9d4eb8c.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Denim INK TRIAL Heavy Italic';src:url('da04c048-106b-4e75-9668-4649647e528d.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Denim INK TRIAL Heavy Regular';src:url('8a7bf31b-e06c-47a4-98a3-084e3bb004b3.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Denim INK TRIAL Italic';src:url('d2124f83-1527-457d-9259-a76c9e09c78f.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Denim INK TRIAL Light Italic';src:url('b9170a53-81db-4d85-be30-8736eb536b45.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Denim INK TRIAL Light Regular';src:url('a010de0c-e88d-4cec-86fe-ca5eca9369c0.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Denim INK TRIAL Medium Italic';src:url('614f4169-c534-4b42-8f79-136cc39bbaab.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Denim INK TRIAL Medium Regular';src:url('f0c19908-6557-4a18-bcac-4defa0fc9f4b.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Denim INK TRIAL Regular';src:url('4e48f1ca-c023-47a7-9299-e35e1724ad3d.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Denim INK TRIAL SemiBold Italic';src:url('c66cc874-1a54-402d-8725-48842bb2ca77.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Denim INK TRIAL SemiBold Regular';src:url('0a0333bf-bf10-4ecf-a77b-95ce1a689aca.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'MD Thermochrome01 Regular';src:url('cb65cc89-e3f7-4931-afe6-67357971d681.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi Bold';src:url('Satoshi-Bold.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi Medium';src:url('Satoshi-Medium.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}

:root {
  --bg: #f6f6f6;
  --ink: #16171a;
  --muted: #484d5c;
  --accent: #09163d;
  --line: #dfe5ed;
  --teal: #0a6478;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Denim INK TRIAL Regular", "Denim INK", Rubik, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  display: flex;
  min-height: 100vh;
}
.nav {
  width: 240px;
  flex: 0 0 240px;
  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: 40px 15px 28px 40px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}
.brand { display: block; text-decoration: none; margin-bottom: 40px; }
.brand img { display: block; max-width: 100%; height: auto; }
.nav a { color: var(--muted); font-family: Rubik, Arial, sans-serif; text-decoration: none; display: block; padding: 5px 0; font-size: 13px; line-height: 1.3; }
.nav a.active { color: var(--accent); font-weight: 700; }
.nav a:hover { color: var(--accent); }
.nav .note { margin-top: 32px; font-family: Rubik, Arial, sans-serif; font-size: 11px; color: #8a9099; line-height: 1.4; }
main { flex: 1; max-width: 1196px; margin: 0 auto; padding: 0 63px 80px; }
.module { margin: 0; padding: 48px 0; }
.module.header { margin: 0 -63px 24px; min-height: 400px; padding: 96px 63px; color: #fff; display: grid; align-items: center; }
.module.header .rich, .module.header h1 { color: #fff; }
.module.header .media { margin: -96px -63px; }
.module.header .media video { width: calc(100% + 126px); min-height: 400px; height: 100%; max-height: 680px; object-fit: cover; }
.grid { display: grid; gap: var(--col-gap,28px); align-items: start; }
.grid.cols-1 { grid-template-columns: 1fr; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-2-1 { grid-template-columns: 2fr 1fr; }
.grid.cols-1-2 { grid-template-columns: 1fr 2fr; }
.grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.header-mod { grid-template-columns: 1fr; }
.rich h1 { font-family: "Denim INK TRIAL Medium Regular", "Denim INK", sans-serif; font-size: 50px; font-weight: 400; line-height: 1.10; letter-spacing: -2px; margin: 20px 0 0; }
.rich h2 { font-family: "Denim INK TRIAL Regular", "Denim INK", sans-serif; font-size: 31px; font-weight: 500; line-height: 1.3; letter-spacing: -1px; margin: 20px 0 0; }
.rich p { font-size: 20px; line-height: 1.2; margin: 20px 0 0; }
.rich ul { font-size: 20px; line-height: 1.2; margin: 20px 0 0; padding-left: 24px; }
.rich a { color: var(--teal); }
.media { margin: 0; }
.media img, .media video { width: 100%; height: auto; display: block; background: #eee; }
.caption { margin-top: 12px; font-family: "MD Thermochrome01 Regular", "Denim INK TRIAL Regular", sans-serif; font-size: 20px; line-height: 1.3; }
.caption .rich, .caption p, .caption h1, .caption h2, .caption h3 { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; font-family: inherit; }
.rich + .rich { margin-top: 20px; }
.btn {
  display: inline-block;
  background: #000;
  color: #fff;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 100px;
  font-family: Rubik, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s ease;
}
.btn:hover { background: #373737 !important; }
.meta { color: var(--muted); font-family: Rubik, Arial, sans-serif; font-size: 13px; margin-left: 8px; }
.download-wrap { margin: 0; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.colors.cols-3 .swatches { grid-template-columns: repeat(3, 1fr); }
.colors.cols-4 .swatches { grid-template-columns: repeat(4, 1fr); }
.swatch { background: #fff; overflow: hidden; }
.chip { align-items: center; display: flex; height: 220px; justify-content: center; overflow: hidden; position: relative; }
.chip-hex { font-family: Rubik, Arial, sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; transition: opacity .15s ease; }
.colors .chip .swatch-meta { align-items: center; background: inherit; display: flex; flex-direction: column; inset: 0; justify-content: center; opacity: 0; padding: 20px; position: absolute; text-align: center; transition: opacity .15s ease; }
.colors .chip:hover .swatch-meta, .colors .chip:focus-visible .swatch-meta { opacity: 1; }
.colors .chip:hover .chip-hex, .colors .chip:focus-visible .chip-hex { opacity: 0; }
.colors .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.colors .swatch-meta strong { font-weight: 600; }
.colors .swatch-meta code { font-family: inherit; font-weight: inherit; font-size: 11px; opacity: .8; padding: 0; background: none; }
.spacer { width: 100%; }
h1.page-title { font-size: 42px; margin: 40px 0 0; }
.lead { color: var(--muted); }
.page-footer { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); margin: 48px auto 0; max-width: 1070px; padding: 32px 0 0; font-family: Rubik, Arial, sans-serif; background: #f5f5f5; }
.page-footer a { color: var(--accent); text-decoration: none; font-size: 14px; }
.page-footer a:hover { color: var(--link, #0c56ff); }
/* --- interactive extras (site.js) --- */
.nav-toggle { display: none; position: fixed; top: 12px; right: 12px; z-index: 300; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; font-size: 18px; line-height: 1; cursor: pointer; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; z-index: 1000; cursor: zoom-out; }
.lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.lb-close, .lb-prev, .lb-next { position: absolute; color: #fff; font-size: 40px; line-height: 1; padding: 16px 20px; cursor: pointer; user-select: none; z-index: 1001; }
.lb-close { top: 8px; right: 10px; font-size: 32px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { color: var(--hl, #f6c944); }
figure.media { position: relative; }
.media img { cursor: zoom-in; }
.video-sound { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; transition: background .15s ease; }
.video-sound:hover { background: rgba(0,0,0,.85); }
.video-sound svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 900px) {
  body { display: block; }
  .nav-toggle { display: block; }
  .nav { position: relative; width: auto; height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 24px 20px; display: none; }
  body.nav-open .nav { display: block; }
  .brand img { max-width: 220px; }
  .grid.cols-2, .grid.cols-2-1, .grid.cols-1-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .colors.cols-3 .swatches, .colors.cols-4 .swatches { grid-template-columns: repeat(2, 1fr); }
  main { padding: 0 20px 60px; }
  .module { padding: 24px 0; }
  .module.header { margin: 0 -20px 24px; min-height: 240px; padding: 48px 20px; }
  .module.header .media { margin: -48px -20px; }
  .module.header .media video { width: calc(100% + 40px); min-height: 240px; }
}