/* Marketing engineering additions: reuse the existing paper, ink and pen tokens. */
[hidden] { display: none !important; }
.section-head { display: grid; gap: var(--space-5); margin-bottom: var(--space-7); max-width: 850px; }
.section-head h2 { font-size: var(--text-3xl); line-height: 1.06; }
.section-head p:not(.note) { color: var(--ink-soft); max-width: 65ch; }
.selected-work { border-top: 1px solid var(--stone); }
.work-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0; }
.work-filters button { border: 1px solid var(--stone); border-radius: var(--radius-pill); padding: .6rem 1rem; min-height: 44px; font-size: var(--text-sm); }
.work-filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.work-filters button:hover { border-color: var(--purple); }
.work-list { border-top: 1.5px solid var(--ink); margin-block: 2rem; }
.work-entry { border-bottom: 1px solid var(--stone); }
.work-entry__link { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,4fr) minmax(0,4fr) 1rem; gap: 2rem; padding: 2rem .5rem; text-decoration: none; align-items: start; }
.work-entry__link:hover { background: var(--lavender-soft); }
.work-entry__meta { font-size: var(--text-xs); color: var(--ink-soft); display: grid; justify-items: start; gap: .75rem; }
.status { display: inline-block; font-family: var(--font-body); font-size: .75rem; font-weight: 600; line-height: 1.5; padding: .2rem .65rem; border: 1px solid var(--purple); color: var(--purple-deep); background: var(--lavender-soft); border-radius: var(--radius-pill); }
.work-entry__name { display: block; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.15; margin-bottom: .6rem; }
.work-entry__title { display: block; font-weight: 600; line-height: 1.4; }
.work-entry__summary { font-size: var(--text-sm); color: var(--ink-soft); }
.work-entry small { display: block; margin-top: .75rem; font-size: var(--text-xs); }
.fine { font-size: var(--text-sm); color: var(--ink-soft); margin-block: 1.25rem; max-width: 75ch; }
.lab-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1.5px solid var(--ink); margin-bottom: 2rem; }
.lab-list li { padding: 2rem 2rem 2rem 0; border-bottom: 1px solid #d5d1ca; }
.lab-list h3 { font-size: var(--text-xl); margin-block: 1rem .5rem; }
.lab-list p { color: var(--ink-soft); max-width: 42ch; }
.creator-brands { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; padding-block: 2rem; border-block: 1px solid var(--stone); }
.door-principles { border-left: 1px solid #57534e; padding-left: 2rem; display: grid; gap: 1.25rem; font-size: var(--text-xl); }
.door-principles .note { color: var(--lavender); }
.door-principles a { font-size: var(--text-base); color: var(--lavender); }
.s-hero__description { max-width: 76ch; margin-top: 2.5rem; color: var(--ink-soft); }
.brand-statement { margin-block: 1.5rem; font-weight: 600; }
.text-link { text-decoration-color: var(--purple); }
.service__headline { font-weight: 600; font-size: var(--text-lg); margin-block: 1.5rem 1rem; }
.service__audience { color: var(--ink-soft); margin-block: 1.25rem; }
.service__details h4 { font-family: var(--font-body); margin-bottom: 1rem; }
.service__details h4:not(:first-child) { margin-top: 2rem; }
.steps { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1.5rem; }
.steps::before { right: 18%; }
.step h3 { font-size: clamp(1rem,1.6vw,1.5rem); letter-spacing: .01em; }
.engagements { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; }
.engagements article { padding: 2rem; border: 1px solid var(--stone); border-radius: var(--radius-lg); }
.engagements h3 { font-size: var(--text-xl); margin-block: 1rem; }
.engagement-featured { background: var(--lavender); border-color: var(--lavender) !important; }
.engagement-featured .note { color: var(--ink); }
.faq { background: var(--paper-deep); }
.faq details { border-bottom: 1px solid #d5d1ca; padding-block: 1.5rem; }
.faq summary { cursor: pointer; font-weight: 600; font-size: var(--text-lg); }
.faq details p { margin-top: 1rem; max-width: 75ch; color: var(--ink-soft); }
.inquiry-form { width: 100%; max-width: 860px; display: grid; gap: 1.5rem; padding-top: 1.5rem; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
.inquiry-form label { display: grid; gap: .5rem; font-size: var(--text-sm); font-weight: 600; }
.form-wide { grid-column: 1 / -1; }
input, select, textarea { font: inherit; font-weight: 400; padding: .8rem; border: 1px solid var(--stone); background: var(--paper); color: var(--ink); border-radius: var(--radius-sm); width: 100%; min-width: 0; }
textarea { resize: vertical; }
.inquiry-form button { justify-self: start; white-space: normal; }
.final .fine { color: #d9d4cc; font-size: var(--text-sm); }
#inquiry-draft { display: grid; gap: 1rem; border-top: 1px solid #57534e; padding-top: 2rem; }
#inquiry-draft a { justify-self: start; }
.case-study { padding-block: 4rem 6rem; max-width: 980px; }
.case-header { display: grid; gap: 1.25rem; padding-bottom: 3rem; }
.case-header .kicker { margin-top: 2rem; }
.case-header h1 { font-size: var(--text-3xl); line-height: 1.05; max-width: 22ch; }
.case-subtitle { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; font-weight: 600; }
.case-header > p:last-child { color: var(--ink-soft); }
.case-section { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,3fr); gap: 2rem; padding-block: 2.5rem; border-top: 1px solid var(--stone); }
.case-section h2 { font-size: var(--text-xl); }
.case-section h2 span { color: var(--purple); }
.case-section p { max-width: 62ch; }
.case-sources { padding-block: 2rem; }
.case-sources h2 { font-size: var(--text-xl); margin-bottom: 1rem; }
.system-flow { grid-column: 1/-1; border: 1px dashed var(--purple); padding: 1.5rem; border-radius: var(--radius-lg); }
.system-flow ol { display: flex; gap: 2rem; justify-content: space-between; }
.system-flow li { font-weight: 600; position: relative; }
.system-flow li + li::before { content: '→'; color: var(--purple); position: absolute; left: -1.5rem; }
.system-flow figcaption { margin-top: 1rem; color: var(--ink-soft); font-size: var(--text-sm); }
@media(max-width: 860px) {
 .work-entry__link { grid-template-columns: 1fr 1rem; gap: 1rem; }
 .work-entry__link > :not(:last-child) { grid-column: 1; }
 .work-entry__link > :last-child { grid-column: 2; grid-row: 1; }
 .work-entry__meta { display: flex; flex-wrap: wrap; align-items: center; }
 .lab-list, .engagements, .case-section { grid-template-columns: 1fr; }
 .steps { grid-template-columns: 1fr; }
 .steps::before { right: auto; }
 .case-section { gap: 1rem; }
 .system-flow ol { flex-direction: column; gap: 1.5rem; padding-left: 1rem; }
 .system-flow li + li::before { content: '↓'; top: -1.4rem; left: 0; }
}
@media(max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .nav .logo { font-size: .9rem; } .engagements article { padding: 1.5rem; } }
/* Navigation and content remain usable when JavaScript is disabled. */
@media(max-width:900px) {
 html:not(.js) .nav__inner { flex-wrap: wrap; padding-block: 1rem; }
 html:not(.js) .nav__toggle { display: none; }
 html:not(.js) .nav__links { position: static; visibility: visible; opacity: 1; transform: none; flex-direction: row; flex-wrap: wrap; padding: 0; box-shadow: none; border: 0; font-size: 1rem; gap: 1rem; }
}