/* ==========================================================================
   CLOUD PUBLICATIONS — PAGE-SPECIFIC STYLES
   Rules that apply to one template only. Each page carries a body class
   (page-home, page-about, ...) so overrides stay scoped and predictable.
   ========================================================================== */

/* Homepage ----------------------------------------------------------------
   Hero spacing is owned by components.css and responsive.css. Do not set it
   here: a .page-home prefix outranks the mobile overrides and breaks the
   small-screen rhythm. */

/* Interior pages: shared banner ------------------------------------------- */
.page-banner {
    padding: 4.5rem 0 3.5rem;
    background-color: var(--cp-light-gray);
    border-bottom: 1px solid var(--cp-border);
}

.page-banner__title {
    max-width: 22ch;
    margin-bottom: 1rem;
}

.page-banner__lead {
    max-width: 60ch;
    margin-bottom: 0;
    color: var(--cp-muted);
    font-size: 1.08rem;
}

/* Breadcrumb -------------------------------------------------------------- */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.84rem;
    color: var(--cp-muted);
}

.breadcrumb li::after {
    content: "/";
    margin-left: 0.5rem;
    color: var(--cp-border-strong);
}

.breadcrumb li:last-child::after {
    content: none;
}

.breadcrumb a {
    color: var(--cp-muted);
}

.breadcrumb a:hover {
    color: var(--cp-secondary);
}

.breadcrumb [aria-current="page"] {
    color: var(--cp-primary);
    font-weight: 600;
}


/* Colophon ---------------------------------------------------------------- */
.colophon {
    padding: 2.25rem 2rem;
    border-radius: var(--cp-radius-lg);
    background-image: var(--cp-gradient-deep);
    color: rgba(226, 232, 240, 0.78);
}

.colophon__title {
    margin-bottom: 1.35rem;
    color: var(--cp-white);
    font-size: 1.25rem;
}

.colophon__list {
    margin: 0;
    display: grid;
}

.colophon__list > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: baseline;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.colophon__list > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.colophon__list dt {
    font-size: 0.92rem;
    color: rgba(148, 163, 184, 0.95);
}

.colophon__list dd {
    margin: 0;
    font-family: var(--cp-font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cp-white);
    text-align: right;
}

.colophon__list dd.is-ok {
    color: var(--cp-success);
}

/* Body copy that follows a .section__lead --------------------------------- */
.origin__text,
.elearning__text,
.approach__text {
    max-width: 62ch;
    margin-top: 1.1rem;
    color: var(--cp-muted);
    font-size: 0.99rem;
}

.elearning__text {
    color: rgba(226, 232, 240, 0.72);
}

.approach__text {
    margin-bottom: 1.75rem;
}

/* Panel card: a titled container for tag lists ---------------------------- */
.panel-card {
    height: 100%;
    padding: 2rem 1.85rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    background-color: var(--cp-white);
    transition: border-color var(--cp-transition), box-shadow var(--cp-transition);
}

.panel-card:hover {
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: var(--cp-shadow-sm);
}

.panel-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 1.35rem;
    border-radius: 15px;
    background-image: var(--cp-gradient-subtle);
    color: var(--cp-accent-text);
    font-size: 1.15rem;
}

.panel-card__title {
    margin-bottom: 1.25rem;
    font-size: 1.15rem;
}

/* Tag list ---------------------------------------------------------------- */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.tag {
    padding: 0.42rem 0.9rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-pill);
    background-color: var(--cp-background);
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--cp-text);
    transition: border-color var(--cp-transition), color var(--cp-transition);
}

.tag:hover {
    border-color: var(--cp-accent);
    color: var(--cp-accent-text);
}

/* Feature list (used on dark sections) ------------------------------------ */
.feature-list {
    display: grid;
    gap: 1.4rem;
}

.feature-list__item {
    display: grid;
    grid-template-columns: 2.35rem 1fr;
    gap: 1rem;
    align-items: start;
}

.feature-list__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background-color: rgba(251, 146, 60, 0.16);
    color: var(--cp-accent);
    font-size: 0.95rem;
}

.feature-list__title {
    margin-bottom: 0.25rem;
    font-size: 1.03rem;
    color: var(--cp-white);
}

.feature-list__text {
    margin-bottom: 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(226, 232, 240, 0.7);
}

/* Vision / mission / values ------------------------------------------------
   The middle card is the mission and carries the strapline, so it is given
   the dark treatment to anchor the row rather than reading as three equals. */
.vmv-card {
    height: 100%;
    padding: 2.25rem 1.9rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    background-color: var(--cp-white);
    transition: transform var(--cp-transition), box-shadow var(--cp-transition);
}

.vmv-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--cp-shadow-md);
}

.vmv-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.4rem;
    border-radius: 15px;
    background-image: var(--cp-gradient-subtle);
    color: var(--cp-accent-text);
    font-size: 1.15rem;
}

.vmv-card__title {
    margin-bottom: 0.85rem;
    font-size: 1.3rem;
}

.vmv-card__text {
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--cp-muted);
}

.vmv-card__quote {
    margin-bottom: 1rem;
    padding-left: 0.9rem;
    border-left: 3px solid var(--cp-accent);
    font-family: var(--cp-font-heading);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--cp-white);
}

.vmv-card--feature {
    background-image: var(--cp-gradient-deep);
    border-color: transparent;
}

.vmv-card--feature .vmv-card__icon {
    background-image: var(--cp-gradient-warm);
    color: var(--cp-white);
}

.vmv-card--feature .vmv-card__title {
    color: var(--cp-white);
}

.vmv-card--feature .vmv-card__text {
    color: rgba(226, 232, 240, 0.75);
}

/* Quick index -------------------------------------------------------------
   Anchor links to each service. Wrapping chips rather than a fixed grid, so
   the row reflows cleanly at any width without orphaning a single item. */
.jump__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.jump__link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-pill);
    background-color: var(--cp-white);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--cp-text);
    transition: border-color var(--cp-transition),
                color var(--cp-transition),
                transform var(--cp-transition);
}

.jump__link .ico {
    color: var(--cp-accent-text);
    font-size: 0.95rem;
}

.jump__link:hover,
.jump__link:focus-visible {
    border-color: var(--cp-accent);
    color: var(--cp-accent-text);
    transform: translateY(-2px);
}

/* Service rows ------------------------------------------------------------
   A full-width row per service rather than the homepage grid: there is more
   detail to carry here, and a two-column card would force the inclusions
   list into an unreadable column. */
.service-rows {
    display: grid;
    gap: 1.25rem;
}

.service-row {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 1.75rem;
    padding: 2.25rem 2rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    background-color: var(--cp-white);
    scroll-margin-top: 7rem;
    transition: border-color var(--cp-transition), box-shadow var(--cp-transition);
}

.service-row:hover {
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: var(--cp-shadow-md);
}

/* :target covers arriving with a hash already in the URL; .is-target covers
   in-page clicks, where pushState updates the URL without re-firing :target. */
.service-row:target,
.service-row.is-target {
    border-color: var(--cp-accent);
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.16);
}

.service-row__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.service-row__number {
    font-family: var(--cp-font-heading);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--cp-border-strong);
}

.service-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background-image: var(--cp-gradient-subtle);
    color: var(--cp-accent-text);
    font-size: 1.15rem;
    transition: background-image var(--cp-transition), color var(--cp-transition);
}

.service-row:hover .service-row__icon {
    background-image: var(--cp-gradient-warm);
    color: var(--cp-white);
}

.service-row__title {
    margin-bottom: 0.7rem;
    font-size: 1.35rem;
}

.service-row__text {
    max-width: 72ch;
    margin-bottom: 1.5rem;
    color: var(--cp-muted);
    font-size: 0.98rem;
}

.service-row__foot {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.75rem;
    align-items: end;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cp-border);
}

/* Check list --------------------------------------------------------------- */
.check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1.5rem;
}

.check-list li {
    display: grid;
    grid-template-columns: 1.15rem 1fr;
    gap: 0.6rem;
    align-items: start;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--cp-muted);
}

.check-list .ico {
    margin-top: 0.25rem;
    color: var(--cp-success);
    font-size: 0.8rem;
}

/* Contact channels --------------------------------------------------------
   Whole card is the link, so the tap target is the card rather than the phone
   number alone. */
.channel-card {
    display: block;
    height: 100%;
    padding: 1.85rem 1.5rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    background-color: var(--cp-white);
    color: var(--cp-text);
    transition: transform var(--cp-transition),
                border-color var(--cp-transition),
                box-shadow var(--cp-transition);
}

.channel-card:hover,
.channel-card:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: var(--cp-shadow-md);
    color: var(--cp-text);
}

.channel-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.15rem;
    border-radius: 14px;
    background-image: var(--cp-gradient-subtle);
    color: var(--cp-accent-text);
    font-size: 1.05rem;
    transition: background-image var(--cp-transition), color var(--cp-transition);
}

.channel-card:hover .channel-card__icon {
    background-image: var(--cp-gradient-warm);
    color: var(--cp-white);
}

.channel-card--wa:hover .channel-card__icon {
    background-image: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}

.channel-card__title {
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cp-muted);
}

.channel-card__value {
    margin-bottom: 0.45rem;
    font-family: var(--cp-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--cp-primary);
    overflow-wrap: anywhere;
}

.channel-card__note {
    margin-bottom: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--cp-muted);
}

/* Stacked variant of the check list --------------------------------------- */
.check-list--stack {
    grid-template-columns: 1fr;
    margin: 2rem 0;
}

/* Office block ------------------------------------------------------------ */
.office {
    padding: 1.6rem 1.5rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background-color: var(--cp-white);
}

.office__title {
    margin-bottom: 0.85rem;
    font-size: 1rem;
}

.office__address {
    margin-bottom: 0.9rem;
    font-size: 0.94rem;
    line-height: 1.7;
    color: var(--cp-muted);
}

.office__hours {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0;
    font-size: 0.87rem;
    color: var(--cp-muted);
}

.office__hours .ico {
    color: var(--cp-accent-text);
}

/* Form card ---------------------------------------------------------------
   Dark panel. The form is the page's single conversion point, so it is given
   the same treatment as the site's other dark panels to lift it off the tinted
   section behind it. Field styling is overridden here rather than in forms.css
   because the light-on-dark inversion applies only inside this card. */
.form-card {
    padding: 2.35rem 2.1rem;
    border: 1px solid var(--cp-slate-700);
    border-radius: var(--cp-radius-lg);
    background-image: var(--cp-gradient-deep);
    box-shadow: var(--cp-shadow-lg);
}

.form-card__intro {
    margin-bottom: 1.6rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--cp-slate-700);
    font-size: 0.87rem;
    color: rgba(148, 163, 184, 0.95);
}

.form-card .field__label {
    color: var(--cp-white);
}

.form-card .field__hint {
    color: rgba(148, 163, 184, 0.85);
}

/* Field outlines.

   Two constraints pull against each other here. The border wants to be dark
   to match the panel, but WCAG 2.2 requires 3:1 against the adjacent fill for
   a UI component boundary, and anything darker than #64748B fails that on
   this near-black fill (#334155 measures 1.85:1 and effectively disappears).

   The resolution is to darken the *fill* to near-black and hold the border at
   the lightest tone that still reads as slate. The field then looks recessed
   and distinctly darker than the panel, while its edge stays visible.

   2px rather than 1.5px: fractional widths round down to 1px at standard
   pixel density, so the extra weight was being discarded. */
.form-card .field__input,
.form-card .field__select,
.form-card .field__textarea {
    border: 2px solid var(--cp-muted);
    background-color: rgba(2, 6, 23, 0.72);
    color: var(--cp-white);
}

.form-card .field__input:hover,
.form-card .field__select:hover,
.form-card .field__textarea:hover {
    border-color: var(--cp-muted-soft);
    background-color: rgba(2, 6, 23, 0.55);
}

.form-card .field__input::placeholder,
.form-card .field__textarea::placeholder {
    color: rgba(148, 163, 184, 0.7);
}

.form-card .field__input:focus,
.form-card .field__select:focus,
.form-card .field__textarea:focus {
    border-color: var(--cp-accent);
    background-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.22);
}

/* The native arrow is drawn in the text colour, which disappears on a dark
   field, so a light chevron is supplied and the default suppressed. */
.form-card .field__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23CBD5E1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}

/* Options render in the operating system's own menu, which stays light. */
.form-card .field__select option {
    color: var(--cp-text);
    background-color: var(--cp-white);
}

.form-card .field__input[aria-invalid="true"],
.form-card .field__select[aria-invalid="true"],
.form-card .field__textarea[aria-invalid="true"] {
    border-color: #F87171;
}

/* #B91C1C fails contrast on navy; this passes AA at 4.9:1. */
.form-card .field__error {
    color: #FCA5A5;
}

.form-card .field__check {
    color: rgba(226, 232, 240, 0.82);
}

.form-card .field__check input {
    accent-color: var(--cp-accent-deep);
}

/* The checkbox row is its own grid; its error belongs beneath the whole row. */
.field--full > .field__error {
    margin-top: 0.5rem;
}

.form-card .req {
    color: var(--cp-accent);
}

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

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

/* Required marker: the asterisk is decorative, the required attribute is
   what actually communicates the constraint to assistive technology. */
.req {
    color: var(--cp-accent-text);
    font-weight: 700;
}

.field__check {
    display: grid;
    grid-template-columns: 1.15rem 1fr;
    gap: 0.7rem;
    align-items: start;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--cp-muted);
    cursor: pointer;
}

.field__check input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.2rem 0 0;
    accent-color: var(--cp-secondary);
}

.form-card__submit {
    width: 100%;
    margin-top: 0.5rem;
}

.form-card__note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 1.4rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cp-slate-700);
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(148, 163, 184, 0.9);
}

.form-card__note .ico {
    margin-top: 0.2rem;
    flex: none;
    color: var(--cp-success);
}

/* FAQ groups --------------------------------------------------------------
   Each topic is its own <section> with its own accordion, so data-bs-parent
   keeps the "one open at a time" behaviour scoped to a topic rather than
   collapsing a question the reader opened three topics ago. */
.faq-groups .container > .faq-group + .faq-group {
    margin-top: 3.5rem;
    padding-top: 3.5rem;
    border-top: 1px solid var(--cp-border);
}

.faq-group {
    scroll-margin-top: 7rem;
}

/* Sticky so the topic stays visible while its questions are scrolled. */
.faq-group__intro {
    position: sticky;
    top: 7rem;
}

.faq-group__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 1.15rem;
    border-radius: 15px;
    background-image: var(--cp-gradient-subtle);
    color: var(--cp-accent-text);
    font-size: 1.1rem;
}

.faq-group__title {
    margin-bottom: 0.5rem;
    font-size: clamp(1.4rem, 2vw, 1.75rem);
}

.faq-group__sub {
    margin-bottom: 0;
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--cp-muted);
}

/* Service page banner ----------------------------------------------------- */
.page-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1.35rem;
    border-radius: 16px;
    background-image: var(--cp-gradient-warm);
    color: var(--cp-white);
    font-size: 1.25rem;
    box-shadow: 0 12px 26px rgba(234, 88, 12, 0.24);
}

.page-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* Stacked panel cards -----------------------------------------------------
   .panel-card is height:100% so that cards sitting side by side in a grid row
   line up. Where two cards stack inside a single column that rule makes the
   first card consume the whole column, pushing the second one out of the
   section and behind the next one's background. Inside the overview sidebar
   the cards size to their own content instead. */
.overview .panel-card {
    height: auto;
}

.panel-card--stacked {
    margin-top: 1.25rem;
}

.section__head--wide {
    max-width: none;
}

/* Resource cards ---------------------------------------------------------- */
.resource-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    background-color: var(--cp-white);
    transition: transform var(--cp-transition),
                border-color var(--cp-transition),
                box-shadow var(--cp-transition);
}

.resource-card:hover {
    transform: translateY(-6px);
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: var(--cp-shadow-md);
}

.resource-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1.25rem;
    border-radius: 14px;
    background-image: var(--cp-gradient-subtle);
    color: var(--cp-accent-text);
    font-size: 1.05rem;
}

.resource-card__meta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.65rem;
    font-size: 0.78rem;
    color: var(--cp-muted);
}

.resource-card__kind {
    padding: 0.22rem 0.65rem;
    border-radius: var(--cp-radius-pill);
    background-color: rgba(251, 146, 60, 0.16);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--cp-accent-text);
}

.resource-card__title {
    margin-bottom: 0.6rem;
    font-size: 1.12rem;
}

.resource-card__text {
    margin-bottom: 1.4rem;
    font-size: 0.93rem;
    line-height: 1.7;
    color: var(--cp-muted);
}

.resource-card .link-arrow {
    margin-top: auto;
}

/* Policy list ------------------------------------------------------------- */
.policy-list {
    display: grid;
    gap: 0.85rem;
}

.policy-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background-color: var(--cp-white);
    color: var(--cp-primary);
    transition: border-color var(--cp-transition),
                transform var(--cp-transition),
                box-shadow var(--cp-transition);
}

.policy-link:hover {
    transform: translateX(4px);
    border-color: var(--cp-accent);
    color: var(--cp-primary);
    box-shadow: var(--cp-shadow-sm);
}

.policy-link > span {
    flex: 1;
}

.policy-link > .ico {
    flex: none;
    color: var(--cp-accent-text);
}

.policy-link__title {
    display: block;
    font-family: var(--cp-font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
}

.policy-link__desc {
    display: block;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--cp-muted);
}

/* Role cards -------------------------------------------------------------- */
.role-list {
    display: grid;
    gap: 1.25rem;
}

.role-card {
    padding: 2rem 1.9rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    background-color: var(--cp-white);
    transition: border-color var(--cp-transition), box-shadow var(--cp-transition);
}

.role-card:hover {
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: var(--cp-shadow-md);
}

.role-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}

.role-card__dept {
    margin-bottom: 0.4rem;
    font-family: var(--cp-font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cp-accent-text);
}

.role-card__title {
    margin-bottom: 0.3rem;
    font-size: 1.22rem;
}

.role-card__where {
    margin-bottom: 0;
    font-size: 0.88rem;
    color: var(--cp-muted);
}

.role-card__text {
    max-width: 72ch;
    margin-bottom: 1.25rem;
    font-size: 0.96rem;
    line-height: 1.7;
    color: var(--cp-muted);
}

/* Legal / policy documents ------------------------------------------------
   Long-form prose, so the measure is capped and the table of contents is
   sticky beside it rather than stranded at the top of a long scroll. */
.doc__updated {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-pill);
    background-color: var(--cp-white);
    font-size: 0.85rem;
    color: var(--cp-muted);
}

.doc__updated .ico {
    color: var(--cp-accent-text);
}

.doc__toc {
    position: sticky;
    top: 7rem;
    padding: 1.5rem 1.4rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background-color: var(--cp-light-gray);
}

.doc__toc-title {
    margin-bottom: 0.9rem;
    font-family: var(--cp-font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cp-muted);
}

.doc__toc-list {
    counter-reset: toc;
    display: grid;
    gap: 0.5rem;
}

.doc__toc-list li {
    counter-increment: toc;
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    gap: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.doc__toc-list li::before {
    content: counter(toc) ".";
    font-family: var(--cp-font-heading);
    font-weight: 700;
    color: var(--cp-accent-text);
}

/* 24px minimum tap target (WCAG 2.5.8). These are stacked navigation links,
   not inline prose, so the inline exception does not apply. */
.doc__toc-list a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--cp-text);
}

.doc__toc-list a:hover {
    color: var(--cp-accent-text);
}

.doc__body {
    max-width: 72ch;
}

.doc__section {
    scroll-margin-top: 7rem;
}

.doc__section + .doc__section {
    margin-top: 2.75rem;
    padding-top: 2.75rem;
    border-top: 1px solid var(--cp-border);
}

.doc__heading {
    margin-bottom: 1rem;
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
}

.doc__body p {
    margin-bottom: 1.1rem;
    font-size: 0.99rem;
    line-height: 1.8;
    color: var(--cp-muted);
}

.doc__body p:last-child {
    margin-bottom: 0;
}

.doc__list {
    display: grid;
    gap: 0.65rem;
    margin: 0 0 1.25rem;
    padding-left: 0;
}

.doc__list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.99rem;
    line-height: 1.75;
    color: var(--cp-muted);
}

.doc__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--cp-accent);
}

/* Blog --------------------------------------------------------------------
   No article images exist yet, so each card carries a tinted glyph panel
   instead. It keeps the grid rhythm without shipping placeholder photos. */
.page-banner__tags {
    margin-top: 1.75rem;
}

.post-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    background-color: var(--cp-white);
    overflow: hidden;
    transition: transform var(--cp-transition),
                border-color var(--cp-transition),
                box-shadow var(--cp-transition);
}

.post-card:hover {
    transform: translateY(-6px);
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: var(--cp-shadow-md);
}

/* A <span>, not a link: the individual article pages do not exist yet, so
   the panel is decorative and the card's call to action requests a copy. */
.post-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    background-image: var(--cp-gradient-subtle);
}

.post-card__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background-color: var(--cp-white);
    color: var(--cp-accent-text);
    font-size: 1.25rem;
    box-shadow: var(--cp-shadow-sm);
    transition: transform var(--cp-transition);
}

.post-card:hover .post-card__glyph {
    transform: scale(1.08);
}

.post-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.6rem 1.5rem;
}

.post-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
    font-size: 0.79rem;
    color: var(--cp-muted);
}

.post-card__cat {
    padding: 0.22rem 0.65rem;
    border-radius: var(--cp-radius-pill);
    background-color: rgba(251, 146, 60, 0.16);
    font-weight: 600;
    color: var(--cp-accent-text);
}

.post-card__cat--light {
    background-color: rgba(251, 146, 60, 0.22);
    color: #FDBA74;
}

.post-card__read::before {
    content: "\00B7";
    margin-right: 0.65rem;
}

.post-card__title {
    margin-bottom: 0.65rem;
    font-size: 1.1rem;
    line-height: 1.45;
}

.post-card__title a {
    color: var(--cp-primary);
}

.post-card__title a:hover {
    color: var(--cp-accent-text);
}

.post-card__text {
    margin-bottom: 1.35rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--cp-muted);
}

.post-card__body .link-arrow {
    margin-top: auto;
}

/* Featured post ----------------------------------------------------------- */
.feature-post {
    display: grid;
    grid-template-columns: 260px 1fr;
    border-radius: var(--cp-radius-xl);
    background-image: var(--cp-gradient-deep);
    overflow: hidden;
    box-shadow: var(--cp-shadow-lg);
    scroll-margin-top: 7rem;
}

.feature-post__aside {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--cp-gradient-warm);
}

.feature-post__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    border-radius: 24px;
    background-color: rgba(255, 255, 255, 0.18);
    color: var(--cp-white);
    font-size: 1.9rem;
}

.feature-post__body {
    padding: 2.5rem 2.25rem;
}

.feature-post__body .post-card__meta {
    color: rgba(148, 163, 184, 0.95);
}

.feature-post__title {
    margin-bottom: 0.9rem;
    color: var(--cp-white);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
}

.feature-post__text {
    max-width: 68ch;
    margin-bottom: 1.35rem;
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(226, 232, 240, 0.78);
}

.feature-post__note {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
    font-size: 0.86rem;
    color: rgba(148, 163, 184, 0.9);
}

.feature-post__note .ico {
    color: var(--cp-accent);
}

/* Journal cards -----------------------------------------------------------
   Titles run long (up to eleven words), so the card is built to accommodate
   that rather than truncating: the abbreviation carries quick recognition
   and the full title is allowed to wrap. */
.journals__note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    max-width: 70ch;
    margin: 2.5rem auto 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--cp-border);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--cp-muted);
}

.journals__note .ico {
    margin-top: 0.25rem;
    flex: none;
    color: var(--cp-success);
}

.journal-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.85rem 1.6rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    background-color: var(--cp-white);
    transition: transform var(--cp-transition),
                border-color var(--cp-transition),
                box-shadow var(--cp-transition);
}

.journal-card:hover {
    transform: translateY(-5px);
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: var(--cp-shadow-md);
}

.journal-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.journal-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background-image: var(--cp-gradient-subtle);
    color: var(--cp-accent-text);
    font-size: 1.05rem;
    transition: background-image var(--cp-transition), color var(--cp-transition);
}

.journal-card:hover .journal-card__icon {
    background-image: var(--cp-gradient-warm);
    color: var(--cp-white);
}

.journal-card__abbr {
    font-family: var(--cp-font-heading);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--cp-border-strong);
}

.journal-card__title {
    margin-bottom: 0.7rem;
    font-size: 1.02rem;
    line-height: 1.45;
}

.journal-card__title a {
    color: var(--cp-primary);
}

.journal-card__title a:hover {
    color: var(--cp-accent-text);
}

.journal-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
}

.journal-card__issn,
.journal-card__oa {
    padding: 0.2rem 0.6rem;
    border-radius: var(--cp-radius-pill);
    font-family: var(--cp-font-mono, var(--cp-font-body));
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.journal-card__issn {
    background-color: var(--cp-light-gray);
    color: var(--cp-text);
}

/* Five titles have no ISSN listed on the journal platform; the card states
   that rather than leaving an unexplained gap. */
.journal-card__issn--none {
    color: var(--cp-muted);
    font-style: italic;
}

.journal-card__oa {
    background-color: rgba(34, 197, 94, 0.14);
    color: #15803D;
}

.journal-card__text {
    margin-bottom: 1.35rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--cp-muted);
}

.journal-card__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid var(--cp-border);
}

/* 24px minimum tap target (WCAG 2.5.8). */
.journal-card__issue {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: 0.85rem;
    color: var(--cp-muted);
}

.journal-card__issue:hover {
    color: var(--cp-accent-text);
}

/* Article pages -----------------------------------------------------------
   Long-form reading. The measure is capped near 70 characters and the type is
   set slightly larger than elsewhere, because this is the one place on the
   site where people read continuously rather than scan. */
.article__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
    padding: 0.35rem 0.9rem;
    border-radius: var(--cp-radius-pill);
    background-color: rgba(251, 146, 60, 0.16);
    font-family: var(--cp-font-heading);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cp-accent-text);
}

.article__title {
    max-width: 22ch;
}

.article__lead {
    max-width: 58ch;
    font-size: clamp(1.08rem, 1.6vw, 1.22rem);
    color: var(--cp-text);
}

.article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1.25rem;
    margin: 1.6rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cp-border);
    font-size: 0.86rem;
    color: var(--cp-muted);
}

.article__body {
    max-width: 70ch;
}

.article__body p {
    margin-bottom: 1.25rem;
    font-size: 1.04rem;
    line-height: 1.85;
    color: var(--cp-text);
}

.article__body > p:first-child {
    font-size: 1.1rem;
}

.article__h2 {
    margin: 2.75rem 0 1rem;
    font-size: clamp(1.28rem, 1.9vw, 1.55rem);
    scroll-margin-top: 7rem;
}

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

.article__body .doc__list li,
.article__ol li {
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--cp-text);
}

.article__ol {
    counter-reset: steps;
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding-left: 0;
}

/* The number is a ::before marker, so the item has exactly two grid children
   only when its text is a single anonymous run. Any inline element inside it
   — a <strong> lead-in, a link — becomes its own grid item, and every
   remaining word is placed in a separate implicit row. Padding plus an
   absolutely positioned marker keeps the layout as normal flowing text. */
.article__ol li {
    counter-increment: steps;
    position: relative;
    padding-left: 2.55rem;
}

.article__ol li::before {
    content: counter(steps);
    position: absolute;
    left: 0;
    top: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-image: var(--cp-gradient-warm);
    color: var(--cp-white);
    font-family: var(--cp-font-heading);
    font-size: 0.8rem;
    font-weight: 700;
}

.article__quote {
    margin: 2rem 0;
    padding: 0 0 0 1.5rem;
    border-left: 3px solid var(--cp-accent);
}

.article__quote p {
    margin: 0;
    font-family: var(--cp-font-heading);
    font-size: 1.14rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--cp-primary);
}

.article__note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1.75rem 0;
    padding: 1.25rem 1.35rem;
    border-radius: var(--cp-radius-md);
    background-color: var(--cp-light-gray);
    border-left: 3px solid var(--cp-secondary);
}

.article__note .ico {
    margin-top: 0.3rem;
    flex: none;
    color: var(--cp-secondary);
}

.article__note p {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.75;
    color: var(--cp-muted);
}

.article__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    justify-content: space-between;
    max-width: 70ch;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--cp-border);
}

.article__foot-text {
    flex: 1 1 22rem;
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.7;
    color: var(--cp-muted);
}

.feature-post__title a {
    color: var(--cp-white);
}

.feature-post__title a:hover {
    color: #FDBA74;
}

/* Journal pages -----------------------------------------------------------
   The badge row and fact box exist so the journal's identifying attributes
   sit in one scannable block. That serves a reader checking an ISSN and,
   equally, a language model or search engine extracting the same facts. */
.journal-banner__title {
    max-width: 26ch;
}

.journal-banner__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
}

.journal-badge {
    padding: 0.32rem 0.85rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-pill);
    background-color: var(--cp-white);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cp-text);
}

.journal-badge--abbr {
    background-image: var(--cp-gradient-warm);
    border-color: transparent;
    color: var(--cp-white);
    letter-spacing: 0.04em;
}

.journal-badge--oa {
    background-color: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.3);
    color: #15803D;
}

/* Fact box: a definition list rendered as a two-column table. */
.factbox {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2.5rem;
    margin: 0;
    padding: 1.75rem 1.9rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    background-color: var(--cp-white);
    box-shadow: var(--cp-shadow-sm);
}

.factbox > div {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 1rem;
    align-items: baseline;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--cp-border);
}

.factbox > div:nth-last-child(-n+2) {
    border-bottom: 0;
}

.factbox dt {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--cp-muted);
}

.factbox dd {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--cp-primary);
}

/* The platform row is the only link in the fact box; give it a 24px target. */
.factbox dd a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* Author help strip ------------------------------------------------------- */
.journal-help {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 2.5rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    background-color: var(--cp-white);
}

.journal-help__text {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1 1 24rem;
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--cp-muted);
}

.journal-help__text .ico {
    flex: none;
    color: var(--cp-accent-text);
}

/* Office contact list ------------------------------------------------------
   Repeats the channel cards in compact form beside the form, so the phone
   number is visible without scrolling back up the page. */
.office__contact {
    display: grid;
    gap: 0.7rem;
    margin: 0 0 1.1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--cp-border);
}

.office__contact li {
    display: grid;
    grid-template-columns: 1.2rem 1fr;
    gap: 0.6rem 0.65rem;
    align-items: baseline;
    font-size: 0.92rem;
}

.office__contact .ico {
    grid-row: span 2;
    align-self: center;
    color: var(--cp-accent-text);
}

.office__contact a {
    color: var(--cp-primary);
    font-weight: 600;
}

.office__contact a:hover {
    color: var(--cp-accent-text);
}

.office__contact-note {
    font-size: 0.79rem;
    color: var(--cp-muted);
}

/* Software cards ----------------------------------------------------------
   Deliberately plain: the package name is the information, so it carries the
   weight and nothing competes with it. */
.software-card {
    height: 100%;
    padding: 1.5rem 1.4rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background-color: var(--cp-white);
    transition: border-color var(--cp-transition), box-shadow var(--cp-transition);
}

.software-card:hover {
    border-color: var(--cp-accent);
    box-shadow: var(--cp-shadow-sm);
}

.software-card__name {
    margin-bottom: 0.45rem;
    font-size: 1.08rem;
    color: var(--cp-primary);
}

.software-card__text {
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--cp-muted);
}

/* Form status and confirmation ---------------------------------------------
   The visitor must always be told what happened. Silence after pressing send
   is the worst possible outcome: they assume it worked and we never receive
   it. Colours are chosen for contrast against the dark form panel. */
.form-card__status {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--cp-radius-sm);
    border-left: 3px solid transparent;
    font-size: 0.92rem;
    line-height: 1.6;
}

.form-card__status.is-pending {
    border-left-color: var(--cp-accent);
    background-color: rgba(251, 146, 60, 0.12);
    color: #FDBA74;
}

.form-card__status.is-error {
    border-left-color: #F87171;
    background-color: rgba(248, 113, 113, 0.12);
    color: #FCA5A5;
}

.form-card__done-title {
    margin-bottom: 0.75rem;
    font-family: var(--cp-font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cp-white);
}

.form-card__done-text {
    margin-bottom: 0;
    font-size: 0.97rem;
    line-height: 1.75;
    color: rgba(226, 232, 240, 0.82);
}

.form-card__done-text a {
    color: var(--cp-accent);
    text-decoration: underline;
}

.form-card__submit[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* 404 page ---------------------------------------------------------------- */
.error-page__code {
    margin-bottom: 0.5rem;
    font-family: var(--cp-font-heading);
    font-size: clamp(4rem, 12vw, 7rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    background-image: var(--cp-gradient-warm);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}