/*
 * Maintenance page — theme C (Dark-led) from the main site.
 * style.min.css is a copy of the site stylesheet, used for the Bootstrap grid
 * and the Font Awesome icons. Everything visual is here; the brand reds come
 * from its --red-* custom properties.
 */

/* DM Sans (variable, 300–800), self-hosted */
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(../fonts/dm-sans-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(../fonts/dm-sans-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens (theme C) ───────────────────────────────────────────────── */

:root {
    --ink: #111C2E;
    --ink-muted: color-mix(in srgb, var(--ink) 72%, #fff);         /* 6.6:1 on white */
    --on-dark-muted: color-mix(in srgb, #fff 74%, var(--ink));      /* 9.7:1 on ink */
    --on-dark-line: color-mix(in srgb, #fff 18%, var(--ink));
    --wash: #F3F4F5;                                                /* light grey: ink #111C2E at 5% on white */
    --run: .57735;                                                  /* tan 30°: a 60° edge runs this × its drop */
    --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.m-page {
    --bs-body-font-family: var(--font);
    --bs-body-color: var(--ink);
    --bs-link-color-rgb: 17, 28, 46;
    --bs-link-hover-color-rgb: 178, 42, 46;   /* red 600 */

    font-family: var(--font);
    font-size: 1.0625rem;
    font-weight: 350;
    line-height: 1.65;
    color: var(--ink);
    background: #fff;
}

/* Headings: DM Sans (the site stylesheet sets Montserrat). */
.m-page h1,
.m-page h2 {
    font-family: var(--font);
}

/* Eyebrows: theme C weight and size (19px bold = large text). */
.m-eyebrow {
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--red-500);                   /* 3.43:1 on ink, 4.98:1 on white */
}

/* ── Header ─────────────────────────────────────────────────────────── */

.m-header {
    border-bottom: 1px solid var(--on-dark-line);   /* full browser width */
    background: var(--ink);
}

.m-header__bar {
    display: flex;
    justify-content: center;
    padding: 1.3125rem 0;                    /* 21px (was 20px) */
}

.m-header__logo {
    display: block;
    height: 50px;                            /* 20% smaller than 62px */
    width: auto;
}

/* ── Hero ───────────────────────────────────────────────────────────── */

.m-page {
    --strip-h: clamp(14rem, 25vw, 25rem);    /* as the home page hero strip */
    --strip-gap: 1.5rem;
    --strip-overlap: .3333;                  /* share of the strip below the hero */
}

.m-hero {
    position: relative;
    isolation: isolate;
    display: flow-root;
    padding-top: 6.5rem;
    background: var(--ink);
    color: #fff;
}

/* Red outline A: top right, 24px below the top, down behind the strip;
   cropped by the hero's edges (its own clipping box, so the strip can hang below). */
.m-hero__mark {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.m-hero__mark::before {
    content: "";
    position: absolute;
    top: 4.625rem;                           /* 50px lower than before */
    /* From the container's right edge, so it keeps its place against the content. */
    right: calc((100% - var(--cw, 100%)) / 2 - 18.75rem);
    height: calc(100% + 1.5rem);
    aspect-ratio: 366.289 / 238.758;
    background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22245.445 73.312 366.289 238.758%22%3E%3Cg fill=%22none%22 stroke=%22%23D0333A%22 stroke-width=%221.5%22 stroke-linejoin=%22miter%22%3E%3Cpath vector-effect=%22non-scaling-stroke%22 d=%22M 517.395 312.07 L 555.828 312.07 L 475.758 171.773 L 456.543 205.445 Z%22/%3E%3Cpath vector-effect=%22non-scaling-stroke%22 d=%22M 573.301 312.07 L 611.734 312.07 L 503.711 122.801 L 484.492 156.469 Z%22/%3E%3Cpath vector-effect=%22non-scaling-stroke%22 d=%22M 461.492 312.07 L 499.926 312.07 L 447.809 220.75 L 428.59 254.422 Z%22/%3E%3Cpath vector-effect=%22non-scaling-stroke%22 d=%22M 301.352 312.07 L 339.785 312.07 L 400.637 205.445 L 381.422 171.773 Z%22/%3E%3Cpath vector-effect=%22non-scaling-stroke%22 d=%22M 245.445 312.07 L 283.883 312.07 L 372.688 156.469 L 353.469 122.801 Z%22/%3E%3Cpath vector-effect=%22non-scaling-stroke%22 d=%22M 357.254 312.07 L 395.688 312.07 L 428.59 254.422 L 409.375 220.75 Z%22/%3E%3Cpath vector-effect=%22non-scaling-stroke%22 d=%22M 475.469 73.312 L 437.617 73.312 L 437.324 73.824 L 428.59 89.129 L 409.371 122.801 L 400.637 138.105 L 381.422 171.773 L 400.637 205.445 L 419.855 171.773 L 428.59 156.469 L 447.809 122.801 L 456.543 107.496 L 475.758 73.824 Z%22/%3E%3Cpath vector-effect=%22non-scaling-stroke%22 d=%22M 419.562 73.312 L 381.711 73.312 L 381.422 73.824 L 372.688 89.129 L 353.469 122.801 L 372.688 156.469 L 391.902 122.801 L 400.637 107.496 L 419.855 73.824 Z%22/%3E%3Cpath vector-effect=%22non-scaling-stroke%22 d=%22M 484.492 89.129 L 465.277 122.801 L 456.543 138.105 L 437.324 171.777 L 428.59 187.078 L 409.375 220.75 L 428.59 254.422 L 447.809 220.75 L 456.543 205.445 L 475.758 171.777 L 484.492 156.469 L 503.711 122.801 Z%22/%3E%3C/g%3E%3C/svg%3E") no-repeat top right / contain;
}

.m-hero__headline {
    margin: 0;
    font-size: clamp(2.25rem, 1rem + 4vw, 4.75rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.02;
    color: #fff;
}

.m-hero__intro {
    max-width: 46rem;
    margin: 2rem 0 0;
    font-size: clamp(1.0625rem, calc(1rem + .7vw - 2px), 1.375rem);
    font-weight: 300;
    line-height: 1.55;
    color: var(--on-dark-muted);
}

/* Image strip: three equal 60° parallelograms, wider than the container but
   short of the browser edges, two-thirds over the hero. */
.m-strip {
    --s: calc(var(--strip-h) * var(--run));
    --out: max(0px, calc((100vw - 100%) / 2 - 1.25rem));

    position: relative;
    z-index: 1;
    display: flex;
    height: var(--strip-h);
    margin: 5.5rem calc(var(--out) * -1) calc(var(--strip-h) * var(--strip-overlap) * -1);
}

.m-strip__item {
    flex: 1 1 0;
    min-width: 0;
    clip-path: polygon(var(--s) 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%);
}

.m-strip__item + .m-strip__item {
    margin-left: calc(var(--strip-gap) - var(--s));
}

.m-strip__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Container widths (Bootstrap), for placing the A against the content. */
@media (min-width: 576px)  { .m-page { --cw: 540px; } }
@media (min-width: 768px)  { .m-page { --cw: 720px; } }
@media (min-width: 992px)  { .m-page { --cw: 960px; } }
@media (min-width: 1200px) { .m-page { --cw: 1140px; } }
@media (min-width: 1400px) { .m-page { --cw: 1320px; } }

/* ── Contact ────────────────────────────────────────────────────────── */

.m-contact .m-eyebrow {
    font-size: 1.4375rem;                    /* 23px: 4px larger */
}

.m-contact {
    padding: calc(var(--strip-h) * var(--strip-overlap) + 3.5rem) 0 4rem;   /* clears the strip's lower third */
    background: #fff;
}

/* Light grey cards with the site's 60° top-right cut (20px drop). */
.m-card {
    --cut: 1.25rem;

    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: 100%;
    padding: 1.5rem 1.75rem;
    border-radius: 3px;
    background: var(--wash);
    clip-path: polygon(0 0, calc(100% - var(--cut) * var(--run)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

.m-card__label {
    margin: 0 0 .125rem;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--ink-muted);                 /* 6.2:1 on the light grey */
}

.m-card__value {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.m-card__value--phone {
    font-size: 1.5rem;
}

/* Icon tiles: white icons on the brand reds. */
.contact-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 3px;
    font-size: 1.5rem;
    color: #fff;
}

/* Smooth blend from bright red to mid red. */
.contact-icon--gradient {
    background: linear-gradient(120deg, var(--red-500), var(--red-600));
}

/* ── Footer ─────────────────────────────────────────────────────────── */

.m-footer {
    padding: 2rem 0 2.5rem;
    border-top: 1px solid color-mix(in srgb, var(--ink) 14%, #fff);
    background: #fff;
    font-size: .875rem;
    color: var(--ink-muted);                 /* 6.6:1 on white */
}

/* ── Breakpoints ────────────────────────────────────────────────────── */

@media (min-width: 992px) {
    .m-page {
        font-size: 1.125rem;
    }

    .m-contact {
        padding-bottom: 5.5rem;
    }

    .m-card {
        padding: 1.75rem 2rem;
    }

    .m-card__label {
        font-size: 1.125rem;
    }

    .m-card__value {
        font-size: 1.375rem;
    }

    .m-card__value--phone {
        font-size: 1.75rem;
    }
}

@media (max-width: 767.98px) {
    .m-page {
        --strip-h: 9rem;
        --strip-gap: 1rem;
    }

    .m-hero {
        padding-top: 3.5rem;
    }

    .m-hero__mark::before {
        top: 3rem;
        right: -10vw;
        height: auto;
        width: 80vw;
        opacity: .7;
    }

    .m-strip {
        margin-top: 3rem;
    }

    .m-header__logo {
        height: 42px;                        /* 20% smaller than 52px */
    }
}