/* Case study (Figma C7b desktop blueprint page, M2 case study on a phone). Also loaded by the Work page,
   whose dialog shows this same article. Loaded after site-v3.css. */
.cs{background:#fff;color:var(--v3-ink)}
.cs *{box-sizing:border-box}
.cs-m{display:none}

/* ───────── hero ───────── */
.cs-hero{position:relative;overflow:hidden;padding:48px var(--v3-edge) 0;background:radial-gradient(90% 60% at 30% 0%,#173043 0%,#0f2030 55%,#0b1822 100%);color:#fff}
.cs-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:48px;align-items:start}
.cs-crumb{display:flex;flex-wrap:wrap;gap:8px;font:500 11px/normal var(--mono);letter-spacing:1.7px;text-transform:uppercase;color:var(--v3-blue-lite)}
.cs-crumb a{color:inherit;text-decoration:none}
.cs-crumb a:hover{text-decoration:underline}
.cs-crumb i{font-style:normal;opacity:.7}
.cs-hero h1{margin:16px 0 0;max-width:760px;font-size:48px;line-height:1.08;letter-spacing:-1.2px;font-weight:700;color:#fff}
.cs-sum{margin:16px 0 0;max-width:620px;font-size:18px;line-height:1.5;color:#c4d0dc}
.cs-share{display:flex;align-items:center;gap:12px;margin-top:20px}
.cs-copy{padding:9px 14px;border:1px solid rgba(91,155,213,.5);border-radius:8px;background:transparent;font:600 13px var(--f);color:#fff;cursor:pointer}
.cs-copy:hover{background:rgba(91,155,213,.14)}
.cs-share [data-copy-status]{font-size:13px;color:var(--v3-mute-dark)}
.cs-spec{margin:0;border:1px solid rgba(91,155,213,.55);background:rgba(11,24,34,.55)}
.cs-spec>div{display:grid;grid-template-columns:86px minmax(0,1fr);border-bottom:1px solid rgba(91,155,213,.3)}
.cs-spec>div:last-child{border-bottom:0}
.cs-spec dt{padding:9px 10px;border-right:1px solid rgba(91,155,213,.3);font:500 10px/1.6 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--v3-blue-lite)}
.cs-spec dd{margin:0;padding:9px 12px;font:500 12px/1.5 var(--mono);letter-spacing:.8px;text-transform:uppercase;color:#fff}
.cs-lead{position:relative;z-index:2;display:grid;grid-template-columns:1fr;margin:44px 0 0;border:1px solid rgba(91,155,213,.5);border-bottom:0}
.cs-lead.is-pair{grid-template-columns:1fr 1fr}
.cs-lead-cell{position:relative;height:520px;background:#0a131d;overflow:hidden}
.cs-lead-cell+.cs-lead-cell{border-left:1px solid rgba(255,255,255,.4)}
.cs-lead-cell img,.cs-lead-cell video{display:block;width:100%;height:100%;object-fit:cover}
.cs-lead-tag{position:absolute;left:14px;bottom:14px;padding:5px 10px;border-radius:4px;background:rgba(8,16,23,.8);font:500 11px/normal var(--mono);letter-spacing:1px;color:#fff}
.cs-chip{position:absolute;z-index:3}
.cs-chip-1{left:24px;top:24px}
.cs-chip-2{right:40px;bottom:44px}
.cs-chip-3{left:24px;bottom:24px}

/* ───────── notes + technical details ───────── */
.cs-notes{position:relative;background-color:var(--v3-surface);background-image:linear-gradient(rgba(15,32,48,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,32,48,.035) 1px,transparent 1px);background-size:40px 40px;padding-block:64px 72px}
.cs-notes-in{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:56px;align-items:start}
.cs-story ol{display:grid;gap:26px;margin:28px 0 0;padding:0;list-style:none}
.cs-story li{display:flex;gap:18px}
.cs-story .n{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1.5px solid var(--v3-ink);border-radius:50%;font-size:14px;font-weight:600}
.cs-story small{display:block;margin-bottom:6px;font:500 10.5px/normal var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--v3-blue)}
.cs-story p{margin:0;max-width:60ch;font-size:17px;line-height:1.55;color:var(--v3-ink)}
.cs-tech{border:1.5px solid var(--v3-navy);background:#fff}
.cs-tech h2{margin:0;padding:14px 18px;background:var(--v3-navy);font:500 11px/normal var(--mono);letter-spacing:1.8px;text-transform:uppercase;color:#fff}
.cs-tech dl{margin:0}
.cs-tech dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 18px;border-bottom:1px solid var(--v3-line)}
.cs-tech dt{font:500 10.5px/normal var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--v3-muted)}
.cs-tech dd{margin:0;font-size:14px;font-weight:700;text-align:right;color:var(--v3-ink)}
.cs-tech p{margin:0;padding:12px 18px;font-size:12px;color:var(--v3-muted)}

/* ───────── views, neighbours, others, CTA ───────── */
.cs-views{position:relative;padding-block:56px}
.cs-views .v3-eyebrow{position:relative;z-index:1}
.cs-views-k{color:var(--v3-blue-lite)!important}
.cs-d{display:inline}
.cs-views-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:20px}
.cs-view{margin:0}
.cs-view img{display:block;width:100%;aspect-ratio:392/260;object-fit:cover;border:1px solid rgba(91,155,213,.55);background:#0a131d}
.cs-view.is-cad img{object-fit:contain;background:#3a434d}
.cs-view figcaption{margin-top:10px;font:500 11px/normal var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#c4d0dc}
.cs-more{padding-block:48px 64px;border-top:1px solid #1d3248}
.cs-nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cs-nav-link{display:grid;gap:3px;padding:12px 16px;border:1px solid #2a4560;border-radius:8px;background:#102538;font-size:15px;font-weight:600;color:#fff;text-decoration:none}
.cs-nav-link small{font:500 10px/normal var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--v3-blue-lite)}
.cs-nav-link.is-next{text-align:right}
.cs-others{margin-top:36px}
.cs-others-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.cs-others-head h2{margin:12px 0 0;font-size:32px;line-height:1.1;font-weight:700;color:#fff}
.cs-filter{margin:0;font-size:14px;color:var(--v3-rust-lite)}
.cs-filter a{color:inherit;text-decoration:none}
.cs-filter a:hover{text-decoration:underline}
.cs-cta{padding-block:56px 72px;border-top:1px solid #1d3248}
.cs-cta h2{margin:0;font-size:32px;font-weight:700;color:#fff}
.cs-cta p{margin:12px 0 22px;font-size:17px;color:var(--v3-mute-dark)}

@media (max-width:1100px){
  .cs-hero-in{grid-template-columns:minmax(0,1fr)}
  .cs-spec{max-width:420px}
  .cs-lead-cell{height:380px}
  .cs-notes-in{grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:32px}
  .cs-story p{font-size:16px}
  .cs-views-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ───────── phone (M2) ───────── */
@media (max-width:700px){
  .cs-hero,.cs-notes,.cs-d{display:none}
  .cs-m{display:block}
  span.cs-m{display:inline}
  .cs-views-k{color:var(--v3-rust-lite)!important}
  .cs-m-body{background:var(--v3-navy);color:#fff}
  .cs-m-hero{position:relative;overflow:hidden;min-height:600px;padding:0 20px 24px;display:flex;flex-direction:column}
  .cs-m-hero>img{position:absolute;left:0;top:0;width:100%;height:100%!important;object-fit:cover}
  .cs-m-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,32,48,.5) 0%,rgba(15,32,48,0) 22%,rgba(15,32,48,0) 38%,rgba(15,32,48,.92) 74%,#0f2030 100%)}
  .cs-m-top{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-size:15px;font-weight:600}
  .cs-m-top a{color:#fff;text-decoration:none}
  .cs-m-top span{font:500 12px/normal var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--v3-rust-lite)}
  /* The chips sit in flow 340px down and the copy takes the rest, so a long headline or summary pushes the
     hero taller instead of sliding the copy up under the chips (iPhone report, solenoid case). */
  .cs-m-chips{position:relative;z-index:2;margin:340px -20px 0;display:grid;justify-items:center;gap:12px}
  .cs-m-chips .dim{position:static;border-radius:999px;padding:6px 12px;font-size:10.5px}
  .cs-m-copy{position:relative;z-index:2;margin-top:auto;padding-top:24px}
  .cs-m-copy>p:first-child{margin:0;font:500 11px/normal var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--v3-rust-lite)}
  .cs-m-copy .mh{display:block;margin:12px 0 0;font-size:28px;line-height:1.1;letter-spacing:-.7px;font-weight:700;color:#fff}
  .cs-m-copy .sum{margin:14px 0 0;font-size:16px;line-height:1.45;color:#dfe7ee}
  .cs-m-compare{padding:12px 20px 8px}
  .cs-m-compare .v3-eyebrow{color:var(--v3-rust-lite);margin-bottom:14px}
  .cs-m-slider{position:relative;height:300px;overflow:hidden;border:1px solid #2a4560;border-radius:16px;background:#0a131d;--pos:50%;cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .cs-m-slider>img,.cs-m-before img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .cs-m-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0);border-right:2px solid #fff}
  .cs-m-pill{position:absolute;top:12px;z-index:2;padding:4px 10px;border-radius:999px;font:500 10px/normal var(--mono);letter-spacing:1px}
  .cs-m-pill--l{left:12px;background:rgba(255,255,255,.92);color:var(--v3-navy)}
  .cs-m-pill--r{right:12px;background:var(--v3-rust);color:#fff}
  .cs-m-handle{position:absolute;top:50%;left:var(--pos);z-index:3;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.35)}
  .cs-m-handle::after{content:"\2039 \203a";position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:700;color:var(--v3-navy);letter-spacing:2px}
  .cs-m-slider input{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
  .cs-m-slider:has(input:focus-visible) .cs-m-handle{outline:3px solid var(--v3-rust-lite);outline-offset:2px}
  .cs-m-slider img{pointer-events:none;-webkit-user-drag:none}
  .cs-m-notes{display:grid;gap:12px;padding:20px}
  .cs-m-note{display:flex;gap:14px;padding:16px;border:1px solid #21384e;border-radius:12px;background:#102538}
  .cs-m-note .n{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--v3-rust);font-size:13px;font-weight:700}
  .cs-m-note small{display:block;margin-bottom:5px;font:500 10px/normal var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--v3-blue-lite)}
  .cs-m-note p{margin:0;font-size:16px;line-height:1.45;color:#f4f7fa}
  .cs-m-facts{padding:28px 20px;background:#fff}
  .cs-m-facts .hm-facts{margin:0}
  .cs-views{padding:28px 20px}
  .cs-views-grid{display:flex;gap:12px;overflow-x:auto;margin:16px -20px 0;padding:0 20px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .cs-views-grid::-webkit-scrollbar{display:none}
  .cs-view{flex:0 0 70%;scroll-snap-align:start}
  .cs-view img{border-radius:12px}
  .cs-more{padding:24px 20px 28px}
  .cs-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .cs-nav .cs-all{grid-column:1/-1;grid-row:2;justify-content:center;background:transparent;border:1.5px solid #2a4560;box-shadow:none}
  .cs-others{display:none}
  .cs-cta{display:none}
}
.cs-notes-in>.cs-tech:only-child{grid-column:1;max-width:620px}