/* ════════════════════════════════════════════
   CASE STUDY CSS · Shared across all 5 studies
══════════════════════════════════════════════ */

/* HERO BANNER */
.cs-hero{
  background:linear-gradient(135deg,#1565C0 0%,#003580 100%);
  color:#fff;padding:4rem 2rem 3.5rem;
  position:relative;overflow:hidden
}
.cs-hero.purple{background:linear-gradient(135deg,#1A0A3B,#2D1065)}
.cs-hero.green{background:linear-gradient(135deg,#0D2D1A,#0F6E56)}
.cs-hero.pink{background:linear-gradient(135deg,#E91E8C,#003580)}
.cs-hero.dark{background:linear-gradient(135deg,#0D1B2A,#1A3A5C)}
.cs-hero::before{
  content:'';position:absolute;top:-100px;right:-80px;
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%)
}
.cs-hero-in{max-width:1100px;margin:0 auto;position:relative;z-index:2}
.cs-back-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8125rem;color:rgba(255,255,255,.7);
  margin-bottom:1.5rem;transition:color .15s
}
.cs-back-link:hover{color:#fff}
.cs-eyebrow{
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-bottom:1rem;font-weight:600
}
.cs-title{
  font-family:'Fraunces',serif;
  font-size:clamp(2.25rem,4.5vw,3.5rem);
  font-weight:400;line-height:1.05;
  letter-spacing:-.02em;margin-bottom:1rem
}
.cs-title em{font-style:italic;color:rgba(255,255,255,.65);font-weight:300}
.cs-sub{
  font-size:1rem;color:rgba(255,255,255,.75);
  font-weight:300;line-height:1.75;
  max-width:620px;margin-bottom:2rem
}
.cs-meta{
  display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.15)
}
.hm-label{
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:.25rem;font-weight:600
}
.hm-value{font-size:.9375rem;font-weight:500;color:#fff}
.cs-external-link{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.15);color:#fff;
  padding:.5rem 1rem;border-radius:100px;
  font-size:.8125rem;font-weight:500;
  border:1px solid rgba(255,255,255,.2);
  margin-top:1rem
}
.cs-external-link:hover{background:rgba(255,255,255,.25)}

/* OBJECTIVES */
.obj-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.75rem;margin-top:1.5rem
}
.obj-item{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:1rem 1.125rem;background:#fafafa;
  border-radius:6px;border:1px solid #efefef;
  transition:border-color .15s,transform .15s
}
.obj-item:hover{border-color:#1565C0;transform:translateY(-1px)}
.obj-num{
  font-family:'Fraunces',serif;font-size:1.125rem;
  color:#1565C0;font-weight:600;line-height:1;
  flex-shrink:0;width:24px
}
.obj-text{font-size:.875rem;font-weight:500;color:#1c1c1c;line-height:1.4}

/* CHALLENGE / SOLUTION */
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem}
.cs-card{padding:1.75rem;border-radius:8px}
.cs-card.challenge{background:#FFF5F5;border:1px solid #FFE0E0}
.cs-card.solution{background:#F0FFF8;border:1px solid #C9EBD9}
.cs-card-h{
  font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;margin-bottom:.625rem
}
.cs-card.challenge .cs-card-h{color:#C0392B}
.cs-card.solution .cs-card-h{color:#0F6E56}
.cs-card-title{
  font-family:'Fraunces',serif;font-size:1.25rem;
  font-weight:500;color:#1c1c1c;margin-bottom:.75rem;line-height:1.3
}
.cs-card-body{font-size:.9375rem;color:#444;line-height:1.75;font-weight:300}

/* HEX GRID for pain/ideas */
.hex-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1rem;margin-top:1.5rem
}
.hex{
  padding:1.5rem 1.125rem;border-radius:8px;
  text-align:center;transition:transform .2s
}
.hex:hover{transform:translateY(-3px)}
.hex.pain{background:linear-gradient(135deg,#FFF5F5,#FFE5E5);border:1px solid #FFCDD2}
.hex.idea{background:linear-gradient(135deg,#E5F5FF,#CDE5FF);border:1px solid #B5CFEB}
.hex-icon{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.8);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto .75rem;font-size:1rem;font-weight:700;color:#1c1c1c
}
.hex-title{font-size:.875rem;font-weight:600;color:#1c1c1c;line-height:1.35}

/* ROLES & RESPONSIBILITIES */
.rr-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;
  margin-top:1.5rem;align-items:start
}
.rr-list{list-style:none}
.rr-list li{
  display:flex;align-items:center;gap:.875rem;
  padding:1rem 0;border-bottom:1px solid #f0f0f0;
  font-size:.9375rem;color:#1c1c1c;font-weight:500
}
.rr-list li:last-child{border-bottom:none}
.rr-icon{
  width:32px;height:32px;border-radius:6px;
  background:#EBF5FC;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;color:#1565C0
}
.rr-tools{display:flex;flex-direction:column;gap:.875rem}
.rr-tool{
  display:flex;gap:1rem;padding:1.25rem;
  background:#fafafa;border-radius:8px;
  border:1px solid #efefef;align-items:center
}
.rr-tool-logo{
  width:48px;height:48px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.25rem;flex-shrink:0
}
.rr-tool-logo.figma{background:#1c1c1c;color:#fff}
.rr-tool-logo.axure{background:#fff;color:#FF5722;border:2px solid #FF5722}
.rr-tool-name{
  font-size:1rem;font-weight:600;color:#1c1c1c;
  margin-bottom:.2rem;font-family:'Fraunces',serif
}
.rr-tool-desc{font-size:.8125rem;color:#666;line-height:1.5;font-weight:300}

/* REVAMPED SCREEN BEFORE/AFTER */
.revamp-header{
  background:#1565C0;color:#fff;padding:1rem 1.5rem;
  border-radius:6px;margin:1.5rem 0 2rem;
  display:flex;align-items:center;gap:.75rem
}
.revamp-header.green{background:#0F6E56}
.revamp-header h3{
  font-family:'Fraunces',serif;font-size:1.25rem;
  font-weight:500;line-height:1
}
.revamp-header .tag{
  font-size:.625rem;background:rgba(255,255,255,.2);
  padding:.25rem .65rem;border-radius:100px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:600
}
.screen-block{margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px dashed #e8e8e8}
.screen-block:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.screen-name{
  font-family:'Fraunces',serif;font-size:1.375rem;
  font-weight:500;color:#1c1c1c;margin-bottom:.625rem
}
.screen-desc{
  font-size:.9375rem;color:#666;line-height:1.7;
  font-weight:300;margin-bottom:1rem;max-width:780px
}
.screen-changes{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.change-pill{
  font-size:.75rem;background:#EBF5FC;color:#1565C0;
  padding:.3rem .75rem;border-radius:100px;
  font-weight:500;border:1px solid #C8DFF0
}
.cs-fig{margin:1.5rem 0 0;border-radius:8px;overflow:hidden;border:1px solid #efefef;background:#fafafa}
.cs-fig img{display:block;width:100%;height:auto}
.cs-fig figcaption{
  font-size:.75rem;color:#666;padding:.625rem 1rem;border-top:1px solid #efefef;background:#fff
}
.cs-fig-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:720px){.cs-fig-grid{grid-template-columns:1fr}}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.compare-side{
  border-radius:8px;overflow:hidden;
  border:1px solid #efefef;background:#fafafa
}
.compare-label{
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;padding:.625rem 1rem;border-bottom:1px solid #efefef
}
.compare-side.old .compare-label{background:#3a3a3a;color:#fff}
.compare-side.new .compare-label{background:#0F6E56;color:#fff}
.compare-svg{
  padding:1rem;background:#fff;min-height:200px;
  display:flex;align-items:center;justify-content:center
}
.compare-svg svg{width:100%;height:auto;display:block;max-height:200px}

/* WCAG / ACCESSIBILITY BAR */
.acc-bar{
  background:#1c1c1c;color:#fff;padding:1.25rem 1.75rem;
  border-radius:8px;margin:1.5rem 0 2rem;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem
}
.acc-bar-h{
  font-family:'Fraunces',serif;font-size:1.125rem;
  font-weight:500;margin-bottom:.2rem
}
.acc-bar-sub{font-size:.875rem;color:rgba(255,255,255,.6);font-weight:300}
.acc-badge{
  background:#5DCAA5;color:#0D2D1A;padding:.4rem 1rem;
  border-radius:100px;font-size:.75rem;font-weight:700;letter-spacing:.08em
}
.acc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.5rem}
.acc-fail{
  padding:1.5rem 1.25rem;background:#fafafa;
  border-radius:8px;border:1px solid #efefef;text-align:center
}
.acc-fail-icon{
  width:44px;height:44px;border-radius:50%;
  background:#1c1c1c;color:#fff;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto .875rem;font-size:1.125rem
}
.acc-fail-title{font-size:.9375rem;font-weight:600;color:#1c1c1c;margin-bottom:.4rem}
.acc-fail-desc{font-size:.8125rem;color:#666;line-height:1.6;font-weight:300}

/* CONCLUSION */
.conclusion-card{
  background:linear-gradient(135deg,#1565C0 0%,#003580 100%);
  color:#fff;padding:3rem 2.5rem;border-radius:10px;
  margin-top:1.5rem;position:relative;overflow:hidden
}
.conclusion-card::before{
  content:'';position:absolute;top:-60px;right:-60px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%)
}
.cc-eyebrow{
  font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7);font-weight:600;margin-bottom:.75rem;position:relative;z-index:2
}
.cc-h{
  font-family:'Fraunces',serif;font-size:1.625rem;
  font-weight:500;color:#fff;margin-bottom:1.125rem;
  line-height:1.25;position:relative;z-index:2
}
.conclusion-card p{
  font-size:.9375rem;color:rgba(255,255,255,.8);
  line-height:1.85;font-weight:300;
  margin-bottom:1rem;position:relative;z-index:2
}

/* PERSONA */
.persona-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem}
.persona{
  border:1px solid #efefef;border-radius:8px;padding:1.75rem
}
.persona-role{
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;margin-bottom:.25rem
}
.persona.admin .persona-role{color:#E91E8C}
.persona.student .persona-role{color:#00BCD4}
.persona-name{
  font-family:'Fraunces',serif;font-size:1.5rem;
  font-weight:500;color:#1c1c1c;margin-bottom:.25rem
}
.persona-tag{font-size:.8125rem;color:#888;margin-bottom:1rem}
.persona-body{font-size:.9rem;color:#555;line-height:1.75;font-weight:300}
.persona-quote{
  font-size:.875rem;font-style:italic;color:#777;
  margin-top:1rem;padding-top:1rem;
  border-top:1px solid #f0f0f0
}

/* PAIN POINTS WITH SOLUTIONS (REMS style) */
.pp-list{margin-top:1.5rem}
.pp-item{
  display:grid;grid-template-columns:80px 1fr;gap:1.5rem;
  padding:1.5rem;background:#fafafa;border-radius:8px;
  margin-bottom:1rem;border:1px solid #efefef
}
.pp-num{
  font-family:'Fraunces',serif;font-size:2rem;
  color:#00BCD4;font-weight:400;line-height:1;
  border-right:1px solid #efefef;padding-right:1.5rem
}
.pp-content h4{
  font-size:.875rem;font-weight:600;
  color:#00BCD4;margin-bottom:.375rem;
  text-transform:uppercase;letter-spacing:.08em
}
.pp-problem{
  font-size:.9375rem;color:#444;line-height:1.7;
  font-weight:300;margin-bottom:.875rem
}
.pp-solution-label{
  font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:#0F6E56;font-weight:700;margin-bottom:.25rem
}
.pp-solution{font-size:.9375rem;color:#0F6E56;line-height:1.7;font-weight:400}

/* USER FLOW DIAGRAM */
.flow-diagram{
  background:#1c1c1c;border-radius:10px;padding:2.5rem 2rem;
  margin-top:1.5rem;overflow-x:auto
}
.flow-diagram svg{display:block;max-width:100%;height:auto;margin:0 auto}

/* COLOURS & TYPOGRAPHY */
.swatch-grid{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.cs-swatch{
  border-radius:6px;padding:1.25rem 1.5rem;min-width:120px;
  flex:1;min-height:90px;display:flex;flex-direction:column;justify-content:flex-end
}
.cs-swatch .sw-hex{
  font-size:.6875rem;color:rgba(255,255,255,.7);
  margin-bottom:.2rem;font-weight:500;letter-spacing:.05em
}
.cs-swatch .sw-name{font-size:.875rem;font-weight:600;color:#fff}
.typo-card{
  margin-top:1.5rem;padding:2rem;background:#1c1c1c;color:#fff;
  border-radius:10px
}
.typo-name{
  font-family:'Fraunces',serif;font-size:3rem;
  font-weight:400;line-height:1;margin-bottom:.5rem
}
.typo-tag{font-size:.875rem;color:rgba(255,255,255,.6);margin-bottom:1rem}
.typo-specimens{display:flex;gap:1.5rem;font-size:.8125rem;color:rgba(255,255,255,.75)}

/* MODULES */
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.125rem;margin-top:1.5rem}
.mod-card{
  background:#fafafa;border:1px solid #efefef;
  border-radius:8px;padding:1.5rem;border-left:3px solid #E91E8C
}
.mod-card.teal{border-left-color:#00BCD4}
.mod-h{font-size:.95rem;font-weight:600;color:#1c1c1c;margin-bottom:.375rem}
.mod-p{font-size:.8125rem;color:#666;line-height:1.65;font-weight:300}
.mod-role{
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.09em;
  color:#00BCD4;font-weight:600;margin-top:.625rem
}

/* CANDIDATE ADVISORY */
.ca-flow-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  border:1px solid #efefef;border-radius:8px;overflow:hidden;
  background:#fff;margin:.875rem 0
}
.ca-flow-s{
  padding:1.125rem .875rem;border-right:1px solid #efefef;text-align:center
}
.ca-flow-s:last-child{border-right:none}
.fs-n{
  width:28px;height:28px;border-radius:50%;
  background:#003580;color:#fff;font-size:.75rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto .5rem
}
.fs-h{font-size:.8125rem;font-weight:600;color:#1c1c1c;margin-bottom:.25rem;line-height:1.3}
.fs-d{font-size:.7rem;color:#888;line-height:1.4}

/* ELECTION MGMT */
.process-timeline{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.5rem}
.process-step{
  display:flex;flex-direction:column;gap:1rem;padding:2rem;
  background:#fafafa;border-radius:8px;border:1px solid #efefef
}
.process-step:last-child{border-bottom:inherit}
.ps-num{
  font-family:'Fraunces',serif;font-size:2.25rem;
  color:#5DCAA5;font-weight:400;line-height:1
}
.ps-h{font-size:1.125rem;font-weight:600;color:#1c1c1c;margin-bottom:.25rem}
.ps-p{font-size:.9375rem;color:#555;line-height:1.75;font-weight:300;margin-bottom:1rem}

/* QUOTES (user interviews) */
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:1.5rem}
.quote-card{
  background:#fafafa;border-radius:8px;padding:1.5rem;
  border-left:3px solid #1565C0;font-size:.95rem;
  color:#444;line-height:1.75;font-weight:300;font-style:italic
}
.quote-card::before{
  content:'"';font-family:'Fraunces',serif;font-size:2.5rem;
  color:#1565C0;line-height:.5;display:inline-block
}
.quote-attribution{
  display:block;font-style:normal;font-size:.8125rem;
  color:#888;margin-top:.75rem;font-weight:500
}

/* TAKEAWAY CARDS */
.takeaway-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:1.5rem}
.take-card{
  padding:1.75rem;background:linear-gradient(135deg,#fafafa,#fff);
  border-radius:8px;border:1px solid #efefef
}
.take-num{
  font-family:'Fraunces',serif;font-size:1.5rem;color:#1565C0;margin-bottom:.5rem
}
.take-h{font-size:1rem;font-weight:600;color:#1c1c1c;margin-bottom:.5rem}
.take-p{font-size:.875rem;color:#555;line-height:1.7;font-weight:300}

/* FIGMA EMBED */
.figma-section{margin-top:1.5rem}
.figma-box{
  background:linear-gradient(135deg,#fafafa,#f0f0f0);
  border:1px dashed #d0d0d0;border-radius:8px;
  padding:2.5rem;text-align:center
}
.figma-box-h{
  font-family:'Fraunces',serif;font-size:1.25rem;color:#1c1c1c;margin-bottom:.5rem
}
.figma-box-p{font-size:.875rem;color:#666;margin-bottom:1.25rem;line-height:1.7;font-weight:300}
.figma-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#1c1c1c;color:#fff;padding:.65rem 1.5rem;
  border-radius:100px;font-size:.875rem;font-weight:500
}

/* IMPACT METRICS */
.impact-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:1.5rem;border:1px solid #efefef;
  border-radius:8px;overflow:hidden
}
.impact-cell{padding:1.5rem;text-align:center;border-right:1px solid #efefef}
.impact-cell:last-child{border-right:none}
.impact-n{
  font-family:'Fraunces',serif;font-size:2rem;font-weight:400;
  color:#1c1c1c;margin-bottom:.25rem
}
.impact-l{font-size:.8125rem;color:#888;line-height:1.4}

/* PRODUCT ADMIN COLOUR PALETTE */
.pa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin-top:1.5rem}
.pa-swatch{border-radius:6px;overflow:hidden;border:1px solid #efefef}
.pa-color{
  height:80px;display:flex;align-items:flex-end;padding:.625rem .75rem
}
.pa-info{padding:.625rem .75rem;background:#fff}
.pa-hex{font-size:.6875rem;color:#999;font-weight:500;letter-spacing:.05em}
.pa-name{font-size:.8125rem;color:#1c1c1c;font-weight:600;margin-top:.15rem}
.pa-meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;
  margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #efefef
}
.pa-meta-cell{padding:1rem;background:#fafafa;border-radius:6px;border:1px solid #efefef}
.pa-meta-label{font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:#a0a0a0;font-weight:600;margin-bottom:.3rem}
.pa-meta-val{font-size:.9rem;font-weight:600;color:#1c1c1c}

/* RESPONSIVE */
@media(max-width:780px){
  .cs-hero{padding:3rem 1.25rem 2.5rem}
  .cs-grid,.rr-grid,.persona-grid,.quote-grid,.takeaway-grid,.process-timeline{grid-template-columns:1fr;gap:1.25rem}
  .hex-grid{grid-template-columns:repeat(2,1fr)}
  .acc-grid{grid-template-columns:repeat(2,1fr)}
  .compare{grid-template-columns:1fr;gap:.75rem}
  .pa-meta{grid-template-columns:1fr}
  .mod-grid{grid-template-columns:1fr}
  .ca-flow-grid{grid-template-columns:repeat(3,1fr)}
  .ca-flow-s{border-right:none;border-bottom:1px solid #efefef}
  .impact-row{grid-template-columns:repeat(2,1fr)}
  .impact-cell:nth-child(2){border-right:none}
  .impact-cell:nth-child(3),.impact-cell:nth-child(4){border-top:1px solid #efefef}
}
@media(max-width:480px){
  .hex-grid,.acc-grid{grid-template-columns:1fr}
  .ca-flow-grid{grid-template-columns:1fr}
}