/* Detail pages (service, service area, industry): long-form content on the left, the sticky inquiry card on the right. */
.ocf-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 768fr) minmax(0, 440fr);
    gap: var(--ocf-split-gap);
    align-items: start;
}

.ocf-detail-content { max-width: 720px; }
.ocf-detail-aside { position: sticky; top: var(--lisbon-sticky-top); }

/* Detail content opens with an article-scale H2 (the section already owns the page H1). */
.ocf-detail-content .ocf-longform h2 {
    margin-top: calc(var(--ocf-grid-gap) * 1.75);
    font-size: clamp(28px, 2.6vw, 34px);
}

.ocf-detail-content .ocf-longform > :first-child h2:first-child,
.ocf-detail-content .ocf-longform h2:first-child {
    margin-top: 0;
    font-size: clamp(32px, 3.3vw, 48px);
    font-weight: var(--ocf-font-h2-weight, 800);
    letter-spacing: var(--lisbon-h2-track);
    line-height: 1.04;
}

/* Lists in detail content: white rows with a numbered primary badge (ordered and unordered alike). */
.ocf-detail-content .ocf-longform ol,
.ocf-detail-content .ocf-longform ul {
    display: grid;
    gap: 12px;
    margin: calc(var(--ocf-grid-gap) * 0.75) 0 var(--ocf-grid-gap);
    padding: 0;
    list-style: none;
    counter-reset: lisbon-step;
}

.ocf-detail-content .ocf-longform ol > li,
.ocf-detail-content .ocf-longform ul > li {
    position: relative;
    display: block;
    min-height: 68px;
    margin: 0;
    padding: 21px 22px 21px 76px;
    border-radius: 20px;
    background: var(--lisbon-card);
    color: var(--ocf-heading);
    counter-increment: lisbon-step;
    font-size: calc(var(--font-body-size) * 0.97);
    line-height: 1.45;
}

.ocf-detail-content .ocf-longform ol > li::before,
.ocf-detail-content .ocf-longform ul > li::before {
    content: counter(lisbon-step, decimal-leading-zero);
    position: absolute;
    top: 50%;
    left: 18px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--ocf-primary);
    color: var(--ocf-primary-contrast);
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: 14px;
    font-weight: var(--ocf-font-h1-weight, 800);
    transform: translateY(-50%);
}

/* Inquiry card: primary fill, white type, a white pill button, the phone number large. */
.ocf-inquiry-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 40px;
    border-radius: var(--card-radius);
    background: var(--ocf-primary);
    color: color-mix(in srgb, var(--ocf-heading-alt) 92%, transparent);
}

.ocf-inquiry-panel .eyebrow,
.ocf-inquiry-panel h3,
.ocf-inquiry-panel p { margin: 0; }

.ocf-inquiry-panel h3 {
    color: var(--ocf-heading-alt);
    font-size: clamp(28px, 2.4vw, 34px);
    font-weight: var(--ocf-font-h2-weight, 800);
    letter-spacing: -0.015em;
    line-height: 1.04;
}

.ocf-inquiry-intro { font-size: calc(var(--font-body-size) * 0.94); line-height: 1.55; }
.ocf-inquiry-panel .btn-light { width: 100%; margin-top: 4px; }

.ocf-inquiry-call {
    padding-top: 2px;
    color: var(--ocf-heading-alt);
}

.ocf-inquiry-call strong {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.ocf-inquiry-call:hover strong { text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 1023px) {
    .ocf-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .ocf-detail-content { max-width: none; }
    .ocf-detail-aside { position: static; }
}

@media (max-width: 639px) {
    .ocf-inquiry-panel { padding: 32px 24px; }
    .ocf-detail-content .ocf-longform ol > li,
    .ocf-detail-content .ocf-longform ul > li { padding-left: 70px; }
}