/* About & Clients pages (resources/views/website/about.blade.php, clients.blade.php).
   Builds on our-work.css, service.css and home.css; everything here is scoped under .cp-page. */

/* Text + image split */
.cp-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 992px) {
    .cp-split { grid-template-columns: 1.2fr 1fr; gap: 72px; }
    .cp-split--reverse { grid-template-columns: 1fr 1.2fr; }
}
.cp-split > * { min-width: 0; }
.cp-split .sv-copy p { margin-bottom: 14px; }
.cp-media {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--ow-line);
    background: var(--ow-card);
}
.cp-media img { display: block; width: 100%; height: auto; }
.cp-media--contain { border: 0; background: none; }
.cp-media--contain img { max-width: 360px; margin: 0 auto; }

.cp-quote {
    margin: 22px 0 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--ow-pink);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.55;
    color: #fff;
}

.cp-stats { margin: 64px 0 0; }

/* 3-step process */
@media (min-width: 1100px) { .cp-page .cp-steps { grid-template-columns: repeat(3, 1fr); } }
.cp-steps .sv-step-num { font-size: 18px; }
.cp-statement { margin: 64px auto 0; }

.cp-trust { border-top: 1px solid var(--ow-line); }

/* Clients logo wall */
.cp-logos {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 576px) { .cp-logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .cp-logos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .cp-logos { grid-template-columns: repeat(6, 1fr); } }
.cp-logos .hm-logo { width: auto; height: 96px; padding: 16px 22px; overflow: hidden; }
.cp-logos .hm-logo img { max-height: 60px; }
@media (max-width: 575.98px) {
    .cp-logos .hm-logo { height: 80px; padding: 12px 16px; }
    .cp-logos .hm-logo img { max-height: 50px; }
}