/* Content pages (services, partner centres): emerald page head, tick lists, steps, form fields. */

.phead {
    color: var(--white);
    padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 6vw, 72px);
}

.phead__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    align-items: end;
    gap: 24px 48px;
    margin-top: 16px;
}

.phead h1 {
    font-size: clamp(2.6rem, 7vw, 6rem);
    line-height: .9;
}

.phead__side {
    display: grid;
    justify-items: start;
    gap: 18px;
}

.phead__side .lead {
    margin: 0;
    color: var(--muted-on-blue);
}

/* Tick list: bold uppercase title, muted line, emerald slanted marker. */
.ticks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.ticks li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 2px 12px;
    align-items: start;
}

.ticks .ico {
    grid-row: span 2;
    width: 22px;
    height: 22px;
    padding: 3px;
    color: var(--ink);
    background: var(--yellow);
    clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
    stroke-width: 3;
}

.ticks b {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.ticks span {
    color: var(--muted);
    font-size: .9375rem;
}

.sec--ink .ticks span,
.sec--blue .ticks span {
    color: var(--muted-on-ink);
}

/* Numbered steps on plates. */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 24px);
}

.steps li {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 22px 22px 26px;
    background: var(--white);
    border-top: 4px solid var(--ink);
}

.steps .steps__n {
    font-size: 2.6rem;
    line-height: 1;
    color: var(--blue);
}

.steps b {
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
}

.steps span {
    color: var(--muted);
    font-size: .9375rem;
}

/* Form fields on ink: square, 52px, emerald focus. */
.fld {
    display: grid;
    gap: 6px;
}

.fld label {
    font-stretch: 87.5%;
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fld label span {
    color: var(--muted-on-ink);
    text-transform: none;
    letter-spacing: 0;
}

.fld input,
.fld select,
.fld textarea {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    background: var(--ink-2);
    border: 1px solid var(--ink-3);
    border-radius: 0;
    color: var(--white);
}

.fld textarea {
    resize: vertical;
}

.fld input::placeholder,
.fld textarea::placeholder {
    color: var(--muted-on-ink);
}

.fld [aria-invalid="true"] {
    border-color: var(--error);
}

.fld__err {
    margin: 0;
    color: var(--error);
    font-size: .875rem;
}

@media (max-width: 900px) {
    .phead__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .steps {
        grid-template-columns: minmax(0, 1fr);
    }
}