/* Classflow / biography update to the recovered V3.26 site.
   All existing styles, rig, audio and case handlers are left in place. */
.hero-tagline { margin: 14px 0 0; max-width: 34ch; color: #d1ced8; font-size: 12px; line-height: 1.65; font-weight: 500; }
.hero-positioning .hero-context { margin-top: 12px; }
.about-experience--bio { margin-top: -8px; }
.about-experience a { color: #e2d5ff; text-underline-offset: 4px; }
.about-experience a:hover { color: #fff; }
.about-experience a:focus-visible, .classflow-outro a:focus-visible, .case-page-bar a:focus-visible { outline: 3px solid #b7a0ff; outline-offset: 5px; border-radius: 4px; }
.project-step--classflow .project-visual--main { background: #e8e9ed; }
.project-step--classflow .project-visual--main img { object-fit: contain; }
.project-step--classflow .project-visual--secondary { background: #18191b; }
.project-step--classflow .project-visual--secondary img { object-fit: contain; }
.project-step--classflow .project-insight { background: #18201a; }
.project-step--classflow .insight-value { color: #dbeec0; }
.classflow-overview { margin-top: 30px; }
.classflow-workflow { padding-block: 30px; margin-top: 36px; border-top: 1px solid #302c38; border-bottom: 1px solid #302c38; }
.classflow-eyebrow { margin: 0 0 12px; font-size: 10px; line-height: 1.5; letter-spacing: .12em; color: #a69caf; }
.classflow-workflow h3, .classflow-outro h3 { margin: 0; font-size: clamp(19px, 2.2vw, 25px); line-height: 1.35; font-weight: 600; letter-spacing: -.025em; }
.classflow-workflow blockquote { margin: 24px 0; max-width: 820px; padding: 4px 0 4px 20px; border-left: 2px solid #d8c9ff; color: #e3dfea; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.55; }
.classflow-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; list-style: none; margin: 28px 0 0; padding: 0; }
.classflow-steps li { min-width: 0; }
.classflow-steps span { display: block; color: #a396bd; font-size: 10px; letter-spacing: .12em; margin-bottom: 10px; }
.classflow-steps h4 { font-size: 14px; margin: 0 0 8px; line-height: 1.4; }
.classflow-steps p { color: #b4afbf; font-size: 13px; line-height: 1.65; margin: 0; }
.classflow-note { color: #95909e; font-size: 11px; line-height: 1.6; margin: 24px 0 0; }
.classflow-outro { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; border-top: 1px solid #302c38; margin-top: 40px; padding-top: 30px; }
.classflow-outro .outline-button { min-height: 48px; }
/* Standalone case uses the same content and same modal editorial styles. */
body.classflow-case-page { background: #0d0e12; color: var(--white); }
.classflow-case-page main { max-width: 1180px; margin: auto; }
.case-page-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px clamp(20px,4vw,48px); background: #0d0e12; border-bottom: 1px solid #29282f; }
.case-page-bar a { color: #d6d2dd; font-size: 11px; line-height: 1.5; text-decoration: none; }
.case-page-bar a:hover { color: #fff; }
@media (max-width:760px) {
 .hero-tagline { font-size: 11px; line-height: 1.55; margin-top: 12px; }
 .hero-positioning .hero-context { font-size: 10px; margin-top: 10px; }
 .classflow-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
 .classflow-workflow blockquote { padding-left: 14px; }
 .classflow-overview { margin-top: 24px; }
 .classflow-outro { align-items: flex-start; flex-direction: column; }
}