/*!
Theme Name: LancelotStudios
Theme URI: /
Author: Uanor
Description: Custom theme for Lancelotstudios.com
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: lancelotstudios
Tags: custom-design
*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, h5, h6, p,
figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol[role='list'] {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Set core body defaults */
body {
  font-family: var(--font-family);
  color: var(--clr-black);
  font-weight: normal;
  font-size: 1rem;
  min-height: 100vh;
  line-height: 1.5;
  overflow-y: scroll;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

@font-face {
  font-family: 'Oswald';
  src: url('/wp-content/themes/lancelotstudios/assets/fonts/Oswald-SemiBold.woff2') format('woff2'),
      url('/wp-content/themes/lancelotstudios/assets/fonts/Oswald-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Codec';
  src: url('/wp-content/themes/lancelotstudios/assets/fonts/CodecColdTrial-Bold.woff2') format('woff2'),
      url('/wp-content/themes/lancelotstudios/assets/fonts/CodecColdTrial-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('/wp-content/themes/lancelotstudios/assets/fonts/Oswald-Bold.woff2') format('woff2'),
      url('/wp-content/themes/lancelotstudios/assets/fonts/Oswald-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('/wp-content/themes/lancelotstudios/assets/fonts/Oswald-Medium.woff2') format('woff2'),
      url('/wp-content/themes/lancelotstudios/assets/fonts/Oswald-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Codec';
  src: url('/wp-content/themes/lancelotstudios/assets/fonts/CodecColdTrial-Regular.woff2') format('woff2'),
      url('/wp-content/themes/lancelotstudios/assets/fonts/CodecColdTrial-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/wp-content/themes/lancelotstudios/assets/fonts/Roboto-Regular.woff2') format('woff2'),
      url('/wp-content/themes/lancelotstudios/assets/fonts/Roboto-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/wp-content/themes/lancelotstudios/assets/fonts/Roboto-Bold.woff2') format('woff2'),
      url('/wp-content/themes/lancelotstudios/assets/fonts/Roboto-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/wp-content/themes/lancelotstudios/assets/fonts/Roboto-Medium.woff2') format('woff2'),
      url('/wp-content/themes/lancelotstudios/assets/fonts/Roboto-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Codec';
  src: url('/wp-content/themes/lancelotstudios/assets/fonts/CodecColdTrial-ExtraBold.woff2') format('woff2'),
      url('/wp-content/themes/lancelotstudios/assets/fonts/CodecColdTrial-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
	--clr-black: #2d2424;
	--clr-white: #f7f7f7;
	--clr-grey: #e4e4e4;
	--clr-brand-red: #dd413a;
	--clr-dark-grey: #bbb;
	--color-for-elements: #b2533e;
	--faded-icons: rgba(221, 65, 58, 0.8);

  --font-family: "Roboto", sans-serif;
  --second-family: "Codec", sans-serif;
  --third-family: "Oswald", sans-serif;

  --full-width: 90rem;
  --mobile-full-width: 22.5rem;
  --wrapper-width: 73.75rem;
}

h2, h3, h4, h5 {
  font-family: var(--second-family);
  font-weight: 800;
  text-transform: uppercase;
  font-variant-ligatures: none;

  & > span {
    color: var(--clr-brand-red);
  }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* added line */
    border: 0;
}

.wrapper {
    margin-inline: auto;

    @media (max-width: calc(-1px + 48rem)) {
        width: 20rem;
    }
    @media (min-width: 48rem) {
        width: 95%;
    }
    @media (min-width: 1220px) {
        width: var(--wrapper-width);
    }
}

.wrapper:has(.expand-left, .expand-right) {
  @media(min-width:91rem){
    width: calc(var(--full-width) - 130px);
    margin-inline: unset;
  }
}

.wrapper.error404 {
  margin-top: 5rem;
  & > p {
    margin-top: 1.5rem;
  }
}

.container-full {
  width: var(--mobile-full-width);
  margin-inline: auto;

  @media (min-width:48rem) {
    width: 100%;
  }
  
  @media (min-width:91rem) {
    display: flex;
    width: var(--full-width);

    &:has(.wrapper .expand-right) {
      justify-content: flex-end;
    }

    &:has(.wrapper .expand-left) {
      justify-content: flex-start;
    }
  }
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;

  @media (min-width:48rem) {
    flex-direction: row;
    gap: 2rem;
    justify-content: space-between;
  }

  @media (min-width:91rem) {
    flex-direction: row;
    gap: clamp(1rem, 7vw, 7.5rem);
    justify-content: unset;
  }
}

header {
  background: var(--clr-white);
  padding-top: 2.5rem;
  padding-bottom: 3.75rem;

  @media (min-width: 48rem) {
    padding-bottom: 2.5rem;
  }
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    & > .header-logo {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      z-index: 1001;

      @media (min-width:48rem) {
        gap: 1.25rem;
      }

      & img {
        width: 2rem;

        @media (min-width:48rem) {
          width: 3rem;
        }
      }

      & > span {
        font-family: var(--third-family);
        font-weight: 700;
        font-size: 1rem;
        line-height: 1;
        text-transform: uppercase;
        color: var(--clr-brand-red);

        @media (min-width:48rem) {
          font-size: 1.25rem;
        }
      }
    }
}

.primary-menu {
    position: fixed;
    display: grid;
    grid-template-columns: 5.375rem 5.375rem;
    grid-template-rows: max-content max-content;
    grid-auto-flow: column;
    row-gap: 1.5rem;
    align-items: center;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 100ms ease-in-out;
    background: #fff;
    top: 0;
    height: 100%;
    left: 0;
    width: 100%;
    padding: 6rem 0;

    & > li {
      line-height: 1;

      &.current-menu-item:not(.menu-item-type-custom) {
        text-decoration: underline;
        color: var(--clr-brand-red);
      }
    }
    
    & a {
      font-family: var(--font-family);
      text-decoration: none;
      text-transform: uppercase;
      font-size: 0.75rem;
      color: var(--clr-brand-red);
      line-height: 1;
    }

    & > :nth-child(-n+2) {
      justify-self: start;
    }

    & > :nth-last-child(-n+2) {
      justify-self: end;
    }
  @media (min-width:48rem){
    transform: unset;
    position: unset;
    background: unset;
    display: flex;
    gap: 2.5rem;
    transition: unset;
    padding: unset;

    & a {
      font-size: 1rem;
      line-height: 1.5;
    }
  }
}

.primary-menu[data-visible="true"] {
  transform: translateX(0);
}

.mobile-nav-toggle {
  display: block;
  position: relative;
  width: 2rem;
  height: 2rem;
  background: var(--clr-white);
  padding: 5px 0;
  border: 0;
  z-index: 1001;

  & .menu-icon {
      height: 100%;
      position: relative;

    & span {
        position: absolute;
        display: block;
        width: 100%;
        height: 2px;
        top:50%;
        left: 50%;
        border-radius: 2px;
        transform: translate(-50%, -50%);
        transition: .3s ease;
        background-color: var(--clr-brand-red);
    }

    & span:nth-child(1) {
        top:0;
    }
    & span:nth-child(3) {
        top:100%;
    }
  }
  @media (min-width:48rem){
    display: none;
  }
}
.mobile-nav-toggle[aria-expanded="true"] {
    background: #fff;
    padding: 3px;
}
.mobile-nav-toggle[aria-expanded="true"] > .menu-icon span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.mobile-nav-toggle[aria-expanded="true"] > .menu-icon span:nth-child(2) {
    opacity: 0;
}
.mobile-nav-toggle[aria-expanded="true"] > .menu-icon span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.header-hero {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  @media (min-width:48rem) {
    flex-direction: row;
    margin-top: 2.5rem;
    gap: clamp(2rem, 6vw, 6.25rem);
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width:48rem) {
  .header-hero > .hero {
    width: 41%;
  }
}

.header-heading {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  & > h1 {
    font-family: var(--third-family);
    font-weight: 600;
    font-size: 3rem;
    line-height: 1;
    text-transform: uppercase;
    text-wrap: balance;

    @media (min-width:48rem) {
      font-size: clamp(4.5rem, 2.5rem + 4.1667vw, 6.25rem);
    }
  }

  & > p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.5;
    text-transform: uppercase;

    @media (min-width:48rem) {
      font-size: 1.5rem;
    }
  }

  @media (min-width:48rem) {
    gap: 1.25rem;
    width: 52%;
  }
}

footer {
  background: #fff;
  padding-top: 3.75rem;
  padding-bottom: 2.5rem;

  & > .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2.5rem;

    @media (min-width:48rem) {
      gap: 7.5rem;
    };
  }

  @media (min-width:48rem) {
    padding-top: 7.5rem;
  }
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;

  & > .footer-logo {
      display: flex;
      align-items: center;
      gap: 0.625rem;

      & img {
        width: 2rem;

        @media (min-width:48rem) {
          width: 3rem;
        }
      }

      & > span {
        font-family: var(--third-family);
        font-weight: 700;
        font-size: 1rem;
        line-height: 1;
        text-transform: uppercase;
        color: var(--clr-brand-red);

        @media (min-width:48rem) {
          font-size: 1.25rem;
        }
      }
      @media (min-width:48rem) {
        gap: 1.25rem;
      }
  }

  & .footer-menu {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & > li {
      line-height: 1;

      &.current-menu-item:not(.menu-item-type-custom) {
        text-decoration: underline;
        color: var(--clr-brand-red);
      }
    }
    
    & a {
      font-family: var(--font-family);
      text-decoration: none;
      text-transform: uppercase;
      font-size: 1rem;
      color: var(--clr-brand-red);
      font-weight: 400;
      line-height: 1.5;
    }

    @media (min-width:48rem) {
      flex-direction: row;
      gap: 2.5rem;
    }
  }

  @media (min-width:48rem) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;

  & .footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;

    & > span:first-of-type {
      text-transform: uppercase;
    }

    & > a {
      color: var(--clr-black);
      text-decoration: none;
    }

    @media (min-width:48rem) {
      order: 2;
      flex-direction: row;
      gap: 1.25rem;
    }
  }

  & .footer-copyright {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 150%;
    text-transform: uppercase;
    text-align: center;

    @media (min-width:48rem) {
      order: 1;
      display: flex;
      gap: 1ch;
      font-size: 1rem;
    }
  }

  @media (min-width:48rem) {
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }
}

.info-section.who {
  margin-top: 2.5rem;

  & > .section-heading {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & > h2 {
      font-size: 1.5rem;
      line-height: 1.5;

      @media (min-width:48rem) {
        font-size: 2.5rem;
      }
    }

    @media(min-width:48rem) {
      width: 37%;
    }
  }

  & > .section-image {

    & > img {
      border-radius: 8px;

      @media (min-width:48rem) {
        border-radius: 10px 0 0 10px;
      }
    }

    @media(min-width:48rem) {
      width: 54%;
    }
  }

  @media (min-width:48rem) {
    margin-top: 7.5rem;

    & p {
      font-size: 2rem;
    }
  }
}

.info-section.services {
  margin-top: 3.75rem;
  flex-direction: column;
  gap: 2rem;

  @media(min-width:48rem) {
    margin-top: 7.5rem;
    position: relative;
    width: 100%;
  }

  & > .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;

    & > h2 {
      font-size: 1.5rem;
  
      @media(min-width:48rem) {
        font-size: 2.5rem;
      }
    }

    & > .learn-more-dt {
      display: none;

      @media(min-width:48rem) {
        display: block;
        background: var(--clr-black);
        text-align: center;
        color: #fff;
        text-transform: uppercase;
        font-size: 1rem;
        text-decoration: none;
        border-radius: 8px;
        padding: 1rem;
        line-height: 1;
        width: 11.25rem;
      }
    }
  }


  & .services-slider {
    width: 100%;
    margin-top: 0.5rem;

    @media(min-width:48rem) {
      margin-top: unset;
    }
  }

  & .services-list {
    padding-bottom: 0.625rem;
    height: auto;
  }

  & .services-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1.5rem 1.875rem 1.5rem;
    gap: 1.5rem;
    border-radius: 8px;
    background: #fff;
    box-shadow: 6px 6px 6px 0 #ececec;
    width: 14.875rem;
    min-height: 24.375rem;

    @media(min-width:48rem) {
      gap: 2.5rem;
      border-radius: 10px;
      width: 23.75rem;
      min-height: 35rem;
      padding: 2.5rem 2.5rem 3.25rem 2.5rem;
    }

    &:not(.swiper-slide-active) {
      opacity: 0.3;
    }

    & > .service-icon > img {
      height: 8.125rem;
		width: auto;

      @media(min-width:48rem) {
        height: 11.25rem;
      }
    }

    & > .service-descr {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      @media(min-width:48rem) {
        gap: 1.25rem;
      }

      & > h5 {
        font-size: 1rem;
        font-weight: 700;

        @media(min-width:48rem) {
          font-size: 1.5rem;
        }
      }

      & > p {
        font-size: 0.75rem;

        @media(min-width:48rem) {
          font-size: 1rem;
        }
      }
    }

    &.empty {
      visibility: hidden;
      background: red;
      width: 0.5rem;
      box-shadow: unset;
      padding: unset;

      @media(min-width:1220rem) {
        display: none;
      }

      @media(1220px < width < 91rem) {
        width: 80px;
      }
      
      @media(min-width:91rem) {
        width: 116px;
      }
    }
  }

  & .services-list-nav {
    display: none;

    @media(min-width:48rem) {
      display: flex;
      gap: 1.25rem;
      justify-content: center;
      margin-top: 2.5rem;
    }
  }

  & .swiper-button-next, .swiper-button-prev  {
      display: inline-block;
      position: relative;
      width: auto;
      height: auto;
      background: var(--clr-black);
      border-radius: 8px;
      margin: 0;
      left: unset;
      right: unset;
      padding: 0.75rem 1.188rem;
  }

  & .swiper-button-next {
    content: url(/wp-content/themes/lancelotstudios/assets/img/arrow-next.svg);
  }
  & .swiper-button-prev {
    content: url(/wp-content/themes/lancelotstudios/assets/img/arrow-prev.svg);
  }

  & .swiper-button-next::after, .swiper-button-prev::after {
    content: unset;
  }

  & .learn-more {
    background: var(--clr-black);
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 8px;
    padding: 1rem;
    line-height: 1;
    width: 100%;

    @media(min-width:48rem) {
      display: none;
    }
  }
}

@media(min-width:48rem) {
  .services-item:where(.swiper-slide-active, .swiper-slide-prev, .swiper-slide-next) {
    opacity: 1 !important;
  }
}

.banner-mid {
  margin-top: 3.75rem;
  background: url(/wp-content/themes/lancelotstudios/assets/img/banner-mid.webp) center center no-repeat;
  height: 12.5rem;
  background-size: cover;

  @media (min-width:48rem) {
    height: 37.5rem;
    margin-top: 5.5rem;
  }
}

.info-section.what-we-do {
  margin-top: 3.75rem;

  @media(min-width:48rem) {
    display: grid;
    column-gap: clamp(1rem, 7vw, 7.5rem);
    row-gap: 20px;
    margin-top: 8.875rem;
    grid-template-columns: minmax(350px, 610px) auto;
    grid-template-rows: auto auto;
  }

  & > .section-heading {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    @media(min-width:48rem) {
      grid-column: 2;
      grid-row: 1;

      & > h2 {
        font-size: 2.5rem;
      }

      & > p {
        font-size: 1.5rem;
      }
    }
  }

  & > .section-image {
    order: 2;

    @media(min-width:48rem) {
      grid-column: 1;
      grid-row: 1/3;
    }

    & > img {
      border-radius: 8px;

      @media(min-width: 48rem) {
        border-radius: 0 10px 10px 0;
      }
    }
  }

  & > .thing-we-do {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    row-gap: 2.5rem;

    @media(min-width:48rem) {
      grid-column: 2;
      grid-row: 2;
      flex-wrap: nowrap;
      flex-direction: column;
      align-items: start;
      justify-content: end;
    }
    
    & > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: end;
      gap: 1rem;
      width: 50%;

      @media(min-width:48rem) {
        flex-direction: row;
        justify-content: start;
        width: auto;
        gap: 2.5rem;

        & > img {
          width: 80px;
        }
      }

      & > span {
        font-weight: 600;

        @media(min-width:48rem) {
          font-size: 1.5rem;
        }
      }
    }
  }
}
/* Out team */
section.our-team {
  margin-top: 3.75rem;

  @media(min-width: 48rem) {
    margin-top: 7.5rem;
  }

  & > h2 {
    width: 75%;
    line-height: 1.5;

    @media(min-width: 48rem) {
      width: 100%;
      font-size: 2.5rem;
    }
  }

  & > .team-members {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;

    @media(min-width: 48rem) {
      column-gap: 1.125rem;
      flex-direction: row;
      flex-wrap: wrap;
      margin-top: 1.125rem;
    }
  }

  & .team-member {
    display: flex;
    flex-direction: column;

    @media(min-width: 48rem) {
      width: calc(100%/2 - calc(1.125rem/2));

      &:nth-child(even) > .team-member-bottom {
        transform: translateX(calc(-50% - calc(1.125rem/2)));
      }
    }
  }

  & .team-member-top {
    position: relative;
    display: flex;
    padding: 1.5rem;
    gap: 1.125rem;
    align-items: center;
    border-radius: 8px;
    box-shadow: 6px 6px 6px 0 #ececec;
    background: var(--clr-white);
    cursor: pointer;

    @media(min-width: 48rem) {
      padding: 1.875rem;
    }

    & img {
      width: 60px;
      border-radius: 80px;

      @media(min-width: 48rem) {
        width: 80px;
      }
    }

    & .member-title > span {
      font-weight: 700;
      font-variant-ligatures: none;

      @media(min-width: 48rem) {
        font-size: 1.5rem;
      }
    }

    & .member-title > p {
      font-size: 0.75rem;

      @media(min-width: 48rem) {
        font-size: 1rem;
      }
    }

    &::after {
      content: url(/wp-content/themes/lancelotstudios/assets/img/team-icon.svg);
      position: absolute;
      right: 1.875rem;
      top: 50%;
      transform: translateY(-50%);
      width: 1.25rem;
      height: 1.25rem;
      transition: transform 200ms ease-in-out;
    }
  }

  & .team-member-top[data-visible="true"]::after {
    transform: translateY(-50%) rotate(-90deg);
    transition: transform 200ms ease-in-out;
  }

  & .team-member-bottom {
    max-height: 0;
    margin-top: 1.5rem;
    margin-bottom: 0;
    overflow: hidden;
    display: flex;
    /* transition: max-height 0.4s ease, margin-bottom 0.4s ease; */
    flex-direction: column;
    gap: 1.5rem;

    @media(min-width:48rem) {
      width: 95vw;
      display: grid;
      gap: 1.25rem;
      grid-template-columns: calc(50% - calc(1.25rem/2)) auto;
      grid-template-rows: 70px auto;
    }

    @media(min-width:1220px) {
      width: var(--wrapper-width);
      display: grid;
      gap: 1.25rem;
      grid-template-columns: calc(50% - calc(1.25rem/2)) auto;
      grid-template-rows: 70px auto;
    }

    & .member-photo-big {
        @media(min-width:48rem) {
          grid-column: 1;
          grid-row: 1/3;

          & img {
            width: 30rem;
          }
        }
    }

    & img {
      width: 9.75rem;
      border-radius: 10px;
    }

    & .member-title {
      @media(min-width:48rem) {
        grid-column: 2;
        grid-row: 1;
      }
    }

    & .member-title > span {
      font-family: var(--second-family);
      font-weight: 800;
      line-height: 1.5;
      text-transform: uppercase;
      font-variant-ligatures: none;

      @media(min-width:48rem) {
        font-size: 1.5rem;
      }
    }

    & .member-title > p {
      font-size: 0.75rem;

      @media(min-width:48rem) {
        font-size: 1rem;
        margin-top: 0.625rem;
      }
    }
    
    & .member-bio {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      
      @media(min-width:48rem) {
        margin-top: 0.625rem;
        grid-column: 2;
        grid-row: 2;
        font-size: 1.5rem;
      }
    }
  }

  & .team-member-bottom[aria-expanded="true"] {
    max-height: 600px;
    margin-bottom: 1.5rem;
  }
}

.banner-bottom {
  display: flex;
  align-items: center;
  margin-top: 3.75rem;
  background: linear-gradient(270deg, rgba(196, 196, 196, 0) 24.9%, rgba(25, 25, 25, 0.67) 100%), url(/wp-content/themes/lancelotstudios/assets/img/banner-bottom.webp) center center no-repeat;
  background-size: cover;
  height: 12.5rem;
  margin-bottom: 1rem;

  & h3 {
    width: 12ch;
    font-family: var(--third-family);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;

    @media (min-width:48rem) {
      font-size: 6.25rem;
    }
  }

  @media (min-width:48rem) {
    height: 37.5rem;
    margin-top: 7.5rem;
  }
}

.contact-section {
  background: linear-gradient(var(--clr-white) 13.5rem, var(--clr-black) 13.5rem);

  &.container-full {
    @media(max-width: 48rem){
      width: 100%;
    }
  }
  & > .wrapper {

    @media(min-width: 48rem){
      display: flex;
    }
  }

  & .contact-heading {
    padding: 3.75rem 0;
    display: flex;
    height: 13.5rem;

    @media(min-width:48rem){
      padding: 0 clamp(1rem, 5vw, 4rem);
      flex-direction: column;
      width: 50%;
      height: auto;
    }

    @media(min-width:91rem){
      width: 50%;
      padding: 0 clamp(2rem, 8vw, 6.875rem) 0 0;
    }

    & > h3 {
      width: 50%;
      font-family: var(--third-family);
      font-weight: 600;
      font-size: 3rem;
      line-height: 1;
      text-transform: uppercase;
		color: var(--clr-brand-red);

      @media(min-width:48rem){ 
        width: 100%;
        font-family: var(--second-family);
        font-weight: 800;
        font-size: clamp(6rem, 4.2857rem + 3.5714vw, 7.5rem);
        line-height: 1.2;
      }
    }

    & > p {
      width: 50%;
      font-family: var(--font-family);
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.5;

      @media(min-width:48rem) {
        width: 70%;
        margin-top: 4.875rem;
        font-size: 1.5rem;
      }
    }
	  
	& > .mail-sent {
      display: none;
    }
  }

  & .contact-us {
    padding: 3.75rem 0;

    & form {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
		
	  & .flnames {
        display: flex;
        gap: 1.25rem;
        flex-direction: column;

          @media(min-width:48rem){
            flex-direction: row;
            justify-content: space-between;
          }

        & .form-entry {
          @media(min-width:48rem){
            width: calc(100%/2 - calc(1.25rem/2));
          }
        }
      }
      
      & label {
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.5;
        color: #fff;

        @media(min-width:48rem){
          display: block;
          width: 70%;
        }
      }

      & input, textarea {
        width: 100%;
        margin-top: 1rem;
        border: 1px solid #fff;
        border-radius: 8px;
        padding: 0.75rem 1rem;
        background: var(--clr-black);
        color: #fff;
        font-size: 0.75rem;
        font-weight: 700;
        height: 3rem;

        &::placeholder {
          color: var(--clr-grey);
          font-size: 0.75rem;
          font-weight: 700;
          opacity: 1; /* Firefox */
        }

        @media(min-width:48rem){
          font-size: 1rem;

          &::placeholder {
            font-size: 1rem;
          }
        }
      }
		
		& textarea {
        min-height: 10rem;
      }

      & input[type="submit"] {
        background: #fff;
        color: var(--clr-black);
        text-transform: uppercase;
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.4;
        cursor: pointer;
      }
    }
    

    @media(min-width:48rem){
      width: 50%;
      padding: 0 clamp(1rem, 5vw, 4rem);
    }

    @media(min-width:91rem){
      width: 50%;
      padding: 0 0 0 clamp(2rem, 8vw, 6.875rem);
    }
  }

  @media(min-width:48rem){  
    background: linear-gradient(90deg, var(--clr-white) 50%, var(--clr-black) 50%);
    padding: 3.75rem 0;
    margin-top: 7.5rem;
  }
}

.contact-section:has(form.sent) {
  background: linear-gradient(var(--clr-black) 13.5rem, var(--clr-white) 13.5rem);

  @media(min-width:48rem){  
    background: linear-gradient(90deg, var(--clr-black) 50%, var(--clr-white) 50%);
  }
}

.contact-section:has(form.sent) .contact-heading {
  align-items: center;
  justify-content: center;

  & > h3 {
    display: none;
  }
  & > p {
    display: none;
  }

  & > .mail-sent {
    display: block;

    @media(min-width:48rem) {
      width: 100%;
    }
  }
}

.custom-select-wrapper {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 1rem;
}

.custom-select {
  position: relative;
  font-size: 0.75rem;

  @media(min-width: 48rem) {
    font-size: 1rem;
  }
}

.custom-select-trigger {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--clr-black);
  border: 1px solid #fff;
  padding: 0.75rem 1rem;
  cursor: pointer;
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  height: 3rem;
}

.custom-select-trigger .arrow {
  border: solid #fff;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  margin-bottom: 5px;
  transform: rotate(45deg);
}

.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--clr-black);
  border: 1px solid #ccc;
  border-top: none;
  z-index: 10;
  display: none;
  flex-direction: column;
  height: auto;
  overflow-y: auto;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
}

.custom-option {
  padding: 0.75rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  color: #fff;
  font-size: 0.75rem;

  @media(min-width: 48rem) {
    font-size: 1rem;
  }
}

.custom-option:hover {
  background: var(--clr-black);
  opacity: 0.5;
}

.custom-option.selected {
  background: var(--clr-dark-grey);
}

.custom-select.open .custom-options {
  display: flex;
}

.custom-select.open .custom-select-trigger {
  border-radius: 8px 8px 0 0;
  border-bottom: 0;
}

.info-section.header-bottom {
  margin-top: 2.5rem;

  & .breadcrumbs {
    display: none;

    @media(min-width: 48rem) {
      display: block;
      text-transform: uppercase;
      margin-bottom: clamp(1rem, 6.5vw, 7.5rem);

      & > a {
        color: var(--clr-black);
        text-decoration: none;
      }

      & > span {
        color: var(--clr-dark-grey);
      }
    }
  }

  & > .section-heading {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & > h2 {
      font-size: 1.5rem;
      line-height: 1.5;

      @media (min-width:48rem) {
        font-size: 2.5rem;
      }
    }

    @media (min-width:48rem) {
      width: 37%;
      order: 1;
    }
  }

  & > .section-image {
    order: 1;
    
    & > img {
      border-radius: 8px;
      height: 16.625rem;
      
      @media (min-width:48rem) {
        border-radius: 10px 0 0 10px;
        height: unset;
      }
    }
    
    @media (min-width:48rem) {
      align-self: center;
      width: 54%;
      order: 2;
    }
  }

  @media (min-width:48rem) {
    margin-top: 7.5rem;

    & p {
      font-size: 1.5rem;
    }
  }
}

.info-section.services-provide-top,
.info-section.services-provide-bottom {
  margin-top: 2.5rem;

  & > .section-heading {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & > h2 {
      font-size: 1.5rem;
      line-height: 1.5;

      @media (min-width:48rem) {
        font-size: 2.5rem;
      }
    }

    @media (min-width:48rem) {
      order: unset;
      width: 45%;
      max-width: 36.25rem;
    }
  }

  & > .section-image {
    order: 1;

    & > img {
      border-radius: 8px;

      @media (min-width:48rem) {
        border-radius: 10px 0 0 10px;
        height: unset;
        width: clamp(350px, 50vw, 610px);
      }
    }

    @media (min-width:48rem) {
      order: unset;
      width: 47%;
    }
  }

  @media (min-width:48rem) {
    margin-top: 7.5rem;
  }
}

.services-wrapper {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;

  & .services-provide-item {
    display: flex;
    flex-direction: column;

    &:last-child {
      margin-bottom: 4.375rem;
    }
  }

  & .services-provide-top {
    position: relative;
    padding: 1rem;
    background: var(--clr-white);
    cursor: pointer;
    box-shadow: 6px 6px 6px 0 #ececec;
    border-radius: 8px;

    @media(min-width:48rem) {
      padding: 1.375rem 1.125rem;
      border-radius: 10px;
    }

    & h5 {
      width: 60%;
      font-size: 1rem;

      @media(min-width:48rem) {
        width: 90%;
        font-size: 1.5rem;
      }
    }

    &::after {
      content: url(/wp-content/themes/lancelotstudios/assets/img/team-icon.svg);
      position: absolute;
      right: 1.875rem;
      top: 50%;
      transform: translateY(-50%);
      width: 1.25rem;
      height: 1.25rem;
      transition: transform 200ms ease-in-out;
    }

    &[data-visible="true"]::after {
      transform: translateY(-50%) rotate(-90deg);
      transition: transform 200ms ease-in-out;
    }
  }

  & .services-provide-bottom {
    font-size: 0.75rem;
    padding: 0 1rem;
    max-height: 0;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: max-height 200ms ease-in-out;

    @media(min-width:48rem) {
      font-size: 1rem;
    }

    & > p {
      margin-top: 1rem;

      @media(min-width:48rem) {
        margin-top: 1.125rem;
      }
    }

    &[aria-expanded="true"] {
      max-height: 600px;
      margin-bottom: 1rem;
    }
  }
}

.company-metrics {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 0.5rem;
  margin-top: 2.5rem;

  & > .metric-item {
    width: calc(100%/2 - calc(0.5rem/2));
    border-radius: 8px;
    box-shadow: 6px 6px 6px 0 #ececec;
    background: #fff;
    padding: 1rem 0;
    text-align: center;
    color: var(--clr-brand-red);
    
    & > span {
      display: block;
      font-family: var(--third-family);
      font-weight: 700;
      font-size: 3rem;
      text-transform: uppercase;
      color: var(--clr-brand-red);
      line-height: 1.5;
    }
    
    &:last-child {
      width: 100%;
    }
    
    @media(min-width: 48rem) {
      padding: 3.25rem 1rem;
      width: calc(100%/3 - calc(1.25rem/3*2));
      font-size: 1.5rem;

      &:nth-child(2) {
        order: 3;
      }
      
      &:last-child {
        order: 2;
        width: calc(100%/3 - calc(1.25rem/3*2));
      }
      
      & > span {
        font-size: 6.25rem;
      }
    }
  }


  @media(min-width: 48rem) {
    flex-wrap: nowrap;
    column-gap: 1.25rem;
    margin-top: 7.5rem;
  }
}

.info-section.company {
  margin-top: 3.75rem;

  & > .section-heading {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    @media(min-width:48rem) {
      width: 36%;
    }

    & > h2 {
      font-size: 1.5rem;
      line-height: 1.5;

      @media (min-width:48rem) {
        font-size: 2.5rem;
      }
    }
  }

  & > .section-image {

    & > img {
      border-radius: 8px;

      @media (min-width:48rem) {
        border-radius: 0;
        width: clamp(350px, 50vw, 610px);
      }
    }
  }

  @media (min-width:48rem) {
    margin-top: 7.5rem;

    & p {
      font-size: 1.5rem;
      margin-bottom: 0.875rem;
    }
  }
}

.our-values {
  margin-top: 3.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  @media(min-width: 48rem) {
    margin-top: 7.5rem;
  }

  & > h2 {
    font-size: 2rem;
    line-height: 1.3;

    @media(min-width: 48rem) {
      font-size: clamp(3rem, 0.7143rem + 4.7619vw, 5rem);
      line-height: 1;
    }
  }

  & span {
    display: block;
    transition: opacity 1s ease-in-out;

    @media(min-width: 48rem) {
      display: inline-block;
    }
  }
}

.fade-out {
  opacity: 0;
}
.fade-in {
  opacity: 1;
}

@media(min-width:48rem){
  .info-section.company.expand-right {
    & .section-image {
      order: 2;
    }
    & .section-heading {
      order: 1;
    }
  }
}

.wpcf7-not-valid-tip {
  margin-top: 0.5rem;
}

.wpcf7 form .wpcf7-response-output {
  color: #fff;
  border-radius: 10px;
  padding: 0.5rem 1rem;
  margin: 0;
}

.wpcf7-spinner {
  display: block;
  margin: 1rem auto;
  background-color: #fff;

  &::before {
    background-color: var(--clr-brand-red);
  }
}

.wpcf7 form.sent > :not(.wpcf7-response-output) {
  display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
  border: 0;
  text-align: center;
  color: var(--clr-black);
	
  &::before {
    content: "THANK YOU!";
    display: block;
    margin-bottom: 1.25rem;
    font-family: var(--third-family);
    color: var(--clr-brand-red);
    font-size: 3rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
  }

  @media(min-width: 48rem) {
    font-size: 1.5rem;
    text-align: start;
	  
	&::before {
      font-size: 7.5rem;
      text-align: start;
      font-family: var(--second-family);
      line-height: normal;
    }
  }
}