/* The studio page. Built on brand.css, with a little of its own. */
.bhero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.6rem; }
.cta {
  display: inline-flex; align-items: center; height: 42px; padding: 0 20px;
  border-radius: 10px; background: var(--red); border: 1px solid var(--red); color: #fff;
  font-size: .92rem; font-weight: 600; text-decoration: none;
}
.cta--ghost { background: none; border-color: var(--line-strong); color: var(--ink); }
.cta:hover { filter: brightness(1.06); }

.svcs { display: grid; gap: 16px; }
@media (min-width: 680px) { .svcs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .svcs { grid-template-columns: repeat(3, 1fr); } }
.svc {
  border: 1px solid var(--line); border-radius: 14px; padding: 20px;
  background: var(--paper-2); display: grid; gap: 8px; align-content: start;
}
.svc__name { font-size: 1.08rem; letter-spacing: -.02em; }
.svc__terms { font-size: .64rem; letter-spacing: .05em; color: var(--red); text-transform: uppercase; line-height: 1.5; }
.svc__what { font-size: .92rem; color: var(--ink-2); line-height: 1.55; }
.svc__proof a { font-size: .84rem; font-weight: 600; text-decoration: none; color: var(--red); }
.svc__proof a:hover { text-decoration: underline; }

.nums { display: grid; gap: 16px; }
@media (min-width: 620px) { .nums { grid-template-columns: repeat(4, 1fr); } }
.num { border-top: 2px solid var(--ink); padding-top: 14px; display: grid; gap: 4px; }
.num strong { font-size: 1.6rem; letter-spacing: -.03em; }

/* ---- a hero with something in it ---------------------------- */
.shero { padding: 3.4rem 0 2.2rem; display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) { .shero { grid-template-columns: 1.15fr .85fr; gap: 48px; padding: 4.6rem 0 3rem; } }
.shero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: -.03em; margin-bottom: 1rem; }
.shero__lede { font-size: 1.08rem; color: var(--ink-2); max-width: 54ch; }
.shero__art { border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); padding: 22px; }
.shero__art .pv { width: 100%; height: auto; }

/* ---- the numbers, as a band --------------------------------- */
.band {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 1rem;
}
@media (min-width: 640px) { .band { grid-template-columns: repeat(4, 1fr); } }
.band__n { background: var(--paper-2); padding: 18px 20px; display: grid; gap: 3px; }
.band__n strong { font-size: 1.7rem; letter-spacing: -.035em; line-height: 1; }
.band__n span { font-size: .78rem; color: var(--ink-3); line-height: 1.45; }

/* ---- previews ----------------------------------------------- */
.pv { display: block; width: 100%; height: auto; }
.pv-rail  { fill: var(--line); }
.pv-rail2 { fill: var(--line); }
.pv-ink   { fill: var(--ink-2); }
.pv-ink-f { fill: var(--ink-2); }
.pv-a     { fill: color-mix(in srgb, var(--red) 34%, transparent); }
.pv-red   { fill: var(--red); }
.pv-red-f { fill: var(--red); }
.pv-line  { stroke: var(--red); stroke-width: 1.4; stroke-linejoin: round; }
.pv-card  { fill: var(--paper-3); }
.pv-sw0 { fill: var(--paper-3); } .pv-sw1 { fill: var(--ink-3); }
.pv-sw2 { fill: var(--ink); }     .pv-sw3 { fill: var(--red); }
.pv-t1 { fill: color-mix(in srgb, var(--ink) 16%, var(--paper-3)); }
.pv-t2 { fill: color-mix(in srgb, var(--ink) 8%, var(--paper-3)); }
.pv-t3 { fill: color-mix(in srgb, var(--ink) 26%, var(--paper-3)); }
.pv-ring    { stroke: var(--line); }
.pv-ring-on { stroke: var(--red); }

.svc__pv { border-bottom: 1px solid var(--line-2); padding-bottom: 14px; margin-bottom: 4px; }

/* ---- selected work ------------------------------------------ */
.work { display: grid; gap: 14px; }
@media (min-width: 680px) { .work { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .work { grid-template-columns: repeat(3, 1fr); } }
.work__item {
  display: grid; gap: 5px; align-content: start; padding: 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2);
  text-decoration: none; transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.work__item:hover { border-color: var(--red); transform: translateY(-2px); }
.work__pv { display: block; margin-bottom: 8px; }
.work__item strong { font-size: 1rem; letter-spacing: -.02em; }