/*
 Based on TailwindCSS recommendations,
 consider using classes instead of the `@apply` directive
 @see https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction
*/

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
 ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: currentColor;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:root {
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  font-family: DM Sans, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(32 40 40 / var(--tw-text-opacity, 1));
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* Layout shell */

.container-main {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1280px) {
  .container-main {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container-main {
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* Header and navigation */

.overlay {
  position: fixed;
  inset: 0px;
  z-index: 40;
  display: none;
  background-color: rgb(0 0 0 / 0.5);
}

.header {
  position: sticky;
  top: 0px;
  z-index: 50;
  border-bottom-width: 1px;
  border-color: rgb(0 0 0 / 0.05);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.menuBtn,
  .closeBtn {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
  padding: 0.625rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .menuBtn,
  .closeBtn {
    display: none;
  }
}

.mainNav {
  position: fixed;
  right: 0px;
  top: 5rem;
  display: none;
  height: calc(100vh - 80px);
  width: 20rem;
  flex-direction: column;
  gap: 1.5rem;
  overflow: auto;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .mainNav {
    position: static;
    display: flex;
    height: auto;
    width: auto;
    flex-direction: row;
    gap: 2.75rem;
    overflow: visible;
    background-color: transparent;
    padding: 0px;
  }
}

.mainNav.open {
  display: flex;
}

.dropdown.open>.dropdown-menu {
  display: block;
}

.mainNav>ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  line-height: 1.75rem;
}

@media (min-width: 768px) {
  .mainNav>ul {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.mainNav>ul>li>a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .mainNav>ul>li>a {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.mainNav a:hover {
  --tw-text-opacity: 1;
  color: rgb(40 106 105 / var(--tw-text-opacity, 1));
}

.dropdown {
  width: 100%;
}

@media (min-width: 768px) {
  .dropdown {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .dropdown {
    position: relative;
  }
}

.dropdown:hover>a {
  --tw-text-opacity: 1;
  color: rgb(40 106 105 / var(--tw-text-opacity, 1));
}

.dropdown:hover>a .chevron,
  .mainNav:hover>a .chevron,
  .dropdown.open>a .chevron {
  filter: brightness(0) saturate(100%) invert(35%) sepia(40%) saturate(700%) hue-rotate(130deg);
}

.dropdown-menu {
  display: none;
}

@media (min-width: 768px) {
  .dropdown-menu {
    position: absolute;
    right: 0px;
    top: 100%;
    margin-top: 0px;
    width: auto;
  }
}

@media (min-width: 1024px) {
  .dropdown-menu {
    padding-top: 0.75rem;
  }
}

.dropdown-menu ul {
  width: 100%;
  border-width: 1px;
  border-color: rgb(0 0 0 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

@media (min-width: 768px) {
  .dropdown-menu ul {
    min-width: 15rem;
  }
}

@media (min-width: 1024px) {
  .dropdown-menu ul {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

.dropdown-menu li a {
  margin-bottom: -1px;
  display: flex;
  gap: 0.625rem;
  border-bottom-width: 1px;
  border-color: rgb(0 0 0 / 0.1);
  padding: 0.5rem;
}

.dropdown-menu li a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .dropdown-menu li a {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .dropdown-menu li a {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

.dropdown-menu li a:hover,
  .dropdown-menu li:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .dropdown:hover>.dropdown-menu {
    display: block;
  }
}

.mega-menu {
  display: grid;
}

.mega-menu > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  border-color: rgb(0 0 0 / 0.1);
}

.mega-menu {
  border-width: 1px;
  border-color: rgb(0 0 0 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

@media (min-width: 768px) {
  .mega-menu {
    width: 650px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mega-menu > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }
}

@media (min-width: 1024px) {
  .mega-menu {
    width: 900px;
  }
}

.mega-menu ul {
  margin: 0px;
  border-width: 0px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.mega-menu li a {
  margin-bottom: -1px;
  border-color: rgb(0 0 0 / 0.1);
  padding: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  opacity: 1;
}

@media (min-width: 1024px) {
  .mega-menu li a {
    border-bottom-width: 1px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.mega-menu li a:hover img {
  --tw-brightness: brightness(0);
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.chevron {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 0.3s;
  transition-timing-function: var(--ease-default);
}

.dropdown.open>a .chevron {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 768px) {
  .dropdown:hover>a .chevron {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

.mainNav a.contact-bin {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border-width: 2px;
  border-color: rgb(32 40 40 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-default);
}

.mainNav a.contact-bin:hover {
  --tw-border-opacity: 1;
  border-color: rgb(40 106 105 / var(--tw-border-opacity, 1));
  background-color: rgb(40 106 105 / 0.9);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .mainNav a.contact-bin {
    margin-top: 0px;
  }
}

/* Buttons and typography */

.btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  border-width: 2px;
  border-color: rgb(32 40 40 / 0.1);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-default);
}

@media (min-width: 640px) {
  .btn {
    width: -moz-fit-content;
    width: fit-content;
  }
}

@media (min-width: 768px) {
  .btn {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

@media (min-width: 1024px) {
  .btn {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.btn-lg {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.btn-primary {
  border-color: rgb(32 40 40 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn-primary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(40 106 105 / var(--tw-border-opacity, 1));
  background-color: rgb(40 106 105 / 0.9);
}

.btn-outline {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(40 106 105 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(40 106 105 / var(--tw-text-opacity, 1));
}

.btn-outline:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.heading-1 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(32 40 40 / var(--tw-text-opacity, 1));
}

.heading-2 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2rem;
}

.heading-3 {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 2rem;
}

.heading-4 {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.heading-5 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75rem;
}

@media (min-width: 1024px) {
  .heading-1 {
    font-size: 52px;
  }

  .heading-2 {
    font-size: 3rem;
    line-height: 1.25;
  }

  .heading-3 {
    font-size: 42px;
    line-height: 1.25;
  }

  .heading-4 {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .heading-5 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.75rem;
  }
}

.description-lg {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  margin-bottom: 0px;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

section p.description:first-of-type {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.75rem;
}

@media (min-width: 1024px) {
  section p.description:first-of-type {
    margin-top: 1.25rem;
  }
}

.description {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 1024px) {
  .description {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .description-lg {
    max-width: 710px;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.hero-section .badge {
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: rgb(32 40 40 / 0.15);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(32 40 40 / var(--tw-text-opacity, 1));
  opacity: 0.7;
}

.hero-section .badge img {
  height: 1rem;
  width: 1rem;
}

.about-hero-images-slider {
  overflow: hidden;
}

.about-hero-images-slider>div {
  display: flex;
  min-width: 100%;
  gap: 2rem;
}

.about-hero-images-slider>div>div {
  flex: none;
}

.about-hero-images-slider>div>div img {
  height: 100%;
  width: 100%;
  border-radius: 0.25rem;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 768px) {
  .about-hero-images-slider>div>div img {
    height: 400px;
    width: 360px;
  }
}

.system-visual-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: rgb(40 106 105 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(239 255 248 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(32 40 40 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .system-visual-card {
    flex-direction: row;
    gap: 1.5rem;
  }
}

@media (min-width: 768px) {
  .system-visual-card {
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .system-visual-card {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.sv-card-icon {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
}

/* Home sections */

.clients-row-item {
  display: flex;
  height: 5rem;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .clients-row-item {
    height: 8rem;
  }
}

.systems-section .description-lg {
  opacity: 0.7;
}

.animate-marquee-reverse,
  .animate-marquee {
  overflow: hidden;
}

.animate-marquee-reverse .swiper-wrapper,
  .animate-marquee .swiper-wrapper {
  display: flex;
  width: -moz-max-content;
  width: max-content;
}

.animate-marquee .swiper-wrapper {
  animation: marquee-scroll 35s linear infinite;
}

.animate-marquee-reverse .swiper-wrapper {
  animation: marquee-scroll-reverse 35s linear infinite;
}

.animate-marquee-vertical .swiper-wrapper {
  animation: marquee-scroll-vertical 45s linear infinite;
  height: -moz-max-content;
  height: max-content;
}

/* Desktop */

/* @media (hover: hover) and (pointer: fine) {
  .animate-marquee-vertical:hover .swiper-wrapper,
  .animate-marquee-reverse:hover .swiper-wrapper,
  .animate-marquee:hover .swiper-wrapper {
    animation-play-state: paused;
  }
} */

/* Mobile */

/* @media (hover: none) and (pointer: coarse) {
  .animate-marquee-vertical:active .swiper-wrapper,
  .animate-marquee-reverse:active .swiper-wrapper,
  .animate-marquee:active .swiper-wrapper {
    animation-play-state: paused;
  }
} */

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-scroll-reverse {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes marquee-scroll-vertical {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-50%);
  }
}

.systems-grid {
  margin-top: 2.75rem;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .systems-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .systems-grid {
    margin-top: 5rem;
  }
}

@media (min-width: 1024px) {
  .systems-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.systems-card {
  border-width: 1px;
  border-color: rgb(32 40 40 / 0.1);
  padding: 1.25rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.systems-card:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(13 61 55 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.systems-card img {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.systems-card:hover img {
  --tw-brightness: brightness(0);
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.systems-card a {
  display: inline-flex;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  gap: 0.75rem;
  border-bottom-width: 1px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(112 156 155 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (min-width: 1024px) {
  .systems-card a {
    margin-top: 1.5rem;
  }
}

.systems-card a svg {
  display: none;
  --tw-translate-x: -100%;
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.systems-card:hover a svg {
  display: block;
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.systems-card:hover a {
  --tw-text-opacity: 1;
  color: rgb(51 186 184 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .systems-card {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

.systems-card-icon {
  margin-bottom: 2rem;
  display: flex;
  height: 5rem;
  width: 5rem;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .systems-card-icon {
    height: 8rem;
    width: 8rem;
  }
}

@media (min-width: 1024px) {
  .systems-card-icon {
    margin-bottom: 4rem;
  }
}

.systems-card-content > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.systems-card-content {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.systems-card-content p {
  opacity: 0.8;
}

@media (min-width: 1024px) {
  .systems-card-content {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.systems-card img {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.case-studies-header {
  text-align: center;
}

.case-studies-header p {
  margin-left: auto;
  margin-right: auto;
  max-width: 550px;
}

.case-studies-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}

@media (min-width: 640px) {
  .case-studies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .case-studies-grid {
    margin-top: 5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.case-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 1.25rem;
}

.case-card-image {
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
}

.case-card-image img {
  height: auto;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.case-card:hover img {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.case-card-text strong {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.case-card-text p:first-of-type {
  margin-bottom: -0.75rem;
}

.case-card-link {
  margin-top: auto;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(40 106 105 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

@media (min-width: 1024px) {
  .case-card-link {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.case-studies-cta {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  display: flex;
  width: 200px;
  justify-content: center;
}

@media (min-width: 640px) {
  .case-studies-cta {
    width: -moz-fit-content;
    width: fit-content;
  }
}

@media (min-width: 768px) {
  .case-studies-cta {
    margin-top: 4rem;
  }
}

.testimonials {
  --tw-bg-opacity: 1;
  background-color: rgb(5 29 26 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.testimonials-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .testimonials-grid {
    margin-top: 5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.testimonial-video {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.testimonial-video::after {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  --tw-content: "";
  content: var(--tw-content);
}

.testimonial-video img {
  aspect-ratio: 1 / 1;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.testimonial-video:after {
  background: linear-gradient(180deg,
        rgb(255 255 255 / 0) 20%,
        #051D1A);
}

.iframeVideo-play {
  position: absolute;
  inset: 0px;
  z-index: 10;
  margin: auto;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
}

.testimonial-docs {
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: 10;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

.testimonial-docs p {
  opacity: 0.8;
}

@media (min-width: 640px) {
  .testimonial-docs {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.testimonial-docs span {
  display: block;
  font-weight: 500;
}

@media (min-width: 640px) {
  .testimonial-docs span {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

.testimonial-video .testimonials-linkedinLogo,
  .testimonials-linkedinLogo {
  width: 1rem;
}

@media (min-width: 640px) {
  .testimonial-video .testimonials-linkedinLogo,
    .testimonials-linkedinLogo {
    width: 1.75rem;
  }
}

.testimonial-card {
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.15);
  padding: 1.25rem;
}

@media (min-width: 1280px) {
  .testimonial-card {
    padding: 2rem;
  }
}

.testimonial-company img {
  margin-bottom: 1rem;
}

.testimonial-text p {
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.625;
  opacity: 0.9;
}

@media (min-width: 1024px) {
  .testimonial-text p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.testimonial-user {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.testimonial-user div {
  flex: 1 1 0%;
}

.testimonial-user img {
  flex: none;
}

.testimonial-user img:first-child {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
}

.testimonial-user-name {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.testimonial-user-role {
  font-size: 0.75rem;
  line-height: 1rem;
}

.video-modal-overlay {
  position: absolute;
  inset: 0px;
  background-color: rgb(0 0 0 / 0.7);
}

.faq-item {
  border-bottom-width: 1px;
  border-color: rgb(32 40 40 / 0.15);
}

.faq-question {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: 1rem;
  text-align: left;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 1024px) {
  .faq-question {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.faq-answer {
  display: none;
  padding-right: 1.25rem;
  padding-bottom: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  line-height: 1.625;
  opacity: 0.7;
}

@media (min-width: 1024px) {
  .faq-answer {
    padding-right: 2rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-icon {
  position: relative;
  display: flex;
  height: 1rem;
  width: 1rem;
  align-items: center;
  justify-content: center;
}

.faq-icon img {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 0.2s;
  transition-timing-function: var(--ease-default);
}

.faq-minus {
  opacity: 0;
}

.faq-item.open .faq-minus,
  .faq-plus {
  opacity: 1;
}

.faq-item.open .faq-plus {
  opacity: 0;
}

.cta-note {
  margin-top: 1.5rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.25);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1rem;
}

@media (min-width: 640px) {
  .cta-note {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .cta-note {
    margin-top: 2rem;
  }
}

.cta-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.cta-author img {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  -o-object-fit: cover;
     object-fit: cover;
}

.cta-author-name {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.cta-author-role {
  font-size: 0.75rem;
  line-height: 1rem;
  opacity: 0.7;
}

.system-blocks-btn .btn {
  width: 250px;
}

@media (min-width: 640px) {
  .system-blocks-btn .btn {
    width: -moz-fit-content;
    width: fit-content;
  }
}

.footer-title {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.75rem;
}

.footer-list > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.footer-list {
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 1.5;
}

.footer-list a {
  opacity: 0.8;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.footer-list a:hover {
  opacity: 1;
}

.footer-social {
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(40 106 105 / var(--tw-border-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.footer-social:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
}

.footer-social:hover img {
  --tw-brightness: brightness(0);
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.growth-wrapper > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  border-color: rgb(40 106 105 / 0.6);
}

.growth-wrapper {
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-color: rgb(40 106 105 / 0.6);
}

.growth-card {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  flex: none;
  align-items: center;
  gap: 0.75rem;
  border-right-width: 1px;
  border-right-color: rgb(40 106 105 / 0.6);
  padding: 1rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 0.8;
}

@media (min-width: 640px) {
  .growth-card {
    padding: 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.approach-system-visual-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: rgb(32 40 40 / 0.2);
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(247 250 249 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(247 250 249 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(239 255 248 / 0.3) var(--tw-gradient-to-position);
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (min-width: 1024px) {
  .approach-system-visual-card {
    min-height: 475px;
  }
}

.approach-system-visual-card p {
  font-size: 0.875rem;
  line-height: 1.25rem;
  max-height: -moz-max-content;
  max-height: max-content;
  overflow: hidden;
  opacity: 0.7;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@media (min-width: 1024px) {
  .approach-system-visual-card p {
    max-height: 0px;
  }
}

.approach-system-visual-card p {
  transition: max-height 0.5s ease;
}

.approach-system-visual-card:hover p {
  max-height: 7rem;
}

.approach-system-visual-card-content {
  position: absolute;
  bottom: 0px;
  left: 0px;
  margin-top: auto;
  width: 100%;
}

.approach-system-visual-card-content > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.approach-system-visual-card-content {
  padding: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(32 40 40 / var(--tw-text-opacity, 1));
}

.principle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: rgb(40 106 105 / 0.2);
  padding: 1.25rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.principle-card:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .principle-card {
    min-height: 310px;
  }
}

.principle-card img {
  width: 60px;
}

.principle-card:hover img {
  --tw-brightness: brightness(0);
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@media (min-width: 1024px) {
  .principle-card img {
    width: auto;
  }
}

.principle-card p {
  font-size: 0.875rem;
  line-height: 1.25rem;
  max-height: -moz-max-content;
  max-height: max-content;
  overflow: hidden;
  opacity: 0.7;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@media (min-width: 1024px) {
  .principle-card p {
    max-height: 0px;
  }
}

.principle-card:hover p {
  max-height: 7rem;
}

.serviceDetails-problems-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: rgb(32 40 40 / 0.15);
  padding: 1.25rem;
  padding-right: 0.75rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.serviceDetails-problems-card:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .serviceDetails-problems-card {
    height: 380px;
  }
}

.serviceDetails-problems-card img {
  width: 60px;
}

.serviceDetails-problems-card:hover img {
  --tw-brightness: brightness(0);
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@media (min-width: 1024px) {
  .serviceDetails-problems-card img {
    width: auto;
  }
}

.serviceDetails-enterprise .description-lg img {
  width: 60px;
}

@media (min-width: 1024px) {
  .serviceDetails-enterprise .description-lg img {
    width: auto;
  }
}

.serviceDetails-engineering-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: rgb(32 40 40 / 0.15);
  padding: 1.25rem;
  padding-right: 0.75rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.serviceDetails-engineering-card:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .serviceDetails-engineering-card {
    height: 420px;
  }
}

@media (min-width: 1024px) {
  .serviceDetails-engineering-card {
    gap: 0px;
  }
}

.serviceDetails-engineering-card img {
  width: 60px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.serviceDetails-engineering-card:hover img {
  --tw-brightness: brightness(0);
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@media (min-width: 1024px) {
  .serviceDetails-engineering-card img {
    width: auto;
  }
}

.serviceDetails-engineering-card p,
  .serviceDetails-problems-card p {
  max-height: -moz-max-content;
  max-height: max-content;
  overflow: hidden;
  opacity: 0.7;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@media (min-width: 1024px) {
  .serviceDetails-engineering-card p,
  .serviceDetails-problems-card p {
    max-height: 0px;
  }
}

.serviceDetails-engineering-card:hover p,
  .serviceDetails-problems-card:hover p {
  max-height: 12rem;
}

.stats-section {
  overflow: hidden;
}

.stats-section .container-main {
  position: relative;
}

.stats-section .container-main::before {
  position: absolute;
  top: -1.25rem;
  left: 0px;
  right: 0px;
  margin-left: auto;
  margin-right: auto;
  height: 225px;
  width: 360px;
  background-image: url('../image/about/stats-bg.webp');
  background-size: contain;
  background-position: center;
  --tw-content: '';
  content: var(--tw-content);
}

.stats-section .stats-card {
  position: relative;
  display: flex;
  height: 190px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: rgb(0 0 0 / 0.1);
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(247 250 249 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(247 250 249 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(239 255 248 / 0.3) var(--tw-gradient-to-position);
  padding: 2rem;
}

section p.stats-section .stats-card p:first-of-type {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.75rem;
}

@media (min-width: 1024px) {
  section p.stats-section .stats-card p:first-of-type {
    margin-top: 1.25rem;
  }
}

.stats-section .stats-card p {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 1024px) {
  .stats-section .stats-card p {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

section p.stats-section .stats-card p:first-of-type {
  opacity: 0.7;
}

.stats-section .stats-card p {
  margin: 0px;
  text-align: left;
  opacity: 0.7;
}

.journey-slide {
  height: auto;
  width: 320px;
}

@media (min-width: 768px) {
  .journey-slide {
    width: 545px;
  }
}

@media (min-width: 1024px) {
  .journey-slide {
    height: 100%;
    padding-top: 2.5rem;
  }
}

.journey-slide.journey-bottom .journey-item::after {
  content: var(--tw-content);
  top: -3.5rem;
}

@media (min-width: 1024px) {
  .journey-slide.journey-bottom .journey-item {
    margin-top: 287px;
  }
}

.journey-slide.journey-top .journey-item::after {
  bottom: -3.5rem;
  content: var(--tw-content);
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.journey-slide .journey-card {
  height: 100%;
}

.journey-slide .journey-item {
  position: relative;
  height: 100%;
}

.journey-slide .journey-item::after {
  position: absolute;
  left: 0px;
  right: 0px;
  margin-left: auto;
  margin-right: auto;
  display: none;
  height: 2.75rem;
  width: 2.5rem;
  background-image: url('../image/icon/journey.svg');
  background-position: center;
  background-repeat: no-repeat;
  --tw-content: '';
  content: var(--tw-content);
}

@media (min-width: 1024px) {
  .journey-slide .journey-item::after {
    content: var(--tw-content);
    display: block;
  }
}

.journey-card {
  position: relative;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: rgb(40 106 105 / 0.05);
  --tw-bg-opacity: 1;
  background-color: rgb(247 250 249 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
}

.journey-heading {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
}

.journey-desc {
  margin-bottom: 1.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.3;
  opacity: 0.7;
}

.journey-year {
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 1.3;
  opacity: 0.7;
}

/* ==================================================
    SYSTEMS TREE
  ================================================== */

.systems-tree {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  max-width: 350px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.75rem;
  border-width: 1px;
  border-color: rgb(40 106 105 / 0.15);
  padding: 0.75rem;
}

@media (min-width: 768px) {
  .systems-tree {
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .systems-tree {
    padding: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .systems-tree {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tree-item {
  position: relative;
}

.tree-head {
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: rgb(40 106 105 / 0.2);
  --tw-bg-opacity: 1;
  background-color: rgb(239 255 248 / var(--tw-bg-opacity, 1));
  padding: 0.5rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(40 106 105 / var(--tw-text-opacity, 1));
  border: 1px solid;
}

.tree-branch {
  position: relative;
  margin-left: 20%;
  padding: 2.5rem;
  padding-right: 0px;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.tree-branch::before {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 1px;
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: #286A69 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(40 106 105 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
  --tw-content: '';
  content: var(--tw-content);
}

@media (min-width: 640px) {
  .tree-branch {
    margin-left: 30%;
    width: 66.666667%;
  }
}

.tree-branch ul {
  position: relative;
}

.tree-branch ul > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.tree-branch ul::before {
  position: absolute;
  left: -1.25rem;
  top: 18px;
  height: calc(100% - 35px);
  width: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
  --tw-content: '';
  content: var(--tw-content);
}

.tree-branch ul li {
  position: relative;
  padding: 0.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(40 106 105 / var(--tw-text-opacity, 1));
}

.tree-branch ul li::after {
  position: absolute;
  right: 100%;
  top: 50%;
  height: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
  --tw-content: '';
  content: var(--tw-content);
}

/* First li */

.tree-branch ul li:nth-child(1)::after {
  width: 1.25rem;
}

/* Second li */

.tree-branch ul li:nth-child(2)::after {
  width: 2.5rem;
}

/* Third li */

.tree-branch ul li:nth-child(3)::after {
  width: 1.25rem;
}

section p.description:first-of-type,
  section p.description-lg:first-of-type {
  opacity: 0.7;
}

.why-choose-vital-grid .timeline-card {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 768px) {
  .why-choose-vital-grid .timeline-card {
    min-height: 16rem;
  }
}

.why-choose-vital-grid .timeline-card h3 {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
}

.why-choose-vital-grid .timeline-card img {
  margin-bottom: 1rem;
  width: 1.5rem;
}

@media (min-width: 640px) {
  .why-choose-vital-grid .timeline-card img {
    margin-bottom: 1.25rem;
  }
}

.why-choose-vital-grid .timeline-card p {
  opacity: 0.6;
}

.why-choose-vital-grid .timeline-card {
  &.active {
    --tw-bg-opacity: 1;
    background-color: rgb(247 250 249 / var(--tw-bg-opacity, 1));
  }
}

.why-choose-vital-grid .timeline-left .timeline-card.active {
  border-right-width: 8px;
  --tw-border-opacity: 1;
  border-right-color: rgb(40 106 105 / var(--tw-border-opacity, 1));
}

.why-choose-vital-grid .timeline-right .timeline-card.active {
  border-left-width: 8px;
  --tw-border-opacity: 1;
  border-left-color: rgb(40 106 105 / var(--tw-border-opacity, 1));
}

.stack-layer {
  position: relative;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.server-image-wrapper {
  position: relative;
  display: inline-block;
}

.active-img,
  .inactive-img {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.timeline-card {
  position: relative;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.connector-line {
  position: absolute;
  width: 0.125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
}

.timeline-card .connector-line {
  opacity: 0;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.timeline-card.active .connector-line {
  opacity: 1;
}

.connector-line::after {
  position: absolute;
  height: 0.125rem;
  width: 2.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
  --tw-content: "";
  content: var(--tw-content);
}

.connector-line::before {
  position: absolute;
  height: 0.125rem;
  width: 2.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
  --tw-content: "";
  content: var(--tw-content);
}

.timeline-left .connector-line::after {
  top: 0px;
  right: 100%;
}

.timeline-left .connector-line::before {
  bottom: 0px;
  left: 100%;
}

.timeline-right .connector-line::after {
  top: 0px;
  left: 100%;
}

.timeline-right .connector-line::before {
  bottom: 0px;
  right: 100%;
}

.timeline-left .connector-line {
  right: -2.75rem;
  top: 2.5rem;
}

.timeline-right .connector-line {
  left: -2.75rem;
  top: 2.5rem;
}

.timeline-card[data-step="0"] .connector-line {
  height: 16rem;
}

.timeline-card[data-step="1"] .connector-line {
  height: 430px;
}

.timeline-card[data-step="2"] .connector-line {
  height: 6rem;
}

.timeline-card[data-step="3"] .connector-line {
  height: 275px;
}

.timeline-card[data-step="4"] .connector-line {
  height: 70px;
  transform: rotateX(180deg);
  transform-origin: top center;
}

.timeline-card[data-step="5"] .connector-line {
  height: 120px;
}

.timeline-card[data-step="6"] .connector-line {
  height: 15rem;
  transform: rotateX(180deg);
  transform-origin: top center;
}

.timeline-card[data-step="7"] .connector-line {
  height: 4rem;
  transform: rotateX(180deg);
  transform-origin: top center;
}

@media (min-width: 1280px) {
  .connector-line::after {
    width: 3.5rem;
  }

  .connector-line::before {
    width: 3.5rem;
  }

  .timeline-left .connector-line {
    right: -4rem;
    top: 2.5rem;
  }

  .timeline-right .connector-line {
    left: -4rem;
    top: 2.5rem;
  }

  .timeline-card[data-step="0"] .connector-line {
    height: 9rem;
  }

  .timeline-card[data-step="1"] .connector-line {
    height: 350px;
  }

  .timeline-card[data-step="2"] .connector-line {
    height: 2.5rem;
  }

  .timeline-card[data-step="3"] .connector-line {
    height: 245px;
  }

  .timeline-card[data-step="4"] .connector-line {
    height: 70px;
    transform: rotateX(180deg);
    transform-origin: top center;
  }

  .timeline-card[data-step="5"] .connector-line {
    height: 140px;
  }

  .timeline-card[data-step="6"] .connector-line {
    height: 11rem;
    transform: rotateX(180deg);
    transform-origin: top center;
  }

  .timeline-card[data-step="7"] .connector-line {
    height: 2.25rem;
    transform: rotateX(0deg);
    transform-origin: top center;
  }
}

/* ACTIVE */

.timeline-card.active::after,
  .timeline-card.active::before {
  transform: translateY(-50%) scaleX(1);
}

/* Default State */

.inactive-img {
  position: relative;
  opacity: 1;
}

.active-img {
  opacity: 0;
}

/* Active State */

.stack-layer.active .inactive-img {
  opacity: 0;
}

.stack-layer.active .active-img {
  opacity: 1;
}

/* Card */

.timeline-card {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.sidebar-nav > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  border-color: rgb(0 0 0 / 0.1);
}

.sidebar-nav {
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: rgb(0 0 0 / 0.1);
}

.sidebar-nav a {
  display: block;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  opacity: 0.5;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.sidebar-nav a:hover {
  background-color: rgb(40 106 105 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(40 106 105 / var(--tw-text-opacity, 1));
  opacity: 1;
}

.sidebar-nav a.active {
  background-color: rgb(40 106 105 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(40 106 105 / var(--tw-text-opacity, 1));
  opacity: 1;
}

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

.scrollbar-none {
  -ms-overflow-style: none;
  /* IE & Edge */
  scrollbar-width: none;
  /* Firefox */
}

.industry-card {
  display: flex;
  height: 190px;
  width: 225px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(234 234 234 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  text-align: center;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.industry-card-active {
  --tw-border-opacity: 1;
  border-color: rgb(134 183 182 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(239 255 248 / var(--tw-bg-opacity, 1));
}

.industry-card img {
  margin-bottom: 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
}

/* .industry-card-title added when the marquee chips were changed from h2/h3 to
   span. Row 1 previously used <h2>, which matched no selector here at all, so
   unifying on the class also fixes a live inconsistency between the two rows. */
.industry-card h3,
.industry-card .industry-card-title {
  display: block;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  line-height: 1.625;
}

.swiper-wrapper {
  transition-timing-function: linear !important;
}

.country-btn.active img:last-child {
  transform: rotate(180deg);
  transition: 0.3s;
}

.overflow-x-auto {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.swiper,
  .swiper-wrapper {
  touch-action: pan-y !important;
}

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

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-6 {
  bottom: 1.5rem;
}

.left-0 {
  left: 0px;
}

.left-6 {
  left: 1.5rem;
}

.right-0 {
  right: 0px;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

.top-\[271px\] {
  top: 271px;
}

.top-full {
  top: 100%;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.m-0 {
  margin: 0px;
}

.m-auto {
  margin: auto;
}

.\!mx-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.\!mb-8 {
  margin-bottom: 2rem !important;
}

.\!mt-auto {
  margin-top: auto !important;
}

.-mb-48 {
  margin-bottom: -12rem;
}

.-mt-44 {
  margin-top: -11rem;
}

.-mt-\[21px\] {
  margin-top: -21px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-0 {
  margin-left: 0px;
}

.ml-auto {
  margin-left: auto;
}

.mr-2\.5 {
  margin-right: 0.625rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-auto {
  margin-top: auto;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.\!h-full {
  height: 100% !important;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-\[220px\] {
  height: 220px;
}

.h-\[275px\] {
  height: 275px;
}

.h-\[2px\] {
  height: 2px;
}

.h-\[370px\] {
  height: 370px;
}

.h-\[400px\] {
  height: 400px;
}

.h-\[600px\] {
  height: 600px;
}

.h-auto {
  height: auto;
}

.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}

.h-full {
  height: 100%;
}

.h-max {
  height: -moz-max-content;
  height: max-content;
}

.h-px {
  height: 1px;
}

.min-h-\[320px\] {
  min-height: 320px;
}

.min-h-\[70vh\] {
  min-height: 70vh;
}

.\!w-fit {
  width: -moz-fit-content !important;
  width: fit-content !important;
}

.\!w-full {
  width: 100% !important;
}

.w-1\/2 {
  width: 50%;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-20 {
  width: 5rem;
}

.w-28 {
  width: 7rem;
}

.w-32 {
  width: 8rem;
}

.w-4 {
  width: 1rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-8 {
  width: 2rem;
}

.w-\[156px\] {
  width: 156px;
}

.w-\[300px\] {
  width: 300px;
}

.w-auto {
  width: auto;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

.min-w-max {
  min-width: -moz-max-content;
  min-width: max-content;
}

.\!max-w-full {
  max-width: 100% !important;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-\[1000px\] {
  max-width: 1000px;
}

.max-w-\[1100px\] {
  max-width: 1100px;
}

.max-w-\[1112px\] {
  max-width: 1112px;
}

.max-w-\[1440px\] {
  max-width: 1440px;
}

.max-w-\[160px\] {
  max-width: 160px;
}

.max-w-\[260px\] {
  max-width: 260px;
}

.max-w-\[400px\] {
  max-width: 400px;
}

.max-w-\[420px\] {
  max-width: 420px;
}

.max-w-\[450px\] {
  max-width: 450px;
}

.max-w-\[500px\] {
  max-width: 500px;
}

.max-w-\[520px\] {
  max-width: 520px;
}

.max-w-\[535px\] {
  max-width: 535px;
}

.max-w-\[550px\] {
  max-width: 550px;
}

.max-w-\[570px\] {
  max-width: 570px;
}

.max-w-\[580px\] {
  max-width: 580px;
}

.max-w-\[642px\] {
  max-width: 642px;
}

.max-w-\[680px\] {
  max-width: 680px;
}

.max-w-\[685px\] {
  max-width: 685px;
}

.max-w-\[700px\] {
  max-width: 700px;
}

.max-w-\[710px\] {
  max-width: 710px;
}

.max-w-\[750px\] {
  max-width: 750px;
}

.max-w-\[800px\] {
  max-width: 800px;
}

.max-w-\[850px\] {
  max-width: 850px;
}

.max-w-\[860px\] {
  max-width: 860px;
}

.max-w-\[90\%\] {
  max-width: 90%;
}

.max-w-\[900px\] {
  max-width: 900px;
}

.max-w-\[950px\] {
  max-width: 950px;
}

.max-w-full {
  max-width: 100%;
}

.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xl {
  max-width: 36rem;
}

.\!flex-none {
  flex: none !important;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-none {
  flex: none;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-1\/2 {
  --tw-translate-y: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize-none {
  resize: none;
}

.resize {
  resize: both;
}

.list-disc {
  list-style-type: disc;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.place-items-center {
  place-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-stretch {
  align-items: stretch;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-11 {
  gap: 2.75rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-x-auto {
  overflow-x: auto;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.rounded-l {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-l {
  border-left-width: 1px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-black\/10 {
  border-color: rgb(0 0 0 / 0.1);
}

.border-black\/20 {
  border-color: rgb(0 0 0 / 0.2);
}

.border-border {
  --tw-border-opacity: 1;
  border-color: rgb(234 234 234 / var(--tw-border-opacity, 1));
}

.border-borderDark\/30 {
  border-color: rgb(204 204 204 / 0.3);
}

.border-dark {
  --tw-border-opacity: 1;
  border-color: rgb(32 40 40 / var(--tw-border-opacity, 1));
}

.border-dark\/10 {
  border-color: rgb(32 40 40 / 0.1);
}

.border-dark\/15 {
  border-color: rgb(32 40 40 / 0.15);
}

.border-dark\/5 {
  border-color: rgb(32 40 40 / 0.05);
}

.border-gray\/15 {
  border-color: rgb(115 115 115 / 0.15);
}

.border-gray\/25 {
  border-color: rgb(115 115 115 / 0.25);
}

.border-gray\/80 {
  border-color: rgb(115 115 115 / 0.8);
}

.border-lightGray {
  --tw-border-opacity: 1;
  border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
}

.border-primary {
  --tw-border-opacity: 1;
  border-color: rgb(40 106 105 / var(--tw-border-opacity, 1));
}

.border-primary\/10 {
  border-color: rgb(40 106 105 / 0.1);
}

.border-primary\/30 {
  border-color: rgb(40 106 105 / 0.3);
}

.border-transparent {
  border-color: transparent;
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

.border-white\/5 {
  border-color: rgb(255 255 255 / 0.05);
}

.border-b-white\/10 {
  border-bottom-color: rgb(255 255 255 / 0.1);
}

.bg-\[rgba\(255\2c 255\2c 255\2c 0\.02\)\] {
  background-color: rgba(255,255,255,0.02);
}

.bg-border {
  --tw-bg-opacity: 1;
  background-color: rgb(234 234 234 / var(--tw-bg-opacity, 1));
}

.bg-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(32 40 40 / var(--tw-bg-opacity, 1));
}

.bg-darkGreen {
  --tw-bg-opacity: 1;
  background-color: rgb(5 29 26 / var(--tw-bg-opacity, 1));
}

.bg-light {
  --tw-bg-opacity: 1;
  background-color: rgb(247 250 249 / var(--tw-bg-opacity, 1));
}

.bg-lightAlt {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

.bg-lightGray {
  --tw-bg-opacity: 1;
  background-color: rgb(217 217 217 / var(--tw-bg-opacity, 1));
}

.bg-offWhite {
  --tw-bg-opacity: 1;
  background-color: rgb(249 249 249 / var(--tw-bg-opacity, 1));
}

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
}

.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(134 183 182 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color: transparent;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}

.bg-\[linear-gradient\(180deg\2c \#286A69_66\%\2c \#FFFFFF_100\%\)\] {
  background-image: linear-gradient(180deg,#286A69 66%,#FFFFFF 100%);
}

.bg-\[url\(\'\.\.\/image\/icon\/search\.svg\'\)\] {
  background-image: url('../image/icon/search.svg');
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-darkGreen {
  --tw-gradient-from: #051D1A var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 29 26 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primaryDark\/30 {
  --tw-gradient-from: rgb(13 61 55 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(13 61 55 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-darkGreen\/90 {
  --tw-gradient-to: rgb(5 29 26 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(5 29 26 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-white\/90 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-primaryDarker\/30 {
  --tw-gradient-to: rgb(6 42 37 / 0.3) var(--tw-gradient-to-position);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.bg-cover {
  background-size: cover;
}

.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}

.bg-\[position\:8px_center\] {
  background-position: 8px center;
}

.bg-center {
  background-position: center;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-left-top {
  -o-object-position: left top;
     object-position: left top;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

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

.text-center {
  text-align: center;
}

.font-dm_sans {
  font-family: DM Sans, sans-serif;
}

.text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}

.text-\[42px\] {
  font-size: 42px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.leading-\[120\%\] {
  line-height: 120%;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.text-dark {
  --tw-text-opacity: 1;
  color: rgb(32 40 40 / var(--tw-text-opacity, 1));
}

.text-dark\/70 {
  color: rgb(32 40 40 / 0.7);
}

.text-dark\/80 {
  color: rgb(32 40 40 / 0.8);
}

.text-gray {
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(40 106 105 / var(--tw-text-opacity, 1));
}

.text-secondary {
  --tw-text-opacity: 1;
  color: rgb(134 183 182 / var(--tw-text-opacity, 1));
}

.text-transparent {
  color: transparent;
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

.underline {
  text-decoration-line: underline;
}

.\!opacity-100 {
  opacity: 1 !important;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.brightness-0 {
  --tw-brightness: brightness(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-700 {
  transition-duration: 700ms;
}

.\[\&_h2\]\:heading-4 h2 {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
}

@media (min-width: 1024px) {
  .\[\&_h2\]\:heading-4 h2 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.hover\:gap-3:hover {
  gap: 0.75rem;
}

.hover\:border-primary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(40 106 105 / var(--tw-border-opacity, 1));
}

.hover\:bg-primary\/20:hover {
  background-color: rgb(40 106 105 / 0.2);
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.focus\:border-primary:focus {
  --tw-border-opacity: 1;
  border-color: rgb(40 106 105 / var(--tw-border-opacity, 1));
}

.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 640px) {
  .sm\:mr-0 {
    margin-right: 0px;
  }

  .sm\:min-h-\[350px\] {
    min-height: 350px;
  }

  .sm\:w-7 {
    width: 1.75rem;
  }

  .sm\:w-fit {
    width: -moz-fit-content;
    width: fit-content;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 768px) {
  .md\:order-1 {
    order: 1;
  }

  .md\:order-2 {
    order: 2;
  }

  .md\:mb-12 {
    margin-bottom: 3rem;
  }

  .md\:mb-16 {
    margin-bottom: 4rem;
  }

  .md\:mt-16 {
    margin-top: 4rem;
  }

  .md\:mt-20 {
    margin-top: 5rem;
  }

  .md\:block {
    display: block;
  }

  .md\:h-\[600px\] {
    height: 600px;
  }

  .md\:max-w-\[360px\] {
    max-width: 360px;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:gap-8 {
    gap: 2rem;
  }

  .md\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .md\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .md\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .md\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .lg\:left-6 {
    left: 1.5rem;
  }

  .lg\:right-6 {
    right: 1.5rem;
  }

  .lg\:top-24 {
    top: 6rem;
  }

  .lg\:mb-0 {
    margin-bottom: 0px;
  }

  .lg\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .lg\:mb-14 {
    margin-bottom: 3.5rem;
  }

  .lg\:mb-16 {
    margin-bottom: 4rem;
  }

  .lg\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .lg\:mb-\[60px\] {
    margin-bottom: 60px;
  }

  .lg\:mt-10 {
    margin-top: 2.5rem;
  }

  .lg\:mt-11 {
    margin-top: 2.75rem;
  }

  .lg\:mt-12 {
    margin-top: 3rem;
  }

  .lg\:mt-16 {
    margin-top: 4rem;
  }

  .lg\:mt-20 {
    margin-top: 5rem;
  }

  .lg\:mt-24 {
    margin-top: 6rem;
  }

  .lg\:mt-8 {
    margin-top: 2rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:aspect-auto {
    aspect-ratio: auto;
  }

  .lg\:aspect-video {
    aspect-ratio: 16 / 9;
  }

  .lg\:h-12 {
    height: 3rem;
  }

  .lg\:h-\[450px\] {
    height: 450px;
  }

  .lg\:h-\[600px\] {
    height: 600px;
  }

  .lg\:min-h-\[500px\] {
    min-height: 500px;
  }

  .lg\:w-32 {
    width: 8rem;
  }

  .lg\:w-8 {
    width: 2rem;
  }

  .lg\:w-\[232px\] {
    width: 232px;
  }

  .lg\:w-\[280px\] {
    width: 280px;
  }

  .lg\:w-fit {
    width: -moz-fit-content;
    width: fit-content;
  }

  .lg\:max-w-\[550px\] {
    max-width: 550px;
  }

  .lg\:max-w-\[750px\] {
    max-width: 750px;
  }

  .lg\:translate-x-40 {
    --tw-translate-x: 10rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.2fr_1fr\] {
    grid-template-columns: 1.2fr 1fr;
  }

  .lg\:grid-cols-\[1fr_1\.2fr\] {
    grid-template-columns: 1fr 1.2fr;
  }

  .lg\:grid-cols-\[1fr_390px_1fr\] {
    grid-template-columns: 1fr 390px 1fr;
  }

  .lg\:grid-cols-\[280px_1fr\] {
    grid-template-columns: 280px 1fr;
  }

  .lg\:grid-cols-\[390px_1fr\] {
    grid-template-columns: 390px 1fr;
  }

  .lg\:grid-cols-\[500px_1fr\] {
    grid-template-columns: 500px 1fr;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-20 {
    gap: 5rem;
  }

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:gap-x-12 {
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }

  .lg\:gap-y-10 {
    row-gap: 2.5rem;
  }

  .lg\:gap-y-16 {
    row-gap: 4rem;
  }

  .lg\:space-y-12 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(3rem * var(--tw-space-y-reverse));
  }

  .lg\:space-y-16 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(4rem * var(--tw-space-y-reverse));
  }

  .lg\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
  }

  .lg\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .lg\:bg-offWhite {
    --tw-bg-opacity: 1;
    background-color: rgb(249 249 249 / var(--tw-bg-opacity, 1));
  }

  .lg\:p-10 {
    padding: 2.5rem;
  }

  .lg\:p-12 {
    padding: 3rem;
  }

  .lg\:p-5 {
    padding: 1.25rem;
  }

  .lg\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .lg\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .lg\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .lg\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .lg\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .lg\:py-36 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }

  .lg\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .lg\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .lg\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .lg\:pb-24 {
    padding-bottom: 6rem;
  }

  .lg\:pl-0 {
    padding-left: 0px;
  }

  .lg\:pr-8 {
    padding-right: 2rem;
  }

  .lg\:pt-16 {
    padding-top: 4rem;
  }

  .lg\:pt-20 {
    padding-top: 5rem;
  }

  .lg\:pt-32 {
    padding-top: 8rem;
  }

  .lg\:pt-8 {
    padding-top: 2rem;
  }

  .lg\:text-left {
    text-align: left;
  }

  .lg\:text-9xl {
    font-size: 8rem;
    line-height: 1;
  }

  .lg\:text-\[32px\] {
    font-size: 32px;
  }

  .lg\:text-\[64px\] {
    font-size: 64px;
  }

  .lg\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .lg\:leading-10 {
    line-height: 2.5rem;
  }

  .lg\:leading-\[1\.5\] {
    line-height: 1.5;
  }
}

@media (min-width: 1280px) {
  .xl\:flex {
    display: flex;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:max-w-\[1000px\] {
    max-width: 1000px;
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .xl\:grid-cols-\[1fr_540px\] {
    grid-template-columns: 1fr 540px;
  }

  .xl\:grid-cols-\[390px_1fr_390px\] {
    grid-template-columns: 390px 1fr 390px;
  }

  .xl\:grid-cols-\[415px_210px_205px_120px_120px\] {
    grid-template-columns: 415px 210px 205px 120px 120px;
  }

  .xl\:gap-10 {
    gap: 2.5rem;
  }

  .xl\:gap-28 {
    gap: 7rem;
  }
}

@media (min-width: 1536px) {
  .\32xl\:translate-x-1\/4 {
    --tw-translate-x: 25%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

.\[\&\>\.timeline-card\:not\(\:last-child\)\]\:border-b>.timeline-card:not(:last-child) {
  border-bottom-width: 1px;
}

.\[\&_\.section\]\:space-y-4 .section > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.\[\&_\.swiper-pagination-bullet\.swiper-pagination-bullet-active\]\:bg-primary .swiper-pagination-bullet.swiper-pagination-bullet-active {
  --tw-bg-opacity: 1;
  background-color: rgb(40 106 105 / var(--tw-bg-opacity, 1));
}

.\[\&_button\:not\(\.bg-primary\)\]\:bg-offWhite button:not(.bg-primary) {
  --tw-bg-opacity: 1;
  background-color: rgb(249 249 249 / var(--tw-bg-opacity, 1));
}

.\[\&_h2\]\:mb-4 h2 {
  margin-bottom: 1rem;
}

.\[\&_img\]\:h-full img {
  height: 100%;
}

.\[\&_img\]\:object-contain img {
  -o-object-fit: contain;
     object-fit: contain;
}

.\[\&_img\]\:object-center img {
  -o-object-position: center;
     object-position: center;
}

.\[\&_img\]\:brightness-0 img {
  --tw-brightness: brightness(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.\[\&_img\]\:invert img {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.\[\&_img\]\:hover\:brightness-0:hover img {
  --tw-brightness: brightness(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.\[\&_img\]\:hover\:invert:hover img {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@media (min-width: 1024px) {
  .\[\&_img\]\:lg\:mb-14 img {
    margin-bottom: 3.5rem;
  }
}

.\[\&_li\]\:flex-none li {
  flex: none;
}

.\[\&_li\]\:space-y-3 li > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.\[\&_li\]\:opacity-70 li {
  opacity: 0.7;
}

.\[\&_p\]\:text-xs p {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_p\]\:text-white\/70 p {
  color: rgb(255 255 255 / 0.7);
}

.\[\&_p\]\:opacity-70 p {
  opacity: 0.7;
}

@media (min-width: 1024px) {
  .\[\&_p\]\:lg\:text-sm p {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.\[\&_strong\]\:font-medium strong {
  font-weight: 500;
}

.\[\&_ul\]\:list-disc ul {
  list-style-type: disc;
}

.\[\&_ul\]\:space-y-3 ul > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.\[\&_ul\]\:pl-5 ul {
  padding-left: 1.25rem;
}

.\[\&_ul\]\:pl-6 ul {
  padding-left: 1.5rem;
}

.\[\&_ul\]\:opacity-70 ul {
  opacity: 0.7;
}
/* ==========================================================================
   HAND-WRITTEN: form validation states
   --------------------------------------------------------------------------
   Appended by hand, not generated. assets/css/style.css is compiled Tailwind
   output and the repository contains no tailwind.config.js, package.json, or
   build script, so it cannot be regenerated. Keep additions below this marker
   so they are obvious to anyone who later restores the build pipeline.
   ========================================================================== */

/* Honeypot. Must be reachable by a bot parsing the DOM but invisible and
   unfocusable for humans, so display:none is deliberately avoided — some bots
   skip hidden inputs, which would defeat the trap. */
.form-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.form-error {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #c0392b;
}

.form-error::before {
    content: "";
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    margin-right: 0.375rem;
    vertical-align: -2px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.2a.8.8 0 01.8.8v3.6a.8.8 0 01-1.6 0V5a.8.8 0 01.8-.8zm0 6.4a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.2a.8.8 0 01.8.8v3.6a.8.8 0 01-1.6 0V5a.8.8 0 01.8-.8zm0 6.4a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Error state on the control itself. Colour is not the only signal — the
   inline .form-error message carries the meaning, per WCAG 1.4.1. */
[aria-invalid="true"] {
    border-color: #c0392b !important;
}

[aria-invalid="true"]:focus {
    border-color: #c0392b !important;
    outline: 2px solid rgba(192, 57, 43, 0.25);
    outline-offset: 1px;
}

/* Form-level error summary. Receives focus on failed submit so screen-reader
   and keyboard users are told what happened without hunting for it. */
.form-alert {
    padding: 0.875rem 1rem;
    border: 1px solid rgba(192, 57, 43, 0.35);
    border-left: 3px solid #c0392b;
    border-radius: 4px;
    background: rgba(192, 57, 43, 0.06);
    color: #8e2b20;
    font-size: 0.9375rem;
}

.form-alert:focus {
    outline: 2px solid rgba(192, 57, 43, 0.4);
    outline-offset: 2px;
}

.form-alert ul {
    margin: 0.5rem 0 0;
    padding-left: 1.125rem;
    list-style: disc;
}

.form-alert li + li {
    margin-top: 0.25rem;
}

.form-alert a {
    color: #8e2b20;
    text-decoration: underline;
}

.form-status:not(:empty) {
    padding: 0.875rem 1rem;
    border-left: 3px solid #286a69;
    border-radius: 4px;
    background: rgba(40, 106, 105, 0.08);
    color: #1f5453;
    font-size: 0.9375rem;
}

button[aria-busy="true"] {
    opacity: 0.7;
    cursor: progress;
}

/* ==========================================================================
   HAND-WRITTEN: testimonials wall (components/testimonials.php)
   --------------------------------------------------------------------------
   Appended by hand, like the block above — this file is compiled Tailwind with
   no build script, so utilities that aren't already here don't exist. The wall
   needs a 768px split (md:hidden, md:grid-cols-3) that the compiled output does
   not contain, so it is written as scoped classes instead, matching how
   .testimonials-grid and .testimonial-card are already written at ~1641.

   Everything is scoped under .testimonial-wall, which only the wall component
   renders. That is what lets the card styling at 1749-1815 stay shared with
   components/testimonials-video.php without the two fighting.

   Custom properties are --wall-*, never --tw-* — Tailwind's own output sets
   --tw-translate-x, --tw-bg-opacity and friends on these same elements.
   ========================================================================== */

/* ---------- shell: mobile first, a plain static stack ---------- */
.testimonial-wall-viewport {
    position: relative;
}

.testimonial-wall {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: 1fr;
}

/* Both are flex so margins cannot collapse. That is what keeps the two halves
   of a track exactly equal, which the -50% keyframe below depends on. */
.testimonial-wall-track,
.testimonial-wall-copy {
    display: flex;
    flex-direction: column;
}

.testimonial-wall-copy--dup {
    display: none;
}

/* margin-bottom, NOT gap. With gap, a track of 2N cards is
   sum(h) + (2N-1)*24 and half of it lands 12px off, so the loop drifts
   visibly every cycle. A uniform bottom margin makes half exactly N*(h+24). */
.testimonial-wall .testimonial-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

.testimonial-wall .testimonial-user {
    margin-top: auto;
    padding-top: 1.5rem;
}

/* ---------- six-line clamp ---------- */
.testimonial-wall .testimonial-text p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

.testimonial-wall .testimonial-card.is-expanded .testimonial-text p {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: visible;
}

/* ---------- buttons ---------- */
/* Every card renders a Read more button; JS adds .is-clipped to the cards whose
   text actually overflows six lines and this reveals it there. Hidden by default
   rather than rendered-then-removed, so nothing flashes before JS measures.
   How much text fits depends on the column width, so this cannot be decided in
   PHP from a character count — see the note in components/testimonials.php. */
.testimonial-readmore {
    display: none;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.8;
    cursor: pointer;
}

.testimonial-card.is-clipped > .testimonial-text > .testimonial-readmore {
    display: inline-block;
}

.testimonial-readmore:hover {
    opacity: 1;
}

.testimonial-wall-controls {
    display: none;
}

.testimonial-wall-toggle {
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgb(255 255 255 / 0.15);
    border-radius: 9999px;
    opacity: 0.8;
    cursor: pointer;
}

.testimonial-wall-toggle:hover {
    opacity: 1;
    border-color: rgb(255 255 255 / 0.35);
}

.testimonial-wall-more {
    display: block;
    margin: 1.5rem auto 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 1.5rem;
    border: 1px solid rgb(255 255 255 / 0.15);
    border-radius: 9999px;
    opacity: 0.9;
    cursor: pointer;
}

.testimonial-wall-more:hover {
    opacity: 1;
    border-color: rgb(255 255 255 / 0.35);
}

/* No ring-* or focus-visible:* utilities exist in the compiled output, and this
   sits on a near-black background, so focus has to be drawn by hand. */
.testimonial-readmore:focus-visible,
.testimonial-wall-toggle:focus-visible,
.testimonial-wall-more:focus-visible,
.testimonial-wall a:focus-visible {
    outline: 2px solid rgb(255 255 255 / 0.7);
    outline-offset: 3px;
}

/* Declared here as well as in the desktop block so they never flash before
   layout settles. */
.testimonial-wall-fade {
    display: none;
}

/* ---------- mobile collapse ---------- */
@media (max-width: 767.98px) {
    .testimonial-wall.is-collapsed .testimonial-card.is-overflow {
        display: none;
    }
}

/* ---------- desktop: three scrolling columns ---------- */
@media (min-width: 768px) {
    .testimonial-wall {
        margin-top: 5rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 1.5rem;
        row-gap: 0;
        height: var(--wall-h, 680px);
        overflow: hidden;
    }

    .testimonial-wall-copy--dup {
        display: flex;
    }

    /* Guarantees the shortest half-track (3 cards -> 3 * (260 + 24) = 852px)
       stays taller than the wall, so no blank gap appears at the wrap. */
    .testimonial-wall .testimonial-card {
        min-height: 260px;
    }

    .testimonial-wall-track {
        animation: testimonial-wall-scroll var(--wall-dur, 76s) linear infinite;
        will-change: transform;
    }

    /* Same keyframe, run backwards — animation-play-state still works on it. */
    .testimonial-wall-col--reverse .testimonial-wall-track {
        animation-direction: reverse;
    }

    .testimonial-wall.is-paused .testimonial-wall-track {
        animation-play-state: paused;
    }

    .testimonial-wall-controls {
        display: flex;
        justify-content: flex-end;
        margin-top: 1.5rem;
    }

    .testimonial-wall-more {
        display: none;
    }

    /* Gradient overlays rather than mask-image: the same approach the older
       marquee uses, over a known solid #051D1A. They live in the viewport
       wrapper because any child of .testimonial-wall becomes a grid item. */
    .testimonial-wall-fade {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        height: 5rem;
        z-index: 10;
        pointer-events: none;
    }

    .testimonial-wall-fade--top {
        top: 0;
        background: linear-gradient(to bottom, #051D1A, rgb(5 29 26 / 0.9) 45%, rgb(5 29 26 / 0));
    }

    .testimonial-wall-fade--bottom {
        bottom: 0;
        background: linear-gradient(to top, #051D1A, rgb(5 29 26 / 0.9) 45%, rgb(5 29 26 / 0));
    }
}

@media (min-width: 1280px) {
    .testimonial-wall {
        --wall-h: 960px;
    }
}

@keyframes testimonial-wall-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, -50%, 0);
    }
}

/* ---------- reduced motion: three static columns, no clones ---------- */
@media (prefers-reduced-motion: reduce) {
    .testimonial-wall {
        height: auto !important;
        overflow: visible;
    }

    .testimonial-wall-track {
        animation: none !important;
        will-change: auto;
    }

    .testimonial-wall-copy--dup {
        display: none !important;
    }

    .testimonial-wall-fade,
    .testimonial-wall-controls {
        display: none !important;
    }
}

/* ==========================================================================
   HAND-WRITTEN: case studies
   (caseStudyDetails.php, caseStudy.php)
   --------------------------------------------------------------------------
   Appended by hand, like the two blocks above. assets/css/style.css is
   compiled Tailwind v3.4.17 output and the repository contains no
   tailwind.config.js, package.json, or build script — those files have never
   existed in git history — so any utility not already among the ~700 compiled
   selectors simply does not exist and cannot be generated.

   Everything the case-study redesign needed that was missing from the compiled
   output, and therefore had to be written here instead:

     px-6 px-8 py-20 py-24 pt-8 p-10 gap-16 grid-cols-3 grid-cols-4 text-2xl
     space-y-12 space-y-16 rounded-xl rounded-2xl shadow-sm shadow-md bg-mint
     bg-primary/10 border-l-4 divide-y self-start tracking-wide list-none
     lg:text-lg lg:text-xl gap-x-6 gap-y-4 lg:order-* ring-* focus-visible:*

   Scope: every selector below is .cs- prefixed and is emitted only by the two
   case-study templates. Nothing here can reach the 15 other pages that render
   .case-card / .case-studies-grid (styled at 1543-1626 and left untouched).

   Custom properties, if any are added later, must be --cs-* and never --tw-* —
   Tailwind's own compiled output already sets --tw-* on these same elements.

   Tokens: primary #286A69  secondary #86B7B6  dark #202828  darkGreen #051D1A
           border #EAEAEA  offWhite #F9F9F9  lightGray #D9D9D9  mint #EFFFF8
   Timings follow the house pair, 0.15s and 0.3s on var(--ease-default).
   ========================================================================== */

/* ---------------------------------------------------------------- hero ---- */

.cs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #286A69;
}

.cs-eyebrow::before {
    content: "";
    width: 1.5rem;
    height: 1px;
    background: #286A69;
}

.cs-lead {
    margin-top: 1.25rem;
    max-width: 780px;
    font-size: 1rem;
    line-height: 1.7;
    color: rgb(32 40 40 / 0.75);
}

/* The NDA disclosure. Deliberately a plain bordered note rather than a badge:
   it is an explanation the reader needs, not a decoration. */
.cs-note {
    margin-top: 2rem;
    max-width: 780px;
    padding: 0.875rem 1rem;
    border-left: 3px solid #286A69;
    background: rgb(40 106 105 / 0.06);
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgb(32 40 40 / 0.8);
}

/* The hero banner. Capped rather than given a fixed aspect ratio: at 1280px an
   aspect-[16/10] banner is ~780px tall, which pushes the narrative below a full
   viewport before the reader has seen a word of it. height:auto lets the
   intrinsic ratio apply until max-height clamps it, and object-fit crops the
   overflow. The compiled output has only aspect-[16/10], aspect-square and
   lg:aspect-video, none of which give this. */
.cs-hero-banner {
    margin-top: 2.5rem;
    width: 100%;
    height: auto;
    max-height: 380px;
    border-radius: 0.5rem;
    -o-object-fit: cover;
       object-fit: cover;
}

/* ------------------------------------------------------ snapshot band ---- */

.cs-snapshot {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid #EAEAEA;
    border-radius: 0.25rem;
    background: #F9F9F9;
    overflow: hidden;
}

.cs-snapshot-item {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #EAEAEA;
}

.cs-snapshot-item:first-child {
    border-top: 0;
}

.cs-snapshot-label {
    margin: 0 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(32 40 40 / 0.55);
}

.cs-snapshot-value {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #202828;
}

/* -------------------------------------------------- service/tech chips --- */

.cs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.cs-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border: 1px solid rgb(32 40 40 / 0.12);
    border-radius: 0.25rem;
    background: #FFFFFF;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgb(32 40 40 / 0.8);
}

/* ------------------------------------------------------------ outcomes --- */

.cs-outcomes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}

.cs-outcome {
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    border: 1px solid #EAEAEA;
    border-left: 3px solid #286A69;
    border-radius: 0.25rem;
    background: #EFFFF8;
    transition: border-color 0.3s var(--ease-default);
}

.cs-outcome:hover {
    border-color: rgb(40 106 105 / 0.35);
    border-left-color: #286A69;
}

.cs-outcome-title {
    margin: 0 0 0.375rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    color: #202828;
}

.cs-outcome-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgb(32 40 40 / 0.75);
}

/* ------------------------------------------- optional in-body figure ----- */

.cs-figure {
    margin: 2rem 0 0;
}

.cs-figure img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    -o-object-fit: cover;
       object-fit: cover;
}

.cs-figure figcaption {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgb(32 40 40 / 0.6);
}

/* --------------------------------------------- conditional testimonial --- */
/* Renders ONLY when the study links a real data/testimonials.json entry via
   its testimonialId. There is deliberately no placeholder variant: an
   unattributed quote block is worse than an absent one. */

.cs-quote-inner {
    margin: 0 auto;
    max-width: 820px;
    text-align: center;
}

.cs-quote-logo {
    height: 2.5rem;
    width: auto;
    margin: 0 auto 1.75rem;
    /* House idiom for recolouring a dark asset onto a dark ground. */
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.cs-quote-text {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: rgb(255 255 255 / 0.92);
}

.cs-quote-person {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.cs-quote-avatar {
    height: 3rem;
    width: 3rem;
    flex: none;
    border-radius: 9999px;
    -o-object-fit: cover;
       object-fit: cover;
}

.cs-quote-name {
    margin: 0;
    font-weight: 500;
    color: #FFFFFF;
    text-align: left;
}

.cs-quote-role {
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    color: rgb(255 255 255 / 0.7);
    text-align: left;
}

.cs-quote-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    flex: none;
    margin-left: 0.25rem;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: 0.25rem;
    transition: border-color 0.15s var(--ease-default);
}

.cs-quote-link:hover {
    border-color: #286A69;
}

/* No ring-* or focus-visible:* utilities exist in the compiled output and this
   sits on a near-black background, so focus has to be drawn by hand. */
.cs-quote-link:focus-visible {
    outline: 2px solid rgb(255 255 255 / 0.7);
    outline-offset: 3px;
}

/* ------------ engagement facts: the slot the testimonial would occupy ----- */
/* Used when a study has no linked testimonial, so the page keeps its rhythm
   without either an empty gap or an invented voice. */

.cs-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.cs-facts-label {
    margin: 0 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.55);
}

.cs-facts-value {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgb(255 255 255 / 0.9);
}

.cs-facts .cs-chip {
    border-color: rgb(255 255 255 / 0.2);
    background: transparent;
    color: rgb(255 255 255 / 0.85);
}

/* ------------------------------------------ listing rows (caseStudy.php) - */

.cs-row {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid rgb(32 40 40 / 0.1);
    border-radius: 0.25rem;
    background: #F9F9F9;
    overflow: hidden;
    transition: border-color 0.3s var(--ease-default);
}

.cs-row:hover {
    border-color: rgb(40 106 105 / 0.35);
}

.cs-row-media {
    position: relative;
    min-height: 240px;
    background: #D9D9D9;
}

.cs-row-media img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.cs-row-badge {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.125rem;
    background: rgb(255 255 255 / 0.92);
    font-size: 0.8125rem;
    color: #202828;
}

/* An anonymised study has no brand tile to show, so the row runs full width
   and carries the badge inline instead. */
.cs-row-badge--inline {
    position: static;
    display: inline-flex;
    align-self: flex-start;
    background: rgb(40 106 105 / 0.1);
    color: #286A69;
}

.cs-row-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1.25rem 2rem;
}

.cs-row-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.35;
}

.cs-row-title a {
    color: #202828;
    transition: color 0.15s var(--ease-default);
}

.cs-row-title a:hover {
    color: #286A69;
}

.cs-row-title a:focus-visible {
    outline: 2px solid #286A69;
    outline-offset: 2px;
}

.cs-row-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgb(32 40 40 / 0.75);
}

/* A real, attributed pull-quote. Rendered only where a testimonials.json entry
   is linked, so it can never carry an invented name. */
.cs-row-pull {
    margin: 0;
    padding-left: 1rem;
    border-left: 2px solid rgb(40 106 105 / 0.4);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgb(32 40 40 / 0.8);
}

.cs-row-pull cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    font-size: 0.8125rem;
    color: rgb(32 40 40 / 0.6);
}

.cs-row-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.5rem;
    font-weight: 500;
    color: #286A69;
    transition: gap 0.3s var(--ease-default);
}

.cs-row-link:hover {
    gap: 0.75rem;
}

.cs-row-link:focus-visible {
    outline: 2px solid #286A69;
    outline-offset: 2px;
}

.cs-row-link svg {
    height: 0.875rem;
    width: 0.875rem;
}

/* ------------------------------------------------------------- 640px ----- */
@media (min-width: 640px) {
    .cs-snapshot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs-snapshot-item {
        border-top: 0;
        border-left: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;
    }

    .cs-snapshot-item:nth-child(2n + 1) {
        border-left: 0;
    }

    .cs-snapshot-item:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .cs-outcomes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------ 1024px ----- */
@media (min-width: 1024px) {
    .cs-lead {
        font-size: 1.125rem;
    }

    .cs-note {
        font-size: 0.9375rem;
    }

    .cs-hero-banner {
        margin-top: 4rem;
        max-height: 520px;
    }

    /* Columns follow the cell count rather than being fixed at four. An
       anonymous study suppresses the Client cell, and repeat(4, 1fr) would
       leave its three cells sitting in three quarters of the strip with an
       empty quarter beside them. */
    .cs-snapshot {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }

    /* Reset the 640px two-column rules wholesale before re-applying the
       single-row ones, or cell 3 loses its divider and cells 3-4 keep a
       bottom border they should not have. */
    .cs-snapshot-item,
    .cs-snapshot-item:nth-child(2n + 1) {
        border-bottom: 0;
        border-left: 1px solid #EAEAEA;
    }

    .cs-snapshot-item:first-child {
        border-left: 0;
    }

    .cs-quote-text {
        font-size: 1.25rem;
    }

    .cs-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cs-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }

    /* A row with no media tile keeps a single full-width column. */
    .cs-row--nomedia {
        grid-template-columns: 1fr;
    }

    .cs-row-media {
        min-height: 380px;
    }

    .cs-row-body {
        padding: 2.5rem 2.5rem 2.5rem 2rem;
        gap: 1.25rem;
    }

    .cs-row-title {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    /* Alternate the image side down the list. md:order-1/md:order-2 exist in
       the compiled output but lg:order-* does not, and the switch belongs at
       the point the row becomes two columns, which is 1024px.
       Note: the JS filter hides rows with display:none without reindexing, so
       after filtering two consecutive rows can share a side. Cosmetic only. */
    .cs-row:nth-child(even) .cs-row-media {
        order: 2;
    }

    .cs-row:nth-child(even) .cs-row-body {
        order: 1;
        padding: 2.5rem 2rem 2.5rem 2.5rem;
    }
}

/* ---------------------------------------------------- reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
    .cs-outcome,
    .cs-row,
    .cs-row-link,
    .cs-row-title a,
    .cs-quote-link {
        transition: none;
    }
}

/* ========================================================================= */
/* MOBILE UX FIXES                                                           */
/*                                                                           */
/* Findings from the 375x812 review. This block is last in the file so it    */
/* wins ties against the compiled Tailwind output above without !important.  */
/* Everything here is either mobile-only or a colour correction, so the      */
/* desktop rendering is unchanged.                                           */
/* ========================================================================= */

/* --- 01. Tap targets -----------------------------------------------------
   Every button rendered at 38-40px tall: 14px/20px text plus 0.5rem padding
   and a 2px border. WCAG 2.5.5 and the Apple HIG both put the floor at 44px.
   min-height only grows the short ones; the md+ padding bump already clears
   44px on its own, so desktop metrics do not move. */
.btn {
    min-height: 44px;
}

/* The services and case-study cards were divs with a small link inside, so a
   tap anywhere on the card did nothing. Stretching the single anchor over its
   card makes the whole card the hit area while keeping one accessible name
   and no nested anchors. The card needs to be the positioning context. */
.systems-card,
.case-card {
    position: relative;
}

.systems-card a::after,
.case-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Above the card background, below anything interactive added later. */
    z-index: 1;
}

/* The stretched anchor must not trap text selection on the copy underneath. */
.systems-card a,
.case-card-link {
    -webkit-tap-highlight-color: transparent;
}

/* Give the visible link text a real vertical target of its own, for anyone
   who does aim at the words rather than the card. */
.case-card-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* --- 02. Contrast --------------------------------------------------------
   Two AA failures measured on the rendered page:
     .systems-card a  #709C9B on #FFFFFF -> 3.04:1
     .cta-section .btn-outline  #286A69 on #051D1A -> 2.80:1
   AA needs 4.50:1 for text at these sizes. */

/* 5.06:1 on white, and still lighter than the primary so the hierarchy
   between the button and the inline link is preserved. */
.systems-card a {
    color: rgb(47 122 115);
}

/* On the dark green ground the outline button has to invert: mid-green text
   on near-black green cannot reach 4.5:1 at any usable saturation. White text
   on #051D1A is 17.5:1, and the border carries the "secondary" signal. */
.cta-section .btn-outline,
.bg-darkGreen .btn-outline {
    border-color: rgb(255 255 255 / 0.45);
    color: rgb(255 255 255);
}

.cta-section .btn-outline:hover,
.bg-darkGreen .btn-outline:hover {
    background-color: rgb(255 255 255);
    border-color: rgb(255 255 255);
    color: rgb(5 29 26);
}

/* --- 06. Reclaim the "enterprise-grade" dead space -----------------------
   index.php applied min-h-[320px] at every breakpoint, so on a phone each
   card held an icon, ~430px of nothing, and a title pinned to the bottom by
   justify-between: about 1,300px of empty scrolling.
   The markup now says md:min-h-[320px], but this is a prebuilt Tailwind file
   with no build step and the compiled output only ever contained the
   unprefixed .min-h-[320px] (line 3485). The responsive variant is therefore
   defined by hand here, matching Tailwind's md breakpoint exactly, so the
   desktop rendering is byte-for-byte what it was. */
@media (min-width: 768px) {
    .md\:min-h-\[320px\] {
        min-height: 320px;
    }
}

/* The section goes two-column at lg, which is where the watermark has a
   column height to fill. Below that it is pure empty space. */
.enterprise-watermark {
    display: none;
}

@media (min-width: 1024px) {
    .enterprise-watermark {
        display: block;
    }
}

/* --- 08. Why Teams Choose Vital: accordion instead of a hidden tab strip --
   Replaces the scroll-spy tab strip below lg. See components/whyChooseVital.php
   for why. The desktop grid (.why-choose-vital-grid) is untouched. */
.why-choose-accordion {
    border-top: 1px solid rgb(32 40 40 / 0.15);
}

.wcv-item {
    border-bottom: 1px solid rgb(32 40 40 / 0.15);
}

.wcv-question {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    /* 44px floor for the tap target, with room for two-line titles. */
    min-height: 56px;
    padding: 0.875rem 0;
    text-align: left;
    color: rgb(32 40 40);
    transition: color 0.2s var(--ease-default);
}

.wcv-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.wcv-title {
    flex: 1 1 auto;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 500;
}

/* Drawn in CSS rather than shipping another icon request. */
.wcv-chevron {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.375rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.25s var(--ease-default);
    opacity: 0.55;
}

.wcv-item.open .wcv-question {
    color: rgb(40 106 105);
}

.wcv-item.open .wcv-chevron {
    transform: rotate(-135deg);
    opacity: 1;
}

/* Animated with jQuery slideUp/slideDown, matching the FAQ accordion, so the
   panel is display-toggled rather than height-transitioned. */
.wcv-panel {
    display: none;
}

.wcv-item.open .wcv-panel {
    display: block;
}

.wcv-panel-inner {
    padding-bottom: 1.5rem;
}

.wcv-panel-inner p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgb(32 40 40 / 0.7);
}

.wcv-image {
    display: block;
    margin: 0 auto 1rem;
    max-width: 220px;
    width: 100%;
    height: auto;
}

/* --- 07. Closing CTA: full-width buttons, no trailing void ----------------
   The buttons were pinned to 250px below sm, so "Request a System Review"
   wrapped onto two lines inside a box narrower than the column it sat in.
   Below sm they now fill the column; the 640px rule above still switches
   them back to fit-content, so desktop is unchanged. */
@media (max-width: 639.98px) {
    .system-blocks-btn .btn {
        width: 100%;
    }

    .system-blocks-btn {
        gap: 0.75rem;
    }
}

/* The right-hand column is a decorative Lottie sized for a half-width desktop
   column. Stacked under the copy on a phone it reserved most of a screen and
   drew one small block in the middle of it. Capping the width closes the gap
   without removing the artwork. Paired with the 1:1 aspect-ratio below, this
   also caps the height, so the reserved box is 260px rather than a screen. */
@media (max-width: 1023.98px) {
    .cta-section lottie-player {
        max-width: 260px;
        margin-inline: auto;
    }
}

/* --- 09/10. System diagram + deferred Lottie players ----------------------
   Two related changes, kept in one block because their selectors interact.

   (a) The system diagram Lottie is a 1258x457 canvas whose labels are baked
       vector paths, so at 375px they rendered around 5-7px tall. Below md a
       static SVG restates the same content stacked vertically at a readable
       size. Exactly one of the two is displayed at any width.

       The canvas was authored at 1226 wide but its artwork runs to x=1251 -
       the white card ends at 1242 and the right-hand box at 1240 - so both
       the root clip and the main precomp clip (layer ind 3578) sliced the
       right edge off at every viewport width. system-that.json now carries
       w:1258 on both, which clears the widest art and leaves the card at
       16 -> 1242, i.e. an equal 16-unit margin on each side.

   (b) Players deferred with data-lottie-src have no src, so they render
       nothing and collapse to height 0 - and an IntersectionObserver
       watching a zero-height element never fires, so the animation would
       never load at all. Reserving the animation's own aspect ratio gives
       the observer something to hit and stops the layout jumping when the
       frame arrives. Ratios are the canvas dimensions from the JSON.

   The ratio is applied unconditionally rather than only while src is absent:
   scoping it to :not([src]) made the box collapse the moment the src landed
   and reappear once the first frame rendered, which is a layout shift. Each
   ratio matches its animation, so the reserved box is the final box. */

.system-diagram-mobile {
    max-width: 340px;
}

.cta-section .lottie-on-view {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;      /* cta.json is 778 x 778 */
}

.system-diagram-lottie {
    display: block;
    width: 100%;
    aspect-ratio: 1258 / 457; /* system-that.json */
}

.hero-lottie {
    display: block;
    width: 100%;
    aspect-ratio: 1249 / 419; /* hero.json */
}

/* The swap. Both selectors are single-class, so plain source order decides. */
@media (min-width: 768px) {
    .system-diagram-mobile,
    .hero-mobile {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .system-diagram-lottie,
    .hero-lottie {
        display: none;
    }
}

/* --- 04. Case-study card headings ----------------------------------------
   The card gained a real title and the sector line from the data. The card is
   a flex column with a 1.25rem gap, so the heading block sets its own tighter
   internal spacing and relies on the parent gap for separation. */
.case-card-heading {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* Pull the title up under the image; the card gap is sized for prose. */
    margin-top: -0.5rem;
}

.case-card-title {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 500;
    color: rgb(32 40 40);
}

.case-card-badge {
    font-size: 0.8125rem;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(32 40 40 / 0.6);
}

@media (min-width: 1024px) {
    .case-card-title {
        font-size: 1.5rem;
    }
}

/* --- 11. Client logo marquee ---------------------------------------------
   This is the section that has to carry client credibility, and it was doing
   the opposite: pale marks adrift in whitespace on desktop, logos guillotined
   mid-word on a phone.

   Most of the damage was in the assets, and is fixed in the assets — see
   tools/build-client-logos.php. The originals were 256x130 with an opaque white
   background and the mark filling only 14-37% of the height, so `height:100%`
   plus object-fit:contain rendered an 18-47px mark inside a 128px row, at sizes
   that varied ~2.5x between logos. The tool crops each one to its ink and
   rescales it to a shared optical weight on a uniform 300x88 canvas, which is
   why everything below can assume one fixed aspect and one fixed size.

   What the CSS still has to do:

     Frame them. A logo alone on white has nothing to push against, and several
     of these are light grey (Smart Vent, Proximity Plumbing). A tinted band with
     white cards gives every mark its own edge and its own contrast, and papers
     over the fact that the shapes are wildly mismatched — a wordmark and a
     roundel look deliberate side by side once both sit in the same card.

     Stop cutting words in half. .clients-row is overflow:hidden inside a padded
     container, so the track was chopped at a hard vertical line one rem in from
     the screen edge. Below xl the rows are pulled out to full bleed and both
     ends are masked to a fade, so the strip reads as continuing past the screen
     rather than being sliced by it.

   Sizes are driven by the artwork: the 300x88 canvas is 3.41:1, and every logo
   box below holds that ratio, so object-fit:contain never letterboxes.

   Everything is scoped to .clients-section, never to the $pagePrefix-clients
   class beside it — six industry pages include this component before they
   assign $pagePrefix and therefore emit `page-clients`. .clients-section is on
   every instance.

   Deliberately absent: any filter, opacity or grayscale trick on the logos.
   These are other companies' brand marks; size and framing do the work. */

.clients-section {
    background-color: #F9F9F9;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.clients-marquee {
    margin-top: 1.75rem;
    /* Guards the page against horizontal scroll from the negative margins and
       the max-content track below. */
    overflow: hidden;
}

/* Full bleed below xl. Under 1280px .container-main is width:100% with exactly
   1rem of padding, so -1rem lands precisely on the viewport edge. At and above
   1280px it becomes a centred 1280px max-width and the same negative margin
   would push the rows wider than the viewport between 1280 and 1312px, which is
   a horizontal scrollbar on a very common laptop width. */
@media (max-width: 1279.98px) {
    .clients-marquee {
        margin-left: -1rem;
        margin-right: -1rem;
    }
}

.clients-row {
    /* The clip becomes a fade. Fixed lengths rather than percentages, so the
       fade is the same physical width on a phone and on a 1440px desktop, and
       sized to roughly one card: anything narrower leaves the cut card's own
       white edge visible through the gradient and the hard line survives. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
}

.clients-row + .clients-row {
    margin-top: 0.625rem;
}

/* Overrides .clients-row-item at 1284-1297 (height + width:fit-content) and
   Swiper's .swiper-slide, whose width:100% and box-sizing:content-box both
   arrive from swiper-bundle.min.css — loaded first, so these later rules of
   equal specificity win. box-sizing is restated rather than inherited because
   content-box would add the border on top of the width and break the pitch the
   translateX(-50%) loop depends on. */
.clients-row-item {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 152px;
    height: 72px;
    margin-left: 0.375rem;
    margin-right: 0.375rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border: 1px solid #EAEAEA;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgb(32 40 40 / 0.04);
}

.clients-row-item img {
    width: 124px;
    height: 36px;
    object-fit: contain;
    object-position: center;
}

@media (min-width: 768px) {
    .clients-row-item {
        width: 176px;
        height: 84px;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .clients-row-item img {
        width: 142px;
        height: 42px;
    }
}

@media (min-width: 1024px) {
    .clients-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .clients-marquee {
        margin-top: 2.5rem;
    }

    .clients-row {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
    }

    .clients-row + .clients-row {
        margin-top: 0.875rem;
    }

    .clients-row-item {
        width: 196px;
        height: 96px;
        margin-left: 0.625rem;
        margin-right: 0.625rem;
    }

    .clients-row-item img {
        width: 156px;
        height: 46px;
    }
}

/* The track is 20 tiles wide and the loop travels half of it. At the tile pitch
   above that is ~33px/s on a phone and ~62px/s on a desktop: slow enough that a
   logo is legible for the whole time it is on screen. */
@media (max-width: 767.98px) {
    .animate-marquee .swiper-wrapper,
    .animate-marquee-reverse .swiper-wrapper {
        animation-duration: 50s;
    }
}

/* --- 12. Reduced motion --------------------------------------------------
   The existing blocks (see 'reduced motion' above, and the testimonial wall)
   cover the wall and the case-study transitions but not the logo marquee or
   the Lottie players, so someone with the OS preference set still had four
   things moving at once. WCAG 2.2.2 wants a way to stop anything that moves
   for more than five seconds.

   lottie-player has no CSS-level pause, so the players are hidden rather than
   frozen mid-frame; all three are decorative, and the diagram's content is
   carried by the static SVG on mobile and by the surrounding copy elsewhere. */
@media (prefers-reduced-motion: reduce) {
    .animate-marquee .swiper-wrapper,
    .animate-marquee-reverse .swiper-wrapper,
    .animate-marquee-vertical .swiper-wrapper {
        animation: none;
        /* Without the animation the track sits at its start, so let it scroll
           manually instead of stranding the logos off-screen. */
        transform: none;
    }

    .animate-marquee,
    .animate-marquee-reverse {
        overflow-x: auto;
    }

    lottie-player {
        display: none;
    }

    .wcv-panel,
    .wcv-chevron,
    .btn,
    .systems-card,
    .case-card img {
        transition: none;
    }
}

/* --- 13. Mobile reading comfort ------------------------------------------
   Body copy was 14px/20px across a 21-screen page. 16px/24px is the
   comfortable floor on a phone. Scoped below sm so the existing lg sizes,
   and every other breakpoint, are untouched. */
@media (max-width: 639.98px) {
    .description,
    .description-lg {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

/* --- 14. Mobile drawer ---------------------------------------------------
   .mainNav is the off-canvas panel below 768px and a normal bar above it, so
   both rules below stop at that breakpoint.

   The top-level rows measured 288 x 28: every tap a near-miss. Padding brings
   them to 44px without changing the type. */
.nav-mobile-only {
    display: block;
}

@media (min-width: 768px) {
    .nav-mobile-only {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .mainNav > ul > li > a {
        min-height: 44px;
        align-items: center;
    }

    /* Submenu rows were 39px. */
    .mainNav .dropdown-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* --- 16. Footer groups collapse on mobile --------------------------------
   Five desktop columns become five stacked lists on a phone: 1,268px, over a
   screen and a half, at the end of the longest page on the site. Below md the
   four link groups collapse behind their own titles; the brand column, social
   links and legal row stay open.

   The collapsing is applied by JS (see FOOTER GROUPS in assets/js/index.js),
   which adds .is-collapsible once it has given the title button semantics -
   so with JS off the footer simply stays fully expanded and usable. */
@media (max-width: 767.98px) {
    .footer-group.is-collapsible > .footer-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 44px;
        margin-bottom: 0;
        cursor: pointer;
        text-align: left;
        border-bottom: 1px solid rgb(255 255 255 / 0.12);
    }

    .footer-group.is-collapsible > .footer-title::after {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        margin-right: 0.375rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.25s var(--ease-default);
        opacity: 0.6;
    }

    .footer-group.is-collapsible.open > .footer-title::after {
        transform: rotate(-135deg);
        opacity: 1;
    }

    .footer-group.is-collapsible > .footer-list {
        display: none;
        padding-top: 0.75rem;
    }

    .footer-group.is-collapsible.open > .footer-list {
        display: block;
    }

    /* Footer links were ~24px tall in a 33px rhythm. */
    .footer-list a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}

/* --- 15. FAQ toggle icon -------------------------------------------------
   .faq-icon is h-4 w-4, but it is a flex child next to a growing text span,
   so on a narrow screen it was squeezed to 11px wide and the +/- rendered
   distorted. */
.faq-icon {
    flex-shrink: 0;
}

/* --- 17. Remaining tap targets -------------------------------------------
   The stragglers after 01: header logo (112x28), testimonial read-more
   (71x20) and its LinkedIn link (36x36), the wall's show-more button (42px),
   single-line FAQ questions (40px), the footer brand link and the legal row
   (20px). All are inline or auto-height boxes, so a min-height plus
   inline-flex centring fixes them without moving any text. */
@media (max-width: 767.98px) {
    .header a.z-10,
    .testimonial-readmore,
    .testimonial-wall-more,
    .faq-question,
    .footer-social,
    .footer-brand,
    footer .flex.flex-wrap > a {
        min-height: 44px;
    }

    .header a.z-10,
    .testimonial-readmore,
    .footer-social,
    .footer-brand,
    footer .flex.flex-wrap > a {
        display: inline-flex;
        align-items: center;
    }

    /* The testimonial card's LinkedIn link wraps a 36px icon. */
    .testimonial-linkedin {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- Focus visibility ----------------------------------------------------
   Stretched anchors have no visible box of their own, so focus has to be
   drawn on the card. */
.systems-card:has(a:focus-visible),
.case-card:has(.case-card-link:focus-visible) {
    outline: 2px solid rgb(40 106 105);
    outline-offset: 3px;
}

/* --- 18. Full-screen mobile menu -----------------------------------------
   Below 768px .mainNav was a 320px panel hung under the header, so on a
   375px phone roughly a third of the screen was a dimmed strip whose only
   job was to be a close target, and everything under the Contact button -
   the part of the display a thumb reaches most easily - was empty. It is now
   a full-viewport panel on the same darkGreen the footer uses, with the
   white logo, its own top bar, and the CTA pinned to the bottom.

   Section 14 above sized the old drawer's rows; the rules here supersede it
   below 768px. Desktop is deliberately untouched - see the min-width block
   directly below, which exists only to undo the two new wrappers.

   Palette, from the token list at the head of section 13:
     panel     #051D1A (darkGreen, same as the footer)
     accent    #86B7B6 (secondary - #286A69 is too dark to read on #051D1A)
     CTA fill  #286A69 (primary)
   ------------------------------------------------------------------------- */

/* Scroll lock while the panel is open. body.overflow-hidden, which this
   replaces, is ignored by iOS Safari; position:fixed is the only lock it
   honours. The offset is stashed and restored in JS - see MOBILE MENU in
   assets/js/index.js. Only ever applied below 768px. */
body.nav-locked {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* .nav-scroll and .nav-actions exist only for the mobile panel's three-band
   layout (fixed head / scrolling middle / pinned foot). display:contents
   drops their boxes so the desktop bar lays out exactly as it did.

   But display:contents removes boxes, not nodes: `.mainNav > ul` and
   `.mainNav > ul > li > a` (compiled Tailwind, around line 711) no longer
   match through the wrapper, so both are restated here for each breakpoint
   rather than hand-editing the generated block. */
@media (min-width: 768px) {
    .nav-panel-head,
    .nav-actions-direct {
        display: none;
    }

    .nav-scroll,
    .nav-actions {
        display: contents;
    }

    .mainNav .nav-scroll > ul {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2rem;
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .mainNav .nav-scroll > ul > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

@media (max-width: 767.98px) {
    /* The panel is always laid out and always full-viewport; .open toggles
       whether it is seen. Animating from display:none needs allow-discrete,
       which is too new to rely on here, so visibility carries the discrete
       step and opacity carries the motion. */
    .mainNav {
        position: fixed;
        inset: 0;
        top: 0;
        /* The header's logo link is a flex item carrying z-10, and z-index
           applies to flex items even while position:static - so without a
           stacking order of its own the panel renders underneath the dark
           logo it is supposed to replace. */
        z-index: 20;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        gap: 0;
        padding: 0;
        overflow: hidden;
        background-color: #051D1A;
        color: #fff;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s var(--ease-default), visibility 0.3s var(--ease-default);
    }

    .mainNav.open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    @media (prefers-reduced-motion: reduce) {
        .mainNav {
            transition: none;
        }
    }

    /* Matches the header's own geometry - container-main's 1rem gutter, the
       py-5 rhythm, a 44px button - so the logo and the X land on the same
       pixels the logo and hamburger occupied and nothing jumps on open. */
    .nav-panel-head {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1rem;
        border-bottom: 1px solid rgb(255 255 255 / 0.1);
    }

    .nav-panel-logo {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
    }

    .mainNav .closeBtn {
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid rgb(134 183 182 / 0.35);
        background-color: rgb(134 183 182 / 0.16);
    }

    .nav-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Rows run full-bleed with hairline separators instead of the old 1rem
       gap, so the whole width is the tap target. */
    .mainNav .nav-scroll > ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .mainNav .nav-scroll > ul > li > a {
        display: flex;
        min-height: 56px;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.875rem 1rem;
        border-top: 1px solid rgb(255 255 255 / 0.1);
        font-size: 1.1875rem;
        line-height: 1.5;
        color: #fff;
    }

    .mainNav .nav-scroll > ul > li:first-child > a {
        border-top: 0;
    }

    .mainNav a:hover,
    .mainNav .dropdown:hover > a,
    .mainNav .dropdown.open > a {
        color: #86B7B6;
    }

    .mainNav .chevron {
        filter: brightness(0) invert(1);
        opacity: 0.7;
    }

    .mainNav .dropdown.open > a .chevron {
        opacity: 1;
    }

    /* Submenus sit on a slightly lifted plane so an open section reads as
       nested rather than as more top-level rows. */
    .mainNav .dropdown-menu ul,
    .mainNav .mega-menu {
        border: 0;
        background-color: rgb(255 255 255 / 0.045);
    }

    .mainNav .mega-menu > :not([hidden]) ~ :not([hidden]) {
        border-color: rgb(255 255 255 / 0.08);
    }

    .mainNav .dropdown-menu li a {
        display: flex;
        min-height: 48px;
        align-items: center;
        gap: 0.625rem;
        margin-bottom: 0;
        padding: 0.6875rem 1rem;
        border-bottom: 1px solid rgb(255 255 255 / 0.07);
        font-size: 0.9rem;
        line-height: 1.35;
        color: rgb(255 255 255 / 0.88);
    }

    .mainNav .dropdown-menu li a:hover {
        background-color: rgb(40 106 105 / 0.55);
        color: #fff;
    }

    .mainNav .mega-menu li a img {
        flex-shrink: 0;
        filter: brightness(0) invert(1);
    }

    /* Solutions is 11 items across two groups. Sticking the group headings
       to the top of the scroller keeps "which list am I in" answered all
       the way down; the background has to be opaque for that to work. */
    .mainNav .nav-group-title {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 40px;
        padding: 0.625rem 1rem;
        border-bottom: 1px solid rgb(255 255 255 / 0.08);
        background-color: #0A2C28;
        font-size: 0.75rem;
        line-height: 1.2;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: #86B7B6;
    }

    /* Section 14's `.mainNav .dropdown-menu a` makes every link in the panel
       a 44px flex box. That is right for the rows, wrong for the heading's
       own link - it broke the bullet onto a line of its own and tripled the
       band's height. */
    .mainNav .dropdown-menu .nav-group-title a {
        display: inline;
        min-height: 0;
    }

    .mainNav .nav-group-title a,
    .mainNav .nav-group-title .text-primary {
        margin: 0;
        color: inherit;
    }

    /* Pinned foot. env() keeps the CTA clear of the iOS home indicator. */
    .nav-actions {
        flex-shrink: 0;
        padding: 1rem 1rem max(1.125rem, env(safe-area-inset-bottom));
        border-top: 1px solid rgb(134 183 182 / 0.25);
        background-color: rgb(40 106 105 / 0.28);
    }

    .mainNav .nav-actions a.contact-bin {
        margin-top: 0;
        width: 100%;
        min-height: 52px;
        border-color: transparent;
    }

    .nav-actions-direct {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .mainNav .nav-actions-direct a {
        flex: 1 1 0;
        display: flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        gap: 0.4375rem;
        border: 1px solid rgb(134 183 182 / 0.45);
        border-radius: 0.25rem;
        font-size: 0.875rem;
        color: #86B7B6;
    }

    .nav-actions-direct img {
        filter: brightness(0) invert(1);
        opacity: 0.8;
    }

    /* Focus has to be visible against #051D1A, and the page's teal outline
       is not. */
    .mainNav a:focus-visible,
    .mainNav button:focus-visible {
        outline: 2px solid #86B7B6;
        outline-offset: -2px;
    }
}