/* Service */

.hero-section {
    padding-top: var(--hero-offset);
    padding-bottom: var(--space-l-2xl);
    text-align: center;
}

.hero-section > div {
    position: relative;
}

.hero-section h2 {
    font-size: calc(var(--space-m) * 1.5);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
}

.hero-image img {
    width: 600px;
    max-width: 80%;
    aspect-ratio: .9;
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-s);
}  

.hero-hook-wrapper {
    padding: var(--hero-padding);
}

@media screen and (width >= 60em) {

    .hero-section {
        padding-top: 0;
        padding-bottom: 0;
        text-align: left;
    }

    .hero-hook-wrapper {
        background-color: #fff;
        padding: 0;
    }

    .hero-hook {
        width: var(--hero-halfwidth);
        padding: 0 var(--space-l);
        padding-top: calc(var(--hero-offset) * 1.3);
        padding-bottom: calc(var(--hero-offset) * .6);        
    }

    .hero-section h2 {
        font-size: var(--step-5);
        position: relative;
        top: unset;
        left: unset;
        transform: none;
        width: auto;
    }

    .hero-image img {
        max-width: 90%;
        margin-top: calc(var(--hero-offset) * .6);
        margin-bottom: 0;
        aspect-ratio: 1;
    }  

}

.section-3cards .card p:first-child {
    font-family: var(--font-serif);
    font-size: var(--step-3p);
    margin-bottom: var(--space-2xs);
    line-height: var(--space-l);
}

.section-process h4 {
    font-size: var(--step-2);
    font-style: italic;
    margin-bottom: var(--space-2xs);
}

.section-process h4 + p {
    font-size: var(--step--1);
    line-height: 1.3;
    margin-top: 0;
}

.section-process .clip-container {
    width: 100%;
    background-color: var(--color-grey);
    clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    overflow: hidden; /* Ensure text doesn't spill out */
}

.section-process .clip-container-last {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.section-process .text-content {
    width: 100%;
    padding: 2rem 25% 3rem 3rem;
}

.section-process .clip-container-last .text-content {
    padding: 2rem 2rem 3rem 3rem;
}

#processNav span {
    cursor: pointer;
}

@media screen and (width > 60em) {

    #section-04.section-floatframe #sc2 + .cell {
        margin-top: var(--space-s-l);
    }

}

.ac-text {
    text-align: left;
}

.kaizen {
    font-size: var(--step-5);
    margin-bottom: 0;
}

.section-arc-left::after {
    background: url('../site/images/team1.png') center/cover no-repeat;
    background: url('../site/images/team1.webp') center/cover no-repeat;
 }

 #section-07.section-arc-left::after {
    background: url('../site/images/keys01.webp') center/cover no-repeat;
    max-height: 35em;
}

.section-arc-right::after {
    background: url('../site/images/women-on-phone.png') center/cover no-repeat;
    background: url('../site/images/women-on-phone.webp') center/cover no-repeat;
    max-height: 25em;
}

#proof-of-impact.section-arc-right::after {
    background: url('../site/images/laptop3.webp') center/cover no-repeat;
    max-height: 25em;
}

#who-we-work-with.section-arc-right::after {
    background: url('../site/images/cars01.webp') center/cover no-repeat;
    max-height: 25em;
}

@media (width >= 1280px) {

    #processNav {
        display: none;
    }

}

@media (width >= 60em) {

    #c1, #c3 {
        padding-right: 2em;
    }      

}

@media screen and (width < 40em) {

    #section-05.section-arc-left .cell {
        padding-top: 18rem;
        text-align: left;
    }

    .section-arc-right h3 {
        text-shadow: 0 0 10px #fff,
        0 0 10px #fff,
        0 0 10px #fff,
        0 5px 10px #fff,
        0 10px 10px #fff,
        0 -5px 10px #fff,
        0 -10px 20px #fff,
        0 -5px 30px #fff,
        0 -5px 40px #fff,
        0 10px 50px #fff,
        0 10px 60px #fff;
    }

}

.check-icon, .cross-icon {
    position: relative;
    padding-left: 2em;
}

.cross-icon {
    font-weight: 700;
}

.check-icon::before, .cross-icon::before {
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    left: 0;
    position: absolute;
}

.check-icon::before {
    background-image: url('../site/icons/icon-yes.svg');
    width: 1.5em;
    height: 1.5em;
}

.cross-icon::before {
    background-image: url('../site/icons/icon-no.svg');
    width: 1.4em;
    height: 1.4em;
}

@media print, screen and (width >= 60em) {

  .section-floatframe #sc1 img {
    top: -4rem;
  }

  .section-floatframe #sc2 img {
    bottom: -4rem;
  }

}

.client-bar {
  overflow: hidden;
}
.client-bar .client-logo {
  margin-top: 0;
  margin-bottom: 0;
  display: inline-block;
  padding: 0 2.25em;
  filter: grayscale(100%) opacity(.9);
  mix-blend-mode: multiply;
  margin-top: 2em;
  margin-bottom: 2em;
  text-align: center;
}
.client-bar .client-logo img {
  width: 100px;
  height: auto;
}
.client-bar .client-logo:hover {
  filter: none;
}