/* ============================================================
   Case study pages — reference-style (bold sans, pastel cards,
   phones on stages, visual timeline). Extends styles.css.
   ============================================================ */
:root{
  --lav:#ECEBFB; --mint:#E5F0EA; --peach:#F8EDE4; --sky:#E7EEF7; --sage:#EDF1E4;
  --card-r:30px;
}
body{background:#EFEEF4}

.cs-sans{font-family:'Inter',sans-serif}
.cs-wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}

/* ---------- Hero ---------- */
.cs-hero{max-width:1280px;margin:0 auto;padding:clamp(120px,15vw,180px) var(--pad) 0}
.cs-back{font-size:14px;color:var(--muted);display:inline-block;margin-bottom:2.2rem;transition:color .3s}
.cs-back:hover{color:var(--accent)}
.cs-num{font-family:'Inter';font-weight:600;color:var(--accent);font-size:14px;
  letter-spacing:.16em;text-transform:uppercase}
.cs-title{font-family:'Inter';font-weight:800;line-height:.92;letter-spacing:-.03em;
  text-transform:uppercase;font-size:clamp(3rem,11vw,9rem);margin:.5rem 0 1.4rem}
.cs-lede{max-width:54ch;color:var(--ink-2);font-style:italic;font-weight:400;
  font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.5}
.cs-cover{border-radius:var(--card-r);overflow:hidden;margin-top:clamp(40px,6vw,64px);
  box-shadow:0 50px 90px -55px rgba(0,0,0,.4)}
.cs-cover img{width:100%;height:auto;display:block}

/* ---------- Facts ---------- */
.cs-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  max-width:1280px;margin:clamp(40px,5vw,60px) auto 0;padding:0 var(--pad)}
.cs-fact{border-top:2px solid var(--ink);padding-top:14px}
.cs-fact span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cs-fact strong{display:block;margin-top:6px;font-size:1.05rem;font-weight:700}

/* ---------- Big stats ---------- */
.cs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  max-width:1280px;margin:clamp(56px,8vw,90px) auto 0;padding:0 var(--pad)}
.cs-stat strong{display:block;font-family:'Inter';font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2.8rem,6vw,4.6rem);line-height:.95;color:var(--ink)}
.cs-stat span{display:block;margin-top:.5rem;font-style:italic;font-weight:500;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-size:14px}
@media(max-width:760px){.cs-stats{grid-template-columns:minmax(0,1fr);gap:34px}}

/* ---------- Section heading ---------- */
.cs-sec{max-width:1280px;margin:clamp(70px,9vw,120px) auto 0;padding:0 var(--pad)}
.cs-kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:1rem}
.cs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
.cs-h2{font-family:'Inter';font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1;max-width:18ch}
.cs-sub{font-style:italic;color:var(--muted);max-width:34ch;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.5}
.cs-text{max-width:62ch;color:var(--ink-2);font-size:1.05rem;line-height:1.7;margin-top:1rem}
.cs-text+.cs-text{margin-top:1rem}

.cs-list{list-style:none;margin:1.4rem 0 0;display:grid;gap:14px;max-width:62ch}
.cs-list li{padding-left:28px;position:relative;color:var(--ink-2);line-height:1.6}
.cs-list li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  background:var(--accent);transform:rotate(45deg)}

/* ---------- Pastel panel (stage for phones) ---------- */
.panel{border-radius:var(--card-r);padding:clamp(30px,5vw,72px);margin-top:clamp(28px,4vw,40px)}
.panel.lav{background:var(--lav)} .panel.mint{background:var(--mint)}
.panel.peach{background:var(--peach)} .panel.sky{background:var(--sky)} .panel.sage{background:var(--sage)}
.panel .cs-h2{margin-bottom:.6rem}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.panel-grid.rev .panel-copy{order:2}
.panel-copy p{color:var(--ink-2);line-height:1.7;margin-top:1rem;font-size:1.05rem}

/* phones on stage */
.stage{display:flex;align-items:center;justify-content:center}
.stage img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 40px 60px rgba(40,30,80,.22))}
.stage.tilt img{transform:rotate(-2deg)}

/* full-bleed phone band */
.band{margin-top:clamp(28px,4vw,40px);border-radius:var(--card-r);
  padding:clamp(34px,6vw,80px) clamp(20px,4vw,60px)}
.band .stage img{max-width:1050px;margin:0 auto}

/* ---------- Document cards (diagrams, research, wireframes) ---------- */
.doc{background:#fff;border-radius:var(--card-r);padding:clamp(18px,3vw,40px);
  margin-top:clamp(24px,3vw,36px);box-shadow:0 40px 70px -55px rgba(0,0,0,.35)}
.doc img{width:100%;height:auto;display:block;border-radius:10px}
.doc-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px)}
.doc-cap{font-size:13px;color:var(--muted);margin-top:1rem;text-align:center}
@media(max-width:820px){.doc-2,.panel-grid{grid-template-columns:minmax(0,1fr)}.panel-grid.rev .panel-copy{order:0}}

/* ---------- Double Diamond visual timeline ---------- */
.dd{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin-top:clamp(34px,5vw,56px)}
.dd::before{content:"";position:absolute;top:23px;left:8%;right:8%;height:2px;
  background:linear-gradient(90deg,var(--accent),#B9B7EC)}
.dd-step{position:relative;text-align:center;padding:0 6px}
.dd-node{width:48px;height:48px;margin:0 auto 20px;background:var(--accent);color:#fff;
  border-radius:14px;transform:rotate(45deg);display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 26px -12px rgba(91,91,214,.7)}
.dd-node span{transform:rotate(-45deg);font-weight:700;font-size:15px}
.dd-step h4{font-family:'Inter';font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:1.15rem;margin-bottom:.5rem}
.dd-step p{font-size:14px;color:var(--muted);line-height:1.55}
@media(max-width:760px){
  .dd{grid-template-columns:1fr 1fr;gap:34px 24px}
  .dd::before{display:none}
}

/* ---------- Video phones ---------- */
.phones{display:grid;gap:clamp(18px,3vw,34px)}
.phones.c3{grid-template-columns:repeat(3,1fr)}
.phones.c2{grid-template-columns:repeat(2,1fr)}
.phone{border-radius:36px;overflow:hidden;background:#0c0b10;padding:8px;
  box-shadow:0 50px 80px -45px rgba(40,30,80,.55)}
.phone video,.phone img{width:100%;height:auto;display:block;border-radius:28px}
@media(max-width:760px){.phones.c3{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.phones.c3,.phones.c2{grid-template-columns:minmax(0,1fr)}}

/* ---------- Browser frame (Haus long pages) ---------- */
.frame{border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 50px 80px -50px rgba(40,30,80,.5)}
.frame-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:#F0EFF6;
  border-bottom:1px solid #E2E1EC}
.frame-bar i{width:11px;height:11px;border-radius:50%;background:#cfceda}
.frame-bar i:nth-child(1){background:#E8918C}.frame-bar i:nth-child(2){background:#E8C98C}.frame-bar i:nth-child(3){background:#A9CBA0}
.frame-bar span{margin-left:12px;font-size:12px;color:var(--muted);background:#fff;
  border:1px solid #E2E1EC;border-radius:20px;padding:3px 14px}
.frame-win{max-height:78vh;overflow-y:auto}
.frame-win img{width:100%;height:auto;display:block}
.frame-win::-webkit-scrollbar{width:9px}.frame-win::-webkit-scrollbar-thumb{background:#cbcad6;border-radius:10px}
.frame-hint{font-size:12px;color:var(--muted);margin-top:.8rem;text-align:center;letter-spacing:.04em}

/* ---------- Pull quote ---------- */
.cs-pull{max-width:1000px;margin:clamp(60px,9vw,110px) auto 0;padding:0 var(--pad);text-align:center}
.cs-pull p{font-family:'Inter';font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.5rem,4vw,3rem);line-height:1.08}
.cs-pull em{font-style:normal;color:var(--accent)}
.cs-pull cite{display:block;margin-top:1.2rem;font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;font-size:15px;color:var(--muted)}

/* ---------- Disclosure (collapsed research) ---------- */
.cs-disclosure{margin-top:clamp(24px,3vw,36px);border:1px solid #DEDDE7;border-radius:20px;
  background:#fff;overflow:hidden}
.cs-disclosure+.cs-disclosure{margin-top:16px}
.cs-d-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(18px,2.4vw,26px) clamp(20px,3vw,30px);cursor:pointer;list-style:none;
  font-family:'Inter';font-weight:700;font-size:clamp(.95rem,1.4vw,1.1rem);
  transition:background .3s var(--ease)}
.cs-d-summary::-webkit-details-marker{display:none}
.cs-d-summary:hover{background:#FAFAFD}
.cs-d-label{display:flex;align-items:center;gap:12px}
.cs-d-tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:600;background:#F0EFF6;border-radius:20px;padding:4px 11px}
.cs-d-chev{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:#F0EFF6;color:var(--ink);flex-shrink:0;
  transition:transform .4s var(--ease),background .3s}
.cs-d-chev svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.cs-disclosure[open] .cs-d-chev{background:var(--accent);color:#fff}
.cs-disclosure[open] .cs-d-chev svg{transform:rotate(180deg)}
.cs-d-body-inner{overflow:hidden;transition:max-height .45s var(--ease)}
.cs-d-body-pad{padding:0 clamp(20px,3vw,30px) clamp(26px,3.6vw,36px)}
.cs-d-body-pad>.cs-text:first-child{margin-top:0}
.cs-d-body-pad .doc,.cs-d-body-pad .doc-2{margin-top:clamp(18px,2.4vw,26px)}

/* ---------- Next ---------- */
.cs-next{max-width:1280px;margin:clamp(70px,10vw,130px) auto 0;padding:clamp(50px,7vw,90px) var(--pad);
  border-top:1px solid #DEDDE7;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cs-next a{font-family:'Inter';font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.6rem,5vw,3.4rem);transition:color .3s}
.cs-next a:hover{color:var(--accent)}
.cs-next span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.cs-linkbtn{display:inline-block;margin-top:1.4rem;background:var(--ink);color:#fff;
  font-weight:600;font-size:15px;padding:13px 26px;border-radius:40px;transition:.35s var(--ease)}
.cs-linkbtn:hover{background:var(--accent);transform:translateY(-2px)}

@media(max-width:880px){.cs-facts{grid-template-columns:1fr 1fr}}

/* Inline white-space:nowrap forces single-line copy on desktop; on narrow
   screens it has nothing to shrink into and forces page-wide horizontal
   overflow (the mobile "zoomed in / scrolls past the edge" bug). Let it
   wrap again below the point where columns stack. */
@media(max-width:820px){[style*="white-space:nowrap"]{white-space:normal!important}}