/* Energy Reclaim: bold and direct.
   Warm white ground, charcoal for ink and the dark bands, vivid orange for the action.
   Work Sans for everything read; Big Shoulders Display, in capitals, for headlines and the wordmark. */

@font-face {
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/work-sans-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Big Shoulders Display";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/big-shoulders-display-latin-wght-normal.woff2") format("woff2");
}

/* Metric-adjusted fallback keeps layout shift small while the web font loads. */
@font-face {
    font-family: "Work Sans Fallback";
    src: local("Arial");
    size-adjust: 106%;
    ascent-override: 88%;
    descent-override: 23%;
}

:root {
    --white: #ffffff;
    --paper: #f3f1ec;
    --grey: #e9e6df;
    --grey-2: #dedad2;
    --rule: #d4cfc5;
    --rule-soft: #e2ded6;
    --field: #857e76;

    --ink: #1f1d1b;
    --ink-2: #3f3a35;
    --ink-3: #5d5650;

    /* Dark bands: charcoal. */
    --navy: #1f1d1b;
    --navy-2: #2a2724;
    --navy-rule: #3a3632;
    --navy-text: #f3f1ec;
    --navy-soft: #c9c3bb;

    /* The action colour: orange as a fill; a deeper orange when it has to be text. */
    --cobalt: #ff5a1f;
    --cobalt-hover: #ff7440;
    --cobalt-wash: #ffe6da;
    --cobalt-text: #a83600;
    --cyan: #ff5a1f;

    --error: #b4232b;
    --error-wash: #fdeced;

    --font: "Work Sans", "Work Sans Fallback", "Helvetica Neue", Arial, sans-serif;
    --wordmark: "Big Shoulders Display", "Arial Narrow", sans-serif;

    --step--2: 0.75rem;
    --step--1: 0.875rem;
    --step-0: 1.0625rem;
    --step-1: 1.25rem;
    --step-2: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
    --step-3: clamp(1.875rem, 1.3rem + 2.1vw, 3rem);
    --step-4: clamp(2.5rem, 1.6rem + 3.2vw, 4.125rem);

    --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
    --section: clamp(4rem, 2.8rem + 4.6vw, 7rem);
    --radius: 2px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --header-h: 4.5rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 1rem);
    scrollbar-color: var(--ink-3) var(--grey);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--cobalt);
    color: var(--ink);
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
    margin: 0;
}

ul[class],
ol[class] {
    list-style: none;
    padding: 0;
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

a:hover {
    text-decoration-thickness: 2px;
}

:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

.band--navy :focus-visible,
.cta-strip :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--cyan);
}

.band--navy .form-card :focus-visible {
    outline-color: var(--ink);
}

main:focus {
    outline: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: var(--gutter);
    top: 0.75rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--cobalt);
    color: var(--ink);
    font-weight: 650;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

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

/* ---------- Type ---------- */

.display,
.h2 {
    font-family: var(--wordmark);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.display {
    font-size: clamp(3.5rem, 1.6rem + 7.4vw, 9.75rem);
    line-height: 0.86;
}

.h2 {
    font-size: clamp(2.75rem, 1.4rem + 4.6vw, 6rem);
    line-height: 0.9;
}

.h3 {
    font-size: var(--step-1);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.012em;
}

.lede {
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 34em;
}

.intro {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 58ch;
}

.label {
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.small-print {
    font-size: var(--step--1);
    color: var(--ink-3);
    max-width: 60em;
}

.prose {
    /* 62ch sets about 75 characters per line in Work Sans. */
    max-width: 62ch;
}

.prose > * + * {
    margin-top: 1em;
}

.prose > :first-child {
    margin-top: 0;
}

.prose h2 {
    font-size: var(--step-2);
    font-weight: 720;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-top: 2.4em;
}

.prose h3 {
    font-size: var(--step-1);
    font-weight: 680;
    line-height: 1.3;
    margin-top: 2em;
}

.prose .h2 {
    /* A section heading set inside prose keeps the section scale. */
    font-size: clamp(2.75rem, 1.4rem + 4.6vw, 6rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.01em;
    margin-top: 0;
}

.prose .h2 + * {
    margin-top: 1.25rem;
}

.prose h2 + *,
.prose h3 + * {
    margin-top: 0.6em;
}

.prose ul,
.prose ol {
    padding-left: 1.2em;
}

.prose li + li {
    margin-top: 0.45em;
}

.prose li::marker {
    color: var(--cobalt-text);
}

.prose a {
    color: var(--cobalt-text);
    font-weight: 600;
}

.prose strong {
    font-weight: 680;
}

/* ---------- Actions ---------- */

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
    align-items: center;
}

.button {
    --bg: var(--cobalt);
    --fg: var(--ink);
    --bd: var(--cobalt);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 3.25rem;
    padding: 0.8rem 1.5rem;
    border: 1.5px solid var(--bd);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    font-size: var(--step-0);
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}

.button:hover {
    --bg: var(--cobalt-hover);
    --bd: var(--cobalt-hover);
}

.button .icon {
    stroke-width: 2;
    transition: transform 240ms var(--ease-out);
}

.button:hover .icon {
    transform: translateX(3px);
}

.button--ghost {
    --bg: transparent;
    --fg: var(--ink);
    --bd: var(--ink);
}

.button--ghost:hover {
    --bg: var(--ink);
    --fg: var(--white);
    --bd: var(--ink);
}

.button--small {
    min-height: 2.75rem;
    padding: 0.5rem 1.05rem;
    font-size: 0.9375rem;
}

.button[aria-disabled="true"] {
    cursor: progress;
    opacity: 0.8;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 650;
    color: var(--cobalt-text);
    text-decoration: none;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 0.1rem;
}

.link-arrow:hover {
    color: var(--cobalt-hover);
}

.link-arrow .icon {
    transition: transform 240ms var(--ease-out);
}

.link-arrow:hover .icon {
    transform: translateX(3px);
}

.band--navy .link-arrow,
.cta-strip .link-arrow {
    color: var(--white);
}

.icon {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

/* ---------- Logo ---------- */

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.logo__word {
    font-family: var(--wordmark);
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.logo__word span { color: var(--cobalt-text); }

.site-footer .logo__word span { color: var(--cobalt); }

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(243 241 236 / 0.97);
    border-bottom: 1px solid var(--rule);
}

@supports (backdrop-filter: blur(1px)) {
    .site-header {
        background: rgb(243 241 236 / 0.9);
        backdrop-filter: saturate(1.4) blur(12px);
    }
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-h);
}

.site-header__brand {
    text-decoration: none;
    padding-block: 0.5rem;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.site-nav__list {
    display: flex;
    gap: 1.75rem;
}

.site-nav__link {
    position: relative;
    display: inline-block;
    padding-block: 1.4rem;
    font-size: 0.9375rem;
    font-weight: 560;
    color: var(--ink-2);
    text-decoration: none;
}

.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 240ms var(--ease-out);
}

.site-nav__link:hover {
    color: var(--ink);
}

.site-nav__link:hover::after {
    transform: scaleX(1);
}

.site-nav__link[aria-current="page"] {
    color: var(--ink);
    font-weight: 680;
}

.site-nav__link[aria-current="page"]::after {
    background: var(--cobalt);
    transform: scaleX(1);
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.85rem;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 650;
    cursor: pointer;
}

.nav-toggle svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
    display: inline;
}

@media (max-width: 62rem) {
    .site-header__inner {
        flex-wrap: wrap;
        gap: 0 1rem;
    }

    .js .nav-toggle {
        display: inline-flex;
    }

    .site-nav {
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding-bottom: 1.25rem;
    }

    .js .site-nav:not(.is-open) {
        display: none;
    }

    .site-nav__list {
        flex-direction: column;
        gap: 0;
        border-top: 1px solid var(--rule);
    }

    .site-nav__list li {
        border-bottom: 1px solid var(--rule);
    }

    .site-nav__link {
        display: block;
        padding-block: 0.95rem;
        font-size: var(--step-0);
    }

    .site-nav__link::after {
        display: none;
    }

    .site-nav__link[aria-current="page"] {
        color: var(--cobalt-text);
    }

    .site-nav__cta {
        min-height: 3.25rem;
    }
}

/* ---------- Bands ---------- */

.band {
    padding-block: var(--section);
}

.band--grey {
    background: var(--grey);
}

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

.band--navy {
    background: var(--navy);
    color: var(--navy-text);
}

.band--navy .intro,
.band--navy p {
    color: var(--navy-soft);
}

.band--orange {
    background: var(--cobalt);
    color: var(--ink);
}

.band--orange .intro,
.band--orange p {
    color: var(--ink);
}

.band-head {
    margin-bottom: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
}

.band-head .h2 {
    max-width: 20ch;
}

.band-head .intro {
    margin-top: 1rem;
}

/* ---------- Hero ---------- */

.hero {
    --hero-size: clamp(3.4rem, 1.2rem + 7.6vw, 9.75rem);
    --hero-line: calc(var(--hero-size) * 0.9);
    background: var(--cobalt);
}

.hero__paper {
    height: calc(var(--hero-line) + clamp(2.5rem, 1rem + 4vw, 5rem));
    background: var(--paper);
}

.hero__field {
    position: relative;
    padding-top: calc(var(--hero-line) + 1.75rem);
    padding-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem);
}

/* One headline across the seam: centred on it, so line one stands on the white
   and line two on the orange. */
.hero__title {
    position: absolute;
    left: 50%;
    top: 0;
    width: min(92vw, 84rem);
    transform: translate(-50%, -50%);
    font-family: var(--wordmark);
    font-size: var(--hero-size);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink);
}

.hero__line { display: block; white-space: nowrap; }

.hero__line--accent { color: var(--cobalt-text); }

.hero__lede {
    max-width: 38ch;
    margin: 0 auto;
    padding-inline: var(--gutter);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: var(--ink);
}

.hero__form {
    margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

/* The enquiry as one bar across the orange: five fields and the action on one row. */
.lead-form {
    display: grid;
    gap: 0.9rem 0.75rem;
}

.lead-form--bar {
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    align-items: end;
}

.lead-form__trap { position: absolute; left: -9999px; }

.lead-form__field { display: grid; gap: 0.4rem; min-width: 0; }

.lead-form label,
.lead-form legend {
    font-size: 0.9375rem;
    font-weight: 600;
}

.lead-form__optional { font-weight: 400; }

.lead-form input[type="text"],
.lead-form input[type="email"],
.lead-form input[type="tel"],
.lead-form select {
    width: 100%;
    min-height: 3.25rem;
    padding: 0 0.9rem;
    border: 2px solid var(--ink);
    border-radius: 0;
    background: var(--white);
    color: var(--ink);
    font: inherit;
}

.lead-form input:focus,
.lead-form select:focus {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.lead-form [aria-invalid="true"] { border-color: #5c1200; box-shadow: inset 0 0 0 2px #5c1200; }

.lead-form__error { font-size: 0.9375rem; font-weight: 600; color: #3a0b00; }

.lead-form__contact {
    grid-column: 1 / span 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.1rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.lead-form__contact legend { float: left; margin-right: 0.4rem; }

.lead-form__contact label { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; }

.lead-form__contact input { width: 1.25rem; height: 1.25rem; accent-color: var(--ink); }

.lead-form__submit {
    grid-column: 6;
    grid-row: 1;
    min-height: 3.25rem;
    padding: 0 1.6rem;
    border: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--wordmark);
    font-size: 1.75rem;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

.lead-form__submit:hover { background: #000; }

.lead-form__submit:active { transform: translateY(1px); }

.lead-form__submit[aria-disabled="true"] { cursor: progress; opacity: 0.8; }

.lead-form__small {
    grid-column: 3 / -1;
    align-self: center;
    justify-self: end;
    font-size: 0.9375rem;
    font-weight: 500;
}

.lead-form__errors {
    grid-column: 1 / -1;
    padding: 0.65rem 0.9rem;
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
}

@media (max-width: 68rem) {
    .lead-form--bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lead-form__submit { grid-column: 3; grid-row: 2; }
    .lead-form__contact { grid-column: 1 / span 2; }
    .lead-form__small { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 48rem) {
    .hero { --hero-size: 10.2vw; }
    .hero__lede { font-size: 1.0625rem; }
    .lead-form--bar { grid-template-columns: 1fr; }
    .lead-form__contact,
    .lead-form__submit,
    .lead-form__small { grid-column: 1; grid-row: auto; justify-self: stretch; }
}

/* ---------- How commission can work: one sentence stepping down ---------- */

.stair {
    background: var(--navy);
    color: var(--navy-text);
    padding-block: clamp(5rem, 3.4rem + 6vw, 9rem);
}

.stair :focus-visible { outline-color: var(--cobalt); }

.stair__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
}

.stair__statement {
    grid-column: 1 / span 9;
    grid-row: 1;
    font-family: var(--wordmark);
    font-size: clamp(2.25rem, 0.9rem + 4.6vw, 4.4rem);
    font-weight: 900;
    line-height: 1.02;
    text-transform: uppercase;
}

.stair__statement span { display: block; }

.stair__statement span:nth-child(2) { padding-left: 4vw; color: var(--cobalt); }
.stair__statement span:nth-child(3) { padding-left: 8vw; }
.stair__statement span:nth-child(4) { padding-left: 12vw; color: var(--cobalt); }
.stair__statement span:nth-child(5) { padding-left: 16vw; }

.stair__photos {
    grid-column: 10 / span 3;
    grid-row: 1;
    align-self: start;
    display: grid;
    gap: 1rem;
}

.stair__photos img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.stair__note {
    grid-column: 1 / span 6;
    grid-row: 2;
    margin-top: clamp(3.5rem, 2.5rem + 3vw, 6rem);
}

.stair__note h2 {
    font-family: var(--wordmark);
    font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.stair__note p {
    margin-top: 0.85rem;
    max-width: 52ch;
    color: var(--navy-soft);
}

.stair__note .link-arrow {
    margin-top: 1.25rem;
    color: var(--cobalt);
}

@media (max-width: 48rem) {
    .stair__grid { grid-template-columns: 1fr; }

    .stair__statement { grid-column: 1; font-size: 8.2vw; }

    .stair__statement span:nth-child(2) { padding-left: 4vw; }
    .stair__statement span:nth-child(3) { padding-left: 8vw; }
    .stair__statement span:nth-child(4) { padding-left: 12vw; }
    .stair__statement span:nth-child(5) { padding-left: 16vw; }

    .stair__photos {
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: 1fr 1fr;
        margin-top: 2.5rem;
    }

    .stair__note { grid-column: 1; grid-row: 3; margin-top: 2.5rem; }
}

/* ---------- Reasons on the warm white (the staircase above is charcoal) ---------- */

.band--reasons .intro,
.band--reasons p { color: var(--ink-2); }

.band--reasons .reasons__aside { border-top-color: var(--rule); }

.band--reasons .reasons__aside strong { color: var(--ink); }

.band--reasons .reasons__list { border-top: 2px solid var(--ink); }

.band--reasons .reasons__list li {
    color: var(--ink);
    border-bottom-color: var(--rule);
}

.band--reasons .reasons__list li::before {
    border-color: var(--cobalt-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a83600' stroke-width='2.4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* ---------- Reasons (navy) ---------- */

.reasons {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2.5rem var(--gutter);
    align-items: start;
}

.reasons__head {
    grid-column: 1 / span 5;
}

.reasons__head .intro {
    margin-top: 1.25rem;
}

.reasons__aside {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--navy-rule);
}

.reasons__aside strong {
    display: block;
    color: var(--white);
    font-size: var(--step-1);
    font-weight: 700;
    line-height: 1.35;
}

.reasons__aside p {
    margin-top: 0.6rem;
}

.reasons__aside .button {
    margin-top: 1.5rem;
}

.reasons__list {
    grid-column: 7 / span 6;
    border-top: 1px solid var(--navy-rule);
}

.reasons__list li {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: 0.75rem;
    padding-block: 1.3rem;
    border-bottom: 1px solid var(--navy-rule);
    font-size: var(--step-1);
    line-height: 1.45;
    color: var(--white);
}

.reasons__list li::before {
    content: "";
    width: 1.75rem;
    height: 1.75rem;
    margin-top: 0.05rem;
    border: 1.5px solid var(--cyan);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a1f' stroke-width='2.4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 1.1rem no-repeat;
}

.reasons__note {
    margin-top: 1.25rem;
    font-size: var(--step--1);
}

@media (max-width: 56rem) {
    .reasons__head,
    .reasons__list {
        grid-column: 1 / -1;
    }
}

/* ---------- Next steps ---------- */

.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--gutter);
}

.steps__item {
    padding-top: 1.5rem;
    border-top: 2px solid var(--ink);
}

.steps__item:nth-child(n + 3) {
    border-top-color: var(--cobalt-text);
}

.steps__num {
    display: block;
    font-family: var(--wordmark);
    font-size: clamp(3rem, 2rem + 3vw, 5rem);
    font-weight: 900;
    line-height: 0.9;
    color: var(--ink-3);
}

.band--orange .steps__num,
.band--orange .steps__item:nth-child(n + 3) .steps__num { color: var(--ink); }

.band--orange .steps__item,
.band--orange .steps__item:nth-child(n + 3) { border-top-color: var(--ink); }

.band--orange .steps__item p { color: var(--ink); }

.steps__item:nth-child(n + 3) .steps__num {
    color: var(--cobalt-text);
}

.steps__item .h3 {
    margin-top: 1rem;
}

.steps__item p {
    margin-top: 0.6rem;
    color: var(--ink-2);
}


.steps-foot {
    margin-top: 2.5rem;
}

@media (max-width: 62rem) {
    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 3rem;
    }
}

@media (max-width: 34rem) {
    .steps {
        grid-template-columns: 1fr;
        row-gap: 2.25rem;
    }

    .steps__item {
        display: grid;
        grid-template-columns: 3rem 1fr;
        column-gap: 0.75rem;
        align-content: start;
    }

    .steps__item > :not(.steps__num) {
        grid-column: 2;
    }

    .steps__num {
        grid-row: 1 / span 3;
        font-size: var(--step-2);
    }

    .steps__item .h3 {
        margin-top: 0;
    }

}

/* ---------- Documents ---------- */

.docs__head .h2 {
    max-width: 20ch;
}

.docs__head .intro,
.docs__head .secure-line {
    max-width: 58ch;
}

.docs--follow {
    margin-top: clamp(3.5rem, 2.5rem + 3vw, 5rem);
    padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    border-top: 1px solid var(--rule);
}

.docs__head .intro {
    margin-top: 1rem;
}

.docs__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem var(--gutter);
    margin-top: 2.25rem;
}

.docs__list div {
    padding-top: 1rem;
    border-top: 2px solid var(--ink);
}

.docs__list dd {
    margin-top: 0.35rem;
}

.docs__list dt {
    font-weight: 680;
    line-height: 1.35;
}

.docs__list dd {
    color: var(--ink-3);
}

@media (max-width: 62rem) {
    .docs__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 34rem) {
    .docs__list {
        grid-template-columns: 1fr;
    }
}

.secure-line {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    color: var(--ink-2);
}

.secure-line .icon {
    color: var(--cobalt-text);
    margin-top: 0.15em;
}



/* ---------- FAQs ---------- */

.faq-stack__list {
    max-width: 52rem;
}

.faq-stack .link-arrow {
    margin-top: 1.75rem;
}

.faq-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2rem var(--gutter);
    align-items: start;
}

.faq-layout__head {
    grid-column: 1 / span 4;
}

.faq-layout__head .intro {
    margin-top: 1rem;
}

.faq-layout__head .link-arrow {
    margin-top: 1.75rem;
}

.faq-layout__list {
    grid-column: 6 / span 7;
}

@media (max-width: 56rem) {
    .faq-layout__head,
    .faq-layout__list {
        grid-column: 1 / -1;
    }
}

.faq-list {
    border-top: 2px solid var(--ink);
}

.faq {
    border-bottom: 1px solid var(--rule);
}

.faq__q {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-start;
    padding-block: 1.2rem;
    font-size: 1.125rem;
    font-weight: 650;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.faq__q::-webkit-details-marker {
    display: none;
}

.faq__q:hover {
    color: var(--cobalt-text);
}

.faq__icon {
    flex: none;
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    border: 1.5px solid currentColor;
}

.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.7rem;
    height: 1.5px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform 240ms var(--ease-out);
}

.faq[open] .faq__icon {
    background: var(--cobalt);
    border-color: var(--ink);
    color: var(--ink);
}

.faq[open] .faq__icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.faq__a {
    padding: 0 3.25rem 1.5rem 0;
    color: var(--ink-2);
}

@media (max-width: 34rem) {
    .faq__a {
        padding-right: 0;
    }
}

.faq-group + .faq-group {
    margin-top: 3.5rem;
}

.faq-group__title {
    font-family: var(--wordmark);
    font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.95;
    margin-bottom: 1rem;
}

/* ---------- Enquiry band and form ---------- */

.enquire {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 3rem var(--gutter);
    align-items: start;
}

.enquire__head {
    grid-column: 1 / span 4;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
}

.enquire__head .intro {
    margin-top: 1.25rem;
}

.enquire__asks {
    margin-top: 2rem;
    border-top: 1px solid var(--navy-rule);
}

.enquire__asks div {
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--navy-rule);
}

.enquire__asks dt {
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
}

.enquire__asks dd {
    margin-top: 0.25rem;
    font-size: 0.9688rem;
    color: var(--navy-soft);
}

.enquire__form {
    grid-column: 6 / span 7;
}

@media (max-width: 62rem) {
    .enquire__head,
    .enquire__form {
        grid-column: 1 / -1;
        position: static;
    }
}

.form-card {
    background: var(--white);
    color: var(--ink);
    padding: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
    border-top: 4px solid var(--cobalt);
}

.band--navy .form-card p {
    color: inherit;
}

.page-form .form-card {
    border: 1px solid var(--rule);
    border-top: 4px solid var(--cobalt);
}

.form-card__title {
    font-family: var(--wordmark);
    font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.95;
}

.form-card__intro {
    margin-top: 0.5rem;
    color: var(--ink-2) !important;
}

.form-section {
    border: 0;
    margin: 1.75rem 0 0;
    padding: 1.5rem 0 0;
    min-width: 0;
    border-top: 1px solid var(--rule);
}

.form-section__legend {
    float: left;
    width: 100%;
    padding: 0;
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.form-section__legend + * {
    clear: both;
}

.fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
}

.fields > .field--full {
    grid-column: 1 / -1;
}

@media (max-width: 40rem) {
    .fields {
        grid-template-columns: 1fr;
    }
}

.field {
    margin-top: 1.25rem;
    min-width: 0;
}

.field__label,
.field__legend {
    display: block;
    padding: 0;
    font-weight: 650;
    line-height: 1.35;
}

.field__optional {
    font-weight: 450;
    color: var(--ink-3);
}

.field__optional[hidden] {
    display: none;
}

.field__hint {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.9063rem;
    color: var(--ink-3);
}

.field__error {
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    margin-top: 0.4rem;
    font-size: 0.9375rem;
    font-weight: 620;
    color: var(--error) !important;
}

.field__error .icon {
    margin-top: 0.15em;
    width: 1.05rem;
    height: 1.05rem;
    stroke-width: 2.2;
}

.input,
.textarea {
    display: block;
    width: 100%;
    margin-top: 0.45rem;
    min-height: 3.125rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--field);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink);
    font: inherit;
    line-height: 1.4;
    transition: border-color 140ms, box-shadow 140ms;
}

.input:hover,
.textarea:hover {
    border-color: var(--ink);
}

.input:focus,
.textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--cobalt);
}

.textarea {
    min-height: 7.5rem;
    resize: vertical;
}

[aria-invalid="true"].input,
[aria-invalid="true"].textarea {
    border-color: var(--error);
    box-shadow: inset 0 0 0 1px var(--error);
}

.choices {
    border: 0;
    margin: 1.25rem 0 0;
    padding: 0;
    min-width: 0;
}

.choices__options {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.55rem;
    border: 1px solid var(--field);
    border-radius: var(--radius);
    width: fit-content;
    max-width: 100%;
}

.choice {
    position: relative;
    flex: 1 1 auto;
}

.choice + .choice {
    border-left: 1px solid var(--field);
}

.choice input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.choice label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.55rem 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 140ms, color 140ms;
}

.choice:hover label {
    background: var(--cobalt-wash);
}

.choice input:checked + label {
    background: var(--ink);
    color: var(--paper);
}

.choice input:focus-visible + label {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
    position: relative;
    z-index: 1;
}

.choices[aria-invalid="true"] .choices__options {
    border-color: var(--error);
    box-shadow: inset 0 0 0 1px var(--error);
}

@media (max-width: 34rem) {
    .choices__options {
        width: 100%;
    }

    .choices--four .choices__options {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .choices--four .choice:nth-child(3) {
        border-left: 0;
    }

    .choices--four .choice:nth-child(n + 3) {
        border-top: 1px solid var(--field);
    }
}

.check {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 1.5rem;
}

.check input {
    flex: none;
    appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.05rem 0 0;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    background: var(--white) center / 1rem no-repeat;
    cursor: pointer;
}

.check input:checked {
    background-color: var(--cobalt-text);
    border-color: var(--cobalt-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1d1b' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.check input:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

.check label {
    padding-block: 0.1rem;
    font-size: 0.9688rem;
    color: var(--ink-2);
    cursor: pointer;
}

.honeypot {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.counter {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.counter.is-over {
    color: var(--error);
    font-weight: 650;
}

.privacy-line {
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    background: var(--grey);
    font-size: 0.9375rem;
    color: var(--ink-2) !important;
}

.privacy-line a {
    color: var(--cobalt-text);
    font-weight: 600;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    margin-top: 1.75rem;
}

.form-legal {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--ink-3) !important;
}

.spinner {
    display: none;
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
}

.is-submitting .spinner {
    display: inline-block;
}

.is-submitting .button__arrow {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .spinner {
        animation: spin 700ms linear infinite;
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.error-summary {
    margin-bottom: 1.75rem;
    padding: 1.1rem 1.25rem;
    border: 2px solid var(--error);
    background: var(--error-wash);
    color: var(--ink);
}

.error-summary:focus {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

.error-summary__title {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: var(--step-1);
    font-weight: 720;
    color: var(--error);
}

.error-summary ul {
    margin-top: 0.6rem;
    padding-left: 1.25rem;
}

.error-summary li + li {
    margin-top: 0.25rem;
}

.error-summary a {
    color: var(--error);
    font-weight: 620;
}

.error-summary p {
    margin-top: 0.5rem;
    color: var(--ink) !important;
}

/* ---------- Home close ---------- */

.close {
    background: var(--navy);
    color: var(--navy-text);
    padding-block: clamp(4rem, 2.8rem + 4vw, 7rem);
    border-bottom: 1px solid var(--navy-rule);
}

.close__inner {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 2rem var(--gutter);
    align-items: end;
}

.close__title {
    font-family: var(--wordmark);
    font-size: clamp(3rem, 1.4rem + 6vw, 8rem);
    font-weight: 900;
    line-height: 0.88;
    text-transform: uppercase;
    color: var(--cobalt);
}

.close__side p { color: var(--navy-soft); font-size: 1.125rem; }

.close__side .button { margin-top: 1.25rem; }

@media (max-width: 56rem) {
    .close__inner { grid-template-columns: 1fr; }
}

/* ---------- CTA strip ---------- */

.cta-strip {
    background: var(--navy);
    color: var(--white);
    padding-block: clamp(3rem, 2.2rem + 3vw, 5rem);
}

.cta-strip__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem var(--gutter);
    align-items: end;
}

.cta-strip .h2 {
    grid-column: 1 / span 7;
}

.cta-strip__side {
    grid-column: 9 / span 4;
}

.cta-strip p {
    color: var(--navy-soft);
}

.cta-strip .button {
    margin-top: 1.25rem;
}

@media (max-width: 56rem) {
    .cta-strip .h2,
    .cta-strip__side {
        grid-column: 1 / -1;
    }
}

/* ---------- Footer ---------- */

.site-footer {
    background: #161513;
    color: var(--navy-soft);
    padding-block: 3.5rem 2.5rem;
    font-size: 0.9375rem;
}

.site-footer a {
    color: var(--white);
}

.site-footer .logo__word {
    color: var(--white);
}

.site-footer__logo {
    display: inline-block;
    text-decoration: none;
}

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 5fr) repeat(auto-fit, minmax(10rem, 2.5fr));
    gap: 2.5rem var(--gutter);
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--navy-rule);
}

.site-footer__about {
    margin-top: 1.25rem;
    max-width: 30em;
}

.site-footer__heading {
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 0.85rem;
}

.site-footer__col ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0;
}

.site-footer__col a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    text-decoration: none;
}

.site-footer__col a:hover {
    text-decoration: underline;
}

.site-footer__legal {
    padding-top: 2rem;
    display: grid;
    gap: 0.75rem;
    font-size: 0.8438rem;
    line-height: 1.6;
    max-width: 64ch;
}

@media (max-width: 62rem) {
    .site-footer__top {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 40rem) {
    .site-footer__top {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__col:last-child {
        grid-column: 1 / -1;
    }
}

/* ---------- Inner pages ---------- */

.page-head {
    background: var(--navy);
    color: var(--navy-text);
    border-bottom: 6px solid var(--cobalt);
    padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 4.75rem);
}

.page-head__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem var(--gutter);
}

.page-head__title {
    grid-column: 1 / span 9;
}

.page-head .display {
    font-size: clamp(3rem, 1.4rem + 5.2vw, 7rem);
    max-width: 18ch;
}

.page-head .lede { color: var(--navy-soft); }

.page-head__lede {
    grid-column: 1 / span 7;
}

.page-head__meta {
    max-width: 62ch;
    margin-top: 1rem;
    font-size: 0.9375rem;
    color: var(--navy-soft);
}

@media (max-width: 56rem) {
    .page-head__title,
    .page-head__lede {
        grid-column: 1 / -1;
    }
}

.article {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 3rem var(--gutter);
    padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.article__toc {
    grid-column: 1 / span 3;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
    font-size: 0.9375rem;
}

.article__toc ol {
    list-style: none;
    padding: 0;
    margin-top: 0.75rem;
    border-top: 2px solid var(--ink);
}

.article__toc a {
    display: block;
    padding-block: 0.6rem;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-2);
    text-decoration: none;
    line-height: 1.35;
}

.article__toc a:hover {
    color: var(--cobalt-text);
}

.article__body {
    grid-column: 5 / span 8;
    min-width: 0;
}

.article__body--full {
    grid-column: 1 / span 9;
}

.article__body > .prose:first-child > h2:first-child {
    margin-top: 0;
}

@media (max-width: 56rem) {
    .article__toc,
    .article__body,
    .article__body--full {
        position: static;
        grid-column: 1 / -1;
    }
}

.figure {
    margin-block: 2.5rem;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    background: var(--grey);
    border-top: 2px solid var(--ink);
}

.figure__title {
    font-size: 1.0625rem;
    font-weight: 720;
}

.figure__sub {
    font-size: 0.9063rem;
    color: var(--ink-3);
}

.figure__source {
    max-width: 64ch;
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
    font-size: 0.8125rem;
    color: var(--ink-3);
}

/* Unit rate makeup bar (commissions page) */
.rate-bar__track {
    display: grid;
    grid-template-columns: 5fr 2.4fr 2fr 1.6fr 1.2fr;
    gap: 3px;
    height: 3rem;
    margin-top: 1.5rem;
}

.rate-bar__track span:nth-child(1) { background: var(--ink); }
.rate-bar__track span:nth-child(2) { background: #4a4540; }
.rate-bar__track span:nth-child(3) { background: #7a736b; }
.rate-bar__track span:nth-child(4) { background: #aaa298; }
.rate-bar__track span:nth-child(5) {
    background: repeating-linear-gradient(90deg, var(--cobalt) 0 4px, var(--cobalt-wash) 4px 7px);
    outline: 1.5px solid var(--cobalt);
    outline-offset: -1.5px;
}

.rate-bar__key {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.rate-bar__key li {
    padding-top: 0.5rem;
    border-top: 3px solid var(--swatch);
}

.rate-bar__key li:nth-child(1) { --swatch: var(--ink); }
.rate-bar__key li:nth-child(2) { --swatch: #4a4540; }
.rate-bar__key li:nth-child(3) { --swatch: #7a736b; }
.rate-bar__key li:nth-child(4) { --swatch: #aaa298; }
.rate-bar__key li:nth-child(5) { --swatch: var(--cobalt); color: var(--cobalt-text); font-weight: 650; }

@media (max-width: 40rem) {
    .rate-bar__key {
        grid-template-columns: 1fr 1fr;
    }
}

/* Who pays whom (commissions page) */
.flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.5rem;
    text-align: center;
}

.flow__party {
    padding: 0.7rem 0.5rem;
    background: var(--navy);
    color: var(--white);
    font-size: 0.9063rem;
    font-weight: 680;
}

.flow__party + .flow__party {
    border-left: 2px solid var(--grey);
}

.flow__rows {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 1rem;
    padding-block: 1.25rem 0.5rem;
    background:
        linear-gradient(var(--field), var(--field)) 16.667% 0 / 1px 100% no-repeat,
        linear-gradient(var(--field), var(--field)) 50% 0 / 1px 100% no-repeat,
        linear-gradient(var(--field), var(--field)) 83.333% 0 / 1px 100% no-repeat;
}

.flow__msg {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.flow__msg--start1 { grid-column-start: 1; }
.flow__msg--start2 { grid-column-start: 2; }
.flow__msg--span2 { grid-column-end: span 2; --inset: 25%; }
.flow__msg--span3 { grid-column-end: span 3; --inset: 16.667%; }

.flow__text {
    /* Sits between the two lifelines it connects, never across them. */
    margin-inline: calc(var(--inset) + 0.5rem);
    padding: 0.1rem 0;
    text-align: left;
    font-size: 0.8438rem;
    line-height: 1.35;
    color: var(--ink-2);
}

.flow__arrow {
    position: relative;
    align-self: stretch;
    height: 12px;
    margin-inline: var(--inset);
    margin-top: 0.3rem;
}

.flow__arrow::before {
    content: "";
    position: absolute;
    left: 0;
    right: 4px;
    top: 50%;
    border-top: 1.5px solid var(--ink);
}

.flow__arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid var(--ink);
    border-right: 1.5px solid var(--ink);
    transform: translateY(-50%) rotate(45deg);
}

.flow__msg--rtl .flow__text {
    text-align: right;
}

.flow__msg--rtl .flow__arrow {
    transform: scaleX(-1);
}

.flow__msg--key .flow__text {
    color: var(--cobalt-text);
    font-weight: 680;
}

.flow__msg--key .flow__arrow::before,
.flow__msg--key .flow__arrow::after {
    border-color: var(--cobalt-text);
}

.flow__msg--key .flow__arrow::before {
    border-top-style: dashed;
    border-top-width: 2px;
}

.callout {
    margin-block: 2rem;
    padding: 1.25rem 1.4rem;
    background: var(--navy);
    color: var(--white);
}

.callout p {
    color: var(--navy-soft);
}

.callout > * + * {
    margin-top: 0.6em;
}

.callout__title {
    font-weight: 700;
    color: var(--white) !important;
}

.compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-block: 2rem;
    border: 1px solid var(--rule);
}

.compare > div {
    padding: 1.25rem 1.4rem;
}

.compare > div + div {
    border-left: 1px solid var(--rule);
}

.compare h3 {
    font-size: var(--step-0) !important;
    margin-top: 0 !important;
}

.compare > div:first-child h3 {
    color: var(--cobalt-text);
}

.compare p {
    margin-top: 0.4rem;
    font-size: 0.9688rem;
    color: var(--ink-2);
}

@media (max-width: 34rem) {
    .compare {
        grid-template-columns: 1fr;
    }

    .compare > div + div {
        border-left: 0;
        border-top: 1px solid var(--rule);
    }
}

.review-note {
    margin-block: 1.5rem;
    padding: 0.9rem 1.1rem;
    background: #fff7d6;
    border: 1px dashed #9a7b00;
    font-size: 0.875rem;
    color: #3b2f00 !important;
}

.review-note strong {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    margin-block: 1.5rem;
}

.legal-table caption {
    text-align: left;
    font-weight: 700;
    padding-bottom: 0.5rem;
}

.legal-table th,
.legal-table td {
    text-align: left;
    vertical-align: top;
    padding: 0.75rem 1rem 0.75rem 0;
    border-bottom: 1px solid var(--rule);
}

.legal-table thead th {
    border-bottom: 2px solid var(--ink);
}

.table-scroll {
    overflow-x: auto;
}

.facts {
    border-top: 2px solid var(--ink);
    margin-block: 1.5rem;
}

.facts div {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 0.25rem 1.5rem;
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--rule);
}

.facts dt {
    font-weight: 650;
}

.facts dd {
    color: var(--ink-2);
}

@media (max-width: 34rem) {
    .facts div {
        grid-template-columns: 1fr;
    }
}

.split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2.5rem var(--gutter);
    align-items: start;
}

.split__main {
    grid-column: 1 / span 7;
}

.split__side {
    grid-column: 9 / span 4;
}

@media (max-width: 56rem) {
    .split__main,
    .split__side {
        grid-column: 1 / -1;
    }
}

.side-panel {
    padding-top: 1rem;
    border-top: 2px solid var(--ink);
}

.side-panel + .side-panel {
    margin-top: 2.25rem;
}

.side-panel__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.side-panel p,
.side-panel li {
    margin-top: 0.6rem;
    font-size: 0.9688rem;
    color: var(--ink-2);
}

.side-panel ul {
    list-style: none;
    padding: 0;
}

.side-panel li {
    display: flex;
    gap: 0.6rem;
}

.side-panel li .icon {
    margin-top: 0.2em;
    color: var(--cobalt-text);
}

/* Confirmation and errors */

.notice {
    padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) var(--section);
}

.notice__panel {
    max-width: 44rem;
    padding: clamp(1.75rem, 1rem + 3vw, 3rem);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--cobalt);
}

.notice__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    background: var(--cobalt);
    color: var(--ink);
    margin-bottom: 1.5rem;
}

.notice__icon .icon {
    stroke-width: 2.4;
}

.notice__panel .lede {
    margin-top: 1.25rem;
}

.notice__next {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.notice__panel .actions {
    margin-top: 2rem;
}

/* ---------- Staff area ---------- */

.staff {
    padding-block: 2.5rem 5rem;
}

.staff-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.staff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.staff-table th,
.staff-table td {
    text-align: left;
    padding: 0.75rem 1rem 0.75rem 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

.staff-table thead th {
    border-bottom: 2px solid var(--ink);
}

.status-pill {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 650;
    background: var(--grey-2);
}

.status-pill--new {
    background: var(--cobalt);
    color: var(--ink);
}

.staff-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-block: 1.5rem;
}

.staff-filters a[aria-current="page"] {
    font-weight: 700;
    color: var(--cobalt-text);
}

.select {
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--field);
    border-radius: var(--radius);
    background: var(--white);
    font: inherit;
}

.flash {
    margin-block: 1rem;
    padding: 0.75rem 1rem;
    background: var(--cobalt-wash);
    border: 1px solid var(--cobalt);
}

.pagination {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

@media print {
    .site-header,
    .site-footer,
    .cta-strip {
        display: none;
    }
}

/* Figures line up only where they are data. */
.legal-table,
.staff-table,
.counter,
.steps__num {
    font-variant-numeric: tabular-nums;
}

/* About: commitments as a ruled two-column schedule. */
.commitments {
    border-top: 2px solid var(--ink);
}

.commitments div {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 0.35rem var(--gutter);
    padding-block: 1.35rem;
    border-bottom: 1px solid var(--rule);
}

.commitments dt {
    font-size: var(--step-1);
    font-weight: 700;
    line-height: 1.3;
}

.commitments dd {
    color: var(--ink-2);
    max-width: 36em;
}

@media (max-width: 48rem) {
    .commitments div {
        grid-template-columns: 1fr;
    }
}

/* A message spanning all three lanes keeps its label clear of the middle lifeline. */
.flow__msg--span3 .flow__text {
    margin-right: calc(50% + 0.5rem);
}

.flow__msg--span3.flow__msg--rtl .flow__text {
    margin-right: calc(var(--inset) + 0.5rem);
    margin-left: calc(50% + 0.5rem);
}

/* Client-side errors inside the short form on the orange field. */
.lead-form .error-summary,
.lead-form .lead-form__errors { grid-column: 1 / -1; }

.lead-form .error-summary { margin-bottom: 0; }

.lead-form .field__error { margin: 0; color: #3a0b00 !important; }