/* Case study (page-case-study-mygrafistas.php, template-parts/case-*.php) and the small project tiles. */
/*art*/.cs-art { position: absolute; right: -8px; bottom: -8px; width: 38%; max-width: 170px; opacity: .3; pointer-events: none; transition: opacity .3s; }
.cs-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: f; }
.cs-flow li { position: relative; display: grid; align-content: start; gap: 4px; padding: 18px 14px; background: var(--bg-alt); }
.cs-flow li:last-child { background: var(--navy); }
.cs-flow li:last-child b, .cs-flow li:last-child small { color: #fff; }
.cs-flow span { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; background: #fff; color: var(--blue); }
.cs-flow span svg { width: 20px; height: 20px; }
.cs-flow b { color: var(--navy); font-size: 15.5px; line-height: 1.25; }
.cs-flow small { color: var(--muted); font-size: 13.5px; line-height: 1.35; }

.cs-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.cs-tiles--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-tiles a { display: grid; gap: 10px; color: var(--navy); }
.cs-tiles__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-alt); }
.cs-tiles__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s var(--ease); }
.cs-tiles b { font-size: 15px; font-weight: 600; line-height: 1.3; transition: color .2s; }
.cs-tiles a:hover b { color: var(--blue); }
.cs-tiles a:hover img { transform: scale(1.03); }
.cs-tiles a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.projects--small .section-head { margin-bottom: 24px; }
.projects--small .section-title { font-size: clamp(22px, 2.2vw, 28px); }


.cs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 32px; margin: 32px 0; padding: 24px 0; background: none; border: 0; border-block: 1px solid var(--line); list-style: none; }
.cs-stats b { display: block; color: var(--navy); font: 700 clamp(34px, 4vw, 52px)/1 var(--font-h); }
.cs-stats small { display: block; margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.35; }

.cs-brief__head { max-width: 820px; }
.cs-brief__fade { position: relative; max-height: 340px; overflow: hidden; }
.cs-brief__fade::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, #fff 88%); pointer-events: none; }
.cs-brief__fade .btn { position: absolute; left: 50%; bottom: 8px; z-index: 1; translate: -50% 0; white-space: nowrap; }
.cs-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cs-box { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-alt); border: 1px solid var(--line); }
.cs-box img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cs-box--big { box-shadow: var(--shadow); }
.cs-box--art { display: grid; place-items: center; background: var(--bg-alt); border: 0; box-shadow: none; }
.cs-box__art { width: 46%; opacity: .55; }

.cs-hero .section-lead { max-width: 780px; margin-top: 16px; }
.cs-row--alt { background: var(--bg-alt); }
.cs-row--alt .cs-box--art { background: #fff; }
.cs-row__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.cs-row--alt .cs-row__grid > :first-child { order: 2; }
.cs-row .section-title { font-size: clamp(26px, 2.8vw, 36px); }
.cs-row .section-lead { margin-top: 12px; font-size: 17px; }
.cs-points { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.cs-points li { display: flex; gap: 10px; color: var(--text); font-size: 16px; line-height: 1.45; }
.cs-points svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--ok); }

@media (max-width: 960px) {
	.cs-row__grid { grid-template-columns: 1fr; }
	.cs-row--alt .cs-row__grid > :first-child { order: 0; }
	.cs-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.cs-boxes { grid-template-columns: 1fr; }
	.cs-boxes .cs-box:nth-child(n+2) { display: none; }
	.cs-brief__fade { max-height: 280px; }
	.cs-brief__fade .btn { width: calc(100% - 16px); justify-content: center; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .cs-tiles__img img { transition: none; } }

/* The other projects belong to the case study above them: same background, one block. */
.cs-brief { padding-bottom: clamp(24px, 3vw, 40px); }
.projects--small, .section.projects.projects--small { padding-top: clamp(16px, 2vw, 24px); background: #fff; border-top: 0; }
/* The case study starts with a line and the faded grid of the page heroes. */
.cs-brief { position: relative; overflow: hidden; margin-top: clamp(32px, 4vw, 56px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line-strong); }
.cs-brief > .wrap { position: relative; z-index: 1; }
.cs-brief > .hero__bg { bottom: auto; height: 520px; }
/* Blueprint touches: dashed lines that fade out, as a corner on the case study and between it and the other projects. */
.cs-brief__head { position: relative; }
.cs-brief__head::before { content: ""; position: absolute; left: -14px; top: -18px; width: 180px; height: 150px; pointer-events: none;
	background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 15px) 0 0 / 100% 1px no-repeat, repeating-linear-gradient(180deg, var(--line-strong) 0 8px, transparent 8px 15px) 0 0 / 1px 100% no-repeat;
	-webkit-mask-image: linear-gradient(135deg, #000 15%, transparent 70%); mask-image: linear-gradient(135deg, #000 15%, transparent 70%); }
.projects--small > .wrap { position: relative; }
.cs-brief + .projects--small > .wrap::before { content: ""; display: block; height: 1px; margin-bottom: clamp(28px, 3.5vw, 44px);
	background: repeating-linear-gradient(90deg, var(--line-strong) 0 10px, transparent 10px 20px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
@media (max-width: 640px) { .cs-brief__head::before { left: -8px; width: 120px; height: 110px; } }