/*
 * Styles for the dynamic portfolio and blog covers, kept out of style.css
 * because that file is compiled from public/scss and would overwrite anything
 * added here by hand. Values mirror the theme: $dark for the ground, $lt-30
 * for the lettering.
 */

/*
 * The theme's cover frames reserve their height with padding-bottom and then
 * absolutely position the image inside. A statically positioned fallback
 * collapses in that box - height:100% resolves against a zero-height content
 * area - which left a short band with the reserved space empty beneath it.
 * So this sits in the same layer as the image it replaces.
 */
.mil-letter-cover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 1);
}

.mil-letter-cover span {
    /* Scales with the frame, so it reads the same on a wide blog card and a
       tall portfolio tile without a breakpoint for each. */
    font-size: clamp(38px, 7vw, 84px);
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: -0.02em;
}

/* A word rather than initials: smaller, spaced, and allowed to wrap. */
.mil-letter-cover .mil-cover-label {
    max-width: 80%;
    font-size: clamp(16px, 2.2vw, 26px);
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

/* ---------- logo lockup ---------- */

/*
 * Sized in em so the mark tracks whatever font size the logo class sets, which
 * differs between the page frame, the footer and the admin sidebar.
 */
.mil-logo-lockup {
    display: inline-flex;
    align-items: center;
    gap: .26em;
    white-space: nowrap;
}

.mil-logo-mark {
    flex: none;
    width: .82em;
    height: .82em;
}

/* Standing alone it is the whole logo, so it takes the full type size. */
.mil-logo-lockup.is-mark-only .mil-logo-mark {
    width: 1em;
    height: 1em;
}

.mil-logo-name { line-height: 1; }

/* ---------- the page-frame logo ---------- */

/*
 * .mil-dark-bg paints a `backdrop-filter: invert(100%)` overlay at the same
 * z-index as .mil-frame, which is how the theme turns its black frame text
 * white over a dark section. That inversion also turned the accent square blue
 * - inverted, #FF9800 is exactly #0067FF - so the logo is lifted onto its own
 * fixed layer above the overlay and keeps its real colours everywhere.
 *
 * Only the logo is lifted. Black on accent is legible on a light and a dark
 * ground alike, so it needs no per-section variant, while the hamburger and the
 * frame text are single-colour and still want the theme's inversion.
 */
.mil-logo-fixed {
    position: fixed;
    top: 50px;
    left: 60px;
    /*
     * Just clear of the invert overlay (2) and no further: the curtain (4),
     * the slide-out menu and the preloader (both 9) must still cover the logo.
     */
    z-index: 3;
    pointer-events: all;
    color: #000000;
}

/* The logo left .mil-frame-top, so the menu button is the only child now. */
.mil-frame-top {
    justify-content: flex-end;
}

@media screen and (max-width: 1200px) {
    /*
     * Sits inside the theme's 90px mobile bar rather than floating over the
     * page, so it rides that bar's own layer (the frame goes to 999 here).
     */
    .mil-logo-fixed {
        top: 0;
        left: 30px;
        z-index: 1000;
        height: 90px;
        display: inline-flex;
        align-items: center;
    }
}

/* ---------- compact theme button ---------- */

/*
 * The theme's pill button is 70px tall, sized for a hero. This is the same
 * button - accent pill, dark arrow disc - scaled to sit in a footer column.
 */
.mil-button.mil-button-sm {
    height: 50px;
    padding: 0 6px 0 26px;
    letter-spacing: 1.5px;
}

.mil-button.mil-button-sm svg {
    margin-left: 18px;
    width: 38px;
    height: 38px;
    padding: 9px;
}

/* The same button without the arrow disc, so the label sits evenly inside. */
.mil-button.mil-button-sm.mil-button-plain {
    padding: 0 26px;
}

.mil-mt-30 { margin-top: 30px; }

/* ---------- required fields and inline errors ---------- */

/*
 * The theme's fields have no visible labels, only placeholders, so the
 * required marker sits inside the field at the right, level with the
 * placeholder text. The error slot lives in the 30px the theme already leaves
 * under every field, so an error appearing or clearing moves nothing.
 */
.mil-field {
    position: relative;
}

.mil-field-marker {
    position: absolute;
    top: 26px;
    right: 30px;
    font-size: 16px;
    line-height: 1;
    color: #FF9800;
    pointer-events: none;
}

.mil-field-textarea .mil-field-marker {
    top: 15px;
}

.mil-field-error {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 8px;
    font-size: 13px;
    line-height: 1.2;
    color: #c0392b;
}

.mil-field .is-invalid {
    border-bottom-color: #c0392b;
}

.mil-field .is-valid {
    border-bottom-color: rgba(0, 0, 0, 0.6);
}

/* ---------- policy pages ---------- */

/*
 * Privacy, terms and cookies share one frame: a lead, an "On this page" list,
 * numbered sections, and a contact card. Paragraph spacing is set here rather
 * than with utility classes, so the prose in pages/policies stays plain.
 */
.mil-policy {
    counter-reset: mil-policy-section;
    color: rgba(0, 0, 0, 0.6);
    font-size: 17px;
    line-height: 175%;
}

.mil-policy-lead .mil-text-xl {
    margin-bottom: 24px;
}

.mil-policy-updated {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 40px;
    background-color: rgba(0, 0, 0, 0.05);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.62);
}

/* contents */

.mil-policy-toc {
    margin: 60px 0 20px;
    padding: 36px 40px;
    border-radius: 20px;
    background-color: rgb(242, 242, 242);
}

.mil-policy-toc-title {
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.62);
}

/*
 * Two columns, each as wide as its longest title, filling down the first
 * column before the second. Titles never wrap; below 768px it is one column.
 */
.mil-policy-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mil-policy-toc;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--toc-rows, 5), auto);
    grid-template-columns: repeat(2, max-content);
    column-gap: 48px;
}

/* Number in its own fixed column, title on one line beside it. */
.mil-policy-toc li {
    counter-increment: mil-policy-toc;
    display: flex;
    align-items: baseline;
    padding: 6px 0;
    font-size: 15px;
    line-height: 140%;
    white-space: nowrap;
}

.mil-policy-toc li::before {
    content: counter(mil-policy-toc, decimal-leading-zero);
    flex: none;
    width: 30px;
    font-size: 12px;
    font-weight: 500;
    color: #FF9800;
}

.mil-policy .mil-policy-toc a:not(.mil-button) {
    color: #000000;
    text-decoration: none;
    transition: color .2s;
}

.mil-policy .mil-policy-toc a:not(.mil-button):hover {
    color: #FF9800;
}

@media screen and (max-width: 768px) {
    .mil-policy-toc {
        padding: 28px 24px;
    }

    .mil-policy-toc ol {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: 1fr;
    }

    .mil-policy-toc li {
        white-space: normal;
    }
}

/* sections */

.mil-policy-section {
    counter-increment: mil-policy-section;
    display: grid;
    grid-template-columns: 70px 1fr;
    padding: 50px 0;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    scroll-margin-top: 30px;
}

.mil-policy-section::before {
    content: counter(mil-policy-section, decimal-leading-zero);
    grid-row: 1 / span 2;
    padding-top: 7px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #FF9800;
}

.mil-policy-heading {
    margin-bottom: 20px;
    color: #000000;
}

.mil-policy-body {
    max-width: 760px;
}

/* Version and change-log line at the foot of each policy. */
.mil-policy-version {
    margin-bottom: 30px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
}

.mil-policy .mil-policy-body > * + * {
    margin-top: 20px;
}

.mil-policy .mil-policy-body > .mil-cookie-list,
.mil-policy .mil-policy-body > .mil-cookie-list + * {
    margin-top: 30px;
}

@media screen and (max-width: 768px) {
    .mil-policy-section {
        grid-template-columns: 1fr;
        padding: 40px 0;
        scroll-margin-top: 110px;
    }

    .mil-policy-section::before {
        grid-row: auto;
        padding: 0 0 8px;
    }
}

.mil-policy a:not(.mil-button) {
    color: #000000;
    text-decoration: underline;
    text-decoration-color: #FF9800;
    text-underline-offset: 3px;
}

.mil-policy a:not(.mil-button):hover {
    color: #FF9800;
}

.mil-policy strong {
    color: #000000;
    font-weight: 500;
}

/* lists */

.mil-policy-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mil-policy-list li {
    position: relative;
    padding-left: 26px;
}

.mil-policy-list li + li {
    margin-top: 12px;
}

.mil-policy-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .7em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FF9800;
}

/* A list of things we do not do: a struck-through dash instead of a dot. */
.mil-policy-list-no li::before {
    top: .85em;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.35);
}

/* cookie cards */

.mil-cookie-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.mil-cookie-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-radius: 20px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    background-color: #FFFFFF;
}

.mil-cookie-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

.mil-cookie-name {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    white-space: nowrap;
}

.mil-cookie-tag {
    padding: 4px 10px;
    border-radius: 40px;
    background-color: rgba(255, 152, 0, 0.14);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8a5200;
}

.mil-cookie-card p {
    flex: 1;
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 160%;
}

.mil-cookie-meta {
    display: flex;
    gap: 30px;
    margin: 0;
    padding-top: 16px;
    border-top: solid 1px rgba(0, 0, 0, 0.08);
}

.mil-cookie-meta dt {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.6);
}

.mil-cookie-meta dd {
    margin: 2px 0 0;
    font-size: 14px;
    color: #000000;
}

@media screen and (max-width: 768px) {
    .mil-cookie-list {
        grid-template-columns: 1fr;
    }
}

/* contact card */

.mil-policy-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 60px;
    padding: 36px 40px;
    border-radius: 20px;
    background-color: #000000;
}

.mil-policy-contact h5 {
    color: #FFFFFF;
}

.mil-policy-contact p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
}

@media screen and (max-width: 768px) {
    .mil-policy-contact {
        padding: 30px 24px;
    }
}

/* ---------- project listing card ---------- */

/*
 * The whole card opens the venture's page: an empty link stretched over it.
 * The cover and text are transformed by the theme's reveal animation, which
 * paints them at z-index 0, so the overlay at 1 sits above them. The actions
 * row is lifted to 2 so its own buttons stay clickable.
 */
.mil-project-card-item {
    position: relative;
    cursor: pointer;
}

.mil-project-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.mil-project-card-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 30px;
}

.mil-project-title-link {
    color: inherit;
    transition: color .2s;
}

/* The overlay takes the hover, so the card lights the title itself. */
.mil-project-card-item:hover .mil-project-title-link,
.mil-project-title-link:focus-visible {
    color: #FF9800;
}

.mil-project-card-item .mil-cover img {
    transition: transform .6s cubic-bezier(0, 0, 0.3642, 1);
}

.mil-project-card-item:hover .mil-cover img {
    transform: scale(1.04);
}

/* ---------- project detail page ---------- */

/* A short section label. The theme's suptitle trails a long rule that runs out
   of the cards these sit in, so this is the plain version. */
.mil-project-label {
    display: block;
    margin-bottom: 30px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FF9800;
}

.mil-project-label-light {
    color: rgba(255, 255, 255, 0.7);
}

.mil-project-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 10px;
}

.mil-project-cover {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding-bottom: 125%;
    background-color: #000000;
}

.mil-project-cover img,
.mil-project-cover .mil-letter-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mil-project-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px;
    margin: 0 0 50px;
    padding: 30px 0;
    border-top: solid 1px rgba(0, 0, 0, 0.1);
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.mil-project-facts dt {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.6);
}

.mil-project-facts dd {
    margin: 0;
    font-size: 17px;
    color: #000000;
}

.mil-project-facts a {
    color: #000000;
    text-decoration: underline;
    text-decoration-color: #FF9800;
    text-underline-offset: 3px;
}

.mil-project-facts a:hover {
    color: #FF9800;
}

.mil-project-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    list-style: none;
}

.mil-project-chips li {
    padding: 10px 18px;
    border-radius: 40px;
    background-color: rgb(242, 242, 242);
    font-size: 14px;
    color: #000000;
}

.mil-project-card {
    height: 100%;
    padding: 50px;
    border-radius: 20px;
    background-color: rgb(242, 242, 242);
}

.mil-project-card h4 {
    line-height: 140%;
}

.mil-project-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mil-value;
}

.mil-project-values li {
    counter-increment: mil-value;
    font-size: 18px;
    line-height: 150%;
    color: #000000;
}

.mil-project-values li::before {
    content: counter(mil-value, decimal-leading-zero);
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #FF9800;
}

@media screen and (max-width: 768px) {
    .mil-project-card {
        padding: 30px;
    }
}

.mil-project-others {
    margin-top: 60px;
    padding-top: 60px;
    border-top: solid 1px rgba(255, 255, 255, 0.1);
}

.mil-project-other {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px;
    border-radius: 20px;
    border: solid 1px rgba(255, 255, 255, 0.12);
    transition: border-color .3s, background-color .3s;
}

.mil-project-other:hover {
    border-color: #FF9800;
    background-color: rgba(255, 255, 255, 0.04);
}

.mil-project-other-name {
    font-size: 24px;
    font-weight: 500;
    color: #FFFFFF;
}

.mil-project-other .mil-button {
    align-self: flex-start;
}

.mil-project-other-desc {
    flex: 1;
    margin: 8px 0 24px;
    color: rgba(255, 255, 255, 0.72);
}

.mil-project-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
}

/* ---------- homepage venture cards ---------- */

/*
 * The theme only shows a card's description and arrow on hover, so on load
 * the row read as four names and three grey dots. Show everything up front;
 * the accent bar along the top still marks the card under the pointer.
 * Scoped to the cards so no other hover treatment changes.
 */
.mil-service-card-sm p {
    opacity: 1;
    transform: none;
}

.mil-service-card-sm .mil-button {
    transform: scale(1);
    filter: none;
    opacity: 1;
}

/* ---------- how we design ---------- */

/* White panels, because the section behind them is the soft grey the project cards use. */
.mil-design-panel {
    height: 100%;
    padding: 50px;
    border-radius: 20px;
    background-color: #FFFFFF;
}

.mil-design-skins {
    display: grid;
    gap: 18px;
    margin: 0 0 30px;
}

.mil-design-skins div {
    padding-bottom: 18px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.mil-design-skins dt,
.mil-design-dl dt {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.6);
}

.mil-design-skins dd,
.mil-design-dl dd {
    margin: 0;
    font-size: 17px;
    line-height: 150%;
    color: #000000;
}

.mil-design-note {
    font-size: 15px;
    line-height: 160%;
}

.mil-design-interface {
    display: flex;
    flex-direction: column;
}

/*
 * "Shared rules, their own look": two equal panels built to end level. Rules
 * get a check badge and a hairline each, the looks a two by two grid with the
 * venture's mark, and the note sits at the foot of the second panel.
 */
.mil-grammar-panel {
    display: flex;
    flex-direction: column;
}

.mil-grammar-kicker {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FF9800;
}

.mil-grammar-title {
    margin-bottom: 30px;
    font-size: 28px;
    line-height: 125%;
    letter-spacing: -0.01em;
}

.mil-grammar-rules {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: solid 1px rgba(0, 0, 0, 0.08);
}

.mil-grammar-rules li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: solid 1px rgba(0, 0, 0, 0.08);
    font-size: 17px;
    line-height: 155%;
    color: rgba(0, 0, 0, 0.78);
}

.mil-grammar-check {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    border-radius: 9px;
    background-color: rgba(255, 152, 0, 0.15);
    font-size: 12px;
    color: #c77700;
}

/* Grows to fill the panel, so the cards meet the note with no gap between. */
.mil-grammar-skins {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 14px;
    margin: 0 0 20px;
}

.mil-grammar-skin {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 16px;
    background-color: rgb(246, 246, 246);
    border: solid 1px rgba(0, 0, 0, 0.05);
    transition: border-color .3s, transform .4s cubic-bezier(0, 0, 0.3642, 1);
}

.mil-grammar-skin:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 152, 0, 0.6);
}

.mil-grammar-skin dt {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 17px;
    font-weight: 500;
    color: #000000;
}

.mil-grammar-skin dt img {
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

/* Name at the top, look at the foot, so a stretched card reads as designed. */
.mil-grammar-skin dd {
    margin: auto 0 0;
    font-size: 15px;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.7);
}

.mil-grammar-note {
    margin: auto 0 0;
    padding: 18px 20px;
    border-radius: 14px;
    background-color: rgba(255, 152, 0, 0.08);
    font-size: 15px;
    line-height: 160%;
    color: rgba(0, 0, 0, 0.75);
}

@media screen and (max-width: 576px) {
    .mil-grammar-skins {
        grid-template-columns: 1fr;
    }

    .mil-grammar-title {
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mil-grammar-skin {
        transition: none;
    }

    .mil-grammar-skin:hover {
        transform: none;
    }
}

.mil-design-dl {
    display: grid;
    gap: 24px;
    margin: 0 0 40px;
    padding-top: 30px;
    border-top: solid 1px rgba(0, 0, 0, 0.1);
}

/* Keeps the site link on the same line across the row, whatever each card holds. */
.mil-design-interface > .mil-link {
    margin-top: auto;
}

.mil-design-practices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
    counter-reset: mil-practice;
}

.mil-design-practices li {
    counter-increment: mil-practice;
    padding: 40px;
    border-radius: 20px;
    background-color: #FFFFFF;
}

.mil-design-practices li::before {
    content: counter(mil-practice, decimal-leading-zero);
    display: block;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #FF9800;
}

.mil-design-practices p {
    font-size: 16px;
    line-height: 160%;
}

/*
 * "What We Will Not Design": an intro beside a cloud of struck-through tags,
 * then the refusals as a card grid. Text on the black ground is kept at 70%
 * white or brighter - the theme's 40% soft grey is too faint to read at length.
 */
.mil-refuse-intro {
    margin-bottom: 50px;
}

.mil-refuse-lead {
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 300;
    line-height: 145%;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}

.mil-refuse-sub {
    margin: 0;
    font-size: 17px;
    line-height: 170%;
    color: rgba(255, 255, 255, 0.72);
}

.mil-refuse-tags {
    padding: 30px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 152, 0, 0.18), transparent 60%),
        rgba(255, 255, 255, 0.04);
    border: solid 1px rgba(255, 255, 255, 0.1);
}

.mil-refuse-count {
    display: block;
    margin-bottom: 18px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FF9800;
}

.mil-refuse-tags ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mil-refuse-tags li {
    padding: 8px 16px;
    border-radius: 40px;
    border: solid 1px rgba(255, 255, 255, 0.18);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
}

.mil-refuse-tags s {
    text-decoration-color: #FF9800;
    text-decoration-thickness: 2px;
}

.mil-refuse-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mil-refuse-card {
    display: flex;
    flex-direction: column;
    padding: 34px 30px 30px;
    border-radius: 24px;
    background-color: rgba(255, 255, 255, 0.04);
    border: solid 1px rgba(255, 255, 255, 0.1);
    transition: border-color .3s, background-color .3s, transform .4s cubic-bezier(0, 0, 0.3642, 1);
}

.mil-refuse-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 152, 0, 0.6);
    background-color: rgba(255, 255, 255, 0.07);
}

.mil-refuse-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

.mil-refuse-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background-color: #FF9800;
    font-size: 17px;
    color: #000000;
}

.mil-refuse-number {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
}

.mil-refuse-title {
    margin-bottom: 12px;
    font-size: 26px;
    font-weight: 500;
    line-height: 125%;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}

.mil-refuse-body {
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 165%;
    color: rgba(255, 255, 255, 0.72);
}

/* The concrete case, pinned to the card's foot so the cards line up. */
.mil-refuse-example {
    margin-top: auto;
    padding: 16px 18px;
    border-radius: 14px;
    background-color: rgba(255, 152, 0, 0.08);
}

.mil-refuse-example-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FF9800;
}

.mil-refuse-example p {
    margin: 0;
    font-size: 15px;
    line-height: 160%;
    color: rgba(255, 255, 255, 0.9);
}

@media screen and (max-width: 1200px) {
    .mil-refuse-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .mil-refuse-grid {
        grid-template-columns: 1fr;
    }

    .mil-refuse-lead {
        font-size: 22px;
    }

    .mil-refuse-title {
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mil-refuse-card {
        transition: none;
    }

    .mil-refuse-card:hover {
        transform: none;
    }
}

.mil-design-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px 40px;
}

@media screen and (max-width: 768px) {
    .mil-design-panel,
    .mil-design-practices li {
        padding: 30px;
    }

    .mil-design-practices {
        grid-template-columns: 1fr;
    }
}

/* ---------- about page (pages/about) ----------
   The home page's bento language, page-wide: pill labels, tiles in black,
   orange and a warm tint, and a warm orange-to-coral gradient for emphasis.
   Every section is two balanced halves or an even grid. */

:root {
    --ib-orange: #FF9800;
    --ib-coral: #FF5E3A;
    --ib-gradient: linear-gradient(135deg, #FFB300 0%, #FF9800 45%, #FF5E3A 100%);
    --ib-ink: #0B0B0B;
    --ib-tint: #FFF4E6;
    --ib-soft: #F4F4F4;
    --ib-line: rgba(0, 0, 0, 0.1);
}

.mil-ab-section {
    position: relative;
}

.mil-ab-tint-bg {
    background-color: var(--ib-tint);
}

/* pills, tags and emphasis */
.mil-ab-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border: solid 1px var(--ib-line);
    border-radius: 999px;
    background-color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ib-ink);
}

.mil-ab-pill.is-dark {
    border-color: rgba(255, 255, 255, 0.16);
    background-color: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
}

.mil-ab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--ib-orange);
    box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.2);
    animation: mil-home-about-pulse 2s ease-in-out infinite;
}

.mil-ab-gradient-text {
    background: var(--ib-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mil-ab-mark {
    background: linear-gradient(transparent 60%, rgba(255, 152, 0, 0.45) 60%);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.mil-ab-tag {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 18px;
    padding: 4px 12px;
    border-radius: 999px;
    background-color: var(--ib-orange);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ib-ink);
}

.mil-ab-tag.is-light {
    background-color: rgba(255, 255, 255, 0.92);
}

/* banner: a warm glow and the ventures as chips */
.mil-ab-banner {
    position: relative;
    overflow: hidden;
}

.mil-ab-banner::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 152, 0, 0.28) 0%, rgba(255, 94, 58, 0.1) 40%, rgba(255, 152, 0, 0) 70%);
    pointer-events: none;
}

/* its own line, under the breadcrumbs rather than beside them */
.mil-ab-banner .mil-ab-pill {
    display: flex;
    width: fit-content;
}

.mil-ab-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 60px;
    padding: 0;
    list-style: none;
}

.mil-ab-chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px 7px 8px;
    border: solid 1px var(--ib-line);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    font-weight: 500;
    color: var(--ib-ink);
}

.mil-ab-chips img {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    object-fit: contain;
}

/* cards: the shared tile */
.mil-ab-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-radius: 24px;
    transition: transform .3s cubic-bezier(0, 0, 0.3642, 1), box-shadow .3s;
}

.mil-ab-card p {
    margin: 0;
}

.mil-ab-card-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.mil-ab-card.is-dark {
    color: rgba(255, 255, 255, 0.72);
    background-color: var(--ib-ink);
}

.mil-ab-card.is-dark strong,
.mil-ab-card.is-dark .mil-ab-card-title {
    color: #FFFFFF;
}

.mil-ab-card.is-accent {
    color: rgba(0, 0, 0, 0.75);
    background-color: var(--ib-orange);
}

.mil-ab-card.is-tint {
    color: rgba(0, 0, 0, 0.7);
    background-color: var(--ib-tint);
}

.mil-ab-card.is-soft {
    color: rgba(0, 0, 0, 0.65);
    background-color: var(--ib-soft);
}

.mil-ab-card.is-gradient {
    color: rgba(0, 0, 0, 0.8);
    background: var(--ib-gradient);
}

.mil-ab-card.is-outline {
    border: solid 1px var(--ib-line);
    background-color: #FFFFFF;
}

.mil-ab-card.is-accent .mil-ab-card-title,
.mil-ab-card.is-tint .mil-ab-card-title,
.mil-ab-card.is-soft .mil-ab-card-title,
.mil-ab-card.is-outline .mil-ab-card-title {
    color: var(--ib-ink);
}

/* who we are */
.mil-ab-statement {
    font-size: 48px;
    line-height: 1.15;
}

.mil-ab-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    justify-content: center;
}

.mil-ab-stack .is-dark p {
    font-size: 17px;
    line-height: 1.7;
}

.mil-ab-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.mil-ab-big {
    display: block;
    margin-bottom: 4px;
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    color: var(--ib-ink);
}

.mil-ab-card.is-accent .mil-ab-big {
    color: #FFFFFF;
}

/* a check, not a claim: four cards on black */
.mil-ab-dark {
    position: relative;
    overflow: hidden;
}

/* on the layer above the theme's invert backdrop, so the glow stays orange */
.mil-ab-dark .mi-invert-fix::after {
    content: "";
    position: absolute;
    bottom: -220px;
    left: 50%;
    width: 900px;
    height: 440px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 152, 0, 0.22) 0%, rgba(255, 152, 0, 0) 70%);
    pointer-events: none;
}

.mil-ab-checks {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.mil-ab-checks li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    border: solid 1px rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: rgba(255, 255, 255, 0.65);
    transition: transform .3s, border-color .3s;
}

.mil-ab-checks li:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 152, 0, 0.6);
}

.mil-ab-check-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.mil-ab-check-top img {
    width: 44px;
    height: 44px;
    padding: 6px;
    border-radius: 14px;
    background-color: #FFFFFF;
    object-fit: contain;
}

.mil-ab-check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ib-gradient);
    font-size: 14px;
    color: var(--ib-ink);
}

.mil-ab-checks strong {
    font-size: 24px;
    font-weight: 600;
    color: #FFFFFF;
}

/* what we hold, what we leave alone */
.mil-ab-bento {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mil-ab-bento .mil-ab-card:hover,
.mil-ab-lines .mil-ab-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.35);
}

.mil-ab-bento-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
}

.mil-ab-bento .mil-ab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 20px;
    vertical-align: 0;
    color: var(--ib-ink);
    background-color: #FFFFFF;
}

.mil-ab-bento .is-dark .mil-ab-icon {
    background-color: var(--ib-orange);
}

.mil-ab-bento .is-accent .mil-ab-icon {
    color: var(--ib-orange);
    background-color: var(--ib-ink);
}

.mil-ab-num {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: .55;
}

.mil-ab-leaves {
    height: 100%;
}

.mil-ab-leaves .mil-ab-tag {
    margin-bottom: 28px;
}

.mil-ab-leave-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.mil-ab-leave-chips li {
    padding: 10px 18px;
    border-radius: 999px;
    background-color: var(--ib-ink);
    font-size: 15px;
    font-weight: 500;
    color: #FFFFFF;
}

.mil-ab-leave-chips li:nth-child(3n + 2) {
    color: var(--ib-ink);
    background-color: #FFFFFF;
}

.mil-ab-leaves .mil-ab-leaves-note {
    margin-top: auto;
    padding-top: 20px;
    border-top: dashed 1.5px rgba(0, 0, 0, 0.3);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ib-ink);
}

/* four ventures */
.mil-ab-venture {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 34px;
    border: solid 1px rgba(0, 0, 0, 0.06);
    border-radius: 28px;
    background-color: #FFFFFF;
    box-shadow: 0 24px 48px -32px rgba(120, 60, 0, 0.35);
    transition: transform .3s cubic-bezier(0, 0, 0.3642, 1), box-shadow .3s;
}

.mil-ab-venture:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 60px -30px rgba(120, 60, 0, 0.45);
}

.mil-ab-venture-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.mil-ab-venture-head img {
    flex: none;
    width: 56px;
    height: 56px;
    padding: 8px;
    border: solid 1px var(--ib-line);
    border-radius: 18px;
    object-fit: contain;
}

.mil-ab-venture-head h3 {
    margin: 0;
    font-size: 32px;
    line-height: 1.1;
}

.mil-ab-venture-kind {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #D26A00;
}

.mil-ab-venture-tagline {
    margin-bottom: 18px;
    font-size: 18px;
    font-style: italic;
    font-weight: 500;
    color: var(--ib-ink);
}

.mil-ab-venture-summary {
    margin-bottom: 24px;
    color: rgba(0, 0, 0, 0.75);
}

.mil-ab-venture-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 28px;
}

.mil-ab-venture-facts div {
    padding: 16px 18px;
    border-radius: 18px;
    background-color: var(--ib-tint);
}

.mil-ab-venture-facts dt {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #D26A00;
}

.mil-ab-venture-facts dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.75);
}

.mil-ab-venture-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    margin-top: auto;
    padding: 12px 20px;
    border-radius: 999px;
    background-color: var(--ib-ink);
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    transition: background .2s, color .2s;
}

.mil-ab-venture-link:hover,
.mil-ab-venture-link:focus-visible {
    background: var(--ib-gradient);
    color: var(--ib-ink);
}

.mil-ab-venture-link:focus-visible {
    outline: 2px solid var(--ib-ink);
    outline-offset: 3px;
}

/* lines we hold */
.mil-ab-side-title {
    font-size: 54px;
}

.mil-ab-side-title .mil-thin {
    display: block;
}

.mil-ab-sticky {
    position: sticky;
    top: 120px;
}

.mil-ab-lines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.mil-ab-line-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 26px;
    border-radius: 16px;
    background: var(--ib-gradient);
    font-size: 19px;
    color: var(--ib-ink);
}

/* closing call to action */
.mil-ab-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px 60px;
    padding: 60px;
    border-radius: 36px;
    background-color: var(--ib-ink);
}

.mil-ab-cta::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -120px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 152, 0, 0.35) 0%, rgba(255, 94, 58, 0.12) 45%, rgba(255, 152, 0, 0) 70%);
    pointer-events: none;
}

.mil-ab-cta-text {
    position: relative;
    flex: 1 1 520px;
}

.mil-ab-cta-text h3 {
    font-size: 40px;
    line-height: 1.2;
    color: #FFFFFF;
}

.mil-ab-cta-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 36px;
}

@media (prefers-reduced-motion: reduce) {
    .mil-ab-dot {
        animation: none;
    }

    .mil-ab-card,
    .mil-ab-checks li,
    .mil-ab-venture {
        transition: none;
    }

    .mil-ab-bento .mil-ab-card:hover,
    .mil-ab-lines .mil-ab-card:hover,
    .mil-ab-checks li:hover,
    .mil-ab-venture:hover {
        transform: none;
    }
}

@media screen and (max-width: 1200px) {
    .mil-ab-checks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mil-ab-statement {
        font-size: 40px;
    }

    .mil-ab-side-title {
        font-size: 44px;
    }
}

@media screen and (max-width: 992px) {
    .mil-ab-sticky {
        position: static;
    }

    /* the headings sit above their intros here, not beside them */
    .mil-ab-dark .mil-section-title,
    .mil-ab-tint-bg .mil-section-title {
        margin-bottom: 24px;
    }

    .mil-ab-cta {
        padding: 44px 32px;
    }

    .mil-ab-cta-text h3 {
        font-size: 32px;
    }
}

@media screen and (max-width: 768px) {
    .mil-ab-venture-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .mil-ab-venture {
        padding: 26px;
    }
}

@media screen and (max-width: 576px) {
    .mil-ab-statement {
        font-size: 32px;
    }

    .mil-ab-checks,
    .mil-ab-bento,
    .mil-ab-lines {
        grid-template-columns: minmax(0, 1fr);
    }

    .mil-ab-big {
        font-size: 48px;
    }

    .mil-ab-card {
        padding: 24px;
    }

    .mil-ab-bento-top {
        margin-bottom: 24px;
    }

    .mil-ab-cta {
        padding: 36px 24px;
        border-radius: 28px;
    }

    .mil-ab-cta-text {
        flex-basis: 100%;
    }

    .mil-ab-cta-text h3 {
        font-size: 26px;
    }
}

/* ---------- support ----------
   Three balanced blocks on the theme's black and #FF9800: the ventures as
   four equal cards, this site's help as a 3 x 2 grid of equal tiles, and a
   dark call to action. Each block's heading sits beside its intro. */

.mil-sup {
    --sup-accent: #FF9800;
    --sup-accent-deep: #9C5400;
    --sup-soft: rgba(255, 152, 0, 0.12);
    --sup-line: rgba(0, 0, 0, 0.08);
    --sup-ground: #f6f5f3;
}

.mil-sup-soft {
    background: linear-gradient(180deg, #faf8f5, #f3f1ed);
}

.mil-sup-head {
    display: grid;
    gap: 22px;
    margin-bottom: 50px;
}

/* Section titles never wrap on large screens (see "site-wide type"), so the
   title has the whole row and the intro sits under it. */
.mil-sup-head .mil-section-title {
    margin: 0;
}

.mil-sup-head p {
    max-width: 760px;
    margin: 0;
}

.mil-sup-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--sup-soft);
    color: var(--sup-accent-deep);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mil-sup-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sup-accent);
}

/* ventures: four equal cards */
.mil-sup-ventures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.mil-sup-venture {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid var(--sup-line);
    border-radius: 24px;
    background: #fff;
    overflow: hidden;
    transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}

.mil-sup-venture::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #FF9800, #ffc46b);
    transform: scaleX(0.25);
    transform-origin: left;
    transition: transform 0.45s;
}

.mil-sup-venture:hover {
    border-color: rgba(255, 152, 0, 0.45);
    box-shadow: 0 26px 50px -34px rgba(0, 0, 0, 0.45);
    transform: translateY(-6px);
}

.mil-sup-venture:hover::before {
    transform: scaleX(1);
}

.mil-sup-venture-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.mil-sup-venture-logo {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    object-fit: contain;
    background: var(--sup-ground);
}

.mil-sup-venture h4 {
    margin: 0 0 6px;
    font-size: 22px;
}

.mil-sup-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--sup-ground);
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    font-weight: 500;
}

.mil-sup-links {
    display: grid;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.mil-sup-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 14px;
    background: var(--sup-ground);
    color: #000;
    font-size: 14px;
    font-weight: 500;
    word-break: break-word;
    transition: background-color 0.25s, color 0.25s;
}

.mil-sup-links a .mil-icon {
    flex: none;
    font-size: 12px;
    color: var(--sup-accent);
    transition: transform 0.25s, color 0.25s;
}

.mil-sup-links a:hover {
    background: #000;
    color: #fff;
}

.mil-sup-links a:hover .mil-icon {
    transform: translateX(4px);
}

.mil-sup-site {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
    word-break: break-all;
}

.mil-sup-site .mil-icon {
    font-size: 11px;
    color: var(--sup-accent);
}

.mil-sup-site:hover {
    color: #000;
}

/* this site: a 3 x 2 grid of equal tiles, each wholly a link */
.mil-sup-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.mil-sup-item {
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 1px solid var(--sup-line);
    border-radius: 24px;
    background: #fff;
    color: #000;
    transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}

.mil-sup-item:hover {
    border-color: rgba(255, 152, 0, 0.45);
    box-shadow: 0 26px 50px -34px rgba(0, 0, 0, 0.45);
    color: #000;
    transform: translateY(-6px);
}

.mil-sup-item-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    border-radius: 16px;
    background: var(--sup-soft);
    color: var(--sup-accent-deep);
    font-size: 22px;
    transition: background-color 0.35s, color 0.35s, transform 0.35s;
}

.mil-sup-item:hover .mil-sup-item-icon {
    background: var(--sup-accent);
    color: #000;
    transform: rotate(-6deg);
}

.mil-sup-item h5 {
    margin: 0 0 10px;
    font-size: 19px;
}

.mil-sup-item p {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.62);
}

.mil-sup-item-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    align-self: flex-start;
    padding: 8px 16px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    word-break: break-all;
    transition: background-color 0.25s, color 0.25s;
}

.mil-sup-item-cta .mil-icon {
    font-size: 11px;
    color: var(--sup-accent);
    transition: transform 0.25s, color 0.25s;
}

.mil-sup-item:hover .mil-sup-item-cta {
    background: var(--sup-accent);
    color: #000;
}

.mil-sup-item:hover .mil-sup-item-cta .mil-icon {
    color: #000;
    transform: translateX(4px);
}

/* the call to action: dark, with the accent glowing in the corner */
.mil-sup-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px 40px;
    padding: 50px 56px;
    border-radius: 32px;
    background: #0d0d0d;
    color: #fff;
    overflow: hidden;
}

.mil-sup-cta-glow {
    position: absolute;
    top: -120px;
    right: -80px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 152, 0, 0.55), transparent 65%);
    pointer-events: none;
}

.mil-sup-cta-text {
    position: relative;
    max-width: 560px;
}

.mil-sup-cta .mil-sup-kicker {
    background: rgba(255, 152, 0, 0.18);
    color: var(--sup-accent);
}

.mil-sup-cta h3 {
    margin: 0 0 12px;
    color: #fff;
}

.mil-sup-cta p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}

.mil-sup-cta-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mil-sup-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 26px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}

.mil-sup-btn:hover {
    border-color: #fff;
    background: #fff;
    color: #000;
    transform: translateY(-3px);
}

.mil-sup-btn.is-primary {
    border-color: var(--sup-accent);
    background: var(--sup-accent);
    color: #000;
}

.mil-sup-btn.is-primary:hover {
    border-color: #fff;
    background: #fff;
}

@media (max-width: 1199px) {
    .mil-sup-ventures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .mil-sup-head {
        margin-bottom: 36px;
    }

    .mil-sup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mil-sup-cta {
        padding: 40px 32px;
    }
}

@media (max-width: 575px) {
    .mil-sup-ventures,
    .mil-sup-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mil-sup-cta {
        padding: 32px 22px;
        border-radius: 24px;
    }

    .mil-sup-cta-actions,
    .mil-sup-btn {
        width: 100%;
    }

    .mil-sup-btn {
        justify-content: center;
    }
}

/* ---------- faq ---------- */

.mil-faq-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mil-faq-nav li + li {
    margin-top: 12px;
}

.mil-faq-nav a {
    color: rgba(0, 0, 0, 0.6);
    transition: color .3s;
}

.mil-faq-nav a:hover {
    color: #FF9800;
}

@media screen and (min-width: 992px) {
    .mil-faq-nav {
        position: sticky;
        top: 140px;
    }
}

.mil-faq-group {
    margin-bottom: 60px;
    scroll-margin-top: 120px;
}

.mil-faq-item {
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.mil-faq-item:first-of-type {
    border-top: solid 1px rgba(0, 0, 0, 0.1);
}

.mil-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    font-size: 19px;
    font-weight: 500;
    color: #000000;
    list-style: none;
    cursor: pointer;
}

.mil-faq-item summary::-webkit-details-marker {
    display: none;
}

.mil-faq-item summary i {
    flex: none;
    font-size: 12px;
    color: #FF9800;
    transition: transform .3s;
}

.mil-faq-item[open] summary i {
    transform: rotate(180deg);
}

.mil-faq-item summary:hover {
    color: #FF9800;
}

/* The theme sets no focus ring of its own; a question must show where the keyboard is. */
.mil-faq-item summary:focus-visible {
    outline: solid 2px #FF9800;
    outline-offset: 4px;
}

.mil-faq-answer {
    padding: 0 40px 28px 0;
}

.mil-faq-answer a {
    color: #000000;
    text-decoration: underline;
    text-decoration-color: #FF9800;
    text-underline-offset: 3px;
}

.mil-faq-answer a:hover {
    color: #FF9800;
}

@media screen and (max-width: 768px) {
    .mil-about-checks li {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .mil-about-actions {
        justify-content: flex-start;
    }

    .mil-faq-item summary {
        font-size: 17px;
    }

    .mil-faq-answer {
        padding-right: 0;
    }
}

/* ---------- footer ---------- */

/*
 * Laid out like the ventures' own footers, in the group's colours. The
 * products stripe above shares the footer's ground, so the two read as one
 * block, as they do on the venture sites.
 */
.mil-group-strip {
    background-color: rgb(242, 242, 242);
}

/* The group's own chip draws its badge inline, so it is sized to match the icons beside it. */
.mil-strip-chip-group .mil-logo-lockup {
    gap: 10px;
    font-size: inherit;
}

.mil-strip-chip-group .mil-logo-mark {
    width: 26px;
    height: 26px;
}

.mil-strip-chip-group .mil-logo-name {
    font-weight: 500;
}

.mil-site-footer {
    padding: 60px 0 40px;
    background-color: rgb(242, 242, 242);
    color: rgba(0, 0, 0, 0.7);
}

.mil-footer-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px 60px;
    margin-bottom: 70px;
    padding: 50px;
    border-radius: 24px;
    background-color: #000000;
}

.mil-footer-band-text {
    flex: 1 1 380px;
    max-width: 560px;
}

.mil-footer-band-text h3 {
    color: #FFFFFF;
}

.mil-footer-band-text p {
    color: rgba(255, 255, 255, 0.7);
}

.mil-footer-band-form {
    flex: 1 1 380px;
    max-width: 520px;
}

/* A white pill on the dark band, rather than the theme's translucent field. */
.mil-footer-band .mil-subscribe-form input {
    padding-left: 30px;
    color: #000000;
    background-color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.mil-footer-band .mil-subscribe-form input::placeholder {
    color: rgba(0, 0, 0, 0.5);
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.mil-footer-band .mil-subscribe-form input:focus-visible {
    outline: solid 2px #FF9800;
    outline-offset: 2px;
}

.mil-footer-band .mil-subscribe-note {
    color: rgba(255, 255, 255, 0.6);
}

.mil-footer-heading {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #000000;
}

.mil-footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 2px;
    background-color: #FF9800;
}

.mil-footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mil-footer-links li + li {
    margin-top: 14px;
}

.mil-footer-links a {
    position: relative;
    display: inline-block;
    padding-left: 14px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.7);
    transition: color .2s, transform .2s;
}

.mil-footer-links a::before {
    content: '\203A';
    position: absolute;
    left: 0;
    top: -1px;
    color: rgba(0, 0, 0, 0.4);
}

.mil-footer-links a:hover {
    color: #000000;
    transform: translateX(3px);
}

.mil-footer-links a:hover::before,
.mil-footer-links a[aria-current="page"]::before {
    color: #FF9800;
}

.mil-footer-links a[aria-current="page"] {
    color: #000000;
    font-weight: 500;
}

.mil-footer-touch {
    margin-bottom: 14px;
    line-height: 170%;
}

.mil-footer-email {
    color: #000000;
    text-decoration: underline;
    text-decoration-color: #FF9800;
    text-underline-offset: 4px;
}

.mil-footer-email:hover {
    color: #FF9800;
}

.mil-footer-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 360px;
    padding: 15px 22px;
    font-weight: 500;
    color: #000000;
    border: solid 1px #000000;
    border-radius: 40px;
    transition: background-color .2s, color .2s, border-color .2s;
}

.mil-footer-contact i {
    font-size: 12px;
    color: #FF9800;
    transition: transform .2s, color .2s;
}

.mil-footer-contact:hover,
.mil-footer-contact[aria-current="page"] {
    color: #000000;
    background-color: #FF9800;
    border-color: #FF9800;
}

.mil-footer-contact:hover i,
.mil-footer-contact[aria-current="page"] i {
    color: #000000;
}

.mil-footer-contact:hover i {
    transform: translateX(4px);
}

.mil-footer-links a:focus-visible,
.mil-footer-email:focus-visible,
.mil-footer-contact:focus-visible,
.mil-footer-socials a:focus-visible {
    outline: solid 2px #FF9800;
    outline-offset: 3px;
}

.mil-site-footer .mil-footer-bottom {
    padding-top: 30px;
    border-top: solid 1px rgba(0, 0, 0, 0.1);
}

.mil-footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
}

.mil-footer-legal p {
    color: rgba(0, 0, 0, 0.65);
}

.mil-footer-logo {
    font-size: 22px;
    color: #000000;
}

.mil-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mil-footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 15px;
    color: #000000;
    background-color: #FFFFFF;
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: background-color .2s, border-color .2s, color .2s;
}

.mil-footer-socials a:hover {
    color: #000000;
    background-color: #FF9800;
    border-color: #FF9800;
}

@media screen and (max-width: 992px) {
    .mil-footer-band {
        padding: 40px 30px;
    }
}

@media screen and (max-width: 768px) {
    .mil-footer-band {
        margin-bottom: 50px;
        border-radius: 18px;
    }

    .mil-footer-legal {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- page loader ---------- */

/*
 * A frosted veil over the page with the group mark in the middle and an accent
 * segment running round a rounded square track. Replaces the theme's black
 * "Pioneering Creative Excellence" intro; main.js fades it out once the page
 * has loaded.
 *
 * It sits above everything, including the fixed logo and the mobile top bar
 * (1000 and 999), so nothing pokes through while it is up.
 */
.mil-preloader {
    z-index: 1001;
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}

.mil-preloader .mil-preloader-animation {
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.mil-preloader.mil-hidden {
    visibility: hidden;
}

.mil-loader {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mil-loader-track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mil-loader-track rect {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}

.mil-loader-rail {
    stroke: rgba(0, 0, 0, 0.08);
}

/* One dash a quarter of the way round, moved the full length each turn. */
.mil-loader-run {
    stroke: #FF9800;
    stroke-dasharray: 24 76;
    animation: mil-loader-run 1.2s linear infinite;
}

@keyframes mil-loader-run {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -100; }
}

.mil-loader-mark {
    position: relative;
    display: flex;
    font-size: 76px;
    line-height: 1;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(255, 152, 0, 0.25);
    animation: mil-loader-breathe 2.4s ease-in-out infinite;
}

@keyframes mil-loader-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
    .mil-loader-run {
        animation-duration: 3s;
    }

    .mil-loader-mark {
        animation: none;
    }
}

/* ---------- contact ---------- */

/*
 * The contact page on the theme's own pattern: the banner, accent section
 * labels, alternating white and soft bands, a dark closing band, the theme's
 * pill button and arrow links. Only what the theme has no part for is styled
 * here - the topic search, the routing list, the answer and way cards, the
 * form's labels and the direct-contact panel.
 */

.mil-contact-banner-row {
    margin-bottom: 30px;
}

/* topic search: the theme's underlined field, with an icon in front */
.mil-contact-search {
    position: relative;
}

.mil-contact-search i {
    position: absolute;
    /* the theme positions inputs, so the icon has to stack above its field */
    z-index: 2;
    top: 50%;
    left: 0;
    font-size: 15px;
    color: #FF9800;
    transform: translateY(-50%);
    pointer-events: none;
}

.mil-contact-search input {
    height: 60px;
    margin: 0;
    padding: 0 0 0 34px;
    background-color: transparent;
    border-bottom: solid 1px rgba(0, 0, 0, 0.3);
    transition: border-color .2s;
}

.mil-contact-search input:focus {
    border-bottom-color: #FF9800;
}

.mil-contact-search input:focus-visible {
    outline: none;
}

.mil-contact-search-status {
    min-height: 22px;
    margin-top: 10px;
    font-size: 14px;
}

[data-topic-group][hidden],
[data-topic].is-filtered {
    display: none !important;
}

.mil-contact-empty {
    margin: 60px 0;
    padding: 30px;
    text-align: center;
    border: dashed 1px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
}

.mil-contact-empty a {
    color: #000000;
    text-decoration: underline;
    text-decoration-color: #FF9800;
    text-underline-offset: 3px;
}

/*
 * Who handles what: the rule beside a key, then four equal cards. The one a
 * venture answers is picked out in the accent, the three we answer stay grey.
 */
.mil-routing-intro {
    margin-bottom: 40px;
}

.mil-routing-lead {
    margin-bottom: 14px;
    font-size: 30px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.01em;
    color: #000000;
}

.mil-routing-sub {
    margin: 0;
    font-size: 17px;
    line-height: 170%;
    color: rgba(0, 0, 0, 0.7);
}

.mil-routing-key {
    display: grid;
    gap: 18px;
    padding: 28px;
    border-radius: 20px;
    border: solid 1px rgba(0, 0, 0, 0.08);
    background:
        radial-gradient(circle at 100% 0, rgba(255, 152, 0, 0.12), transparent 60%),
        #FFFFFF;
}

.mil-routing-key > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.mil-routing-key p {
    margin: 0;
    font-size: 15px;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.7);
}

.mil-routing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mil-routing-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 26px 26px;
    border-radius: 20px;
    background-color: rgb(244, 244, 244);
    border: solid 1px transparent;
    transition: border-color .3s, transform .4s cubic-bezier(0, 0, 0.3642, 1);
}

.mil-routing-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, 0.12);
}

.mil-routing-card.is-venture {
    background-color: rgba(255, 152, 0, 0.1);
}

.mil-routing-card.is-venture:hover {
    border-color: rgba(255, 152, 0, 0.6);
}

.mil-routing-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 26px;
    border-radius: 14px;
    background-color: #000000;
    font-size: 18px;
    color: #FFFFFF;
}

.mil-routing-card.is-venture .mil-routing-icon {
    background-color: #FF9800;
    color: #000000;
}

.mil-routing-title {
    margin-bottom: 10px;
    font-size: 21px;
    line-height: 130%;
}

.mil-routing-body {
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 160%;
    color: rgba(0, 0, 0, 0.7);
}

/* At the foot, so all four pills sit on one line. */
.mil-routing-card .mil-contact-pill {
    margin-top: auto;
}

@media screen and (max-width: 1200px) {
    .mil-routing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 576px) {
    .mil-routing-grid {
        grid-template-columns: 1fr;
    }

    .mil-routing-lead {
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mil-routing-card {
        transition: none;
    }

    .mil-routing-card:hover {
        transform: none;
    }
}

.mil-contact-pill {
    flex: none;
    margin-top: 4px;
    padding: 6px 14px;
    border-radius: 40px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.mil-contact-pill-dark {
    color: #000000;
    background-color: rgba(0, 0, 0, 0.06);
}

.mil-contact-pill-accent {
    color: #8a5200;
    background-color: rgba(255, 152, 0, 0.16);
}

/* quick answers and more ways: white cards on the soft band */
.mil-contact-answer,
.mil-contact-way {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 40px 30px;
    border-radius: 20px;
    background-color: #FFFFFF;
    transition: transform .4s cubic-bezier(0, 0, 0.3642, 1), box-shadow .4s;
}

.mil-contact-answer:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.mil-contact-answer:focus-visible {
    outline: solid 2px #FF9800;
    outline-offset: 3px;
}

.mil-contact-answer-index {
    margin-bottom: 30px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #FF9800;
}

.mil-contact-answer h4 {
    color: #000000;
}

.mil-contact-answer p,
.mil-contact-way p {
    flex: 1;
}

.mil-contact-answer .mil-link,
.mil-contact-way .mil-link {
    align-self: flex-start;
}

.mil-contact-way-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 30px;
    border-radius: 50%;
    background-color: rgba(255, 152, 0, 0.14);
    font-size: 18px;
    color: #FF9800;
}

/* the form: the theme's underlined fields, with visible labels above them */
.mil-contact-form .mil-field {
    margin-bottom: 20px;
}

.mil-contact-form label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #000000;
}

.mil-contact-form .mil-field-marker,
.mil-contact-form .mil-field-textarea .mil-field-marker {
    position: static;
    margin-left: 4px;
    font-size: 14px;
}

.mil-contact-form input,
.mil-contact-form select,
.mil-contact-form textarea {
    height: 60px;
    margin: 0;
    padding: 0;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #000000;
    background-color: transparent;
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
    transition: border-color .2s;
}

/* the subject type: an underlined field like the rest, full width, no box */
.mil-contact-form select {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    cursor: pointer;
}

.mil-contact-form textarea {
    height: 180px;
    padding-top: 18px;
    resize: vertical;
}

.mil-contact-form input::placeholder,
.mil-contact-form textarea::placeholder {
    font-size: 17px;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(0, 0, 0, 0.45);
}

.mil-contact-form input:focus,
.mil-contact-form select:focus,
.mil-contact-form textarea:focus {
    outline: none;
    border-bottom-color: #FF9800;
}

.mil-contact-form .mil-field .is-invalid {
    border-bottom-color: #c0392b;
}

.mil-contact-form .mil-field .is-valid {
    border-bottom-color: rgba(0, 0, 0, 0.6);
}

.mil-contact-form .mil-field-error {
    position: static;
    display: block;
    min-height: 20px;
    margin-top: 8px;
}

.mil-field-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 20px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.62);
}

.mil-field-meta .is-near {
    color: #c0392b;
    font-weight: 500;
}

.mil-contact-submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 30px;
    margin-top: 10px;
}

.mil-contact-privacy {
    flex: 1 1 260px;
    margin: 0;
    font-size: 15px;
    line-height: 160%;
}

.mil-contact-privacy a {
    color: #000000;
    text-decoration: underline;
    text-decoration-color: #FF9800;
    text-underline-offset: 3px;
}

.mil-contact-submit .mil-button[disabled] {
    opacity: .6;
    cursor: progress;
}

/* write direct: a dark panel beside the form */
.mil-contact-direct {
    background-color: #000000;
}

.mil-contact-routes {
    display: grid;
    gap: 8px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.mil-contact-route {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    color: #FFFFFF;
    border: solid 1px rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    transition: border-color .3s, background-color .3s;
}

.mil-contact-route:hover {
    color: #FFFFFF;
    border-color: #FF9800;
    background-color: rgba(255, 255, 255, 0.05);
}

.mil-contact-route:focus-visible {
    outline: solid 2px #FF9800;
    outline-offset: 3px;
}

.mil-contact-route > i {
    margin-left: auto;
    font-size: 12px;
    color: #FF9800;
}

.mil-contact-route-mark {
    flex: none;
    display: flex;
    width: 36px;
    height: 36px;
    font-size: 36px;
}

.mil-contact-route-mark img,
.mil-contact-route-mark .mil-logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 9px;
}

.mil-contact-route-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 140%;
}

.mil-contact-route-text strong {
    font-size: 15px;
    font-weight: 500;
    color: #FFFFFF;
}

.mil-contact-route-text > span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    word-break: break-word;
}

/* On its own line: beside the name it wrapped raggedly in the narrow panel. */
/* Beside the name, so each row is two lines: who, then how to reach them. */
.mil-contact-route-note {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.65);
}

.mil-contact-route-note::before {
    content: '\00B7';
    margin-right: 6px;
}

/* the group's mailboxes: one card, a two-by-two grid of addresses */
.mil-contact-group {
    padding: 12px 14px 14px;
    border: solid 1px rgba(255, 255, 255, 0.12);
    border-radius: 14px;
}

.mil-contact-group-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.mil-contact-group-head strong {
    font-size: 15px;
    font-weight: 500;
    color: #FFFFFF;
}

.mil-contact-mailboxes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mil-contact-mailbox {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px 12px;
    line-height: 140%;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border: solid 1px transparent;
    transition: border-color .3s, background-color .3s;
}

.mil-contact-mailbox:hover {
    border-color: #FF9800;
    background-color: rgba(255, 255, 255, 0.08);
}

.mil-contact-mailbox:focus-visible {
    outline: solid 2px #FF9800;
    outline-offset: 2px;
}

.mil-contact-mailbox-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FF9800;
}

.mil-contact-mailbox-email {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    word-break: break-word;
}

@media screen and (max-width: 480px) {
    .mil-contact-mailboxes {
        grid-template-columns: 1fr;
    }
}

/* Pinned to the bottom, level with the button row on the light half. */
.mil-contact-direct-note {
    margin: auto 0 0;
    padding-top: 22px;
    font-size: 13px;
    line-height: 160%;
    color: rgba(255, 255, 255, 0.7);
    border-top: solid 1px rgba(255, 255, 255, 0.12);
}

@media screen and (max-width: 768px) {
    .mil-contact-submit .mil-button {
        width: 100%;
        justify-content: center;
    }
}

/*
 * The form and the direct addresses as one block, light half and dark half.
 * Flex rather than grid, so that when the topic search hides the dark half the
 * light one simply takes the full width.
 */
.mil-contact-duo {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.06);
}

.mil-contact-duo-half {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 50px;
}

.mil-contact-compose {
    background-color: rgb(242, 242, 242);
}

@media screen and (max-width: 992px) {
    .mil-contact-duo {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    .mil-contact-duo-half {
        padding: 36px 24px;
    }
}

/* The steps grow to the height the direct half sets, so neither half has a gap. */
.mil-contact-steps {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
    counter-reset: mil-step;
    border-top: solid 1px rgba(0, 0, 0, 0.1);
}

.mil-contact-steps li {
    counter-increment: mil-step;
    flex: 1 0 auto;
    display: grid;
    align-content: center;
    grid-template-columns: 44px 1fr;
    row-gap: 4px;
    padding: 18px 0;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.mil-contact-steps h6 {
    margin: 0;
}

.mil-contact-steps li::before {
    content: counter(mil-step, decimal-leading-zero);
    grid-row: 1 / span 2;
    padding-top: 2px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #FF9800;
}

.mil-contact-steps p {
    margin: 0;
}

.mil-contact-compose-actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 30px;
}


/* ---------- message popup ---------- */

/*
 * Fixed over everything the page draws, including the fixed logo and the
 * mobile top bar (1000). Hidden with visibility as well as opacity, so a
 * closed popup is out of the tab order and away from screen readers.
 *
 * Without JavaScript, :target opens it; with it, .is-open does, and the
 * mil-js class turns the :target route off.
 */
.mil-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s cubic-bezier(0, 0, 0.3642, 1), visibility 0s linear .35s;
}

.mil-modal.is-open,
html:not(.mil-js) .mil-modal:target {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.mil-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    cursor: pointer;
}

.mil-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 34px 40px 30px;
    border-radius: 20px;
    background-color: #FFFFFF;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
    transform: translateY(24px) scale(.98);
    transition: transform .45s cubic-bezier(0, 0, 0.3642, 1);
}

.mil-modal.is-open .mil-modal-dialog,
html:not(.mil-js) .mil-modal:target .mil-modal-dialog {
    transform: none;
}

.mil-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.mil-modal-head .mil-project-label {
    margin-bottom: 8px;
}

.mil-modal-head h3 {
    margin: 0;
    font-size: 32px;
    line-height: 115%;
}

/*
 * Compact fields inside the popup, so the whole form fits a laptop screen
 * without scrolling. The page's own field sizes are left alone.
 */
.mil-modal .mil-contact-form .mil-field {
    margin-bottom: 6px;
}

.mil-modal .mil-contact-form label {
    font-size: 11px;
}

.mil-modal .mil-contact-form input,
.mil-modal .mil-contact-form select {
    height: 44px;
    font-size: 16px;
}

.mil-modal .mil-contact-form textarea {
    height: 104px;
    padding-top: 12px;
    font-size: 16px;
}

.mil-modal .mil-contact-form input::placeholder,
.mil-modal .mil-contact-form textarea::placeholder {
    font-size: 16px;
}

.mil-modal .mil-contact-form .mil-field-error {
    min-height: 18px;
    margin-top: 4px;
    font-size: 12px;
}

.mil-modal .mil-field-meta {
    margin-top: -2px;
    font-size: 12px;
}

.mil-modal .mil-form-feedback {
    margin: 4px 0 0;
}

.mil-modal .mil-form-feedback:empty {
    display: none;
}

.mil-modal .mil-contact-submit {
    margin-top: 16px;
    padding-top: 18px;
    border-top: solid 1px rgba(0, 0, 0, 0.08);
}

.mil-modal .mil-contact-privacy {
    font-size: 13px;
    line-height: 150%;
}

.mil-contact-form[hidden],
.mil-modal-success[hidden] {
    display: none !important;
}

/* after a message is in */
.mil-modal-success {
    padding: 20px 0 10px;
    text-align: center;
}

.mil-modal-success:focus {
    outline: none;
}

.mil-modal-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 24px;
    border-radius: 50%;
    background-color: #FF9800;
    box-shadow: 0 0 0 10px rgba(255, 152, 0, 0.15);
    font-size: 28px;
    color: #000000;
    animation: mil-success-pop .5s cubic-bezier(.2, 1.4, .4, 1) both;
}

@keyframes mil-success-pop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.mil-modal-success-text {
    max-width: 420px;
    margin: 0 auto 12px;
    font-size: 18px;
    line-height: 150%;
    color: #000000;
}

.mil-modal-success-note {
    max-width: 420px;
    margin: 0 auto 30px;
    font-size: 14px;
}

.mil-modal-success-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 30px;
}

.mil-modal-again {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #000000;
    text-decoration: underline;
    text-decoration-color: #FF9800;
    text-underline-offset: 4px;
}

.mil-modal-again:hover {
    color: #FF9800;
}

.mil-modal-close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgb(242, 242, 242);
    font-size: 16px;
    color: #000000;
    transition: background-color .2s, transform .3s;
}

.mil-modal-close:hover {
    color: #000000;
    background-color: #FF9800;
    transform: rotate(90deg);
}

.mil-modal-close:focus-visible {
    outline: solid 2px #FF9800;
    outline-offset: 3px;
}

/* The page behind stays put while the popup is open. */
html.mil-modal-lock,
html.mil-modal-lock body {
    overflow: hidden;
}

/* The theme's cursor dot keeps following the pointer over the popup. */
html.mil-modal-lock .mil-ball {
    z-index: 1101;
}

@media screen and (max-width: 768px) {
    .mil-modal {
        align-items: flex-end;
        padding: 0;
    }

    .mil-modal-dialog {
        max-height: calc(100vh - 40px);
        padding: 26px 22px 30px;
        border-radius: 20px 20px 0 0;
        transform: translateY(40px);
    }

    .mil-modal-head {
        margin-bottom: 18px;
    }

    .mil-modal-head h3 {
        font-size: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mil-modal,
    .mil-modal-dialog,
    .mil-modal-close {
        transition: none;
    }

    .mil-modal-success-icon {
        animation: none;
    }
}

/* ---------- section titles ---------- */

/*
 * A section's title reads as one line from tablet width up; on a phone it
 * wraps like any heading. Titles that sat beside a list or photo were moved
 * onto their own full-width row, so a single line has the room it needs.
 */
@media screen and (min-width: 769px) {
    .mil-section-title {
        white-space: nowrap;
    }
}

/* ---------- site-wide type ---------- */

/*
 * The theme set body copy at weight 300 in 50% black, the thin half of every
 * heading at weight 100, and text on dark bands at 40% white - elegant, and
 * hard to read. This keeps its typeface (Outfit) and its heading sizes, and
 * makes the type clearer and punchier:
 *
 *   - body copy at 400, 72% black, a touch larger, with more line height
 *   - headings at 600 with tighter tracking, so they read as bold statements
 *   - the "thin" half of a heading at 300, light but still clearly visible
 *   - soft text on dark bands at 72% white, on light at 65% black
 *   - labels, links and buttons at 600 with slightly looser tracking
 *
 * Every body-text colour on the site is meant to meet WCAG AA contrast.
 */
html,
body {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.72);
    line-height: 170%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

@media screen and (min-width: 769px) {
    html,
    body {
        font-size: 17px;
    }
}

h1, .mil-h1 {
    font-weight: 600;
    line-height: 105%;
    letter-spacing: -0.03em;
}

h2, .mil-h2 {
    font-weight: 600;
    line-height: 112%;
    letter-spacing: -0.025em;
}

h3, .mil-h3 {
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.02em;
}

h4, .mil-h4,
h5, .mil-h5,
h6, .mil-h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mil-thin {
    font-weight: 300;
}

.mil-text-xl {
    font-weight: 400;
    line-height: 160%;
    letter-spacing: -0.005em;
}

.mil-muted {
    color: rgba(255, 255, 255, 0.95);
}

.mil-light-soft {
    color: rgba(255, 255, 255, 0.72);
}

.mil-dark-soft {
    color: rgba(0, 0, 0, 0.65);
}

.mil-upper,
.mil-link,
.mil-button {
    font-weight: 600;
    letter-spacing: 0.14em;
}

.mil-breadcrumbs li a {
    font-weight: 600;
    letter-spacing: 0.14em;
}

.mil-breadcrumbs li:last-child a {
    opacity: 0.6;
}

/*
 * Accent text. The brand orange (#FF9800) is only about 2:1 against white, so
 * small orange labels on light grounds use a burnt "ink" version of it that
 * clears WCAG AA on white, the soft grey bands and the orange-tinted panels.
 * On black the bright orange already passes, so dark grounds keep it. Fills -
 * buttons, badges, icons - stay bright everywhere.
 */
.mil-accent,
.mil-project-label,
.mil-contact-answer-index,
.mil-grammar-kicker,
.mil-field-marker,
.mil-policy-toc li::before,
.mil-policy-section::before,
.mil-contact-steps li::before,
.mil-project-values li::before {
    color: #9C5400;
}

.mil-dark-bg .mil-accent,
.mil-dark-bg .mil-project-label,
.mil-dark-bg .mil-field-marker,
.mil-contact-direct .mil-accent,
.mil-contact-direct .mil-project-label {
    color: #FF9800;
}

/* The light label variant is for dark grounds and keeps its own soft white. */
.mil-project-label.mil-project-label-light,
.mil-dark-bg .mil-project-label.mil-project-label-light,
.mil-contact-direct .mil-project-label.mil-project-label-light {
    color: rgba(255, 255, 255, 0.7);
}
/*
 * Page-top titles on one line from tablet width up, like the section titles.
 * Each is measured against its container at every desktop width; see the
 * size step-downs below for the longer ones.
 */
@media screen and (min-width: 769px) {
    .mil-banner-title {
        white-space: nowrap;
    }
}
/* Titles longer than about 28 characters step down a size so they still fit. */
@media screen and (min-width: 769px) {
    .mil-banner-title.mil-banner-title-long {
        font-size: 72px;
    }
}
@media screen and (min-width: 769px) and (max-width: 1400px) {
    .mil-banner-title.mil-banner-title-long {
        font-size: 62px;
    }
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
    .mil-banner-title.mil-banner-title-long {
        font-size: 60px;
    }
}
@media screen and (min-width: 769px) and (max-width: 992px) {
    .mil-banner-title.mil-banner-title-long {
        font-size: 48px;
    }
}
/* Between 769px and 992px the container shrinks faster than the theme's size steps. */
@media screen and (min-width: 769px) and (max-width: 992px) {
    .mil-banner-title {
        font-size: min(58px, 7.2vw);
    }

    .mil-banner-title.mil-banner-title-long {
        font-size: min(48px, 6vw);
    }
}

/* ---------- buttons without the arrow ----------
 *
 * The theme's main.js copies its arrow into every .mil-arrow-place. Buttons
 * with a label drop it and centre their text; icon-only buttons (back to
 * top, the subscribe arrow, the service cards) are nothing but the arrow, so
 * they keep it. .mil-link text links keep theirs too.
 */
.mil-button:has(> span) > .mil-arrow {
    display: none;
}

.mil-button:has(> span) {
    padding: 0 44px;
}

.mil-button.mil-button-sm:has(> span) {
    padding: 0 28px;
}

@media screen and (max-width: 992px) {
    .mil-button:has(> span) {
        padding: 0 36px;
    }

    .mil-button.mil-button-sm:has(> span) {
        padding: 0 24px;
    }
}
/* ---------- inline SVG icons (components/icon) ----------
   In place of the icon font: 1em high, the text colour, sitting where a
   Font Awesome glyph would (its box reaches 1/8 em below the baseline). */

.mil-icon {
    display: inline-block;
    font-style: normal;
    line-height: 1;
    vertical-align: -0.125em;
}

.mil-icon svg {
    display: block;
    overflow: visible;
}

/* The socials in the footer are iDharma's, and the caption says so. */
.mil-footer-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.mil-footer-bottom .mil-footer-social-label {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
}

/* Covers are <picture>s (a WebP srcset over the original); the <img> inside
   keeps laying out as if it were the cover's own child. */
.mil-project-cover picture,
.mil-cover picture {
    display: contents;
}

/* ---------- home about (pages/home #about) ----------
   A bento of what the group holds, a highlighted lead and house rule, and the
   photo with a glassy sticker and venture chips. Black, orange and soft grey:
   the site's own palette, pushed a little louder. */

.mil-home-about {
    position: relative;
    overflow: hidden;
}

/* a soft orange glow behind the photo */
.mil-home-about::before {
    content: "";
    position: absolute;
    top: 10%;
    right: -10%;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 152, 0, 0.22) 0%, rgba(255, 152, 0, 0) 70%);
    pointer-events: none;
}

.mil-home-about .container {
    position: relative;
}

.mil-home-about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 8px 16px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    background-color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #000000;
}

.mil-home-about-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FF9800;
    box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.2);
    animation: mil-home-about-pulse 2s ease-in-out infinite;
}

@keyframes mil-home-about-pulse {
    50% { box-shadow: 0 0 0 8px rgba(255, 152, 0, 0); }
}

.mil-home-about-lead {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.3;
    color: #000000;
}

/* a highlighter stroke under the second half */
.mil-home-about-mark {
    background: linear-gradient(transparent 62%, rgba(255, 152, 0, 0.45) 62%);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.mil-home-about-bento {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.mil-home-about-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 170px;
    padding: 22px;
    border-radius: 22px;
    transition: transform .3s cubic-bezier(0, 0, 0.3642, 1), box-shadow .3s;
}

.mil-home-about-tile:hover {
    transform: translateY(-4px) rotate(-0.6deg);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.35);
}

.mil-home-about-tile strong {
    margin-top: auto;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.mil-home-about-tile span {
    font-size: 14px;
    line-height: 1.5;
}

.mil-home-about-tile .mil-home-about-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 14px;
    font-size: 18px;
    vertical-align: 0;
}

.mil-home-about-tile.is-dark {
    color: rgba(255, 255, 255, 0.7);
    background-color: #000000;
}

.mil-home-about-tile.is-dark strong { color: #FFFFFF; }
.mil-home-about-tile.is-dark .mil-home-about-tile-icon { color: #000000; background-color: #FF9800; }

.mil-home-about-tile.is-accent {
    color: rgba(0, 0, 0, 0.75);
    background-color: #FF9800;
}

.mil-home-about-tile.is-accent strong { color: #000000; }
.mil-home-about-tile.is-accent .mil-home-about-tile-icon { color: #FF9800; background-color: #000000; }

.mil-home-about-tile.is-soft {
    color: rgba(0, 0, 0, 0.65);
    background-color: #F4F4F4;
}

.mil-home-about-tile.is-soft strong { color: #000000; }
.mil-home-about-tile.is-soft .mil-home-about-tile-icon { color: #000000; background-color: #FFFFFF; }

.mil-home-about-rule {
    position: relative;
    padding: 22px 24px 22px 28px;
    border: dashed 1.5px rgba(0, 0, 0, 0.2);
    border-radius: 22px;
    font-size: 16px;
    line-height: 1.65;
}

.mil-home-about-rule strong {
    font-weight: 600;
    color: #000000;
}

.mil-home-about-rule-tag {
    position: absolute;
    top: -12px;
    left: 22px;
    padding: 3px 12px;
    border-radius: 999px;
    background-color: #000000;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #FF9800;
}

/* photo, sticker and chips */
.mil-home-about-visual {
    position: relative;
    padding-bottom: 40px;
}

.mil-home-about .mil-home-about-photo {
    padding-bottom: 125%;
    border-radius: 32px;
    transform: rotate(1.5deg);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45);
}

.mil-home-about-sticker {
    position: absolute;
    top: 32px;
    left: -36px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 250px;
    padding: 14px 18px 14px 14px;
    border: solid 1px rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.35);
    transform: rotate(-4deg);
    font-size: 15px;
    line-height: 1.35;
    color: #000000;
    animation: mil-home-about-float 5s ease-in-out infinite;
}

.mil-home-about-sticker strong {
    font-weight: 600;
}

.mil-home-about-sticker-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #FF9800;
    font-size: 16px;
}

@keyframes mil-home-about-float {
    50% { transform: rotate(-4deg) translateY(-8px); }
}

.mil-home-about-chips {
    position: absolute;
    right: 16px;
    bottom: 0;
    left: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mil-home-about-chips a {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 999px;
    background-color: #000000;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5);
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    transition: background-color .2s, color .2s, transform .2s;
}

.mil-home-about-chips li:nth-child(even) a {
    color: #000000;
    background-color: #FFFFFF;
}

.mil-home-about-chips a:hover,
.mil-home-about-chips a:focus-visible {
    color: #000000;
    background-color: #FF9800;
    transform: translateY(-2px);
}

.mil-home-about-chips a:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .mil-home-about-dot,
    .mil-home-about-sticker {
        animation: none;
    }

    .mil-home-about-tile:hover {
        transform: none;
    }
}

@media screen and (max-width: 992px) {
    .mil-home-about-visual {
        max-width: 480px;
        margin: 30px auto 0;
    }

    .mil-home-about-sticker {
        left: -8px;
    }
}

@media screen and (max-width: 576px) {
    .mil-home-about-lead {
        font-size: 24px;
    }

    .mil-home-about-bento {
        grid-template-columns: minmax(0, 1fr);
    }

    .mil-home-about-tile {
        min-height: 0;
    }

    .mil-home-about-sticker {
        top: 16px;
        left: 8px;
        max-width: 210px;
        font-size: 14px;
    }

    /* under the photo rather than over it, where four no longer fit a row */
    .mil-home-about-visual {
        padding-bottom: 0;
    }

    .mil-home-about-chips {
        position: static;
        margin-top: 18px;
    }

    .mil-home-about-chips a {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* =====================================================================
   FAQ, balanced and brighter
   Each topic is one row: a dark topic card on the left (sticky beside its
   questions on wide screens) and its questions as cards on the right. The
   topics open the page as chips; it closes on two equal ways forward, on
   dark with orange glows. Brand orange for fills and glows; the darker
   accent ink wherever orange text sits on a light ground (contrast).
   ===================================================================== */

:root {
    --faq-ink: #141414;
    --faq-cream: #fff7ec;
    --faq-orange: #ff9800;
    --faq-ink-accent: #9c5400;
    --faq-gradient: linear-gradient(135deg, #ff9800 0%, #ffb547 55%, #ffd08a 100%);
}

/* banner topic chips */
.mil-faq-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mil-faq-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--faq-ink);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 99px;
    box-shadow: 0 10px 24px -18px rgba(40, 24, 0, .5);
    transition: background-color .25s, border-color .25s, transform .25s;
}

.mil-faq-chip .mil-icon { color: var(--faq-ink-accent); }

.mil-faq-chip-count {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--faq-ink);
    border-radius: 99px;
}

.mil-faq-chip:hover,
.mil-faq-chip:focus-visible {
    color: var(--faq-ink);
    background: var(--faq-orange);
    border-color: var(--faq-orange);
    transform: translateY(-2px);
}

.mil-faq-chip:hover .mil-icon,
.mil-faq-chip:focus-visible .mil-icon { color: var(--faq-ink); }

/* the questions section: a warm wash so the white cards lift off it */
.mil-faq-section {
    background: linear-gradient(180deg, #ffffff 0%, var(--faq-cream) 100%);
}

.mil-faq-row {
    scroll-margin-top: 120px;
}

.mil-faq-row + .mil-faq-row {
    margin-top: 70px;
}

/* the topic card: dark, with a gradient badge and a big outlined number */
.mil-faq-topic {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 36px 32px;
    overflow: hidden;
    color: #fff;
    background: var(--faq-ink);
    border-radius: 26px;
    box-shadow: 0 30px 60px -36px rgba(20, 20, 20, .7);
}

.mil-faq-topic::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 152, 0, .45), transparent 65%);
    pointer-events: none;
}

@media screen and (min-width: 992px) {
    .mil-faq-topic {
        position: sticky;
        top: 130px;
    }
}

.mil-faq-topic-no {
    position: absolute;
    top: 14px;
    right: 26px;
    font-size: 84px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22);
}

.mil-faq-topic-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    font-size: 22px;
    color: var(--faq-ink);
    background: var(--faq-gradient);
    border-radius: 18px;
    box-shadow: 0 12px 26px -12px rgba(255, 152, 0, .9);
}

.mil-faq-topic-title {
    margin: 8px 0 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.mil-faq-topic-intro {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .75);
}

.mil-faq-topic-count {
    margin-top: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--faq-ink);
    background: var(--faq-orange);
    border-radius: 99px;
}

/* the questions: cards with a number, the question, and a round toggle */
.mil-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mil-faq-list .mil-faq-item,
.mil-faq-list .mil-faq-item:first-of-type {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 20px;
    box-shadow: 0 12px 28px -24px rgba(40, 24, 0, .45);
    transition: border-color .25s, box-shadow .25s, transform .25s, background-color .25s;
}

.mil-faq-list .mil-faq-item:hover {
    border-color: rgba(255, 152, 0, .5);
    box-shadow: 0 18px 36px -24px rgba(40, 24, 0, .5);
    transform: translateY(-2px);
}

.mil-faq-list .mil-faq-item[open] {
    background: var(--faq-cream);
    border-color: rgba(255, 152, 0, .55);
}

.mil-faq-list .mil-faq-item summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--faq-ink);
}

.mil-faq-list .mil-faq-item summary:hover { color: var(--faq-ink); }

.mil-faq-q-no {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 13px;
    font-weight: 700;
    color: var(--faq-ink-accent);
    background: var(--faq-cream);
    border-radius: 12px;
    transition: background-color .25s, color .25s;
}

.mil-faq-item[open] .mil-faq-q-no {
    color: var(--faq-ink);
    background: var(--faq-orange);
}

.mil-faq-q {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.mil-faq-toggle {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: 12px;
    color: var(--faq-ink);
    background: #f3f1ee;
    border-radius: 50%;
    transition: background-color .25s, transform .3s;
}

.mil-faq-toggle .mil-icon { color: inherit; }

.mil-faq-item[open] .mil-faq-toggle {
    background: var(--faq-orange);
    transform: rotate(180deg);
}

.mil-faq-list .mil-faq-answer {
    padding: 0 24px 22px 74px;
}

.mil-faq-list .mil-faq-answer p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(0, 0, 0, .72);
}

.mil-faq-list .mil-faq-answer a {
    font-weight: 600;
    color: var(--faq-ink);
    text-decoration-color: var(--faq-orange);
    text-decoration-thickness: 2px;
}

.mil-faq-list .mil-faq-answer a:hover { color: var(--faq-ink-accent); }

/* closing: dark with orange glows, two equal cards */
.mil-faq-cta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 152, 0, .22), transparent 38%),
        radial-gradient(circle at 88% 85%, rgba(255, 181, 71, .18), transparent 40%),
        #0f0f0f;
}

.mil-faq-cta-head {
    margin-bottom: 50px;
    text-align: center;
}

.mil-faq-cta-kicker {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faq-orange);
    border: 1px solid rgba(255, 152, 0, .45);
    border-radius: 99px;
}

.mil-faq-cta-title {
    margin: 0;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.mil-faq-gradient {
    background: var(--faq-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mil-faq-cta .row > [class*="col-"] { display: flex; }

.mil-faq-cta-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 36px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 26px;
    backdrop-filter: blur(6px);
    transition: border-color .25s, transform .25s, background-color .25s;
}

.mil-faq-cta-card:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 152, 0, .55);
    transform: translateY(-3px);
}

.mil-faq-cta-icon {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    font-size: 22px;
    color: var(--faq-ink);
    background: var(--faq-gradient);
    border-radius: 16px;
}

.mil-faq-cta-card h3 {
    margin: 6px 0 0;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
}

.mil-faq-cta-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .75);
}

.mil-faq-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 99px;
    transition: background-color .25s, color .25s, border-color .25s;
}

.mil-faq-cta-button.is-solid {
    color: var(--faq-ink);
    background: var(--faq-orange);
    border-color: var(--faq-orange);
    box-shadow: 0 14px 30px -14px rgba(255, 152, 0, .9);
}

.mil-faq-cta-button:hover,
.mil-faq-cta-button:focus-visible {
    color: var(--faq-ink);
    background: #fff;
    border-color: #fff;
}

.mil-faq-cta-card p + .mil-faq-cta-button { margin-top: 18px; }

@media screen and (max-width: 991px) {
    .mil-faq-row + .mil-faq-row { margin-top: 40px; }
    .mil-faq-cta-title { font-size: 38px; }
}

@media screen and (max-width: 768px) {
    .mil-faq-topic { padding: 28px 24px; border-radius: 22px; }
    .mil-faq-topic-no { font-size: 64px; }
    .mil-faq-list .mil-faq-item summary { gap: 12px; padding: 16px; font-size: 16px; }
    .mil-faq-q-no { width: 32px; height: 32px; }
    .mil-faq-list .mil-faq-answer { padding: 0 18px 18px 18px; }
    .mil-faq-cta-card { padding: 28px 24px; }
    .mil-faq-cta-title { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .mil-faq-chip,
    .mil-faq-list .mil-faq-item,
    .mil-faq-cta-card,
    .mil-faq-toggle { transition: none; }
    .mil-faq-chip:hover,
    .mil-faq-list .mil-faq-item:hover,
    .mil-faq-cta-card:hover { transform: none; }
}

/* ---------- accessibility baseline (Operating Manual Doc 33, 2.1 and 4.5) ----------
   The shared grammar's floor for every public page: a skip link, a focus
   ring you can see on light and dark, a closed menu that keyboards and
   screen readers cannot wander into, motion limits for visitors who ask for
   less, and small text dark enough to read (WCAG AA). */

/* skip link: off screen until a keyboard reaches it */
.mil-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;
    padding: 12px 20px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 0.2s;
}

.mil-skip-link:focus,
.mil-skip-link:focus-visible {
    transform: none;
}

/* programmatic focus targets (the skip link lands on main) need no ring */
#main-content:focus {
    outline: none;
}

/* one focus ring for everything: a black inner ring and an accent outer
   one, so it shows on white and on black alike */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.mil-contact-form input:focus-visible,
.mil-contact-form textarea:focus-visible,
.mil-contact-search input:focus-visible,
.mil-subscribe-form input:focus-visible {
    outline: 3px solid #FF9800;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #000;
}

/* the menu buttons are real buttons now: no browser button look */
button.mil-menu-btn {
    padding: 0 4px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    min-width: 44px;
    min-height: 44px;
}

/* the group strip pauses for keyboards too, not only for a mouse */
.mil-group-strip:focus-within .mil-group-strip-track {
    animation-play-state: paused;
}

/* small text dark enough for AA on white */
.mil-form-feedback {
    color: rgba(0, 0, 0, 0.7);
}

.mil-contact-form input::placeholder,
.mil-contact-form textarea::placeholder {
    color: rgba(0, 0, 0, 0.6);
}

.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot {
    color: rgba(0, 0, 0, 0.65);
}

/* the page scrollbar stays: it shows where you are and how much is left */
::-webkit-scrollbar {
    display: initial;
}

/* motion limits: for visitors who ask their system for less, every CSS
   animation and transition finishes at once (main.js skips the scroll-driven
   ones) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* the word beside the menu icon ("Menu" on the page, "Close" inside the menu) */
.mil-menu-btn .mil-menu-btn-label {
    margin-right: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
    color: #000;
}

.mil-menu-frame .mil-menu-btn .mil-menu-btn-label {
    color: #fff;
}

/* inside the open menu the logo is still in the top bar: keep it on the left,
   away from the Close button (the flex-end rule above is for the page frame) */
.mil-menu-frame .mil-frame-top {
    justify-content: space-between;
}

/* the menu button on the page frame sits on its own light pill, so the word
   and the icon stay readable over any section, including dark ones built
   without the theme's .mil-dark-bg inversion (the FAQ call to action) */
.mil-frame .mil-menu-btn {
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

/* ---------- FAQ "Still have a question?", compact ----------
   Less padding, a smaller heading, and each card on one row: icon, text,
   button. On a phone the card stacks again. */
.mil-faq-cta > .container {
    padding-top: 70px;
    padding-bottom: 50px;
}

.mil-faq-cta-head {
    margin-bottom: 28px;
}

.mil-faq-cta-kicker {
    margin-bottom: 10px;
    padding: 4px 12px;
    font-size: 11px;
}

.mil-faq-cta-title {
    font-size: 38px;
}

.mil-faq-cta-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "icon title button"
        "icon text  button";
    align-items: center;
    column-gap: 18px;
    row-gap: 4px;
    padding: 20px 24px;
    border-radius: 20px;
}

.mil-faq-cta-icon {
    grid-area: icon;
    width: 44px;
    height: 44px;
    font-size: 18px;
    border-radius: 13px;
}

.mil-faq-cta-card h3 {
    grid-area: title;
    margin: 0;
    font-size: 19px;
}

.mil-faq-cta-card p {
    grid-area: text;
    font-size: 14px;
    line-height: 1.5;
}

.mil-faq-cta-button,
.mil-faq-cta-card p + .mil-faq-cta-button {
    grid-area: button;
    margin: 0;
    padding: 10px 18px;
    font-size: 14px;
    white-space: nowrap;
}

@media screen and (max-width: 991px) {
    .mil-faq-cta-title {
        font-size: 32px;
    }
}

@media screen and (max-width: 575px) {
    .mil-faq-cta-card {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon title"
            "text text"
            "button button";
        row-gap: 10px;
        padding: 18px;
    }

    .mil-faq-cta-button {
        justify-self: start;
    }
}
/* =====================================================================
   Standard form fields, site-wide (public site and employee portal)
   ---------------------------------------------------------------------
   The theme's 70px, uppercase, underlined fields and its heavy focus ring
   gave way to standard ones, the same as the admin panel: a bordered,
   rounded field in normal case, and on focus an accent border with a soft
   accent glow (still a clear ring for keyboard users). Fields with a look
   of their own (the dark footer's subscribe box, the contact search, the
   portal's filter bars and sign-in pages) keep it, and take the same focus.
   ===================================================================== */

:root {
    --field-border: rgba(0, 0, 0, 0.18);
    --field-border-hover: rgba(0, 0, 0, 0.35);
    --field-accent: #FF9800;
    --field-ring: 0 0 0 3px rgba(255, 152, 0, 0.22);
    --field-error: #c0392b;
}

/* Any text field not styled by a component: kept at element weight, so any
   component rule below or elsewhere still wins. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"])),
select,
textarea {
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--field-border);
    border-radius: 10px;
    background-color: #FFFFFF;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    transition: border-color .15s, box-shadow .15s;
}

textarea {
    height: 120px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    font-size: inherit;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(0, 0, 0, 0.45);
}

/* The site's forms (contact, and every form in the employee portal). */
.mil-contact-form input,
.mil-contact-form textarea,
.mil-employee-form select {
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--field-border);
    border-radius: 10px;
    background-color: #FFFFFF;
    font-size: 15px;
}

.mil-contact-form textarea,
.mil-employee-form textarea {
    height: 130px;
    padding: 12px 14px;
}

.mil-contact-form label { margin-bottom: 6px; }

.mil-contact-form input::placeholder,
.mil-contact-form textarea::placeholder {
    font-size: 15px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
}

.mil-modal .mil-contact-form input,
.mil-modal .mil-contact-form select { height: 44px; font-size: 15px; }
.mil-modal .mil-contact-form textarea { height: 100px; padding-top: 10px; font-size: 15px; }
.mil-modal .mil-contact-form input::placeholder,
.mil-modal .mil-contact-form textarea::placeholder { font-size: 15px; }

/* hover, then focus: an accent border and a soft glow, never the heavy ring */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"])):hover,
select:hover,
textarea:hover,
.mil-contact-form input:hover,
.mil-contact-form textarea:hover,
.mil-employee-form select:hover {
    border-color: var(--field-border-hover);
}

input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"])):focus,
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"])):focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
.mil-contact-form input:focus,
.mil-contact-form input:focus-visible,
.mil-contact-form textarea:focus,
.mil-contact-form textarea:focus-visible,
.mil-employee-form select:focus,
.mil-employee-form select:focus-visible,
.mil-subscribe-form input:focus-visible,
.mil-footer-band .mil-subscribe-form input:focus-visible {
    outline: none;
    border-color: var(--field-accent);
    box-shadow: var(--field-ring);
}

/* the contact search keeps its underline, with the same accent on focus */
.mil-contact-search input:focus,
.mil-contact-search input:focus-visible {
    outline: none;
    border-bottom-color: var(--field-accent);
    box-shadow: 0 2px 0 0 rgba(255, 152, 0, 0.35);
}

/* invalid and read-only, on every side of the box now */
.mil-contact-form .mil-field .is-invalid,
.mil-contact-form input.is-invalid,
.mil-contact-form textarea.is-invalid,
.mil-employee-form select.is-invalid,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--field-error);
}

.mil-contact-form .mil-field .is-invalid:focus,
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18);
}

.mil-contact-form .mil-field .is-valid { border-color: var(--field-border-hover); }

.mil-employee-form input[readonly] {
    border-style: dashed;
    background-color: #f6f5f3;
}

.mil-employee-form input[readonly]:focus {
    border-color: var(--field-border-hover);
    box-shadow: none;
}

select:disabled,
input:disabled,
textarea:disabled {
    background-color: #f6f5f3;
    cursor: not-allowed;
}

/* The subscribe box keeps its pill, in normal case like every other field. */
.mil-subscribe-form input,
.mil-subscribe-form input::placeholder {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* ---------- release notes (pages/release-notes) ----------
   A documentation changelog: the updates on the left, and an "On this page"
   list of the months on the right that stays in view and marks the month
   being read (main.js, initReleaseToc). Black type, the orange accent. */

/* The theme clips every section and the page wrapper with overflow: hidden,
   which would stop the list sticking. clip still clips, but is no scroller. */
.mil-wrapper:has(.mil-rn-section),
section.mil-rn-section {
    overflow: clip;
}

.mil-rn-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-areas: "main aside";
    gap: 64px;
    align-items: start;
}

.mil-rn-main { grid-area: main; min-width: 0; }
.mil-rn-aside { grid-area: aside; position: sticky; top: 120px; }

.mil-rn-lead {
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.7);
}

/* on this page */
.mil-rn-toc {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding: 24px 24px 24px 0;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.mil-rn-toc-title {
    margin: 0 0 14px 20px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: rgb(0, 0, 0);
}

.mil-rn-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mil-rn-toc ol ol { margin: 2px 0 4px; }

.mil-rn-toc a {
    position: relative;
    display: block;
    padding: 5px 0 5px 20px;
    font-size: 15px;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.65);
    text-decoration: none;
    transition: color 0.2s ease;
}

.mil-rn-toc ol ol a { padding-left: 36px; font-size: 14px; }

.mil-rn-toc a:hover,
.mil-rn-toc a:focus-visible { color: rgb(0, 0, 0); }

/* The month being read: bold, with an orange bar over the list's rule. */
.mil-rn-toc a.is-active {
    font-weight: 600;
    color: rgb(0, 0, 0);
}

.mil-rn-toc a.is-active::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: -2px;
    width: 3px;
    border-radius: 3px;
    background-color: rgb(255, 152, 0);
}

/* the updates */
.mil-release-month {
    padding-top: 48px;
    scroll-margin-top: 110px;
}

.mil-release-month-title {
    margin: 0 0 8px;
    padding-bottom: 14px;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.25;
    border-bottom: 2px solid rgb(255, 152, 0);
}

.mil-release-item {
    padding: 26px 0 4px;
}

.mil-release-title {
    margin: 0 0 6px;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.35;
    color: rgb(0, 0, 0);
}

.mil-release-meta {
    margin: 0 0 12px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.55);
}

.mil-release-body {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.85);
}

/* earlier years, each under its own heading */
.mil-release-earlier {
    margin-top: 80px;
    scroll-margin-top: 110px;
}

.mil-release-earlier-title {
    margin: 0;
    padding-bottom: 14px;
    font-size: 34px;
    font-weight: 600;
    border-bottom: 2px solid rgb(0, 0, 0);
}

.mil-release-year {
    padding-top: 40px;
    scroll-margin-top: 110px;
}

.mil-release-year-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    font-size: 30px;
    font-weight: 600;
}

.mil-release-count {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 500;
    background-color: rgba(255, 152, 0, 0.16);
    color: rgb(0, 0, 0);
}

.mil-release-year .mil-release-month { padding-top: 32px; }
.mil-release-year .mil-release-month-title { font-size: 26px; border-bottom-width: 1px; border-bottom-color: rgba(255, 152, 0, 0.6); }
.mil-release-year .mil-release-title { font-size: 20px; }

/* A narrow screen: the list first, as a plain box, then the updates. */
@media screen and (max-width: 991px) {
    .mil-rn-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "aside" "main";
        gap: 32px;
    }

    .mil-rn-aside { position: static; }

    .mil-rn-toc {
        max-height: none;
        padding: 20px 20px 20px 0;
        border-radius: 0 16px 16px 0;
        background-color: rgb(250, 250, 250);
    }

    .mil-release-month-title,
    .mil-release-earlier-title { font-size: 28px; }
}

/* Formatted release notes (written in the admin editor, App\Support\RichText). */
.mil-release-body > * + * { margin-top: 12px; }
.mil-release-body p { margin: 0; }
.mil-release-body h3,
.mil-release-body h4 { margin: 20px 0 8px; font-size: 18px; line-height: 1.4; }
.mil-release-body h4 { font-size: 16px; }
.mil-release-body ul,
.mil-release-body ol { margin: 0; padding-left: 22px; }
.mil-release-body ul { list-style: disc; }
.mil-release-body ol { list-style: decimal; }
.mil-release-body li + li { margin-top: 4px; }
.mil-release-body a { color: rgb(0, 0, 0); text-decoration: underline; text-decoration-color: rgb(255, 152, 0); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mil-release-body blockquote { margin: 0; padding: 8px 0 8px 18px; border-left: 3px solid rgb(255, 152, 0); color: rgba(0, 0, 0, 0.7); }