/* ============================================================
 * 404
============================================================ */
.notfoundwords p {color:white}
.notfound {  background-color: var(--darkpurple);
  position: relative;}

.notfoundwords {margin-top: 200px; margin-bottom: 300px;}


.notfound::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://embed.bio/wp-content/uploads/2026/04/Rectangle-57.png');
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

.notfound .container {
  position: relative;
  z-index: 1;
}


/* ============================================================
plaintext
============================================================ */


.plaintext {padding-top:60px; padding-bottom:60px;}





/* ============================================================
gravity
============================================================ */
gform_wrapper.gravity-theme .gfield_label {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
	padding: 0;}


.gform_required_legend {display:none;}
.gform_wrapper.gravity-theme .gfield_required {color:black !important;}



/* Gravity Forms - Submit Button */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"] {
  display: inline-block;
  background-color: var(--yellow);
  border-radius: 5px;
  color: black;
  padding: 5px 20px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover {
  background-color: #e6c200;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  color: black;
}
.gform_wrapper .gform_footer input[type="submit"]:active,
.gform_wrapper .gform_page_footer input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Gravity Forms - Input Fields */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper select,
.gform_wrapper textarea {
  border: none;
  background-color: #F3F3F5;
  border-radius: 5px;
  color: #333;
  padding: 10px 15px;
}

/* Placeholder text */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
  color: #aaaaaa;
}

/* Focus state */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  outline: none;
  background-color: #ebebee;
}




/* ============================================================
contact
============================================================ */

.headerdarkcontact {
  position: relative;
  padding: 100px 0 0;
  min-height: 400px;
  display: flex;
  align-items: center;
}

.contact {
  position: relative;
  padding: 60px 0 100px;
}

.contactbox {background-color:white; padding:30px; box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.15), 4px 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 20px;}

.contact-wrapper {
  position: relative;
}

.contact-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://embed.bio/wp-content/uploads/2026/04/Rectangle-55-1.png');
  background-position: right top;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
}

.headerdarkcontact::before {
  content: '';
  position: absolute;
  inset: 0;
 background: linear-gradient(to right, #22162C, #3B0C35);
  z-index: 0;
}

.contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  z-index: 0;
}

.headerdarkcontact .container,
.contact .container {
  position: relative;
  z-index: 3;
}


/* ============================================================
 post
============================================================ */
.standfirst { margin-bottom:30px;}
.standfirst p strong {font-weight:600;}
.standfirst p  {  font-size: clamp(16px, 1.3vw, 18px); color:#3C3246 !important;}
img.secondary-image {border-radius:15px; margin-bottom:30px;}


.articlecopy {  padding-top: 100px;}

.article {
  position: relative;
  min-height: 400px;
  padding: 100px 0;
  display: flex;
  align-items: center;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Purple overlay */
.article::before {
  content: '';
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to right,
    var(--darkpurple) 0%,
    var(--darkpurple) 40%,
    rgba(0, 0, 0, 0) 60%
  );

  z-index: 1;
}

/* Content sits above overlay */
.article .container {
  position: relative;
  z-index: 2;
}

/* Make text white */
.article h1,
.article .subheader {
  color: #fff;
}








@media (max-width: 767px) {
	.catcol {margin-bottom:10px;}
  .article {
    align-items: flex-end; /* push content to bottom */
    padding: 60px 0;
    background-position: right center; /* anchor image right */
	    min-height: 600px;
  }

  .article::before {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 30%,
      var(--darkpurple) 55%,
      var(--darkpurple) 100%
    );
  }

  .article .container {
    padding-top: 200px; /* 👈 creates space so text sits in purple */
  }

}


@media (max-width: 767px) {
  .article[style*="--mobile-bg"] {
    background-image: var(--mobile-bg) !important;
  }
}







/* ============================================================
news
============================================================ */
.newsteasercontainer.newsproper {padding-top:60px !important;}
.newsproper .newscard, .newscard {margin-bottom:60px;}
.newsproper .teammembers, .newsproper .teammemberslist {padding-left:0px !important; padding-right:0px !important;}
.newsproper .yellowbutton {margin-bottom:50px;}
.newscard .team-image.slant-left {

  border-radius: 12px;
  border: none;
  overflow: hidden;
  position: relative;
}
.newscard .team-imageoverlay {
    position: absolute;
    bottom: 15px;
    right: 0;
    z-index: 3;
	width:20px; height:20px;
}




.newscard .team-image.slant-left img {
  clip-path: none;
  border-radius: 0;
	border-bottom-right-radius:0px;
  display: block;
  width: 100%;
	border:none;
}


.newscard .team-image.slant-left::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpolygon points='0,30 100,13 100,30' fill='white'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
  pointer-events: none;
  z-index: 2;
}
.newscard .card-slant-bridge { display: none; }

.newscard .team-line-wrap {
  filter: none;
  margin-top: 12px;
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
}

.newscard .team-line-wrap .card-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
}

.newscard .team-line.clip-slant-top {
  clip-path: none;
  background: transparent;
  padding-top: 30px;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {

.newscard .whitebutton {margin-bottom:15px;}


}


/* ============================================================
 headerdark
============================================================ */




.headerdark {
  background: linear-gradient(to right, #22162C, #3B0C35);
  padding: 100px 0;
  min-height: 400px;
  display: flex;
  align-items: center;
}

.headerdark__mobile-img {
  display: none;
}

@media (max-width: 767px) {
.headerdark {
	
    background-image: none !important;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    min-height: unset;
  }

 .headerdark__mobile-img {
    display: block;
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    flex-shrink: 0;
  }

 .headerdark .container {
    padding: 40px 15px;
  }
}


/* ============================================================
team
============================================================ */
.teamcardcontainer {margin-bottom:50px; !important}

.teamproper .teammembers, .teamproper .teammemberslist {padding-left:0px !important; padding-right:0px !important;}

.team-card-content .purplebutton {border : 1px solid #AC4FC6 !important;}

.team-card-content .purplebutton:hover {border : 1px solid #BFB8C4 !important;}



/* ============================================================
 headerwhite
============================================================ */


.headerwhite h1 {color: #3B0C35!important;}



.headerwhite {
  background-position: right center;
  background-repeat: no-repeat;
  padding: 100px 0;
  min-height: 400px;
  display: flex;
  align-items: center;
	background-color:white;
}

.headerwhite__mobile-img {
  display: none;
}

@media (max-width: 767px) {
  .headerwhite {
    background-image: none !important;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    min-height: unset;
  }

  .headerwhite__mobile-img {
    display: block;
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    flex-shrink: 0;
  }

  .headerwhite .container {
    padding: 40px 15px;
  }
}


/* ============================================================
news teaser
============================================================ */
.newsteaser h4 a {color:black; text-decoration:none; }
.newsteaser {padding-top:40px !important; padding-bottom:40px !important;}
.team-line-wrap {
filter: drop-shadow(0 0 1px var(--darkpurple)) drop-shadow(0 0 0.5px var(--darkpurple));

}

.team-line {
    background: #fff;
    padding: 1rem;
}

.newsteaser h4 {margin-top:15px; margin-bottom:15px;}

.newsteaser .readmore { margin-top:15px; }
.newsteaser .readmore a {color:black; text-decoration:underline;  }

.newsteasercontainer  h2 {}
.newsteasercontainer {padding-top:20px !important; padding-bottom:60px;}

/* ============================================================
Spacer
============================================================ */

.spacer {
  position: relative;

  overflow: hidden;
	min-height:400px;
}

/* Image layer */
.spacer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('https://embed.bio/wp-content/uploads/2026/04/764ef4e87874dd9ff7a5a996447c1f9fcc8d651e-scaled.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.6; /* 👈 this is your requirement */
  z-index: 0;
}


.spacer2 {
  position: relative;

  overflow: hidden;
	min-height:400px;
}

/* Image layer */
.spacer2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('https://citizenkay.co.uk/embed/wp-content/uploads/2026/04/Rectangle-55.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.6; /* 👈 this is your requirement */
  z-index: 0;
}



/* ============================================================
 Team teaser
============================================================ */
.teamteaser  {padding-top: 60px;}
.teamteasercontainer {padding-top: 60px; border-radius:20px; padding-bottom:20px;}
.team-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.teamteasercontainer .subheader  {margin-bottom:40px;}

.teamteasercontainer h2 {color: #3B0C35 !important;}

.team-card h5 {line-height:0em; margin-top:20px;}
.team-card {
  height: 100%;
}

.teammembers, .teammemberslist {padding:30px;}

.team-image {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.team-image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #000; /* prevents gaps */
}

.team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slant-right {
  clip-path: url(#clip-slant-right);
}

.slant-left {
  clip-path: url(#clip-slant-left);
}

.slant-left img{
  clip-path: url(#clip-slant-left);
}
.clip-slant-top {
  clip-path: url(#clip-slant-top);
}


.team-list {
  margin-top: 40px;
}

.team-list-inner {
  border-top: 1px solid var(--midpurple);
}

.team-list-item {
  border-bottom: 1px solid var(--midpurple);
  padding: 12px 0;
}

.team-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.team-name {
  font-weight: 700;
}

.team-role {
  color: var(--black);
  text-align: right;
}

.teamproper .team-role {
  color: var(--white);
  text-align: right;
}

.teammemberslistcta {margin-top:40px; margin-bottom:40px;}

.team-card-content .whitebutton {text-decoration:none; margin-top:15px; border-color: #AC4FC6 !important;}
.team-card-content .whitebutton:hover {border-color: #3C3246 !important;}




@media (max-width: 767px) {

  .team-list-row {
    flex-direction: column;
    align-items: flex-start; /* aligns left */
    gap: 5px;
  }

  .team-role {
    text-align: left; /* override right align */
  }

	
	
	
	.teamproper .team-role {
   text-align: left; /* override right align */
}
	

	
}



@media (max-width: 767px) {

 .teamproper .team-card{
    display: flex;
    gap: 15px;
    align-items: stretch;
  }

  .teamproper .team-image{
    width: 33.333%;
    flex-shrink: 0;
    margin-bottom: 0; /* remove mb-3 effect */
	      display: flex;              /* 👈 important */

	  
  }

  .teamproper .team-card-content{
    width: 66.666%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 👈 THIS does the work */
    align-items: flex-start;
  }

	
	
	 .teamteaser .team-card{
    display: flex;
    gap: 15px;
    align-items: stretch;
  }

 .teamteaser .team-image{
    width: 33.333%;
    flex-shrink: 0;
    margin-bottom: 0; /* remove mb-3 effect */
	      display: flex;              /* 👈 important */

	  
  }

 .teamteaser .team-card-content{
    width: 66.666%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 👈 THIS does the work */
    align-items: flex-start;
  }
	
	
	
  .team-card-top {
    /* sits at top */
  }

  .team-card-content .purplebutton {
    margin-top: auto; /* 👈 pushes button to bottom */
	  border : 1px solid #AC4FC6 !important;
	  
	  
	  
  }

  .team-card h5 {
    margin-top: 0; /* fixes spacing in this layout */
    line-height: 1.2;
  }

	
	.teamcardcontainer {
  height: 100%;
}

.team-card {
  height: 100%;
}
	 .purplebutton {
    display: inline-block;
		
  }
	
		.team-card-content {
  align-items: flex-start; /* 👈 stops full width */
}
	  .team-card-content {
    justify-content: space-between;
    padding-bottom: 18px;
  }
	
}



/* ============================================================
  Home hero
============================================================ */

.home_hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 140px 0; }

.home_hero .yellowbutton {margin-top:40px;}

.home_hero {
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
}




/* ============================================================
  Statement
============================================================ */

.statementsection {
  position: relative;
  background-color: var(--darkpurple); /* full strength */
  padding: 100px 0;
  overflow: hidden;
}

/* Image layer */
.statementsection::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('https://citizenkay.co.uk/embed/wp-content/uploads/2026/04/Rectangle-47.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.6; /* 👈 this is your requirement */
  z-index: 0;
}

/* Content stays above */
.statementsection > * {
  position: relative;
  z-index: 1;
}




.statementsection .infotext {padding-bottom:30px; text-transform:uppercase; letter-spacing:2pt;}