/* ============================================================
   ProductTrio - homepage layout
   The homepage's sections: hero, case sliders, "How can we help you?",
   services, the banner. Until Sept 2026 these rules lived in the shared
   Webflow stylesheet; they are the ones the homepage actually used, moved
   here unchanged except that colours read the tokens in css/system.css.
   Loaded before css/system.css, where the Webflow file used to be, so the
   cascade is the one the page was built on.
   ============================================================ */

/* ---------- 1. what Webflow's utility classes gave these elements ----------
   Webflow put these on its own utility classes (w-inline-block, w-button,
   w-container, w-layout-blockcontainer); the page now carries only its own
   classes, so the same rules are written for those. They come first, where
   the utility rules sat, so the section rules below still win. */
.link-block-2-copy, .project-link { max-width: 100%; display: inline-block; }
.button-case-study, .button-arrow-right, .get-in-touch-button {
  color: rgb(255, 255, 255); line-height: inherit; cursor: pointer; background-color: rgb(56, 152, 236);
  border: 0px; border-radius: 0px; padding: 9px 15px; text-decoration: none; display: inline-block;
}
.home-container { max-width: 940px; margin-left: auto; margin-right: auto; display: block; }
.home-container::before, .home-container::after { content: " "; grid-area: 1 / 1 / 2 / 2; display: table; }
.home-container::after { clear: both; }
@media screen and (max-width: 991px) {
  .home-container { max-width: 728px; }
}
@media screen and (max-width: 767px) {
  .home-container { max-width: none; }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---------- 2. the case sliders ----------
   Were Webflow sliders; now [data-carousel], run by js/site.js. The slides
   stack in one grid cell, so the slider is as tall as its tallest case, as
   before, and cross-fade: out, then in, 500ms together, every 5 seconds. */
.project-slider { position: relative; text-align: center; clear: both; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.project-slider-mask { position: relative; z-index: 1; display: grid; height: 100%; overflow: hidden; }
.project-slide {
  grid-area: 1 / 1; position: relative; width: 100%; height: 100%; vertical-align: top; white-space: normal; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity .25s ease-in-out, visibility 0s linear .25s;
}
.project-slide.is-active { opacity: 1; visibility: visible; transition: opacity .25s ease-in-out .25s, visibility 0s; }
.left-arrow-2, .right-arrow-2 {
  position: absolute; margin: auto; padding: 0; border: 0; overflow: hidden;
  font-size: 40px; color: rgb(255, 255, 255); cursor: pointer; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.left-arrow-2 { z-index: 3; }
.right-arrow-2 { z-index: 4; }
.left-arrow-2 svg, .right-arrow-2 svg { position: absolute; inset: 0; margin: auto; width: 1em; height: 1em; }
.left-arrow-2:focus-visible, .right-arrow-2:focus-visible { outline: 2px solid rgb(255, 255, 255); outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) {
  .project-slide, .project-slide.is-active { transition: none; }
}

/* ---------- 2b. the entrance ----------
   What the Webflow "Primary - Page Load" interaction did, as CSS: the hero,
   the logo strip and the numbers band start 25px to the side and transparent
   and move into place once the page is up. Same delays, durations and
   easings; with reduced motion they are simply there. */
@keyframes home-in-left { from { opacity: 0; transform: translate3d(-25px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes home-in-right { from { opacity: 0; transform: translate3d(25px, 0, 0); } to { opacity: 1; transform: none; } }
.heading, .arrow-text { animation: home-in-left .5s ease-out .3s both; }
.paragraph-hero { animation: home-in-left .5s ease-in-out .5s both; }
.button-wrap-hero { animation: home-in-left .7s ease-out .6s both; }
.hero-image-wrap { animation: home-in-right .5s ease-out .6s both; }
.section-logo, .benefits-section { animation: home-in-left .5s ease-out .6s both; }
@media (prefers-reduced-motion: reduce) {
  .heading, .arrow-text, .paragraph-hero, .button-wrap-hero, .hero-image-wrap, .section-logo, .benefits-section { animation: none; }
}

/* ---------- 3. the sections (from the Webflow stylesheet, colours on the system tokens) ---------- */
.header { object-fit: fill; background-image: url("../images/pt_hero_background.svg"); background-repeat: no-repeat; background-size: cover; flex-flow: column; justify-content: center; align-items: center; height: 100vh; min-height: 72vh; padding: 5% 5vw 15px; display: flex; }
.error-container { flex-direction: row; align-items: stretch; width: 100%; max-width: 1240px; margin-left: auto; margin-right: auto; display: block; }
.content-wrap { max-width: 590px; position: relative; }
.heading { width: auto; color: var(--pt-ink); letter-spacing: 0px; object-fit: fill; order: 1; align-self: center; margin-top: 0px; margin-bottom: 0px; font-size: 50px; font-weight: 600; line-height: 1; display: block; }
.paragraph { max-width: 570px; color: var(--pt-ink); text-align: left; font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.3; }
.paragraph.paragraph-centre-white { max-width: 1240px; color: var(--pt-pearl); text-align: center; margin-bottom: 40px; font-size: 20px; }
.paragraph.paragraph-centre-grey { max-width: 1000px; color: var(--pt-pearl); text-align: center; margin-bottom: 40px; font-size: 20px; }
.paragraph.product-framework { width: 100%; color: var(--pt-ink); margin-bottom: 0px; font-size: 16px; }
.heading-2 { color: var(--pt-primary); text-align: left; margin-top: 0px; margin-bottom: 8px; text-decoration: none; }
.hero-block { background-color: rgba(0, 0, 0, 0); align-items: center; width: 60%; min-height: 30vh; display: flex; }
.image-block { justify-content: center; align-items: center; width: 50%; min-height: 350px; padding: 30px; display: flex; position: relative; }
.section-content { background-color: rgba(0, 0, 0, 0); flex-flow: column; justify-content: center; align-items: center; max-width: none; margin-left: 0px; margin-right: 0px; padding: 5vh 5vw; display: flex; }
.column-wrap-reversed { flex-flow: row-reverse; margin-bottom: 0px; display: flex; }
.title { max-width: 500px; color: var(--pt-primary); text-align: left; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 0px; font-size: 14px; font-weight: 600; }
.heading-primary { max-width: 850px; color: var(--pt-ink); letter-spacing: -0.5px; flex-direction: row; justify-content: center; margin-top: 0px; margin-bottom: 30px; font-size: 46px; font-weight: 700; line-height: 1; display: block; }
.heading-primary.h3-centre { text-align: center; max-width: 700px; }
.heading-primary.h3-centre.white { color: var(--pt-pearl); font-size: 40px; font-style: normal; }
.heading-primary.h3-centre-white { color: rgb(255, 255, 255); text-align: center; max-width: 800px; }
.button-wrap-hero { gap: 15px; justify-content: flex-start; align-items: center; margin-top: 0px; display: flex; }
.link { color: var(--pt-ink); font-size: 16px; text-decoration: none; }
.link:hover { color: var(--pt-primary); }
.section-logo { -webkit-text-fill-color: inherit; object-fit: contain; background-color: rgba(249, 249, 249, 0); background-clip: border-box; width: 100%; max-width: 1240px; margin-left: 0px; margin-right: 0px; padding: 15px 0px; position: relative; }
.column-wrap { display: flex; }
.feature-content-wrap { flex-direction: column; align-items: flex-start; display: flex; }
.hero-image-wrap { justify-content: center; align-items: center; width: 40%; min-height: 30vh; padding: 10px 30px 10px 0px; display: flex; position: relative; }
.content-block-right { align-items: center; width: 50%; min-height: 350px; padding: 25px 25px 25px 55px; display: flex; }
.hero-content { min-height: auto; display: flex; }
.paragraph-hero { max-width: none; color: var(--pt-ink); text-align: left; margin-bottom: 30px; font-size: 20px; font-style: normal; line-height: 1.4; }
.content-block-hero { max-width: none; position: relative; }
.title-wrap { text-align: left; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 1240px; margin-bottom: 0px; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; display: flex; }
.category-tag { background-color: var(--pt-mint); opacity: 1; color: var(--pt-primary); text-transform: uppercase; -webkit-text-fill-color: inherit; background-clip: border-box; border-radius: 20px; justify-content: center; align-items: center; margin-bottom: 10px; margin-right: 10px; padding: 5px 10px; font-size: 12px; font-weight: 400; display: flex; }
.section-portfolio { background-color: rgba(0, 0, 0, 0); flex-flow: column; justify-content: flex-start; align-items: center; min-height: auto; padding: 5vh 0px; display: flex; }
.section-banner { background-color: #001632; background-image: radial-gradient(circle farthest-corner at 0% 0%,var(--pt-ink)36%,var(--pt-primary)),url(../images/pt_banner_bg.svg); width: auto; max-width: 1240px; box-shadow: 1px 1px 5px 0 #0f0050; background-position: 0px 0px, 0px 0px; background-size: auto, cover; border: 1px rgba(0, 0, 0, 0); border-radius: 20px; justify-content: center; align-items: center; margin-bottom: 0px; margin-left: auto; margin-right: auto; padding: 5vh 5vw; display: flex; }
.feature { align-items: flex-start; margin-top: 15px; padding-right: 0px; display: flex; }
.content-title { color: var(--pt-primary); margin-top: 12px; margin-bottom: 10px; font-size: 18px; font-weight: 500; line-height: 18px; }
.italic-text { width: 100%; max-width: 700px; color: var(--pt-pearl); text-align: center; font-size: 30px; font-style: normal; }
.paragraph-hero-copy { width: auto; min-width: auto; max-width: 100%; color: var(--pt-ink); text-align: center; justify-content: flex-end; font-size: 14px; font-style: normal; line-height: 1.4; display: block; position: static; }
.benefits-section { background-color: var(--pt-ink); background-image: radial-gradient(circle farthest-corner at 0% 0%,var(--pt-ink)36%,var(--pt-primary)); width: auto; max-width: 1240px; min-height: 500px; box-shadow: 1px 1px 5px 0 #0f0050; border-radius: 20px; justify-content: center; align-items: flex-start; margin-left: auto; margin-right: auto; padding: 2% 5vw; }
.icon-block { gap: 0px; text-align: left; background-color: rgba(0, 0, 0, 0); border-radius: 5px; flex-direction: row; justify-content: center; align-items: center; width: 70px; height: auto; margin-bottom: 10px; display: flex; position: static; }
.services-grid { gap: 28px; grid-template: "." / 1fr 1fr 1fr; grid-auto-columns: 1fr; width: 100%; margin-top: 0px; padding-bottom: 0px; display: grid; }
.benefit-lottie-icon { flex: 0 1 auto; order: 0; justify-content: flex-start; display: block; overflow: visible; }
.lottie-animation { grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; align-items: flex-start; width: auto; max-width: 100%; height: 40px; margin-top: 0px; margin-bottom: 0px; margin-right: 15px; display: flex; }
.process-title { color: var(--pt-primary); text-align: center; margin-bottom: 12px; font-size: 18px; font-weight: 700; }
.process-grid-block { background-color: rgb(255, 255, 255); border: 1.5px rgba(0, 0, 0, 0); border-radius: 10px; flex-direction: column; justify-content: center; align-items: center; padding: 20px 30px 30px; text-decoration: none; transition: 0.25s; display: flex; }
.process-grid-block:hover { border: 1.5px none var(--pt-primary); }
.process-paragraph { color: var(--pt-ink); text-align: center; justify-content: center; margin-bottom: 0px; padding-top: 5px; font-size: 16px; display: flex; }
.container { object-fit: contain; flex-flow: column; flex: 0 1 auto; order: -1; justify-content: flex-start; align-items: flex-start; width: auto; max-width: 1240px; margin: auto 0px; padding-top: 0px; padding-bottom: 0px; display: flex; position: relative; }
.image-3 { border-radius: 30px; margin-top: auto; margin-bottom: auto; display: block; }
.logo-clean { opacity: 1; background-color: rgba(0, 0, 0, 0); width: 150px; height: auto; max-height: 45px; display: inline-block; overflow: clip; }
.get-in-touch-button { background-color: var(--pt-primary); opacity: 1; width: auto; max-width: none; color: var(--pt-pearl); border-radius: 45px; margin-right: 15px; padding: 15px 35px; font-size: 16px; transition: 0.4s; display: flex; }
.get-in-touch-button:hover { width: auto; margin: -2px 13px -2px -2px; padding: 20px 37px; }
.button-arrow-right { background-color: var(--pt-primary); color: var(--pt-pearl); -webkit-text-fill-color: inherit; background-image: url("../images/arrow_right_icon.svg"); background-position: -20% center; background-repeat: no-repeat; background-size: 20px auto; background-clip: border-box; border-radius: 45px; margin-right: 15px; padding: 15px 35px; font-size: 16px; transition: 0.4s; }
.button-arrow-right:hover { border: 2px none var(--pt-primary); background-color: var(--pt-primary); color: var(--pt-pearl); background-image: url("../images/arrow_right_icon.svg"); background-position: 90% center; background-repeat: no-repeat; background-size: 20px auto; padding-left: 25px; padding-right: 45px; }
.arrow-text { gap: 4px; justify-content: flex-start; align-items: center; margin-bottom: 30px; display: flex; overflow: visible; }
.heading-arrow { order: -1; align-self: center; max-height: 100%; }
.container-clients { object-fit: contain; flex-flow: column; flex: 0 1 auto; justify-content: flex-start; align-items: center; width: auto; max-width: 1240px; margin: auto 0px; padding-top: 0px; padding-bottom: 0px; display: flex; position: relative; }
.image-4 { border-radius: 20px; }
.areas-expertise-section { background-color: rgb(255, 255, 255); background-image: radial-gradient(circle farthest-corner at 0% 0%,var(--pt-ink)36%,var(--pt-primary)); width: auto; max-width: 1240px; min-height: auto; box-shadow: 1px 1px 5px 0 #0f0050; border-radius: 30px; justify-content: center; align-items: flex-start; margin-left: auto; margin-right: auto; padding: 5vh 2vw; }
.outcomes-list { height: auto; color: var(--pt-ink); text-align: left; margin-bottom: 0px; padding-left: 20px; font-size: 16px; line-height: 1.5; list-style-type: disc; }
.outcome-item { color: var(--pt-ink); font-family: Manrope, sans-serif; font-weight: 400; list-style-type: disc; }
.services-block-right { align-items: center; width: 60%; min-height: 350px; padding: 25px 25px 25px 55px; display: flex; }
.services-image-block { gap: 35px; flex-flow: column; justify-content: center; align-items: center; width: auto; min-height: 350px; padding: 30px; display: flex; position: relative; }
.services-block-left { flex-flow: row; justify-content: center; align-items: center; width: 60%; min-height: 350px; padding: 25px 10px; display: flex; }
.services-section { background-color: rgba(0, 0, 0, 0); flex-flow: row; justify-content: center; align-items: flex-start; padding: 5vh 5vw; display: flex; }
.project-container { flex-flow: row; justify-content: space-between; align-items: center; display: flex; }
.project-container.rtl { flex-flow: row-reverse; }
.project-image-container { width: 50%; min-height: 100%; }
.project-description { margin-bottom: 30px; font-size: 16px; font-weight: 400; }
.project-image { object-fit: cover; border-radius: 20px; min-height: 450px; }
.right-arrow-2 { background-color: var(--pt-primary); border-bottom-right-radius: 20px; width: 80px; height: 80px; transition: 0.3s; inset: auto 0% 0% auto; }
.right-arrow-2:hover { background-color: rgb(45, 46, 60); }
.right-arrow-2.left-side-image { right: 50%; }
.project-tag-container { gap: 5px; flex-wrap: wrap; line-height: 1em; display: flex; }
.section-tag-container { color: rgb(255, 255, 255); letter-spacing: 3px; -webkit-text-stroke-color: var(--pt-primary); text-transform: uppercase; align-items: center; width: 100%; margin-bottom: 10px; font-size: 11px; line-height: 1em; display: flex; }
.left-arrow-2 { background-color: var(--pt-primary); border-bottom-left-radius: 20px; width: 80px; height: 80px; transition: 0.3s; inset: auto auto 0% 50%; }
.left-arrow-2:hover { background-color: rgb(45, 46, 58); }
.left-arrow-2.left-side-image { left: 0%; }
.slider-section-container { flex: 1 1 0%; max-width: 1240px; padding-top: 0px; }
.section-tag-line { background-image: linear-gradient(90deg,var(--pt-primary),var(--pt-canvas)); flex: 1 1 0%; height: 1px; margin-left: 20px; }
.link-arrow { width: 10px; height: 10px; color: var(--pt-ink); justify-content: center; align-items: center; display: flex; position: relative; }
.project-link { column-gap: 10px; color: rgb(255, 255, 255); align-items: center; margin-left: -10px; padding: 10px; font-size: 16px; font-weight: 300; line-height: 1em; text-decoration: none; display: flex; }
.project-info-container { row-gap: 20px; flex-direction: column; align-items: flex-start; width: 42%; max-width: 520px; line-height: 1.6em; display: flex; }
.project-slider { background-color: rgba(0, 0, 0, 0); align-items: center; height: 100%; }
.button-case-study { background-color: var(--pt-primary); color: var(--pt-pearl); -webkit-text-fill-color: inherit; background-image: none; background-repeat: repeat; background-size: auto; background-clip: border-box; border-radius: 45px; margin-right: 15px; padding: 15px 35px; font-size: 16px; transition: 0.4s; display: none; overflow: visible; }
.button-case-study:hover { border: 2px none var(--pt-primary); background-color: var(--pt-primary); color: var(--pt-pearl); background-image: none; background-repeat: repeat; background-size: auto; padding-left: 35px; padding-right: 35px; }
.button-wrap-case-study { gap: 15px; justify-content: flex-start; align-items: center; margin-top: 0px; display: flex; }
.logo-link-case-study { flex: 0 1 auto; justify-content: center; align-items: center; width: 20%; max-height: 100px; margin-right: 20px; padding: 0px; display: flex; overflow: visible; }
.logo-container { gap: 0px; object-fit: contain; flex-flow: row; flex: 0 1 auto; order: -1; justify-content: flex-start; align-items: center; width: 100%; max-width: 100%; margin: auto 0px; padding-top: 0px; padding-bottom: 0px; display: flex; position: relative; }
@media screen and (min-width: 1440px) {
  .project-description { font-size: 15px; }
  .project-tag-container { font-size: 17px; }
}
@media screen and (min-width: 1920px) {
  .slider-section-container { padding-top: 0px; }
}
@media screen and (max-width: 991px) {
  .header { height: 100%; min-height: auto; padding-top: 10%; }
  .content-wrap { flex-direction: column; justify-content: center; align-items: flex-start; margin-bottom: 35px; display: flex; }
  .heading { text-align: center; order: -1; }
  .hero-block { justify-content: center; width: 100%; }
  .image-block { width: 100%; min-height: auto; margin-bottom: 35px; }
  .section-content { padding-top: 5vh; padding-bottom: 5vh; }
  .column-wrap-reversed { flex-wrap: wrap; margin-bottom: 80px; }
  .column-wrap { flex-wrap: wrap; }
  .hero-image-wrap { width: 100%; min-height: auto; padding-top: 0px; padding-bottom: 0px; display: none; }
  .content-block-right { width: 100%; padding-left: 25px; }
  .hero-content { flex-wrap: wrap; }
  .paragraph-hero { text-align: center; }
  .content-block-hero { flex-direction: column; justify-content: center; align-items: center; margin-bottom: 0px; display: flex; }
  .section-portfolio { padding-top: 5%; padding-bottom: 5%; }
  .feature { flex-direction: column; }
  .paragraph-hero-copy { text-align: center; }
  .benefits-section { padding-top: 2%; padding-bottom: 0px; }
  .services-grid { grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
  .container { flex-flow: column; max-width: 100vw; height: 100%; }
  .terms-section, .areas-expertise-section { padding-top: 100px; padding-bottom: 100px; }
  .services-block-right { width: 100%; padding-left: 25px; }
  .services-image-block { width: 100%; min-height: auto; margin-bottom: 35px; }
  .services-block-left { width: 100%; padding-bottom: 0px; padding-right: 25px; }
  .services-section { padding-top: 100px; padding-bottom: 100px; }
  .project-container { flex-direction: column-reverse; align-items: stretch; }
  .project-container.rtl { flex-flow: column-reverse; }
  .project-image-container { align-items: center; width: auto; display: flex; position: relative; }
  .project-description { margin-bottom: 10px; }
  .project-image { width: 100%; height: 450px; min-height: auto; }
  .right-arrow-2 { inset: 370px 0% auto auto; }
  .right-arrow-2.left-side-image { right: 0%; }
  .section-tag-container { margin-bottom: 50px; }
  .left-arrow-2 { inset: 370px auto auto 0%; }
  .slider-section-container { padding-top: 0px; }
  .project-info-container { width: auto; max-width: none; margin-top: 50px; }
}
@media screen and (max-width: 767px) {
  .section-content { padding-left: 3%; padding-right: 3%; }
  .section-logo { padding-top: 10px; }
  .content-block-right { padding: 10px; }
  .section-portfolio { padding-left: 3%; padding-right: 3%; }
  .flowbase-card-delete, .paragraph-hero-copy { display: none; }
  .benefits-section { padding-left: 3%; padding-right: 3%; }
  .terms-section, .areas-expertise-section, .section-team { padding-left: 3%; padding-right: 3%; }
  .services-block-right { padding: 10px; }
  .services-section { padding-left: 3%; padding-right: 3%; }
  .project-image { height: 320px; min-height: auto; max-height: none; }
  .right-arrow-2 { width: 70px; height: 70px; top: 250px; }
  .section-tag-container { margin-bottom: 40px; font-size: 10px; }
  .left-arrow-2 { justify-content: center; align-items: center; width: 70px; height: 70px; display: flex; top: 250px; }
  .slider-section-container { max-width: 500px; padding-top: 75px; }
  .link-arrow { width: 9px; height: 9px; }
  .project-link { font-size: 14px; }
  .logo-link-case-study { width: 100%; margin-bottom: 15px; }
}
@media screen and (max-width: 479px) {
  .header { height: auto; min-height: auto; max-height: none; padding-top: 25%; padding-bottom: 0px; }
  .content-wrap { justify-content: flex-start; align-items: flex-start; display: flex; }
  .heading { margin-bottom: 0px; font-size: 3ch; }
  .paragraph { max-width: 100%; }
  .paragraph.paragraph-centre-white { margin-bottom: 20px; font-size: 14px; }
  .paragraph.paragraph-centre-grey { margin-bottom: 0px; font-size: 2ch; line-height: 1.2; }
  .heading-2 { font-size: 2ch; line-height: 20px; }
  .hero-block { flex-direction: row; align-items: flex-end; height: auto; min-height: auto; margin-top: 0px; padding-top: 25vh; padding-bottom: 10px; }
  .image-block { padding: 8px; }
  .section-content { flex-flow: column; justify-content: flex-start; align-items: flex-start; padding-top: 0px; padding-bottom: 5%; display: flex; }
  .column-wrap-reversed { flex-flow: column wrap-reverse; margin-bottom: 0px; }
  .title { font-size: 1em; }
  .heading-primary { font-size: 3ch; }
  .heading-primary.h3-centre.white { margin-bottom: 10px; font-size: 3ch; }
  .heading-primary.h3-centre-white { margin-bottom: 20px; font-size: 2ch; line-height: 1.2; }
  .button-wrap-hero { flex-direction: column; align-items: center; display: flex; }
  .section-logo { padding-top: 0px; }
  .column-wrap { flex-flow: column; justify-content: flex-start; align-items: flex-start; }
  .hero-image-wrap { flex-flow: row; align-items: center; width: auto; height: 25vh; max-height: none; padding: 10px 30px 10px 10px; display: flex; position: absolute; inset: auto 0%; }
  .content-block-right { justify-content: flex-start; align-items: flex-start; display: flex; }
  .hero-content { flex-flow: row; flex: 1 1 0%; align-content: stretch; align-items: stretch; height: 100%; padding-top: 0px; display: flex; }
  .paragraph-hero { font-size: 16px; }
  .content-block-hero { padding-top: 0px; }
  .title-wrap { padding-top: 10px; padding-bottom: 10px; }
  .section-banner { border-radius: 0px; }
  .feature { flex-flow: column; justify-content: space-between; align-items: flex-start; padding-right: 0px; display: flex; }
  .hero-image { align-self: auto; width: auto; max-width: 100%; height: 200px; max-height: none; display: block; position: static; }
  .italic-text { font-size: 20px; }
  .benefits-section { border-radius: 0px; min-height: 100vh; padding-top: 20px; padding-bottom: 20px; }
  .icon-block { width: 50px; }
  .services-grid { grid-template-columns: 1fr; padding-bottom: 0px; }
  .lottie-animation { flex-direction: row; order: 0; justify-content: flex-start; align-self: flex-start; align-items: center; display: flex; }
  .container { flex-direction: column; max-width: 100%; max-height: 100%; padding-top: 0px; display: flex; }
  .logo-clean, .logo-clean-square { max-height: 35px; }
  .get-in-touch-button, .button-arrow-right { margin-bottom: 15px; margin-right: 0px; }
  .arrow-text { order: 0; justify-content: center; align-items: center; }
  .heading-arrow { max-width: 40%; }
  .container-clients { flex-direction: column; max-width: 100%; max-height: 100%; padding-top: 0px; display: flex; }
  .areas-expertise-section { padding-top: 5%; padding-bottom: 5%; }
  .outcome-item { font-size: 14px; line-height: 1.4; }
  .services-image-block { padding: 8px; }
  .services-block-left { padding-top: 0px; }
  .services-section { padding-top: 10vh; padding-bottom: 5%; }
  .project-image { height: 70vw; }
  .right-arrow-2 { margin-top: -70px; top: 70vw; }
  .section-tag-container { margin-bottom: 30px; }
  .left-arrow-2 { margin-top: -70px; top: 70vw; }
  .slider-section-container { padding-top: 60px; }
  .project-info-container { margin-left: 6vw; margin-right: 6vw; }
  .project-slider { max-width: 100vw; height: auto; margin-left: -6vw; margin-right: -6vw; }
  .button-case-study { margin-bottom: 15px; margin-right: 0px; }
  .button-wrap-case-study { flex-direction: column; align-items: center; display: flex; }
  .logo-link-case-study { max-height: 50px; margin-bottom: 0px; padding-top: 20px; padding-bottom: 20px; }
  .logo-container { flex-direction: column; max-width: 100%; max-height: 100%; padding-top: 0px; display: flex; }
}
#w-node-_0947ced8-d78b-e25e-5dce-71b104176403-10e95d51, #w-node-_603a0408-f4a7-900c-a493-4b1cb4f7a810-10e95d51, #w-node-_1ac52263-0c3d-f6f7-60d2-aab539e2edbb-8bd480fd, #w-node-ffa3e469-fb98-cec5-661d-5c23c0d38cf7-d8be7067, #w-node-_0947ced8-d78b-e25e-5dce-71b104176403-7dbbe78d, #w-node-_0947ced8-d78b-e25e-5dce-71b104176403-e4dc3f12 { place-self: auto; }
@supports (content-visibility:auto) {
  .section-content:not(:first-of-type), .process-section, .section-banner, .footer { content-visibility: auto; contain-intrinsic-size: 1px 900px; }
}