@charset "UTF-8";
/* CSS Document */


	
:root {
	
	/* colors */
	
    --yellow: #FFCC33;
    --royalblue: #0075BE;
    --chartreuse: #B3C642;
    --dark: #313131;
    --red: #D0433A;
    --orange: #F99F1C;
    --salmon: #F36F45;
    --bluegray: #B3C4CC;
    --aqua: #3DABA4;
    --slate: #7B858F;
	--accessible-slate: #6C757F;
    --lightblue: #82BCE5;
	--white: #FFFFFF;
	--white50: #FFFFFF90;
	
	/* fonts */
	
	--primary-font: arial, sans-serif;

	
}
	

  
html {
	
	font-size: 16px !important;
	line-height: 1.5 !important;
	margin:0;
}
	

	

body {
		
	
margin:0;
	background-color:#294567;
	
	}

.upper-content-container {
	
	 background-color: #294567;
  background: url("../assets/photos/intro-bg4.webp"); 
	background-position: 0 65%;
	background-size: cover;
	background-repeat: no-repeat; 
	
	padding:4rem 6rem;
	
		border-bottom:10px solid;
border-image: linear-gradient(to right, #0175BD, #1f98de) 1;
	position: relative;
	z-index: 1;
	

	
}


.lower-content-container {
    position: relative; /* needed for the pseudo-element */
    padding: 4rem 6rem;
    width: 100%;
    background-color: #294567;
    box-sizing: border-box;
    overflow: hidden; /* keeps pseudo-element inside */
	
		border-top:10px solid;
border-image: linear-gradient(to right, #0175BD, #1f98de) 1;
	z-index: 1;
}
.lower-content-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(
            to right, 
            rgba(41,69,103,1) 0%, 
            rgba(41,69,103,0) 100%
        ),
        url('https://www.bentley.edu/files/alumni/impact-report-25/timeline/timeline3/assets/scaling-shield-bg3.png');
   background-repeat: no-repeat;
    background-position: right calc(100% + 10px);
    background-size: contain;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    /* gradient only covers the image area */
    background-origin: content-box;
    background-clip: content-box, border-box; 

}



.screen {
	
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
	height:500px;
	position: absolute;
	top:0;
	width:100%;
	z-index: -1;
	left:0;
}

	
	
	main {
		
	
		width:100%;
		padding-top:2rem;
		
		
	}
	
	header {
		
		padding:2rem 0;
	}
	
	#lockup {
		
		width:200px;
		
	
		
	}	
	
	h1, h2, h3, h4, h5, h6, p {
	
	color: var(--white);
	font-family: var(--primary-font) !important;
	
}

h1 { 
	
	font-size:3rem !important;
	line-height: 1.25 !important;
}

h2 { 
	
	font-size:1.5rem; 
	line-height: 1.25;
}

h3 { 
	
	font-size:1rem; 
	line-height: 1.5;
}

h4 { 
	
	font-size:1rem;
	line-height: 1.5;
}

h5 { 
	
	font-size:1rem;
	line-height: 1.5;
}

h6 { 
	
	font-size:1rem;
	line-height: 1.5;
}



/*
#intro {
    position: relative;
    padding: 1rem 6rem 2.5rem;
    margin: 0 auto;
    max-width: 65ch;
    background: #294567;
    color: white;
    z-index: 1;
}


#intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../assets/fall1.jpg") left top /  120% no-repeat fixed;
    z-index: -1;
    padding: 10px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
} */



#intro {
    position: relative;
    padding: 1rem 6rem 2.5rem;
    margin: 0 auto;
    max-width: 75ch;
   /* background: #294567; */

    color: white;
    z-index: 1;
	
	
}

/* Faux border with parallax image */
#intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../assets/fall1.jpg") left top / 120% no-repeat fixed;
    z-index: -1;
    padding: 10px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
                   linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    /* start white */
    background-color: white;
    background-blend-mode: screen; /* mix solid white with image */
    transition: background-color 0.5s ease;
}

/* once scrolled, fade white away */
#intro.scrolled::before {
    background-color: transparent;
}


#intro h1 {
	
	font-family: "caecilia", "caecilia lt std", serif !important;
	text-transform: uppercase;
	text-align: center;
	font-weight:700;
}

span.h1-year {
    display: block;
    font-weight: 100;
    font-size: 2rem;
    color:#39b2ffe8;
}


#intro h1, #intro p {
	
	color: var(--white);
	
}

#intro p {
	
	line-height: 1.75 !important;
}



 p{
	
	 font: normal 1rem/1.5 arial, sans-serif !important;
	
}



/* buttons */

.button-CTA {
	
    background-color: var(--yellow) !important;
    border-radius: 3px;
    color: var(--dark);
    cursor: pointer;
    font-size: inherit;
    font-weight: bold;
    line-height: 1.4;
    padding: 0.5rem 1rem;
    display: inline-block;
    text-align: center;
	margin:  1rem auto;
	border:3px solid var(--yellow);
	font: bold 1rem/1.5 arial, sans-serif;
	
	
}

.button-CTA:hover {
	
	background-color: var(--dark) !important;
	color: white;
	
}
	
	
	.glass {
  
  /*  backdrop-filter: blur(10px) brightness(0.9);
    -webkit-backdrop-filter: blur(10px) brightness(0.9);
    background: rgba(255, 255, 255, 0.1); 
    border-radius: 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	*/
	
	overflow: hidden; 
	position: relative;
		
	
}


.glass p {
	
	
	
	
}

  .instructions-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /* stack text and button vertically */
    justify-content: center;
    align-items: center;
    z-index: 10;

    /* Frosted glass effect */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
	 
	  display:none; /** OFF **/
  }

  .instructions-overlay p {
    font-size: 1.5rem;
    color: #000;
    text-align: center;
    margin: 0 1rem 1.5rem 1rem; /* space below for button */
    
  }

  .instructions-overlay button {
    background-color: var(--dark);
    border-radius: 3px;
    color: white;
    cursor: pointer;
    font-size: inherit;
    font-weight: bold;
    line-height: 1.4;
    padding: 0.5rem 1rem;
    display: block;
    text-align: center;
	margin:  1rem auto;
	border:3px solid var(--dark);
	font: bold 1rem/1.5 arial, sans-serif;
	
	
  }

  .instructions-overlay button:hover {
 
	color: white;
	background-color: #111;
  }






.timelime-container {
	
	/*	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 800px), url("../assets/fall1.jpg"); */
		background: url("../assets/fall1.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	
	padding:8rem 6rem;
	
}


	

  
#timeline-embed {
    height: 600px !important;
    overflow: hidden;
		
}



.ff {
    position: relative; 
    overflow: hidden;   
	background: linear-gradient(90deg, rgba(239,80,147,1) 0%, rgba(242,107,68,1) 100%) !important;
}

.ff p, .ff .num {
	
	color: white !important;
}



.ff::after {
    content: "";
    background-image: url(https://www.bentley.edu/files/alumni/falcons%20forward/assets/bg-target.svg);
    background-repeat: no-repeat;
    background-position: top right;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 25%;
    right: -450px; /* start offscreen */
    mix-blend-mode: hard-light;
    opacity: 0.5;
    background-size: 400px 400px;

    transition: right 0.5s ease-out 0.5s;
}

.ff.in-view::after {
    right: -16%; /* final position */
}



.ff-heading {
	
	background: linear-gradient(90deg, rgba(239,80,147,1) 0%, rgba(242,107,68,1) 100%) !important;
	background-clip: text !important;
	color:transparent;
	display: block;
	margin-right:3rem;
	text-align: right;
}

.stats4.ff div {
    position: relative;
    z-index: 2;
}

.callout {
    background: #ffffff1a;
    padding: 1rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.callout a {
	
	color: #FFCC33; 
}

footer {
	
	border-top:10px solid;
border-image: linear-gradient(to right, #0175BD, #1f98de) 1;
	  background: #151F2D;
    padding: 2rem 3rem;
  
    margin: 0 auto;
	
	 display: grid;
  grid-template-columns: 1fr 30%; 
  gap: 1rem; 
	align-items: center;
			position: relative;
	z-index: 1;
	
	
}

footer .secondcol {
	
	justify-self:end;
	
}


footer a {
	
		color: #1ea8fc;
	
	
}

	.social-icons {
  display: flex;
  gap: 2rem;   /* space between icons */
  margin: 1rem 0;
		
}

.social-icons a img {
  width: 3rem;
  display: block;
}


/** stat cards **/


.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;

	margin:0 auto;
	padding:6rem;

    background: url("../assets/photos/stats-bg2.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  overflow: hidden;


}

.stats-grid h2 {
	
	 grid-column: 1 / -1; 
  font-family: "caecilia", "caecilia lt std", serif !important;
  font-size: 3.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0; 
  padding: 0;
  line-height: 1.5;
  color: white;
	text-transform: uppercase;
  text-align: center; 
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
	
	display:none /** OFF **/
	
}

.stat-card {
 
  background: var(--royalblue); 
  padding: 0 1.5rem 1.5rem;
  text-align: center;
  aspect-ratio: 1 / 1; /* ensures square cards */
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  font: normal 1rem/1.5 arial, sans-serif;
	
}

.stat-card a {
	
	color:#ffffff;
}

.stat-number {
  font-size: 4rem;
  
  margin-bottom: 1rem;
  color: #fff;
	
	font-weight: 400;
	font-family: "caecilia", "caecilia lt std", serif;
}

.stat-title {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #fff;

   	
}

.stat-source {
  font-size: 0.9rem;
  color: #fff;
}

.stat-title:after {
    background-color: #b4c843;
    content: "";
    display: block;
    float: none;
    height: 2px;
    margin: .75rem auto 3rem;
    margin-bottom: 0;
    width: 70px;
}

.sub-footer {
	
	text-align: center;
	
	color: white;
	padding: 6rem 4rem;

	position: relative;
	z-index: 1;
	background-color: #294567;
}

.sub-footer img {
	
	max-width: 1200px;
	width:100%;
	padding: 0 1rem;
	box-sizing: border-box;
}

.sub-footer h2 {
	
	

  font-family: "caecilia", "caecilia lt std", serif !important;
  font-size: 3.5rem;
  font-weight: 700;
  margin: 2rem 0 3rem 0;
  padding: 0;
  line-height: 1.5;
  color: white;
  text-transform: uppercase;
  text-align: center; 
	
}

.sun { 
	
	position: fixed; 
	top: 50px; 
	left: 9%; 
	width: 600px; 
	height: 600px; 
	border-radius: 50%; 
	background: radial-gradient(circle, #ffffff 36%, #fff 3%, transparent 64%); 
	mix-blend-mode: overlay; 
	opacity:0.4; 
    pointer-events: none;
}


/** breadcrumb **/

  .breadcrumb{
    background:#151F2D;
    padding:6px 12px;         
    font-size:clamp(12px,1.2vw,14px);
    line-height:1.4;
	position: absolute;
	  top: 0;
	  left: 0;
	 font: normal 0.8rem/1.5 arial, sans-serif;
	width:100%;
  
  }
  .breadcrumb ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .breadcrumb li {
    display: flex;
    align-items: center;
    color: #fff;
  }

  .breadcrumb li + li::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 8px;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: rotate(45deg);
    
  }

  .breadcrumb a {
    color: #1ea8fc;
    text-decoration: none;
  }

  .breadcrumb a:hover,
  .breadcrumb a:focus {
    text-decoration: underline;
  }

  .breadcrumb a:focus-visible {
    outline: 2px solid #1ea8fc;
    outline-offset: 2px;
    border-radius: 2px;
  }

  .breadcrumb [aria-current="page"] {
    opacity: 0.9;
  }


@media (max-width: 600px) {
	
	
	
	.upper-content-container {
	
	padding:4rem 5%;
	
	
}
	
	
	.lower-content-container {
   
    padding: 4rem 5%;
	position: relative;
		z-index: 1;
    
}
	
	#intro {
   
    padding: 1rem 2rem 2.5rem;
  
}
	
	.timelime-container {
		
		padding: 0;
	}
	
	.sub-footer {
		
		padding: 3rem 1rem;
	}

	footer {
		
		grid-template-columns: 1fr;
	
	}
	
	footer .secondcol {
	
	justify-self:start;
		margin-bottom: 1.5rem;
	
}
	
	
	

	
	
	h1 {
    font-size: 2rem !important;
   
}
	
	span.h1-year {
		
		font-size:1.5rem;
	}
	
	#intro::before {
   
    background: white;

    transition: none;
}


#intro.scrolled::before {
    background-color: white;
}
	
	 .stats4 {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important; 
    }
	
	.ff-heading {
		
		font-size:3rem;
		margin-right:0.5rem;
		text-align: left;
	}
	
	.stats4-outer .large {
		
		margin:0 !important;
	}
	
	
	.stats4-outer .large {
		
    font-family: "caecilia", "caecilia lt std", serif;
    font-size: 4rem !important;
   
    padding: 0;
    line-height: 1;
    color: white;
    text-align: left;
    position: relative;
    font-weight: 700;
	margin:0 !important;
}
	
	.stats4-outer .label {
    font-family: "HelveticaNeue", Arial, sans-serif;
    font-size: 1rem !important;
    margin: 1rem 0 !important;
	line-height: 1.5;
    font-weight: 400;
    position: static !important;
    white-space: normal !important;
    display: block !important;
}
		
	.extra-space {
		
		display: none
	}	
	
	
.ff::after {
   
    background-position: bottom right;
    bottom: 25%;
  

    transition: right 0.5s ease-out 0.5s;
}

.ff.in-view::after {
    right: 0; 
}

	.stats-grid {
		
		padding: 0 2rem 2rem 2rem;
		
		
	}
	.stats-grid h2, .sub-footer h2 {
		
		font-size:2rem;
		line-height: 1.25;
		
	}
	
	
	.stats-grid {
    grid-template-columns: 1fr;
    padding: 4rem 2rem;
	box-sizing: border-box;
    gap: 1rem;
		
    background: url("../assets/photos/stats-bg2-mobile.webp");
	background-repeat: no-repeat;
	background-size: cover;
		
}
	
	span.h1-year {
		
		color: #ffffffCC;
	}
	
	.sun{
		display: none
	
	}
	
	
	.instructions-overlay {
		
		display: none
	}
	
	
	
	
}