.service-block h2 {
    font-size: var(--type-title);
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-variation-settings: "opsz" 36, "wght" 500;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.narrow {
    max-width: 72ch;
}

/* Sections */
.section,
.band {
    padding-block: clamp(56px, 8vw, 104px);
}

.section-alt,
.clapboard {
    background-color: var(--clapboard-putty);
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(43, 38, 34, 0.05) 0px,
        rgba(43, 38, 34, 0.05) 1px,
        transparent 1px,
        transparent 48px
    );
}

/* Siding is wall only: content in a siding band sits on a trim-white board. */
.section-alt > .container {
    background: var(--trim-white);
    padding-block: clamp(28px, 4vw, 56px);
    box-shadow: 0 10px 24px -14px rgba(43, 38, 34, 0.45);
}

.section-dark {
    background: var(--door-juniper);
    color: var(--trim-white);
}

.section-dark a:not(.btn) {
    color: var(--trim-white);
}

.section-head {
    max-width: 56ch;
    margin-bottom: 40px;
}

/* The register plate is evidence for the claim above it, so it sits closer to
   that claim than to whatever follows. At an even 40px on both sides it read as
   floating between two groups rather than belonging to one. */
.section-head:has(+ .city-numbers) {
    margin-bottom: 28px;
}

.section-head.center {
    margin-inline: auto;
    text-align: center;
}

.section-head p,
.intro {
    margin-top: 12px;
    max-width: 56ch;
    font-size: var(--type-lead);
    line-height: 1.5;
    color: var(--umber-soft);
}

.clapboard .intro,
.clapboard .section-head p {
    color: var(--umber-ink);
}

.board {
    padding: clamp(28px, 4vw, 56px);
    border-radius: 1px;
    background: var(--trim-white);
    box-shadow: 0 10px 24px -14px rgba(43, 38, 34, 0.45);
}

.service-block {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    padding-block: 40px;
    border-top: 1px solid var(--rule);
}

.service-block:first-child {
    border-top: 0;
    padding-top: 0;
}

.service-block p {
    color: var(--umber-soft);
    max-width: 64ch;
}

.service-block .checklist {
    grid-template-columns: 1fr 1fr;
}

.services,
.band.faq,
.section-ruled {
    border-top: 1px solid var(--rule);
}

.section:has(> .container > .cta-band) {
    background: var(--door-juniper);
}

@media (max-width: 960px) {
    .service-block {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 600px) {
    .service-block .checklist {
        grid-template-columns: 1fr;
    }

    /* Terms and steps: plaque in a fixed-width left column, text beside
       it, instead of a full-width plaque stacked above the text. */
    .board {
        padding-inline: 22px;
    }
}

.section:has(> .container > .cta-band) {
    padding-block: clamp(40px, 5vw, 72px);
}