.process {
    background-color: var(--charcoal);
    color: var(--offwhite);
    padding: var(--space-xl) var(--space-md);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

.process-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    text-align: left; /* Keep left alignment or center if preferred, usually single column looks good left or center. Let's stick to left to match the "hero" feel or center for impact. "match sizing of text with rest" -> Hero had left align. */
}

.process-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.process-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 900px; /* Constrain width for readability */
}

.process-lead {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 400;
    max-width: 60ch;
    /* text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); REMOVED FOR PERFORMANCE */
    opacity: 0.9;
}

.process-desc {
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    color: var(--offwhite);
    opacity: 0.8;
    line-height: 1.6;
}

/* Enforce single column on all screens */
@media (min-width: 768px) {
    .process-content {
        grid-template-columns: 1fr; /* Override grid if it was there */
    }
    .process-desc {
        margin-left: 0;
        margin-top: 0;
    }
}