/* ── Drothven layout.css ────────────────────────────────
   Container (1200px), grid systems, two-col layouts.
   ─────────────────────────────────────────────────────── */

.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--s-24);
}

/* ── Section spacing ───────────────────────────────────── */
.section {
    padding: var(--s-64) 0;
}

.section__kicker {
    font-family: var(--f-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-accent);
    letter-spacing: 0.5px;
    margin-bottom: var(--s-8);
}

.section__title {
    margin-bottom: var(--s-16);
}

.section__desc {
    color: var(--c-text-dim);
    max-width: 640px;
    margin-bottom: var(--s-32);
}

/* ── Grid systems ──────────────────────────────────────── */
.grid {
    display: grid;
    gap: var(--s-24);
}

.grid--2 {
    grid-template-columns: 1fr 1fr;
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ── Two-column layouts ────────────────────────────────── */
.two-col {
    display: grid;
    gap: var(--s-48);
    align-items: start;
}

.two-col--55-45 {
    grid-template-columns: 55fr 45fr;
}

.two-col--50-50 {
    grid-template-columns: 1fr 1fr;
}

/* ── CTA group ─────────────────────────────────────────── */
.cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-16);
    margin-top: var(--s-32);
}

/* ── Centred content ───────────────────────────────────── */
.text-centre {
    text-align: center;
}

.narrow {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}