/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
  /* brand palette: primary */
  --primary-100: #F0FDFA;
  --primary-200: #CBFBF1;
  --primary-300: #CBFBF1;
  --primary-400: #96F7E4;
  --primary-500: #46ECD5;
  --primary-600: #00D5BE;
  --primary-700: #00BBA7;
  --primary-800: #009689;
  --primary-900: #005F5A;
  --primary-1000: #0B4F4A;
  --primary-10: #000;

  /* brand palette: neutral */
  --neutral-100: #fff;
  --neutral-200: #f4f4f4;
  --neutral-300: #e3e3e3;
  --neutral-400: #c6c6c6;
  --neutral-500: #8e8e8e;
  --neutral-600: #717171;
  --neutral-700: #555;
  --neutral-800: #393939;
  --neutral-900: #1c1c1c;
  --neutral-1000: #000;

  /* semantic text and link tokens */
  --text-primary: #1D1D1F;
  --text-secondary: #86868B;
  --text-disabled: #6d6d6d;
  --text-link: #494949;
  --link-default: #00786F;
  --link-hover: #005F5A;
  --link-focus: #005F5A;
  --link-active: #005F5A;

  /* status colors */
  --status-red-100: #fb3748;
  --status-red-200: #d40016;
  --status-yellow-100: #ffdb43;
  --status-yellow-200: #dfb400;
  --status-green-100: #84e8b4;
  --status-green-200: #1fc16b;

  /* semantic aliases used across components */
  --background-color: var(--neutral-100);
  --light-color: var(--primary-100);
  --dark-color: var(--neutral-800);
  --text-color: var(--text-primary);
  --link-color: var(--link-default);
  --link-hover-color: var(--link-hover);
  --link-focus-color: var(--link-focus);
  --link-active-color: var(--link-active);
  --border-color: var(--neutral-300);

  /* spacing scale */
  --space-0: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 96px;
  --space-10: 112px;
  --space-11: 120px;

  /* radius scale */
  --radius-none: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 8px;
  --radius-5: 10px;
  --radius-6: 12px;
  --radius-7: 16px;
  --radius-full: 999px;

  /* stroke scale */
  --stroke-none: 0;
  --stroke-1: 1px;
  --stroke-2: 2px;
  --stroke-3: 3px;
  --stroke-4: 4px;

  /* effects scale */
  --effect-e0: none;
  --effect-e1: 0 1px 2px rgb(28 28 28 / 10%), 0 2px 4px rgb(28 28 28 / 8%);
  --effect-e2: 0 4px 10px rgb(28 28 28 / 14%), 0 2px 4px rgb(28 28 28 / 10%);
  --effect-e3: 0 8px 24px rgb(28 28 28 / 18%), 0 4px 8px rgb(28 28 28 / 12%);

  /* typography */
  --font-weight-light: 300;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --letter-spacing-none: 0;
  --body-font-family: outfit, outfit-fallback, sans-serif;
  --heading-font-family: outfit, outfit-fallback, sans-serif;
  --link-font-family: outfit, outfit-fallback, sans-serif;
  --body-font-weight: var(--font-weight-light);
  --heading-font-weight: var(--font-weight-medium);
  --display-font-weight: var(--font-weight-semibold);
  --link-font-weight: var(--font-weight-medium);
  --body-line-height: 1.5;
  --display-line-height: 1.1;
  --heading-line-height-tight: 1.1;
  --heading-line-height-regular: 1.2;
  --heading-line-height-loose: 1.5;
  --link-line-height: 1.33;

  /* body scale */
  --body-font-size-xxxl: 24px;
  --body-font-size-xxl: 20px;
  --body-font-size-xl: 18px;
  --body-font-size-l: 16px;
  --body-font-size-m: 14px;
  --body-font-size-s: 12px;
  --body-font-size-xs: 12px;

  /* heading scale */
  --display-font-size: 48px;
  --heading-font-size-xxl: 40px;
  --heading-font-size-xl: 34px;
  --heading-font-size-l: 30px;
  --heading-font-size-m: 24px;
  --heading-font-size-s: 20px;
  --heading-font-size-xs: 18px;

  /* link scale */
  --link-font-size-xl: 16px;
  --link-font-size-l: 14px;
  --link-font-size-m: 14px;

  /* nav height */
  --nav-height: 72px;

  /* shared layout rails */
  --content-max-width: 1276px;
  --content-inline-padding: var(--space-5);

  /* setupSlider (scripts/slider.js) — shared with block carousels & insights-listing pagination */
  --slider-transform-duration: 300ms;
  --slider-transform-easing: ease;
  --slider-track-gap: var(--space-2);
  --slider-controls-gap: 11px;
  --slider-nav-size: 48px;

  /* Light / default surface */
  --slider-nav-border: 1px solid var(--neutral-200);
  --slider-nav-color: var(--link-default);
  --slider-nav-bg: transparent;
  --slider-nav-border-hover: 1px solid var(--neutral-200);
  --slider-nav-bg-hover: var(--primary-1000);
  --slider-nav-color-hover: var(--neutral-100);
  --slider-nav-border-disabled: 1px solid var(--neutral-200);
  --slider-nav-bg-disabled: transparent;
  --slider-nav-disabled-opacity: 0.3;

  /* Same arrow glyph as .with-arrow (links / buttons) */
  --arrow-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M12.175 9H0V7H12.175L6.575 1.4L8 0L16 8L8 16L6.575 14.6L12.175 9Z" fill="black"/></svg>');
  --arrow-mask-size: 16px;
}

/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
  font-family: outfit-fallback;
  size-adjust: 97%;
  src: local('Arial');
}

@media (width >=600px) {
  :root {
    --display-font-size: 64px;
  }
}

@media (width >=900px) {
  :root {
    /* body scale */
    --body-font-size-xxxl: 24px;
    --body-font-size-xxl: 20px;
    --body-font-size-xl: 18px;
    --body-font-size-l: 16px;
    --body-font-size-m: 14px;
    --body-font-size-s: 12px;
    --body-font-size-xs: 12px;

    /* heading scale */
    --display-font-size: 72px;
    --heading-font-size-xxl: 48px;
    --heading-font-size-xl: 40px;
    --heading-font-size-l: 34px;
    --heading-font-size-m: 28px;
    --heading-font-size-s: 24px;
    --heading-font-size-xs: 20px;

    /* link scale */
    --link-font-size-xl: 18px;
    --link-font-size-l: 16px;
    --link-font-size-m: 14px;

    /* shared layout rails */
    --content-inline-padding: var(--space-8);
  }
}

@media (width >=1400px) {
  :root {
    --display-font-size: 90px;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  font-size: var(--body-font-size-m);
  line-height: var(--body-line-height);
  letter-spacing: var(--letter-spacing-none);
}

body.appear {
  display: block;
}

/* ==========================================================================
   setupSlider shared (who-are-we, case-studies, service-packages, meet-the-team,
   insights-listing pagination)
   ========================================================================== */

/* Shared slider contract — blocks opt in by using these generic classes */
.slider-shell,
main .who-are-we .who-are-we-media,
main .case-studies .case-studies-mobile-slider,
main .service-packages .service-packages-slider,
main .meet-the-team .meet-the-team-slider {
  display: flex;
  flex-direction: column;
  gap: var(--slider-track-gap);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.slider-viewport,
main .who-are-we .who-are-we-media-viewport,
main .case-studies .case-studies-mobile-viewport,
main .service-packages .service-packages-viewport,
main .meet-the-team .meet-the-team-viewport {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
}

.slider-track,
main .who-are-we .who-are-we-media-track,
main .case-studies .case-studies-mobile-track,
main .service-packages .service-packages-track,
main .meet-the-team .meet-the-team-track {
  display: flex;
  width: max-content;
  gap: var(--slider-track-gap);
  transition: transform var(--slider-transform-duration) var(--slider-transform-easing);
}

.slider-controls,
main .who-are-we .who-are-we-controls,
main .case-studies .case-studies-mobile-controls,
main .service-packages .service-packages-controls,
main .meet-the-team .meet-the-team-controls {
  display: flex;
  gap: var(--slider-controls-gap);
}

/* Dark surface (who-are-we hero strip) */
main .who-are-we .who-are-we-controls {
  --slider-nav-border: 1px solid rgb(244 244 244 / 50%);
  --slider-nav-color: var(--neutral-100);
  --slider-nav-bg: transparent;
  --slider-nav-border-hover: 1px solid var(--neutral-200);
  --slider-nav-bg-hover: var(--neutral-100);
  --slider-nav-color-hover: var(--link-default);
  --slider-nav-border-disabled: 1px solid var(--neutral-200);
  --slider-nav-bg-disabled: transparent;
  --slider-nav-disabled-opacity: 0.3;
}

main .who-are-we .who-are-we-controls[hidden],
main .case-studies .case-studies-mobile-controls[hidden],
main .service-packages .service-packages-controls[hidden],
main .meet-the-team .meet-the-team-controls[hidden] {
  display: none;
}

main .who-are-we .who-are-we-control,
main .case-studies .case-studies-mobile-control-prev,
main .case-studies .case-studies-mobile-control-next,
main .service-packages .service-packages-control,
main .meet-the-team .meet-the-team-control,
main .insights-listing .insights-listing-page-control-prev,
main .insights-listing .insights-listing-page-control-next,
main .insights-listing .insights-listing-page-number {
  box-sizing: border-box;
  width: var(--slider-nav-size);
  height: var(--slider-nav-size);
  margin: 0;
  border: var(--slider-nav-border);
  border-radius: var(--radius-none);
  background: var(--slider-nav-bg);
  color: var(--slider-nav-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

main .who-are-we .who-are-we-control:disabled,
main .case-studies .case-studies-mobile-control-prev:disabled,
main .case-studies .case-studies-mobile-control-next:disabled,
main .service-packages .service-packages-control:disabled,
main .meet-the-team .meet-the-team-control:disabled,
main .insights-listing .insights-listing-page-control-prev:disabled,
main .insights-listing .insights-listing-page-control-next:disabled,
main .insights-listing .insights-listing-page-number:disabled {
  opacity: var(--slider-nav-disabled-opacity);
  cursor: default;
  border: var(--slider-nav-border-disabled);
  background: var(--slider-nav-bg-disabled);
}

main .who-are-we .who-are-we-control:hover:not(:disabled),
main .who-are-we .who-are-we-control:focus-visible:not(:disabled),
main .case-studies .case-studies-mobile-control-prev:hover:not(:disabled),
main .case-studies .case-studies-mobile-control-prev:focus-visible:not(:disabled),
main .case-studies .case-studies-mobile-control-next:hover:not(:disabled),
main .case-studies .case-studies-mobile-control-next:focus-visible:not(:disabled),
main .service-packages .service-packages-control:hover:not(:disabled),
main .service-packages .service-packages-control:focus-visible:not(:disabled),
main .meet-the-team .meet-the-team-control:hover:not(:disabled),
main .meet-the-team .meet-the-team-control:focus-visible:not(:disabled),
main .insights-listing .insights-listing-page-control-prev:hover:not(:disabled),
main .insights-listing .insights-listing-page-control-prev:focus-visible:not(:disabled),
main .insights-listing .insights-listing-page-control-next:hover:not(:disabled),
main .insights-listing .insights-listing-page-control-next:focus-visible:not(:disabled),
main .insights-listing .insights-listing-page-number:hover:not(:disabled),
main .insights-listing .insights-listing-page-number:focus-visible:not(:disabled) {
  border: var(--slider-nav-border-hover);
  background: var(--slider-nav-bg-hover);
  color: var(--slider-nav-color-hover);
}

main .who-are-we .who-are-we-control::after,
main .case-studies .case-studies-mobile-control-prev::after,
main .case-studies .case-studies-mobile-control-next::after,
main .service-packages .service-packages-control::after,
main .meet-the-team .meet-the-team-control::after,
main .insights-listing .insights-listing-page-control-prev::after,
main .insights-listing .insights-listing-page-control-next::after {
  content: '';
  width: var(--arrow-mask-size);
  height: var(--arrow-mask-size);
  flex-shrink: 0;
  background-color: currentcolor;
  mask-image: var(--arrow-mask-image);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

main .who-are-we .who-are-we-control-prev::after,
main .case-studies .case-studies-mobile-control-prev::after,
main .service-packages .service-packages-control-prev::after,
main .meet-the-team .meet-the-team-control-prev::after,
main .insights-listing .insights-listing-page-control-prev::after {
  transform: rotate(180deg);
}

main .insights-listing .insights-listing-page-number.is-active {
  border: var(--slider-nav-border-hover);
  background: var(--slider-nav-bg-hover);
  color: var(--slider-nav-color-hover);
}

/* ==========================================================================
   Layout
   ========================================================================== */

header {
  height: var(--nav-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

main>div {
  margin: var(--space-5) var(--content-inline-padding);
}

.has-page-lines>div {
  position: relative;
}

main>.section {
  margin: 0;
}

/* First section after main extends under the sticky header */
main>.section:first-child,
main>div:first-child {
  margin-top: calc(-1 * var(--nav-height));
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  font-weight: var(--heading-font-weight);
  letter-spacing: var(--letter-spacing-none);
  scroll-margin-top: calc(var(--nav-height) + var(--space-1));
}

h1 {
  font-size: var(--display-font-size);
  line-height: var(--heading-line-height-tight);
}

h2 {
  font-size: var(--heading-font-size-xl);
  line-height: var(--heading-line-height-tight);
}

h3 {
  font-size: var(--heading-font-size-l);
  line-height: var(--heading-line-height-regular);
}

h4 {
  font-size: var(--heading-font-size-m);
  line-height: var(--heading-line-height-regular);
}

h5 {
  font-size: var(--heading-font-size-s);
  line-height: var(--heading-line-height-regular);
}

h6 {
  font-size: var(--heading-font-size-xs);
  line-height: var(--heading-line-height-loose);
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--body-font-size-xl);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--letter-spacing-none);
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  background-color: var(--primary-100);
  white-space: pre;
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  border: var(--stroke-1) solid rgb(255 255 255 / 12%);
  border-left: var(--stroke-3) solid var(--primary-800);
  font-family: ui-monospace, sfmono-regular, menlo, monaco, consolas, 'Liberation Mono', 'Courier New', monospace;
  border-radius: var(--radius-3);
  padding: var(--space-3);
  color: var(--text-primary);
  box-shadow: var(--effect-e2);
  overflow-x: auto;
}

blockquote {
  margin: var(--space-3) 0;
  border-left: var(--stroke-2) solid var(--primary-800);
  padding: var(--space-2);
  background-color: #eaf3f3;
  color: var(--neutral-900);
  font-size: var(--body-font-size-xl);
  font-style: normal;
  font-weight: var(--font-weight-light);
  line-height: 1.45;
  letter-spacing: var(--letter-spacing-none);
}

blockquote p {
  margin: 0;
  font: inherit;
}

@media (width >=900px) {
  blockquote {
    padding: var(--space-2) var(--space-3);
    font-size: var(--body-font-size-xxl);
  }
}

input,
textarea,
select,
button {
  font: inherit;
}

/* ==========================================================================
   Links
   ========================================================================== */
a:any-link {
  font-size: var(--link-font-size-m);
  font-weight: var(--link-font-weight);
  line-height: var(--link-line-height);
  letter-spacing: var(--letter-spacing-none);
  color: var(--link-color);
  text-decoration: none;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

a:focus-visible {
  color: var(--link-focus-color);
}

a:active {
  color: var(--link-active-color);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

a:any-link:not(.button) {
  color: var(--primary-900);
  text-decoration: none;
  transition: color 160ms ease;
  font-size: var(--link-font-size-l);
  font-weight: var(--font-weight-medium);
  line-height: var(--link-line-height);
}

a:any-link:not(.button):hover,
a:any-link:not(.button):focus-visible,
a:any-link:not(.button):active {
  color: var(--primary-1000);
}

a.button:any-link,
button {
  display: inline-block;
  border: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--link-font-size-xl);
  font-weight: var(--link-font-weight);
  line-height: var(--link-line-height);
  text-decoration: none;
  color: var(--neutral-100);
  transition:
    background-size 280ms ease,
    color 220ms ease;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.button:any-link,
.button {
  display: inline-flex;
  border: 1px solid var(--primary-900);
  background-color: var(--primary-900);
  background-image: linear-gradient(var(--primary-1000), var(--primary-1000));
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 0 100%;
}

a.button.small:any-link,
button.small {
  padding: var(--space-2) var(--space-3);
}

a.button.with-arrow:any-link,
a.with-arrow:any-link,
button.with-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

a.button.with-arrow:any-link::after,
a.with-arrow:any-link::after,
button.with-arrow::after,
main .insights-listing .insights-listing-search-button::after {
  content: '';
  width: var(--arrow-mask-size);
  height: var(--arrow-mask-size);
  flex-shrink: 0;
  background-color: currentcolor;
  mask-image: var(--arrow-mask-image);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

a.button:hover,
a.button:focus,
button:hover,
button:focus {
  background-size: 100% 100%;
}

a.button:active,
button:active {
  box-shadow: var(--effect-e1);
}

button:disabled,
button:disabled:hover {
  background-color: var(--light-color);
  cursor: unset;
}

a.button.secondary,
button.secondary {
  background-color: unset;
  color: var(--neutral-100);
  background-image: linear-gradient(var(--primary-200), var(--primary-200));
  background-size: 0 100%;
  border: 1px solid rgb(232 232 232 / 5%);
}

a.button.white,
button.white {
  background-color: var(--neutral-100);
  background-image: linear-gradient(var(--primary-200), var(--primary-200));
  color: var(--link-default);
}

a.button.secondary:hover,
button.secondary:hover {
  color: var(--link-default);
  background-size: 100% 100%;
}

a.button.white:hover,
button.white:hover {
  color: var(--link-hover-color);
  background-size: 100% 100%;
}

/* ==========================================================================
   Media & Icons
   ========================================================================== */

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: var(--space-3);
  width: var(--space-3);
}

.icon img {
  height: 100%;
  width: 100%;
}

/* ==========================================================================
   Sections
   ========================================================================== */

main>.section[data-background][data-background] {
  background: var(--section-background);
}

main>.section>div {
  max-width: calc(var(--content-max-width) + var(--content-inline-padding) * 2);
  box-sizing: border-box;
  margin: auto;
  padding: 0 var(--content-inline-padding);
}

main[data-background] {
  background: var(--main-background);
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
  margin: 0;
  padding: var(--space-5) 0;
}

main>.section:first-child {
  margin-bottom: 0;
}

.has-page-lines {
  --page-lines-color: rgb(244 244 244 / 5%);

  position: relative;
}

.has-page-lines::before {
  --page-lines-outer-width: min(calc(var(--content-max-width) + (2 * var(--content-inline-padding))),
      100%);
  --page-lines-inner-width: calc(var(--page-lines-outer-width) - (2 * var(--content-inline-padding)));
  --page-lines-left: calc(((100% - var(--page-lines-outer-width)) / 2) + var(--content-inline-padding) + var(--page-lines-offset, 0px));
  --page-lines-step: calc(var(--page-lines-inner-width) / 4);

  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: none;
  background-repeat: no-repeat;
}

.has-page-lines:not(.hero-lines)::before {
  background-size: 1px 100%;
  background-image:
    linear-gradient(var(--page-lines-color), var(--page-lines-color)),
    linear-gradient(var(--page-lines-color), var(--page-lines-color)),
    linear-gradient(var(--page-lines-color), var(--page-lines-color)),
    linear-gradient(var(--page-lines-color), var(--page-lines-color)),
    linear-gradient(var(--page-lines-color), var(--page-lines-color));
  background-position:
    calc(var(--page-lines-left) + (0 * var(--page-lines-step))) 0,
    calc(var(--page-lines-left) + (1 * var(--page-lines-step))) 0,
    calc(var(--page-lines-left) + (2 * var(--page-lines-step))) 0,
    calc(var(--page-lines-left) + (3 * var(--page-lines-step))) 0,
    calc(var(--page-lines-left) + (4 * var(--page-lines-step))) 0;
}

/* .has-page-lines.hero-lines: 2nd column to break, full-width horizontal, last column to bottom */
.has-page-lines.hero-lines {
  --hero-lines-break: 254px;
}

.has-page-lines.hero-lines::before {
  background-image:
    linear-gradient(var(--page-lines-color), var(--page-lines-color)),
    linear-gradient(var(--page-lines-color), var(--page-lines-color)),
    linear-gradient(var(--page-lines-color), var(--page-lines-color));
  background-size:
    1px var(--hero-lines-break),
    100% 1px,
    1px calc(100% - var(--hero-lines-break));
  background-position:
    calc(var(--page-lines-left) + (1 * var(--page-lines-step))) 0,
    0 var(--hero-lines-break),
    calc(var(--page-lines-left) + (4 * var(--page-lines-step))) var(--hero-lines-break);
  background-repeat: no-repeat;
}

@media (width >=900px) {
  a.button:any-link,
  button {
    padding: var(--space-3);
  }

  .has-page-lines::before {
    display: block;
  }
}

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}