/*
Theme Name: Design Police 2.0
Author: Design Politie
Description: A custom theme for showcasing the great work of Design Police.
Version: 1.0
*/
/* General Portfolio Grid Styling */
@import url("https://use.typekit.net/tiq2dko.css");

:root {
  --dp-color: #324BFF;
  --dp-font:
}

html { scroll-behavior: smooth; }
#publications { scroll-behavior: smooth; }

.project-grid {
    margin:50px 0 50px 0;
    display:grid;
    grid-template-columns: 1fr 1fr;
    width:100%;
    gap:40px;
}

.media_item {
    min-width: 0;
    min-height:0; 
    position: relative;
    width: 100%;
    overflow: hidden;   
}
.media_item iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
}

.media_item > img, .media_item > video {
    width:100%;
    object-fit: cover;
    display:block;
}

.full_width  {
    grid-column-start: 1;
    grid-column-end: 3;
}
.textblock_full_width  {
    grid-column-start: 1;
    grid-column-end: 3;
    margin:80px 0;
}
.textblock_half_width  {
    margin:80px 0;
}
.half_width > img, .half_width > video {
    aspect-ratio: 1/1;
}
.full_width > img, .full_width > video {
   aspect-ratio:16/9;
}

.portfolio-header {
    width: 100%;
    height: auto;
}

.portfolio-header video {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensure the video fills the container */
    aspect-ratio: 16 / 9;
}

.portfolio-header img {
    width: 100%; /* Ensure the image fills the container */
    height: auto;
    display: block;
    object-fit:cover;
    aspect-ratio: 16 / 9;
}

.portfolio-item a {
    position: relative;
    display: inline-block;
    text-decoration: none; /* Remove default underline */
}

.portfolio-item a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px; /* Matches your 15% offset */
    width: 0;
    height: 4px;
    background-color: currentColor; /* Inherits text color */
    transition: width 0.3s ease;
}

.portfolio-item:hover a::after {
    width: 100%;
}
.portfolio-title {
    margin-bottom:0;
}
.portfolio-categories {
    font-size:20px;
    color:var(--dp-color);
}
/* homepage projects */
.portfolio-list {
    margin: 0 40px 0 40px;
}
.portfolio-thumbnail {
    width: 100%;
    display: block;
    overflow: hidden;
    background-color:var(--dp-color);
    position: relative;
}

.portfolio-thumbnail * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    display: block;
    transition: opacity 0.5s;
}

.featured-video {
    position: absolute;
    z-index:1000;
    top:0;
    left:0;
    opacity:0;
    -moz-transition: opacity 0.2s, filter 0.6s;
    -webkit-transition: opacity 0.2s, filter 0.6s;
    transition: opacity 0.2s, filter 0.6s;
    filter: blur(100px);
}
.portfolio-item:hover .featured-video {
    opacity:1;
    filter: blur(0);
}
.icon {
    position:relative;
    z-index:0;
}
.portfolio-details {
    margin-top: 20px;
}
.portfolio-details a:hover {opacity:0.5;}

.portfolio-description {
    margin:20px 0 0 0;
}
.portfolio-thumbnail:has(+ .portfolio-details:hover) {
    opacity:0.7;
  }
.portfolio-thumbnail:hover{
    transform: scale(1.005);
}

.align_right  {
    margin-left:auto;
    text-align: right;
}
.portfolio-short-description p {
    margin-top:0px;
    top: 1rem;
    position: relative;
}
.portfolio-short-description {
    margin: 0 0 80px 0;

}
.description {
    padding:160px;
    max-width:1000px;
    margin:auto;
}

.twocol {
    margin-top:100px;
    column-count:2;
}

/* stories overview columns */
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.grid-item {
    position: relative;
    overflow: hidden;
    border-bottom: solid var(--dp-color) 1.5px;
}
.grid-item:hover {
    opacity: 0.7;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.is-layout-grid p {
    margin-bottom:40px;
}

.awards .wp-block-separator {
    margin: 10px 0 10px 0;
}

.awards p {
    margin: 10px 0 10px 0;
}

.small-post {
    grid-column: span 1;
    grid-row: span 1;
}

.large-post {
    grid-column: span 2;
    grid-row: span 2;
}

.post-details {
    /* position: absolute; */
    bottom: 0;
    color: #fff;
    padding: 10px 0 20px 0;
    width: 100%;
}
.featured-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}
.image-caption {
    margin:10px 0 40px 0;
}

.post-title {
    margin: 0.2rem 0 0;
}
/* stories page */
.title-container {
    margin:80px 40px 40px 40px;
}
.title-container h1 {
    margin:0 0 30px 0;
}
.next-post h2 {
    margin-bottom:10px;
}
.next-post h3 {
    margin-top:10px;
}
.next-post {
    display:flex;
    gap:40px;
    margin:80px 0px 40px 0px;
    text-decoration:none;
}
.next-post:hover {
    text-decoration: none;
    color:rgba(50,75,255,0.5)
}

/* typography */
hr {
    border-top: 1px solid var(--dp-color);
    color:var(--dp-color);
}
h1,h2,h3,h4,h5,h6,p,a,summary {
    font-family: "century-old-style-std", serif;
    margin:0;
    font-display: swap;
}
h1 {
    font-size: 75px;
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 20px 0;
    vertical-align:top;
}
h2 {
    font-size: 50px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom:40px;
}
h3 {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
}
.is-layout-grid h3 {
    margin-bottom:10px;
}
summary,h4 {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;

}
.project-intro {
    margin:40px 0 40px 0;
}
p {
    font-size: 20px;
    line-height: 1.30;
}
.entry-title {
    display: none;
    }
a {
    text-decoration: underline;
    text-decoration-thickness: auto;
    text-decoration-thickness: 7%!important;
    text-underline-offset: 10%!important;
}


a:hover {
    opacity:0.5;
}

/* layout */
body {
    background-color:white;
    color:var(--dp-color);
    overflow: auto;
    margin:0;
    box-sizing: border-box;
    width: 100%;
}
.dp-sections  {
    margin: 0 auto 0 auto;
    padding: 20px 80px 80px 80px;
    max-width:2000px;
    width: 100%;
    box-sizing: border-box;

}
.dp-story-content {
    margin: 0 auto 0 auto;
    padding: 0px 80px 80px 80px;
    max-width:1200px;
    width: 100%;
    box-sizing: border-box;
}

details {
    border-top: 2px solid var(--dp-color);
    padding-top: 15px;
    transition: all 0.2s;
    margin-bottom: 20px;
}

details[open] summary ~ * {
    animation: sweep 0.2s;
    transition: all 0.2s;

  }
  
  @keyframes sweep {
    0%    {opacity: 0; margin-top: -5px}
    100%  {opacity: 1; margin-top: 0px}
  }
  summary {
    display: block;
  }
  
  /* Create a new custom triangle on the right side */
  summary::after {
    margin-right: 5px;
    text-align: right;
    float: right;
    content: '+';
    transition: 0.2s;
  }
  
  details[open] > summary::after {
    transform: rotate(45deg);
  }
  details summary::-webkit-details-marker {
    display:none;
  }
details summary::-webkit-details-marker {
  display:none;
}
.wp-block {
    margin-bottom: 0px; /* Adjust spacing between blocks */
}

.wp-block-paragraph {
    margin-bottom: 0px; /* Example: Less space for paragraphs */
}

.wp-block-image {
    margin-top: 0px; /* Example: More space above images */
}  

/* fade in animations */
.fade-in {
    opacity: 0;
    filter: blur(15px);
  }
  
  .is-faded {
    animation: fadeIn 0.2s both;
    animation-timing-function: ease-in;
  }
  
  @keyframes fadeIn {
    0% {
      opacity: 0;
      filter: blur(15px);
      transform: translateY(50px);
    }
    
    100% {
      opacity: 1;
      filter: blur(0px);
      transform: translateY(0);
    }
  }

/* partner slider */

.marquee {
    display: flex;
    max-width: 100%;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
    mask-image: linear-gradient(
      var(--mask-direction, to right),
      hsl(0 0% 0% / 0),
      hsl(0 0% 0% / 1) 20%,
      hsl(0 0% 0% / 1) 80%,
      hsl(0 0% 0% / 0)
    );
  }
  
  .marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 40px;;
    min-width: 100%;
    animation: scroll-x 45s linear infinite;
    padding-right: 50px;
    margin-top: 20px;
    /* animation-timeline: scroll(root);  */
    /* animation-range: entry 0% exit 100%;  */

  }
  
  @media (prefers-reduced-motion: reduce) {
    .marquee__group {
      animation-play-state: paused;
    }
  }
.wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: auto;
    max-width: 100vw;
  }
  .reverse {
    animation-direction: reverse;
    animation-delay: -3s;
  }
  
  @keyframes scroll-x {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

/* Navigation */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */  
    display: flex;
    flex-direction: column; 
    height: 100%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 5000; /* Sit on top */
    left: 0;
    opacity:0;
    top: -2500px;
    scale: 0.95;
    background-color: #fff;
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.6s cubic-bezier(0.3, 0, 0.1, 1); /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }


.overlay-content {
    position: relative;
    top: 0px; /* 25% from the top */
    width: 100%; /* 100% width */ 
    bottom:0px;
    max-width:2000px;
    margin:auto;
    padding: 0 80px 0 80px;
    box-sizing: border-box;
  }
.overlay * {
    color: var(--dp-color) !important;
}
.overlay .closebtn {
    position: absolute;
    top: 50px;
    right: 80px;
    font-size: 24px;
}
.closebtn {
    z-index:100;
}

.language-switcher {
    position: absolute;
    top: 50px;
    right: 200px;
    font-size: 24px;
    z-index: 100;
}

.overlay ul {
    list-style-type: none;
    padding: 0;
}


.menu-button {
    position:fixed;
    top: 50px;
    right: 80px;
    z-index:1;
    font-size:30px;
    mix-blend-mode: difference;
    color:yellow!important;
}
.logo a {
    position:fixed;
    top: 50px;
    left: 80px;
    z-index:1;
    font-size:30px;
    min-width:200px;
    mix-blend-mode: difference;
    color:yellow!important;
    /* text-decoration:none; */
}

a:visited, a:hover, a:active {
    color:var(--dp-color);
}

#work-anchor {
    scroll-margin-top: 50px;
}
/* logo animation */
.cursor {
    display: inline-block;
    width: 10px;
    animation: blink 0.8s infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}
.blue-page {
    background-color: var(--dp-color);
    color:white;
    padding-top: 150px;
}
.blue-page + footer {
    background-color: var(--dp-color);
}
.blue-page + footer * {
    color:white;
}
.blue-page + footer .footer-logo {
    background-color:white;
}

.blue-page::before {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    mask: linear-gradient(to top, rgba(50, 75, 255, 1) 0%, rgba(0, 0, 255, 0) 100%);
    backdrop-filter: blur(100px);
    pointer-events: none; /* Allows text selection */
    z-index: 2; /* Ensures it's above content */
}

.blue-page a, .blue-page h1, .blue-page h2, .blue-page h3, .blue-page h4, .blue-page h5, .blue-page h6, .blue-page p {
    color:white;
}
.blue-page .is-layout-grid {
    gap: 20px!important; 
}

/* welcome message */
#welcome-message {
    text-align: center;
    border-right: 3px solid transparent; /* Optional: Simulates cursor */
    margin: auto;
    max-width:1000px;
}
#welcome-message {
    opacity: 0;
    animation: moveIn 0.8s ease-out forwards;
}

@keyframes moveIn {
  from { opacity: 0; transform: translateY(-40px); scale: 0.95; }
  to { opacity: 1; transform: translateY(0px); scale: 1; }
}

.welcome {
    position: relative;
    height:101vh;
    /* width:100%; */
    justify-content: center;
    display:flex;
    margin:auto;
    background:var(--dp-color);
    overflow: hidden;
        mask-image: linear-gradient(
        to bottom,
        var(--dp-color) 0%,
        var(--dp-color) 95%,
        transparent 100%
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        var(--dp-color) 0%,
        var(--dp-color)  95%,
        transparent 100%
    );
}

.welcome::before,
.welcome::after {
    /* z-index:-3000; */
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    inset:-50%;
    animation: aurora 13s ease-in-out infinite;
}

.welcome::before {
  background:
    radial-gradient(ellipse 80% 50% at 70% 90%,
      rgba(255, 255, 255, 1) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 30% 80%,
      rgba(255, 255, 255, 1) 0%, transparent 60%);
    /* radial-gradient(ellipse 10% 30% at 10% 90%,
      rgba(255, 255, 255, 1) 0%, transparent 60%); */
  animation-delay: 0s;
  animation-direction: alternate;
}

.welcome::after {
  background:
    radial-gradient(ellipse 80% 50% at 70% 90%,
      rgba(255, 255, 255, 1) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 30% 80%,
      rgba(255, 255, 255, 1) 0%, transparent 60%);
          /* radial-gradient(ellipse 20% 40% at 10% 90%,
      rgba(255, 255, 255, 1) 0%, transparent 60%); */
  animation-delay: -7.5s;
  animation-direction: alternate-reverse;
}

@keyframes aurora {
  0%, 100% {
    transform: translateX(0) translateY(1%) rotate(0deg) scale(1);
  }
  25% {
    transform: translateX(25%) translateY(-1%) rotate(5deg) scale(1.05);
  }
  50% {
    transform: translateX(-10%) translateY(0%) rotate(-5deg) scale(1.02);
  }
  75% {
    transform: translateX(10%) translateY(3%) rotate(3deg) scale(1.05);
  }
}

.welcome h1 {
    color:white!important;
}

.overlay-content a {
    text-decoration: none;
    font-size:11vh;
    transition: transform 0.1s ease; 
    display:inline-block;
}
.overlay-content a::after {
        content: "";
        position: relative;
        display:block;
        width: 100%;
        height: 0.5vh;
        bottom: 1.5vh;
        left: 0;
        background-color: var(--dp-color);
        transform: scaleX(0);
        transition: transform 0.3s ease;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
}
.overlay-content a:hover::after {
  transform: scaleX(1);
}

.overlay-content a:hover {
  transform: translateX(4px); /* Move +2px right on hover */
}

.index-item {
    aspect-ratio: 1/1;
    background-color:var(--dp-color);
    display:flex;
    justify-content: center;
    padding:20px 20px 50px 20px;
    flex-direction: column;
    align-items: center;
}
.index-item:hover{
    transform: translateY(-3px);
    transition: all 0.2s;
    opacity: 0.8;
}
.index-item * {
    text-align: center;
    margin:0;
    color:white;
    vertical-align: middle;
    align-self: center;
}

.index {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:40px;
}

.index-item h2 {
    font-size: 75px;
    font-weight: 500;
    line-height: 1.1;
}
/* footer */
footer {
    width:100%;
    z-index: 20;
    position: relative;

}
.blue-page .footer-content a {
    color:white;
}

.footer-content {
    margin: auto;
    color:var(--dp-color);
    padding:40px 80px 40px 80px;
    max-width: 2000px;
    display: grid;
    grid-auto-flow: column;
    align-content:end;
    gap:10px;
    width:100%;
    box-sizing: border-box;
}
.footer-content h1 {
    margin: 20px 0 0 0;
    line-height:0.8;
}
.contact-cta {
    margin: auto;
    padding:120px 80px 0px 80px; 
    max-width: 2000px;
    width: 100%;
    box-sizing: border-box;

}

.adress p {
   font-size:13px;
   margin:0;
   color: var(--dp-color);
}


.socials a, .contact-info a {
    text-decoration:none;
}
.socials p, .contact-info p {
    font-size:13px;
}
.socials a, .contact-info a svg {
    width:30px;
}
.socials a:hover, .contact-info a:hover {
    opacity:0.5;
}
.adress h1 {
    margin:0;
    line-height:0.9;
}
.footer-logo {
    height:100px;
    width:100px;
    background-color:var(--dp-color);
}
.footer-content div {
    align-self:end;
}

.footer-content--menu div {
    align-self:end;
}

.width-150 {
    max-width:150px;
    height:150px;
    margin-bottom:80px;
}
.gap-40 {
    gap:40px;
}


/* loading effect */
.skeleton {
    animation: skeleton-loading 1.5s linear infinite alternate;
  }
  
  @keyframes skeleton-loading {
    0% {
      background-color: hsl(200, 10%, 92%);
    }
    100% {
      background-color: hsl(200, 10%, 99%);
    }
  }


  img:not([src]) {
    content:url("//:0");

  }

  /* paralax effect */
.parallax-container {
    position: relative;
    overflow: hidden;
    aspect-ratio:16/9; /* Adjust the height */
    align-items: center;
    justify-content: center;
    
}

.parallax-container--team {
    position: relative;
    overflow: hidden;
    aspect-ratio:4/3;
    min-height:90vh ; /* Adjust the height */
    align-items: center;
    justify-content: center;
}

.parallax-object {
    min-height:100%;
    margin:auto;
    position: absolute;
    height: auto;
    width: 100%;
    left: 50%;
    transition: transform 0.1s ease-out; /* Smooth transition */
    object-fit: cover; 
}

/* .portfolio-thumbnail img {
    height: auto;
    width: 100%;
    aspect-ratio: 16/9;
    top: 50%;
    object-fit: cover;
} */
.work-page {
    max-width:2000px;
    margin:0 auto auto auto;
    padding: 20px 80px 80px 80px;
}
.work-grid {
    display: grid;
    width:100%;
    grid-template-columns: repeat(2, minmax(90px,1fr));
    gap:20px;

}
.work-portfolio-thumbnail {
    display: block;
    aspect-ratio:16/9;
    width:100%;
    height:auto;
    overflow: hidden; /* Clips any overflow */
} 
.portfolio-item-work a {
    opacity:1;
    text-decoration:none;
}

.work-featured-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.portfolio-item-work {
    display: inline-block;
    transition: opacity 0.2s ease;
}

.work-grid:hover .portfolio-item-work {
    opacity: 0.4;
    filter:blur(4px);
}

.work-grid:hover .portfolio-item-work:hover {
    opacity: 1;
    transform: translateY(-3px);
    transition: all 0.2s;
    filter:blur(0px);
}

.team-row {
    gap:2em;
    flex-wrap:wrap;
    align-items: flex-start;
}
.team-row>* {
    flex: 1 0 calc(25% - 2em);
}

.wp-block-image img {
    width: 100%;
}
.wp-block-embed__wrapper {
    width: 100%;
    height:100%;
        aspect-ratio: 16/9;

}
.wp-block-embed iframe {
    width: 100% !important;
    height:100%;
}
.is-layout-grid {
    gap:40px;
}

/* Overlay caption inside the image */

.wp-element-caption  {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    padding: 10px;
    margin: 0;
    text-align: left;
    font-size: 14px;
    display: inline-block;
    /* mix-blend-mode: exclusion; */

}
/* .wp-block-separator {
    margin: 50px 0 50px 0;
} */
.wp-block-list {
    color:var(--dp-color);
    font-family: "century-old-style-std", serif;
}

table {
    margin: 20px 0 20px 0;
    border-color:var(--dp-color);
    color:var(--dp-color);
}

.faz-cookie-policy {
    color:var(--dp-color);
}
.faz-cookie-policy h2 {
    font-size: 30px;
    margin: 50px 0 5px 0;
}
html :where([style*="border-color"]) {
    border-color: var(--dp-color) !important;
    border-width: 1px !important;
    font-family: "century-old-style-std", serif !important;
}
.faz-cookie-settings-btn {
    cursor:pointer;
    padding:0;
    border:none;
    color:var(--dp-color);
    background-color:transparent; 
    font-size:inherit;
    line-height:inherit;
}
.faz-cookie-settings-btn:hover {
    opacity:0.5;
}
#faz-consent * {
    font-family: "century-old-style-std", serif !important;
}

/* form styling */
.wpcf7-form label {
    font-size:15px;
}
#wpcf7-f2937-o1 {
    grid-column: span 4;
}
input {
    border: none;
    border-bottom: 1px solid var(--dp-color);
    width: 100%;
    padding: 10px 5px 5px 5px;
    font-family: century-old-style, serif;
    margin: 10px 0 10px 0;
    font-size: 20px;
    font-style: italic;
    color: black;
    opacity:0.5;
    box-sizing: border-box;
}
input:focus {
    outline:none;
    border: none;
    border-bottom: 3px solid var(--dp-color);
    opacity:1;
}
textarea {
    border: 1px solid var(--dp-color); 
    width: 100%;
    padding: 10px 10px 10px 10px;
    font-family: century-old-style, serif;
    margin: 10px 0 10px 0;
    font-size: 20px;
    font-style: italic;
    color: black;
    opacity:0.5; 
    box-sizing:border-box;
}
input[type=submit] {
    border:none;
    cursor:pointer;
}

textarea:focus {
    outline:none;
    border: 3px solid var(--dp-color);
    opacity:1;
}

.portfolio-item {
    margin-bottom:80px;
}

.language-switcher__current {
    text-decoration: none;
}

.language-switcher__link {
    text-decoration: underline;
}

.language-switcher__separator {
    text-decoration: none;
}


@media only screen and (max-width: 600px) {
    .work-grid {grid-template-columns: repeat(1, minmax(90px,1fr));}
    .work-page {padding:20px;}
    .parallax-container {aspect-ratio:4/3;}
    .overlay-content a {font-size:60px;}
    h1 {font-size:50px;line-height:1;}
    h2 {font-size:30px;line-height:1;}
    .project-grid div {grid-column: 1 / span 2;}
    .grid-container div {grid-column:1 / span 4;}
    .dp-sections,.dp-story-content {padding:20px 20px 20px 20px;}
    .footer-content div {grid-column:1 / span 2;}
    .footer-content--menu div {grid-column:1 / span 2;}
    .footer-content, .contact-cta {padding: 40px 20px 80px 20px;}
    .portfolio-thumbnail * {aspect-ratio: 1 / 1;}
    .portfolio-description {margin-left: 0px;}
    .portfolio-categories {margin-top:13px; }
    .portfolio-details {align-items: normal;}
    .story-description {display:none;}
    .welcome {padding:100px 20px 100px 20px;}
    .menu-button{top:20px;right:20px;}
    .overlay .closebtn{top:20px;right:20px;}
    .language-switcher {top:20px;left:20px;}
    .overlay-content {padding: 80px 20px 20px 20px;}
    .logo a {top:20px;left:20px;}
    .twocol {column-count:1;}
    .description {padding:20px 20px 40px 20px;}
    .index {grid-template-columns: 1fr;}
    .white-page .is-layout-grid {grid-template-columns: 1fr!important; gap:0;}
    .is-layout-grid {grid-template-columns: 1fr!important; gap:0px;row-gap: 20px;} 
    .is-layout-grid * {grid-column:1 / span 1!important;}
    .hide-on-mobile {display:none;}
    .textblock_half_width{margin:0;}
    .textblock_half_width h2{margin:0;}
    .next-post {display:block;}
    .blue-page .is-layout-grid {gap: 0; }
    .team-video-item * {object-fit:cover; height:100%;}
    .team-video-item * {aspect-ratio:4/3;}
    .team-row>* {flex: 1 0 calc(100%);}
	h2.about-head {font-size:30px;}
    .footer-content h1 {font-size:30px;}
    .work-grid:hover .portfolio-item-work { opacity: 1;filter:blur(0px);}
    .custom-mobile {font-size:35px;}
    .contact-cta h2{font-size:35px;}
    .row-not-on-mobile { display:flex; gap:2em; flex-wrap:wrap!important;align-items: center;justify-content: center;}

  }
  
  @media (min-width:601px) and (max-width:999px)  {
    .team-video-container {aspect-ratio: 4/3;}
    .dp-sections {padding:20px 20px 80px 20px;}
    .work-page {padding:20px;}
    .footer-content, .contact-cta {padding: 40px 20px 80px 20px;}
    .footer-content {grid-auto-flow:row;}
    .twocol {column-count:1;} 
    h1 {font-size:60px;line-height:1;}
    .team-row>* {flex: 1 0 calc(50% - 2em);}
    .overlay-content {padding:20px;}
  }

  @media only screen and (min-width: 1600px) {
    .team-video-container {aspect-ratio: 4/3;}
    .team-video-item {aspect-ratio:4/3;}
    
  }
  @media only screen and (max-height: 750px) {
    .overlay-content h1 {font-size:90px;}
  }
  @media only screen and (max-height: 600px) {
    .overlay-content h1 {font-size:60px;}
  }

/* Word fade-in animation */
.text-reveal span.word {
  opacity: 0.1;
  transition: opacity 0.2s ease-in-out;
  display: inline-block;
}

.text-reveal span.word.is-visible {
  opacity: 1;
}
.wp-block-post-excerpt__excerpt {
    font-size: 35px;
}