:root {
    --black: #02060b;
    --midnight: #061323;
    --gold: #d5a63b;
    --blue: #00aaff;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--black);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

.site-header {
    position: relative;
    background: var(--black);
}

.header-artwork {
    display: block;
    width: 100%;
    height: auto;
}

.navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    padding: 12px;
    background: #02070d;
    border-bottom: 1px solid var(--gold);
}

.navigation a {
    color: white;
    text-decoration: none;
    font-size: 13px;
}

.navigation a:hover {
    color: var(--gold);
}

.full-artwork {
    display: block;
    width: 100%;
    height: auto;
}

.hero-section,
.journey-section,
.companies-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

.section-anchor {
    display: block;
    position: relative;
    top: -20px;
}

.company-links {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    padding: 20px;
    flex-wrap: wrap;
}

.company-links a {
    color: var(--gold);
    text-decoration: none;
}

.company-links a:hover {
    color: var(--blue);
}

.content-section {
    padding: 60px 8%;
    text-align: center;
    background: var(--midnight);
    border-top: 1px solid var(--gold);
}

.content-section h2 {
    color: var(--gold);
}

.contact-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 28px;
    border: 1px solid var(--gold);
    color: var(--gold);
    text-decoration: none;
}

footer {
    padding: 25px;
    text-align: center;
    font-size: 12px;
    color: #aaa;
    border-top: 1px solid var(--gold);
}

@media (max-width: 768px) {

    .navigation {
        gap: 12px;
    }

    .navigation a {
        font-size: 11px;
    }

    .content-section {
        padding: 35px 20px;
    }
}


/* =========================================
   JCJ-WEB-01E
   APPROVED HEADER INTERACTIVE OVERLAY
   ========================================= */

.header-container {
    position: relative;
    width: 100%;
    line-height: 0;
}

.header-container .header-artwork {
    display: block;
    width: 100%;
    height: auto;
}

.header-hotspots {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.header-hotspots .hotspot {
    position: absolute;
    display: block;
    height: 58%;
    top: 20%;
    cursor: pointer;
    background: transparent;
}

.header-hotspots .hotspot:focus-visible {
    outline: 2px solid #d5a63b;
    outline-offset: -2px;
}

/*
   Positions are percentages of the approved
   header artwork.

   They scale with the image.
*/

.header-hotspots .home {
    left: 38.0%;
    width: 4.2%;
}

.header-hotspots .about {
    left: 42.2%;
    width: 3.8%;
}

.header-hotspots .education {
    left: 46.0%;
    width: 5.3%;
}

.header-hotspots .career {
    left: 51.3%;
    width: 4.0%;
}

.header-hotspots .research {
    left: 55.3%;
    width: 5.0%;
}

.header-hotspots .journey {
    left: 60.3%;
    width: 9.1%;
}

.header-hotspots .companies {
    left: 69.4%;
    width: 5.5%;
}

.header-hotspots .publications {
    left: 74.9%;
    width: 6.0%;
}

.header-hotspots .contact {
    left: 80.9%;
    width: 5.2%;
}

.header-hotspots .contact-button-hotspot {
    left: 88.8%;
    width: 8.7%;
    top: 15%;
    height: 68%;
}

/* Prevent the old navigation styling
   from affecting the approved header. */

.navigation {
    display: none;
}

/* Mobile header remains proportional. */

@media (max-width: 768px) {

    .header-container {
        min-width: 760px;
    }

    .site-header {
        overflow-x: auto;
    }

}


/* =========================================================
   JCJ-WEB-01E-R5-GOLD-DIVIDERS
   Approved homepage section separation
   ========================================================= */

section.journey-section {
    border-top: 2px solid #D4AF37;
}

section.companies-section {
    border-top: 2px solid #D4AF37;
}

/* ========================================================= */


/* JCJ-WEB-01E-R6 - Company artwork button overlays */

.jcj-company-artwork {
    position: relative;
    width: 100%;
    line-height: 0;
}

.jcj-company-artwork > img {
    display: block;
    width: 100%;
    height: auto;
}

.jcj-company-link {
    position: absolute;
    display: block;
    z-index: 10;
    cursor: pointer;
    border-radius: 4px;
}

.jcj-company-link:focus-visible {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
}

/*
   Button positions are percentages of the
   original companies artwork dimensions.
*/

.jcj-company-link-sis {
    left: 18.5%;
    top: 72%;
    width: 10.5%;
    height: 15%;
}

.jcj-company-link-sms {
    left: 53%;
    top: 67%;
    width: 14%;
    height: 23%;
}

.jcj-company-link-macro {
    left: 85%;
    top: 72%;
    width: 12%;
    height: 15%;
}


/* =========================================================
   JCJ-WEB-01E-R9A
   Clickable company buttons embedded in Journey artwork
   ========================================================= */

.jcj-journey-artwork {
    position: relative;
    width: 100%;
    line-height: 0;
}

.jcj-journey-artwork > img {
    display: block;
    width: 100%;
    height: auto;
}

.jcj-journey-company-link {
    position: absolute;
    display: block;
    z-index: 20;
    cursor: pointer;
    border-radius: 4px;
}

.jcj-journey-company-link:focus-visible {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
}

/*
   Positions are relative to the full Journey PNG,
   which now includes the My Companies artwork.
   Final browser alignment must be visually accepted.
*/

.jcj-journey-sis {
    left: 16%;
    top: 88%;
    width: 10%;
    height: 7%;
}

.jcj-journey-sms {
    left: 46%;
    top: 88%;
    width: 12%;
    height: 7%;
}

.jcj-journey-macro {
    left: 81%;
    top: 88%;
    width: 11%;
    height: 7%;
}