@import url("https://use.typekit.net/txw8ysk.css");
@font-face {
  font-family: 'Artegra Sans';
  src: url('./fonts/ArtegraSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Artegra Sans';
  src: url('./fonts/ArtegraSans-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Artegra Sans';
  src: url('./fonts/ArtegraSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Artegra Sans';
  src: url('./fonts/ArtegraSans-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Artegra Sans';
  src: url('./fonts/ArtegraSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Artegra Sans';
  src: url('./fonts/ArtegraSans-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
}


:root {
  --blue: #043959;
  --cyan: #00beda;
  --orange: #ffb647;
  --lightGray: #D9D9D9;
  --midGray: #7E7B7E;
  --black: #000000;
  --white: #ffffff;
  
  --gradTL: linear-gradient(160deg, var(--black), var(--midGray));
  --gradTR: linear-gradient(200deg, var(--black), var(--midGray));
  --gradBL: linear-gradient(20deg, var(--black), var(--midGray));
  --gradBR: linear-gradient(-20deg, var(--black), var(--midGray));
  --gradColor: linear-gradient(90deg, var(--purple), var(--green));
}

body {
  padding:0;
  margin:0;
  font-family: 'Artegra Sans', sans-serif;
  font-weight: 500;
  color:var(--blue);
  -webkit-font-smoothing: antialiased;
  background-color: var(--white);
}

h1, h2, h3, h4, h5, h6 {
  color:var(--cyan);
  font-family: "mixta-sharp", serif;
  font-weight: 600;
  font-style: normal;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2.5rem;
}

.eyebrow {
  font-size: 1rem;
  font-family: 'Artegra Sans', sans-serif;
  font-weight: 600;
  color: var(--blue);
}

.cta-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--cyan);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  position: relative;
  font-weight: 600;
}


.cta-button:hover {
 background: var(--blue);
}
.cta-button::after {
  content: '→'; /* You can also use '\2192' */
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
}

.cta-button:hover::after {
  transform: translateX(4px); /* optional hover effect */
}

.cta-button.secondary {
  background: unset;
  border: 2px solid var(--blue);
  color: var(--blue);
}

.cta-button.secondary:hover {
 border: 2px solid var(--cyan);
}


/* Animations */

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}




/* Head */
header {
  background: var(--white);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  position:sticky;
  top: 0;
  box-shadow:0 1rem 2rem #00000022;
  z-index:100;
}
header :is(a, form) {
  color: var(--black);
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
}
header > a { height: 4rem;transition:height 0.4s;}
header > a :is(img, svg) { height:100%;}
header nav {
  display: none;
  flex-flow: column;
  text-align: center;
  padding: 1.5rem 3rem;
  transition:all 0.4s;
}
body.scrolled header nav {padding:0.5rem 3rem;}
body.scrolled header > a {height:2.4rem;}
header nav a {position:relative;}
header nav a::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0%;
  height: 3px;
  background: var(--blue);
  border-radius: 6px;
  transform: translate3d(-50%, 0, 0);
  transition: all 0.6s;
  opacity:0;
}
header nav a:hover::before {width:100%;}
header input {
  position: relative;
  appearance: none;
  width: 2.5rem;
  height: 40px;
}
header input::before, 
header input::after {
  content: '';
  display: block;
  width: 65%;
  height: 3px;
  border-radius:5px;
  background: var(--blue);
  position: absolute;
  transform: rotate(0deg);
  transition: 0.4s;
}
header input::before {
  top: 12px;
}
header input::after {
  bottom: 12px;
}
header input:checked::before {
  top: 17px;
  transform: rotate(45deg);
}
header input:checked::after {
  bottom: 17px;
  transform: rotate(-45deg);
}
header:has(input[type="checkbox"]:checked) nav {
  display: flex;
}

/* Hero Video background */
.video-background-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  align-items: center;
  color: #fff;
}

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
}

.overlay-blend {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  mix-blend-mode: screen;
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}

.video-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 190, 218, 0.1) 0%, #fff 100%);
  pointer-events: none;
  z-index: -1;
}

.content-wrapper {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  height: 100%; 
  display: flex; 
  align-items: center; 
  /* justify-content: center; */
  z-index: 1; 
}

.content-inner {
  max-width: 800px;
  padding: 2rem;
  z-index: 2;
  text-align: left;
  color: var(--blue);
}

.content-inner img {
  max-width: 100%;
}



/* Main */
section:not(.video-background-section) {
  max-width: 1400px;
  margin: 8em auto;
}

.about-wrapper, .contact-wrapper {
  background-color: #eff3f4;
  padding: 0;
  border-radius: 20px;
  box-shadow: 5px 5px 5px #cccccc;
  display: flex;
  flex-direction: row;
}
.about-col-1, .contact-col-2 {
  background: linear-gradient(to bottom, rgba(4, 57, 89, 0.95), rgba(4, 57, 89, 0.7)),
              url('./img/bespoke-biotech.jpg') no-repeat center center;
  background-size: cover;
  color: #fff; /* Optional: make text white for readability */
  padding: 4rem 4rem 12rem 4rem;
  flex: 2 1 0;
  min-width: 0;
  border-radius: 20px 0 0 20px;
}

.contact-col-2 {
  border-radius: 0 20px 20px 0;
}

.about-col-2, .contact-col-1{
  padding: 40px;
   flex: 1 1 0;
  min-width: 0;
  max-width: 35%;
}
.about-col-2 p {
  line-height: 2.5rem;
}



/* Team Section */

.intro-copy {
  max-width: 500px;
  color: var(--blue);
}

.investment-team-wrapper {
  display: flex;
  flex-direction: row;
  margin-bottom: 3em;
}

.investment-team-wrapper a, .consultants-wrapper a {
  text-decoration: none;
}

.team-card {
  margin-right: 1rem;
  margin-bottom: 1.5rem;
  box-sizing: border-box;
  min-width: 200px;
  background-color: #eff3f4;
  border-radius: 20px 20px 0 0;
  box-shadow: 0px 5px 15px #cccccc;
  border-bottom: 2px solid #00beda;
  overflow: hidden;
}

.investment-team-wrapper .team-card {
  flex: 0 0 33%; 
}


.consultants-wrapper .team-card {
  flex: 0 0 20%; /* Show 5 at a time (adjust to 25% for 4 at a time) */
  
}


.headshot img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  display: block;
}

.investment-team-wrapper .headshot img {
  max-height: 300px;
}

.team-details {
  margin: 10px 20px;
  display: flex;
  justify-content: space-between;
}

.team-details h5 {
font-size: 1.3rem;
text-transform: uppercase;
}

.team-details p {
  font-size: 0.8rem;
  color: var(--blue);
}

.team-arrow {
  align-self: center;    
  box-shadow: 0px 0px 5px #cccccc;
  border-radius: 8px;
  overflow: hidden;
  max-width: 50px;
  height: auto;
  max-height: 50px;
}
.team-arrow img {
  width: 100%;
 
}

.team-details p, .team-details h5{
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'Artegra Sans';
 font-weight: 500;
}

.consultants-wrapper .team-details h5 {
  font-size: 1.1rem;
}

.consultants-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.consultants-wrapper .team-arrow {
  max-width: 35px;
  max-height: 35px;
}

.slider-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}
.slider-container::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari */
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0 1rem;
}

.intro-copy h3, .slider-header h3 {
  font-size: 1.8rem;
  color: var(--blue);
}

.slider-controls {
  display: flex;
  gap: 0.5rem;
}

.slider-controls .slider-btn {
  font-size: 2rem;
  padding: 0.4rem 0.8rem;
  background: transparent;
  border: none;
  color: var(--blue);
  cursor: pointer;
  transition: color 0.2s ease;
}

.slider-controls .slider-btn.disabled {
  color: #ccc;       /* Gray when disabled */
  cursor: default;   /* No pointer on disabled */
  pointer-events: none;
  opacity: 0.25;
}


.slider-fade-left,
.slider-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px; /* Adjust as needed */
  pointer-events: none; /* Let clicks pass through */
  z-index: 5;
}

.slider-fade-left {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}

.slider-fade-right {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* Value section */

.value-wrapper {
  max-width: 1400px;
  margin: 4em auto 14em auto;

}


.value-wrapper .cta-button {
  margin: 2em auto;
}


.value-intro {
  max-width: 600px;
  margin: 2em auto;
  text-align: center;
}

.value-columns {
  display: flex;
  flex-direction: row;
  gap: 30px;
  justify-content: center;
}

.value-card {
 background-color: #eff3f4;
  padding: 40px 58px 40px 20px;
  border-radius: 20px;
  box-shadow: 0px 5px 15px #cccccc;
  max-width: 275px;
  width: 30%;
}

.value-card img{
  width: 50px;
  height: auto;
  margin-bottom: 2em;
}

.value-card h3 {
  font-size: 2rem;
  margin-bottom: 0;

}

.value-card ul {
    margin-block-start: 0.5em;
    padding-inline-start: 15px;
    max-wdth: 250px;
}

.value-card ul li::marker {
  color: var(--cyan);
}



/* Portolio */

#portfolio {
  position: relative;
  overflow: hidden;
  z-index: 0;
  color: white;
  max-width: 100%;
  padding: 8em;
}

/* Background Image Layer */
#portfolio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('./img/portfolio-background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Color Overlay */
#portfolio::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(250, 250, 250, 1), rgba(250, 250, 250, 0) 20%, rgba(250, 250, 250, 0) 80%, rgba(250, 250, 250, 1));
  pointer-events: none;
}


.portfolio-wrapper {
  background-color: #eff3f4;
  padding: 40px 20px;
  border-radius: 20px;
  box-shadow: 0px 5px 15px #cccccc;
  display: flex;
  flex-direction: column;
  max-width: 1400px;
  margin: 2em auto;
}

.logo-wrapper {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: space-around;
}


/* Contact Us */
.contact-form {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Artegra Sans', sans-serif;
  border-radius: 10px;
  box-sizing: border-box;
}

.form-row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.form-group {
  flex: 1 1 100%;
  margin-bottom: 1.5rem;
  box-sizing: border-box;
}

.form-row .form-group {
  flex: 1 1 45%; /* ensures they don't exceed 100% total */
  min-width: 200px;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

input,
textarea {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
}

input:focus,
textarea:focus {
  border-color: #0073e6;
  outline: none;
}

.submit-button {
  padding: 0.75rem 2rem;
  background-color: var(--cyan);
  color: white;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-button:hover {
  background-color: var(--blue);
}




/* Footer */
footer {
  background: var(--blue);
  color: var(--white) !important;
  padding: 40px;
}
footer a {
  color: var(--white) !important;
  text-decoration: none;
}
footer ul {list-style:none;padding:0;}
footer li {display:inline-block;}
footer .wp-block-social-link-label {display:none;}
footer ul svg {fill:var(--white);}

footer .footer-nav {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

footer nav a:not(:last-of-type){
  margin-right: 20px;
}

footer .footer-logo {
  max-width: 200px;
}

footer hr {
  max-width: 1400px;
  margin: 10px auto;
}

footer .footer-legal{
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 0.75rem;
}

/* Modal styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: #fff;
  border-radius: 10px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
  animation: fadeUp 0.3s ease;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: #888;
}

.modal-close:hover {
  color: #000;
}

.modal-header {
  display:flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 40px;
}


.modal-header img {
  width: 100%; 
  max-width: 300px; 
  border-radius: 10px;
}


.modal-header h2, .modal-header h4, .modal-header p {
  font-family: 'Artegra Sans', sans-serif;
  font-weight: 500;
}

.modal-header h2 {
  margin-bottom: 0;
  text-transform: uppercase;
}

.modal-header h4 {
  margin-top: 0;
  font-size: 1.25rem;
  color: var(--blue);
  text-transform: unset;
}


@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optional: Lock background scrolling when modal is open */
body.modal-open {
  overflow: hidden;
}




/* --------------------------- */
/*   RESPONSIVE QUERIES BELOW  */
/* --------------------------- */


/* Responsive - mobile */
@media (max-width: 30em){

 section:not(.video-background-section) {
    max-width: 90%;
  }

  .video-background-section {
  height: 55vh;
}

  .about-wrapper, .contact-wrapper {
    flex-direction: column;
  }

  .about-col-1, .contact-col-2 { 
    border-radius: 20px 20px 0 0;
    padding: 30px;

  }

  .about-col-2, .contact-col-1 {
    max-width: 100%;
  }
  .contact-col-2 {
    border-radius: 0  0 20px 20px;
    
}  


.investment-team-wrapper {
    flex-direction: column;

}

  .form-row .form-group {
    flex: 1 1 100%;
  }

  .form-group:has(#first-name) {
    margin-bottom: 0px;
  }

.slider-header {
  flex-direction: column;
  align-items: flex-start;
}

.value-columns {
  flex-direction: column;

}

.value-card {
  width: 75%;
  align-self: center;

}


#portfolio {
  padding: 1em;
}

.logo-wrapper {
  flex-wrap: wrap;
}

.logo-wrapper img{
  max-width: 45%;
}

footer .footer-nav, footer .footer-nav nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  }


footer .footer-logo {
    margin-bottom: 1.5em;
}

footer .footer-legal {
  flex-direction: column;
}

.modal-header {
  flex-direction: column;
}

.modal-content {
  padding: 1.5em;
  width: 80%;
}

.modal-header h4 {
 margin-bottom: 0;
}

}


/* Responsive - tablet */
@media (max-width: 40em){

    .video-background-section {
  height: 75vh;
}
 
}




/* Responsive - larger screens and specifically the navigation*/
@media (min-width: 75em){ 
  header form {
    display: none;
  }
  header nav {
    display: flex;
    flex-flow: row;
    justify-content: end;
    width: auto;
  }
  header nav a::before {opacity:1;}
  
  .content-inner {
    margin-left:3em;
  }
  
}

 /* Ensure video wrapper takes at least full viewport height if needed */
  @media (min-aspect-ratio: 16/9) {
    .video-wrapper {
      height: 100vh;
      aspect-ratio: auto;
    }
  }