/* Quick-reference block (trial, James Oct 25, 2026): the service's categories and subcategories as short lists,
   on a light background, placed inside a service page. Everything is scoped to .qr-block, so the block can be
   cut and pasted anywhere on the page, or deleted, without affecting anything else. */
.qr-block { --qr-bg: #f7f1e8; --qr-bg-2: #fffdf9; --qr-ink: #15213f; --qr-line: #e2d6c3; --qr-gold: #a87a26; --qr-gold-3: #e9c46a; background: var(--qr-bg); color: var(--qr-ink); font-family: var(--ui, Jost), system-ui, sans-serif; }
.qr-block .qr-cat { padding: clamp(28px, 4vw, 40px) 0; border-bottom: 1px solid var(--qr-line); }
.qr-block .qr-cat:nth-child(even) { background: var(--qr-bg-2); }
.qr-block .qr-cat:last-child { border-bottom: 0; }
.qr-block .qr-head { display: flex; gap: 14px; align-items: baseline; margin: 0 0 16px; }
.qr-block .qr-rn { font-family: var(--display, 'Playfair Display'), serif; font-style: italic; color: var(--qr-gold); }
.qr-block .qr-head .qr-rn { font-size: 34px; min-width: 1.6em; line-height: 1; }
.qr-block .qr-head h2 { margin: 0; font-family: var(--display, 'Playfair Display'), serif; font-weight: 600; font-size: clamp(25px, 3.4vw, 34px); color: var(--qr-ink); background: none; -webkit-text-fill-color: currentColor; }
.qr-block .qr-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.qr-block .qr-card { background: var(--qr-bg-2); border: 1px solid var(--qr-line); border-top: 3px solid var(--qr-gold-3); border-radius: 12px; padding: 12px 16px 10px; }
.qr-block .qr-cat:nth-child(even) .qr-card { background: var(--qr-bg); }
.qr-block .qr-card h3 { margin: 0 0 6px; font-family: var(--ui, Jost), sans-serif; font-size: 17px; font-weight: 600; color: var(--qr-ink); display: flex; gap: 8px; align-items: baseline; }
.qr-block .qr-card h3 .qr-rn { font-weight: 500; min-width: 1.8em; }
.qr-block .qr-card ul { list-style: none; margin: 0; padding: 0; display: block; color: var(--qr-ink); }
.qr-block .qr-card li { padding: 5px 0 5px 16px; margin: 0; border-top: 1px solid var(--qr-line); position: relative; font-size: 15.5px; color: var(--qr-ink); }
.qr-block .qr-card li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--qr-gold); }
.qr-block .qr-idea { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: #fdf1d8; color: #8a5a00; border: 1px solid #ecd39b; border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }
@media (max-width: 560px) { .qr-block .qr-subs { grid-template-columns: 1fr; } .qr-block .qr-head .qr-rn { font-size: 28px; } }

/* intro at the top of the block (title moved from the old 'What we can design and automate' section) */
.qr-block .qr-intro { padding: clamp(34px, 5vw, 52px) 0 6px; }
.qr-block .qr-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #8a6420; }
.qr-block .qr-intro h2 { margin: 8px 0 8px; font-family: var(--display, 'Playfair Display'), serif; font-weight: 600; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; color: var(--qr-ink); background: none; -webkit-text-fill-color: currentColor; }
.qr-block .qr-intro h2 em { color: #8a6420; -webkit-text-fill-color: #8a6420; font-style: italic; }
.qr-block .qr-intro p { margin: 0; color: #4f4c58; font-size: 17px; max-width: 46em; }
.qr-block .qr-cat:nth-child(even) { background: transparent; }
.qr-block .qr-cat:nth-of-type(even) { background: var(--qr-bg-2); }
.qr-block .qr-cat:nth-child(even) .qr-card { background: var(--qr-bg-2); }
.qr-block .qr-cat:nth-of-type(even) .qr-card { background: var(--qr-bg); }
/* James Oct 25: black border around every box in these sections (approved after trying it on 'I. Website Writing') */
.qr-block .qr-card { border: 2px solid #0f1113; }