/* ===== Case study pages (uses variables + base from style.css) ===== */
:root{
  --accent:#2F7BEA;        /* BluBank blue — case accent */
  --accent-ink:#1D5FC2;    /* accent for text on light tint */
  --accent-tint:#EAF2FD;   /* light blue background */
  --s1:#2a78d6; --s2:#eda100; --s3:#1baf7a; --s4:#eb6834; /* chart series (validated) */
}
.cs{max-width:1120px;margin:0 auto;padding:0 16px}
.cs-text{max-width:720px}
.cs p{font-size:16px;font-weight:500;line-height:1.65;color:var(--text)}
.cs p + p{margin-top:12px}
.cs strong{color:var(--ink);font-weight:600}

/* Hero */
.cs-hero{padding-top:150px}
.back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--muted);padding:8px 12px 8px 10px;border-radius:100px;background:var(--chip);transition:background .2s,color .2s}
.back:hover{background:#E8E8E8;color:var(--ink)}
.eyebrow{margin-top:28px;font-size:13px;font-weight:600;color:var(--accent-ink)}
.cs-hero h1{margin-top:8px;font-size:48px;letter-spacing:-.035em;line-height:1.1}
.cs-hero .lead{margin-top:16px;max-width:640px;font-size:18px;line-height:1.55;color:var(--text);font-weight:500}
.meta{margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.meta dt{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.meta dd{margin-top:6px;font-size:14px;font-weight:500;line-height:1.5}
.tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tools img{height:22px;width:auto}
.cover{position:relative;margin-top:40px;border-radius:24px;overflow:hidden;aspect-ratio:1088/560;background:#1b2433}
.cover > img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62)}
.cover .phone{position:absolute;left:50%;bottom:-38%;width:24%;transform:translateX(-50%);filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}

/* Section head (01, 02…) */
.chapter{padding-top:112px}
.ch-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:28px}
.ch-head h2{font-size:24px;font-weight:600;letter-spacing:-.02em}
.ch-head span{font-size:14px;font-weight:600;color:var(--muted)}

/* 01 About */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.about h3{margin-top:28px;font-size:14px;font-weight:600}
.about .tools{margin-top:12px}
.about .tools img{height:30px}
.phone-card{position:relative;border-radius:24px;background:radial-gradient(120% 70% at 50% 100%,#D6E5FB 0 55%,var(--accent-tint) 56%);padding:40px 0;display:grid;place-items:center}
.phone-card img{width:46%}

/* 02 Problem */
.story{display:grid;gap:28px}
.story-row{display:grid;grid-template-columns:1fr 280px;gap:48px;align-items:center}
.story-row.flip{grid-template-columns:280px 1fr}
.story-row.flip .circle{order:-1}
.circle{width:280px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--card)}
.circle img{width:100%;height:100%;object-fit:cover}
.story-row p{font-size:18px;line-height:1.6}
.callout{margin-top:44px;position:relative;border-radius:20px;background:var(--accent-tint);padding:32px 36px 32px 76px}
.callout::before{content:"“";position:absolute;left:26px;top:10px;font-size:72px;line-height:1;font-weight:700;color:var(--accent)}
.callout p{font-size:18px;line-height:1.6;color:var(--accent-ink)}
.callout strong{color:var(--accent-ink);font-weight:700}

/* 03 Process */
.process{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.step{padding:24px 20px;display:flex;flex-direction:column;min-height:240px}
.step + .step{border-left:1px solid var(--line)}
.step.current{background:var(--accent);color:#fff;border-color:var(--accent)}
.ring{width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*1%),#D6E2F5 0);-webkit-mask:radial-gradient(circle,transparent 7px,#000 8px);mask:radial-gradient(circle,transparent 7px,#000 8px)}
.step.current .ring{background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.35) 0)}
.step h3{margin-top:28px;font-size:16px;font-weight:600}
.step ul{list-style:none;margin-top:8px;font-size:13px;font-weight:500;line-height:1.6;color:var(--muted)}
.step.current ul{color:rgba(255,255,255,.85)}
.days{margin-top:auto;padding-top:24px;font-size:14px;font-weight:600}
.days small{font-size:12px;font-weight:500;opacity:.7}
.dots{display:flex;gap:3px;margin-bottom:6px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.step.current .dots i{background:#fff}

/* 04 Research */
.research{position:relative;margin-top:32px;border-radius:24px;overflow:hidden;aspect-ratio:1088/720}
.research > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.quotes{position:absolute;inset:0}
.q{position:absolute;max-width:330px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:12px;padding:12px 14px;font-size:13px;font-weight:500;line-height:1.5;color:var(--text);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.q b{color:var(--accent-ink);font-weight:600}
.charts{margin-top:24px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.chart{background:var(--card);border-radius:20px;padding:24px;display:grid;grid-template-columns:170px 1fr;gap:24px;align-items:center}
.chart h3{font-size:15px;font-weight:600;line-height:1.4;margin-bottom:12px}
.donut{position:relative;width:170px;height:170px}
.donut svg{width:100%;height:100%;display:block;overflow:visible}
.donut path{cursor:pointer;transition:opacity .2s}
.donut:hover path{opacity:.45}
.donut path:hover,.donut path.hl{opacity:1!important}
.donut .center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
.donut .center b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em}
.donut .center small{display:block;font-size:11px;font-weight:500;color:var(--muted);max-width:90px;line-height:1.3}
.legend{list-style:none;display:grid;gap:8px}
.legend li{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center;font-size:13px;font-weight:500;color:var(--text);border-radius:6px;cursor:default}
.legend li.dim{opacity:.45}
.legend i{width:10px;height:10px;border-radius:3px}
.legend span:last-child{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.chart.wide{grid-column:1/-1}
.tip{position:fixed;z-index:50;pointer-events:none;background:var(--ink);color:#fff;font-size:12px;font-weight:500;padding:6px 10px;border-radius:8px;opacity:0;transition:opacity .15s;white-space:nowrap}

/* 05 Persona */
.persona{margin-top:32px;background:var(--card);border-radius:24px;padding:28px}
.persona + .persona{margin-top:20px}
.p-top{display:grid;grid-template-columns:200px 1fr;gap:36px}
.p-photo{width:160px;aspect-ratio:1;border-radius:50%;overflow:hidden}
.p-photo img{width:100%;height:100%;object-fit:cover;object-position:top}
.facts{margin-top:16px;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px;font-weight:500}
.facts dt{color:var(--accent-ink);font-weight:600}
.facts dd{text-align:right}
.p-top h3,.p-col h3{font-size:13px;font-weight:600;color:var(--accent-ink)}
.p-top p{margin-top:8px}
.p-cols{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.p-col{background:var(--bg);border-radius:16px;padding:18px}
.p-col h3{display:inline-block;background:var(--accent);color:#fff;padding:5px 10px;border-radius:8px;font-size:12px}
.p-col ul{margin-top:12px;padding-left:18px;font-size:13px;font-weight:500;line-height:1.55;color:var(--text);display:grid;gap:6px}

/* 06 Empathy */
.empathy{margin-top:8px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.emp{position:relative;background:var(--card);border-radius:20px;padding:24px 24px 26px;margin-top:22px}
.emp img{position:absolute;right:16px;top:-26px;width:72px}
.emp h3{font-size:17px;font-weight:600}
.emp ul{margin-top:12px;padding-left:18px;font-size:15px;font-weight:500;line-height:1.55;color:var(--text);display:grid;gap:6px}

/* 07 Brainstorming */
.ideas{margin-top:32px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;counter-reset:idea}
.idea{border:1px dashed #D5D5D5;border-radius:16px;padding:20px 20px 20px 64px;position:relative;font-size:15px;font-weight:500;line-height:1.55;color:var(--text)}
.idea::before{counter-increment:idea;content:counter(idea);position:absolute;left:20px;top:18px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:600;display:grid;place-items:center}
.solution{margin-top:24px;border-radius:20px;background:var(--accent);color:#fff;padding:28px 32px}
.solution small{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.cs .solution p{margin-top:8px;color:#fff;font-size:18px;font-weight:600;line-height:1.55}

/* 08 Flow */
.flow{margin-top:32px;border:1px solid var(--line);border-radius:24px;padding:28px}
.flow svg{width:100%;height:auto;display:block}
.flow-m{display:none}

/* 09 / 10 Galleries */
.gallery{margin-top:32px;display:grid;gap:20px}
.gallery.wf{grid-template-columns:repeat(4,1fr)}
.gallery.vd{grid-template-columns:repeat(3,1fr);background:var(--card);border-radius:24px;padding:40px 48px;gap:36px 48px}
.gallery img{width:100%;height:auto}
.gallery figure{margin:0}
.gallery figcaption{margin-top:10px;text-align:center;font-size:13px;font-weight:500;color:var(--muted)}

/* Thanks + next */
.thanks{margin-top:120px;border-radius:28px;background:var(--accent);color:#fff;text-align:center;padding:64px 24px 0;overflow:hidden}
.thanks h2{font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.thanks .credit{display:flex;justify-content:center;align-items:flex-end;gap:24px;margin-top:28px}
.thanks .credit img{width:120px}
.thanks .credit p{padding-bottom:28px;font-size:14px;font-weight:500;line-height:1.6;color:rgba(255,255,255,.9)}
.next{margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--card);border-radius:24px;padding:24px 28px;transition:background .3s}
.next:hover{background:#EFEFEF}
.next small{font-size:12px;font-weight:600;color:var(--muted)}
.next h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.next .go{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:18px;transition:transform .3s}
.next:hover .go{transform:translateX(4px)}

@media (max-width:900px){
  .meta{grid-template-columns:repeat(2,1fr)}
  .charts{grid-template-columns:1fr}
  .process{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(3){border-left:0}
  .step:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:720px){
  .cs-hero{padding-top:32px}
  .cs-hero h1{font-size:36px}
  .cs-hero .lead{font-size:16px}
  .cover{aspect-ratio:4/3;border-radius:20px}
  .cover .phone{width:44%;bottom:-48%}
  .chapter{padding-top:80px}
  .ch-head h2{font-size:20px}
  .about{grid-template-columns:1fr}
  .story-row,.story-row.flip{grid-template-columns:1fr;gap:16px}
  .story-row .circle,.story-row.flip .circle{order:-1;width:200px;justify-self:center}
  .story-row p{font-size:16px}
  .callout{padding:56px 22px 22px}
  .callout::before{left:20px;top:6px}
  .callout p{font-size:16px}
  .process{grid-template-columns:1fr 1fr}
  .step{min-height:200px;padding:18px 16px}
  .research{aspect-ratio:4/3}
  .quotes{position:static;display:grid;gap:10px;margin-top:12px}
  .research-wrap .quotes{display:grid}
  .q{position:static;max-width:none;box-shadow:none;background:var(--card)}
  .chart{grid-template-columns:1fr;justify-items:center;padding:20px}
  .chart h3{text-align:center}
  .legend{width:100%}
  .p-top{grid-template-columns:1fr;gap:16px}
  .p-photo{width:140px}
  .p-cols{grid-template-columns:1fr}
  .persona{padding:20px}
  .empathy,.ideas{grid-template-columns:1fr}
  .flow svg{display:none}
  .flow-m{display:grid;gap:8px}
  .flow{padding:20px}
  .gallery.wf{grid-template-columns:repeat(2,1fr);gap:12px}
  .gallery.vd{grid-template-columns:repeat(2,1fr);padding:20px;gap:20px}
  .thanks{margin-top:88px;padding-top:44px}
  .thanks h2{font-size:32px}
  .thanks .credit{gap:8px}
  .thanks .credit img{width:72px}
  .thanks .credit p{font-size:12px;padding-bottom:16px}
}

/* Research quotes positioned over the photo (desktop) */
.research-wrap{position:relative;margin-top:32px}
.research-wrap .research{margin-top:0}
/* Mobile flow list */
.flow-m{list-style:none;counter-reset:none}
.flow-m li{border:1.5px solid var(--accent);border-radius:10px;padding:12px 14px;font-size:14px;font-weight:500;color:var(--accent-ink);text-align:center;position:relative}
.flow-m li + li{margin-top:14px}
.flow-m li + li::before{content:"↓";position:absolute;top:-21px;left:50%;transform:translateX(-50%);color:var(--accent);font-size:13px}
.flow-m .fm-end{background:var(--accent);color:#fff;border-radius:100px;font-weight:600}
.flow-m .fm-q{border-style:dashed}
.flow-m .fm-branch{border:0;background:var(--accent-tint);font-size:13px;line-height:1.5}
.flow-m .fm-branch b{color:var(--ink)}