/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 20 2026 | 04:04:02 */
/* Target WP block buttons */
.wp-block-button__link {
  position: relative;
  overflow: hidden;              /* keeps glow clipped to rounded corners */
  isolation: isolate;            /* ensures pseudo-element stacks predictably */
  vertical-align: middle;
  transition: all 300ms cubic-bezier(.4,-0.01,.17,1);
}

/* The glow */
.wp-block-button__link::after {
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: -80%;                  /* start lower than the button */
  height: 160%;                  /* tall enough to feel like a bloom */
  border-radius: 999px;

  /* glow color (tweak) */
  background: radial-gradient(
    closest-side,
    rgba(255, 0, 229, 1),
    rgba(255, 0, 229, 0) 100%
  );

  opacity: 0;
  transform: translateY(18px);
  transition: all 300ms cubic-bezier(.4,-0.01,.17,1);
  z-index: -1;                   /* sits behind button text */
  pointer-events: none;
}

.wp-block-button__link:hover {
	background-color: #2300C0;
	transition: all 150ms cubic-bezier(.4,-0.01,.17,1);
	border-color: transparent;
	color: #ffffff;
	box-shadow: 0px -3px 3px 0px rgba(255, 0, 229, 0.5) inset, 0px 2px 10px 0px rgba(255, 255, 255, 1), 0px 5px 30px 0px rgba(255, 0, 229, 0.2);
}

/* Hover/focus */
.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
  transition: all 300ms cubic-bezier(.4,-0.01,.17,1);
}

.shadow {
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15), 0px 5px 20px rgba(0, 0, 0, 0.05);
}

.masonry-grid ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-auto-flow: dense;
  gap: 40px;
}

.masonry-grid ul li {
  margin-block-start: 0px;
}

.masonry-grid ul li .portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  transition: all 0.3s ease-out;
}

.masonry-grid ul li .portfolio-item:hover img {
  filter: contrast(105%);
  transition: all 0.3s ease-out;
}

.masonry-grid ul li .portfolio-item:hover img {
  transition: all 0.3s ease-out;
}

.masonry-grid ul li .portfolio-item:hover::after {
  box-shadow: inset 0 0 1px 3px rgba(255, 255, 255, 1);
  transition: all 0.3s ease-out;
}

.masonry-grid ul li .portfolio-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Apply the inset shadow here */
  box-shadow: inset 0 0 1px 0px rgba(255, 255, 255, 0.0);
  pointer-events: none; /* Allows clicks to pass through the overlay to the image if needed */
  transition: all 0.3s ease-out;
  border-radius: 20px;
}


.masonry-grid ul li .portfolio-item:hover {
	box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.15);align-content
	transition: all 0.3s ease-out;
}

.masonry-grid ul li h3 {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 100;
}

.masonry-grid ul li h3 a {
	color: rgb(36, 38, 45, 1);
}

.masonry-grid ul li h3 a:hover {
	color: rgb(36, 38, 45, 0.7);
	text-decoration: none;
}

.masonry-grid ul li .wp-block-post-featured-image {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.masonry-grid ul li:hover .wp-block-post-featured-image {
  transform: translateY(-5%) scale(1.1);
}

@media screen and (min-width: 1280px) {
	
  .masonry-grid ul {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Large LEFT block: item 5 of each 10-item cycle */
  .masonry-grid ul li:nth-child(10n + 1) {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* Large RIGHT block: item 10 of each 10-item cycle */
  .masonry-grid ul li:nth-child(10n + 6) {
    grid-column: 3 / span 2;  /* Start at column 3, span 2 columns */
    grid-row: span 2;
  }
}

@media screen and (max-width: 650px) {
	.masonry-grid ul {
  		grid-template-columns: repeat(1, 1fr) !important;
	}
}

.case-study-card .case-study-image {
	border-radius: 20px;
	overflow: hidden;
}

.case-study-card:hover .case-study-image img {
	transform: translate(3%, -2%) scale(1.1); 
}

.case-study-card .case-study-arrow img, .case-study-card:hover .case-study-arrow img, .case-study-card .case-study-card-content, .case-study-card:hover .case-study-card-content, .case-study-card .wp-block-heading, .case-study-card:hover .wp-block-heading, .case-study-card .case-study-image img, .case-study-card:hover .case-study-image img {
	transition: all 0.3s cubic-bezier(.4,-0.01,.17,1);
}

.case-study-card:hover .wp-block-heading {
	color: var(--wp--preset--color--accent-1);
}

.case-study-card:hover .case-study-arrow img {
	filter: invert(95%);
}

.case-study-card-content::before, .case-study-card-content::after {
	content: "";
    background-image: url('https://davidporterdesign.com/wp-content/uploads/2026/02/bevel-left.png');
    background-size: cover;
    display: block;
	width: 20px;
	height: 20px;
    position: absolute;
}

.case-study-card-content::before {
    top: -20px;
    left: 0;
}

.case-study-card-content::after {
    top: 50px;
    right: -20px;
}

.flex-grow {
	flex-grow: 1;
}

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

.width-100pct {
	width: 100%;
}

.about-me .about-me-inner > div {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open {
	overflow: visible;
	height: 400px;
	border-radius: 40px;
}

.header {
	position: fixed;
	z-index: 1000;
	width: calc(100% - 80px);
	margin: 40px 40px 0px 40px;
	max-width: 1450px;
	left: calc(50% - 40px);
	transform: translateX(-50%);
	background-color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(10px); 
	-webkit-backdrop-filter: blur(10px); 
	box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1), 0 0 3px 0 rgba(0, 0, 0, 0.1);
}

.header .wp-block-site-logo {
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	border-radius: 100px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05), 0 0 3px 0 rgba(0, 0, 0, 0.05);
	padding-top: 3px;
	z-index: 200000;
}

.header .wp-block-site-logo img {
	border-radius: 0px;
}

.hero-content-inner {
	padding-left: calc(50vw - (1400px / 2) - 40px);
}

.hero-image, .hero-content {
	width: 100%;
}

.hero-heading {
	width: 110%;
}

.hero-inner {
	padding-top: 200px !important;
}

@media screen and (min-width: 601px) {
	.case-study-card-content {
		max-width: calc(100% - 100px);
	}
	.case-study-card:hover .case-study-card-content {
		max-width: calc(100% - 70px);
		padding-left: 30px;
	}
}

@media screen and (min-width: 2000px) {
	.about-me {
		background-size: 1000px !important;
		background-position: 0% 50% !important;
	}
}

@media screen and (max-width: 1200px) {
	p.has-x-large-font-size {
		font-size: 28px !important;
	}
}

@media screen and (max-width: 992px) {
	.hero-inner {
		padding-top: 120px !important;
	}
	.header {
		width: calc(100vw - (100vw - 100%) - 40px);
		margin: 20px 20px 0px 20px;
		left: 0px;
		transform: none;
	}
	.hero-heading {
		width: 100%;
	}
	.about-me .about-me-inner {
		flex-direction: column-reverse;
		gap: 30px;
	}
	.about-me {
		background-size: 100% !important;
		background-position: 50% 80% !important;
	}
	p.has-x-large-font-size {
		font-size: 24px !important;
	}
}

@media screen and (max-width: 600px) {
	.case-study-card .case-study-arrow {
		display: none;
	}
	.case-study-card-content {
		padding-right: 0px !important;
		margin-top: 0px !important;
	}
	.about-me {
		background-size: 120% !important;
		background-position: 50% 80% !important;
	}
	p.has-x-large-font-size {
		font-size: 20px !important;
	}
}