.hero {
	background: url(https://webcms.ohio.edu/sites/default/files/2025-07/new_homepage_alt_texturebg_min.jpg);
	background-size: cover;
}

.hero .container {
  max-width: 100% !important;
  padding: 0;
}

.hero .paragraph__column {
  padding: 0;
}

.hero .gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.6)
  );
  transition: transform 0.5s ease-in-out, border-radius 0.5s ease-in-out;
  transform-origin: center top;
}

.hero .text-content {
  position: absolute;
  z-index: 3;
  color: var(--white);
  text-align: center;
  left: 0;
  right: 0;
  top: -20px;
  bottom: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}

@media (min-width: 768px) {
  .hero .text-content {
    top:0;
  }
}

.hero .controls {
	position: absolute;
  z-index: 3;
  bottom: 15px;
  right: 15px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
	transition: bottom 0.5s ease-in-out, right 0.5s ease-in-out;
}

@media (min-width: 768px) {
  .hero .controls {
    bottom: 30px;
    right: 15px;
    font-size:34px;
  }
}

.hero .controls > div {
	font-size: 24px;
}

.hero .hero-video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 600px;
}

.hero .hero-video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: 0;
  transition: transform 0.5s ease-in-out, border-radius 0.5s ease-in-out;
  transform-origin: center top;
}

.hero .text-content p {
	margin: 0 30px;
}

.hero .text-content p:first-of-type {
	font-family: var(--text-serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.579rem + 1.404vw, 3.6rem);
  line-height:110%;
  margin-bottom:10px;
}

.hero .text-content p:last-of-type {
	font-family: var(--text-display-alt);
  font-weight: 900;
  font-size: clamp(4rem, -0.595rem + 11.316vw, 15.7rem);
  line-height:105%;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--white);
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  transition: var(--transition-default);
}

.hero .text-content p.big {
	font-family: var(--text-display-alt);
  font-weight: 900;
  font-size: clamp(4rem, -0.595rem + 11.316vw, 15.7rem);
  line-height:105%;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--white);
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  transition: var(--transition-default);
}

.hero .text-content p.small {
	font-family: var(--text-serif);
  font-weight: 400;
  font-size: clamp(3rem, 1.579rem + 1.404vw, 3.6rem);
  line-height:110%;
  margin-bottom:10px;
  -webkit-text-stroke-width: unset;
  -webkit-text-stroke-color: unset;
  -webkit-text-fill-color: unset;
  color: var(--white);
  text-transform: unset;
}

.hero .text-content p:last-of-type:hover {
	-webkit-text-fill-color: var(--white);
}

.hero .text-content p.big:hover {
	-webkit-text-fill-color: var(--white);
}

/* lock page body scrolling when modal is active */
.modal-lock-scroll {
  overflow: hidden;
  touch-action: none;
}

.hero .controls .video-modal-label {
  position:absolute;
  top:-25px;
  right:5px;
  font-size:14px;
  font-weight:700;
  color:var(--black) !important;
  background:var(--white);
  padding:2px 5px;
  border:none;
  border-radius:2px;
  display:none;
}

@media (min-width: 768px) {
  .hero .controls .video-modal-label {
    display:block;
  }
}

.hero .controls .video-modal-label:has(+ .video-modal-button) {
  opacity:0;
  transition:var(--transition-default);
}

.hero .controls .video-modal-label:has(+ .video-modal-button:hover),
.hero .controls .video-modal-label:has(+ .video-modal-button:focus) {
  opacity:1;
}

.hero .controls button {
  opacity:.8;
}

.hero .controls .video-modal-button {
  height:30px;
  margin-left:15px;
  margin-right:15px;
  position:relative;
}

@media (min-width: 768px) {
  .hero .controls .video-modal-button {
    height:34px;
    margin-left:30px;
    margin-right:30px;
  }
}

.hero .controls .video-modal-button img {
  height:100%;
  width:auto;
}

.hero .controls .video-modal-button img.video-icon-default {
  display:block;
  opacity:1;
  /* transition:all .2s ease .3s; */
  transition:all .2s ease;
  transition-delay:0;
}

.hero .controls .video-modal-button:hover img.video-icon-default {
  opacity:0;
  transition:all .2s ease;
  transition-delay:.2s;
}

.hero .controls .video-modal-button img.video-icon-hover {
  position:absolute;
  left:0;
  top:0;
  z-index:0;
  opacity:0;
  /* transition:all .2s ease .3s; */
  transition:all .2s ease;
  transition-delay:0;
}

.hero .controls .video-modal-button:hover img.video-icon-hover {
  opacity:1;
  transition:all .2s ease;
  transition-delay:.2s;
}

.hero .controls .video-modal-button img.video-icon-right {
  position:absolute;
  top:0;
  right:16px;
  z-index:2;
  transform:translateX(16px);
  transition:all .3s;
  transition-delay:.2s;
}

.hero .controls .video-modal-button:hover img.video-icon-right {
  transform:translateX(-30px) rotate(-180deg);
  top:-1px;
  right:12px;
  transition:all .3s;
  transition-delay:0;
}

@media (min-width: 768px) {
  .hero .controls .video-modal-button:hover img.video-icon-right {
    right:unset;
  }
}

.hero .video-modal {
  position: fixed;
  inset: 0;
  flex-wrap:wrap;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  padding:0 15px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 1000;
}

@media (min-width: 768px) {
  .hero .video-modal {
    padding: 0 10%;
  }
}

.hero .video-modal.visible {
  opacity: 1;
  transition: opacity .5s ease;
  pointer-events: auto;
}

.hero .video-modal .video-modal-container {
  height: 100%;
  position: relative;
}

.hero .video-modal .video-modal-container .video-modal-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.hero .video-modal .video-modal-info {
  flex-basis: 100%;
  display: flex;
  justify-content: flex-end;
}

.hero .video-modal .video-modal-info button i {
  font-size: 32px;
  font-weight: 500;
}

.hero .video-modal .video-modal-overlay {
  position: absolute;
  inset: 0;
}

.hero .video-modal .video-modal-video {
  flex-basis: 100%;
  padding: 0;
}

@media (min-width: 768px) {
  .hero .video-modal .video-modal-video {
    padding: 0 30px;
  }
}

.hero .video-modal .video-modal-video video {
  width:100%;
}

.hero .modInnerContent .paragraph:nth-of-type(2) {
	text-align: center;
	margin: 30px 0 80px;
}

.hero .cta-container {
	max-width: 767px;
	margin: 0 auto;
}

.hero .cta-container .cta-heading {
  font-family: var(--text-serif);
	font-size: clamp(1.75rem, 1.5rem + 2.729vw, 4.8rem);
	margin: 0;
	line-height:120%;
	margin-bottom:10px;
}

.hero .cta-container .cta-heading .life-text {
	font-family: var(--text-serif);
  font-size: clamp(1.75rem, 1.5rem + 2.729vw, 4.8rem);
  font-style: italic;
  font-weight: 700;
  line-height:120%;
}

.hero .cta-container .cta-links {
	margin-top: 40px;
}

.hero .cta-container .cta-body {
	margin: 0 30px;
}

.hero .cta-container .cta-links .button::after {
	font-weight: 900;
}

.hero .cta-container .cta-links .button span {
	font-weight: 700;
}

.hero .modInnerContent:first-of-type .paragraph:nth-of-type(2) .field--name-field-content-blurb-body {
	margin: 0 15px;
}

@media only screen and (min-width: 768px) {
	.hero .text-content p:not(.small):last-of-type {
		-webkit-text-stroke-width: 2px;
	}
}