/* Back to top ---------------------------------------------------------------
   A fixed control that only exists when it is useful. The button ships hidden
   and stays hidden unless the script finds the document meaningfully longer
   than the viewport AND the reader has scrolled well past the fold, so short
   pages never carry it. Sits above content but clear of the CTA band, keeps a
   44px touch target, and is removed entirely from print.
   -------------------------------------------------------------------------- */

.to-top {
    position: fixed;
    right: clamp(14px, 3vw, 32px);
    bottom: clamp(14px, 3vw, 32px);
    z-index: 60;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 44px;
    padding: 0 16px 0 13px;

    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;

    background: var(--brand, #1D1B57);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(16, 16, 48, .28);
    cursor: pointer;

    /* Hidden state. Kept paint-cheap: no layout thrash on scroll. */
    opacity: 0;
    transform: translateY(12px) scale(.96);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, background-color .18s ease;
}

.to-top[hidden] { display: none !important; }

.to-top.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.to-top:hover,
.to-top:focus-visible { background: var(--brand-500, #2E2B7A); }

.to-top:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(29, 27, 87, .45);
}

.to-top:active { transform: translateY(1px); }

.to-top__icon {
    flex: none;
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Narrow screens: icon only, so the control never crowds the content. */
@media (max-width: 520px) {
    .to-top { padding: 0; width: 44px; justify-content: center; }
    .to-top__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    .to-top { transition: opacity .01s linear; transform: none; }
    .to-top.is-visible { transform: none; }
}

@media print { .to-top { display: none !important; } }

/* Card carousel -------------------------------------------------------------
   Progressive enhancement over the existing .card-grid. The grid is left
   exactly as it is until the script decides a given grid would benefit: only
   then does it get .is-carousel, which turns it into a single horizontal
   scroller with snap points and paddle buttons. Grids that already fit stay
   grids, so nothing that reads well today is turned into a swipe.
   -------------------------------------------------------------------------- */

.carousel {
    position: relative;
    /* Let cards bleed to the shell edge while keeping focus rings visible. */
    margin-inline: 0;
}

.card-grid.is-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(290px, 82%), 1fr);
    grid-template-columns: none;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    gap: 18px;
    padding-bottom: 6px;

    /* Hide the native bar; the paddles and snap points carry the affordance. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.card-grid.is-carousel::-webkit-scrollbar { width: 0; height: 0; }

.card-grid.is-carousel > * {
    scroll-snap-align: start;
    min-width: 0;
}

/* Filler cards exist only to square off a grid - useless in a scroller. */
.card-grid.is-carousel > .card--filler { display: none; }

.carousel__paddles {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.carousel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;

    color: var(--brand, #1D1B57);
    background: transparent;
    border: 1px solid var(--rule-light, #DDD9D2);
    border-radius: 999px;
    cursor: pointer;

    transition: background-color .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
}

.carousel__btn:hover:not(:disabled) {
    background: var(--brand, #1D1B57);
    border-color: var(--brand, #1D1B57);
    color: #fff;
}

.carousel__btn:focus-visible {
    outline: 2px solid var(--brand, #1D1B57);
    outline-offset: 2px;
}

.carousel__btn:disabled { opacity: .3; cursor: default; }

.carousel__btn svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* On a dark band the rule and text invert. */
.band--navy .carousel__btn,
.band--dark .carousel__btn {
    color: #fff;
    border-color: var(--rule-dark, rgba(255,255,255,.14));
}

.band--navy .carousel__btn:hover:not(:disabled),
.band--dark .carousel__btn:hover:not(:disabled) {
    background: #fff;
    border-color: #fff;
    color: var(--brand, #1D1B57);
}

@media (prefers-reduced-motion: reduce) {
    .card-grid.is-carousel { scroll-behavior: auto; }
}

/* Print and no-JS: always the plain grid. */
@media print {
    .card-grid.is-carousel {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);
        overflow: visible;
    }
    .carousel__paddles { display: none !important; }
}


/* Page masthead -------------------------------------------------------------
   An upgrade of .page-head for interior pages that open with nothing but a
   breadcrumb and an H1. The eyebrow names the section the page sits in, so a
   reader arriving from search knows where they have landed before reading the
   heading. Applied only where a page has no hero of its own.
   -------------------------------------------------------------------------- */

.page-head--masthead .page-head__eyebrow {
    display: block;
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--periwinkle, #C9CBEC);
}

.page-head--masthead .page-head__title {
    max-width: 26ch;
    text-wrap: balance;
}

.page-head--masthead .page-head__rule {
    width: 64px;
    height: 2px;
    margin: clamp(18px, 2.6vw, 28px) 0 0;
    background: var(--periwinkle, #C9CBEC);
    border: 0;
    opacity: .55;
}

@media (max-width: 640px) {
    .page-head--masthead .page-head__eyebrow { letter-spacing: .12em; }
    .page-head--masthead .page-head__title { max-width: none; }
}


/* Article alignment fix ------------------------------------------------------
   Pages whose .block-label is hidden collapse the two-column article grid to a
   single 820px measure. Two things were then left over from the grid layout:
   the measure was centring inside the shell instead of aligning to the page
   title above it, and .table-wrap kept the negative pull that used to reclaim
   the label column - which threw tables out past the shell edge. Both are
   corrected here, where the collapse itself is defined.
   -------------------------------------------------------------------------- */

/* The masthead band carried a wider inner shell (1180px) than the article
   below it (var(--shell), 945px), so every interior page set its title and
   breadcrumb roughly 120px to the left of its own body text. The band stays
   full-bleed; only its inner measure is brought into line with the article. */
.page-head .shell { max-width: var(--shell); }
.page-head .crumbs .shell { max-width: none; }

.block:has(> .block-label[hidden]) .table-wrap {
    margin-left: 0;                 /* no label column left to reclaim */
    margin-right: 0;
    max-width: 100%;
    overflow-x: auto;               /* a wide table scrolls, it does not bleed */
}

/* Without :has support the block stays a grid, so the pull is still correct
   there and nothing above applies. */


/* Scouts page lead image ----------------------------------------------------
   A single wide photo above the opening heading. Sized by intrinsic ratio so
   it never causes layout shift, and capped at the article measure.
   -------------------------------------------------------------------------- */

.scouts-hero { margin: 0 0 clamp(22px, 3vw, 34px); }

.scouts-hero img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 2px;
}

.scouts-hero figcaption {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--text-soft, #5b5b6b);
}


/* Mini cards ----------------------------------------------------------------
   A compact alternative to the full .card for "Related" rails, where each
   item is a destination rather than a thing that needs selling. Denser than a
   card, more scannable than a bullet list, and it wraps instead of forcing a
   single column on a phone.
   -------------------------------------------------------------------------- */

.mini-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr));
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.mini-card {
    position: relative;
    display: block;
    padding: 13px 30px 13px 14px;

    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--rule-light, #DDD9D2);
    border-radius: 2px;

    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.mini-card:hover,
.mini-card:focus-visible {
    border-color: var(--brand, #1D1B57);
    background: var(--brand-tint, #F2F3F8);
    transform: translateY(-1px);
}

.mini-card:focus-visible { outline: 2px solid var(--brand, #1D1B57); outline-offset: 2px; }

.mini-card__name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--brand, #1D1B57);
}

.mini-card__note {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-soft, #5b5b6b);
}

/* The arrow sits in the reserved right padding, so it never collides with a
   name that wraps to two lines. */
.mini-card::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 12px;
    width: 11px;
    height: 11px;
    background-color: currentColor;
    color: var(--brand-300, #8F8CC4);
    -webkit-mask: var(--arrow-ne) no-repeat center / contain;
    mask: var(--arrow-ne) no-repeat center / contain;
}

.mini-card:hover::after { color: var(--brand, #1D1B57); }

@media print {
    .mini-cards { grid-template-columns: repeat(2, 1fr); }
    .mini-card { border-color: #bbb; }
}


/* Pillar submenu -------------------------------------------------------------
   The Services list outgrew a single column: forty service pages read as an
   undifferentiated dump. Grouping them under four headings makes the range
   legible at a glance. The headings are labels, not links - the pillars are a
   way of reading the list, not pages in their own right.
   -------------------------------------------------------------------------- */

.submenu--pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 4px 26px;
    min-width: min(880px, 92vw);
    padding: 20px 24px 18px;
}

.submenu--pillars .submenu__group { min-width: 0; }

.submenu--pillars .submenu__head {
    margin: 0 0 7px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-300, #8F8CC4);
}

.submenu--pillars ul { margin: 0; padding: 0; list-style: none; }
.submenu--pillars li { margin: 0; }

/* The trailing group is a catch-all rather than a pillar, so it is set apart
   by a rule rather than given a heading it does not deserve. */
.submenu__group--all { border-top: 1px solid var(--rule-light, #DDD9D2); padding-top: 10px; grid-column: 1 / -1; }
.submenu__group--all ul { display: flex; flex-wrap: wrap; gap: 4px 22px; }

@media (max-width: 900px) {
    .submenu--pillars { min-width: 0; grid-template-columns: 1fr; padding: 12px 16px; gap: 10px; }
    .submenu__group--all ul { flex-direction: column; gap: 0; }
}

/* Acknowledgement of Country ------------------------------------------------
   Sits above the copyright line, quieter than body copy but not hidden.
   -------------------------------------------------------------------------- */

.ack {
    max-width: 62ch;
    margin: 0 0 18px;
    padding-top: 22px;
    border-top: 1px solid var(--rule-dark, rgba(255,255,255,.14));
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--on-dark-soft, #8F92A6);
}

/* Project filters -----------------------------------------------------------
   Progressive enhancement over the .card-grid--index: the controls are built
   by script from the data attributes on the cards, so with no JS the full
   list is simply shown, which is the correct fallback.
   -------------------------------------------------------------------------- */

.filters { margin: 0 0 26px; }

.filters__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin-bottom: 10px; }

.filters__label {
    flex: 0 0 auto;
    min-width: 62px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-soft, #5b5b6b);
}

.chip {
    font: inherit;
    font-size: 12.5px;
    line-height: 1;
    padding: 7px 12px;
    color: var(--brand, #1D1B57);
    background: transparent;
    border: 1px solid var(--rule-light, #DDD9D2);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.chip:hover { border-color: var(--brand, #1D1B57); }
.chip:focus-visible { outline: 2px solid var(--brand, #1D1B57); outline-offset: 2px; }

.chip[aria-pressed="true"] {
    color: #fff;
    background: var(--brand, #1D1B57);
    border-color: var(--brand, #1D1B57);
}

.filters__count { font-size: 12.5px; color: var(--text-soft, #5b5b6b); }

.card[hidden] { display: none !important; }

@media print { .filters { display: none !important; } }


/* Capability statement ------------------------------------------------------
   One page meant to be read on screen and handed over as a PDF, so it is
   built for both: a denser rhythm than an article, and a print block that
   drops the chrome, opens the pillars into two columns and keeps the tables
   whole across page breaks.
   -------------------------------------------------------------------------- */

.cap-sheet .stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px 26px;
    margin: 26px 0 8px;
    padding: 22px 0;
    border-top: 1px solid var(--rule-light, #DDD9D2);
    border-bottom: 1px solid var(--rule-light, #DDD9D2);
}

.cap-pillar { margin: 0 0 26px; }
.cap-pillar h3 { margin-bottom: 4px; }
.cap-pillar > p { margin: 0 0 2px; color: var(--text-soft, #5b5b6b); }

.cap-clients {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 2px 22px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.cap-clients li { margin: 0; font-size: 14px; }

.cap-contact strong {
    display: inline-block;
    min-width: 66px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-soft, #5b5b6b);
}

.cap-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

@media print {
    /* The sheet is the document; everything else is website. */
    .site-header, .cta-band, .site-footer, .cap-actions, .to-top, .crumbs { display: none !important; }

    .page-head { padding: 0 0 12pt !important; border-bottom: 1pt solid #000; }
    .page-head__rule { display: none; }
    .page-head__eyebrow { color: #000 !important; }
    .page-head__title { font-size: 24pt; }

    .cap-sheet .stat-row { break-inside: avoid; border-color: #999; }
    .cap-pillar { break-inside: avoid; }
    .cap-sheet .mini-cards { grid-template-columns: repeat(3, 1fr); gap: 4pt; }
    .cap-sheet .mini-card { border: none; padding: 0; }
    .cap-sheet .mini-card::after { display: none; }
    .cap-sheet .mini-card__name { font-weight: 600; }
    .cap-clients { grid-template-columns: repeat(4, 1fr); }
    .table-wrap, table, tr { break-inside: avoid; }

    /* A printed page cannot be clicked, so spell the destinations out. */
    .cap-contact a[href^="mailto:"]::after,
    .cap-contact a[href^="tel:"]::after { content: ""; }
    .block-body h2 { break-after: avoid; }
}