/* ============================================================
   DOAH
   RECONNAISSANCE
   MAIN PAGE
   ============================================================ */


/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #050303;
}


/* ============================================================
   PAGE
   ============================================================ */

.recon-page {

    position: relative;

    min-height: 100vh;

    overflow-x: hidden;

    color: #eee5d5;

    background: #050303;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

}


/* ============================================================
   ATMOSPHERE
   ============================================================ */

.recon-atmosphere {

    position: fixed;

    inset: 0;

    z-index: -10;

    overflow: hidden;

    background: #050303;

}


.recon-background-video {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    opacity: 0.82;

}


.recon-video-dark {

    position: absolute;

    inset: 0;

    background:
        rgba(
            0,
            0,
            0,
            0.34
        );

}


.recon-video-red {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 55% 45%,
            rgba(
                85,
                0,
                10,
                0.12
            ),
            transparent 55%
        );

}


.recon-video-vignette {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 15%,
            rgba(
                0,
                0,
                0,
                0.48
            ) 100%
        );

}


@keyframes reconGrain {

    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(2%, -2%);
    }

    50% {
        transform: translate(-2%, 2%);
    }

    75% {
        transform: translate(1%, 2%);
    }

    100% {
        transform: translate(-1%, -1%);
    }

}


/* ============================================================
   HEADER
   ============================================================ */

.recon-header {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    z-index: 30;

    height: 125px;

    padding:
        34px
        clamp(30px, 5vw, 80px);

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

}


.recon-logo-link {

    display: block;

    width:
        clamp(
            95px,
            8vw,
            140px
        );

}


.recon-logo {

    display: block;

    width: 100%;
    height: auto;

}


.recon-header-right {

    display: flex;

    align-items: center;

    gap: 42px;

    padding-top: 10px;

}


.recon-header-label,
.recon-return {

    font-size: 8px;

    letter-spacing: 0.28em;

    text-transform: uppercase;

}


.recon-header-label {

    color:
        rgba(
            238,
            229,
            213,
            0.50
        );

}


.recon-return {

    color: #c7a74a;

    text-decoration: none;

}


/* ============================================================
   HERO
   ============================================================ */

.recon-hero {

    position: relative;

    min-height: 100svh;

    display: flex;

    align-items: center;

    padding:
        155px
        clamp(30px, 7.8vw, 125px)
        100px;

}


.recon-hero-inner {

    width: 100%;

    max-width: 850px;

    margin-top: 15px;

}


.recon-hero-kicker {

    margin-bottom: 26px;

    color: #c7a74a;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 0.34em;

    text-transform: uppercase;

}


.recon-hero-title {

    margin: 0;

    color: #eee5d5;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            76px,
            10vw,
            158px
        );

    font-weight: 400;

    line-height: 0.72;

    letter-spacing: -0.055em;

    text-transform: uppercase;

}


.recon-hero-title span {

    display: block;

}


.recon-hero-description {

    max-width: 470px;

    margin:
        48px
        0
        0;

    color:
        rgba(
            238,
            229,
            213,
            0.72
        );

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            19px,
            1.45vw,
            25px
        );

    line-height: 1.22;

}


.recon-enter {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-top: 40px;

    color: #c7a74a;

    font-size: 8px;

    letter-spacing: 0.30em;

    text-decoration: none;

    text-transform: uppercase;

}


.recon-enter b {

    font-size: 13px;

    font-weight: 400;

    transition:
        transform 300ms ease;

}


.recon-enter:hover b {

    transform:
        translateY(4px);

}


/* ============================================================
   RECON HERO SIDE LABELS
   Quiet editorial navigation on the far right
   ============================================================ */

.recon-hero-side {
    position: absolute;

    /* Keep it at the far right of the hero */
    top: 80%;
    right: clamp(28px, 4vw, 70px);

    transform: translateY(-50%);

    /* Stack the four labels cleanly */
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 18px;

    width: 150px;

    /* DOAH editorial typography */
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 7px;
    font-weight: 400;

    letter-spacing: 0.28em;
    line-height: 1;

    text-align: right;
    text-transform: uppercase;

    color: rgba(238, 229, 213, 0.48);

    z-index: 10;

    pointer-events: none;
}


/* Individual labels */

.recon-hero-side span {
    display: block;

    width: 100%;

    text-align: right;

    white-space: nowrap;

    opacity: 0.8;

    transition:
        opacity 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


/* Subtle gold interaction */

.recon-hero-side span:hover {
    opacity: 1;

    color: #c8a84e;

    transform: translateX(-4px);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .recon-hero-side {
        right: 28px;

        width: 120px;

        gap: 14px;

        font-size: 6px;

        letter-spacing: 0.22em;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .recon-hero-side {
        display: none;
    }

}


.recon-hero-index {

    position: absolute;

    left:
        clamp(
            30px,
            5vw,
            80px
        );

    bottom: 35px;

    display: flex;

    gap: 20px;

    color:
        rgba(
            238,
            229,
            213,
            0.38
        );

    font-size: 7px;

    letter-spacing: 0.25em;

}


/* ============================================================
   ARCHIVE
   ============================================================ */

.recon-archive {

    position: relative;

    min-height: 100svh;

    padding:
        125px
        clamp(25px, 7vw, 110px)
        90px;

    background:
        rgba(
            4,
            2,
            2,
            0.15
        );

}


.recon-archive-inner {

    width: 100%;

    max-width: 1450px;

    margin: 0 auto;

}


/* ============================================================
   ARCHIVE HEADER
   ============================================================ */

.recon-archive-top {

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(280px, 0.65fr);

    align-items: end;

    gap: 90px;

    margin-bottom: 55px;

}


.recon-small-label {

    margin-bottom: 22px;

    color: #c7a74a;

    font-size: 8px;

    letter-spacing: 0.30em;

    text-transform: uppercase;

}


.recon-archive-title {

    margin: 0;

    color: #eee5d5;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            62px,
            7.2vw,
            116px
        );

    font-weight: 400;

    line-height: 0.74;

    letter-spacing: -0.055em;

}


.recon-archive-description {

    max-width: 400px;

    margin:
        0
        0
        8px;

    color:
        rgba(
            238,
            229,
            213,
            0.68
        );

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            18px,
            1.35vw,
            23px
        );

    line-height: 1.28;

}


/* ============================================================
   FILTERS
   ============================================================ */

.recon-filters {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 48px;

}


.recon-filter {

    padding:
        11px
        17px;

    border:
        1px solid
        rgba(
            199,
            167,
            74,
            0.28
        );

    outline: none;

    background:
        rgba(
            4,
            2,
            2,
            0.40
        );

    color:
        rgba(
            238,
            229,
            213,
            0.55
        );

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 0.22em;

    cursor: pointer;

    transition:
        250ms ease;

}


.recon-filter:hover {

    color: #eee5d5;

    border-color:
        rgba(
            199,
            167,
            74,
            0.7
        );

}


.recon-filter.active {

    color: #080504;

    background: #c7a74a;

    border-color: #c7a74a;

}


/* ============================================================
   CAROUSEL STAGE
   ============================================================ */

.recon-carousel-stage {

    position: relative;

    width: 100%;

}


.recon-carousel {

    display: flex;

    gap: 25px;

    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    padding:
        10px
        48px
        35px;

    scroll-behavior: smooth;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;

}


.recon-carousel::-webkit-scrollbar {

    display: none;

}


/* ============================================================
   CARD
   ============================================================ */

.recon-card {

    position: relative;

    flex:
        0 0
        clamp(
            290px,
            29vw,
            395px
        );

    min-height: 550px;

    overflow: hidden;

    scroll-snap-align: center;

    border:
        1px solid
        rgba(
            199,
            167,
            74,
            0.30
        );

    background:
        rgba(
            9,
            3,
            3,
            0.87
        );

    box-shadow:
        0 25px 80px
        rgba(
            0,
            0,
            0,
            0.45
        );

    cursor: pointer;

    transition:
        transform 450ms
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        ),
        border-color 350ms ease,
        box-shadow 350ms ease;

}


.recon-card:hover {

    transform:
        translateY(-10px);

    border-color:
        rgba(
            199,
            167,
            74,
            0.72
        );

    box-shadow:
        0 35px 100px
        rgba(
            0,
            0,
            0,
            0.60
        );

}


/* ============================================================
   CARD MEDIA
   ============================================================ */

.recon-card-media {

    position: relative;

    height: 255px;

    overflow: hidden;

    background:
        #100404;

}


.recon-card-media video {

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0.72;

    filter:
        saturate(0.78)
        contrast(1.1)
        brightness(0.78);

    transition:
        transform 900ms ease,
        opacity 500ms ease;

}


.recon-card:hover
.recon-card-media video {

    transform: scale(1.07);

    opacity: 0.9;

}


.recon-card-media::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 20%,
            rgba(
                8,
                2,
                2,
                0.94
            ) 100%
        );

}


.recon-card-media::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        radial-gradient(
            circle at 65% 35%,
            rgba(
                160,
                30,
                35,
                0.20
            ),
            transparent 50%
        );

}


/* ============================================================
   CARD ACCESS
   ============================================================ */

.recon-card-access {

    position: absolute;

    top: 16px;

    right: 16px;

    z-index: 5;

    padding:
        8px
        11px;

    border:
        1px solid
        rgba(
            199,
            167,
            74,
            0.65
        );

    background:
        rgba(
            4,
            2,
            2,
            0.72
        );

    color: #c7a74a;

    font-size: 7px;

    letter-spacing: 0.20em;

}


/* ============================================================
   CARD NUMBER
   ============================================================ */

.recon-card-number {

    position: absolute;

    top: 18px;

    left: 18px;

    z-index: 5;

    color:
        rgba(
            238,
            229,
            213,
            0.75
        );

    font-size: 7px;

    letter-spacing: 0.22em;

}


/* ============================================================
   CARD CONTENT
   ============================================================ */

.recon-card-content {

    padding:
        25px
        27px
        28px;

}


.recon-card-meta {

    display: flex;

    justify-content: space-between;

    margin-bottom: 18px;

    color:
        rgba(
            199,
            167,
            74,
            0.85
        );

    font-size: 7px;

    letter-spacing: 0.19em;

    text-transform: uppercase;

}


.recon-card-title {

    margin: 0 0 17px;

    color: #eee5d5;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            34px,
            2.8vw,
            43px
        );

    font-weight: 400;

    line-height: 0.83;

    letter-spacing: -0.035em;

}


.recon-card-description {

    min-height: 62px;

    margin: 0;

    color:
        rgba(
            238,
            229,
            213,
            0.62
        );

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 17px;

    line-height: 1.27;

}


.recon-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 23px;

    padding-top: 16px;

    border-top:
        1px solid
        rgba(
            238,
            229,
            213,
            0.11
        );

}


.recon-card-domain {

    color:
        rgba(
            238,
            229,
            213,
            0.40
        );

    font-size: 7px;

    letter-spacing: 0.17em;

}


.recon-card-open {

    color: #c7a74a;

    font-size: 7px;

    letter-spacing: 0.18em;

}


/* ============================================================
   ARROWS
   ============================================================ */

.recon-arrow {

    position: absolute;

    top: 50%;

    z-index: 15;

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    transform:
        translateY(-50%);

    border:
        1px solid
        rgba(
            199,
            167,
            74,
            0.45
        );

    background:
        rgba(
            5,
            2,
            2,
            0.76
        );

    color: #c7a74a;

    font-size: 17px;

    cursor: pointer;

    backdrop-filter:
        blur(12px);

    transition:
        250ms ease;

}


.recon-arrow:hover {

    background: #c7a74a;

    color: #050303;

}


.recon-arrow-left {

    left: 0;

}


.recon-arrow-right {

    right: 0;

}


/* ============================================================
   FOOTER COUNTER
   ============================================================ */

.recon-carousel-meta {

    display: flex;

    justify-content: space-between;

    padding:
        0
        48px;

    color:
        rgba(
            238,
            229,
            213,
            0.35
        );

    font-size: 7px;

    letter-spacing: 0.24em;

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 850px) {

    .recon-header {

        height: 100px;

    }


    .recon-header-right {

        gap: 0;

    }


    .recon-header-label {

        display: none;

    }


    .recon-hero {

        padding:
            145px
            30px
            80px;

    }


    .recon-hero-side {

        display: none;

    }


    .recon-archive {

        padding:
            100px
            25px
            80px;

    }


    .recon-archive-top {

        grid-template-columns: 1fr;

        gap: 28px;

    }


    .recon-carousel {

        padding-left: 25px;

        padding-right: 25px;

    }


    .recon-arrow {

        display: none;

    }


    .recon-carousel-meta {

        padding:
            0
            25px;

    }

}


@media (max-width: 560px) {

    .recon-logo-link {

        width: 92px;

    }


    .recon-hero-title {

        font-size:
            clamp(
                65px,
                18vw,
                105px
            );

    }


    .recon-hero-description {

        font-size: 19px;

    }


    .recon-card {

        flex-basis:
            calc(
                100vw - 55px
            );

    }

}

/* =========================================================
   DOAH RECONNAISSANCE
   RESPONSIVE SYSTEM
   TABLET + MOBILE
   ========================================================= */


/* =========================================================
   TABLET
   <= 900px
   ========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------------------
       GLOBAL
       ----------------------------------------------------- */

    .recon-page {
        width: 100%;
        overflow-x: hidden;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .recon-hero {
        min-height: 100svh;

        padding:
            120px 7vw
            80px;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        text-align: center;
    }


    .recon-hero-content {
        width: 100%;
        max-width: 760px;

        display: flex;
        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    .recon-hero-kicker {
        text-align: center;
    }


    .recon-hero-title {
        text-align: center;

        max-width: 100%;
    }


    .recon-hero-description {
        max-width: 620px;

        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }


    .recon-hero-cta {
        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       HERO SIDE WORDS
       ----------------------------------------------------- */

    .recon-hero-side {
        position: absolute;

        right: 5vw;
        bottom: 5vh;

        display: flex;
        flex-direction: column;

        align-items: flex-end;

        text-align: right;

        gap: 7px;
    }


    .recon-hero-side span {
        font-size: 8px;
        letter-spacing: 0.2em;
    }


    /* -----------------------------------------------------
       FIELD ARCHIVE
       ----------------------------------------------------- */

    .recon-archive,
    .recon-field,
    .recon-archive-section {
        width: 90vw;

        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }


    .recon-section-kicker,
    .recon-section-label {
        text-align: center;
    }


    .recon-section-title {
        text-align: center;
    }


    .recon-section-description {
        max-width: 650px;

        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }


    /* -----------------------------------------------------
       CAROUSEL / GRID
       ----------------------------------------------------- */

    .recon-carousel,
    .recon-carousel-track {
        width: 100%;
    }


    .recon-carousel {
        overflow: hidden;
    }


    .recon-carousel-track {
        display: flex;

        align-items: stretch;
    }


    .recon-card {
        flex: 0 0 78vw;

        max-width: 620px;

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       CARD CONTENT
       ----------------------------------------------------- */

    .recon-card-content {
        text-align: center;

        align-items: center;
    }


    .recon-card-number,
    .recon-card-classification,
    .recon-card-domain,
    .recon-card-title,
    .recon-card-subtitle,
    .recon-card-description {
        text-align: center;
    }


    .recon-card-button {
        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       CAROUSEL CONTROLS
       ----------------------------------------------------- */

    .recon-carousel-controls {
        justify-content: center;

        width: 100%;
    }


    .recon-carousel-control {
        margin: 0;
    }

}

/* =========================================================
   DOAH RECONNAISSANCE
   RESPONSIVE SYSTEM
   TABLET + MOBILE
   ========================================================= */


/* =========================================================
   TABLET
   901px → 601px
   Everything centered
   ========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------------------
       GLOBAL SAFETY
       ----------------------------------------------------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .recon-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .recon-page * {
        box-sizing: border-box;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    .recon-header {
        width: 100%;
        max-width: 100%;

        padding-left: 5vw;
        padding-right: 5vw;

        box-sizing: border-box;
    }

    .recon-logo-link {
        flex-shrink: 0;
    }

    .recon-header-right {
        min-width: 0;
        max-width: 100%;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .recon-hero {
        width: 100%;
        max-width: 100%;
        min-height: 100svh;

        padding: 120px 7vw 100px;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        text-align: center;

        box-sizing: border-box;

        overflow: hidden;
    }


    .recon-hero-content {
        width: 100%;
        max-width: 760px;

        min-width: 0;

        display: flex;
        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    .recon-hero-kicker {
        width: 100%;

        text-align: center;
    }


    .recon-hero-title {
        width: 100%;
        max-width: 760px;

        margin-left: auto;
        margin-right: auto;

        text-align: center;

        white-space: normal;

        overflow-wrap: normal;
    }


    .recon-hero-description {
        width: 100%;
        max-width: 620px;

        margin-left: auto;
        margin-right: auto;

        text-align: center;

        white-space: normal;
    }


    .recon-hero-cta {
        margin-left: auto;
        margin-right: auto;
    }


    /* =====================================================
       HERO SIDE WORDS
       ===================================================== */

    .recon-hero-side {
        position: absolute;

        right: 5vw;
        bottom: 5vh;

        width: auto;
        max-width: 40vw;

        display: flex;
        flex-direction: column;

        align-items: flex-end;

        gap: 7px;

        text-align: right;

        box-sizing: border-box;
    }


    .recon-hero-side span {
        font-size: 8px;
        letter-spacing: 0.2em;

        white-space: nowrap;
    }


    /* =====================================================
       FIELD ARCHIVE
       ===================================================== */

    .recon-archive,
    .recon-field,
    .recon-archive-section {

        width: 90%;
        max-width: 1000px;

        margin-left: auto;
        margin-right: auto;

        text-align: center;

        box-sizing: border-box;
    }


    .recon-section-kicker,
    .recon-section-label {

        width: 100%;

        text-align: center;
    }


    .recon-section-title {

        width: 100%;
        max-width: 760px;

        margin-left: auto;
        margin-right: auto;

        text-align: center;

        white-space: normal;

        overflow-wrap: normal;
    }


    .recon-section-description {

        width: 100%;
        max-width: 650px;

        margin-left: auto;
        margin-right: auto;

        text-align: center;

        white-space: normal;
    }


    /* =====================================================
       FILTERS
       ===================================================== */

    .recon-filters {

        width: 100%;
        max-width: 700px;

        margin-left: auto;
        margin-right: auto;

        display: flex;

        justify-content: center;
        align-items: center;

        flex-wrap: wrap;

        gap: 8px;

        text-align: center;
    }


    .recon-filter {

        flex-shrink: 0;

        white-space: nowrap;
    }


    /* =====================================================
       CAROUSEL
       ===================================================== */

    .recon-carousel {

        width: 100%;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        overflow: hidden;

        box-sizing: border-box;
    }


    .recon-carousel-track {

        width: 100%;
        max-width: 100%;

        display: flex;

        align-items: stretch;

        box-sizing: border-box;
    }


    .recon-card {

        flex: 0 0 78%;

        width: 78%;

        max-width: 620px;

        margin-left: auto;
        margin-right: auto;

        box-sizing: border-box;

        min-width: 0;
    }


    /* =====================================================
       CARD CONTENT
       ===================================================== */

    .recon-card-content {

        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: center;

        text-align: center;

        box-sizing: border-box;
    }


    .recon-card-number,
    .recon-card-classification,
    .recon-card-domain,
    .recon-card-title,
    .recon-card-subtitle,
    .recon-card-description {

        max-width: 100%;

        text-align: center;

        white-space: normal;

        overflow-wrap: normal;
    }


    .recon-card-button {

        margin-left: auto;
        margin-right: auto;
    }


    /* =====================================================
       CAROUSEL CONTROLS
       ===================================================== */

    .recon-carousel-controls {

        width: 100%;

        display: flex;

        justify-content: center;
        align-items: center;

        gap: 14px;

        text-align: center;
    }


    /* =====================================================
       IMAGES / VIDEO
       ===================================================== */

    .recon-page img,
    .recon-page video {

        max-width: 100%;
    }

}


/* =========================================================
   MOBILE
   600px AND BELOW
   ========================================================= */

@media (max-width: 600px) {

    /* -----------------------------------------------------
       GLOBAL
       ----------------------------------------------------- */

    html,
    body {

        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }


    .recon-page {

        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    .recon-header {

        width: 100%;

        padding:
            22px 20px;

        box-sizing: border-box;
    }


    .recon-header-right {

        max-width: 60%;

        overflow: hidden;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .recon-hero {

        width: 100%;
        max-width: 100%;

        min-height: 100svh;

        padding:
            105px 24px 105px;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        text-align: center;

        box-sizing: border-box;

        overflow: hidden;
    }


    .recon-hero-content {

        width: 100%;
        max-width: 360px;

        min-width: 0;

        display: flex;
        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    .recon-hero-kicker {

        width: 100%;

        font-size: 8px;

        letter-spacing: 0.2em;

        text-align: center;
    }


    .recon-hero-title {

        width: 100%;
        max-width: 360px;

        margin-left: auto;
        margin-right: auto;

        font-size:
            clamp(
                46px,
                13vw,
                64px
            );

        line-height: 0.88;

        letter-spacing: -0.02em;

        text-align: center;

        white-space: normal;

        overflow-wrap: normal;
    }


    .recon-hero-description {

        width: 100%;
        max-width: 340px;

        margin:
            24px auto 0;

        font-size: 12px;

        line-height: 1.7;

        text-align: center;

        white-space: normal;

        overflow-wrap: normal;
    }


    .recon-hero-cta {

        margin:
            24px auto 0;

        text-align: center;
    }


    /* =====================================================
       HERO SIDE WORDS
       ===================================================== */

    .recon-hero-side {

        position: absolute;

        left: 50%;
        right: auto;

        bottom: 25px;

        transform:
            translateX(-50%);

        width: 88%;
        max-width: 360px;

        display: flex;

        flex-direction: row;

        justify-content: center;
        align-items: center;

        flex-wrap: wrap;

        gap:
            8px 14px;

        text-align: center;
    }


    .recon-hero-side span {

        font-size: 7px;

        letter-spacing: 0.16em;

        white-space: nowrap;

        text-align: center;
    }


    /* =====================================================
       FIELD ARCHIVE
       ===================================================== */

    .recon-archive,
    .recon-field,
    .recon-archive-section {

        width: 90%;

        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        text-align: center;

        box-sizing: border-box;
    }


    .recon-section-kicker,
    .recon-section-label {

        width: 100%;

        font-size: 8px;

        text-align: center;
    }


    .recon-section-title {

        width: 100%;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        font-size:
            clamp(
                32px,
                9vw,
                52px
            );

        line-height: 0.95;

        text-align: center;

        white-space: normal;

        overflow-wrap: normal;

        word-break: normal;
    }


    .recon-section-description {

        width: 88%;
        max-width: 420px;

        margin-left: auto;
        margin-right: auto;

        font-size: 12px;

        line-height: 1.7;

        text-align: center;

        white-space: normal;

        overflow-wrap: normal;
    }


    /* =====================================================
       FILTER BUTTONS
       ===================================================== */

    .recon-filters {

        width: 100%;
        max-width: 360px;

        margin-left: auto;
        margin-right: auto;

        display: flex;

        justify-content: center;
        align-items: center;

        flex-wrap: wrap;

        gap: 7px;

        text-align: center;
    }


    .recon-filter {

        flex-shrink: 0;

        padding:
            8px 12px;

        font-size: 7px;

        letter-spacing: 0.15em;

        white-space: nowrap;
    }


    /* =====================================================
       CAROUSEL
       ===================================================== */

    .recon-carousel {

        width: 100%;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        overflow: hidden;

        box-sizing: border-box;
    }


    .recon-carousel-track {

        width: 100%;
        max-width: 100%;

        display: flex;

        align-items: stretch;

        box-sizing: border-box;
    }


    /* ONE CARD PER MOBILE VIEW */

    .recon-card {

        flex:
            0 0 100%;

        width: 100%;

        max-width: 100%;

        margin: 0;

        box-sizing: border-box;

        min-width: 0;

        text-align: center;
    }


    /* =====================================================
       CARD CONTENT
       ===================================================== */

    .recon-card-content {

        width: 100%;

        padding:
            28px 22px;

        display: flex;
        flex-direction: column;

        align-items: center;

        text-align: center;

        box-sizing: border-box;
    }


    .recon-card-number,
    .recon-card-classification,
    .recon-card-domain,
    .recon-card-title,
    .recon-card-subtitle,
    .recon-card-description {

        width: 100%;
        max-width: 100%;

        text-align: center;

        white-space: normal;

        overflow-wrap: normal;
    }


    .recon-card-title {

        font-size: 28px;

        line-height: 1;

        text-align: center;
    }


    .recon-card-subtitle {

        font-size: 12px;

        line-height: 1.6;

        text-align: center;
    }


    .recon-card-description {

        font-size: 11px;

        line-height: 1.7;

        text-align: center;
    }


    .recon-card-button {

        margin-left: auto;
        margin-right: auto;
    }


    /* =====================================================
       CAROUSEL CONTROLS
       ===================================================== */

    .recon-carousel-controls {

        width: 100%;

        display: flex;

        justify-content: center;
        align-items: center;

        gap: 14px;

        text-align: center;
    }


    /* =====================================================
       IMAGES / VIDEO
       ===================================================== */

    .recon-page img,
    .recon-page video {

        max-width: 100%;

        height: auto;
    }

}


/* =========================================================
   VERY SMALL PHONES
   400px AND BELOW
   ========================================================= */

@media (max-width: 400px) {

    .recon-hero {

        padding-left: 18px;
        padding-right: 18px;
    }


    .recon-hero-title {

        font-size:
            clamp(
                42px,
                12.5vw,
                58px
            );
    }


    .recon-hero-description {

        max-width: 310px;

        font-size: 11px;
    }


    .recon-section-title {

        font-size:
            clamp(
                30px,
                8.8vw,
                46px
            );
    }


    .recon-section-description {

        width: 92%;

        font-size: 11px;
    }


    .recon-filter {

        padding:
            7px 10px;

        font-size: 6.5px;
    }


    .recon-card-content {

        padding:
            24px 18px;
    }

}

@media (max-width: 600px) {

    .recon-hero-side {
        display: flex;

        position: absolute;

        right: 18px;
        left: auto;

        bottom: 28px;

        transform: none;

        width: auto;
        max-width: 120px;

        flex-direction: column;

        justify-content: flex-start;
        align-items: flex-end;

        gap: 3px;

        text-align: right;
    }

    .recon-hero-side span {
        display: block;

        font-size: 7px;

        line-height: 1.15;

        letter-spacing: 0.16em;

        white-space: nowrap;

        text-align: right;
    }

    .recon-section-title {
        display: block;

        width: 100%;
        max-width: 100%;

        margin: 0 auto;
        padding: 0;

        font-size: clamp(
            30px,
            8.5vw,
            44px
        );

        line-height: 0.95;
        letter-spacing: -0.02em;

        text-align: center;

        white-space: normal;
        overflow: visible;

        overflow-wrap: normal;
        word-break: normal;

        box-sizing: border-box;
    }

    .recon-section-description {
        display: block;

        width: 88%;
        max-width: 340px;

        margin: 20px auto 0;
        padding: 0;

        font-size: 11px;

        line-height: 1.7;

        text-align: center;

        white-space: normal;

        overflow: visible;
        overflow-wrap: normal;

        box-sizing: border-box;
    }

}

/* =========================================================
   MOBILE ARCHIVE TITLE FIX
   ========================================================= */

@media (max-width: 600px) {

    .recon-archive,
    .recon-field,
    .recon-archive-section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: visible;
    }

    .recon-section-title {
        width: 100%;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        padding-left: 10px;
        padding-right: 10px;

        box-sizing: border-box;

        font-size: 32px;
        line-height: 0.98;

        text-align: center;

        white-space: normal;
        overflow: visible;

        overflow-wrap: normal;
        word-break: normal;
    }

    .recon-section-description {
        width: calc(100% - 36px);
        max-width: 340px;

        margin-left: auto;
        margin-right: auto;

        text-align: center;

        box-sizing: border-box;
    }

}

/* =========================================================
   RECON MOBILE TITLE - FINAL CONTAINMENT
   ========================================================= */

@media (max-width: 600px) {

    .recon-section-title {
        display: block;

        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);

        margin: 0 auto;
        padding: 0;

        font-size: 27px;
        line-height: 0.98;
        letter-spacing: -0.015em;

        text-align: center;

        white-space: normal;
        overflow: visible;

        box-sizing: border-box;
    }

    .recon-section-description {
        width: calc(100vw - 50px);
        max-width: 340px;

        margin: 18px auto 0;
        padding: 0;

        font-size: 10px;
        line-height: 1.6;

        text-align: center;

        white-space: normal;
        overflow: visible;

        box-sizing: border-box;
    }

}

/* =========================================================
   RECONNAISSANCE
   MOBILE ARCHIVE HEADER - FINAL FIX
   ========================================================= */

@media (max-width: 600px) {

    /* Keep the entire archive section inside the viewport */
    .recon-archive,
    .recon-field,
    .recon-archive-section {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
        overflow: visible;
    }

    /* Archive title */
    .recon-section-title {
        display: block;

        width: 100%;
        max-width: 100%;

        margin: 0 auto;
        padding: 0;

        font-size: 26px;
        line-height: 1.02;
        letter-spacing: -0.01em;

        text-align: center;

        white-space: normal;
        overflow: visible;

        overflow-wrap: break-word;
        word-break: normal;

        box-sizing: border-box;
    }

    /* Archive description */
    .recon-section-description {
        display: block;

        width: 100%;
        max-width: 330px;

        margin: 18px auto 0;
        padding: 0;

        font-size: 10px;
        line-height: 1.65;

        text-align: center;

        white-space: normal;
        overflow: visible;

        box-sizing: border-box;
    }

}

/* =========================================================
   RECONNAISSANCE — MOBILE ARCHIVE HEADING
   ========================================================= */

@media screen and (max-width: 600px) {

    /* Keep archive area inside phone viewport */
    .recon-archive,
    .recon-field,
    .recon-archive-section,
    .recon-section {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 16px !important;
        padding-right: 16px !important;

        box-sizing: border-box !important;
    }

    /* FORCE THE ARCHIVE TITLE TO FIT */
    .recon-section-title {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;
        padding: 0 !important;

        font-size: 23px !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;

        text-align: center !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    /* DESCRIPTION */
    .recon-section-description {
        display: block !important;

        width: 100% !important;
        max-width: 320px !important;

        margin: 16px auto 0 !important;
        padding: 0 !important;

        font-size: 10px !important;
        line-height: 1.6 !important;

        text-align: center !important;

        white-space: normal !important;

        box-sizing: border-box !important;
    }

}

/* =========================================================
   RECONNAISSANCE — MOBILE ARCHIVE TITLE
   ========================================================= */

@media screen and (max-width: 600px) {

    .recon-archive-title {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;
        padding: 0 !important;

        font-family: "Cormorant Garamond", Georgia, serif !important;

        font-size: 34px !important;
        line-height: 0.95 !important;
        letter-spacing: -0.02em !important;

        text-align: center !important;

        white-space: normal !important;
        overflow: visible !important;

        overflow-wrap: normal !important;
        word-break: normal !important;

        box-sizing: border-box !important;
    }

        .recon-archive-description {
        display: block !important;

        width: 100% !important;
        max-width: 330px !important;

        margin: 18px auto 0 !important;
        padding: 0 !important;

        font-size: 11px !important;
        line-height: 1.6 !important;

        text-align: center !important;

        white-space: normal !important;
        overflow: visible !important;

        box-sizing: border-box !important;
    }

}