/* Our Work — small additive layer on top of /portfolio/assets/portfolio.css.
   Reuses the existing hero, demo-card and system-card components; this file
   only adds what that stylesheet doesn't already provide: a single-column
   hero variant (no portrait) and four new demo-visual thumbnails. */

.hero-grid.single{grid-template-columns:1fr;max-width:860px}

/* Interactive Workbook — eight-stage journey dots */
.demo-visual.workbook{gap:10px;flex-direction:row;flex-wrap:wrap;padding:0 30px}
.demo-visual.workbook span{position:relative;width:30px;height:30px;border-radius:50%;background:#4ee0cd;display:grid;place-items:center;color:#07344b;font-weight:800;font-size:.72rem}
.demo-visual.workbook span:nth-child(4n+2){background:#7dd3fc}
.demo-visual.workbook span:nth-child(4n+3){background:#fcd34d;color:#573a08}
.demo-visual.workbook span:nth-child(4n+4){background:#fca5a5;color:#5c1414}

/* Digital Assessment & Feedback — marked response */
.demo-visual.feedback{gap:8px}
.demo-visual.feedback .fb-check{width:54px;height:54px;border-radius:50%;background:#4ee0cd;color:#07344b;display:grid;place-items:center;font-size:1.6rem;font-weight:800}
.demo-visual.feedback span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#d6f3ef}

/* Speed–Time Graph Explorer — motion graph */
.demo-visual.physics svg{width:78%;max-width:220px}
.demo-visual.physics span{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#d6f3ef;margin-top:10px}

/* Learning Analytics & Dashboards — bar chart */
.demo-visual.analytics{flex-direction:row;align-items:flex-end;gap:10px;padding-bottom:36px}
.demo-visual.analytics i{position:relative;display:block;width:20px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#7dd3fc,#4ee0cd)}

@media(max-width:620px){
  .demo-visual.workbook{padding:0 18px}
}

/* Assessment Analytics & Exam Centre — card thumbnail */
.demo-visual.examcentre{gap:8px;padding:0 20px}
.demo-visual.examcentre .ec-stat{font-size:1.5rem;font-weight:800;color:#fff}
.demo-visual.examcentre .ec-label{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#d6f3ef;margin-bottom:6px}
.demo-visual.examcentre .ec-bars{display:flex;gap:6px;align-items:flex-end;height:34px;margin-top:8px}
.demo-visual.examcentre .ec-bars i{display:block;width:14px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#7dd3fc,#4ee0cd)}