@font-face {
   font-family: "brockmannbold";
   src: url("../fonts/brockmann-bold-webfont.woff2") format("woff2"),
      url("../fonts/brockmann-bold-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: "brockmannsemibold";
   src: url("../fonts/brockmann-semibold-webfont.woff2") format("woff2"),
      url("../fonts/brockmann-semibold-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: "helvetica_neue_lt_std55_roman";
   src: url("../fonts/helveticaneueltstd-roman-webfont.woff2") format("woff2"),
      url("h../fonts/elveticaneueltstd-roman-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: "helveticaneueltstd-bd";
   src: url("../fonts/helveticaneueltstd-bd-webfont.woff2") format("woff2"),
      url("../fonts/helveticaneueltstd-bd-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

/* ============================ ? MOBILE-FIRST STRUCTURE AND BASE ============================ */
:root {
   --container-padding: 1.5rem;
   --section-padding-y: 2rem;
   --banner-padding-y: 1rem;
   --banner-padding-top-bottom: 1rem;
   --gap: 1rem;
   --spacer: 0.75rem;
   --rounded: 0.25rem;
   --yellow: #ffd700;
   --white: #ffffff;
   --dark: #222222;
   --black: #000000;
   --dark-rgb: 34, 34, 34;
   --black-rgb: 0, 0, 0;
   --white-rgb: 255, 255, 255;
   --max-content-width: 100%;
   --opacity-strong: 0.75;
   --opacity-weak: 0.25;
   --opacity-weaker: 0.1;
}
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font: inherit;
}
body {
   opacity: 0;
   transition: opacity 1s ease-in-out;
   background-color: var(--dark);
}

body.fade-in {
   opacity: 1;
}
html,
body {
   height: 100%;
   scroll-behavior: smooth;
   line-height: 1.5;
   font-family: "helvetica_neue_lt_std55_roman", sans-serif;
   min-width: 375px;
   overflow-x: hidden;
   font-size: 1rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
img,
picture,
video,
canvas,
svg {
   display: block;
   max-width: 100%;
}
input,
button,
textarea,
select {
   font: inherit;
}
a {
   text-decoration: none;
   color: inherit;
}
.content-wrapper {
   width: 100%;
   max-width: var(--max-content-width);
   margin-inline: auto;
   padding-inline: var(--container-padding);
   padding-block: var(--section-padding-y);
}
#clients .content-wrapper:first-of-type,
#team .content-wrapper:first-of-type {
   padding-bottom: 0;
}
#clients .content-wrapper:last-of-type {
   padding-top: 0;
   padding-left: 0;
   padding-right: 0;
}
.darkbg {
   background-color: var(--dark);
   color: var(--white);
}
.yellowbg {
   background-color: var(--yellow);
   color: var(--dark);
}
h1,
h2,
h3,
h5 {
   font-family: "brockmannsemibold", sans-serif;
   font-weight: normal;
   line-height: 1.2;
   color: var(--white);
}
h2,
h3,
h5 {
   color: var(--yellow);
}
.yellowbg h2,
.yellowbg h3,
.yellowbg h4 {
   color: var(--dark);
}
h1 {
   font-size: clamp(3rem, 8vw, 6rem);
   text-rendering: optimizeLegibility;
}
h3 {
   font-weight: 700;
   letter-spacing: -0.025em;
   margin-bottom: var(--gap);
   font-size: 2.5rem;
   text-align: left;
}

#team h3 {
   margin-bottom: 0;
}
h4 {
   font-size: 1.5rem;
   margin-bottom: 0;
}

h5 {
   font-size: 1.25rem;
   font-weight: 600;
   margin-bottom: calc(var(--gap) / 2);
}
.member-info h5 {
	margin-bottom: 0;
}
.testimonial h5 {
   color: var(--dark);
}
p,
blockquote {
   font-size: 1rem;
   line-height: 1.4;
   text-align: left;
   text-wrap: pretty;
   white-space: normal;
}
blockquote {
   margin-bottom: calc(var(--gap) / 2);
}
.member-info p {
   color: var(--white);
}
#contact p {
   margin-bottom: var(--gap);
}
.contact-text p {
   margin-bottom: 0 !important;
}
p.services-label {
   margin: 0;
}
.testimonial .attribution span {
   font-weight: 600;
}
.testimonial .attribution {
   text-align: right;
   color: var(--dark);
   margin-bottom: 0;
}
.overlay .headline {
   font-size: clamp(4.5rem, 10vw, 10rem);
   font-family: "brockmannsemibold", sans-serif;
   font-weight: 600;
   line-height: 1;
   color: var(--white);
   margin-bottom: var(--gap);
}
.overlay .subheading {
   font-size: clamp(1.5rem, 2.5vw, 2.5rem);
   color: var(--yellow);
   font-family: "brockmannsemibold", sans-serif;
   font-weight: 600;
   margin-bottom: calc(var(--gap) / 2);
}
.headline sup {
   font-size: 33%;
   position: relative;
   top: 0.33em;
   vertical-align: top;
}
.cta-button {
   font-family: "helveticaneueltstd-bd", sans-serif;
   background-color: var(--yellow);
   color: var(--dark);
   font-weight: 600;
   padding: calc(var(--gap) / 2) calc(var(--gap) / 1);
   border-radius: var(--rounded);
   transition: all 0.3s ease-in-out;
   display: inline-block;
   border: none;
   cursor: pointer;
}
.cta-button:hover {
   background-color: var(--white);
   color: var(--dark);
}
#footer .cta-button {
   background-color: transparent !important;
   color: var(--dark);
   padding: 0;
   border-radius: 0;
}
#footer .cta-button:hover {
   color: var(--white);
   background-color: transparent !important;
}



input:-webkit-autofill {
  background-color: var(--yellow) !important; /* Replace with your desired colour */
  -webkit-box-shadow: 0 0 0px 1000px var(--yellow) inset !important;
  -webkit-text-fill-color: var(--dark) !important; /* Optional: change text color */
}
input:-moz-autofill {
  background-color: var(--yellow) !important; /* Replace with your desired colour */
  color: var(--dark) !important; /* Optional: change text color */
}

/* ============================ HEADER BAR ============================ */

#header-bar {
   font-family: "helveticaneueltstd-bd", sans-serif;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-color: var(--dark);
   color: var(--white);
   z-index: 10;
   box-shadow: none;
   transform: translateY(-100%);
   transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.show-header-bar #header-bar {
   transform: translateY(0);
   box-shadow: 0 0px 16px rgba(var(--black-rgb), var(--opacity-weak));
}
#header-bar .content-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-inline: var(--container-padding);
   padding-block: var(--banner-padding-top-bottom);
}
.header-mask {
   width: 100%;
   height: 0;
   overflow: hidden;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-direction: row;
   transition: height 0.3s ease-in-out 0.3s;
}
.header-mask .badge {
   height: 30px;
   transform: translateY(100%);
   visibility: hidden;
   transition: transform 0.3s ease-in-out 0.3s, visibility 0s 0.3s;
}
.header-mask .cta-button {
   transform: translateY(100%);
   visibility: hidden;
   transition: transform 0.3s ease-in-out 0.3s, visibility 0s 0.3s;
}
.show-header-bar #header-bar .header-mask {
   height: 100%;
}
.show-header-bar #header-bar .badge,
.show-header-bar #header-bar .cta-button {
   transform: translateY(0);
   visibility: visible;
}

/* ============================ FOOTER ============================ */

#footer .content-wrapper {
   padding-block: var(--banner-padding-top-bottom);
}
#footer p {
   margin: 0;
}
#footer {
   flex-direction: row;
   justify-content: space-between;
}
.footer-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  gap: var(--gap);
	flex-direction:column-reverse;
}

.footer-top-row > div {
  flex: 1 1 33.3%;
}
/* Social section: keep everything inline */
.social-icons {
   display: flex;
   align-items: center;
   gap: 1rem;
   flex-wrap: wrap;
   flex-direction: row;
  justify-content: end;   /* Center icons + label horizontally */
  text-align: right;        /* Just in case */
}


/* Make icons clickable */
.social-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
}
.social-icon img {
   width: 24px;
   height: 24px;
   transition: transform 0.3s ease-in-out;
}
.social-icon img:hover {
   transform: scale(1.1);
}
.back-to-top-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   flex: 1;
}
.copyright {
   padding-top: var(--banner-padding-top-bottom-sm);
   text-align:left;
}

/* ============================ CONTACT FORM ============================ */

/* CONTACT SECTION */
#contact .content-wrapper {
   display: flex;
   flex-direction: column;
   gap: var(--gap);
}
.contact-text,
.contact-form {
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
}
/* FORM ROWS */
.contact-form .form-row {
   display: flex;
   flex-direction: column;
   width: 100%;
}
.contact-form .form-column {
   flex: 1 1 100%;
   min-width: 0;
   margin-bottom: var(--gap);
}
.form-column.full-width {
   margin-bottom: 0 !important;
}
/* INPUTS AND TEXTAREA */
.contact-form input,
.contact-form textarea {
   width: 100%;
   padding: 1rem;
   background-color: var(--white);
   border: 0;
   border-radius: var(--rounded);
   margin-top: 0.5rem;
   box-sizing: border-box;
}
.contact-form textarea {
   height: 200px;
}
.contact-form .form-actions {
   display: flex;
   align-items: stretch;
   margin-top: var(--gap);
   flex-direction: column-reverse;
   gap: var(--gap);
}

   
   
.contact-form .cta-button,
.contact-form .mandatory {
   width: 100%;
}
.spinner {
   width: 16px;
   height: 16px;
   border: 2px solid rgba(var(--dark-rgb), 1); /* light border */
   border-top-color: rgba(
      var(--white-rgb),
      var(--opacity-strong)
   ); /* solid top for spinner effect */
   border-radius: 50%;
   animation: spin 0.6s linear infinite;
   opacity: 1;
   transition: opacity 0.3s ease;
}
.submit-button.loading .spinner {
   opacity: 1;
   transform: scale(1);
}

.button-label {
   display: inline-flex;
   align-items: center;
   justify-content: center; /* optional: can use 'start' if you prefer */
   gap: calc(var(--gap) / 2); /* spacing between spinner and text */
}

.submit-button.loading .spinner {
   opacity: 1;
}
#form-feedback {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#form-feedback.visible {
   opacity: 1;
   visibility: visible;
}
#form-feedback.success,
#form-feedback.error {
   color: var(--white);
   width:100%;
}

.service-checkboxes {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: var(--gap);
}

.service-option {
   display: flex;
   align-items: center;
   height: 100%;
   width: 100%;
   gap: calc(var(--gap) / 2);
   padding: calc(var(--gap) / 2);
   text-align: left;
   border: 1px solid rgba(var(--white-rgb), var(--opacity-weak));
   border-radius: var(--rounded);
   cursor: pointer;
   transition: all 0.3s ease-in-out;
}

.service-checkbox {
   display: flex;
   align-items: stretch;
   justify-content: center;
   padding: 0;
   margin: 0;
}


.service-option input[type="checkbox"] {
   display: none;
}
.service-option img {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
}
input[type="checkbox"]:checked + .service-option {
   background-color: rgba(var(--white-rgb), var(--opacity-weaker));
}
fieldset.service-options {
   border: none;
   padding: 0;
   margin: 0;
}
.service-checkbox input[type="checkbox"] {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   border: 0;
   background: none;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   clip: rect(0 0 0 0);
   overflow: hidden;
   white-space: nowrap;
   position: relative;
}

/* ============================ SECTIONS ============================ */

/* ============================ HERO SECTION ============================ */

#hero {
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   background: var(--dark);
   min-height: 100vh;
}
#hero::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 25%;
   background: linear-gradient(to top, var(--dark), transparent);
   pointer-events: none;
   z-index: 1;
}
.hero-content {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   justify-content: flex-start;
}
.hero-banner {
   position: relative;
   z-index: 3;
   font-weight: bold;
   text-align: left;
   padding-block: var(--banner-padding-top-bottom);
}
.hero-banner .content-wrapper {
   padding-block: 0;
   text-align: left;
}
.logo {
   position: relative;
   z-index: 3;
   margin-bottom: var(--section-padding-y);
}
.logo img {
   height: 4.5rem;
   width: auto;
}
.overlay {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   text-align: left;
   gap: 0;
   padding-block: var(--section-padding-y);
   margin-top: auto;
   margin-bottom: auto;
}
#hero video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 0;
}
.hero-content > .hero-banner,
.hero-content > .logo,
.hero-content > .overlay {
   margin-block: 0;
}
.visually-hidden {
   position: absolute !important;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* ============================ SERVICES SECTION ============================ */

.services-grid {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   gap: var(--gap);
}
.service-box {
   position: relative;
   aspect-ratio: 1 / 1;
   overflow: hidden;
   background-color: var(--black);
}
.service-box > * {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.service-box .background-image {
   top: 0;
   left: 0;
   transform: none;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   z-index: 1;
}
.service-box .service-icon {
   height: 80px;
   width: auto;
   z-index: 3;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.service-box .service-text {
   z-index: 4;
   opacity: 0;
   transform: translate(-50%, calc(-50% + 20px));
   transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
   color: var(--white);
   padding: var(--gap);
   max-width: 100%;
   width: 100%;
   text-align: left;
   display: flex;
   flex-direction: column;
   align-items: left;
   justify-content: center;
}
.service-text p {
   text-align: left;
   margin: 0;
}
.service-box:hover .service-icon {
   transform: translate(-50%, -200%);
   opacity: 0;
}
.service-box:hover .service-text {
   opacity: 1;
   transform: translate(-50%, -50%);
}
.service-box:hover .service-icon,
.service-box.touched .service-icon {
   transform: translate(-50%, -200%);
   opacity: 0;
}
.service-box:hover .service-text,
.service-box.touched .service-text {
   opacity: 1;
   transform: translate(-50%, -50%);
}
.service-box::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 50%;
   height: 50%;
   background-color: rgba(var(--dark-rgb), var(--opacity-strong));
   border-radius: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   opacity: 0;
   transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
      opacity 0.3s ease-in-out;
   pointer-events: none; /* ensures it doesn't block interactions */
}

.service-box:hover::before,
.service-box.touched::before {
   width: 200%;
   height: 200%;
   opacity: 1;
}

/* ============================ CLIENT SECTION ============================ */

.clients-grid {
   display: flex;
   overflow: hidden;
   white-space: nowrap;
   max-width: 100%;
}
.clients-grid-scroll {
   overflow-x: auto;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   white-space: nowrap;
}
.clients-track {
   display: flex;
   animation: scroll-logos 60s linear infinite;
   width: max-content;
   gap: var(--gap);
}
.clients-grid:hover .clients-track,
.clients-grid:active .clients-track {
   animation-play-state: paused;
}
.client-box {
   flex: 0 0 auto;
   width: 50vw;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--rounded);
}
.client-box-inner {
    width: 100%;
    height: 100%;
    padding: var(--gap);
    transition: background-color 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
.client-box-inner:hover {
    background-color: rgba(var(--white-rgb), var(--opacity-strong));
    border-radius: var(--rounded-md);
}
.client-logo-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.client-logo-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    position: absolute;
    max-height: 120px;
}
.client-logo-wrapper .white {
    position: relative;
    z-index: 2;
    opacity: 1;
}
.client-logo-wrapper .colour {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0;
}
.client-box.active .client-logo-wrapper .white,
.client-box.active .white {
    opacity: 0 !important;
}
.client-box.active .client-logo-wrapper .colour,
.client-box.active .colour {
    opacity: 1 !important;
}
.clients-grid.paused .clients-track {
    animation-play-state: paused !important;
}
.clients-grid-scroll {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.clients-grid-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* ============================ CASE SECTION ============================ */

.case-grid-custom {
   display: flex;
   flex-direction: column;
   gap: 2rem;
   width: 100%;
}

.case-item {
   width: 100%;
   aspect-ratio: auto; /* Let content define height */
   position: relative;
   overflow: hidden;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   margin-bottom: var(--gap);
}

.case-grid-custom .testimonial {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.4s ease-in-out;
   background-color: var(--yellow);
   padding: var(--gap);
   border-radius: var(--rounded);
   z-index: 2;
   color: var(--dark);
   box-sizing: border-box;
   width: 100%;
   max-width: calc(100% - (var(--gap)*2)); /* Prevents overflow on smaller screens */
   display: inline-block;
   text-align: left;
}

.case-grid-custom .case-item:hover .testimonial {
   opacity: 1;
   pointer-events: all;
}

.case-item::before {
   content: "";
   position: absolute;
   inset: 0;
   background-color: rgba(var(--dark-rgb), 0);
   transition: background-color 0.3s ease-in-out;
   z-index: 1;
}

.case-item:hover:before {
   background-color: rgba(var(--dark-rgb), var(--opacity-strong));
}

/* ============================ TEAM SECTION ============================ */

.square-box {
   width: 16rem;
   aspect-ratio: 1 / 1;
   background: var(--dark);
   position: relative;
   overflow: visible;
}

/* Carousel Base */
.team-carousel-wrapper {
   position: relative;
   display: flex;
   align-items: center;
}

.team-carousel {
   flex-grow: 1;
   overflow-x: auto;
   scroll-behavior: smooth;
   -ms-overflow-style: none;
   scrollbar-width: none;
   scroll-snap-type: x mandatory;
}

.team-carousel::-webkit-scrollbar {
   display: none;
}

.team-track {
   display: flex;
   gap: var(--gap);
   width: max-content;
   overflow: visible;
   margin-top: var(--gap);
   margin-bottom: var(--gap);
   padding-left: var(--container-padding);
   padding-right: var(--container-padding);
}

/* Team Member */
.team-member {
   aspect-ratio: 1 / 1;
   width: 100%;
   max-width: 100%;
   background: var(--dark);
   position: relative;
   overflow: visible;
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   scroll-snap-align: center;
}

/* Image Presentation */
.image-clip-wrapper {
   width: 100%;
   height: 100%;
   overflow: visible;
   position: relative;
   clip-path: inset(-2rem 0 0 0);
}

.image-wrapper {
   position: relative;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.normal-img {
   bottom: 0;
   transform: translateY(1.5rem);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
   z-index: 3;
   opacity: 1;
   filter: none;
}

/* Member Info Overlay */
.team-member .member-info {
   opacity: 1;
   transition: opacity 0.4s ease-in-out;
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   background: rgba(var(--dark-rgb), var(--opacity-strong));
   padding: calc(var(--gap) / 2);
   z-index: 4;
   width: 100%;
}

/* Arrows - hidden by default */
.arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(var(--dark-rgb), var(--opacity-strong));
   border: none;
   cursor: pointer;
   z-index: 10;
   padding: var(--gap);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
   border-radius: var(--rounded);
}

.arrow img {
   width: 16px;
   height: 16px;
}

.arrow.show {
   opacity: 1;
   visibility: visible;
}

.left-arrow {
   left: calc(var(--container-padding) / 2);
}

.right-arrow {
   right: calc(var(--container-padding) / 2);
}

.carousel-progress {
   width: 100%;
   display: flex;
   justify-content: center;
   padding-bottom: var(--section-padding-y);
}

.carousel-progress-track {
   display: none;
}

.carousel-scroll-thumb {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 30%;
   background: var(--dark);
   border-radius: 0.5rem;
   cursor: grab;
   transition: background 0.3s ease-in-out;
}

.carousel-scroll-thumb:active {
   cursor: grabbing;
}

/* CASE STUDIES */

.case-grid-custom {
   display: block;
   width: 100%;
   height: auto;
}

.left-column,
.top-row,
.bottom-row,
.right-column {
   display: block;
   width: 100%;
}

.left-column .case-item {
   aspect-ratio: 1 / 1;
   width: 100%;
}
.right-column .case-item {
   width: 100%;
   aspect-ratio: 1 / 1;
   margin-bottom: var(--gap);
}
.case-grid-custom .right-column .case-item:last-child {
   margin-bottom: 0;
}

.team-carousel {
   touch-action: pan-x;
   overscroll-behavior-x: contain;
   overscroll-behavior-y: none;
}

@media (min-width: 480px) {
   :root {
      --container-padding: 2rem;
      --banner-padding-y: 1.25rem;
      --gap: 1.25rem;
   }
   .form-row.service-options {
      flex-direction: column;
   }
   .service-checkboxes {
      grid-template-columns: repeat(2, 1fr);
   }
}
@media (min-width: 768px) {
   :root {
      --container-padding: 3rem;
      --banner-padding-y: 1.5rem;
      --gap: 1.5rem;
   }
   #contact h3 {
   max-width: 25ch;
}
h4 {
   max-width: 58ch;
}
p,
blockquote {
   max-width: 50ch;
}
.service-box .service-text {
   text-align: center;
   align-items: center;
}
.service-text p {
   text-align: center;
}
.case-grid-custom .testimonial {
   width: auto;
}
   .content-wrapper,
   #clients .content-wrapper:last-of-type {
      padding-inline: var(--container-padding);
      padding-block: var(--section-padding-y);
   }
   .logo img {
   height: 5rem;
}
.footer-top-row {
    flex-wrap: nowrap;
    text-align: left;
	flex-direction:row;
  }

  .copyright {
    text-align: left;
    justify-content: flex-start;
    display: flex;
    align-items: center;
  }

.social-icons {
  justify-content: center;   /* Center icons + label horizontally */
  text-align: center;        /* Just in case */
}

  .back-to-top-wrapper {
    justify-content: flex-end;
    align-items: center;
  }   
  
  
  
  #contact p {
      max-width: 45ch;
   }
   #clients .content-wrapper:last-of-type {
      padding-top: 0;
   }
   .client-logo-wrapper img {
      width: auto;
      max-height: 80px;
   }
   .contact-form .form-row {
      flex-direction: row;
      flex-wrap: nowrap;
      gap: var(--gap);
   }
   .contact-form .form-row.service-options {
      flex-direction: column;
      gap: unset;
   }
   .contact-form .form-actions {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: var(--gap);
      margin-top: var(--gap);
      flex-direction: row;
      justify-content: end;
   }




   .hero-banner {
      text-align: center;
   }
   .hero-banner .content-wrapper {
      text-align: center;
   }
   #statement h3,
   #statement h4 {
      text-align: center !important;
      margin-inline: auto;
   }
   .services-grid {
      grid-template-columns: repeat(2, 1fr);
   }
   #footer {
      flex-direction: row;
      justify-content: space-between;
   }
   .clients-grid {
      display: block;
      white-space: normal;
      overflow: visible;
   }
   .clients-track {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
      animation: none;
      width: 100%;
   }
   .client-box {
      width: 100%;
      flex: initial;
   }

   .contact-form .cta-button,
   .contact-form .mandatory {
      width: auto;
   }
   .left-arrow {
      left: var(--gap);
   }

   .right-arrow {
      right: var(--gap);
   }

   .carousel-progress-track {
      display: block;
      width: 25vw;
      height: 0.75rem;
      background: var(--white);
      border-radius: 0.5rem;
      position: relative;
      overflow: hidden;
      cursor: pointer;
   }
   
   .team-member .member-info {
      width: auto;
   }
}
@media (min-width: 1200px) {
   :root {
      --container-padding: 4rem;
      --gap: 2rem;
   }
   .services-grid {
      grid-template-columns: repeat(3, 1fr);
   }
   .clients-track {
      grid-template-columns: repeat(6, 1fr);
   }
   #contact .content-wrapper {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: flex-start;
   }
   .contact-text {
      flex: 1 1 40%;
      max-width: 40%;
   }
   .contact-form {
      flex: 1 1 60%;
      max-width: 60%;
   }
   .case-grid-custom {
      display: grid;
      grid-template-rows: repeat(1, 1fr);
      gap: 0;
   }

   .case-grid-custom .top-row,
   .case-grid-custom .bottom-row,
   .case-grid-custom .right-column {
      display: contents;
   }

   .case-grid-custom .top-row {
      display: grid;
      grid-template-columns: 60% 40%;
      width: 100%;
   }

   .case-grid-custom .bottom-row {
      display: grid;
      grid-template-columns: 40% 60%;
      width: 100%;
   }

   .case-grid-custom .right-column {
      display: grid;
      grid-template-columns: 60% 40%;
      width: 100%;
   }

   .case-grid-custom .case-item {
      width: 100%;
      height: 100%;
      aspect-ratio: 16 / 9;
      position: relative;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      align-items: stretch;
      margin-bottom: 0;
   }
   .left-column .case-item {
      aspect-ratio: 16 / 9;
   }
}
@media (min-width: 1440px) {
   :root {
      --container-padding: 6rem;
   }
   .service-checkboxes {
      grid-template-columns: repeat(3, 1fr);
   }
   
  /* 
   .case-grid-custom {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 0;
   }
   .case-grid-custom .left-column {
      display: grid;
      grid-template-rows: repeat(2, auto);
      gap: 0;
   }

   .case-grid-custom .top-row {
      display: grid;
      grid-template-columns: 60% 40%;
      gap: 0;
   }

   .case-grid-custom .bottom-row {
      display: grid;
      grid-template-columns: 40% 60%;
      gap: 0;
   }

   .case-grid-custom .right-column {
      display: grid;
      grid-template-rows: 3fr 2fr;
      grid-template-columns: 1fr; 
      gap: 0;
   }

   .case-grid-custom .case-item {
      aspect-ratio: 16 / 9;
      height: 100%;
   }

   .case-grid-custom .case-item::before {
      content: "";
      position: absolute;
      inset: 0;
      background-color: rgba(var(--dark-rgb), 0);
      transition: background-color 0.3s ease-in-out;
      z-index: 1;
      display: block;
   }

   .case-grid-custom .case-item:hover::before {
      background-color: rgba(var(--dark-rgb), var(--opacity-strong));
   } */
}
@media (min-width: 1600px) {
   :root {
      --container-padding: 0;
      --max-content-width: 1440px;
   }

   .team-track {
      padding-left: calc((100vw - 1440px) / 2);
      padding-right: calc((100vw - 1440px) / 2);
   }
}

@media (hover: hover) and (pointer: fine) {
   .team-member .member-info {
      opacity: 0;
   }
   .team-member .image-wrapper {
      transform: translate(0, 0);
      transition: transform 0.3s ease-in-out;
   }

   .team-member:hover .image-wrapper {
      transform: translate(0.625rem, -1.25rem);
   }

   .team-member .normal-img {
      transform: scale(1);
      transform-origin: top center;
      filter: none;
   }

   .team-member:hover .normal-img {
      transform: scale(1.05);
      filter: grayscale(1) !important;
   }

   .team-member:hover .member-info {
      opacity: 1;
   }
   .client-box:hover .white {
      opacity: 0 !important;
   }

   .client-box:hover .colour {
      opacity: 1 !important;
   }
   .service-option:hover {
   background: rgba(var(--white-rgb), var(--opacity-weak));
}
}
/* ANIMATIONS / MISC INTERACTIONS */
@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}
@media (hover: none), (pointer: coarse) {
   .client-box:active .colour {
      opacity: 1;
   }
   .client-box:active .white {
      opacity: 0;
   }
}
@keyframes scroll-logos {
   0% {
      transform: translateX(0%);
   }
   100% {
      transform: translateX(-50%);
   }
}