/* ==========================================================================
   v30-juphero, the case-study pages (work/<slug>/). Loaded after site.css
   and built only from its tokens: the same type scale, the same section
   rhythm (--sec, --sp-head), the same radii, the same motion.
   ========================================================================== */

/* ---- title block: name and line left, facts right ---------------------- */
.cs-title { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--sp-head) 60px; align-items: end;
            padding: calc(var(--head) + clamp(64px, 48.9px + 3.9vw, 104px)) var(--pad) 0; }
/* above the heading: Koulen's tall ascent lets the h1's box reach up over it */
.cs-live { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 20px;
           font-size: var(--t-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan);
           text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
           transition: text-decoration-thickness var(--dur-fast) ease-out, color var(--dur-fast) ease-out; }
.cs-live svg { width: 16px; height: 16px; flex: none; }
.cs-live:hover { color: var(--white); text-decoration-thickness: 2px; }
.cs-title h1 { max-width: 1100px; }
/* Oswald sets wider than Koulen did: at 375 the no-break "Sea Hardware" (6.2em) ran 3px past
   its column. On phones the heading is capped so a 6.3em line fits the column. */
@media (max-width: 480px) { .cs-title h1 { font-size: min(var(--t-hero), calc((100vw - 40px) / 6.3)); } }
.cs-title__line { margin-top: 20px; max-width: 640px; }
.cs-facts { display: grid; gap: 20px; margin: 0; padding-bottom: 8px; }
.cs-facts div { padding-top: 14px; border-top: 1px solid var(--line); }
.cs-facts dt { font-size: var(--t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t2); margin-bottom: 4px; }
.cs-facts dd { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--t1); }

/* ---- the full-bleed hero, cropped tight around the laptop -------------- */
.cs-hero { margin: var(--sec) 0 0; }
.cs-hero { padding: 0 var(--pad); }
.cs-hero img { display: block; width: 100%; max-width: 1400px; height: auto; margin: 0 auto; border-radius: var(--r-card); }

/* ---- label left, content right ------------------------------------------ */
.cs-block { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px var(--gap); padding: var(--sec) var(--pad) 0; }
.cs-label { font-size: var(--t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); padding-top: 10px; }
.cs-body { max-width: 900px; }
.cs-body > * + * { margin-top: 24px; }
.cs-body .t-title { max-width: 820px; }
.cs-lead { font-size: var(--t-state); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--white); }
.cs-body .cs-img { margin-top: var(--sp-head); }

/* ---- images ------------------------------------------------------------- */
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding: var(--sec) var(--pad) 0; }
.cs-img { border-radius: var(--r-card); overflow: hidden; background: var(--panel); box-shadow: var(--shadow-1); }
.cs-img img { width: 100%; height: auto; }
.cs-img--wide { grid-column: 1 / -1; }
.cs-img--phone { max-width: 390px; }

/* ---- the closing call to action ---------------------------------------- */
.cs-cta { position: relative; margin: var(--sec) var(--pad) 0; padding: var(--sec) var(--pad); border-radius: var(--r-card);
          text-align: center; overflow: hidden;
          background: radial-gradient(ellipse 60% 70% at 50% 110%, var(--glow), transparent 70%), var(--glass); box-shadow: var(--shadow-1); }
.cs-cta .btn { margin-top: var(--sp-head); }

/* ---- stack below 900 ---------------------------------------------------- */
@media (max-width: 899px) {
  .cs-title { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cs-block { grid-template-columns: minmax(0, 1fr); }
  .cs-label { padding-top: 0; }
  .cs-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .cs-cta { padding: var(--sec) 16px; }
}