/* Services: white cards with a hairline border — the photo cut on a slant along its bottom edge with a primary stripe
 * under the cut, a title, a short description and a primary text link with an arrow. */
/* Smaller, wider heading block so the title runs two lines next to the slider actions. */
.ocf-services .ocf-section-heading > div:first-child { flex: 1 1 auto; min-width: 0; }
.ocf-services .heading-2 { font-size: clamp(28px, 2.9vw, 44px); max-width: 940px; }
.ocf-services .ocf-section-intro { max-width: 46rem; }

.ocf-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ocf-grid-gap); }

.ocf-svc-card {
    --svc-cut: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ocf-border);
    border-radius: var(--card-radius);
    background: var(--ocf-bg);
    box-shadow: var(--card-shadow);
    color: var(--ocf-body);
    transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

/* The stripe under the slanted photo edge. */
.ocf-svc-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: calc(var(--ocf-service-image-height) + 6px);
    background: var(--portola-grad);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--svc-cut)), 0 100%);
}

.ocf-svc-card-img {
    position: relative;
    width: 100%;
    height: var(--ocf-service-image-height);
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--svc-cut)), 0 100%);
}

.ocf-svc-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--ocf-space-unit) * 0.75);
    min-height: var(--ocf-service-card-body-height);
    padding: calc(var(--ocf-space-unit) * 1.75) calc(var(--ocf-space-unit) * 1.875) calc(var(--ocf-space-unit) * 1.875);
    text-align: left;
}

.ocf-svc-card-body h3 { color: var(--ocf-heading); font-size: calc(var(--font-h3-size) * 0.98); }

.ocf-svc-card-body p {
    color: var(--ocf-body);
    font-size: calc(var(--font-body-size) * 0.889);
    line-height: 1.65;
}

/* The card is the link; this is its text link. */
.ocf-svc-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: calc(var(--ocf-space-unit) * 0.5);
    color: var(--ocf-link);
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: calc(var(--portola-label-size) * 0.88);
    font-weight: 600;
    line-height: 1.1;
}

.ocf-svc-card-btn svg { width: 16px; height: 16px; transition: transform var(--duration) var(--ease); }
.ocf-svc-card:hover { box-shadow: var(--card-shadow-hover); }
.ocf-svc-card:hover .ocf-svc-card-btn svg { transform: translateX(4px); }

html[data-theme="dark"] .ocf-svc-card { background: var(--ocf-bg-alt); border-color: var(--ocf-dark-border); }

.ocf-services-archive { background: var(--ocf-bg); }

/* Archive help bar: a primary-gradient band with an outline call button. */
.ocf-catalog-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--ocf-grid-gap) * 0.75);
    margin-bottom: calc(var(--ocf-grid-gap) * 1.5);
    padding: calc(var(--ocf-grid-gap) * 0.75) calc(var(--ocf-grid-gap) * 0.75) calc(var(--ocf-grid-gap) * 0.75) var(--ocf-grid-gap);
    border-left: 4px solid var(--ocf-primary);
    border-radius: var(--card-radius);
    background: var(--ocf-bg-alt);
    color: var(--ocf-heading);
    font-weight: var(--font-weight-semibold);
}

.ocf-catalog-help p { margin: 0; }
.ocf-catalog-help .btn-secondary { flex: none; }

@media (max-width: 1023px) { .ocf-svc-card { --svc-cut: 24px; } }
@media (max-width: 1000px) { .ocf-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 600px) {
    .ocf-svc-grid { grid-template-columns: 1fr; }
    .ocf-svc-card-body { min-height: 0; padding: calc(var(--ocf-space-unit) * 1.5); }
    .ocf-catalog-help { flex-direction: column; align-items: stretch; padding: var(--ocf-grid-gap); }
}

/* OCF_AGENT_BLOCK:foundry-inspired-services START */
.ocf-services .heading-2 { font-size:var(--ocf-font-h2-size);max-width:850px; }
.ocf-svc-card { border:0;background:var(--ocf-bg); }
.ocf-svc-card::before { background:none;clip-path:none; }
.ocf-svc-card .ocf-svc-card-img { clip-path:none; }
.ocf-svc-card .ocf-svc-card-body { padding:30px 26px 32px;gap:16px;border:1px solid var(--ocf-border-light);border-top:0; }
.ocf-svc-card .ocf-svc-card-body h3 { font-family:var(--ocf-font-heading),Georgia,serif;font-weight:500;font-size:27px;line-height:1.35; }
.ocf-svc-card .ocf-svc-card-body p { font-size:15px;line-height:1.8; }
.ocf-svc-card .ocf-svc-card-btn { font-family:var(--ocf-font-body),sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:500;padding-top:12px; }
@media(max-width:600px) { .ocf-svc-card .ocf-svc-card-body { padding:26px 22px; } }
/* OCF_AGENT_BLOCK:foundry-inspired-services END */

/* OCF_AGENT_BLOCK:upright-truck-photo START */
/* The original rear-truck photo is stored sideways. The frame retains the existing card dimensions while its image is turned clockwise. */
.ocf-svc-upright-photo {
  position: relative;
  flex: none;
  width: 100%;
  height: var(--ocf-service-image-height);
  overflow: hidden;
  container-type: inline-size;
}
.ocf-svc-card .ocf-svc-upright-photo > .ocf-svc-card-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ocf-service-image-height);
  max-width: none;
  height: 100cqw;
  translate: -50% -50%;
  rotate: 90deg;
}
/* OCF_AGENT_BLOCK:upright-truck-photo END */