* {
    box-sizing: border-box;
}
img {
	display:block;
}
p {
    margin:0;
}

html
{
    height:100%;
	background-color:var(--bg);
	overflow:hidden;
}

body
{
	position:relative;
    width:100%;
    height:100%;
    margin:0;
	background-color:var(--theme1-main);
    box-shadow:0 0 10px rgba(0, 0, 0, .6);
    font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Cantarell, Ubuntu, Helvetica Neue, Arial, Noto Color Emoji, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	overflow-x:hidden;
	overflow-y:auto;
    scroll-behavior:smooth;
	/* Syntax: scrollbar-color: [Thumb Color] [Track/Background Color] */
	/* scrollbar-color: rgba(120, 120, 120, 0.5) transparent; */
}
body:has(dialog[open]) {
	overflow:hidden;
}

header {
    z-index:100;
	position:fixed;
	top:0;
	left:0;
	right:0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
	transition:background-color .5s;
}
header.blend {
	background-color:#5F5B5BAA;
	mix-blend-mode:hard-light;
}
header.start,
header.small {
	background-color:#242424AB;
	box-shadow:0 0 10px rgba(0, 0, 0, .6);
}
header:hover {
	background-color:#156BA8;
	box-shadow:0 0 10px rgba(0, 0, 0, .6);
	mix-blend-mode:unset;
}
header.blend:hover {
	background-color:#444040;
	mix-blend-mode:hard-light;
}
header > .flex {
	display:flex;
	padding:20px 36px;
}
header .logo {
	display:block;
	width:fit-content;
	height:96px;
	transition:height .5s;
	overflow:hidden;
}
header.small .logo {
	height:46px;
}
header .logo > img {
	height:100%;
	min-height:64px;
	/* filter:drop-shadow(2px 4px 6px #000A); */
	filter:drop-shadow(1px 1px 2px #000A);
}
#menu {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	
}
#menu > .site-nav {
	position:absolute;
	left:50%;
	bottom:calc(100% + 20px);
	transform:translate(-50%, 50%);
	transition:bottom .4s ease-in, transform .4s;
}
#menu > .icon {
	opacity:.7;
	position:absolute;
	left:50%;
	bottom:calc(100% - 54px);
	transform:translateX(-50%);
	height:30px;
	font-size:1.2em;
	font-weight:200;
	text-shadow:1px 0 5px #000;
	color:#FFF;
	transition:bottom .3s .7s ease-in-out;
}
header.start #menu > .site-nav,
header.small #menu > .site-nav,
header:hover #menu > .site-nav {
	bottom:50%;
	transition:bottom .4s .2s, transform .4s;
}
header.start #menu > .icon,
header.small #menu > .icon,
header:hover #menu > .icon {
	bottom:100%;
	transition:bottom .3s ease-in;
}

header a.text {
	color:#FFF;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:200;
	text-shadow:1px 0 5px #000;
}
header a.login {
	z-index:3;
	margin:-3px -2px auto auto;
	padding:6px 4px;
	font-size:.95em;
	height: fit-content;
}
#menu > .site-nav > a {
	margin-right:15px;
	font-size:1.2em;
	white-space:nowrap;
	transition:color .4s;
}
#menu > .site-nav > a:last-child {
	margin-right:0;
}

header a:hover {
	color:var(--mcci-blue);
}
#menu > .site-nav > a.current {
	/* color:#0099F4; */
    font-size:1.3em;
    font-weight:400;
	color:black;
    text-shadow:none;
}
header.small #menu > .site-nav > a.current {
	color:var(--mcci-blue);
}
header:hover #menu > .site-nav > a.current {
	color:black;
}





body > main {
    position:relative;
    width:100%;
	min-height:100%;
	box-sizing:border-box;
	padding-bottom:100px;
    background-color:var(--theme1-main);
}


/* Banner Section */

section.banner {
    position:relative;
    z-index:10;
    min-height:100svh;
    overflow:hidden;
    isolation:isolate;
    background:#16222c;
}

section.banner::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 13, 19, .92) 0%, rgba(6, 13, 19, .68) 45%, rgba(6, 13, 19, .18) 78%, rgba(6, 13, 19, .44) 100%),
        linear-gradient(0deg, rgba(6, 13, 19, .72) 0%, transparent 44%);
}

section.banner > .banner-grid {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .2;
    background-image:
        linear-gradient(rgba(255, 255, 255, .17) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .17) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(90deg, black, transparent 72%);
}

section.banner > .banner-content {
    display: flex;
    min-height: 100svh;
    max-width: 1500px;
    margin: 0 auto;
    padding: 180px clamp(24px, 7vw, 108px) 190px;
    align-items: center;
}



.banner-text {
    max-width: 910px;
}

.banner-text > .eyebrow {
    display: flex;
    margin: 0 0 24px;
    color: rgba(255, 255, 255, .75);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    align-items: center;
    gap: 14px;
}

.banner-text > .eyebrow::before {
    content: "";
    width: 54px;
    height: 2px;
    background: var(--mcci-blue-bright);
}

section.banner h1 {
    max-width: 880px;
    margin: 0;
    color:#FFF;
    font-size: clamp(3.4rem, 7.6vw, 7.5rem);
    font-weight: 760;
    letter-spacing: -.065em;
    line-height: .92;
    text-wrap: balance;
}

section.banner h1 span {
    display: block;
}

section.banner h1 span:last-child {
	margin-top:20px;
    /* color: transparent; */
    /* -webkit-text-stroke: 1.5px rgba(255, 255, 255, .88); */
}

section.banner .banner-lead {
    max-width: 710px;
    margin: 30px 0 0;
    color: rgba(255, 255, 255, .82);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.65;
}

section.banner .banner-metrics {
    position: absolute;
    left: clamp(24px, 7vw, 108px);
    right: clamp(24px, 7vw, 108px);
    bottom: 34px;
    display: grid;
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .25);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

section.banner .banner-metric {
    padding: 0 34px;
    border-left: 1px solid rgba(255, 255, 255, .2);
}

section.banner .banner-metric:first-child {
    padding-left: 0;
    border-left: 0;
}

section.banner .banner-metric strong {
    display: block;
    color:#FFF;
    font-size: clamp(1.7rem, 2.8vw, 2.7rem);
    letter-spacing: -.04em;
}

section.banner .banner-metric span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .65);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

section.banner .scroll-prompt {
    position: absolute;
    right: clamp(24px, 4vw, 64px);
    bottom: 46px;
    display: flex;
    color: rgba(255, 255, 255, .72);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;
    align-items: center;
    gap: 12px;
}
section.banner .scroll-prompt::after {
    content: "↓";
    display: grid;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 50%;
    place-items: center;
}

/* End: Banner Section */


#page > .content {
    position:relative;
    z-index:4;
	box-sizing:border-box;
	padding:0 0 50px;
    /* min-height:calc((100% - 100px) - min(max(33.3vw, 400px), 600px)); */
	min-height:calc(100vh - 100px);
}


footer {
	box-sizing:border-box;
	width:100%;
    padding:40px;
    background-color:var(--mcci-blueAlt1);
    text-align:center;
    color:#FFF;
}

footer > p {
    margin:0;
}


@media only screen and (max-width: 480px), (max-height: 480px) {
	header .logo {
		height:46px;
	}
	#menu > .icon {
		height:24px;
	}

	#gallery > .floater {
		width:100vw;
		padding:0 20px;
	}
}
@media only screen and (max-width: 815px) {
	header {
		height:86px;
		transition:height .5s, background-color .5s;
	}
	header:hover {
		height:280px;
	}
	#menu > .site-nav > a {
		display:block;
		margin-right:0;
		padding:8px;
		text-align:center;
	}
}
@media only screen and (max-width: 480px) {
    #gallery > .floater > .medias {
		height:60px
    }
	#gallery > .floater > .close {
		right:20px;
		display:block;
	}
	#gallery > .floater > .nav {
		display:block;
	}
	#gallery > .floater > .display > .close,
	#gallery > .floater > .display > .nav {
		display:none;
	}
}
@media only screen and (max-height: 480px) {
	#gallery {
		padding: 30px 0;
	}
    #gallery > .floater > .medias {
        display:none;
    }
	#gallery > .floater > .display > .nav.left {
		left:0px
	}
	#gallery > .floater > .display > .close,
	#gallery > .floater > .display > .nav.right {
		right:0px;
	}
}


/* Common to Sections */

.section-number {
    margin: 0 0 14px;
    color: var(--mcci-blue);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.intro h2,
.section-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(2.35rem, 5vw, 4.9rem);
    font-weight: 760;
    letter-spacing: -.055em;
    line-height: .98;
}

.reveal {
    opacity:0 !important;
    transform:translateY(35px) !important;
    transition:opacity .8s ease, transform .8s cubic-bezier(.2, .75, .2, 1) !important;
}

.reveal.is-visible {
    opacity:1 !important;
    transform:none !important;
}

/* End: Common to Sections */

/* Intro Section */

section {
	--sectionSpacing:clamp(94px, 11vw, 160px);
}

section.intro {
    position: relative;
    /* width:min(1280px, calc(100% - 48px)); */
    width:86%;
    margin:60px auto 0;
    padding: clamp(38px, 5vw, 72px);
    background:#FFF;
    box-shadow: var(--shadow);
}

.intro-grid {
    display: grid;
    grid-template-columns: minmax(220px, .75fr) minmax(300px, 1.4fr);
    gap: clamp(34px, 7vw, 110px);
    align-items: start;
}


.intro-text {
    margin: 0;
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 1.65vw, 1.35rem);
    line-height: 1.75;
}

/* End: Intro Section */


@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}







.hero-outline-line {
    display: block;
    width: min(100%, 1000px);
}

.hero-outline-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.hero-outline-mask-text {
    font-size: 120px;
    font-weight: 760;
    letter-spacing: -6.6px;
}

.screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}