/* Global Base Styles */

*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; line-height: inherit; overflow-x: clip; }

/* Smoother same-origin page transitions (Chromium) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
  @supports not (view-transition-name: none) {
    body {
      animation: page-enter 0.32s ease-out both;
    }
  }
}

@keyframes page-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  body {
    animation: none !important;
  }
}
img, svg { display: block; vertical-align: middle; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { background: none; font: inherit; }

ul { list-style: none; margin: 0; padding: 0; }
h1, p { margin: 0; }

/* Theme */
.font-outfit { font-family: 'Outfit', sans-serif; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.text-brand-dark { color: #1C1C1C; }
.text-brand-muted { color: #333333; }
.text-brand-btn-text { color: #191919; }
.text-brand-teal { color: #1CB1A9; }
.text-brand-border { color: #525252; }
.text-white { color: #FFFFFF; }
.bg-white { background-color: #FFFFFF; }
.bg-brand-dark { background-color: #1C1C1C; }
.bg-brand-teal { background-color: #1CB1A9; }
.bg-brand-teal-hero { background-color: #1CB0A9; }
.bg-brand-border { background-color: #525252; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-800 { background-color: #1f2937; }
.bg-\[\#FFFFFF\] { background-color: #FFFFFF; }
.bg-\[\#1C1C1C\] { background-color: #1C1C1C; }
.bg-\[\#1CB1A9\] { background-color: #1CB1A9; }
.border-brand-border { border-color: #525252; }
.border-brand-teal { border-color: #1CB1A9; }
.border-gray-100 { border-color: #f3f4f6; }
.border-transparent { border-color: transparent; }
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.tracking-hero { letter-spacing: -1px; }

.hero-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 2.5rem;
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  letter-spacing: -1px;
  color: #1C1C1C;
}

.hero-heading-bold {
  font-weight: 600;
  color: #1C1C1C;
}

.hero-heading-light {
  font-weight: 300;
  color: #1C1C1C;
}

.hero-heading-word-needed {
  letter-spacing: -1px;
}

.hero-heading-dot {
  color: #1CB1A9;
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  letter-spacing: -1px;
  margin-left: -1px;
}

.hero-heading-br {
  display: block;
}

@media (min-width: 640px) {
  .hero-heading {
    font-size: 3.75rem;
  }
}

@media (min-width: 768px) {
  .hero-heading {
    font-size: 4.5rem;
  }
}

@media (min-width: 1024px) {
  .hero-heading {
    min-height: 0;
    line-height: 1;
    letter-spacing: -1px;
  }

  .hero-heading-light,
  .hero-heading-dot {
    line-height: 1;
    letter-spacing: -1px;
  }

  .hero-heading-dot {
    margin-left: -1px;
  }
}

@media (min-width: 1920px) {
  .hero-heading {
    min-height: 300px;
    font-size: 100px;
  }

  .hero-heading-light,
  .hero-heading-dot {
    font-size: 100px;
  }
}
.shadow-contact { box-shadow: 10px 24px 54px 0px rgba(0, 0, 0, 0.10); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 1920px;
  height: 70px;
  margin: 0 auto;
  padding: 0 1rem;
  min-width: 0;
}

.site-header__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.site-header__logo img {
  display: block;
  width: auto;
  height: 32px;
  max-width: 140px;
}

.site-header__desktop {
  display: none;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.site-header__nav {
  min-width: 0;
  flex-shrink: 1;
}

.site-header__links {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.site-header__link {
  display: inline-block;
  position: relative;
  overflow: hidden;
  perspective: 700px;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #1C1C1C;
  white-space: nowrap;
  transition: none;
}

.site-header__link:hover,
.site-header__link:focus {
  color: #1C1C1C;
}

.site-header__link-text {
  display: inline-block;
  transform: translateY(0) translateZ(0) rotateX(0deg);
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.site-header__link::after {
  content: attr(data-hover);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(100%) translateZ(0) rotateX(-90deg);
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.site-header__link:hover .site-header__link-text,
.site-header__link:focus .site-header__link-text {
  transform: translateY(-100%) rotateX(90deg);
}

.site-header__link:hover::after,
.site-header__link:focus::after {
  transform: translateY(0) translateZ(0) rotateX(0deg);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.site-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.site-header__btn--outline {
  border: 1px solid #525252;
  color: #191919;
  background-color: transparent;
}

.site-header__btn--outline:hover,
.site-header__btn--outline:focus {
  background-color: #f9fafb;
}

.site-header__btn--solid {
  border: 1px solid #1C1C1C;
  color: #ffffff;
  background-color: #1C1C1C;
}

.site-header__btn--solid:hover,
.site-header__btn--solid:focus {
  background-color: #1C1C1C;
  border-color: #1C1C1C;
}

.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.25rem;
  border: none;
  border-radius: 0;
  color: #1C1C1C;
  background: transparent;
  cursor: pointer;
}

.site-header__toggle-icon {
  width: 24px;
  height: 24px;
}

.site-header__toggle-icon--close {
  display: block;
}

/* Mobile Menu Toggle */
.site-header:has(#mobile-menu:target) .site-header__toggle--open {
  display: none !important;
}
.site-header:has(#mobile-menu:target) .site-header__toggle--close {
  display: inline-flex !important;
}
.site-header__toggle--close {
  display: none !important;
}

.site-header__mobile {
  display: none;
  border-top: 1px solid #f3f4f6;
  background-color: #ffffff;
}

@media (max-width: 1023px) {
  .site-header__mobile:target {
    display: block !important;
  }
}

@media (min-width: 1024px) {
  .site-header__mobile {
    display: none !important;
  }
}

.site-header__mobile-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem;
}

.site-header__mobile-link {
  display: block;
  position: relative;
  overflow: hidden;
  perspective: 700px;
  padding: 0.75rem;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  color: #1C1C1C;
  transition: none;
}

.site-header__mobile-link:hover,
.site-header__mobile-link:focus {
  background-color: transparent;
}

.site-header__mobile-link::after {
  content: attr(data-hover);
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  top: 0;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(100%) translateZ(0) rotateX(-90deg);
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.site-header__mobile-link:hover .site-header__link-text,
.site-header__mobile-link:focus .site-header__link-text {
  transform: translateY(-100%) rotateX(90deg);
}

.site-header__mobile-link:hover::after,
.site-header__mobile-link:focus::after {
  transform: translateY(0) translateZ(0) rotateX(0deg);
}

.site-header__btn {
  position: relative;
  overflow: hidden;
  perspective: 700px;
}

.site-header__btn::after {
  content: attr(data-hover);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  white-space: nowrap;
  transform: translateY(100%) translateZ(0) rotateX(-90deg);
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.site-header__btn:hover .site-header__link-text,
.site-header__btn:focus .site-header__link-text {
  transform: translateY(-100%) translateZ(0) rotateX(90deg);
}

.site-header__btn:hover::after,
.site-header__btn:focus::after {
  transform: translateY(0) translateZ(0) rotateX(0deg);
}

.site-header__mobile-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

.site-header__btn--mobile {
  width: 100%;
  padding: 0.75rem 2rem;
  font-size: 1.125rem;
}

@media (min-width: 640px) {
  .site-header__inner {
    height: 80px;
    padding: 0 1.5rem;
  }

  .site-header__logo img {
    height: 36px;
    max-width: 160px;
  }

  .site-header__mobile-list {
    padding: 1rem 1.5rem;
  }

  .site-header__mobile-ctas {
    flex-direction: row;
  }

  .site-header__btn--mobile {
    width: auto;
    flex: 1 1 0;
  }
}

@media (min-width: 768px) {
  .site-header__inner {
    padding: 0 2.5rem;
  }
}

@media (min-width: 1024px) {
  .site-header__inner {
    height: 80px;
    padding: 0 48px;
    gap: 1rem;
  }

  .site-header__logo img {
    height: 32px;
    max-width: 140px;
  }

  .site-header__desktop {
    display: flex;
    gap: 1rem;
  }

  .site-header__toggle {
    display: none;
  }

  .site-header__links {
    gap: 16px;
  }

  .site-header__link {
    font-size: 15px;
  }

  .site-header__actions {
    gap: 8px;
  }

  .site-header__btn {
    padding: 8px 14px;
    font-size: 14px;
  }
}

@media (min-width: 1920px) {
  .site-header__inner {
    height: 94px;
    padding: 0 120px;
  }

  .site-header__logo img {
    height: 40px;
    max-width: 189px;
  }

  .site-header__desktop {
    gap: 3rem;
  }

  .site-header__links {
    gap: 52px;
  }

  .site-header__link {
    font-size: 24px;
  }

  .site-header__actions {
    gap: 16px;
  }

  .site-header__btn {
    padding: 12px 32px;
    font-size: 20px;
  }
}

/* Layout */
.sticky { position: sticky; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.isolate { isolation: isolate; }
.z-0 { z-index: 0; }
.inset-0 { inset: 0; }
.h-full { height: 100%; }
.w-full { width: 100%; }

.top-0 { top: 0; }
.top-1\/2 { top: 50%; }
.right-4 { right: 1rem; }
.right-0 { right: 0; }
.bottom-14 { bottom: 3.5rem; }
.bottom-28 { bottom: 7rem; }
.z-10 { z-index: 10; }
.left-1\/2 { left: 50%; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.opacity-20 { opacity: 0.2; }
.object-cover { object-fit: cover; }
.object-right { object-position: right center; }
.mix-blend-luminosity { mix-blend-mode: luminosity; }
.mix-blend-soft-light { mix-blend-mode: soft-light; }
.bg-\[\#1CB1A9\] { background-color: #1CB1A9; }
.h-\[94px\] { height: 94px; }
.w-\[1920px\] { width: 1920px; }
.max-w-\[1920px\] { max-width: 1920px; }
.max-w-full { max-width: 100%; }
.max-w-none { max-width: none; }
.left-0 { left: 0; }

/* Hero video */
.hero-video {
  transform: rotate(180deg) scaleX(-1);
}

/* Hero Background */
.hero-bg-media {
  isolation: isolate;
  background-color: #ffffff;
  max-height: 930px;
}

/* Hero Background Tint */
@keyframes fadeInTint {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-bg-tint {
  opacity: 0;
  animation: fadeInTint 0.6s ease forwards;
  animation-delay: 0.2s;
}

.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-3 { margin-top: 0.75rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-\[60px\] { margin-top: 60px; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-\[20px\] { margin-bottom: 20px; }
.mb-6 { margin-bottom: 1.5rem; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-\[15px\] { height: 15px; }
.h-\[52px\] { height: 52px; }
.h-\[70px\] { height: 70px; }
.h-\[80px\] { height: 80px; }
.h-full { height: 100%; }
.w-3 { width: 0.75rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-\[17px\] { width: 17px; }
.w-\[52px\] { width: 52px; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-px { width: 1px; }
.overflow-hidden { overflow: hidden; }
.w-\[2px\] { width: 2px; }
.min-w-\[900px\] { min-width: 900px; }
.max-w-site { max-width: 1920px; }
.max-w-hero { max-width: 928px; }

/* CTA Buttons */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 20px 40px;
  border-radius: 50px;
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cta-btn--teal {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-color: #1CB0A9;
  color: #ffffff;
  transition: background-color 0.45s ease, color 0.2s ease;
}

.cta-btn--teal:hover,
.cta-btn--teal:focus {
  background-color: #1C1C1C;
}

.cta-btn__text-content {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.cta-btn__label {
  display: inline-block;
  position: relative;
  overflow: hidden;
  perspective: 700px;
}

.cta-btn__label::after {
  content: attr(data-hover);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(100%) translateZ(0) rotateX(-90deg);
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.cta-btn:hover .cta-btn__label .site-header__link-text,
.cta-btn:focus .cta-btn__label .site-header__link-text {
  transform: translateY(-100%) translateZ(0) rotateX(90deg);
}

.cta-btn:hover .cta-btn__label::after,
.cta-btn:focus .cta-btn__label::after {
  transform: translateY(0) translateZ(0) rotateX(0deg);
}

.cta-btn[data-hover] {
  position: relative;
  overflow: hidden;
  perspective: 700px;
}

.cta-btn[data-hover]::after {
  content: attr(data-hover);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  white-space: nowrap;
  transform: translateY(100%) translateZ(0) rotateX(-90deg);
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.cta-btn[data-hover]:hover .site-header__link-text,
.cta-btn[data-hover]:focus .site-header__link-text {
  transform: translateY(-100%) translateZ(0) rotateX(90deg);
}

.cta-btn[data-hover]:hover::after,
.cta-btn[data-hover]:focus::after {
  transform: translateY(0) translateZ(0) rotateX(0deg);
}

.blob-btn__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
}

.blob-btn__blobs {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  filter: url('#goo');
}

.blob-btn__blob {
  position: absolute;
  top: 0;
  width: 25%;
  height: 100%;
  background: #1C1C1C;
  border-radius: 100%;
  transform: translate3d(0, 150%, 0) scale(1.4);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.blob-btn__blob:nth-child(1) { left: 0%; transition-delay: 0s; }
.blob-btn__blob:nth-child(2) { left: 25%; transition-delay: 0.05s; }
.blob-btn__blob:nth-child(3) { left: 50%; transition-delay: 0.1s; }
.blob-btn__blob:nth-child(4) { left: 75%; transition-delay: 0.15s; }

.cta-btn--teal:hover .blob-btn__blob,
.cta-btn--teal:focus .blob-btn__blob {
  transform: translate3d(0, 0, 0) scale(1.4);
}

.cta-btn--footer-outline {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-color: transparent;
  border: 1px solid #1CB0A9;
  border-radius: 40px;
  color: #ffffff;
  transition: border-color 0.45s ease, color 0.2s ease;
}

.cta-btn--footer-outline:hover,
.cta-btn--footer-outline:focus {
  border-color: #1CB0A9;
  background-color: transparent;
  color: #ffffff;
}

.cta-btn--footer-outline .blob-btn__blob {
  background: #1CB0A9;
}

.cta-btn--footer-outline:hover .blob-btn__blob,
.cta-btn--footer-outline:focus .blob-btn__blob {
  transform: translate3d(0, 0, 0) scale(1.4);
}

.cta-btn--dark {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-color: #1C1C1C;
  color: #ffffff;
}

.cta-btn--dark:hover,
.cta-btn--dark:focus {
  background-color: #1C1C1C;
}

.cta-btn__arrow {
  display: block;
  width: 33px;
  height: 15px;
  flex-shrink: 0;
}

.hero-cta-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .hero-cta-row {
    gap: 12px;
  }
}

/* Hero Section */
#hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
}

.hero-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.hero-content {
  display: flex;
  flex-direction: column;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 20px;
}

.hero-trust__dot {
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background-color: #1CB1A9;
}

.hero-trust__text {
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  color: #333333;
}

.hero-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.hero-rating__stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.hero-rating__star {
  width: 24px;
  height: 24px;
}

.hero-rating__text {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  color: #333333;
}

.hero-rating__score {
  font-size: 1.25rem;
}

.hero-rating__denominator {
  font-size: 1rem;
}

.hero-rating__label {
  font-size: 1.25rem;
  margin-left: 8px;
}

/* Mobile Hero Layout */
@media (max-width: 639px) {
  .hero-heading {
    font-size: 2rem;
  }

  .hero-content {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .hero-trust {
    gap: 0.5rem;
    margin-bottom: 16px;
  }

  .hero-trust__dot {
    width: 10px;
    height: 10px;
  }

  .hero-trust__text {
    font-size: 0.875rem;
  }

  .hero-rating {
    gap: 0.5rem;
    margin-top: 1.5rem;
  }

  .hero-rating__star {
    width: 18px;
    height: 18px;
  }

  .hero-rating__score,
  .hero-rating__label {
    font-size: 1rem;
  }

  .hero-rating__denominator {
    font-size: 0.875rem;
  }

  .hero-cta-row {
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 1.5rem;
  }

  #hero .hero-cta-row .cta-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    gap: 6px;
    padding: 10px 11px;
    font-size: 14px;
  }

  #hero .hero-cta-row .cta-btn__arrow {
    width: 20px;
    height: 9px;
  }

  .site-header__btn--mobile {
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
  }
}

/* Small Mobile Layout */
@media (max-width: 374px) {
  .hero-inner {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .hero-heading {
    font-size: 2rem;
  }

  .hero-content {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .hero-trust__text {
    font-size: 0.8125rem;
  }

  .hero-rating__star {
    width: 16px;
    height: 16px;
  }

  .hero-rating__score,
  .hero-rating__label {
    font-size: 0.875rem;
  }

  .hero-rating__denominator {
    font-size: 0.8125rem;
  }

  .hero-cta-row {
    gap: 6px;
    margin-top: 1.25rem;
  }

  #hero .hero-cta-row .cta-btn {
    padding: 8px 7px;
    font-size: 13px;
    gap: 4px;
  }

  #hero .hero-cta-row .cta-btn__arrow {
    width: 18px;
    height: 8px;
  }

  .site-header__btn--mobile {
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
  }
}

@media (min-width: 640px) {
  .hero-inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .hero-content {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .hero-trust__text {
    font-size: 18px;
    line-height: 1;
    color: #333333;
  }

  .hero-rating {
    gap: 1rem;
  }

  .hero-rating__score,
  .hero-rating__label {
    font-size: 1.5rem;
  }

  .hero-rating__denominator {
    font-size: 1.125rem;
  }
}

@media (min-width: 768px) {
  .hero-inner {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .hero-content {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1024px) {
  #hero {
    min-height: 640px;
    height: auto;
  }

  .hero-inner {
    padding-left: 48px;
    padding-right: 48px;
  }

  .hero-content {
    padding-top: 100px;
    padding-bottom: 80px;
  }

  .hero-trust__text {
    font-size: 18px;
    line-height: 1;
    color: #333333;
  }

  .hero-rating {
    margin-top: 32px;
  }

  .hero-rating__star {
    width: 20px;
    height: 20px;
  }

  .hero-rating__score,
  .hero-rating__label {
    font-size: 1.25rem;
  }

  .hero-rating__denominator {
    font-size: 1rem;
  }

  .hero-cta-row {
    margin-top: 40px;
  }

  .cta-btn {
    gap: 8px;
    padding: 14px 28px;
    font-size: 16px;
  }

  .cta-btn__arrow {
    width: 28px;
    height: 13px;
  }
}

@media (min-width: 1920px) {
  #hero {
    height: 930px;
    min-height: 930px;
  }

  .hero-inner {
    padding-left: 120px;
    padding-right: 120px;
  }

  .hero-content {
    padding-top: 180px;
    padding-bottom: 130px;
  }

  .hero-trust__text {
    font-size: 18px;
  }

  .hero-rating {
    margin-top: 40px;
  }

  .hero-rating__star {
    width: 24px;
    height: 24px;
  }

  .hero-rating__score,
  .hero-rating__label {
    font-size: 1.5rem;
  }

  .hero-rating__denominator {
    font-size: 1.125rem;
  }

  .hero-cta-row {
    margin-top: 60px;
  }

  .cta-btn {
    gap: 11px;
    padding: 20px 40px;
    font-size: 20px;
  }

  .cta-btn__arrow {
    width: 33px;
    height: 15px;
  }
}
.max-w-\[874px\] { max-width: 874px; }
.max-w-\[400px\] { max-width: 400px; }
.shrink-0 { flex-shrink: 0; }
.self-stretch { align-self: stretch; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.min-w-0 { min-width: 0; }
.h-auto { height: auto; }
.justify-start { justify-content: flex-start; }
.pl-0 { padding-left: 0; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-baseline { align-items: baseline; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-items-center { justify-items: center; }
.gap-0\.5 { gap: 0.125rem; }
.gap-1 { gap: 0.25rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.gap-\[11px\] { gap: 11px; }
.gap-\[52px\] { gap: 52px; }
.gap-\[30px\] { gap: 30px; }
.gap-\[45px\] { gap: 45px; }
.gap-\[60px\] { gap: 60px; }
.gap-x-8 { column-gap: 2rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-y-10 { row-gap: 2.5rem; }
.gap-y-14 { row-gap: 3.5rem; }
.items-end { align-items: flex-end; }
.gap-5 { gap: 1.25rem; }
.bottom-6 { bottom: 1.5rem; }
.bottom-10 { bottom: 2.5rem; }
.bottom-\[124px\] { bottom: 124px; }
.right-\[30px\] { right: 30px; }
.right-\[134px\] { right: 134px; }
.mb-\[72px\] { margin-bottom: 72px; }
.mb-\[84px\] { margin-bottom: 84px; }
.mb-\[92px\] { margin-bottom: 92px; }
.pb-1 { padding-bottom: 0.25rem; }
.h-1\.5 { height: 0.375rem; }
.w-1\.5 { width: 0.375rem; }
.h-8 { height: 2rem; }
.w-8 { width: 2rem; }
.h-\[60px\] { height: 60px; }
.w-\[60px\] { width: 60px; }
.h-\[72px\] { height: 72px; }
.w-\[72px\] { width: 72px; }
.h-\[544px\] { height: 544px; }
.w-\[530px\] { width: 530px; }
.h-\[200px\] { height: 200px; }
.w-\[200px\] { width: 200px; }
.h-\[659px\] { height: 659px; }
.w-\[1681px\] { width: 1681px; }
.object-contain { object-fit: contain; }
.aspect-square { aspect-ratio: 1 / 1; }
.rotate-180 { transform: rotate(180deg); }

.overflow-hidden { overflow: hidden; }
.pointer-events-none { pointer-events: none; }
.opacity-0 { opacity: 0; }
.opacity-10 { opacity: 0.1; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-100 { opacity: 1; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.-right-\[10\%\] { right: -10%; }
.origin-center { transform-origin: center; }
.rotate-90 { transform: rotate(90deg); }
.whitespace-nowrap { white-space: nowrap; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 8px; }
.p-2\.5 { padding: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pt-16 { padding-top: 4rem; }
.pb-16 { padding-bottom: 4rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pt-4 { padding-top: 1rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-\[2\.5rem\] { font-size: 2.5rem; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-light { font-weight: 300; }
.leading-none { line-height: 1; }
.leading-\[150\%\] { line-height: 150%; }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
.transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; 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; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }

.min-h-\[calc\(100vh-70px\)\] { min-height: calc(100vh - 70px); }

/* Scroll Animation */
@keyframes kf_7_893_height_0 {
  0% {
    animation-timing-function: ease-in-out;
    height: 1px;
  }
  100% {
    height: 80px;
  }
}
.animate-scroll-height {
  animation: kf_7_893_height_0 2s linear infinite;
}

@keyframes kf_testimonials_line_width {
  0% {
    animation-timing-function: ease-in-out;
    width: 1px;
  }
  100% {
    width: 80px;
  }
}

/* Hover Effects */
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:bg-gray-800:hover { background-color: #1f2937; }
.hover\:bg-\[\#18a09a\]:hover { background-color: #18a09a; }
.hover\:text-brand-teal:hover { color: #1CB1A9; }
.hover\:scale-105:hover { transform: scale(1.05); }

/* Small Screen Styling */
@media (min-width: 640px) {
  .sm\:right-6 { right: 1.5rem; }
  .sm\:bottom-8 { bottom: 2rem; }
  .sm\:mb-8 { margin-bottom: 2rem; }
  .sm\:flex { display: flex; }
  .sm\:h-9 { height: 2.25rem; }
  .sm\:h-\[60px\] { height: 60px; }
  .sm\:w-\[60px\] { width: 60px; }
  .sm\:h-\[80px\] { height: 80px; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:gap-4 { gap: 1rem; }
  .sm\:gap-5 { gap: 1.25rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .sm\:pt-20 { padding-top: 5rem; }
  .sm\:pb-20 { padding-bottom: 5rem; }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .sm\:text-6xl { font-size: 3.75rem; line-height: 1; }
}

/* Medium Screen Styling */
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:gap-5 { gap: 1.25rem; }
  .md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .md\:pt-24 { padding-top: 6rem; }
  .md\:pb-24 { padding-bottom: 6rem; }
  .md\:text-7xl { font-size: 4.5rem; line-height: 1; }
}

/* Large Screen Styling */
@media (min-width: 1024px) {
  .lg\:right-10 { right: 2.5rem; }
  .lg\:right-0 { right: 0; }
  .lg\:right-8 { right: 2rem; }
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:h-10 { height: 2.5rem; }
  .lg\:h-\[94px\] { height: 94px; }
  .lg\:min-h-\[300px\] { min-height: 300px; }
  .lg\:h-\[930px\] { height: 930px; }
  .lg\:w-\[85\%\] { width: 85%; }
  .lg\:gap-8 { gap: 2rem; }
  .lg\:gap-10 { gap: 2.5rem; }
  .lg\:gap-12 { gap: 3rem; }
  .lg\:px-\[120px\] { padding-left: 120px; padding-right: 120px; }
  .lg\:pt-\[180px\] { padding-top: 180px; }
  .lg\:pb-\[130px\] { padding-bottom: 130px; }
  .lg\:text-\[100px\] { font-size: 100px; line-height: 1; }
}

/* Hero Spacing */
@media (min-width: 1920px) {
  .hero-content {
    padding-top: 180px;
  }
}

/* Extra Large Screen Styling */
@media (min-width: 1280px) {
  .xl\:right-12 { right: 3rem; }
  .xl\:gap-10 { gap: 2.5rem; }
  .xl\:gap-12 { gap: 3rem; }
  .xl\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .xl\:px-20 { padding-left: 5rem; padding-right: 5rem; }
  .xl\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .xl\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
}

/* Floating Widgets */
.floating-widgets {
  position: fixed;
  right: max(16px, calc((100vw - 1920px) / 2 + 16px));
  bottom: 16px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 48px;
}

.hero-aside-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, 1920px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 10;
}

.hero-scroll-down {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: none;
  align-items: flex-end;
  gap: 1.5rem;
  pointer-events: none;
}

.floating-contact,
.floating-back-top {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

.floating-contact {
  background-color: #1CB0A9;
  box-shadow: 10px 24px 54px 0 rgba(0, 0, 0, 0.10);
  transition: transform 0.2s ease;
}

.floating-contact:hover,
.floating-contact:focus {
  transform: scale(1.05);
}

.floating-contact__icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.floating-back-top {
  background-color: transparent;
  overflow: visible;
  transition: transform 0.3s ease;
}

.floating-back-top:hover,
.floating-back-top:focus {
  background-color: transparent;
  transform: scale(1.05);
}

.floating-back-top__icon {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

#back-to-top {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.hero-scroll-down__track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 68px;
}

.hero-scroll-down__line {
  position: relative;
  display: block;
  width: 2px;
  height: 64px;
  overflow: hidden;
}

.hero-scroll-down__line-fill {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 2px;
  background-color: #525252;
  animation: kf_7_893_height_0 2s linear infinite;
}

.hero-scroll-down__spacer {
  flex-shrink: 0;
  width: 48px;
}

.scroll-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: none;
  white-space: nowrap;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #525252;
}

@media (min-width: 640px) {
  .floating-widgets {
    right: max(20px, calc((100vw - 1920px) / 2 + 20px));
    bottom: 24px;
    gap: 12px;
    width: 52px;
  }

  .floating-contact,
  .floating-back-top {
    width: 52px;
    height: 52px;
  }

  .floating-contact__icon {
    width: 28px;
    height: 28px;
  }

  .hero-scroll-down {
    display: flex;
    right: 20px;
    bottom: 24px;
    gap: 2rem;
  }

  .hero-scroll-down__track {
    margin-bottom: 76px;
  }

  .hero-scroll-down__line {
    height: 72px;
  }

  .hero-scroll-down__spacer {
    width: 52px;
  }

  .scroll-label {
    font-size: 15px;
  }
}

@media (min-width: 1024px) {
  .floating-widgets {
    right: max(30px, calc((100vw - 1920px) / 2 + 30px));
    bottom: 40px;
    gap: 12px;
    width: 60px;
  }

  .floating-contact,
  .floating-back-top {
    width: 60px;
    height: 60px;
  }

  .floating-contact__icon {
    width: 32px;
    height: 32px;
  }

  .hero-scroll-down {
    right: 30px;
    bottom: 40px;
  }

  .hero-scroll-down__track {
    margin-bottom: 84px;
  }

  .hero-scroll-down__line {
    height: 80px;
  }

  .hero-scroll-down__spacer {
    width: 60px;
  }

  .scroll-label {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .floating-widgets {
    right: 12px;
    bottom: 12px;
    gap: 8px;
    width: 40px;
  }

  .floating-contact,
  .floating-back-top {
    width: 40px;
    height: 40px;
  }

  .floating-contact__icon {
    width: 20px;
    height: 20px;
  }

  .floating-back-top__icon {
    width: 40px;
    height: 40px;
  }
}

/* About Stats Section */
.about-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  gap: 4rem;
  padding: 4rem 1rem;
  background: linear-gradient(180deg, rgba(28, 176, 169, 0.04) 0%, rgba(28, 176, 169, 0.10) 100%);
  overflow-x: clip;
}

.about-typography {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  max-width: 1680px;
  gap: 40px;
}

.about-heading {
  align-self: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
}

.about-line {
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  transition: background-position 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: background-position;
}

.about-line--ltr {
  background-image: linear-gradient(to right, #1C1C1C 50%, rgba(28, 28, 28, 0.30) 50%);
  background-position: 100% 0;
}

.about-line--rtl {
  background-image: linear-gradient(to right, rgba(28, 28, 28, 0.30) 50%, #1C1C1C 50%);
  background-position: 0% 0;
}

.about-section:hover .about-line--ltr,
.about-heading:hover .about-line--ltr {
  background-position: 0% 0;
}

.about-section:hover .about-line--rtl,
.about-heading:hover .about-line--rtl {
  background-position: 100% 0;
}

.about-heading-br {
  display: none;
}

.about-subline {
  align-self: stretch;
  width: 100%;
  max-width: 874px;
  margin: 0;
  padding: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  color: #1C1C1C;
  text-align: left;
}

.about-stats {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-stat-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  min-height: 72px;
  padding: 1rem 1.5rem;
  border-radius: 24px;
  background-color: #191919;
  box-sizing: border-box;
}

.about-stat-card__text {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.5px;
  text-align: center;
  white-space: normal;
}

.about-stat-card__value {
  font-weight: 600;
  color: #1CB0A9;
}

.about-stat-card__label {
  font-weight: 300;
  color: #ffffff;
}

@media (min-width: 640px) {
  .about-section {
    gap: 4rem;
    padding: 5rem 2rem;
  }

  .about-heading {
    font-size: 2.25rem;
  }

  .about-subline {
    font-size: 1.25rem;
  }

  .about-stat-card {
    min-height: 100px;
    padding: 2rem 2.5rem;
    border-radius: 32px;
  }

  .about-stat-card__text {
    font-size: 1.25rem;
  }
}

@media (min-width: 768px) {
  .about-section {
    gap: 4rem;
    padding: 4rem 2.5rem;
  }

  .about-heading {
    font-size: 2rem;
    line-height: 1.3;
  }

  .about-subline {
    font-size: 1.125rem;
  }

  .about-stats {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .about-stat-card {
    width: calc(50% - 8px);
    height: 145px;
    padding: 0 2.5rem;
    border-radius: 40px;
  }

  .about-stat-card:last-child {
    width: 100%;
  }

  .about-stat-card__text {
    font-size: 1.5rem;
    letter-spacing: -0.96px;
    white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  .about-section {
    gap: 146px;
    padding: 120px;
  }

  .about-heading {
    font-size: 56px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
    max-width: 1210px;
  }

  .about-heading-br {
    display: block;
  }

  .about-subline {
    font-size: 24px;
    line-height: 1.5;
  }

  .about-stats {
    flex-wrap: nowrap;
    gap: 24px;
  }

  .about-stat-card {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    height: 145px;
    padding-left: clamp(1.5rem, 3vw, 100px);
    padding-right: clamp(1.5rem, 3vw, 100px);
  }

  .about-stat-card:last-child {
    width: auto;
  }

  .about-stat-card__text {
    font-size: clamp(1.15rem, 1.8vw, 32px);
    white-space: nowrap;
  }
}

@media (min-width: 1920px) {
  .about-stats {
    gap: 24px;
  }

  .about-stat-card {
    padding-left: 100px;
    padding-right: 100px;
  }

  .about-stat-card__text {
    font-size: 32px;
  }
}

/* Clients Section */
#clients {
  padding-top: 4rem;
  padding-bottom: 4rem;
  overflow-x: clip;
}

#clients ul li {
  transition: transform 0.3s ease;
}

#clients ul li img {
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

#clients ul li:hover img,
#clients ul li:focus-within img {
  opacity: 1;
  transform: scale(1.06);
  filter: brightness(1.25);
}

@media (prefers-reduced-motion: reduce) {
  #clients ul li,
  #clients ul li img {
    transition: none;
  }

  #clients ul li:hover img,
  #clients ul li:focus-within img {
    transform: none;
  }
}

/* Parallax Section */
@keyframes parallax-clients {
  to {
    transform: translate3d(0, -48px, 0);
  }
}

@keyframes parallax-capabilities {
  to {
    transform: translate3d(0, 24px, 0);
  }
}

.parallax-duo {
  position: relative;
  isolation: isolate;
  view-timeline-name: --duo-timeline;
  view-timeline-axis: block;
}

.clients-parallax__inner {
  width: 100%;
  will-change: transform;
}

.parallax-duo__capabilities {
  position: relative;
  z-index: 2;
  background-color: #ffffff;
}

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

  #clients {
    position: sticky;
    top: 0;
    z-index: 1;
    overflow: visible;
  }

  .clients-parallax__inner {
    animation: parallax-clients linear both;
    animation-timeline: --duo-timeline;
    animation-range: contain 0% contain 100%;
  }

  .parallax-duo__capabilities {
    z-index: 2;
    box-shadow: 0 -32px 64px rgba(0, 0, 0, 0.12);
    animation: parallax-capabilities linear both;
    animation-timeline: --duo-timeline;
    animation-range: contain 0% contain 100%;
  }
}

@media (min-width: 1920px) {
  .parallax-duo__capabilities {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #clients {
    position: relative;
  }

  .parallax-duo__capabilities {
    margin-top: 0;
    box-shadow: none;
    animation: none;
  }

  .clients-parallax__inner {
    transform: none !important;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .parallax-duo__capabilities {
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1536px) {
  .parallax-duo__capabilities {
    padding-top: 0;
  }
}

/* Capabilities Section */
.capabilities-section {
  gap: 2.5rem;
  padding: 4rem 1rem;
}

.capabilities-header {
  gap: 1rem;
}

.capabilities-header h2 {
  margin: 0;
}

.capabilities-header p {
  margin: 0;
}

.capabilities-grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.capability-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  border-radius: 40px;
  background-color: #1C1C1C;
  padding: 2rem;
  min-height: auto;
  gap: 12px;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

.capability-card__title {
  width: 100%;
  max-width: 400px;
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  color: #ffffff;
}

.capability-card__title-br {
  display: block;
}

.capability-card__dot {
  color: #1CB1A9;
}

.capability-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 400px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.capability-card__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.capability-card__bullet {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: #1CB1A9;
}

.capability-card__watermark {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 120px;
  height: 120px;
  opacity: 0.1;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .capability-card:hover {
    transform: translateY(-4px);
    background-color: #242424;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  }

  .capability-card:hover .capability-card__watermark {
    opacity: 0.18;
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .capability-card,
  .capability-card__watermark {
    transition: none;
  }

  .capability-card:hover {
    transform: none;
  }

  .capability-card:hover .capability-card__watermark {
    transform: none;
  }
}

@media (min-width: 640px) {
  .capability-card {
    padding: 2.5rem;
  }

  .capability-card__title {
    font-size: 3rem;
  }

  .capability-card__item {
    font-size: 20px;
  }

  .capabilities-section {
    padding: 5rem 2rem;
  }
}

@media (min-width: 768px) {
  .capabilities-section {
    padding: 6rem 4rem;
  }
}

@media (min-width: 1024px) {
  .capabilities-section {
    gap: 54px;
    padding: 120px;
    overflow-x: clip;
  }

  .capabilities-header {
    gap: 16px;
  }

  .capabilities-header h2 {
    font-size: clamp(40px, calc(40px + (16 * (100vw - 1024px) / 896)), 56px);
  }

  .capabilities-header p {
    font-size: clamp(18px, calc(18px + (6 * (100vw - 1024px) / 896)), 24px);
  }

  .capabilities-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(32px, calc(32px + (13 * (100vw - 1024px) / 896)), 45px);
  }

  .capability-card {
    height: auto;
    min-height: clamp(480px, calc(480px + (64 * (100vw - 1024px) / 896)), 544px);
    gap: 0;
    padding:
      clamp(40px, calc(40px + (20 * (100vw - 1024px) / 896)), 60px)
      clamp(48px, calc(48px + (22 * (100vw - 1024px) / 896)), 70px)
      clamp(40px, calc(40px + (20 * (100vw - 1024px) / 896)), 60px)
      clamp(40px, calc(40px + (20 * (100vw - 1024px) / 896)), 60px);
  }

  .capability-card__title {
    width: auto;
    max-width: clamp(280px, calc(280px + (120 * (100vw - 1024px) / 896)), 400px);
    font-size: clamp(32px, calc(32px + (24 * (100vw - 1024px) / 896)), 56px);
    line-height: 1.2;
  }

  .capability-card__list {
    margin: auto 0 0;
    gap: 1rem;
  }

  .capability-card__item {
    font-size: clamp(18px, calc(18px + (4 * (100vw - 1024px) / 896)), 22px);
  }

  .capability-card__bullet {
    width: 10px;
    height: 10px;
  }

  .capability-card__watermark {
    width: clamp(120px, calc(120px + (80 * (100vw - 1024px) / 896)), 200px);
    height: clamp(120px, calc(120px + (80 * (100vw - 1024px) / 896)), 200px);
  }
}

@media (min-width: 1920px) {
  .capabilities-section {
    gap: 54px;
    padding: 120px;
  }

  .capabilities-header h2 {
    font-size: 56px;
  }

  .capabilities-header p {
    font-size: 24px;
  }

  .capabilities-grid {
    gap: 45px;
  }

  .capability-card {
    height: 544px;
    min-height: 544px;
    padding: 60px 70px 60px 60px;
  }

  .capability-card__title {
    width: 400px;
    max-width: 100%;
    font-size: 56px;
    line-height: 1.2;
  }

  .capability-card__item {
    font-size: 22px;
  }

  .capability-card__watermark {
    width: 200px;
    height: 200px;
  }
}

/* Tech Stack Section */
.tech-stack-section {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1920px;
  box-sizing: border-box;
  padding: 4rem 1rem;
  overflow-x: visible;
  background: linear-gradient(180deg, rgba(28, 176, 169, 0) 0%, rgba(28, 176, 169, 0.10) 100%), #ffffff;
}

.tech-stack-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2rem;
  width: 100%;
}

.tech-stack-heading {
  flex-shrink: 0;
}

.tech-stack-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1.68px;
  color: #1c1c1c;
}

.tech-stack-divider {
  display: none;
}

.tech-stack-hr {
  display: none;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: rgba(28, 177, 169, 0.30);
}

.tech-stack-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}

.tech-stack-logos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2.5rem;
  width: 100%;
}

.tech-stack-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tech-stack-logo-item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-start;
}

.tech-stack-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: 0.75;
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

.tech-stack-logo-item:hover .tech-stack-logo,
.tech-stack-logo-item:focus-within .tech-stack-logo {
  opacity: 1;
  transform: scale(1.06);
  filter: brightness(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .tech-stack-logo {
    transition: none;
  }

  .tech-stack-logo-item:hover .tech-stack-logo,
  .tech-stack-logo-item:focus-within .tech-stack-logo {
    transform: none;
  }
}

@media (max-width: 1023px) {
  .tech-stack-section {
    padding: 3rem 1.25rem;
  }

  .tech-stack-layout {
    gap: 1.5rem;
    align-items: stretch;
  }

  .tech-stack-heading {
    width: 100%;
    text-align: center;
  }

  .tech-stack-title {
    font-size: 1.75rem;
    letter-spacing: -0.84px;
  }

  .tech-stack-content {
    gap: 1.5rem;
    align-items: stretch;
    width: 100%;
  }

  .tech-stack-logos {
    gap: 1.25rem;
    align-items: center;
    width: 100%;
  }

  .tech-stack-row {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.875rem;
    column-gap: 0.75rem;
    width: 100%;
  }

  .tech-stack-logo-item {
    flex: 0 0 auto;
    justify-content: center;
  }

  .tech-stack-logo {
    height: 24px;
    width: auto;
    max-width: 96px;
    object-position: center center;
  }

  .tech-stack-logo--elementor {
    height: 22px;
    max-width: 100px;
  }

  .tech-stack-logo--litespeed,
  .tech-stack-logo--alpine-js,
  .tech-stack-logo--rank-math,
  .tech-stack-logo--security {
    height: 26px;
    width: 26px;
    max-width: 26px;
  }

  .tech-stack-logo--yoast {
    height: 22px;
    max-width: 60px;
  }

  .tech-stack-logo--woo {
    height: 18px;
    max-width: 64px;
  }

  .tech-stack-logo--acf {
    height: 20px;
    max-width: 44px;
  }

  .tech-stack-logo--cookieyes {
    height: 18px;
    max-width: 96px;
  }

  .tech-stack-logo--wpforms {
    height: 18px;
    max-width: 84px;
  }

  .tech-stack-logo--elementskit {
    height: 16px;
    max-width: 96px;
  }

  .tech-stack-logo--wp-mail-smtp {
    height: 20px;
    max-width: 84px;
  }

  .tech-stack-logo--custom-code {
    height: 22px;
    width: 28px;
    max-width: 28px;
  }

  .tech-stack-logo--formidable-forms {
    height: 20px;
    max-width: 88px;
  }

  .tech-stack-logo--hubspot {
    height: 22px;
    max-width: 76px;
  }

  .tech-stack-logo--newsletter-plugin {
    height: 18px;
    max-width: 96px;
  }

  .tech-stack-logo--optimizing-matters {
    height: 18px;
    max-width: 56px;
  }
}

@media (max-width: 374px) {
  .tech-stack-section {
    padding: 2.5rem 0.75rem;
  }

  .tech-stack-layout {
    align-items: center;
  }

  .tech-stack-content {
    align-items: center;
  }

  .tech-stack-logos {
    gap: 1rem;
    align-items: center;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }

  .tech-stack-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 0.5rem 0.5rem;
    width: 100%;
  }

  .tech-stack-logo-item {
    flex: 0 0 auto;
    width: auto;
    justify-content: center;
  }

  .tech-stack-logo--elementor {
    height: 17px;
    max-width: 76px;
  }

  .tech-stack-logo--litespeed,
  .tech-stack-logo--alpine-js,
  .tech-stack-logo--rank-math,
  .tech-stack-logo--security {
    height: 20px;
    width: 20px;
    max-width: 20px;
  }

  .tech-stack-logo--yoast {
    height: 17px;
    max-width: 48px;
  }

  .tech-stack-logo--woo {
    height: 15px;
    max-width: 52px;
  }

  .tech-stack-logo--acf {
    height: 17px;
    max-width: 36px;
  }

  .tech-stack-logo--cookieyes {
    height: 15px;
    max-width: 72px;
  }

  .tech-stack-logo--wpforms {
    height: 15px;
    max-width: 64px;
  }

  .tech-stack-logo--elementskit {
    height: 14px;
    max-width: 72px;
  }

  .tech-stack-logo--wp-mail-smtp {
    height: 17px;
    max-width: 64px;
  }

  .tech-stack-logo--custom-code {
    height: 17px;
    width: 22px;
    max-width: 22px;
  }

  .tech-stack-logo--formidable-forms {
    height: 17px;
    max-width: 72px;
  }

  .tech-stack-logo--hubspot {
    height: 17px;
    max-width: 58px;
  }

  .tech-stack-logo--newsletter-plugin {
    height: 15px;
    max-width: 72px;
  }

  .tech-stack-logo--optimizing-matters {
    height: 15px;
    max-width: 44px;
  }
}

@media (max-width: 639px) {
  .tech-stack-section {
    padding: 2.5rem 1rem;
  }

  .tech-stack-logos {
    gap: 1.125rem;
  }

  .tech-stack-row {
    row-gap: 0.75rem;
    column-gap: 0.5rem;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .tech-stack-section {
    padding: 4rem 2rem;
  }

  .tech-stack-layout {
    gap: 0;
  }

  .tech-stack-hr {
    display: block;
    margin: 1.75rem 0 2.5rem;
  }

  .tech-stack-title {
    font-size: 2.25rem;
    letter-spacing: -1.12px;
  }

  .tech-stack-content {
    gap: 0;
  }

  .tech-stack-logos {
    gap: 2rem;
    align-items: center;
  }

  .tech-stack-row {
    justify-content: center;
    gap: 1rem 1.25rem;
  }

  .tech-stack-logo {
    height: 30px;
    max-width: 120px;
  }

  .tech-stack-logo--elementor {
    height: 32px;
    max-width: 150px;
  }

  .tech-stack-logo--litespeed,
  .tech-stack-logo--alpine-js,
  .tech-stack-logo--rank-math,
  .tech-stack-logo--security {
    height: 34px;
    width: 34px;
    max-width: 34px;
  }

  .tech-stack-logo--yoast {
    height: 30px;
    max-width: 88px;
  }

  .tech-stack-logo--woo {
    height: 26px;
    max-width: 96px;
  }

  .tech-stack-logo--acf {
    height: 28px;
    max-width: 60px;
  }

  .tech-stack-logo--cookieyes {
    height: 26px;
    max-width: 140px;
  }

  .tech-stack-logo--wpforms {
    height: 26px;
    max-width: 120px;
  }

  .tech-stack-logo--elementskit {
    height: 24px;
    max-width: 140px;
  }

  .tech-stack-logo--wp-mail-smtp {
    height: 28px;
    max-width: 120px;
  }

  .tech-stack-logo--custom-code {
    height: 30px;
    width: 38px;
    max-width: 38px;
  }

  .tech-stack-logo--formidable-forms {
    height: 28px;
    max-width: 124px;
  }

  .tech-stack-logo--hubspot {
    height: 30px;
    max-width: 108px;
  }

  .tech-stack-logo--newsletter-plugin {
    height: 26px;
    max-width: 140px;
  }

  .tech-stack-logo--optimizing-matters {
    height: 26px;
    max-width: 80px;
  }
}

@media (min-width: 1024px) {
  .tech-stack-section {
    --ts-heading: clamp(200px, 18.4vw, 353px);
    --ts-heading-gap: clamp(32px, 11.3vw, 217px);
    --ts-logos-gap: clamp(20px, 5.2vw, 100px);
    min-height: clamp(520px, 37vw, 712px);
    padding: clamp(48px, 6.25vw, 120px) clamp(48px, 6.2vw, 119px);
    overflow-x: visible;
  }

  .tech-stack-layout {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    min-width: 0;
  }

  .tech-stack-heading {
    flex: 0 0 var(--ts-heading);
    width: var(--ts-heading);
    max-width: 353px;
    margin-right: var(--ts-heading-gap);
    text-align: left;
    align-self: flex-start;
  }

  .tech-stack-title {
    font-size: clamp(32px, 2.92vw, 56px);
    line-height: 1;
    letter-spacing: -1.68px;
  }

  .tech-stack-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1 1 0;
    min-width: 0;
    gap: 0;
    overflow: visible;
  }

  .tech-stack-divider {
    display: block;
    flex: 0 0 1px;
    width: 1px;
    align-self: stretch;
    background-color: rgba(28, 177, 169, 0.30);
  }

  .tech-stack-logos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    max-width: 1010px;
    margin: 0 0 0 var(--ts-logos-gap);
    padding: 0;
    gap: clamp(40px, 4.17vw, 80px);
  }

  .tech-stack-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    gap: clamp(12px, 3.4vw, 65px);
    margin: 0;
    padding: 0;
  }

  .tech-stack-row--1 {
    gap: clamp(14px, 3.8vw, 73px);
  }

  .tech-stack-logo-item {
    justify-content: flex-start;
    flex: 0 1 auto;
    flex-shrink: 1;
    min-width: 0;
  }

  .tech-stack-logo {
    flex-shrink: 1;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }

  .tech-stack-logo--elementor {
    height: clamp(36px, 3.33vw, 64px);
    max-width: min(324px, 100%);
  }

  .tech-stack-logo--litespeed,
  .tech-stack-logo--alpine-js,
  .tech-stack-logo--rank-math,
  .tech-stack-logo--security {
    height: clamp(32px, 3.07vw, 59px);
    width: auto;
    max-width: clamp(32px, 3.07vw, 59px);
  }

  .tech-stack-logo--yoast {
    height: clamp(32px, 3.13vw, 60px);
    max-width: min(128px, 100%);
  }

  .tech-stack-logo--woo {
    height: clamp(24px, 1.98vw, 38px);
    max-width: min(147px, 100%);
  }

  .tech-stack-logo--acf {
    height: clamp(28px, 2.24vw, 43px);
    max-width: min(91px, 100%);
  }

  .tech-stack-logo--cookieyes {
    height: clamp(26px, 2.08vw, 40px);
    max-width: min(251px, 100%);
  }

  .tech-stack-logo--wpforms {
    height: clamp(28px, 2.97vw, 57px);
    max-width: min(208px, 100%);
  }

  .tech-stack-logo--elementskit {
    height: clamp(22px, 1.93vw, 37px);
    max-width: min(264px, 100%);
  }

  .tech-stack-logo--wp-mail-smtp {
    height: clamp(28px, 2.81vw, 54px);
    max-width: min(208px, 100%);
  }

  .tech-stack-logo--custom-code {
    height: clamp(28px, 2.6vw, 50px);
    width: auto;
    max-width: clamp(36px, 3.28vw, 63px);
  }

  .tech-stack-logo--formidable-forms {
    height: clamp(28px, 2.81vw, 54px);
    max-width: min(220px, 100%);
  }

  .tech-stack-logo--hubspot {
    height: clamp(32px, 3.07vw, 59px);
    max-width: min(201px, 100%);
  }

  .tech-stack-logo--newsletter-plugin {
    height: clamp(26px, 2.55vw, 49px);
    max-width: min(247px, 100%);
  }

  .tech-stack-logo--optimizing-matters {
    height: clamp(26px, 2.55vw, 49px);
    max-width: min(133px, 100%);
  }
}

@media (min-width: 1920px) {
  .tech-stack-section {
    height: 712px;
    padding: 120px 119px 120px 120px;
  }

  .tech-stack-layout {
    --ts-heading: 353px;
    --ts-heading-gap: 217px;
    --ts-logos-gap: 100px;
  }

  .tech-stack-title {
    font-size: 56px;
  }

  .tech-stack-logos {
    flex: 0 0 1010px;
    width: 1010px;
    max-width: 1010px;
    gap: 80px;
  }

  .tech-stack-row {
    width: 1010px;
    max-width: 1010px;
    gap: 65px;
  }

  .tech-stack-row--1 {
    gap: 73px;
  }

  .tech-stack-logo-item {
    flex-shrink: 0;
    min-width: auto;
  }

  .tech-stack-logo {
    flex-shrink: 0;
    max-width: none;
  }

  .tech-stack-logo--elementor {
    width: 324px;
    height: 64px;
    max-width: none;
  }

  .tech-stack-logo--litespeed {
    width: 59px;
    height: 59px;
    max-width: none;
  }

  .tech-stack-logo--yoast {
    width: 128px;
    height: 60px;
    max-width: none;
  }

  .tech-stack-logo--woo {
    width: 147px;
    height: 38px;
    max-width: none;
  }

  .tech-stack-logo--alpine-js {
    width: 59px;
    height: 59px;
    max-width: none;
  }

  .tech-stack-logo--acf {
    width: 91px;
    height: 43px;
    max-width: none;
  }

  .tech-stack-logo--cookieyes {
    width: 251px;
    height: 40px;
    max-width: none;
  }

  .tech-stack-logo--wpforms {
    width: 208px;
    height: 57px;
    max-width: none;
  }

  .tech-stack-logo--elementskit {
    width: 264px;
    height: 37px;
    max-width: none;
  }

  .tech-stack-logo--wp-mail-smtp {
    width: 208px;
    height: 54px;
    max-width: none;
  }

  .tech-stack-logo--custom-code {
    width: 63px;
    height: 50px;
    max-width: none;
  }

  .tech-stack-logo--formidable-forms {
    width: 220px;
    height: 54px;
    max-width: none;
  }

  .tech-stack-logo--rank-math {
    width: 58px;
    height: 58px;
    max-width: none;
  }

  .tech-stack-logo--hubspot {
    width: 201px;
    height: 59px;
    max-width: none;
  }

  .tech-stack-logo--security {
    width: 52px;
    height: 52px;
    max-width: none;
  }

  .tech-stack-logo--newsletter-plugin {
    width: 247px;
    height: 49px;
    max-width: none;
  }

  .tech-stack-logo--optimizing-matters {
    width: 133px;
    height: 49px;
    max-width: none;
  }
}

/* Process Section */
.how-we-work-section {
  gap: var(--hw-section-gap, 3rem);
  padding: 4rem 22px;
  background-color: #ffffff;
  justify-content: flex-start;
  --hw-header-gap: 24px;
  --hw-title-gap: 20px;
  --hw-section-gap: 80px;
}

.how-we-work-header {
  display: flex;
  width: 100%;
  max-width: 1681px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hw-header-gap);
}

.how-we-work-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.how-we-work-badge__dot {
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #1cb1a9;
  aspect-ratio: 1 / 1;
}

.how-we-work-badge__label {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: #333333;
}

.how-we-work-intro {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--hw-title-gap);
}

.how-we-work-title {
  margin: 0;
  max-width: none;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1.68px;
  color: #1c1c1c;
}

.how-we-work-subtitle {
  margin: 0;
  max-width: 720px;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: #333333;
  text-align: left;
}

.how-we-work-grid {
  display: flex;
  width: 100%;
  max-width: 1681px;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
}

.how-we-work-card {
  position: relative;
  display: flex;
  width: 100%;
  max-width: none;
  flex-direction: column;
  overflow: hidden;
  border-radius: 40px;
  padding: 2rem 2rem 1.75rem;
  box-sizing: border-box;
  --hw-card-pt: 2rem;
  --hw-card-px: 2rem;
  --hw-card-pb: 1.75rem;
  --hw-top-height: 120px;
  --hw-rule-gap: 1.75rem;
  --hw-body-gap: 0.625rem;
  --hw-icon-size: 160px;
  --hw-icon-offset: 32px;
  --hw-content-width: 100%;
}

.how-we-work-card--filled {
  background-color: #f4f4f4;
}

.how-we-work-card--outline {
  background-color: #ffffff;
  border: 1px solid rgba(105, 105, 105, 0.20);
}

.how-we-work-card__icon-wrap {
  position: absolute;
  top: calc(-1 * var(--hw-icon-offset));
  right: calc(-1 * var(--hw-icon-offset));
  width: var(--hw-icon-size);
  height: var(--hw-icon-size);
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 0;
}

.how-we-work-card__icon-inner {
  display: flex;
  width: var(--hw-icon-size);
  height: var(--hw-icon-size);
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
}

.how-we-work-card__icon {
  display: block;
  width: var(--hw-icon-size);
  height: var(--hw-icon-size);
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
}

.how-we-work-card--outline .how-we-work-card__icon,
.how-we-work-card--filled .how-we-work-card__icon {
  filter: none;
}

.how-we-work-card__top {
  position: relative;
  z-index: 1;
  min-height: calc(var(--hw-top-height) - 1px);
  transition: transform 0.4s ease-in-out;
}

.how-we-work-card__step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #333333;
}

.how-we-work-card__bar {
  display: inline-block;
  width: 2px;
  height: 14px;
  background-color: #333333;
  border-radius: 2px;
}

.how-we-work-card__rule {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--hw-content-width);
  height: 1px;
  margin: 0 0 var(--hw-rule-gap);
  border: 0;
  border-radius: 10px;
  background-color: rgba(26, 26, 26, 0.20);
  clear: both;
}

.how-we-work-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--hw-body-gap);
  transition: transform 0.4s ease-in-out;
}

.how-we-work-card__heading {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.96px;
  color: #333333;
}

.how-we-work-card__text {
  margin: 0;
  max-width: var(--hw-content-width);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #333333;
}

@media (hover: hover) and (pointer: fine) {
  .how-we-work-card:hover .how-we-work-card__top {
    transform: translateY(10px);
  }

  .how-we-work-card:hover .how-we-work-card__body {
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-we-work-card {
    transition: none;
  }

  .how-we-work-card__top,
  .how-we-work-card__body {
    transition: none;
  }

  .how-we-work-card:hover .how-we-work-card__top,
  .how-we-work-card:hover .how-we-work-card__body {
    transform: none;
  }

  .how-we-work-card--step-2,
  .how-we-work-card--step-3,
  .how-we-work-card--step-4 {
    margin-top: 0;
    animation: none;
  }
}

@media (min-width: 640px) {
  .how-we-work-section {
    padding: 5rem 2rem;
    --hw-header-gap: 2rem;
    --hw-section-gap: 110px;
  }

  .how-we-work-title {
    font-size: 2.75rem;
  }

  .how-we-work-subtitle {
    font-size: 1.25rem;
  }

  .how-we-work-card {
    height: 422px;
    padding: var(--hw-card-pt) var(--hw-card-px) var(--hw-card-pb);
    --hw-card-pt: 2.5rem;
    --hw-card-px: 2.5rem;
    --hw-card-pb: 2rem;
    --hw-top-height: 140px;
    --hw-rule-gap: 2rem;
    --hw-body-gap: 0.75rem;
    --hw-icon-size: 180px;
    --hw-icon-offset: 40px;
  }

  .how-we-work-card__heading {
    font-size: 32px;
  }

  .how-we-work-card__text {
    font-size: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .how-we-work-section {
    padding: 5rem 2.5rem;
  }

  .how-we-work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
  }

  .how-we-work-card {
    height: auto;
    min-height: 380px;
    margin-top: 0;
  }

  .how-we-work-card--step-2,
  .how-we-work-card--step-3,
  .how-we-work-card--step-4 {
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .how-we-work-section {
    padding: 80px 48px 0;
    overflow-x: clip;
    align-self: stretch;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    --hw-header-gap: clamp(120px, 26.8vw, 451px);
    --hw-title-gap: 20px;
    --hw-section-gap: clamp(80px, 10vw, 180px);
  }

  .how-we-work-header {
    flex-direction: row;
    align-items: flex-start;
  }

  .how-we-work-intro {
    flex: 1;
    min-width: 0;
  }

  .how-we-work-title {
    font-size: clamp(2rem, 3.2vw, 56px);
  }

  .how-we-work-subtitle {
    font-size: clamp(1.125rem, 1.5vw, 24px);
  }

  .how-we-work-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    width: 100%;
    max-width: 1681px;
    min-height: 0;
    height: auto;
    gap: 16px;
  }

  .how-we-work-card {
    flex: none;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 380px;
    margin-top: 0;
    transition: margin-top 0.85s cubic-bezier(0.4, 0, 0.2, 1);
    padding: var(--hw-card-pt) var(--hw-card-px) var(--hw-card-pb);
    --hw-card-pt: 28px;
    --hw-card-px: 28px;
    --hw-card-pb: 22px;
    --hw-top-height: 112px;
    --hw-rule-gap: 28px;
    --hw-body-gap: 8px;
    --hw-icon-size: 200px;
    --hw-icon-offset: 35px;
    --hw-content-width: 100%;
  }

  .how-we-work-card__heading {
    font-size: clamp(1.25rem, 1.8vw, 32px);
  }

  .how-we-work-card__text {
    font-size: clamp(0.95rem, 1.2vw, 20px);
  }

  @keyframes alignCards {
    to {
      margin-top: 0;
    }
  }

  /* Staggered Card Layout */
  .how-we-work-card--step-1 {
    margin-top: 0;
  }

  .how-we-work-card--step-2 {
    margin-top: 96px;
    animation: alignCards linear both;
    animation-timeline: view();
    animation-range: contain 0% exit 20%;
  }

  .how-we-work-card--step-3 {
    margin-top: 36px;
    animation: alignCards linear both;
    animation-timeline: view();
    animation-range: contain 0% exit 20%;
  }

  .how-we-work-card--step-4 {
    margin-top: 140px;
    animation: alignCards linear both;
    animation-timeline: view();
    animation-range: contain 0% exit 20%;
  }
}

@media (min-width: 1920px) {
  .how-we-work-section {
    padding: 120px 120px 0;
    --hw-header-gap: 451px;
    --hw-title-gap: 20px;
    --hw-section-gap: 180px;
  }

  .how-we-work-grid {
    gap: 20px;
    min-height: 0;
  }

  .how-we-work-card {
    min-height: 422px;
    padding: var(--hw-card-pt) var(--hw-card-px) var(--hw-card-pb);
    --hw-card-pt: 40px;
    --hw-card-px: 40px;
    --hw-card-pb: 31px;
    --hw-top-height: 160px;
    --hw-rule-gap: 40px;
    --hw-body-gap: 12px;
    --hw-icon-size: 200px;
    --hw-icon-offset: 50px;
    --hw-content-width: 325px;
  }

  .how-we-work-card--step-2 {
    margin-top: 180px;
    animation: alignCards linear both;
    animation-timeline: view();
    animation-range: contain 0% exit 20%;
  }

  .how-we-work-card--step-3 {
    margin-top: 60px;
    animation: alignCards linear both;
    animation-timeline: view();
    animation-range: contain 0% exit 20%;
  }

  .how-we-work-card--step-4 {
    margin-top: 280px;
    animation: alignCards linear both;
    animation-timeline: view();
    animation-range: contain 0% exit 20%;
  }
}

/* Pricing Section */
.pricing-section {
  position: relative;
  z-index: 1;
  gap: 2.5rem;
  padding: 60px 1rem 4rem;
  background-color: #ffffff;
}

.pricing-title {
  margin: 0;
  max-width: 920px;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1.68px;
  color: #1c1c1c;
  text-align: center;
}

.pricing-track {
  display: flex;
  width: 100%;
  max-width: 1681px;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.pricing-card {
  display: flex;
  width: 100%;
  max-width: 533px;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 40px;
  padding: 2rem;
}

.pricing-card--light {
  background-color: #f4f4f4;
}

.pricing-card--dark {
  background-color: #1c1c1c;
}

.pricing-card__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  transition: transform 0.4s ease-in-out;
}

.pricing-card__footer {
  display: flex;
  flex: 1;
  flex-direction: column;
  transition: transform 0.4s ease-in-out;
}

.pricing-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 41px;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  color: #333333;
}

.pricing-card__badge--light {
  color: #fff;
}

.pricing-card__bar {
  display: inline-block;
  width: 2px;
  height: 14px;
  border-radius: 2px;
  background-color: #333333;
}

.pricing-card__bar--light {
  background-color: #ffffff;
}

.pricing-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
}

.pricing-card__amount {
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1.68px;
  color: #1c1c1c;
}

.pricing-card__amount--light {
  color: #ffffff;
}

.pricing-card__period {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #333333;
}

.pricing-card__period--muted {
  color: rgba(255, 255, 255, 0.70);
}

.pricing-card__audience {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #333333;
}

.pricing-card__audience--light {
  color: #ffffff;
}

.pricing-card__rule {
  width: 100%;
  max-width: 413px;
  height: 1px;
  margin: 1.5rem 0;
  border: 0;
  border-radius: 10px;
  background-color: rgba(26, 26, 26, 0.20);
}

.pricing-card__rule--dark {
  background-color: rgba(255, 255, 255, 0.20);
}

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.pricing-card__feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.35;
  color: #333333;
}

.pricing-card__feature--light {
  color: #ffffff;
}

.pricing-card__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #d9d9d9;
  aspect-ratio: 1 / 1;
}

.pricing-card__dot--dark {
  background-color: #525252;
}

.pricing-card__cta {
  display: flex;
  width: min(100%, 300px);
  max-width: 85%;
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: 1.25rem;
  margin-left: auto;
  margin-right: auto;
  padding: 14px 36px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}

.pricing-card__cta[data-hover] {
  position: relative;
  overflow: hidden;
  perspective: 700px;
}

.pricing-card__cta[data-hover]::after {
  content: attr(data-hover);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  white-space: nowrap;
  transform: translateY(100%) translateZ(0) rotateX(-90deg);
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.pricing-card__cta[data-hover]:hover .site-header__link-text,
.pricing-card__cta[data-hover]:focus .site-header__link-text {
  transform: translateY(-100%) translateZ(0) rotateX(90deg);
}

.pricing-card__cta[data-hover]:hover::after,
.pricing-card__cta[data-hover]:focus::after {
  transform: translateY(0) translateZ(0) rotateX(0deg);
}

@media (hover: hover) and (pointer: fine) {
  .pricing-card:hover .pricing-card__header {
    transform: translateY(10px);
  }

  .pricing-card:hover .pricing-card__footer {
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card__header,
  .pricing-card__footer {
    transition: none;
  }

  .pricing-card:hover .pricing-card__header,
  .pricing-card:hover .pricing-card__footer {
    transform: none;
  }
}

.pricing-card__cta--dark {
  background-color: #1c1c1c;
  color: #ffffff;
}

.pricing-card__cta--light {
  background-color: #ffffff;
  color: #191919;
}

@media (min-width: 640px) {
  .pricing-section {
    padding: 80px 2rem 5rem;
    gap: 3rem;
  }

  .pricing-title {
    font-size: 2.75rem;
  }

  .pricing-card {
    height: auto;
    min-height: 620px;
    padding: 2.5rem;
  }

  .pricing-card__amount {
    font-size: 56px;
  }

  .pricing-card__feature {
    font-size: 22px;
    line-height: 1.5;
  }

  .pricing-card__cta {
    width: 100%;
    max-width: 413px;
    align-self: stretch;
    margin-top: auto;
    margin-left: 0;
    margin-right: 0;
    padding: 20px 40px;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1.5;
  }
}

@media (min-width: 1024px) {
  .pricing-section {
    gap: 48px;
    padding: clamp(60px, 6.25vw, 120px) 48px 80px;
    overflow-x: clip;
  }

  .pricing-title {
    font-size: clamp(2rem, 3.2vw, 56px);
  }

  .pricing-track {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 1681px;
  }

  .pricing-card {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 533px;
    height: auto;
    min-height: 640px;
    padding: 36px 28px;
  }

  .pricing-card__amount {
    font-size: clamp(2.25rem, 3.5vw, 56px);
  }

  .pricing-card__feature {
    font-size: clamp(1rem, 1.3vw, 22px);
  }

  .pricing-card__rule {
    width: 100%;
    max-width: 413px;
    margin: 24px 0 28px;
  }

  .pricing-card__features {
    gap: 12px;
  }

  .pricing-card__cta {
    width: 100%;
    max-width: 413px;
    padding: 16px 28px;
  }
}

@media (min-width: 1920px) {
  .pricing-section {
    gap: 60px;
    padding: 120px 120px 120px;
  }

  .pricing-track {
    gap: 41px;
  }

  .pricing-card {
    flex: 0 1 533px;
    width: 533px;
    min-height: 702px;
    height: 702px;
    padding: 60px;
  }

  .pricing-card__cta {
    padding: 20px 40px;
  }
}

/* Problems Section */
.problems-section {
  min-height: auto;
  padding: 4rem 1rem;
  background-color: #1c1c1c;
  box-sizing: border-box;
}

.problems-layout {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

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

.problems-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.problems-badge__dot {
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #1cb1a9;
  aspect-ratio: 1 / 1;
}

.problems-badge__label {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.70);
}

.problems-content {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 2.5rem;
}

.problems-top {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.problems-title {
  margin: 0;
  max-width: 720px;
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1.68px;
  color: #fff;
}

.problems-break {
  display: none;
}

.problems-copy {
  display: flex;
  width: 100%;
  max-width: 520px;
  flex-direction: column;
  gap: 1rem;
}

.problems-copy__block {
  margin: 0;
}

.problems-copy p,
.problems-copy__block {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.70);
  text-align: left;
}

.problems-copy__line {
  display: inline;
}

.problems-list {
  display: flex;
  width: 100%;
  max-width: 100%;
  flex-direction: column;
  align-self: stretch;
  border-top: 1px solid rgba(255, 255, 255, 0.20);
}

.problems-list__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}

.problems-list__link {
  display: block;
  width: fit-content;
  padding: 1.5rem 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.96px;
  color: rgba(255, 255, 255, 0.50);
  text-decoration: none;
  transition:
    transform 0.4s cubic-bezier(0.5, 0, 0.5, 1),
    color 0.4s cubic-bezier(0.5, 0, 0.5, 1);
}

@media (hover: hover) and (pointer: fine) {
  .problems-list__link:hover,
  .problems-list__link:focus-visible {
    color: #fff;
    transform: translateX(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .problems-list__link {
    transition: none;
  }

  .problems-list__link:hover,
  .problems-list__link:focus-visible {
    transform: none;
  }
}

@media (min-width: 640px) {
  .problems-section {
    padding: 5rem 2rem;
  }

  .problems-title {
    font-size: 2.75rem;
  }

  .problems-copy p {
    font-size: 1.25rem;
  }

  .problems-list__link {
    font-size: 1.75rem;
    padding: 32px 0;
  }
}

@media (min-width: 1024px) {
  .problems-section {
    --problems-section-pad: clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px);
    --problems-layout-gap: clamp(64px, calc(64px + (56 * (100vw - 1024px) / 896)), 120px);
    --problems-heading-inset: clamp(400px, calc(400px + (210 * (100vw - 1024px) / 896)), 610px);
    --problems-heading-width: clamp(300px, calc(300px + (144 * (100vw - 1024px) / 896)), 444px);
    --problems-heading-copy-gap: clamp(32px, calc(32px + (180 * (100vw - 1024px) / 896)), 247px);
    --problems-copy-offset: clamp(8px, calc(8px + (4 * (100vw - 1024px) / 896)), 12px);
    --problems-content-gap: clamp(48px, calc(48px + (32 * (100vw - 1024px) / 896)), 80px);
    height: auto;
    min-height: clamp(640px, calc(640px + (290 * (100vw - 1024px) / 896)), 930px);
    padding: var(--problems-section-pad);
    display: flex;
    align-items: flex-start;
    overflow-x: clip;
  }

  .problems-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--problems-layout-gap);
    width: 100%;
  }

  .problems-sidebar {
    flex: 0 0 calc(var(--problems-heading-inset) - var(--problems-section-pad) - var(--problems-layout-gap));
    width: calc(var(--problems-heading-inset) - var(--problems-section-pad) - var(--problems-layout-gap));
    padding-top: 0;
  }

  .problems-content {
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--problems-content-gap);
  }

  .problems-top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--problems-heading-copy-gap);
  }

  .problems-title {
    flex: 0 0 auto;
    width: max-content;
    max-width: var(--problems-heading-width);
    font-size: clamp(32px, calc(32px + (24 * (100vw - 1024px) / 896)), 56px);
    line-height: 1.2;
  }

  .problems-copy {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    padding-top: var(--problems-copy-offset);
    gap: clamp(16px, calc(16px + (8 * (100vw - 1024px) / 896)), 24px);
  }

  .problems-break {
    display: inline;
  }

  .problems-copy__line {
    display: block;
  }

  .problems-copy p,
  .problems-copy__block {
    font-size: clamp(16px, calc(16px + (6 * (100vw - 1024px) / 896)), 22px);
  }

  .problems-list {
    width: 100%;
    max-width: 100%;
  }

  .problems-list__link {
    font-size: clamp(22px, calc(22px + (10 * (100vw - 1024px) / 896)), 32px);
    padding-top: clamp(24px, calc(24px + (8 * (100vw - 1024px) / 896)), 32px);
    padding-bottom: clamp(24px, calc(24px + (8 * (100vw - 1024px) / 896)), 32px);
  }
}

@media (min-width: 1920px) {
  .problems-section {
    height: 930px;
    min-height: 930px;
    padding: 120px;
    --problems-layout-gap: 120px;
    --problems-heading-inset: 610px;
    --problems-heading-width: 444px;
    --problems-heading-copy-gap: 247px;
    --problems-copy-offset: 12px;
    --problems-copy-top: 132px;
    --problems-section-pad: 120px;
    --problems-content-gap: 80px;
  }

  .problems-layout {
    gap: var(--problems-layout-gap);
  }

  .problems-sidebar {
    flex: 0 0 calc(var(--problems-heading-inset) - var(--problems-section-pad) - var(--problems-layout-gap));
    width: calc(var(--problems-heading-inset) - var(--problems-section-pad) - var(--problems-layout-gap));
  }

  .problems-content {
    gap: var(--problems-content-gap);
  }

  .problems-top {
    gap: var(--problems-heading-copy-gap);
  }

  .problems-title {
    flex: 0 0 var(--problems-heading-width);
    width: var(--problems-heading-width);
    max-width: var(--problems-heading-width);
    font-size: 56px;
    line-height: 1.2;
  }

  .problems-copy {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    padding-top: var(--problems-copy-offset);
    gap: 24px;
  }

  .problems-copy p,
  .problems-copy__block {
    font-size: 22px;
  }

  .problems-list__link {
    font-size: 32px;
    padding-top: 32px;
    padding-bottom: 32px;
  }
}


/* Testimonials Section */
.testimonials-section {
  background-color: #f4f4f4;
  box-sizing: border-box;
  padding: 2.5rem 1rem;
}

.testimonials-layout {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

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

.testimonials-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.testimonials-badge__dot {
  display: block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #1cb1a9;
  aspect-ratio: 1 / 1;
}

.testimonials-badge__label {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #333333;
}

.testimonials-content {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
}

.testimonials-quote {
  margin: 0 0 1rem;
  max-width: 1190px;
}

.testimonials-quote p {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.5px;
  text-transform: capitalize;
  color: #525252;
}

.testimonials-author {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #525252;
}

.testimonials-controls {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.testimonials-controls__cluster {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 2rem;
  min-width: 0;
}

.testimonials-line {
  position: relative;
  display: none;
  flex: 0 0 80px;
  width: 80px;
  height: 2px;
  overflow: hidden;
}

.testimonials-line__fill {
  display: block;
  height: 2px;
  background-color: #525252;
  animation: kf_testimonials_line_width 2s linear infinite;
}

.testimonials-avatars {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
}

.testimonials-avatars__item {
  position: relative;
  flex-shrink: 0;
  margin-left: -14px;
}

.testimonials-avatars__item:first-child {
  margin-left: 0;
  z-index: 4;
}

.testimonials-avatars__item:nth-child(2) {
  z-index: 3;
}

.testimonials-avatars__item:nth-child(3) {
  z-index: 2;
}

.testimonials-avatars__item:nth-child(4) {
  z-index: 1;
}

.testimonials-avatars__img {
  display: block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50px;
  border: 2px solid #fff;
  box-sizing: border-box;
  object-fit: cover;
  object-position: 50% 50%;
  background-color: #1cb1a9;
}

.testimonials-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.testimonials-nav__btn {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

.testimonials-nav__btn:disabled {
  cursor: default;
  opacity: 1;
}

.testimonials-nav__icon {
  display: block;
  width: 36px;
  height: 36px;
}

@media (min-width: 640px) {
  .testimonials-section {
    padding: 4rem 2rem;
  }

  .testimonials-layout {
    gap: 1.5rem;
  }

  .testimonials-badge {
    gap: 0.75rem;
  }

  .testimonials-badge__dot {
    width: 10px;
    height: 10px;
  }

  .testimonials-badge__label {
    font-size: 16px;
  }

  .testimonials-quote {
    margin-bottom: 1.5rem;
  }

  .testimonials-quote p {
    font-size: 1.75rem;
    letter-spacing: -1px;
    line-height: 1.25;
  }

  .testimonials-author {
    font-size: 16px;
  }

  .testimonials-controls {
    margin-top: 2rem;
    gap: 1rem;
  }

  .testimonials-avatars__item {
    margin-left: -18px;
  }

  .testimonials-avatars__img {
    width: 48px;
    height: 48px;
  }

  .testimonials-nav {
    gap: 0.75rem;
  }

  .testimonials-nav__btn {
    width: 44px;
    height: 44px;
  }

  .testimonials-nav__icon {
    width: 44px;
    height: 44px;
  }
}

@media (min-width: 1024px) {
  .testimonials-section {
    --testimonials-pad-top: 120px;
    --testimonials-pad-right: 120px;
    --testimonials-pad-bottom: 120px;
    --testimonials-pad-left: 610px;
    height: 930px;
    min-height: 930px;
    padding: 0;
    box-sizing: border-box;
  }

  .testimonials-layout {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 930px;
  }

  .testimonials-sidebar {
    position: absolute;
    top: var(--testimonials-pad-top);
    left: 120px;
    width: auto;
    flex: none;
    padding-top: 0;
  }

  .testimonials-badge {
    gap: 0.75rem;
  }

  .testimonials-badge__dot {
    width: 12px;
    height: 12px;
  }

  .testimonials-badge__label {
    font-size: 18px;
  }

  .testimonials-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: calc(100% - var(--testimonials-pad-left) - var(--testimonials-pad-right));
    max-width: 1190px;
    height: 930px;
    min-height: 930px;
    margin-left: var(--testimonials-pad-left);
    padding:
      var(--testimonials-pad-top)
      0
      var(--testimonials-pad-bottom)
      0;
  }

  .testimonials-quote {
    margin-bottom: 60px;
    max-width: 1190px;
    width: 100%;
  }

  .testimonials-quote p {
    font-size: 56px;
    letter-spacing: -1.68px;
    line-height: 1.2;
  }

  .testimonials-author {
    font-size: 18px;
    line-height: 1;
  }

  .testimonials-controls {
    margin-top: 217px;
    align-items: center;
    gap: 48px;
    width: 100%;
  }

  .testimonials-controls__cluster {
    gap: 48px;
  }

  .testimonials-line {
    display: block;
  }

  .testimonials-avatars__item {
    margin-left: -20px;
  }

  .testimonials-avatars__img {
    width: 60px;
    height: 60px;
  }

  .testimonials-nav {
    gap: 16px;
    flex-shrink: 0;
  }

  .testimonials-nav__btn {
    width: 52px;
    height: 52px;
  }

  .testimonials-nav__icon {
    width: 52px;
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-line__fill {
    animation: none;
    width: 80px;
  }
}

/* Footer Section */
.site-footer {
  background-color: #000000;
  box-sizing: border-box;
}

.footer-inner {
  display: flex;
  width: 100%;
  max-width: 1920px;
  min-height: auto;
  flex-direction: column;
  box-sizing: border-box;
  padding: 4rem 1rem 2rem;
  margin: 0 auto;
}

.footer-main {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}

.footer-left {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
}

.footer-left__top {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}

.footer-heading {
  margin: 0;
  align-self: stretch;
  max-width: 720px;
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.56px;
  color: rgba(255, 255, 255, 0.70);
  text-transform: none;
}

.footer-break {
  display: block;
}

.footer-logo {
  display: inline-flex;
  margin-top: 1rem;
  text-decoration: none;
}

.footer-logo__img {
  display: block;
  width: 189px;
  height: 40px;
}

.footer-right {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0;
}

.footer-contacts {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 1.75rem;
}

.footer-contacts + .footer-divider {
  margin-top: 60px;
}

.footer-divider + .footer-nav {
  margin-top: 60px;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.footer-contact--phone {
  align-items: flex-start;
  text-align: left;
}

.footer-contact__label {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.50);
}

.footer-contact__value {
  display: inline-block;
  position: relative;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.96px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

.footer-contact__value-text {
  display: inline-block;
}

.footer-contact__value::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.footer-contact__value:hover::after,
.footer-contact__value:focus::after {
  transform: scaleX(1);
}

.footer-divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background-color: rgba(255, 255, 255, 0.20);
}

.footer-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: rgba(255, 255, 255, 0.20);
  flex-shrink: 0;
}

.footer-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: 0;
}

.footer-nav__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.footer-nav__col:nth-child(2) {
  align-items: flex-start;
}

.footer-nav__col:nth-child(3) {
  align-items: flex-start;
  text-align: left;
}

.footer-nav__link {
  display: inline-block;
  position: relative;
  overflow: hidden;
  perspective: 700px;
  font-family: 'Outfit', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

.footer-nav__link::after {
  content: attr(data-hover);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  white-space: nowrap;
  color: #ffffff;
  pointer-events: none;
  transform: translateY(100%) translateZ(0) rotateX(-90deg);
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.footer-nav__link:hover,
.footer-nav__link:focus {
  color: #ffffff;
}

.footer-nav__link:hover .site-header__link-text,
.footer-nav__link:focus .site-header__link-text {
  transform: translateY(-100%) rotateX(90deg);
}

.footer-nav__link:hover::after,
.footer-nav__link:focus::after {
  transform: translateY(0) translateZ(0) rotateX(0deg);
}

.footer-bottom {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 0;
  padding-top: 2rem;
  border-top: 0;
}

.footer-copy {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.50);
}

.footer-socials {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 52px;
}

.footer-socials__link {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-socials__link:hover,
.footer-socials__link:focus {
  opacity: 0.7;
}

@media (min-width: 640px) {
  .footer-inner {
    padding: 5rem 2rem 2.5rem;
  }

  .footer-heading {
    font-size: 2.75rem;
  }

  .footer-contacts {
    flex-direction: row;
    gap: 4rem;
  }

  .footer-contact__label {
    font-size: 22px;
  }

  .footer-contact__value {
    font-size: 28px;
  }

  .footer-nav {
    gap: 2.5rem 3.5rem;
  }

  .footer-nav__col {
    display: flex;
  }

  .footer-nav__link {
    font-size: 1.35rem;
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .footer-copy,
  .footer-socials {
    order: unset;
  }

  .footer-bottom {
    padding-top: 2rem;
  }

  .footer-rule {
    margin-top: 0;
    margin-bottom: 0;
  }

  .footer-socials {
    gap: 52px;
  }
}

/* Tablet Footer Layout */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .footer-nav {
    margin-bottom: 24px;
  }

  .footer-rule {
    margin-top: 0;
    margin-bottom: 24px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0;
    padding-top: 0;
  }

  .footer-socials {
    order: 1;
  }

  .footer-copy {
    order: 2;
  }
}

/* Tablet Stats Layout */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .site-header__mobile-ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .site-header__btn--mobile {
    flex: none;
    width: 58%;
    max-width: 240px;
    padding: 0.5rem 1.25rem;
    font-size: 0.9375rem;
  }

  .about-stat-card {
    height: 118px;
    min-height: 118px;
    padding: 0 2rem;
  }

  .about-stat-card__text {
    font-size: 1.25rem;
  }

  .capability-card__title {
    font-size: 2.625rem;
  }

  .capability-card {
    min-height: 420px;
    gap: 0;
  }

  .capability-card__list {
    margin: auto 0 0;
    gap: 1rem;
  }

  .capability-card__bullet {
    width: 10px;
    height: 10px;
  }

  .capability-card__watermark {
    width: 200px;
    height: 200px;
  }

  .capability-card__item {
    font-size: 18px;
  }

  .tech-stack-logo {
    height: 34px;
    max-width: 132px;
  }

  .tech-stack-logo--elementor {
    height: 36px;
    max-width: 165px;
  }

  .tech-stack-logo--litespeed,
  .tech-stack-logo--alpine-js,
  .tech-stack-logo--rank-math,
  .tech-stack-logo--security {
    height: 38px;
    width: 38px;
    max-width: 38px;
  }

  .tech-stack-logo--yoast {
    height: 34px;
    max-width: 96px;
  }

  .tech-stack-logo--woo {
    height: 30px;
    max-width: 104px;
  }

  .tech-stack-logo--acf {
    height: 32px;
    max-width: 66px;
  }

  .tech-stack-logo--cookieyes {
    height: 30px;
    max-width: 152px;
  }

  .tech-stack-logo--wpforms {
    height: 30px;
    max-width: 132px;
  }

  .tech-stack-logo--elementskit {
    height: 28px;
    max-width: 152px;
  }

  .tech-stack-logo--wp-mail-smtp {
    height: 32px;
    max-width: 132px;
  }

  .tech-stack-logo--custom-code {
    height: 34px;
    width: 42px;
    max-width: 42px;
  }

  .tech-stack-logo--formidable-forms {
    height: 32px;
    max-width: 136px;
  }

  .tech-stack-logo--hubspot {
    height: 34px;
    max-width: 118px;
  }

  .tech-stack-logo--newsletter-plugin {
    height: 30px;
    max-width: 152px;
  }

  .tech-stack-logo--optimizing-matters {
    height: 30px;
    max-width: 88px;
  }

  .how-we-work-card__heading {
    font-size: 28px;
  }

  .how-we-work-card__text {
    font-size: 18px;
  }

  .pricing-card__amount {
    font-size: 48px;
  }

  .pricing-card__period,
  .pricing-card__audience {
    font-size: 16px;
  }

  .pricing-card__badge {
    font-size: 14px;
  }

  .pricing-card__feature {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .footer-inner {
    height: 732px;
    min-height: 732px;
    padding: 120px 120px 40px;
    justify-content: flex-start;
  }

  .footer-main {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 1680px;
  }

  .footer-left {
    flex: 0 0 720px;
    width: 720px;
    max-width: 720px;
    align-self: stretch;
    justify-content: space-between;
    gap: 0;
  }

  .footer-left__top {
    gap: 40px;
  }

  .footer-heading {
    font-size: 56px;
    max-width: 720px;
  }

  .footer-logo {
    margin-top: 0;
    margin-bottom: 0;
  }

  .footer-right {
    display: flex;
    flex-direction: column;
    row-gap: 60px;
    flex: 0 0 807px;
    width: 807px;
    min-width: 807px;
    max-width: 807px;
    margin-left: auto;
    align-items: stretch;
    padding-top: 0;
  }

  .footer-contacts {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 0;
  }

  .footer-contact:first-child {
    flex: 0 0 auto;
  }

  .footer-contact--phone {
    flex: 0 0 auto;
    align-items: flex-start;
    text-align: left;
  }

  .footer-divider {
    width: 100%;
    margin-top: 0;
  }

  .footer-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 0;
  }

  .footer-nav__col {
    flex: 0 0 auto;
    gap: 20px;
  }

  .footer-nav__col:nth-child(1) {
    align-items: flex-start;
  }

  .footer-nav__col:nth-child(2) {
    align-items: flex-start;
  }

  .footer-nav__col:nth-child(3) {
    align-items: flex-start;
    text-align: left;
  }

  .footer-contacts + .footer-divider,
  .footer-divider + .footer-nav {
    margin-top: 0;
  }

  .footer-contact__value {
    font-size: 32px;
  }

  .footer-nav__link {
    font-size: 24px;
  }

  .footer-rule {
    width: 1680px;
    max-width: 100%;
    margin-top: 120px;
    margin-bottom: 0;
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1680px;
    margin-top: 0;
    padding-top: 32px;
    flex-shrink: 0;
  }

  .footer-copy,
  .footer-socials {
    order: unset;
  }

  .footer-nav {
    margin-bottom: 0;
  }

  .footer-socials {
    gap: 52px;
  }
}

.list-none { list-style: none; }
.m-0 { margin: 0; }
.items-stretch { align-items: stretch; }
.flex-1 { flex: 1 1 0%; }
.flex-nowrap { flex-wrap: nowrap; }

.text-\[28px\] { font-size: 28px; line-height: 1.2; }
.text-\[56px\] { font-size: 56px; }
.text-\[24px\] { font-size: 24px; }
.text-\[32px\] { font-size: 32px; }
.text-\[22px\] { font-size: 22px; }
.text-\[\#1C1C1C\] { color: #1C1C1C; }
.text-\[\#525152\] { color: #525152; }
.text-\[rgba\(255\,255\,255\,0\.70\)\] { color: rgba(255,255,255,0.70); }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.leading-\[1\.2\] { line-height: 1.2; }
.leading-\[1\.5\] { line-height: 1.5; }
.tracking-\[-0\.96px\] { letter-spacing: -0.96px; }
.tracking-\[-1\.68px\] { letter-spacing: -1.68px; }
.text-\[rgba\(28\,28\,28\,0\.30\)\] { color: rgba(28, 28, 28, 0.30); }
.text-\[\#1CB0A9\] { color: #1CB0A9; }
.bg-\[\#191919\] { background-color: #191919; }

.rounded-\[24px\] { border-radius: 24px; }
.rounded-\[32px\] { border-radius: 32px; }
.rounded-\[40px\] { border-radius: 40px; }

.h-\[145px\] { height: 145px; }
.min-h-\[100px\] { min-height: 100px; }
.w-\[530px\] { width: 530px; }
.w-\[calc\(50\%-8px\)\] { width: calc(50% - 8px); }

.gap-6 { gap: 1.5rem; }
.gap-10 { gap: 2.5rem; }
.gap-\[40px\] { gap: 40px; }
.gap-\[146px\] { gap: 146px; }
.px-\[100px\] { padding-left: 100px; padding-right: 100px; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-\[120px\] { padding-top: 120px; padding-bottom: 120px; }
.px-\[120px\] { padding-left: 120px; padding-right: 120px; }
.pt-\[120px\] { padding-top: 120px; }
.pb-\[119px\] { padding-bottom: 119px; }
.pb-\[120px\] { padding-bottom: 120px; }
.pl-\[120px\] { padding-left: 120px; }
.pr-\[120px\] { padding-right: 120px; }
.pr-\[119px\] { padding-right: 119px; }
.p-\[60px\] { padding: 60px; }
.p-0 { padding: 0; }
.max-w-\[1680px\] { max-width: 1680px; }
.max-w-none { max-width: none; }
.text-\[56px\] { font-size: 56px; line-height: 1; }
.gap-\[73px\] { gap: 73px; }
.gap-\[80px\] { gap: 80px; }
.bg-brand-teal\/30 { background-color: rgba(28, 177, 169, 0.30); }
.self-auto { align-self: auto; }
.text-center { text-align: center; }

@media (min-width: 640px) {
  .sm\:gap-8 { gap: 2rem; }
  .sm\:gap-16 { gap: 4rem; }
  .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .sm\:px-12 { padding-left: 3rem; padding-right: 3rem; }
  .sm\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .sm\:rounded-\[32px\] { border-radius: 32px; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  #clients {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

@media (min-width: 768px) {
  .md\:gap-20 { gap: 5rem; }
  .md\:px-16 { padding-left: 4rem; padding-right: 4rem; }
  .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .md\:flex-row { flex-direction: row; }
  .md\:flex-wrap { flex-wrap: wrap; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:h-\[145px\] { height: 145px; }
  .md\:w-\[calc\(50\%-8px\)\] { width: calc(50% - 8px); }
  .md\:w-full { width: 100%; }
  .md\:rounded-\[40px\] { border-radius: 40px; }
  .md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .md\:text-5xl { font-size: 3rem; line-height: 1; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  #clients {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1024px) {
  .lg\:gap-\[146px\] { gap: 146px; }
  .lg\:gap-6 { gap: 1.5rem; }
  .lg\:gap-\[60px\] { gap: 60px; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-nowrap { flex-wrap: nowrap; }
  .lg\:px-\[120px\] { padding-left: 120px; padding-right: 120px; }
  .lg\:py-\[120px\] { padding-top: 120px; padding-bottom: 120px; }
  .lg\:pt-\[120px\] { padding-top: 120px; }
  .lg\:pb-\[120px\] { padding-bottom: 120px; }
  .lg\:pl-\[120px\] { padding-left: 120px; }
  .lg\:pr-\[119px\] { padding-right: 119px; }
  .lg\:min-h-\[659px\] { min-height: 659px; }
  .lg\:h-\[659px\] { height: 659px; }
  .lg\:text-\[56px\] { font-size: 56px; line-height: 1.2; }
  .lg\:text-\[24px\] { font-size: 24px; }
  .lg\:text-\[32px\] { font-size: 32px; }
  .lg\:w-\[530px\] { width: 530px; }
  .lg\:px-\[100px\] { padding-left: 100px; padding-right: 100px; }
  .lg\:mx-auto { margin-left: auto; margin-right: auto; }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .lg\:min-h-\[712px\] { min-height: 712px; }
  .lg\:mr-\[217px\] { margin-right: 217px; }
  .lg\:gap-\[73px\] { gap: 73px; }
  .lg\:gap-\[80px\] { gap: 80px; }
  .lg\:h-\[50px\] { height: 50px; }
  .lg\:h-\[59px\] { height: 59px; }
  .lg\:h-\[64px\] { height: 64px; }
  .lg\:w-\[63px\] { width: 63px; }
  .lg\:w-\[353px\] { width: 353px; }
  .lg\:max-w-\[324px\] { max-width: 324px; }
  .lg\:max-w-\[353px\] { max-width: 353px; }
  .lg\:flex-\[0_0_353px\] { flex: 0 0 353px; }
  .lg\:flex-\[0_0_1px\] { flex: 0 0 1px; }
  .lg\:justify-start { justify-content: flex-start; }
  .lg\:pl-0 { padding-left: 0; }
  .lg\:text-\[56px\] { font-size: 56px; line-height: 1; }

  #clients {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 48px;
    padding-right: 48px;
  }
}

@media (min-width: 1920px) {
  #clients {
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: 120px;
    padding-right: 119px;
  }
}

@media (min-width: 1280px) {
  .xl\:flex-nowrap { flex-wrap: nowrap; }
  .xl\:flex-1 { flex: 1 1 0%; }
  .xl\:mx-0 { margin-left: 0; margin-right: 0; }
}

/* Laptop Layout */
@media (min-width: 1024px) and (max-width: 1919.98px) {
  .hero-heading,
  .hero-heading-light,
  .hero-heading-dot {
    min-height: 0;
    font-size: clamp(40px, calc(40px + (60 * (100vw - 1024px) / 896)), 100px);
    line-height: 1;
    letter-spacing: -1px;
  }

  .site-header__inner {
    height: clamp(72px, calc(72px + (22 * (100vw - 1024px) / 896)), 94px);
    padding-left: clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px);
    padding-right: clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px);
    gap: clamp(12px, calc(12px + (20 * (100vw - 1024px) / 896)), 32px);
  }

  .site-header__logo img {
    height: clamp(30px, calc(30px + (10 * (100vw - 1024px) / 896)), 40px);
    max-width: clamp(130px, calc(130px + (59 * (100vw - 1024px) / 896)), 189px);
  }

  .site-header__desktop {
    gap: clamp(12px, calc(12px + (36 * (100vw - 1024px) / 896)), 48px);
  }

  .site-header__links {
    gap: clamp(14px, calc(14px + (38 * (100vw - 1024px) / 896)), 52px);
  }

  .site-header__link {
    font-size: clamp(14px, calc(14px + (10 * (100vw - 1024px) / 896)), 24px);
  }

  .site-header__actions {
    gap: clamp(6px, calc(6px + (10 * (100vw - 1024px) / 896)), 16px);
  }

  .site-header__btn {
    padding:
      clamp(8px, calc(8px + (4 * (100vw - 1024px) / 896)), 12px)
      clamp(12px, calc(12px + (20 * (100vw - 1024px) / 896)), 32px);
    font-size: clamp(13px, calc(13px + (7 * (100vw - 1024px) / 896)), 20px);
  }

  #hero {
    min-height: clamp(580px, calc(580px + (350 * (100vw - 1024px) / 896)), 930px);
    height: auto;
  }

  .hero-inner {
    padding-left: clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px);
    padding-right: clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px);
  }

  .hero-content {
    padding-top: clamp(72px, calc(72px + (108 * (100vw - 1024px) / 896)), 180px);
    padding-bottom: clamp(60px, calc(60px + (70 * (100vw - 1024px) / 896)), 130px);
  }

  .hero-trust__text {
    font-size: clamp(15px, calc(15px + (3 * (100vw - 1024px) / 896)), 18px);
  }

  .hero-rating {
    margin-top: clamp(24px, calc(24px + (16 * (100vw - 1024px) / 896)), 40px);
  }

  .hero-rating__star {
    width: clamp(18px, calc(18px + (6 * (100vw - 1024px) / 896)), 24px);
    height: clamp(18px, calc(18px + (6 * (100vw - 1024px) / 896)), 24px);
  }

  .hero-rating__score,
  .hero-rating__label {
    font-size: clamp(1.05rem, calc(1.05rem + (0.45rem * (100vw - 1024px) / 896)), 1.5rem);
  }

  .hero-rating__denominator {
    font-size: clamp(0.9rem, calc(0.9rem + (0.225rem * (100vw - 1024px) / 896)), 1.125rem);
  }

  .hero-cta-row {
    margin-top: clamp(28px, calc(28px + (32 * (100vw - 1024px) / 896)), 60px);
  }

  .cta-btn {
    gap: clamp(7px, calc(7px + (4 * (100vw - 1024px) / 896)), 11px);
    padding:
      clamp(12px, calc(12px + (8 * (100vw - 1024px) / 896)), 20px)
      clamp(22px, calc(22px + (18 * (100vw - 1024px) / 896)), 40px);
    font-size: clamp(14px, calc(14px + (6 * (100vw - 1024px) / 896)), 20px);
  }

  .cta-btn__arrow {
    width: clamp(24px, calc(24px + (9 * (100vw - 1024px) / 896)), 33px);
    height: clamp(11px, calc(11px + (4 * (100vw - 1024px) / 896)), 15px);
  }

  .about-section {
    gap: clamp(80px, calc(80px + (66 * (100vw - 1024px) / 896)), 146px);
    padding: clamp(64px, calc(64px + (56 * (100vw - 1024px) / 896)), 120px);
  }

  .about-heading {
    font-size: clamp(36px, calc(36px + (20 * (100vw - 1024px) / 896)), 56px);
  }

  .about-subline {
    font-size: clamp(18px, calc(18px + (6 * (100vw - 1024px) / 896)), 24px);
  }

  .about-stat-card__text {
    font-size: clamp(18px, calc(18px + (14 * (100vw - 1024px) / 896)), 32px);
  }

  #clients {
    padding-top: clamp(64px, calc(64px + (56 * (100vw - 1024px) / 896)), 120px);
    padding-bottom: clamp(64px, calc(64px + (56 * (100vw - 1024px) / 896)), 120px);
    padding-left: clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px);
    padding-right: clamp(48px, calc(48px + (71 * (100vw - 1024px) / 896)), 119px);
  }

  .clients-section__title,
  .lg\:text-\[56px\] {
    font-size: clamp(36px, calc(36px + (20 * (100vw - 1024px) / 896)), 56px);
    line-height: 1.2;
  }

  .capabilities-section {
    padding: clamp(64px, calc(64px + (56 * (100vw - 1024px) / 896)), 120px);
  }

  .tech-stack-section {
    min-height: clamp(520px, calc(520px + (192 * (100vw - 1024px) / 896)), 712px);
    padding:
      clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px)
      clamp(48px, calc(48px + (71 * (100vw - 1024px) / 896)), 119px);
  }

  .tech-stack-title {
    font-size: clamp(32px, calc(32px + (24 * (100vw - 1024px) / 896)), 56px);
  }

  .how-we-work-section {
    padding:
      clamp(64px, calc(64px + (56 * (100vw - 1024px) / 896)), 120px)
      clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px)
      0;
    --hw-header-gap: clamp(120px, calc(120px + (331 * (100vw - 1024px) / 896)), 451px);
    --hw-section-gap: clamp(80px, calc(80px + (100 * (100vw - 1024px) / 896)), 180px);
  }

  .how-we-work-title {
    font-size: clamp(32px, calc(32px + (24 * (100vw - 1024px) / 896)), 56px);
  }

  .how-we-work-subtitle {
    font-size: clamp(18px, calc(18px + (6 * (100vw - 1024px) / 896)), 24px);
  }

  .how-we-work-card {
    min-height: clamp(360px, calc(360px + (62 * (100vw - 1024px) / 896)), 422px);
    --hw-card-pt: clamp(28px, calc(28px + (12 * (100vw - 1024px) / 896)), 40px);
    --hw-card-px: clamp(28px, calc(28px + (12 * (100vw - 1024px) / 896)), 40px);
    --hw-card-pb: clamp(22px, calc(22px + (9 * (100vw - 1024px) / 896)), 31px);
    --hw-top-height: clamp(112px, calc(112px + (48 * (100vw - 1024px) / 896)), 160px);
    --hw-icon-size: clamp(140px, calc(140px + (60 * (100vw - 1024px) / 896)), 200px);
    --hw-icon-offset: clamp(35px, calc(35px + (15 * (100vw - 1024px) / 896)), 50px);
  }

  .how-we-work-card__heading {
    font-size: clamp(22px, calc(22px + (10 * (100vw - 1024px) / 896)), 32px);
  }

  .how-we-work-card__text {
    font-size: clamp(16px, calc(16px + (4 * (100vw - 1024px) / 896)), 20px);
  }

  .how-we-work-card--step-2 {
    margin-top: clamp(72px, calc(72px + (108 * (100vw - 1024px) / 896)), 180px);
  }

  .how-we-work-card--step-3 {
    margin-top: clamp(28px, calc(28px + (32 * (100vw - 1024px) / 896)), 60px);
  }

  .how-we-work-card--step-4 {
    margin-top: clamp(100px, calc(100px + (180 * (100vw - 1024px) / 896)), 280px);
  }

  .pricing-section {
    gap: clamp(40px, calc(40px + (20 * (100vw - 1024px) / 896)), 60px);
    padding:
      clamp(60px, calc(60px + (60 * (100vw - 1024px) / 896)), 120px)
      clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px);
  }

  .pricing-title {
    font-size: clamp(32px, calc(32px + (24 * (100vw - 1024px) / 896)), 56px);
  }

  .pricing-track {
    gap: clamp(16px, calc(16px + (25 * (100vw - 1024px) / 896)), 41px);
  }

  .pricing-card {
    min-height: clamp(560px, calc(560px + (142 * (100vw - 1024px) / 896)), 702px);
    padding: clamp(32px, calc(32px + (28 * (100vw - 1024px) / 896)), 60px);
  }

  .pricing-card__amount {
    font-size: clamp(32px, calc(32px + (24 * (100vw - 1024px) / 896)), 56px);
  }

  .pricing-card__feature {
    font-size: clamp(16px, calc(16px + (6 * (100vw - 1024px) / 896)), 22px);
  }

  .pricing-card__cta {
    padding:
      clamp(14px, calc(14px + (6 * (100vw - 1024px) / 896)), 20px)
      clamp(24px, calc(24px + (16 * (100vw - 1024px) / 896)), 40px);
  }

  .problems-section {
    min-height: clamp(640px, calc(640px + (290 * (100vw - 1024px) / 896)), 930px);
  }

  .problems-title {
    font-size: clamp(32px, calc(32px + (24 * (100vw - 1024px) / 896)), 56px);
  }

  .problems-copy p,
  .problems-copy__block {
    font-size: clamp(16px, calc(16px + (6 * (100vw - 1024px) / 896)), 22px);
  }

  .problems-list__link {
    font-size: clamp(22px, calc(22px + (10 * (100vw - 1024px) / 896)), 32px);
    padding-top: clamp(24px, calc(24px + (8 * (100vw - 1024px) / 896)), 32px);
    padding-bottom: clamp(24px, calc(24px + (8 * (100vw - 1024px) / 896)), 32px);
  }

  .testimonials-section {
    --testimonials-pad-top: clamp(64px, calc(64px + (56 * (100vw - 1024px) / 896)), 120px);
    --testimonials-pad-right: clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px);
    --testimonials-pad-bottom: clamp(64px, calc(64px + (56 * (100vw - 1024px) / 896)), 120px);
    --testimonials-pad-left: clamp(380px, calc(380px + (230 * (100vw - 1024px) / 896)), 610px);
    height: clamp(640px, calc(640px + (290 * (100vw - 1024px) / 896)), 930px);
    min-height: clamp(640px, calc(640px + (290 * (100vw - 1024px) / 896)), 930px);
  }

  .testimonials-layout {
    min-height: clamp(640px, calc(640px + (290 * (100vw - 1024px) / 896)), 930px);
  }

  .testimonials-sidebar {
    left: clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px);
  }

  .testimonials-content {
    height: clamp(640px, calc(640px + (290 * (100vw - 1024px) / 896)), 930px);
    min-height: clamp(640px, calc(640px + (290 * (100vw - 1024px) / 896)), 930px);
  }

  .testimonials-quote p {
    font-size: clamp(32px, calc(32px + (24 * (100vw - 1024px) / 896)), 56px);
  }

  .testimonials-controls {
    margin-top: clamp(120px, calc(120px + (97 * (100vw - 1024px) / 896)), 217px);
    gap: clamp(28px, calc(28px + (20 * (100vw - 1024px) / 896)), 48px);
  }

  .testimonials-avatars__img {
    width: clamp(48px, calc(48px + (12 * (100vw - 1024px) / 896)), 60px);
    height: clamp(48px, calc(48px + (12 * (100vw - 1024px) / 896)), 60px);
  }

  .testimonials-nav__btn,
  .testimonials-nav__icon {
    width: clamp(44px, calc(44px + (8 * (100vw - 1024px) / 896)), 52px);
    height: clamp(44px, calc(44px + (8 * (100vw - 1024px) / 896)), 52px);
  }

  .footer-inner {
    height: auto;
    min-height: clamp(600px, calc(600px + (132 * (100vw - 1024px) / 896)), 732px);
    padding:
      clamp(80px, calc(80px + (40 * (100vw - 1024px) / 896)), 120px)
      clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px)
      clamp(32px, calc(32px + (8 * (100vw - 1024px) / 896)), 40px);
  }

  .footer-left {
    flex: 0 1 clamp(300px, 38vw, 720px);
    width: auto;
    max-width: 720px;
  }

  .footer-right {
    flex: 0 1 clamp(340px, 42vw, 807px);
    width: auto;
    min-width: 0;
    max-width: 807px;
  }

  .footer-heading {
    font-size: clamp(40px, calc(40px + (16 * (100vw - 1024px) / 896)), 56px);
  }

  .footer-contact__value {
    font-size: clamp(24px, calc(24px + (8 * (100vw - 1024px) / 896)), 32px);
  }

  .footer-nav__link {
    font-size: clamp(18px, calc(18px + (6 * (100vw - 1024px) / 896)), 24px);
  }

  .footer-rule {
    width: 100%;
    max-width: 100%;
    margin-top: clamp(80px, calc(80px + (40 * (100vw - 1024px) / 896)), 120px);
  }

  .footer-socials {
    gap: clamp(32px, calc(32px + (20 * (100vw - 1024px) / 896)), 52px);
  }

  .floating-back-top__icon {
    width: clamp(48px, calc(48px + (12 * (100vw - 1024px) / 896)), 60px);
    height: clamp(48px, calc(48px + (12 * (100vw - 1024px) / 896)), 60px);
  }

  .floating-contact__icon {
    width: 32px;
    height: 32px;
  }
}

/* Small Laptop Layout */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .site-header__links {
    gap: 24px;
  }

  .about-stat-card {
    height: 96px;
    min-height: 96px;
  }

  .about-stat-card__text {
    font-size: 17px;
  }

  .tech-stack-section {
    min-height: auto;
    height: auto;
    padding: 64px 48px 28px;
  }

  .tech-stack-logos {
    gap: 32px;
  }

  .capability-card {
    min-height: 412px;
    padding: 30px 36px 30px 32px;
  }

  .capability-card__title {
    font-size: 28px;
    max-width: 100%;
  }

  .capability-card__list {
    max-width: 100%;
  }

  .capability-card__item {
    align-items: flex-start;
    gap: 10px;
    font-size: 16px;
  }

  .capability-card__bullet {
    width: 8px;
    height: 8px;
    margin-top: 0.4em;
  }

  .capability-card__watermark {
    width: 92px;
    height: 92px;
  }

  .how-we-work-card {
    min-height: 310px;
    --hw-card-pt: 22px;
    --hw-card-px: 24px;
    --hw-card-pb: 16px;
    --hw-top-height: 88px;
    --hw-rule-gap: 18px;
    --hw-body-gap: 6px;
    --hw-icon-size: 102px;
    --hw-icon-offset: 24px;
  }

  .how-we-work-card__heading {
    font-size: 20px;
  }

  .how-we-work-card__text {
    font-size: 15px;
    line-height: 1.45;
  }

  .how-we-work-card--step-2 {
    margin-top: 80px;
  }

  .how-we-work-card--step-4 {
    margin-top: 118px;
  }

  .problems-section {
    --problems-heading-copy-gap: 20px;
    min-height: 580px;
  }

  .problems-title {
    font-size: 28px;
    max-width: 272px;
  }

  .problems-copy {
    padding-top: 6px;
  }

  .problems-copy p,
  .problems-copy__block {
    font-size: 15px;
    line-height: 1.5;
  }

  .problems-copy__line {
    display: inline;
  }

  .problems-list__link {
    font-size: 20px;
    padding-top: 22px;
    padding-bottom: 22px;
  }

  #hero .hero-heading,
  #hero .hero-heading-light,
  #hero .hero-heading-dot {
    font-size: 48px;
  }

  #hero .hero-trust__text {
    font-size: 17px;
  }

  #hero .hero-cta-row .cta-btn {
    gap: 8px;
    padding: 14px 28px;
    font-size: 16px;
  }

  #hero .hero-cta-row .cta-btn__arrow {
    width: 26px;
    height: 12px;
  }
}

/* Mobile Layout */
@media (max-width: 639px) {
  .capability-card__title {
    font-size: 28px;
  }

  .capability-card__item {
    font-size: 16px;
  }

  .pricing-card__amount {
    font-size: 2.25rem;
  }

  .pricing-card__period,
  .pricing-card__audience {
    font-size: 16px;
  }

  .pricing-card__badge {
    font-size: 14px;
    margin-bottom: 28px;
  }

  .footer-left__top .cta-btn--footer-outline {
    flex: none;
    width: auto;
    gap: 8px;
    padding: 14px 28px;
    font-size: 15px;
    line-height: 1.3;
  }

  .footer-left__top .cta-btn--footer-outline .cta-btn__arrow {
    width: 24px;
    height: 11px;
  }

  .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: 1.5rem;
    row-gap: 0.75rem;
    width: 100%;
    margin-bottom: 24px;
  }

  .footer-nav__col {
    display: contents;
  }

  .footer-nav__link {
    font-size: 1rem;
  }

  .footer-rule {
    margin-top: 0;
    margin-bottom: 24px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0;
    padding-top: 0;
  }

  .footer-socials {
    order: 1;
    gap: 24px;
  }

  .footer-copy {
    order: 2;
  }
}

/* Client Logos */
@media (max-width: 639px) {
  #clients ul img {
    height: 30px;
    width: auto;
    max-width: min(100%, 130px);
    object-fit: contain;
  }

  #clients ul.grid {
    column-gap: 1rem;
    row-gap: 1.5rem;
  }

  #clients ul.grid > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

/* About Heading */
@media (max-width: 425px) {
  .about-heading {
    text-align: left;
  }

  .about-line,
  .about-team-intro__heading .about-line {
    display: inline;
  }

  .capability-card {
    gap: 10px;
    padding: 1.5rem;
  }

  .capability-card__list {
    gap: 0.625rem;
  }

  .capability-card__bullet {
    width: 7px;
    height: 7px;
  }

  .capability-card__watermark {
    width: 100px;
    height: 100px;
  }

  .pricing-card__feature {
    font-size: 1rem;
    line-height: 1.4;
  }

  .pricing-card__period,
  .pricing-card__audience {
    font-size: 17px;
    line-height: 1.4;
  }

  .pricing-card__features {
    gap: 0.5rem;
  }

  .pricing-card__cta {
    width: min(100%, 280px);
    max-width: 82%;
    align-self: center;
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    padding: 13px 32px;
    font-size: 16px;
    line-height: 1.25;
    border-radius: 6px;
  }

  .how-we-work-section {
    --hw-section-gap: 48px;
    --hw-header-gap: 16px;
    --hw-title-gap: 12px;
    padding: 3rem 16px;
  }

  .how-we-work-title {
    font-size: 1.875rem;
    letter-spacing: -1.2px;
  }

  .how-we-work-subtitle {
    font-size: 1.0625rem;
    line-height: 1.45;
  }

  .how-we-work-badge__dot {
    width: 10px;
    height: 10px;
  }

  .how-we-work-badge__label {
    font-size: 17px;
  }

  .how-we-work-card {
    padding: 1.5rem 1.25rem 1.25rem;
    --hw-top-height: 88px;
    --hw-rule-gap: 1.25rem;
    --hw-body-gap: 0.5rem;
    --hw-icon-size: 108px;
    --hw-icon-offset: 20px;
  }

  .how-we-work-card__step {
    font-size: 15px;
  }

  .how-we-work-card__bar {
    height: 12px;
  }

  .how-we-work-card__heading {
    font-size: 1.5rem;
    letter-spacing: -0.64px;
  }

  .how-we-work-card__text {
    font-size: 0.9375rem;
    line-height: 1.45;
  }
}

/* Small Mobile Tweaks */
@media (max-width: 374px) {
  .capability-card {
    gap: 8px;
    padding: 1.375rem;
  }

  .capability-card__title {
    font-size: 27px;
  }

  .capability-card__item {
    font-size: 16px;
    gap: 8px;
  }

  .capability-card__bullet {
    width: 6px;
    height: 6px;
  }

  .capability-card__watermark {
    width: 84px;
    height: 84px;
  }

  .pricing-card__amount {
    font-size: 2rem;
  }

  .pricing-card__period,
  .pricing-card__audience {
    font-size: 16px;
  }

  .pricing-card {
    padding: 1.375rem 1.125rem;
    border-radius: 32px;
  }

  .pricing-card__dot {
    width: 8px;
    height: 8px;
  }

  .pricing-card__feature {
    gap: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.35;
  }

  .pricing-card__features {
    gap: 0.5rem;
  }

  .pricing-card__cta {
    width: min(100%, 260px);
    max-width: 80%;
    align-self: center;
    margin-top: 0.875rem;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 28px;
    font-size: 15px;
    line-height: 1.2;
    border-radius: 6px;
  }

  .how-we-work-section {
    --hw-section-gap: 40px;
    padding: 2.5rem 14px;
  }

  .how-we-work-title {
    font-size: 1.75rem;
    letter-spacing: -1px;
  }

  .how-we-work-subtitle {
    font-size: 1rem;
    line-height: 1.4;
  }

  .how-we-work-badge__dot {
    width: 9px;
    height: 9px;
  }

  .how-we-work-badge__label {
    font-size: 16px;
  }

  .how-we-work-card {
    padding: 1.25rem 1.125rem 1.125rem;
    --hw-top-height: 76px;
    --hw-rule-gap: 1rem;
    --hw-body-gap: 0.375rem;
    --hw-icon-size: 92px;
    --hw-icon-offset: 16px;
  }

  .how-we-work-card__step {
    font-size: 14px;
  }

  .how-we-work-card__bar {
    height: 11px;
  }

  .how-we-work-card__heading {
    font-size: 1.375rem;
    letter-spacing: -0.48px;
  }

  .how-we-work-card__text {
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .footer-left__top .cta-btn--footer-outline {
    gap: 7px;
    padding: 12px 24px;
    font-size: 14px;
    line-height: 1.25;
  }

  .footer-left__top .cta-btn--footer-outline .cta-btn__arrow {
    width: 22px;
    height: 10px;
  }

  .footer-copy {
    font-size: 16px;
  }

  #clients ul img {
    height: 24px;
    max-width: min(100%, 110px);
  }

  #clients ul.grid {
    column-gap: 0.75rem;
    row-gap: 1.25rem;
  }

  .footer-nav__link {
    font-size: 0.9375rem;
  }
}

@media (min-width: 1920px) {
  .clients-section__title {
    font-size: 56px;
    line-height: 1.2;
  }
}

@media (min-width: 1280px) {
  .xl\:flex-nowrap { flex-wrap: nowrap; }
  .xl\:flex-1 { flex: 1 1 0%; }
  .xl\:mx-0 { margin-left: 0; margin-right: 0; }
}

/* About Page */

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

.site-header__link--active,
.site-header__mobile-link--active {
  color: #1cb1a9;
}

/* About Hero Section */
.about-top {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1920px;
  height: 443px;
  min-height: 443px;
  max-height: 443px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(28, 176, 169, 0.04) 0%, rgba(28, 176, 169, 0.10) 100%);
}

.about-page .site-header--about {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  background-color: transparent;
  border-bottom-color: transparent;
}

.about-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 1rem 1.5rem;
  background-color: transparent;
  box-sizing: border-box;
}

.about-hero__bg {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: 1920px;
  height: 443px;
  max-width: none;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}

.about-hero__bg-media {
  position: relative;
  width: 1920px;
  height: 443px;
  max-width: none;
  isolation: isolate;
  overflow: hidden;
}

.about-hero__bg-base {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #ffffff;
}

.about-hero-video {
  position: absolute;
  top: -538px;
  right: -729px;
  left: auto;
  z-index: 1;
  width: 1920px;
  height: 1080px;
  max-width: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: right center;
  opacity: 0.2;
  mix-blend-mode: luminosity;
  transform: rotate(30deg) scaleX(-1);
  transform-origin: center center;
  pointer-events: none;
}

.about-hero-bg-tint {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 1920px;
  height: 443px;
  background: #1cb1a9;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.about-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 1680px;
  padding: 0 1rem;
}

.about-hero__title {
  align-self: stretch;
  margin: 0;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(72px, 14vw, 180px);
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: clamp(-2px, -0.03em, -5.4px);
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(28, 176, 169, 0.10) 42.22%, rgba(28, 176, 169, 0.00) 87.22%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-breadcrumb__list {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.about-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.about-breadcrumb__icon {
  display: block;
  width: 16px;
  height: 16px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.about-breadcrumb__sep {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.about-breadcrumb__arrow {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.about-breadcrumb__item--current {
  color: #525252;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}

/* Who We Are Section */
.about-team-section {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: linear-gradient(180deg, rgba(28, 176, 169, 0.04) 0%, rgba(28, 176, 169, 0.10) 100%);
  padding: 4rem 1rem;
  box-sizing: border-box;
  overflow: visible;
}

.about-team-section .about-team-intro {
  display: flex;
  width: 100%;
  max-width: 1210px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  margin-left: 0;
  margin-right: auto;
}

.about-team-intro__heading {
  align-self: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  color: #1c1c1c;
}

.about-team-intro__br {
  display: none;
}

.about-team-intro__heading .about-line {
  display: inline;
}

.about-team-intro__subline {
  align-self: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #333;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(16px, 1.5vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  text-align: left;
}

.about-team-section:hover .about-line--ltr,
.about-team-intro__heading:hover .about-line--ltr {
  background-position: 0% 0;
}

.about-team-section:hover .about-line--rtl,
.about-team-intro__heading:hover .about-line--rtl {
  background-position: 100% 0;
}

.about-team-layout {
  --about-stick-top: 40px;
  --about-card-peek: 14px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3rem;
  width: 100%;
  max-width: 1680px;
  margin: 48px auto 0;
}

.about-team-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  max-width: 860px;
  padding: 0;
  box-sizing: border-box;
}

.about-team-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem 2rem;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.about-team-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.about-team-stat__value {
  color: #1c1c1c;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(48px, 8vw, 100px);
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -1px;
}

.about-team-stat__label {
  color: #333;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(16px, 1.5vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.about-team-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}

.about-team-achievement {
  align-self: stretch;
  margin: 0;
  max-width: none;
  color: #1c1c1c;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(28px, 3.5vw, 56px);
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -1.68px;
}

.about-team-achievement__br {
  display: none;
}

.about-team-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0;
}

.about-team-cta-row .cta-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  padding: 20px 40px;
  border-radius: 50px;
  box-sizing: border-box;
}

.about-team-cta-row .cta-btn--teal {
  background: #1cb0a9;
  border-radius: 50px;
}

.about-team-cta-row .cta-btn--dark {
  background: #1c1c1c;
  border-radius: 50px;
}

.about-value-cards {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  max-width: 530px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.about-value-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  min-height: 0;
  padding: 40px;
  border-radius: 40px;
  background-color: #1c1c1c;
  box-sizing: border-box;
}

.about-value-card--dark {
  background-color: #1c1c1c;
}

.about-value-card--teal {
  background-color: #1cb0a9;
}

.about-value-card--expertise {
  gap: 48px;
}

.about-value-card__icon {
  display: block;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.about-value-card--teal .about-value-card__icon {
  filter: brightness(0) invert(1);
}

.about-value-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 410px;
}

.about-value-card__title {
  align-self: stretch;
  margin: 0;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(28px, 2.5vw, 40px);
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: normal;
}

.about-value-card__text {
  width: 100%;
  max-width: 410px;
  margin: 0;
  color: rgba(255, 255, 255, 0.70);
  font-family: 'Outfit', sans-serif;
  font-size: clamp(16px, 1.4vw, 22px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.about-value-card__br {
  display: none;
}

.about-value-card--teal .about-value-card__text {
  color: rgba(255, 255, 255, 0.70);
}

/* Services Section */
.about-services-section {
  background-color: #1c1c1c;
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding: 120px 1rem;
  box-sizing: border-box;
}

.about-services-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  width: 100%;
  max-width: none;
  margin: 0;
}

.about-services-sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  width: 100%;
  max-width: 541px;
}

.about-services-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.about-services-badge__dot {
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #1cb1a9;
  aspect-ratio: 1 / 1;
}

.about-services-badge__label {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
}

.about-services-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 541px;
}

.about-services-title {
  margin: 0;
  width: 100%;
  max-width: 541px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -1.68px;
}

.about-services-title__br {
  display: none;
}

.about-services-desc {
  margin: 0;
  width: 100%;
  max-width: 541px;
  color: rgba(255, 255, 255, 0.70);
  font-family: 'Outfit', sans-serif;
  font-size: clamp(18px, 1.5vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.about-services-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.about-services-list__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.about-services-list__title {
  margin: 0;
  color: rgba(255, 255, 255, 0.50);
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -0.96px;
}

.about-services-list__desc {
  margin: 0;
  width: 100%;
  max-width: 443px;
  color: rgba(255, 255, 255, 0.70);
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  transition: color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .about-services-list__item {
    padding-left: 0;
    padding-right: 0;
    transition:
      padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.35s ease,
      border-color 0.3s ease;
  }

  .about-services-list__title {
    transition: color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .about-services-list__item:hover {
    padding-left: 16px;
    background-color: rgba(28, 177, 169, 0.08);
    border-bottom-color: rgba(28, 177, 169, 0.45);
  }

  .about-services-list__item:hover .about-services-list__title {
    color: #1cb1a9;
  }

  .about-services-list__item:hover .about-services-list__desc {
    color: rgba(255, 255, 255, 0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-services-list__item,
  .about-services-list__title,
  .about-services-list__desc {
    transition: none;
  }

  .about-services-list__item:hover {
    padding-left: 0;
  }
}

/* FAQ Section */
.about-faq-section {
  background: linear-gradient(180deg, rgba(28, 176, 169, 0.04) 0%, rgba(28, 176, 169, 0.10) 100%);
  padding: 120px 1rem;
  box-sizing: border-box;
}

.about-faq-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3rem;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
}

.about-faq-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  max-width: 490px;
  --about-faq-stick-top: 120px;
  --about-faq-lock-gap: 40px;
  --about-faq-rest-gap: 315px;
}

.about-faq-intro__pin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.about-faq-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  flex-shrink: 0;
}

.about-faq-title {
  margin: 0;
  width: 100%;
  max-width: 490px;
  color: #1c1c1c;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -1.68px;
}

.about-faq-subtitle {
  margin: 0;
  color: #333;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(18px, 1.5vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.about-faq-cta-card {
  display: flex;
  width: 100%;
  max-width: 490px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  margin-top: 2.5rem;
  padding: 40px 24px;
  border-radius: 40px;
  background-color: #1c1c1c;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  flex-shrink: 0;
}

.about-faq-cta-card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.about-faq-cta-card__title {
  margin: 0;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}

.about-faq-cta-card__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.70);
  font-family: 'Outfit', sans-serif;
  font-size: clamp(18px, 1.4vw, 22px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.about-faq-cta-card__btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  margin-top: 0;
  padding: 20px 40px;
  border: 1px solid #1cb0a9;
  border-radius: 40px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-color: transparent;
}

.about-faq-cta-card__btn:hover,
.about-faq-cta-card__btn:focus {
  background-color: transparent;
  border-color: #1cb0a9;
  color: #fff;
}

.about-faq-cta-card__btn .blob-btn__blob {
  background: #1cb0a9;
}

.about-faq-cta-card__btn:hover .blob-btn__blob,
.about-faq-cta-card__btn:focus .blob-btn__blob {
  transform: translate3d(0, 0, 0) scale(1.4);
}

.about-faq-cta-card__arrow {
  display: block;
  width: 24px;
  height: auto;
  filter: brightness(0) invert(1);
  position: relative;
  z-index: 10;
}

.about-faq-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 971px;
}

.about-faq-item {
  border-bottom: 1px solid rgba(28, 177, 169, 0.30);
}

.about-faq-item:first-child {
  border-top: 1px solid rgba(28, 177, 169, 0.30);
}

.about-faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 32px 0;
  cursor: pointer;
  list-style: none;
}

.about-faq-item__question::-webkit-details-marker {
  display: none;
}

.about-faq-item__question-text {
  flex: 1 1 auto;
  min-width: 0;
  color: #1c1c1c;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(18px, 1.5vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -0.72px;
}

.about-faq-item__icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.about-faq-item[open] .about-faq-item__icon {
  transform: rotate(180deg);
}

.about-faq-item__answer {
  display: none;
  height: 96px;
  padding: 0;
}

.about-faq-item[open] .about-faq-item__answer {
  display: block;
}

/* About Mobile Layout */
@media (max-width: 639.98px) {
  .about-top {
    height: auto;
    min-height: 260px;
    max-height: none;
  }

  .about-hero__bg {
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 260px;
    transform: none;
  }

  .about-hero__bg-media,
  .about-hero-bg-tint {
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 260px;
  }

  .about-hero-video {
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    transform: none;
    object-fit: cover;
  }

  .about-hero {
    padding: 1.5rem 1rem 2rem;
  }

  .about-hero__title {
    font-size: clamp(56px, 18vw, 96px);
    letter-spacing: -2px;
  }

  .about-breadcrumb__icon {
    width: 14px;
    height: 14px;
  }

  .about-breadcrumb__arrow {
    width: 16px;
    height: 16px;
  }

  .about-breadcrumb__item--current {
    font-size: 14px;
  }

  .about-team-section,
  .about-services-section,
  .about-faq-section {
    padding: 3rem 1rem;
  }

  .about-team-section .about-team-intro {
    gap: 20px;
  }

  .about-team-intro__heading {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
  }

  .about-team-intro__br {
    display: none;
  }

  .about-team-intro__heading .about-line {
    display: inline;
  }

  .about-team-intro__subline {
    font-size: 16px;
    line-height: 1.5;
  }

  .about-team-layout {
    margin-top: 48px;
    gap: 2rem;
  }

  .about-team-content {
    gap: 28px;
  }

  .about-team-stats {
    gap: 2rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .about-team-stat {
    gap: 10px;
    min-width: 0;
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .about-team-stat__value {
    font-size: 58px;
    text-align: center;
    width: 100%;
  }

  .about-team-stat__label {
    font-size: 15px;
    text-align: center;
    width: 100%;
  }

  .about-team-achievement {
    font-size: 28px;
    line-height: 120%;
  }

  .about-team-copy {
    gap: 24px;
  }

  .about-team-cta-row {
    gap: 0.75rem;
    width: 100%;
  }

  .about-team-cta-row .cta-btn {
    padding: 14px 24px;
    gap: 8px;
    font-size: 16px;
    width: 100%;
    max-width: 100%;
  }

  .about-team-cta-row .cta-btn__arrow,
  .about-page .cta-btn__arrow {
    width: 24px;
    height: auto;
  }

  .about-value-cards {
    max-width: 100%;
    gap: 24px;
  }

  .about-value-card {
    padding: 28px;
    gap: 28px;
    border-radius: 28px;
    min-height: 0;
  }

  .about-value-card--expertise {
    gap: 28px;
  }

  .about-value-card__icon {
    width: 48px;
    height: 48px;
  }

  .about-value-card__title {
    font-size: 24px;
  }

  .about-value-card__text {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
  }

  .about-services-section {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto;
    padding: 3rem 1rem;
  }

  .about-services-layout {
    gap: 2rem;
  }

  .about-services-sidebar {
    max-width: 100%;
    gap: 1.5rem;
  }

  .about-services-badge__dot {
    width: 8px;
    height: 8px;
  }

  .about-services-badge__label {
    font-size: 14px;
  }

  .about-services-intro {
    gap: 12px;
    max-width: 100%;
  }

  .about-services-title {
    font-size: 28px;
    letter-spacing: -0.84px;
  }

  .about-services-desc {
    font-size: 16px;
  }

  .about-services-list {
    max-width: 100%;
  }

  .about-services-list__item {
    gap: 8px;
    padding: 20px 0;
  }

  .about-services-list__title {
    font-size: 20px;
    letter-spacing: -0.6px;
  }

  .about-services-list__desc {
    font-size: 15px;
    max-width: 100%;
  }

  .about-faq-section {
    padding: 3rem 1rem;
  }

  .about-faq-layout {
    gap: 2rem;
  }

  .about-faq-intro,
  .about-faq-intro__pin,
  .about-faq-heading,
  .about-faq-title,
  .about-faq-cta-card,
  .about-faq-accordion {
    width: 100%;
    max-width: 100%;
  }

  .about-faq-intro,
  .about-faq-intro__pin {
    position: static;
  }

  .about-faq-title {
    font-size: 28px;
    letter-spacing: -0.84px;
  }

  .about-faq-subtitle {
    font-size: 16px;
  }

  .about-faq-cta-card {
    margin-top: 28px;
    padding: 28px 20px;
    gap: 24px;
    border-radius: 28px;
    animation: none;
  }

  .about-faq-cta-card__title {
    font-size: 24px;
  }

  .about-faq-cta-card__text {
    font-size: 16px;
  }

  .about-faq-cta-card__btn {
    padding: 10px 18px;
    gap: 6px;
    font-size: 14px;
    border-radius: 40px;
    width: auto;
    max-width: max-content;
  }

  .about-faq-cta-card__arrow {
    width: 16px;
  }

  .about-faq-item__question {
    padding: 20px 0;
    gap: 0.75rem;
  }

  .about-faq-item__question-text {
    font-size: 16px;
    letter-spacing: -0.48px;
    line-height: 130%;
  }

  .about-faq-item__icon {
    width: 16px;
    height: 16px;
  }

  .about-faq-item__answer {
    height: 64px;
  }

  .about-page .testimonials-nav__icon {
    width: 40px;
    height: 40px;
  }

  .about-page .testimonials-avatars__img {
    width: 44px;
    height: 44px;
  }
}

/* About Tablet Layout */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .about-top {
    height: auto;
    min-height: 340px;
    max-height: none;
  }

  .about-hero__bg,
  .about-hero__bg-media,
  .about-hero-bg-tint {
    width: 100%;
    height: 100%;
    min-height: 340px;
  }

  .about-hero-video {
    top: -30%;
    right: -35%;
    width: 130%;
    height: auto;
    min-height: 130%;
  }

  .about-hero {
    padding: 1.5rem 2rem 2rem;
  }

  .about-hero__title {
    font-size: clamp(96px, 14vw, 140px);
    letter-spacing: -3px;
  }

  .about-breadcrumb__icon {
    width: 15px;
    height: 15px;
  }

  .about-breadcrumb__arrow {
    width: 18px;
    height: 18px;
  }

  .about-breadcrumb__item--current {
    font-size: 16px;
  }

  .about-team-section,
  .about-services-section,
  .about-faq-section {
    padding: 64px 2rem;
  }

  .about-team-section .about-team-intro {
    gap: 28px;
    max-width: 100%;
  }

  .about-team-intro__heading {
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
  }

  .about-team-intro__br {
    display: none;
  }

  .about-team-intro__heading .about-line {
    display: inline;
  }

  .about-team-intro__subline {
    font-size: 1.25rem;
    line-height: 1.5;
  }

  .about-team-layout {
    margin-top: 64px;
    gap: 2.5rem;
  }

  .about-team-stats {
    gap: 1.5rem 3rem;
  }

  .about-team-stat__value {
    font-size: 64px;
  }

  .about-team-stat__label {
    font-size: 18px;
  }

  .about-team-achievement {
    font-size: 36px;
  }

  .about-team-cta-row .cta-btn {
    padding: 16px 32px;
    gap: 10px;
    font-size: 18px;
  }

  .about-team-cta-row .cta-btn__arrow,
  .about-page .cta-btn__arrow {
    width: 28px;
    height: auto;
  }

  .about-value-cards {
    max-width: 100%;
    gap: 32px;
  }

  .about-value-card {
    padding: 40px;
    gap: 36px;
    border-radius: 32px;
  }

  .about-value-card__icon {
    width: 64px;
    height: 64px;
  }

  .about-value-card__title {
    font-size: 32px;
  }

  .about-value-card__text {
    width: 100%;
    max-width: 100%;
    font-size: 18px;
  }

  .about-services-section {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto;
    padding: 64px 2rem;
  }

  .about-services-layout {
    flex-direction: column;
    gap: 2.5rem;
  }

  .about-services-sidebar {
    width: 100%;
    max-width: 100%;
    gap: 2rem;
  }

  .about-services-badge__dot {
    width: 10px;
    height: 10px;
  }

  .about-services-badge__label {
    font-size: 16px;
  }

  .about-services-intro {
    max-width: 100%;
    gap: 16px;
  }

  .about-services-title {
    font-size: 40px;
    max-width: 100%;
  }

  .about-services-title__br {
    display: block;
  }

  .about-services-desc {
    font-size: 18px;
    max-width: 100%;
  }

  .about-services-list {
    width: 100%;
    max-width: 100%;
  }

  .about-services-list__item {
    grid-template-columns: minmax(160px, 1fr) minmax(0, 1.4fr);
    gap: 16px;
    align-items: start;
    padding: 24px 0;
  }

  .about-services-list__title {
    font-size: 24px;
  }

  .about-services-list__desc {
    width: 100%;
    max-width: 100%;
    font-size: 17px;
  }

  .about-faq-layout {
    flex-direction: column;
    gap: 2.5rem;
  }

  .about-faq-intro,
  .about-faq-intro__pin {
    width: 100%;
    max-width: 100%;
    position: static;
  }

  .about-faq-heading,
  .about-faq-title {
    width: 100%;
    max-width: 100%;
  }

  .about-faq-title {
    font-size: 40px;
  }

  .about-faq-subtitle {
    font-size: 18px;
  }

  .about-faq-cta-card {
    width: 100%;
    max-width: 490px;
    margin-top: 40px;
    padding: 40px 32px;
    gap: 28px;
    animation: none;
  }

  .about-faq-cta-card__title {
    font-size: 32px;
  }

  .about-faq-cta-card__text {
    font-size: 18px;
  }

  .about-faq-cta-card__btn {
    padding: 16px 32px;
    gap: 10px;
    font-size: 18px;
  }

  .about-faq-cta-card__arrow {
    width: 22px;
  }

  .about-faq-accordion {
    width: 100%;
    max-width: 100%;
  }

  .about-faq-item__question {
    padding: 24px 0;
  }

  .about-faq-item__question-text {
    font-size: 18px;
    line-height: 130%;
  }

  .about-faq-item__icon {
    width: 18px;
    height: 18px;
  }

  .about-page .testimonials-nav__icon {
    width: 44px;
    height: 44px;
  }
}

/* About Desktop Layout */
@media (min-width: 1024px) {
  .about-hero {
    padding: 1.5rem 4rem 2rem;
  }

  .about-hero__title {
    font-size: clamp(120px, 9.375vw, 180px);
    letter-spacing: -5.4px;
  }

  .about-team-section {
    padding: clamp(64px, 6vw, 120px);
  }

  .about-team-intro {
    width: 100%;
    max-width: 1210px;
  }

  .about-team-intro__heading {
    font-size: clamp(36px, 3.2vw, 56px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
  }

  .about-team-intro__br {
    display: block;
  }

  .about-team-intro__heading .about-line {
    display: inline-block;
  }

  .about-team-intro__subline {
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 100%;
  }

  .about-team-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 38%);
    justify-content: space-between;
    align-items: start;
    gap: clamp(40px, 5vw, 96px);
    max-width: none;
    width: 100%;
    margin-top: clamp(96px, 12vw, 238px);
    --about-stick-top: 100px;
    --about-card-peek: 16px;
  }

  .about-team-content {
    position: sticky;
    top: var(--about-stick-top);
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 0;
    gap: clamp(40px, 4vw, 80px);
    align-self: start;
  }

  .about-team-stats {
    gap: clamp(24px, 4vw, 120px);
    flex-wrap: wrap;
  }

  .about-team-stat__value {
    font-size: clamp(64px, 6vw, 100px);
  }

  .about-team-stat__label {
    font-size: clamp(16px, 1.4vw, 24px);
  }

  .about-team-achievement {
    font-size: clamp(32px, 3.2vw, 56px);
    letter-spacing: -1.68px;
    max-width: 100%;
  }

  .about-team-achievement__br {
    display: block;
  }

  .about-team-copy {
    gap: clamp(32px, 4vw, 60px);
    max-width: 100%;
  }

  .about-value-cards {
    width: 100%;
    max-width: 530px;
    gap: clamp(32px, 4vw, 60px);
    align-self: start;
    justify-self: end;
  }

  .about-value-card {
    position: sticky;
    width: 100%;
    max-width: 530px;
    height: auto;
    min-height: clamp(420px, 40vw, 544px);
    padding: clamp(36px, 3.5vw, 60px);
    gap: clamp(48px, 8vw, 147px);
    border-radius: 40px;
  }

  .about-value-card--mission {
    top: var(--about-stick-top);
    z-index: 1;
  }

  .about-value-card--vision {
    top: calc(var(--about-stick-top) + var(--about-card-peek));
    z-index: 2;
  }

  .about-value-card--expertise {
    top: calc(var(--about-stick-top) + (var(--about-card-peek) * 2));
    z-index: 3;
    gap: clamp(64px, 10vw, 180px);
  }

  .about-value-card__title {
    font-size: clamp(28px, 2.4vw, 40px);
  }

  .about-value-card__text {
    width: 100%;
    max-width: 410px;
    font-size: clamp(16px, 1.4vw, 22px);
  }

  .about-value-card__br {
    display: block;
  }

  .about-services-section {
    width: 100%;
    max-width: 1920px;
    min-height: 0;
    height: auto;
    padding: clamp(64px, 6vw, 120px);
    overflow: visible;
    box-sizing: border-box;
  }

  .about-services-layout {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(32px, 4vw, 80px);
    width: 100%;
    height: auto;
    margin: 0;
    padding-bottom: 0;
  }

  .about-services-sidebar {
    flex: 1 1 36%;
    width: auto;
    max-width: 541px;
    min-width: 0;
    gap: clamp(64px, 10vw, 253px);
    position: static;
    top: auto;
    margin-bottom: 0;
  }

  .about-services-intro {
    gap: 12px;
    width: 100%;
    max-width: 541px;
  }

  .about-services-title {
    width: 100%;
    max-width: 541px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(36px, 3.2vw, 56px);
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -1.68px;
  }

  .about-services-title__br {
    display: block;
  }

  .about-services-desc {
    width: 100%;
    max-width: 541px;
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 150%;
  }

  .about-services-list {
    flex: 1 1 58%;
    width: auto;
    max-width: 971px;
    min-width: 0;
    margin: 0;
    align-self: flex-start;
  }

  .about-services-list__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
    gap: clamp(12px, 1.5vw, 24px);
    padding: 32px 0;
  }

  .about-services-list__title {
    color: rgba(255, 255, 255, 0.50);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(22px, 2vw, 32px);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -0.96px;
  }

  .about-services-list__desc {
    width: 100%;
    max-width: 443px;
    color: rgba(255, 255, 255, 0.70);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(16px, 1.4vw, 22px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }

  .about-faq-section {
    padding: clamp(64px, 6vw, 120px);
  }

  .about-faq-layout {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(40px, 5vw, 120px);
    max-width: none;
    width: 100%;
  }

  .about-faq-intro {
    flex: 0 1 36%;
    width: auto;
    max-width: 490px;
    min-width: 0;
    position: relative;
    align-self: stretch;
    min-height: 0;
    height: auto;
    justify-content: flex-start;
    gap: 0;
    view-timeline-name: --about-faq-track;
    view-timeline-axis: block;
  }

  .about-faq-intro__pin {
    position: sticky;
    top: var(--about-faq-stick-top);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 490px;
    z-index: 1;
  }

  .about-faq-heading {
    gap: 12px;
    width: 100%;
    max-width: 490px;
    position: relative;
    z-index: 2;
  }

  .about-faq-title {
    width: 100%;
    max-width: 490px;
    font-size: clamp(36px, 3.2vw, 56px);
    line-height: 100%;
    letter-spacing: -1.68px;
  }

  .about-faq-subtitle {
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 150%;
  }

  .about-faq-cta-card {
    width: 100%;
    max-width: 490px;
    padding: clamp(36px, 4vw, 60px);
    gap: 40px;
    border-radius: 40px;
    margin-top: 160px;
    position: relative;
    z-index: 0;
    animation: about-faq-cta-gap-sm linear both;
    animation-timeline: --about-faq-track;
    animation-range: contain 0% exit 20%;
  }

  .about-faq-cta-card__title {
    font-size: clamp(28px, 2.5vw, 40px);
    line-height: 120%;
  }

  .about-faq-cta-card__text {
    font-size: clamp(16px, 1.4vw, 22px);
    line-height: 150%;
  }

  .about-faq-cta-card__btn {
    padding: clamp(14px, 1.2vw, 20px) clamp(24px, 2.5vw, 40px);
    gap: 11px;
    border-radius: 40px;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 150%;
  }

  .about-faq-accordion {
    flex: 1 1 58%;
    width: auto;
    max-width: 971px;
    min-width: 0;
  }

  .about-faq-item__question {
    padding: clamp(20px, 2vw, 32px) 0;
  }

  .about-faq-item__question-text {
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.72px;
  }

  .about-faq-item__icon {
    width: 20px;
    height: 20px;
  }
}

@keyframes about-faq-cta-gap {
  from {
    margin-top: 315px;
  }

  to {
    margin-top: 40px;
  }
}

@supports not (animation-timeline: view()) {
  @media (min-width: 1024px) {
    .about-faq-cta-card {
      animation: none;
      margin-top: 315px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-faq-cta-card {
    animation: none !important;
    margin-top: 315px !important;
  }
}

@media (min-width: 1920px) {
  .about-hero {
    padding: 24px 120px 40px;
  }

  .about-hero__title {
    font-size: 180px;
    letter-spacing: -5.4px;
  }

  .about-team-section,
  .about-services-section,
  .about-faq-section {
    padding: 120px;
  }

  .about-team-layout {
    grid-template-columns: minmax(0, 860px) 530px;
    gap: 96px;
    margin-top: 238px;
    --about-stick-top: 120px;
  }

  .about-team-content {
    width: 860px;
    max-width: 860px;
    gap: 80px;
  }

  .about-team-stats {
    gap: 0 120px;
    flex-wrap: nowrap;
  }

  .about-team-stat__value {
    font-size: 100px;
  }

  .about-team-stat__label {
    font-size: 24px;
  }

  .about-team-achievement {
    font-size: 56px;
  }

  .about-team-intro__heading {
    font-size: 56px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
  }

  .about-team-intro__br {
    display: block;
  }

  .about-team-intro__heading .about-line {
    display: inline-block;
  }

  .about-team-intro__subline {
    font-size: 24px;
  }

  .about-value-cards {
    width: 530px;
    max-width: 530px;
    gap: 60px;
  }

  .about-value-card {
    width: 530px;
    height: 544px;
    min-height: 544px;
    padding: 60px;
    gap: 147px;
  }

  .about-value-card--expertise {
    gap: 180px;
  }

  .about-value-card__title {
    font-size: 40px;
  }

  .about-value-card__text {
    width: 410px;
    font-size: 22px;
  }

  .about-services-section {
    width: 100%;
    max-width: 1920px;
    min-height: 765px;
    height: auto;
    padding: 120px;
  }

  .about-services-layout {
    gap: 48px;
  }

  .about-services-sidebar {
    flex: 0 0 541px;
    width: 541px;
    max-width: 541px;
    gap: 253px;
  }

  .about-services-intro,
  .about-services-title,
  .about-services-desc {
    width: 541px;
  }

  .about-services-title {
    font-size: 56px;
  }

  .about-services-desc {
    font-size: 24px;
  }

  .about-services-list {
    flex: 0 0 971px;
    width: 971px;
    max-width: 971px;
  }

  .about-services-list__item {
    grid-template-columns: minmax(0, 1fr) 443px;
    gap: 12px;
  }

  .about-services-list__title {
    font-size: 32px;
  }

  .about-services-list__desc {
    width: 443px;
    max-width: 443px;
    font-size: 22px;
  }

  .about-faq-layout {
    gap: 120px;
    max-width: none;
  }

  .about-faq-intro {
    flex: 0 0 490px;
    width: 490px;
    max-width: 490px;
  }

  .about-faq-intro__pin,
  .about-faq-heading,
  .about-faq-title,
  .about-faq-cta-card {
    width: 490px;
    max-width: 490px;
  }

  .about-faq-title {
    font-size: 56px;
  }

  .about-faq-subtitle {
    font-size: 24px;
  }

  .about-faq-cta-card {
    padding: 60px;
    margin-top: 315px;
    animation: about-faq-cta-gap linear both;
    animation-timeline: --about-faq-track;
    animation-range: contain 0% exit 20%;
  }

  .about-faq-cta-card__title {
    font-size: 40px;
  }

  .about-faq-cta-card__text {
    font-size: 22px;
  }

  .about-faq-cta-card__btn {
    padding: 20px 40px;
    font-size: 20px;
  }

  .about-faq-accordion {
    flex: 0 0 971px;
    width: 971px;
    max-width: 971px;
  }

  .about-faq-item__question-text {
    font-size: 24px;
    line-height: 100%;
  }
}

/* Contact Page */

.contact-section {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding: 4rem 1rem;
  background: linear-gradient(180deg, rgba(28, 176, 169, 0.04) 0%, rgba(28, 176, 169, 0.10) 100%);
}

.contact-workspace {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
}

.contact-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}

.contact-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}

.contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.contact-badge__dot {
  display: block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #1cb0a9;
  aspect-ratio: 1 / 1;
}

.contact-badge__label {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: #333333;
}

.contact-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 1010px;
  margin: 0;
  text-align: left;
}

.contact-intro__title {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -1.68px;
  color: #1c1c1c;
  white-space: nowrap;
}

.contact-intro__subtitle {
  margin: 0;
  max-width: none;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 400;
  line-height: 150%;
  color: #333333;
  white-space: nowrap;
}

.contact-hello {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  flex-shrink: 0;
  width: 100%;
}

.contact-hello__title {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 100%;
  letter-spacing: -1.68px;
  color: #1c1c1c;
}

.contact-hello__say {
  font-weight: 250;
}

.contact-hello__hello {
  font-weight: 500;
}

.contact-pills {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.contact-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  max-width: 590px;
  min-height: 96px;
  height: auto;
  padding: 0 32px;
  border-radius: 40px;
  background: #ffffff;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(28, 28, 28, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-pill:hover,
.contact-pill:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(28, 177, 169, 0.12);
}

.contact-pill__text {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(18px, 2.5vw, 32px);
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.32px;
  color: #1cb0a9;
}

.contact-pill__arrow {
  flex-shrink: 0;
  width: 28px;
  height: auto;
  transition: transform 0.3s ease;
}

.contact-pill:hover .contact-pill__arrow,
.contact-pill:focus .contact-pill__arrow {
  transform: translateX(4px);
}

.contact-form-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 1010px;
  min-height: auto;
  height: auto;
  padding-top: 80px;
  padding-right: 80px;
  padding-bottom: 80px;
  padding-left: 80px;
  border-radius: 32px;
  background: #1c1c1c;
  overflow: visible;
}

.contact-form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 40px;
  width: 100%;
  max-width: 850px;
  height: auto;
}

.contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.contact-form__row {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.contact-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
}

.contact-field__label {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.50);
}

.contact-field__input {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 0 12px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
  background: transparent;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  color: #ffffff;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.contact-field__input::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

.contact-field__input:focus {
  border-bottom-color: #1cb0a9;
}

.contact-field__textarea {
  min-height: 72px;
  resize: vertical;
}

.contact-form__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.contact-newsletter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

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

.contact-newsletter__box {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.50);
  border-radius: 3px;
  background: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.contact-newsletter__input:checked + .contact-newsletter__box {
  background-color: #1cb0a9;
  border-color: #1cb0a9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5L4.5 8.5L11 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 10px;
}

.contact-newsletter__input:focus-visible + .contact-newsletter__box {
  outline: 2px solid #1cb0a9;
  outline-offset: 2px;
}

.contact-newsletter__text {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.50);
}

.contact-form__submit {
  align-self: stretch;
  border: 0;
  cursor: pointer;
  isolation: isolate;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.35s ease,
    color 0.35s ease;
}

.contact-form__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.28) 48%,
    rgba(255, 255, 255, 0.45) 52%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.contact-form__submit .blob-btn__blob {
  background: #ffffff;
  transform: translate3d(0, 150%, 0) scale(1.4);
}

.contact-form__submit .cta-btn__arrow {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
}

.contact-form__submit:hover,
.contact-form__submit:focus {
  background-color: #ffffff;
  color: #1cb0a9;
  transform: translateY(-3px);
  box-shadow: none;
}

.contact-form__submit:hover::before,
.contact-form__submit:focus::before {
  transform: translateX(120%);
}

.contact-form__submit:hover .blob-btn__blob,
.contact-form__submit:focus .blob-btn__blob {
  background: #ffffff;
  transform: translate3d(0, 0, 0) scale(1.4);
}

.contact-form__submit:hover .cta-btn__arrow,
.contact-form__submit:focus .cta-btn__arrow {
  transform: translateX(6px);
  filter: invert(48%) sepia(72%) saturate(489%) hue-rotate(131deg) brightness(92%) contrast(92%);
}

.contact-form__submit:active {
  transform: translateY(-1px);
  box-shadow: none;
}

@media (min-width: 640px) {
  .contact-section {
    padding: 4rem 2rem;
  }

  .contact-workspace {
    gap: 48px;
  }

  .contact-left,
  .contact-right {
    gap: 40px;
  }

  .contact-pill {
    min-height: 120px;
    padding: 0 48px;
  }

  .contact-form-card {
    border-radius: 40px;
  }

  .contact-form__fields {
    gap: 40px;
  }

  .contact-form__row--split {
    flex-direction: row;
    gap: 32px;
  }

  .contact-field__label {
    font-size: 16px;
  }

  .contact-field__input {
    font-size: 20px;
  }

  .contact-newsletter__text {
    font-size: 18px;
  }

  .contact-form__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .contact-form__submit {
    align-self: auto;
    flex-shrink: 0;
  }
}

@media (min-width: 1024px) {
  .contact-section {
    padding: clamp(64px, 6vw, 100px) clamp(40px, 4vw, 80px);
  }

  .contact-workspace {
    display: grid;
    grid-template-columns: minmax(220px, 0.36fr) minmax(0, 1fr);
    column-gap: clamp(48px, 5vw, 72px);
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 100%;
  }

  .contact-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    height: auto;
    min-height: 100%;
    gap: 32px;
  }

  .contact-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(24px, 2.5vw, 36px);
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

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

  .contact-badge__label {
    font-size: clamp(15px, 1.2vw, 18px);
  }

  .contact-hello {
    margin-top: auto;
    width: 100%;
    max-width: 100%;
    gap: clamp(20px, 2vw, 32px);
  }

  .contact-hello__title {
    font-size: clamp(32px, 3.2vw, 48px);
    letter-spacing: -0.04em;
  }

  .contact-intro {
    gap: clamp(12px, 1.2vw, 20px);
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .contact-intro__title {
    font-size: clamp(28px, 2.8vw, 44px);
    letter-spacing: -0.03em;
    white-space: normal;
  }

  .contact-intro__subtitle {
    font-size: clamp(16px, 1.4vw, 20px);
    white-space: normal;
    max-width: 36em;
  }

  .contact-pill {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: clamp(72px, 8vw, 112px);
    padding: 0 clamp(20px, 2.5vw, 40px);
    border-radius: clamp(24px, 2.5vw, 36px);
  }

  .contact-pill__text {
    font-size: clamp(16px, 1.6vw, 24px);
  }

  .contact-pill__arrow {
    width: clamp(22px, 2vw, 28px);
  }

  .contact-form-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: clamp(40px, 4.5vw, 64px);
    border-radius: clamp(28px, 2.5vw, 40px);
    overflow: visible;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    gap: clamp(24px, 2.5vw, 32px);
  }

  .contact-form__fields {
    gap: clamp(20px, 2vw, 28px);
  }

  .contact-field {
    gap: 6px;
  }

  .contact-field__label {
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.3;
  }

  .contact-field__input {
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.35;
    padding-bottom: 10px;
  }

  .contact-field__textarea {
    min-height: clamp(48px, 5vw, 64px);
  }

  .contact-newsletter__text {
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.35;
  }

  .contact-form__submit {
    padding: clamp(12px, 1.4vw, 18px) clamp(22px, 2.5vw, 36px);
    font-size: clamp(15px, 1.3vw, 18px);
  }
}

/* Desktop Card Layout */
@media (min-width: 1024px) and (max-width: 1439px) {
  .contact-workspace {
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 80px;
  }

  .contact-left,
  .contact-hello {
    width: 240px;
    max-width: 240px;
  }

  .contact-pill {
    width: 240px;
    max-width: 240px;
    min-height: 80px;
    padding: 0 20px;
  }

  .contact-pill__text {
    font-size: 16px;
  }

  .contact-right {
    max-width: 620px;
  }

  .contact-form-card {
    width: 100%;
    max-width: 620px;
  }
}

@media (min-width: 1440px) {
  .contact-section {
    padding: clamp(80px, 6vw, 110px) clamp(64px, 5vw, 100px);
  }

  .contact-workspace {
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    column-gap: clamp(40px, 4vw, 64px);
    align-items: stretch;
    max-width: 1600px;
  }

  .contact-left {
    gap: 0;
  }

  .contact-right {
    gap: 32px;
    max-width: 1010px;
  }

  .contact-intro__title {
    font-size: clamp(34px, 2.5vw, 44px);
    white-space: normal;
  }

  .contact-intro__subtitle {
    font-size: clamp(18px, 1.3vw, 22px);
    white-space: nowrap;
    max-width: none;
  }

  .contact-hello__title {
    font-size: clamp(40px, 3vw, 52px);
  }

  .contact-pill {
    max-width: 420px;
    min-height: 120px;
    height: 120px;
    padding: 0 40px;
  }

  .contact-pill__text {
    font-size: clamp(20px, 1.6vw, 26px);
  }

  .contact-form-card {
    width: 100%;
    max-width: 1010px;
    height: auto;
    min-height: 600px;
    max-height: none;
    padding: 64px;
  }

  .contact-form {
    justify-content: space-between;
    flex: 1 1 auto;
    height: 100%;
    gap: 28px;
    max-width: 882px;
  }

  .contact-form__fields {
    gap: 24px;
  }

  .contact-field__input {
    font-size: 20px;
  }

  .contact-newsletter__text {
    font-size: 18px;
  }
}

@media (min-width: 1920px) {
  .contact-section {
    padding: 120px;
  }

  .contact-workspace {
    grid-template-columns: 590px 1010px;
    column-gap: 80px;
    max-width: 1680px;
  }

  .contact-right {
    gap: 40px;
    max-width: 1010px;
  }

  .contact-intro__title {
    font-size: 56px;
    white-space: nowrap;
  }

  .contact-intro__subtitle {
    font-size: 24px;
    white-space: nowrap;
  }

  .contact-hello {
    width: 590px;
    max-width: 590px;
  }

  .contact-hello__title {
    font-size: 56px;
  }

  .contact-pill {
    width: 590px;
    max-width: 590px;
    height: 145px;
    min-height: 145px;
    padding: 0 60px;
  }

  .contact-pill__text {
    font-size: 32px;
  }

  .contact-pill__arrow {
    width: 33px;
  }

  .contact-form-card {
    display: flex;
    flex-direction: column;
    width: 1010px;
    max-width: 1010px;
    height: 667px;
    min-height: 667px;
    max-height: 667px;
    padding-top: 80px;
    padding-right: 80px;
    padding-bottom: 80px;
    padding-left: 80px;
    overflow: hidden;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    width: 850px;
    max-width: 850px;
    gap: 28px;
  }

  .contact-form__fields {
    gap: 24px;
  }

  .contact-form__row--split .contact-field {
    width: 405px;
    flex: 0 0 405px;
  }

  .contact-field {
    gap: 6px;
  }

  .contact-field__label {
    font-size: 16px;
    line-height: 1.3;
  }

  .contact-field__input {
    font-size: 22px;
    line-height: 1.35;
    padding-bottom: 10px;
  }

  .contact-field__textarea {
    min-height: 56px;
  }

  .contact-newsletter__text {
    font-size: 22px;
    line-height: 1.35;
  }

  .contact-form__submit {
    padding: 20px 40px;
    font-size: 20px;
  }
}

@media (max-width: 639px) {
  .contact-section {
    padding: 2.5rem 1rem 3rem;
  }

  .contact-workspace {
    gap: 32px;
  }

  .contact-left {
    gap: 24px;
  }

  .contact-right {
    gap: 24px;
  }

  .contact-intro {
    gap: 12px;
  }

  .contact-intro__title,
  .contact-intro__subtitle {
    white-space: normal;
  }

  .contact-badge {
    gap: 8px;
  }

  .contact-badge__dot {
    width: 8px;
    height: 8px;
  }

  .contact-badge__label {
    font-size: 16px;
  }

  .contact-hello {
    gap: 24px;
  }

  .contact-pill {
    border-radius: 28px;
    min-height: 72px;
    padding: 0 24px;
  }

  .contact-form-card {
    border-radius: 28px;
    padding-top: 35px;
    padding-right: 35px;
    padding-bottom: 35px;
    padding-left: 35px;
  }

  .contact-form {
    gap: 28px;
  }

  .contact-form__fields {
    gap: 24px;
  }

  .contact-form__submit {
    padding: 12px 24px;
    font-size: 15px;
    min-height: 0;
    line-height: 1.3;
  }

  .contact-form__submit .cta-btn__arrow {
    width: 22px;
    height: auto;
  }

  .contact-newsletter__box {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-pill,
  .contact-pill__arrow {
    transition: none;
  }

  .contact-pill:hover,
  .contact-pill:focus {
    transform: none;
  }

  .contact-pill:hover .contact-pill__arrow,
  .contact-pill:focus .contact-pill__arrow {
    transform: none;
  }

  .contact-form__submit,
  .contact-form__submit::before,
  .contact-form__submit .cta-btn__arrow {
    transition: none;
  }

  .contact-form__submit:hover,
  .contact-form__submit:focus,
  .contact-form__submit:active {
    transform: none;
  }

  .contact-form__submit:hover::before,
  .contact-form__submit:focus::before {
    transform: none;
  }

  .contact-form__submit:hover .cta-btn__arrow,
  .contact-form__submit:focus .cta-btn__arrow {
    transform: none;
  }
}

/* Services Page */
.services-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding: 2.5rem 1rem 3rem;
  background: linear-gradient(180deg, rgba(28, 176, 169, 0.04) 0%, rgba(28, 176, 169, 0.10) 100%);
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  max-width: 1680px;
}

.services-intro-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  box-sizing: border-box;
  width: 100%;
  min-height: 200px;
  padding: 28px;
  border-radius: 24px;
  background: #1c1c1c;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background-color 0.35s ease;
}

.services-intro-card:hover,
.services-intro-card:focus-within {
  transform: translateY(-6px);
  background-color: #242424;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.services-intro-card:hover .services-badge__dot,
.services-intro-card:focus-within .services-badge__dot {
  transform: scale(1.15);
}

.services-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.services-badge__dot {
  display: block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #1cb1a9;
  aspect-ratio: 1 / 1;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.services-badge__label {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  color: rgba(255, 255, 255, 0.70);
}

.services-intro-card__text {
  margin: 0;
  width: 100%;
  max-width: 410px;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.70);
}

.services-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 28px;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  padding: 28px;
  border-radius: 24px;
  background: #ffffff;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.services-card:hover,
.services-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(28, 177, 169, 0.14);
}

.services-card__icon {
  display: block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.services-card:hover .services-card__icon,
.services-card:focus-within .services-card__icon {
  transform: scale(1.08) translateY(-2px);
}

.services-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.services-card:hover .services-card__body,
.services-card:focus-within .services-card__body {
  transform: translateY(-4px);
}

.services-card__title {
  margin: 0;
  max-width: none;
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 120%;
  color: #1c1c1c;
  white-space: normal;
  transition: color 0.3s ease;
}

.services-card:hover .services-card__title,
.services-card:focus-within .services-card__title {
  color: #1cb1a9;
}

.services-card__text {
  margin: 0;
  max-width: 410px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: rgba(51, 51, 51, 0.70);
}

.services-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  width: 100%;
  padding: 8px 0 0;
}

.services-cta__title {
  margin: 0;
  width: 100%;
  max-width: 941px;
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 125%;
  letter-spacing: -0.5px;
  color: #1c1c1c;
}

.services-cta__btn {
  flex-shrink: 0;
  min-height: 44px;
  padding: 12px 20px;
  font-size: 14px;
}

.services-cta__btn .cta-btn__arrow {
  width: 22px;
  height: auto;
}

.services-page .how-we-work-title {
  max-width: 100%;
}

.services-page .how-we-work-subtitle {
  color: #333333;
  font-size: clamp(16px, 2vw, 24px);
  line-height: 150%;
}

/* Responsive Line Breaks */
.services-page .how-we-work-br {
  display: none;
}

@media (min-width: 768px) {
  .services-page .how-we-work-br {
    display: inline;
  }
}

/* How We Work Layout */
.services-page .how-we-work-section {
  --hw-section-gap: 80px;
  /* Mobile Spacing */
  padding-bottom: 40px;
}

.services-page .about-faq-section {
  margin-top: 0;
  padding-top: 48px;
}

@media (min-width: 640px) {
  .services-page .how-we-work-section {
    padding-bottom: 64px;
  }

  .services-page .about-faq-section {
    padding-top: 64px;
  }
}

@media (min-width: 1024px) {
  .services-page .how-we-work-section {
    /* Desktop Card Spacing */
    --hw-section-gap: 29px;
    padding-bottom: 120px;
  }

  .services-page .about-faq-section {
    padding-top: 120px;
  }

  .services-page .how-we-work-card {
    --hw-card-pt: clamp(22px, calc(22px + (18 * (100vw - 1024px) / 896)), 40px);
    --hw-card-px: clamp(22px, calc(22px + (18 * (100vw - 1024px) / 896)), 40px);
    --hw-card-pb: clamp(22px, calc(22px + (18 * (100vw - 1024px) / 896)), 40px);
    --hw-top-height: clamp(96px, calc(96px + (101 * (100vw - 1024px) / 896)), 197px);
    --hw-rule-gap: clamp(20px, calc(20px + (20 * (100vw - 1024px) / 896)), 40px);
    --hw-body-gap: clamp(8px, calc(8px + (4 * (100vw - 1024px) / 896)), 12px);
    --hw-icon-size: clamp(110px, calc(110px + (90 * (100vw - 1024px) / 896)), 200px);
    --hw-icon-offset: clamp(24px, calc(24px + (26 * (100vw - 1024px) / 896)), 50px);
    --hw-content-width: 100%;
    min-height: clamp(280px, calc(280px + (142 * (100vw - 1024px) / 896)), 422px);
    padding: var(--hw-card-pt) var(--hw-card-px) var(--hw-card-pb);
  }

  .services-page .how-we-work-card__icon-wrap {
    top: calc(-1 * var(--hw-icon-offset));
    right: calc(-1 * var(--hw-icon-offset));
    width: var(--hw-icon-size);
    height: var(--hw-icon-size);
    aspect-ratio: 1 / 1;
  }

  .services-page .how-we-work-card__icon-inner,
  .services-page .how-we-work-card__icon {
    width: var(--hw-icon-size);
    height: var(--hw-icon-size);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
  }

  .services-page .how-we-work-card__heading {
    white-space: nowrap;
    font-size: clamp(20px, calc(20px + (12 * (100vw - 1024px) / 896)), 32px);
  }

  .services-page .how-we-work-card__text {
    font-size: clamp(14px, calc(14px + (6 * (100vw - 1024px) / 896)), 20px);
  }

  /* Card Scaling Layout */
  .services-page .how-we-work-card--step-1 {
    margin-top: 0;
  }

  .services-page .how-we-work-card--step-2 {
    margin-top: clamp(140px, calc(140px + (100 * (100vw - 1024px) / 896)), 240px);
    animation: alignCards linear both;
    animation-timeline: view();
    animation-range: contain 0% exit 20%;
  }

  .services-page .how-we-work-card--step-3 {
    margin-top: clamp(70px, calc(70px + (50 * (100vw - 1024px) / 896)), 120px);
    animation: alignCards linear both;
    animation-timeline: view();
    animation-range: contain 0% exit 20%;
  }

  .services-page .how-we-work-card--step-4 {
    margin-top: clamp(210px, calc(210px + (150 * (100vw - 1024px) / 896)), 360px);
    animation: alignCards linear both;
    animation-timeline: view();
    animation-range: contain 0% exit 20%;
  }
}

@media (min-width: 1920px) {
  .services-page .how-we-work-section {
    --hw-section-gap: 29px;
    padding-bottom: 120px;
  }

  .services-page .how-we-work-card {
    --hw-card-pt: 40px;
    --hw-card-px: 40px;
    --hw-card-pb: 40px;
    --hw-top-height: 197px;
    --hw-rule-gap: 40px;
    --hw-body-gap: 12px;
    --hw-icon-size: 200px;
    --hw-icon-offset: 50px;
    min-height: 422px;
  }

  .services-page .how-we-work-card--step-1 {
    margin-top: 0;
  }

  .services-page .how-we-work-card--step-2 {
    margin-top: 240px;
    animation: alignCards linear both;
    animation-timeline: view();
    animation-range: contain 0% exit 20%;
  }

  .services-page .how-we-work-card--step-3 {
    margin-top: 120px;
    animation: alignCards linear both;
    animation-timeline: view();
    animation-range: contain 0% exit 20%;
  }

  .services-page .how-we-work-card--step-4 {
    margin-top: 360px;
    animation: alignCards linear both;
    animation-timeline: view();
    animation-range: contain 0% exit 20%;
  }
}

@media (min-width: 640px) {
  .services-section {
    padding: 3.5rem 1.5rem 4rem;
  }

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .services-intro-card,
  .services-card {
    padding: 36px;
    border-radius: 28px;
    min-height: 260px;
  }

  .services-intro-card {
    justify-content: space-between;
    gap: 0;
  }

  .services-badge {
    gap: 10px;
  }

  .services-badge__dot {
    width: 10px;
    height: 10px;
  }

  .services-badge__label {
    font-size: 15px;
  }

  .services-intro-card__text {
    font-size: 16px;
  }

  .services-card {
    gap: 40px;
  }

  .services-card__icon {
    width: 48px;
    height: 48px;
  }

  .services-card__title {
    font-size: 24px;
  }

  .services-card__text {
    font-size: 15px;
  }

  .services-cta {
    grid-column: 1 / -1;
    gap: 24px;
    padding: 12px 0 0;
  }

  .services-cta__title {
    font-size: 28px;
    letter-spacing: -0.84px;
  }

  .services-cta__btn {
    min-height: 48px;
    padding: 14px 24px;
    font-size: 15px;
  }

  .services-cta__btn .cta-btn__arrow {
    width: 26px;
  }
}

@media (min-width: 1024px) {
  .services-section {
    padding: clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px)
      clamp(32px, calc(32px + (88 * (100vw - 1024px) / 896)), 120px)
      clamp(64px, calc(64px + (121 * (100vw - 1024px) / 896)), 185px);
  }

  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(16px, calc(16px + (24 * (100vw - 1024px) / 896)), 40px);
    row-gap: clamp(16px, calc(16px + (24 * (100vw - 1024px) / 896)), 40px);
    justify-content: stretch;
  }

  .services-intro-card,
  .services-card {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: clamp(200px, calc(200px + (191 * (100vw - 1024px) / 896)), 391px);
    max-height: none;
    padding: clamp(24px, calc(24px + (36 * (100vw - 1024px) / 896)), 60px);
    border-radius: clamp(24px, calc(24px + (16 * (100vw - 1024px) / 896)), 40px);
    justify-self: stretch;
  }

  .services-intro-card {
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
  }

  .services-badge {
    gap: clamp(8px, calc(8px + (4 * (100vw - 1024px) / 896)), 12px);
  }

  .services-badge__dot {
    width: clamp(8px, calc(8px + (4 * (100vw - 1024px) / 896)), 12px);
    height: clamp(8px, calc(8px + (4 * (100vw - 1024px) / 896)), 12px);
  }

  .services-badge__label {
    font-size: clamp(14px, calc(14px + (4 * (100vw - 1024px) / 896)), 18px);
  }

  .services-intro-card__text {
    width: 100%;
    max-width: 410px;
    font-size: clamp(14px, calc(14px + (8 * (100vw - 1024px) / 896)), 22px);
    line-height: 150%;
  }

  .services-card {
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(20px, calc(20px + (60 * (100vw - 1024px) / 896)), 80px);
  }

  .services-card__icon {
    width: clamp(32px, calc(32px + (28 * (100vw - 1024px) / 896)), 60px);
    height: clamp(32px, calc(32px + (28 * (100vw - 1024px) / 896)), 60px);
  }

  .services-card__body {
    gap: clamp(6px, calc(6px + (6 * (100vw - 1024px) / 896)), 12px);
  }

  .services-card__title {
    font-size: clamp(20px, calc(20px + (20 * (100vw - 1024px) / 896)), 40px);
    white-space: normal;
  }

  .services-card__text {
    font-size: clamp(13px, calc(13px + (9 * (100vw - 1024px) / 896)), 22px);
  }

  .services-cta {
    grid-column: 2 / span 2;
    align-self: center;
    max-width: 941px;
    padding: clamp(16px, calc(16px + (24 * (100vw - 1024px) / 896)), 40px)
      0
      0
      clamp(24px, calc(24px + (76 * (100vw - 1024px) / 896)), 100px);
    gap: clamp(20px, calc(20px + (20 * (100vw - 1024px) / 896)), 40px);
  }

  .services-cta__title {
    width: 100%;
    max-width: 941px;
    font-size: clamp(26px, calc(26px + (30 * (100vw - 1024px) / 896)), 56px);
    line-height: 120%;
    letter-spacing: clamp(-0.8px, calc(-0.8px - (0.88 * (100vw - 1024px) / 896)), -1.68px);
    color: #1c1c1c;
  }

  .services-cta__btn {
    min-height: clamp(48px, calc(48px + (8 * (100vw - 1024px) / 896)), 56px);
    padding: clamp(14px, calc(14px + (6 * (100vw - 1024px) / 896)), 20px)
      clamp(24px, calc(24px + (16 * (100vw - 1024px) / 896)), 40px);
    font-size: clamp(15px, calc(15px + (3 * (100vw - 1024px) / 896)), 18px);
  }

  .services-cta__btn .cta-btn__arrow {
    width: clamp(24px, calc(24px + (9 * (100vw - 1024px) / 896)), 33px);
  }
}

@media (min-width: 1920px) {
  .services-section {
    padding: 120px 120px 185px 120px;
  }

  .services-grid {
    grid-template-columns: repeat(3, 530px);
    column-gap: 40px;
    row-gap: 40px;
    justify-content: space-between;
    width: 1680px;
    max-width: 1680px;
  }

  .services-intro-card,
  .services-card {
    width: 530px;
    max-width: 530px;
    height: 391px;
    min-height: 391px;
    max-height: 391px;
    padding: 60px;
    border-radius: 40px;
  }

  .services-intro-card {
    justify-content: space-between;
    gap: 0;
  }

  .services-badge {
    gap: 12px;
  }

  .services-badge__dot {
    width: 12px;
    height: 12px;
  }

  .services-badge__label {
    font-size: 18px;
  }

  .services-card {
    justify-content: flex-start;
    gap: 80px;
  }

  .services-card__icon {
    width: 60px;
    height: 60px;
  }

  .services-intro-card__text {
    width: 410px;
    font-size: 22px;
  }

  .services-card__title {
    font-size: 40px;
    white-space: nowrap;
  }

  .services-card__text {
    font-size: 22px;
  }

  .services-cta {
    padding: 40px 0 0 100px;
    gap: 40px;
  }

  .services-cta__title {
    width: 941px;
    max-width: 941px;
    font-size: 56px;
    line-height: 120%;
    letter-spacing: -1.68px;
  }

  .services-cta__btn {
    min-height: 56px;
    padding: 20px 40px;
    font-size: 18px;
  }

  .services-cta__btn .cta-btn__arrow {
    width: 33px;
  }
}

@media (min-width: 1280px) and (max-width: 1919.98px) {
  .services-card__title {
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-intro-card,
  .services-card,
  .services-card__icon,
  .services-card__body,
  .services-card__title,
  .services-badge__dot {
    transition: none;
  }

  .services-intro-card:hover,
  .services-intro-card:focus-within,
  .services-card:hover,
  .services-card:focus-within {
    transform: none;
  }

  .services-card:hover .services-card__icon,
  .services-card:focus-within .services-card__icon,
  .services-card:hover .services-card__body,
  .services-card:focus-within .services-card__body,
  .services-intro-card:hover .services-badge__dot,
  .services-intro-card:focus-within .services-badge__dot {
    transform: none;
  }
}

/* Animated Counters */
@property --team-count {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@property --tasks-count {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@property --customers-count {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@keyframes team-count-anim {
  from {
    --team-count: 0;
  }
  to {
    --team-count: 20;
  }
}

@keyframes tasks-count-anim {
  from {
    --tasks-count: 0;
  }
  to {
    --tasks-count: 750;
  }
}

@keyframes customers-count-anim {
  from {
    --customers-count: 0;
  }
  to {
    --customers-count: 50;
  }
}

.about-team-stat__value--team {
  --team-count: 0;
  counter-reset: team-count var(--team-count);
  animation: team-count-anim 2s ease-out forwards;
}

.about-team-stat__value--team::after {
  content: counter(team-count) "+";
}

.about-team-stat__value--tasks {
  --tasks-count: 0;
  counter-reset: tasks-count var(--tasks-count);
  animation: tasks-count-anim 2s ease-out forwards;
}

.about-team-stat__value--tasks::after {
  content: counter(tasks-count) "+";
}

.about-team-stat__value--customers {
  --customers-count: 0;
  counter-reset: customers-count var(--customers-count);
  animation: customers-count-anim 2s ease-out forwards;
}

.about-team-stat__value--customers::after {
  content: counter(customers-count) "+";
}

@media (prefers-reduced-motion: reduce) {
  .about-team-stat__value--team,
  .about-team-stat__value--tasks,
  .about-team-stat__value--customers {
    animation: none;
  }

  .about-team-stat__value--team {
    --team-count: 20;
  }

  .about-team-stat__value--tasks {
    --tasks-count: 750;
  }

  .about-team-stat__value--customers {
    --customers-count: 50;
  }
}



/* ===== Pricing page ===== */
.pricing-page-br {
  display: none;
}

.pricing-section--page {
  gap: 64px;
  padding: 4rem 1rem;
  background: linear-gradient(180deg, rgba(28, 176, 169, 0.04) 0%, rgba(28, 176, 169, 0.10) 100%);
}

.pricing-page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 1681px;
}

.pricing-page-header__title {
  margin: 0;
  max-width: 720px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -1.68px;
  color: #1c1c1c;
}

.pricing-page-header__text {
  margin: 0;
  max-width: 449px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 400;
  line-height: 150%;
  color: #333333;
  text-align: left;
}

.pricing-page .pricing-card--light {
  background-color: #ffffff;
}

.pricing-page .pricing-title {
  display: none;
}

/* Comparison table */
.comparison-section {
  display: flex;
  width: 100%;
  max-width: 1920px;
  box-sizing: border-box;
  padding: 48px 1rem;
  justify-content: center;
  align-items: center;
  background: #ffffff;
}

.comparison-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1680px;
  overflow: hidden;
  border-radius: 24px;
  /* Figma orange: Features???Starter 675, Starter???Growth 437 ??? plan cols ~508 */
  --comparison-plan-col: minmax(88px, 1fr);
  --comparison-pad-left: 20px;
  --comparison-pad-top: 16px;
  --comparison-pad-bottom: 16px;
}

.comparison-table__header,
.comparison-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) var(--comparison-plan-col) var(--comparison-plan-col);
  align-items: stretch;
  width: 100%;
  align-self: stretch;
  min-height: 64px;
}

.comparison-table__header {
  min-height: 64px;
  border-radius: 24px 24px 0 0;
  background: #1c1c1c;
}

.comparison-table__row--odd {
  background: #f4f4f4;
}

.comparison-table__row--even {
  border-right: 1px solid #f4f4f4;
  border-left: 1px solid #f4f4f4;
  background: #ffffff;
}

.comparison-table__row--last {
  border-radius: 0 0 24px 24px;
}

.comparison-table__cell {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: var(--comparison-pad-top) 16px var(--comparison-pad-bottom) var(--comparison-pad-left);
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: 150%;
}

.comparison-table__cell--label,
.comparison-table__cell--plan {
  color: #ffffff;
  font-weight: 700;
}

.comparison-table__cell--plan,
.comparison-table__cell--check {
  justify-content: center;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

.comparison-table__cell--feature {
  color: #333333;
  font-weight: 400;
}

.comparison-table__icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Enterprise CTA */
.enterprise-br {
  display: none;
}

.enterprise-section {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 1920px;
  min-height: 420px;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  background: #1cb1a9;
}

.enterprise-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #1cb1a9;
}

.enterprise-section__bg-base {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #1cb1a9;
}

.enterprise-section__video {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 1920px;
  height: 930px;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  background: transparent;
  opacity: 0.2;
  mix-blend-mode: exclusion;
  transform: translate(-50%, -50%) rotate(180deg) scaleX(-1);
  transform-origin: center center;
  pointer-events: none;
}

.enterprise-section__bg-tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: #1cb1a9;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.enterprise-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 40px 1rem;
}

.enterprise-section__left,
.enterprise-section__right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.enterprise-section__left {
  justify-content: space-between;
  flex: 1 1 auto;
  gap: 0;
}

.enterprise-section__right {
  align-items: flex-start;
  justify-content: space-between;
  flex: 1 1 auto;
  gap: 28px;
  text-align: left;
}

.enterprise-section__title {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  margin: 0;
  text-align: left;
  color: #ffffff;
  font-family: "Outfit", sans-serif;
  font-size: clamp(32px, 8vw, 64px);
  font-style: normal;
  font-weight: 250;
  line-height: 100%;
  letter-spacing: -1px;
}

.enterprise-section__title-light {
  display: flex;
  flex-direction: column;
  color: #ffffff;
  font-family: "Outfit", sans-serif;
  font-size: inherit;
  font-style: normal;
  font-weight: 250;
  line-height: 100%;
  letter-spacing: -1px;
}

.enterprise-section__title-line {
  display: block;
}

.enterprise-section__title-bold {
  display: block;
  color: #ffffff;
  font-family: "Outfit", sans-serif;
  font-size: inherit;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -1px;
}

.enterprise-section__sub {
  margin: 0;
  text-align: left;
  color: #ffffff;
  font-family: "Outfit", sans-serif;
  font-size: clamp(16px, 2.2vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.enterprise-section__copy {
  margin: 0;
  width: 100%;
  max-width: 449px;
  flex-shrink: 0;
  text-align: left;
  color: #ffffff;
  font-family: "Outfit", sans-serif;
  font-size: clamp(16px, 2.2vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.enterprise-section__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

.enterprise-section__actions .cta-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Contact Us: white blob fill (teal disappears into section) */
.enterprise-section .cta-btn--dark .blob-btn__blob {
  background: #ffffff;
}

.enterprise-section .cta-btn--dark:hover .blob-btn__blob,
.enterprise-section .cta-btn--dark:focus .blob-btn__blob {
  transform: translate3d(0, 0, 0) scale(1.4);
}

.enterprise-section .cta-btn--dark:hover,
.enterprise-section .cta-btn--dark:focus {
  color: #1c1c1c;
}

.enterprise-section .cta-btn--dark:hover .cta-btn__arrow,
.enterprise-section .cta-btn--dark:focus .cta-btn__arrow {
  filter: brightness(0);
}

/* Schedule A Call: white outline + white blob (template footer-outline) */
.enterprise-section .cta-btn--footer-outline {
  border-color: #ffffff;
  border-radius: 50px;
  color: #ffffff;
}

.enterprise-section .cta-btn--footer-outline .blob-btn__blob {
  background: #ffffff;
}

.enterprise-section .cta-btn--footer-outline:hover,
.enterprise-section .cta-btn--footer-outline:focus {
  border-color: #ffffff;
  color: #1c1c1c;
}

@media (min-width: 640px) {
  .pricing-section--page {
    padding: 5rem 2rem;
    gap: 80px;
  }

  .pricing-page-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }

  .pricing-page-br {
    display: inline;
  }

  .comparison-section {
    padding: 64px 2rem;
  }

  .comparison-table {
    border-radius: 32px;
    --comparison-plan-col: clamp(160px, 28vw, 508px);
    --comparison-pad-left: 32px;
    --comparison-pad-top: 20px;
    --comparison-pad-bottom: 20px;
  }

  .comparison-table__header,
  .comparison-table__row {
    grid-template-columns: minmax(0, 1fr) var(--comparison-plan-col) var(--comparison-plan-col);
  }

  .comparison-table__header {
    border-radius: 32px 32px 0 0;
    min-height: 72px;
  }

  .comparison-table__header,
  .comparison-table__row {
    min-height: 72px;
  }

  .comparison-table__row--last {
    border-radius: 0 0 32px 32px;
  }

  .comparison-table__cell {
    padding: var(--comparison-pad-top) 24px var(--comparison-pad-bottom) var(--comparison-pad-left);
    font-size: 18px;
  }

  .comparison-table__cell--plan,
  .comparison-table__cell--check {
    padding-left: 0;
    padding-right: 0;
  }

  .comparison-table__icon {
    width: 22px;
    height: 22px;
  }

  .enterprise-section {
    min-height: 520px;
  }

  .enterprise-br {
    display: inline;
  }

  .enterprise-section__inner {
    padding: 64px 2rem;
  }

  .enterprise-section__actions .cta-btn {
    font-size: 18px;
  }
}

@media (min-width: 1024px) {
  .pricing-section--page {
    padding: clamp(80px, calc(80px + (40 * (100vw - 1024px) / 896)), 120px)
      clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px);
    gap: clamp(80px, calc(80px + (20 * (100vw - 1024px) / 896)), 100px);
  }

  .pricing-page-header__title {
    font-size: clamp(40px, calc(40px + (16 * (100vw - 1024px) / 896)), 56px);
  }

  .pricing-page-header__text {
    text-align: left;
    font-size: clamp(18px, calc(18px + (4 * (100vw - 1024px) / 896)), 22px);
  }

  .comparison-section {
    padding: clamp(64px, calc(64px + (26 * (100vw - 1024px) / 896)), 90px)
      clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px);
  }

  .comparison-table {
    border-radius: 40px;
    /*
      Figma orange numbers:
      - Features left pad 65
      - Feature row vertical pad 23 / 24 (??? 80px with 33px line-height)
      - Features text ??? Starter text: 675
      - Starter text ??? Growth text: 437
      Plan columns ~508px (centered headers/checks) match 437 text gap + earlier 488 check gap
    */
    --comparison-plan-col: clamp(280px, calc(280px + (228 * (100vw - 1024px) / 896)), 508px);
    --comparison-pad-left: clamp(28px, calc(28px + (37 * (100vw - 1024px) / 896)), 65px);
    --comparison-pad-top: clamp(16px, calc(16px + (7 * (100vw - 1024px) / 896)), 23px);
    --comparison-pad-bottom: clamp(16px, calc(16px + (8 * (100vw - 1024px) / 896)), 24px);
  }

  .comparison-table__header,
  .comparison-table__row {
    grid-template-columns: minmax(0, 1fr) var(--comparison-plan-col) var(--comparison-plan-col);
  }

  .comparison-table__header {
    min-height: clamp(64px, calc(64px + (16 * (100vw - 1024px) / 896)), 80px);
    height: clamp(64px, calc(64px + (16 * (100vw - 1024px) / 896)), 80px);
    border-radius: 40px 40px 0 0;
  }

  .comparison-table__header,
  .comparison-table__row {
    min-height: clamp(64px, calc(64px + (16 * (100vw - 1024px) / 896)), 80px);
    height: clamp(64px, calc(64px + (16 * (100vw - 1024px) / 896)), 80px);
  }

  .comparison-table__row--last {
    border-radius: 0 0 40px 40px;
  }

  .comparison-table__cell {
    padding: var(--comparison-pad-top) clamp(20px, calc(20px + (20 * (100vw - 1024px) / 896)), 40px) var(--comparison-pad-bottom) var(--comparison-pad-left);
    font-size: clamp(16px, calc(16px + (6 * (100vw - 1024px) / 896)), 22px);
    line-height: 150%;
  }

  .comparison-table__cell--label,
  .comparison-table__cell--feature {
    padding-left: var(--comparison-pad-left);
    padding-right: clamp(20px, calc(20px + (20 * (100vw - 1024px) / 896)), 40px);
    justify-content: flex-start;
    text-align: left;
  }

  .comparison-table__cell--plan,
  .comparison-table__cell--check {
    padding: 0;
    justify-content: center;
    text-align: center;
  }

  .comparison-table__cell--label,
  .comparison-table__cell--plan {
    font-size: clamp(16px, calc(16px + (6 * (100vw - 1024px) / 896)), 22px);
    font-weight: 700;
  }

  .comparison-table__cell--feature {
    font-size: clamp(16px, calc(16px + (6 * (100vw - 1024px) / 896)), 22px);
    font-weight: 400;
  }

  .comparison-table__icon {
    width: clamp(18px, calc(18px + (6 * (100vw - 1024px) / 896)), 24px);
    height: clamp(18px, calc(18px + (6 * (100vw - 1024px) / 896)), 24px);
  }

  .enterprise-section {
    width: 100%;
    max-width: 1920px;
    min-height: 615px;
    height: 615px;
    background: #1cb1a9;
  }

  .enterprise-section__video {
    width: 1920px;
    height: 930px;
    background: transparent;
    opacity: 0.2;
    mix-blend-mode: exclusion;
    transform: translate(-50%, -50%) rotate(180deg) scaleX(-1);
    transform-origin: center center;
  }

  .enterprise-section__bg-base {
    background: #1cb1a9;
  }

  .enterprise-section__bg-tint {
    background: #1cb1a9;
    mix-blend-mode: soft-light;
  }

  .enterprise-br {
    display: inline;
  }

  .enterprise-section__inner {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(40px, 5vw, 120px);
    height: 100%;
    max-width: none;
    padding: clamp(64px, calc(64px + (56 * (100vw - 1024px) / 896)), 120px)
      clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px);
  }

  .enterprise-section__left {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    height: auto;
    align-self: stretch;
    justify-content: space-between;
    gap: 0;
  }

  .enterprise-section__right {
    flex: 0 0 auto;
    width: max-content;
    max-width: min(100%, 560px);
    align-items: flex-start;
    justify-content: space-between;
    align-self: stretch;
    gap: 0;
    text-align: left;
    padding-top: 0;
  }

  .enterprise-section__copy {
    text-align: left;
    max-width: 449px;
  }

  .enterprise-section__actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
  }

  .enterprise-section__title {
    align-self: flex-start;
    font-size: clamp(48px, calc(48px + (52 * (100vw - 1024px) / 896)), 100px);
  }

  .enterprise-section__title-line,
  .enterprise-section__title-bold {
    white-space: nowrap;
  }

  .enterprise-section__actions .cta-btn {
    padding: 20px 40px;
    font-size: 20px;
  }
}

@media (min-width: 1920px) {
  .pricing-section--page {
    padding: 120px;
    gap: 100px;
  }

  .comparison-section {
    padding: 90px 120px;
  }

  .comparison-table {
    --comparison-plan-col: 508px;
    --comparison-pad-left: 65px;
    --comparison-pad-top: 23px;
    --comparison-pad-bottom: 24px;
  }

  .comparison-table__header,
  .comparison-table__row {
    min-height: 80px;
    height: 80px;
  }

  .comparison-table__cell,
  .comparison-table__cell--label,
  .comparison-table__cell--plan,
  .comparison-table__cell--feature {
    font-size: 22px;
  }

  .comparison-table__icon {
    width: 24px;
    height: 24px;
  }

  .enterprise-section {
    width: 1920px;
    max-width: 1920px;
    height: 615px;
    min-height: 615px;
    background: #1cb1a9;
  }

  .enterprise-section__inner {
    gap: 120px;
    padding: 120px;
  }

  .enterprise-section__left {
    flex: 1 1 auto;
    max-width: none;
    gap: 0;
  }

  .enterprise-section__right {
    width: max-content;
    max-width: 560px;
    gap: 0;
    align-items: flex-start;
    text-align: left;
  }

  .enterprise-section__title {
    font-size: 100px;
  }

  .enterprise-section__sub,
  .enterprise-section__copy {
    font-size: 24px;
    text-align: left;
  }
}

/* Pricing page ??? 1024 desktop tweaks (LG/XL unchanged) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .pricing-page .about-faq-title {
    font-size: clamp(36px, 3.6vw, 44px);
  }

  .pricing-page .about-faq-subtitle {
    font-size: 18px;
  }

  .pricing-page .about-faq-item__question-text {
    font-size: 18px;
  }

  .pricing-page .about-faq-item__question {
    padding: 18px 0;
  }

  .pricing-page .about-faq-item__icon {
    width: 18px;
    height: 18px;
  }

  .pricing-page .about-faq-cta-card {
    gap: 20px;
    padding: 28px 24px;
    border-radius: 28px;
  }

  .pricing-page .about-faq-cta-card__copy {
    gap: 8px;
  }

  .pricing-page .about-faq-cta-card__title {
    font-size: 26px;
  }

  .pricing-page .about-faq-cta-card__text {
    font-size: 15px;
  }

  .pricing-page .about-faq-cta-card__btn {
    padding: 12px 24px;
    font-size: 15px;
  }

  /* Enterprise / contact-support: tighter, less empty 4-corner stretch */
  .pricing-page .enterprise-section {
    height: auto;
    min-height: 0;
  }

  .pricing-page .enterprise-section__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    height: auto;
    padding: 56px 48px;
  }

  .pricing-page .enterprise-section__left {
    flex: 1 1 auto;
    max-width: 58%;
    justify-content: flex-start;
    gap: 28px;
  }

  .pricing-page .enterprise-section__right {
    flex: 0 1 38%;
    width: auto;
    max-width: 380px;
    justify-content: flex-start;
    gap: 28px;
  }

  .pricing-page .enterprise-section__title {
    font-size: 42px;
  }

  .pricing-page .enterprise-section__title-line,
  .pricing-page .enterprise-section__title-bold {
    white-space: normal;
  }

  .pricing-page .enterprise-section__sub,
  .pricing-page .enterprise-section__copy {
    font-size: 16px;
  }

  .pricing-page .enterprise-section__copy {
    max-width: 100%;
  }

  .pricing-page .enterprise-section__actions {
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    gap: 12px;
  }

  .pricing-page .enterprise-section__actions .cta-btn {
    padding: 14px 28px;
    font-size: 16px;
  }

  .pricing-page .enterprise-section__actions .cta-btn__arrow {
    width: 26px;
    height: 12px;
  }
}

@keyframes about-faq-cta-gap-sm {
  from {
    margin-top: 160px;
  }

  to {
    margin-top: 40px;
  }
}

@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (max-width: 1279px) {
    .pricing-page .about-faq-intro {
      view-timeline-name: --about-faq-track;
      view-timeline-axis: block;
    }

    .pricing-page .about-faq-cta-card {
      margin-top: 160px;
      animation: about-faq-cta-gap-sm linear both;
      animation-timeline: --about-faq-track;
      animation-range: contain 0% exit 20%;
    }
  }
}

@supports not (animation-timeline: view()) {
  @media (min-width: 1024px) and (max-width: 1279px) {
    .pricing-page .about-faq-cta-card {
      animation: none;
      margin-top: 64px;
    }
  }
}

/* Pricing page cards: same tablet layout as landing */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .pricing-page .pricing-section--page {
    align-items: center;
  }

  .pricing-page .pricing-page-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    width: 100%;
    max-width: 533px;
  }

  .pricing-page .pricing-page-header__title {
    text-align: center;
    max-width: 100%;
  }

  .pricing-page .pricing-page-header__text {
    text-align: center;
    max-width: 100%;
  }

  .pricing-page .pricing-track {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .pricing-page .pricing-card {
    width: 100%;
    max-width: 533px;
    min-height: 620px;
    height: auto;
    padding: 2.5rem;
    border-radius: 40px;
  }

  .pricing-page .pricing-card__badge {
    margin-bottom: 41px;
    font-size: 16px;
  }

  .pricing-page .pricing-card__amount {
    font-size: 56px;
  }

  .pricing-page .pricing-card__period,
  .pricing-page .pricing-card__audience {
    font-size: 16px;
  }

  .pricing-page .pricing-card__feature {
    font-size: 22px;
    line-height: 1.5;
  }

  .pricing-page .pricing-card__dot {
    width: 12px;
    height: 12px;
  }

  .pricing-page .pricing-card__rule {
    width: 100%;
    max-width: 413px;
    margin: 1.5rem 0;
  }

  .pricing-page .pricing-card__cta {
    width: 100%;
    max-width: 413px;
    align-self: stretch;
    margin-top: auto;
    margin-left: 0;
    margin-right: 0;
    padding: 20px 40px;
    font-size: 18px;
    line-height: 1.5;
    border-radius: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .pricing-page .pricing-page-header__title {
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -1.2px;
  }

  .pricing-page .pricing-page-header__text {
    font-size: 20px;
    line-height: 150%;
  }

  .pricing-page .pricing-card__amount {
    font-size: 48px;
  }

  .pricing-page .pricing-card__badge {
    font-size: 14px;
  }

  .pricing-page .pricing-card__period,
  .pricing-page .pricing-card__audience {
    font-size: 16px;
  }

  .pricing-page .pricing-card__feature {
    font-size: 20px;
  }
}

/* ===== Pricing page ??? tablet & mobile only (desktop XL unchanged) ===== */
@media (max-width: 1023px) {
  .pricing-page .about-hero__title {
    font-size: clamp(56px, 14vw, 120px);
  }

  .pricing-page .about-breadcrumb__icon {
    width: 14px;
    height: 14px;
  }

  .pricing-page .about-breadcrumb__arrow {
    width: 16px;
    height: 16px;
  }

  .pricing-page .about-breadcrumb__item--current {
    font-size: 14px;
  }

  .pricing-page .pricing-section--page {
    gap: 48px;
    padding: 56px 1.5rem;
  }

  .pricing-page .pricing-page-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  .pricing-page .pricing-page-header__title {
    font-size: clamp(28px, 4.5vw, 40px);
    letter-spacing: -1px;
    max-width: 100%;
    text-align: center;
  }

  .pricing-page .pricing-page-header__text {
    font-size: clamp(15px, 2.2vw, 18px);
    max-width: 100%;
    text-align: center;
  }

  .pricing-page .pricing-track {
    align-items: center;
    gap: 1.5rem;
  }

  /* Match landing pricing cards on tablet/mobile ??? do not override card layout */

  .pricing-page .comparison-section {
    padding: 48px 1.5rem;
  }

  .pricing-page .comparison-table {
    border-radius: 24px;
    --comparison-plan-col: minmax(72px, 1fr);
    --comparison-pad-left: 16px;
    --comparison-pad-top: 14px;
    --comparison-pad-bottom: 14px;
  }

  .pricing-page .comparison-table__header,
  .pricing-page .comparison-table__row {
    min-height: 56px;
    height: auto;
  }

  .pricing-page .comparison-table__header {
    border-radius: 24px 24px 0 0;
    min-height: 56px;
  }

  .pricing-page .comparison-table__row--last {
    border-radius: 0 0 24px 24px;
  }

  .pricing-page .comparison-table__cell {
    padding: var(--comparison-pad-top) 12px var(--comparison-pad-bottom) var(--comparison-pad-left);
    font-size: 14px;
  }

  .pricing-page .comparison-table__cell--label,
  .pricing-page .comparison-table__cell--plan,
  .pricing-page .comparison-table__cell--feature {
    font-size: 14px;
  }

  .pricing-page .comparison-table__cell--label,
  .pricing-page .comparison-table__cell--feature {
    padding-left: var(--comparison-pad-left);
    padding-right: 12px;
  }

  .pricing-page .comparison-table__icon {
    width: 18px;
    height: 18px;
  }

  .pricing-page .about-faq-section {
    padding: 56px 1.5rem;
  }

  .pricing-page .about-faq-title {
    font-size: clamp(28px, 5vw, 40px);
  }

  .pricing-page .about-faq-subtitle {
    font-size: 16px;
  }

  .pricing-page .about-faq-cta-card {
    padding: 24px;
    gap: 20px;
    border-radius: 24px;
  }

  .pricing-page .about-faq-cta-card__title {
    font-size: 22px;
  }

  .pricing-page .about-faq-cta-card__text {
    font-size: 15px;
  }

  .pricing-page .about-faq-cta-card__btn {
    padding: 14px 28px;
    font-size: 16px;
  }

  .pricing-page .about-faq-cta-card__arrow {
    width: 24px;
    height: 11px;
  }

  .pricing-page .about-faq-item__question {
    padding: 18px 0;
    gap: 12px;
  }

  .pricing-page .about-faq-item__question-text {
    font-size: 16px;
  }

  .pricing-page .about-faq-item__icon {
    width: 16px;
    height: 16px;
  }

  .pricing-page .enterprise-section {
    min-height: 0;
    height: auto;
  }

  .pricing-page .enterprise-section__inner {
    flex-direction: column;
    justify-content: flex-start;
    gap: 32px;
    padding: 48px 1.5rem;
  }

  .pricing-page .enterprise-section__left,
  .pricing-page .enterprise-section__right {
    width: 100%;
    max-width: 100%;
    gap: 20px;
    justify-content: flex-start;
  }

  .pricing-page .enterprise-section__title {
    font-size: clamp(36px, 7vw, 56px);
  }

  .pricing-page .enterprise-section__title-line,
  .pricing-page .enterprise-section__title-bold {
    white-space: normal;
  }

  .pricing-page .enterprise-section__sub,
  .pricing-page .enterprise-section__copy {
    font-size: 16px;
    max-width: 100%;
  }

  .pricing-page .enterprise-section__actions {
    flex-wrap: wrap;
    width: 100%;
    gap: 12px;
  }

  .pricing-page .enterprise-section__actions .cta-btn {
    padding: 14px 28px;
    font-size: 16px;
  }

  .pricing-page .enterprise-section__actions .cta-btn__arrow {
    width: 24px;
    height: 11px;
  }

  .pricing-page .site-footer .footer-inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Tablet 768+ ??? larger pricing header text */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .pricing-page .pricing-page-header__title {
    font-size: 44px;
    line-height: 120%;
    letter-spacing: -1.2px;
    text-align: center;
  }

  .pricing-page .pricing-page-header__text {
    font-size: 20px;
    line-height: 150%;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .pricing-page .pricing-section--page {
    gap: 40px;
    padding: 48px 1.25rem;
  }

  .pricing-page .pricing-page-header__title {
    font-size: 28px;
    text-align: center;
  }

  .pricing-page .pricing-page-header__text {
    font-size: 15px;
    text-align: center;
  }

  .pricing-page .comparison-section {
    padding: 40px 1.25rem;
  }

  .pricing-page .comparison-table {
    border-radius: 20px;
    --comparison-pad-left: 12px;
    --comparison-pad-top: 12px;
    --comparison-pad-bottom: 12px;
  }

  .pricing-page .comparison-table__header,
  .pricing-page .comparison-table__row {
    min-height: 52px;
  }

  .pricing-page .comparison-table__cell {
    font-size: 13px;
    padding: var(--comparison-pad-top) 8px var(--comparison-pad-bottom) var(--comparison-pad-left);
  }

  .pricing-page .comparison-table__cell--label,
  .pricing-page .comparison-table__cell--plan,
  .pricing-page .comparison-table__cell--feature {
    font-size: 13px;
  }

  .pricing-page .comparison-table__icon {
    width: 16px;
    height: 16px;
  }

  .pricing-page .about-faq-section {
    padding: 48px 1.25rem;
  }

  .pricing-page .about-faq-title {
    font-size: 28px;
  }

  .pricing-page .about-faq-cta-card {
    padding: 20px;
  }

  .pricing-page .about-faq-cta-card__title {
    font-size: 20px;
  }

  .pricing-page .about-faq-item__question-text {
    font-size: 15px;
  }

  .pricing-page .enterprise-section__inner {
    padding: 40px 1.25rem;
    gap: 28px;
  }

  .pricing-page .enterprise-section__title {
    font-size: clamp(32px, 9vw, 44px);
  }

  .pricing-page .enterprise-section__actions .cta-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: 15px;
  }
}

@media (max-width: 639px) {
  .pricing-page .pricing-section--page {
    gap: 32px;
    padding: 40px 1rem;
  }

  .pricing-page .pricing-page-header {
    gap: 12px;
    align-items: center;
    text-align: center;
  }

  .pricing-page .pricing-page-header__title {
    font-size: 26px;
    line-height: 1.25;
    text-align: center;
  }

  .pricing-page .pricing-page-header__text {
    font-size: 14px;
    text-align: center;
  }

  .pricing-page .comparison-section {
    padding: 32px 1rem;
  }

  .pricing-page .comparison-table {
    border-radius: 16px;
    --comparison-pad-left: 10px;
    --comparison-pad-top: 10px;
    --comparison-pad-bottom: 10px;
  }

  .pricing-page .comparison-table__header,
  .pricing-page .comparison-table__row {
    min-height: 48px;
  }

  .pricing-page .comparison-table__header {
    border-radius: 16px 16px 0 0;
  }

  .pricing-page .comparison-table__row--last {
    border-radius: 0 0 16px 16px;
  }

  .pricing-page .comparison-table__cell {
    font-size: 12px;
    line-height: 1.35;
  }

  .pricing-page .comparison-table__cell--label,
  .pricing-page .comparison-table__cell--plan,
  .pricing-page .comparison-table__cell--feature {
    font-size: 12px;
  }

  .pricing-page .comparison-table__icon {
    width: 14px;
    height: 14px;
  }

  .pricing-page .about-faq-section {
    padding: 40px 1rem;
  }

  .pricing-page .about-faq-title {
    font-size: 24px;
  }

  .pricing-page .about-faq-subtitle {
    font-size: 14px;
  }

  .pricing-page .about-faq-cta-card {
    padding: 18px;
    border-radius: 20px;
    gap: 16px;
  }

  .pricing-page .about-faq-cta-card__title {
    font-size: 18px;
  }

  .pricing-page .about-faq-cta-card__text {
    font-size: 14px;
  }

  .pricing-page .about-faq-cta-card__btn {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 14px;
  }

  .pricing-page .about-faq-cta-card__arrow {
    width: 22px;
    height: 10px;
  }

  .pricing-page .about-faq-item__question {
    padding: 14px 0;
  }

  .pricing-page .about-faq-item__question-text {
    font-size: 14px;
  }

  .pricing-page .about-faq-item__icon {
    width: 14px;
    height: 14px;
  }

  .pricing-page .enterprise-section__inner {
    padding: 32px 1rem;
    gap: 24px;
  }

  .pricing-page .enterprise-section__left,
  .pricing-page .enterprise-section__right {
    gap: 16px;
  }

  .pricing-page .enterprise-section__title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .pricing-page .enterprise-section__sub,
  .pricing-page .enterprise-section__copy {
    font-size: 14px;
  }

  .pricing-page .enterprise-section__actions {
    gap: 10px;
  }

  .pricing-page .enterprise-section__actions .cta-btn {
    padding: 12px 20px;
    font-size: 14px;
  }

  .pricing-page .enterprise-section__actions .cta-btn__arrow {
    width: 22px;
    height: 10px;
  }
}

/* ===== Blog Listing page ===== */
.blog-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 6px 16px;
  border-radius: 8px;
  background: #1cb1a9;
  backdrop-filter: blur(7px);
  color: #ffffff;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  white-space: nowrap;
}

.blog-badge--recent {
  border-radius: 8px;
  background: #1cb1a9;
}

.blog-card__date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #525252;
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  background: transparent;
}

.blog-card__date-icon {
  display: block;
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.blog-card__date time {
  display: inline-block;
  width: auto;
  height: auto;
  color: inherit;
  font: inherit;
  line-height: 100%;
  white-space: nowrap;
}

/* Recent blog */
.blog-recent {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: 1920px;
  padding: 64px 1rem 48px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background: linear-gradient(180deg, rgba(28, 176, 169, 0.04) 0%, rgba(28, 176, 169, 0.10) 100%);
}

.blog-recent__layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
}

.blog-recent__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  align-items: stretch;
  justify-content: center;
}

.blog-recent-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  height: 100%;
  align-self: stretch;
}

.blog-recent-card__media {
  position: relative;
  display: block;
  flex-shrink: 0;
  align-self: stretch;
  width: 100%;
  height: auto;
  aspect-ratio: 113 / 63;
  overflow: hidden;
  border-radius: 40px;
  background: #1c1c1c;
  text-decoration: none;
}

.blog-recent-card__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.blog-recent-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  flex: 1 1 auto;
}

.blog-recent-card__title {
  align-self: stretch;
  flex: 1 1 auto;
  margin: 0;
  color: #1c1c1c;
  font-family: "Outfit", sans-serif;
  font-size: clamp(28px, 4vw, 56px);
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -1.68px;
}

.blog-recent-card__title a {
  color: inherit;
  text-decoration: none;
}

.blog-recent-card__title br {
  display: none;
}

.blog-recent-card__title a:hover,
.blog-recent-card__title a:focus {
  color: #1cb1a9;
}

/* Recent: title ??? date gap 33px (body gap 12 + 21) */
.blog-recent-card__body > .blog-card__date {
  margin-top: auto;
  padding-top: 21px;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  flex-shrink: 0;
}

/* All blog */
.blog-all {
  box-sizing: border-box;
  padding: 48px 1rem 64px;
  background: #ffffff;
}

.blog-all__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 24px;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  align-items: stretch;
}

.blog-post-card {
  display: flex;
  width: 100%;
  max-width: 530px;
  height: 100%;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  gap: 20px;
  min-width: 0;
  box-sizing: border-box;
}

.blog-post-card__media {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 100%;
  max-width: 530px;
  height: auto;
  aspect-ratio: 530 / 360;
  overflow: hidden;
  border-radius: 40px;
  background: #1c1c1c;
  text-decoration: none;
}

.blog-post-card__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.blog-post-card__title {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  margin: 0;
  color: #333333;
  font-family: "Outfit", sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.96px;
}

.blog-post-card__title a {
  color: inherit;
  text-decoration: none;
}

.blog-post-card__title a:hover,
.blog-post-card__title a:focus {
  color: #1cb1a9;
}

.blog-post-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  align-self: stretch;
  width: 100%;
  margin-top: auto;
  flex-shrink: 0;
}

/* All blog: grey date pill + title ??? date gap 20px via card gap */
.blog-all .blog-card__date {
  display: flex;
  padding: 10px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #f4f4f4;
  backdrop-filter: blur(7px);
}

@media (min-width: 640px) {
  .blog-recent {
    padding: 80px 2rem 56px;
  }

  .blog-recent-card__title {
    font-size: clamp(32px, 4.5vw, 48px);
  }

  .blog-all {
    padding: 56px 2rem 80px;
  }

  .blog-all__grid {
    grid-template-columns: repeat(2, minmax(0, 530px));
    gap: 40px 28px;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .blog-recent {
    display: flex;
    padding: clamp(80px, calc(80px + (40 * (100vw - 1024px) / 896)), 120px)
      clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px);
    justify-content: center;
    align-items: center;
    align-self: stretch;
    width: 100%;
    max-width: 1920px;
    box-sizing: border-box;
  }

  .blog-recent__layout {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 1680px; /* 1920 - 120 - 120 */
  }

  .blog-recent__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    justify-content: stretch;
    width: 100%;
    max-width: 1680px;
  }

  .blog-recent-card {
    width: 100%;
    max-width: none;
    gap: clamp(20px, calc(20px + (8 * (100vw - 1024px) / 896)), 28px);
  }

  .blog-recent-card__media {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 113 / 63;
    border-radius: 40px;
    background: #1c1c1c;
  }

  .blog-recent-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .blog-recent-card__title {
    font-size: clamp(36px, calc(36px + (20 * (100vw - 1024px) / 896)), 56px);
  }

  .blog-recent-card__title br {
    display: inline;
  }

  .blog-all {
    padding: clamp(64px, calc(64px + (56 * (100vw - 1024px) / 896)), 120px)
      clamp(48px, calc(48px + (72 * (100vw - 1024px) / 896)), 120px)
      clamp(64px, calc(64px + (35 * (100vw - 1024px) / 896)), 99px);
  }

  .blog-all__grid {
    grid-template-columns: repeat(3, minmax(0, 530px));
    gap: clamp(36px, calc(36px + (24 * (100vw - 1024px) / 896)), 60px)
      clamp(24px, calc(24px + (21 * (100vw - 1024px) / 896)), 45px);
    justify-content: space-between;
  }

  .blog-post-card {
    width: 100%;
    max-width: 530px;
    height: 100%;
    gap: 20px;
    align-items: stretch;
    align-self: stretch;
  }

  .blog-post-card__media {
    width: 100%;
    max-width: 530px;
    height: auto;
    aspect-ratio: 530 / 360;
    border-radius: 40px;
    background: #1c1c1c;
  }

  .blog-post-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .blog-post-card__title {
    font-size: clamp(24px, calc(24px + (8 * (100vw - 1024px) / 896)), 32px);
  }
}

@media (min-width: 1920px) {
  .blog-recent,
  .blog-page .blog-recent {
    display: flex;
    width: 100%;
    max-width: 1920px;
    height: 994px;
    padding: 120px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    box-sizing: border-box;
  }

  .blog-recent__layout,
  .blog-page .blog-recent__layout {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Content width: 1920 - 120 - 120 = 1680 */
    width: 1680px;
    max-width: 1680px;
    gap: 0;
  }

  .blog-recent__track,
  .blog-page .blog-recent__track {
    display: grid;
    gap: 40px;
    /* Equal cards fill content: (1680 - 40) / 2 = 820 each */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    width: 1680px;
    max-width: 1680px;
  }

  .blog-recent-card,
  .blog-page .blog-recent-card {
    width: 100%;
    max-width: none;
  }

  .blog-recent-card__media,
  .blog-page .blog-recent-card__media {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 113 / 63;
    background: #1c1c1c;
  }

  .blog-recent-card__title,
  .blog-page .blog-recent-card__title {
    font-size: 56px;
  }

  .blog-recent-card__title br,
  .blog-page .blog-recent-card__title br {
    display: inline;
  }

  .blog-all {
    padding: 120px 120px 99px;
  }

  .blog-all__grid {
    gap: 60px 45px;
    grid-template-columns: repeat(3, 530px);
    justify-content: space-between;
  }

  .blog-post-card {
    width: 530px;
    max-width: 530px;
    height: 100%;
    gap: 20px;
    align-self: stretch;
  }

  .blog-post-card__media {
    width: 530px;
    max-width: 530px;
    height: 360px;
    background: #1c1c1c;
  }

  .blog-post-card__title {
    font-size: 32px;
  }
}

/* ===== Blog listing ??? 1024 ??? 320 responsive (xl/lg desktop tokens unchanged above) ===== */

/* Compact lg: better gaps when 3??530 is too tight */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .blog-page .blog-recent {
    padding: 64px 40px 48px;
  }

  .blog-page .blog-recent__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    justify-content: stretch;
  }

  .blog-page .blog-recent-card {
    max-width: none;
    width: 100%;
    gap: 20px;
  }

  .blog-page .blog-recent-card__media {
    max-width: none;
    width: 100%;
    height: auto;
    aspect-ratio: 113 / 63;
  }

  .blog-page .blog-recent-card__title {
    font-size: 32px;
    letter-spacing: -0.96px;
  }

  .blog-page .blog-all {
    padding: 56px 40px 64px;
  }

  .blog-page .blog-all__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 28px;
    justify-content: stretch;
  }

  .blog-page .blog-post-card {
    max-width: none;
    width: 100%;
    height: 100%;
    gap: 20px;
    align-self: stretch;
  }

  .blog-page .blog-post-card__media {
    max-width: none;
    width: 100%;
    height: auto;
    aspect-ratio: 530 / 360;
  }

  .blog-page .blog-post-card__title {
    font-size: 24px;
    letter-spacing: -0.72px;
    flex: 1 1 auto;
  }

  .blog-page .blog-post-card__meta {
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: auto;
    flex-shrink: 0;
  }
}

@media (max-width: 1023.98px) {
  .blog-page .blog-recent {
    padding: 56px 32px 40px;
  }

  .blog-page .blog-recent__layout {
    gap: 0;
    max-width: 100%;
  }

  .blog-page .blog-recent__track {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .blog-page .blog-recent-card {
    width: 100%;
    max-width: none;
    gap: 16px;
  }

  .blog-page .blog-recent-card__media {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 113 / 63;
    border-radius: 28px;
    background: #1c1c1c;
  }

  .blog-page .blog-recent-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .blog-page .blog-recent-card__body {
    gap: 10px;
  }

  .blog-page .blog-recent-card__body > .blog-card__date {
    margin-top: auto;
    padding-top: 23px;
  }

  .blog-page .blog-recent-card__title {
    font-size: clamp(26px, 4.5vw, 36px);
    letter-spacing: -0.8px;
  }

  .blog-page .blog-all {
    padding: 48px 32px 56px;
  }

  .blog-page .blog-all__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
    justify-content: stretch;
    max-width: 100%;
  }

  .blog-page .blog-post-card {
    width: 100%;
    max-width: none;
    height: 100%;
    gap: 20px;
    align-self: stretch;
  }

  .blog-page .blog-post-card__media {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 530 / 360;
    border-radius: 28px;
    background: #1c1c1c;
  }

  .blog-page .blog-post-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .blog-page .blog-post-card__title {
    font-size: clamp(20px, 2.8vw, 24px);
    letter-spacing: -0.6px;
    flex: 1 1 auto;
  }

  .blog-page .blog-post-card__meta {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: auto;
    flex-shrink: 0;
  }

  .blog-page .blog-badge {
    font-size: 14px;
    padding: 5px 12px;
    white-space: nowrap;
  }

  .blog-page .blog-all .blog-card__date {
    padding: 8px 12px;
  }
}

@media (max-width: 767px) {
  .blog-page {
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
    background: #ffffff;
  }

  .blog-page .about-top,
  .blog-page #blog-page,
  .blog-page .blog-recent,
  .blog-page .blog-all {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .blog-page .blog-recent {
    padding: 40px 20px 32px;
  }

  .blog-page .blog-recent__track {
    gap: 28px;
  }

  .blog-page .blog-recent-card {
    gap: 14px;
  }

  .blog-page .blog-recent-card__media,
  .blog-page .blog-post-card__media {
    border-radius: 20px;
  }

  .blog-page .blog-recent-card__title {
    font-size: 24px;
    letter-spacing: -0.48px;
  }

  .blog-page .blog-recent-card__body > .blog-card__date {
    margin-top: auto;
    padding-top: 20px;
  }

  .blog-page .blog-all {
    padding: 36px 20px 48px;
  }

  .blog-page .blog-all__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .blog-page .blog-post-card {
    gap: 16px;
  }

  .blog-page .blog-post-card__title {
    font-size: 20px;
    letter-spacing: -0.48px;
  }

  .blog-page .blog-post-card__meta {
    gap: 10px;
  }

  .blog-page .blog-badge {
    font-size: 13px;
    padding: 4px 10px;
  }
}

@media (max-width: 479px) {
  .blog-page {
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
    background: #ffffff;
  }

  .blog-page .about-top,
  .blog-page #blog-page,
  .blog-page .blog-recent,
  .blog-page .blog-all,
  .blog-page .site-footer {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
  }

  .blog-page .about-top {
    background: linear-gradient(180deg, rgba(28, 176, 169, 0.04) 0%, rgba(28, 176, 169, 0.10) 100%);
  }

  .blog-page .about-hero__bg {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
  }

  .blog-page .about-hero__bg-media,
  .blog-page .about-hero-bg-tint {
    left: 0;
    width: 100%;
    max-width: 100%;
  }

  .blog-page .about-hero-video {
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    transform: none;
    object-fit: cover;
  }

  .blog-page .blog-recent,
  .blog-page .blog-all {
    background: #ffffff;
  }

  .blog-page .blog-recent {
    background: linear-gradient(180deg, rgba(28, 176, 169, 0.04) 0%, rgba(28, 176, 169, 0.10) 100%);
  }

  .blog-page .blog-recent__layout,
  .blog-page .blog-all__grid {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .blog-page .blog-recent {
    padding: 32px 16px 28px;
  }

  .blog-page .blog-recent__track {
    gap: 24px;
  }

  .blog-page .blog-recent-card__media,
  .blog-page .blog-post-card__media {
    border-radius: 16px;
    background: transparent;
  }

  .blog-page .blog-recent-card__title {
    font-size: 22px;
    letter-spacing: -0.4px;
  }

  .blog-page .blog-all {
    padding: 28px 16px 40px;
  }

  .blog-page .blog-all__grid {
    gap: 24px;
  }

  .blog-page .blog-post-card {
    gap: 14px;
    max-width: 100%;
  }

  .blog-page .blog-post-card__title {
    font-size: 18px;
    letter-spacing: -0.36px;
  }

  .blog-page .blog-card__date {
    font-size: 14px;
    gap: 8px;
  }

  .blog-page .blog-card__date-icon {
    width: 16px;
    height: 16px;
  }

  .blog-page .blog-card__date time {
    width: auto;
    height: auto;
  }

  .blog-page .blog-all .blog-card__date {
    padding: 8px 10px;
  }

  .blog-page .blog-badge {
    font-size: 12px;
    padding: 4px 8px;
  }

  .blog-page .site-footer {
    background-color: #000000;
  }

  .blog-page .footer-inner {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ===== Blog Detail page ===== */
.blog-detail-page {
  overflow-x: clip;
}

.blog-detail-page.about-page .blog-detail-about-top.about-top {
  position: relative;
  z-index: auto;
  isolation: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  background: transparent;
}

/* Same corner video treatment as blog / about pages */
.blog-detail-page .blog-detail-about-top .about-hero__bg {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: 1920px;
  height: 720px;
  max-width: none;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}

.blog-detail-page .blog-detail-about-top .about-hero__bg-media {
  position: relative;
  width: 1920px;
  height: 720px;
  max-width: none;
  isolation: isolate;
  overflow: visible;
}

.blog-detail-page .blog-detail-about-top .about-hero__bg-base {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #ffffff;
}

.blog-detail-page .blog-detail-about-top .about-hero-bg-tint {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 1920px;
  height: 720px;
  background: #1cb1a9;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.blog-detail-page .blog-detail-about-top .about-hero-video {
  position: absolute;
  top: -538px;
  right: -729px;
  left: auto;
  z-index: 1;
  width: 1920px;
  height: 1080px;
  max-width: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: right center;
  opacity: 0.2;
  mix-blend-mode: luminosity;
  transform: rotate(30deg) scaleX(-1);
  transform-origin: center center;
  pointer-events: none;
}

.blog-detail-page .blog-detail-about-top .site-header--about {
  position: relative;
  z-index: 10;
}

.blog-detail__wrapper {
  position: relative;
  z-index: 1;
  display: grid;
  /* Share zone 286px wide starting at 320 from screen ? content at ~606 */
  grid-template-columns: 286px minmax(0, 1190px);
  column-gap: 4px;
  align-items: start;
  justify-content: start;
  box-sizing: border-box;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  /*
    Home nav ? heading = 198px:
    wrapper pad 88 + breadcrumb 20 + breadcrumb?title 90 = 198
  */
  padding: 88px 120px 120px 320px;
}

.blog-detail__share {
  width: 286px;
  max-width: 286px;
  flex-shrink: 0;
  position: sticky;
  top: 140px;
  align-self: start;
  height: max-content;
  margin-top: 110px;
}

.blog-detail__share-widget {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 32px;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding-top: 23px;
}

.blog-detail__share-title {
  margin: 0;
  color: #1c1c1c;
  font-family: "Outfit", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.96px;
}

.blog-detail__share-icons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.blog-detail__share-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(28, 177, 169, 0.12);
  text-decoration: none;
  transition: background 0.3s ease;
}

.blog-detail__share-icon img {
  display: block;
  width: 20px;
  height: 20px;
}

.blog-detail__share-icon:hover {
  background: rgba(28, 177, 169, 0.22);
}

.blog-detail__main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1190px;
  min-width: 0;
  color: #333333;
  font-family: "Outfit", sans-serif;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  line-height: 150%;
}

.blog-detail__section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1190px;
  align-self: stretch;
}

.blog-detail__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.blog-detail__breadcrumb-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-decoration: none;
}

.blog-detail__breadcrumb-icon {
  display: block;
  width: 16px;
  height: 16px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.blog-detail__breadcrumb-sep {
  display: block;
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.blog-detail__breadcrumb-link {
  color: #525252;
  text-align: center;
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

/* Breadcrumb ? title: 90px (main gap 40 + 50) ? Home nav ? heading totals 198px */
.blog-detail__intro {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  align-self: stretch;
  margin-top: 50px;
}

.blog-detail__intro-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-detail__title {
  margin: 0;
  color: #1c1c1c;
  font-family: "Outfit", sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  font-style: normal;
  line-height: 120%;
  letter-spacing: -1.68px;
  align-self: stretch;
}

.blog-detail__lead,
.blog-detail__main > p,
.blog-detail__section > p,
.blog-detail__intro-copy > p {
  box-sizing: border-box;
  width: 100%;
  max-width: 1190px;
  margin: 0;
  color: #333333;
  font-family: "Outfit", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  align-self: stretch;
}

.blog-detail__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #525252;
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}

.blog-detail__meta-icon {
  display: block;
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.blog-detail__featured-image {
  display: block;
  width: 100%;
  max-width: 1188px;
  height: auto;
  aspect-ratio: 593 / 296;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}

.blog-detail__heading {
  margin: 0;
  color: #1c1c1c;
  font-family: "Outfit", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -1.2px;
  align-self: stretch;
}

.blog-detail__subheading {
  margin: 12px 0 0;
  color: #1c1c1c;
  font-family: "Outfit", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.96px;
}

.blog-detail__teal {
  color: #1cb1a9;
  font-weight: 600;
}

.blog-detail__bold {
  color: #1c1c1c;
  font-weight: 600;
}

.blog-detail__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-detail__list--numbered > li {
  color: #333333;
  font-size: 24px;
  font-weight: 400;
  line-height: 150%;
}

.blog-detail__list--bullets > li {
  position: relative;
  display: block;
  padding-left: 24px;
  color: #333333;
  font-size: 24px;
  font-weight: 400;
  line-height: 150%;
}

.blog-detail__list--bullets > li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  box-sizing: border-box;
  width: 12px;
  height: 24px;
  flex-shrink: 0;
  background: radial-gradient(circle 6px at center, #1cb1a9 99%, transparent 100%);
}

.blog-detail__list--bullets > li .blog-detail__bold {
  display: inline;
  font-weight: 600;
}

.blog-detail__table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
}

.blog-detail__table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.blog-detail__table th,
.blog-detail__table td {
  box-sizing: border-box;
  border: 1px solid #000000;
  vertical-align: middle;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.blog-detail__table thead th {
  background: #f4f4f4;
  color: #1cb1a9;
  font-family: "Outfit", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.blog-detail__table tbody td {
  background: #ffffff;
  color: #333333;
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

/* Zebra: header + even body rows (Main Objective, Testing Frequency) */
.blog-detail__table tbody tr:nth-child(even) td {
  background: #f4f4f4;
}

.blog-detail__table th:first-child,
.blog-detail__table td:first-child {
  width: 24.7%;
  padding: 20px 40px;
}

.blog-detail__table tbody td:first-child {
  font-weight: 600;
}

.blog-detail__table th:not(:first-child),
.blog-detail__table td:not(:first-child) {
  width: 37.65%;
  padding: 20px 40px;
}

.blog-detail__tags {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1190px;
  margin: 0;
  align-self: stretch;
}

.blog-detail__tags-rule {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1190px;
  height: 1px;
  margin: 0;
  border: none;
  background: rgba(28, 177, 169, 0.3);
}

.blog-detail__tags-title {
  margin: 0;
  color: #1c1c1c;
  font-family: "Outfit", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -1.2px;
}

.blog-detail__tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.blog-detail__tag {
  display: flex;
  padding: 10px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #1cb1a9;
  backdrop-filter: blur(7px);
  color: #ffffff;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
  transition: background 0.2s ease;
}

.blog-detail__tag:hover {
  background: #119380;
}

.blog-detail__comments {
  margin: 0;
  width: 100%;
  max-width: 1190px;
  align-self: stretch;
}

.blog-detail__comment-box {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap: 20px;
  width: 100%;
  max-width: 1190px;
  min-height: 340px;
  padding: 40px 40px 48px 40px;
  align-items: stretch;
  border-radius: 20px;
  border: 1px solid rgba(50, 192, 185, 0.3);
  background: #ffffff;
}

.blog-detail__comment-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.blog-detail__comment-avatar {
  display: flex;
  width: 60px;
  height: 60px;
  padding: 18px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border-radius: 150px;
  border: 2px solid #ffffff;
  background: #1cb1a9;
  /* Thin outer teal ring so the white border stays visible */
  box-shadow: 0 0 0 1px #1cb1a9;
}

.blog-detail__comment-avatar img {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}

.blog-detail__comment-input {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: 1030px;
  height: 184px;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(28, 177, 169, 0.3);
  background: #ffffff;
}

.blog-detail__comment-input textarea {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 20px;
  border: none;
  background: transparent;
  color: #696969;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  resize: none;
  outline: none;
  box-sizing: border-box;
}

.blog-detail__comment-input textarea::placeholder {
  color: #696969;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  opacity: 1;
}

.blog-detail__comment-toolbar {
  display: inline-flex;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 20px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: rgba(50, 192, 185, 0.3);
}

.blog-detail__comment-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.blog-detail__tool--bold,
.blog-detail__tool--italic,
.blog-detail__tool--underline,
.blog-detail__tool--strike {
  color: #696969;
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  line-height: 150%;
}

.blog-detail__tool--bold {
  font-style: normal;
  font-weight: 700;
}

.blog-detail__tool--italic {
  font-style: italic;
  font-weight: 400;
}

.blog-detail__tool--underline {
  font-style: normal;
  font-weight: 400;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-underline-position: from-font;
}

.blog-detail__tool--strike {
  font-style: normal;
  font-weight: 400;
  text-decoration-line: line-through;
}

.blog-detail__tool-icon {
  display: block;
  width: 16px;
  height: 16px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.blog-detail__comment-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1110px;
  margin-left: 0;
  align-self: stretch;
}

.blog-detail__comment-count {
  margin: 0;
  align-self: stretch;
}

.blog-detail__comment-count-num {
  color: #1a1a1a;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.blog-detail__comment-count-label {
  color: #696969;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.blog-detail__comment-progress {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: 1110px;
  height: 3px;
  padding-right: 0;
  align-items: center;
  align-self: stretch;
  background: rgba(50, 192, 185, 0.2);
}

.blog-detail__comment-progress-fill {
  display: block;
  width: 265.333px;
  max-width: 100%;
  height: 3px;
  flex-shrink: 0;
  background: #1cb1a9;
}

@media (max-width: 1600px) {
  .blog-detail__wrapper {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 40px;
    padding: 120px 64px 96px 80px;
  }

  .blog-detail__share {
    width: auto;
    max-width: none;
    margin-top: 200px;
  }
}

@media (max-width: 1200px) {
  .blog-detail__wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 80px 40px 72px;
  }

  /* Flatten main so Share can sit under breadcrumb on tablet/mobile */
  .blog-detail__main {
    display: contents;
  }

  .blog-detail__breadcrumbs {
    order: 1;
  }

  .blog-detail__share {
    order: 2;
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 0;
    height: auto;
  }

  .blog-detail__intro {
    order: 3;
    margin-top: 0;
  }

  .blog-detail__featured-image {
    order: 4;
  }

  .blog-detail__section {
    order: 5;
  }

  .blog-detail__tags {
    order: 6;
  }

  .blog-detail__comments {
    order: 7;
  }

  .blog-detail__share-widget {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding-top: 0;
  }

  .blog-detail__share-icons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }

  .blog-detail__share-title {
    margin: 0 8px 0 0;
  }

  .blog-detail__title {
    font-size: clamp(28px, 5.5vw, 40px);
    letter-spacing: -0.9px;
  }

  .blog-detail__heading {
    font-size: clamp(28px, 4vw, 36px);
    letter-spacing: -0.9px;
  }

  .blog-detail__lead,
  .blog-detail__main > p,
  .blog-detail__section > p,
  .blog-detail__intro-copy > p,
  .blog-detail__list--numbered > li,
  .blog-detail__list--bullets > li {
    font-size: clamp(18px, 2.4vw, 22px);
  }

  .blog-detail__table th:first-child,
  .blog-detail__table td:first-child,
  .blog-detail__table th:not(:first-child),
  .blog-detail__table td:not(:first-child) {
    width: auto;
    padding: 16px 20px;
  }

  .blog-detail__table thead th {
    font-size: 18px;
  }

  .blog-detail__table tbody td {
    font-size: 16px;
  }
}

@media (max-width: 1024px) {
  .blog-detail-page .blog-detail-about-top .about-hero__bg,
  .blog-detail-page .blog-detail-about-top .about-hero__bg-media,
  .blog-detail-page .blog-detail-about-top .about-hero-bg-tint {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 480px;
    transform: none;
  }

  .blog-detail-page .blog-detail-about-top .about-hero-video {
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    transform: none;
    object-fit: cover;
  }
}

@media (max-width: 768px) {
  .blog-detail__wrapper {
    padding: 48px 20px 56px;
    gap: 20px;
  }

  .blog-detail__title {
    font-size: 28px;
    letter-spacing: -0.7px;
  }

  .blog-detail__heading {
    font-size: 28px;
    letter-spacing: -0.7px;
  }

  .blog-detail__lead,
  .blog-detail__section > p,
  .blog-detail__intro-copy > p,
  .blog-detail__list--numbered > li,
  .blog-detail__list--bullets > li {
    font-size: 16px;
  }

  .blog-detail__meta {
    font-size: 16px;
  }

  .blog-detail__comment-box {
    min-height: 0;
    padding: 20px 16px;
  }

  .blog-detail__comment-row {
    flex-direction: column;
    gap: 16px;
  }

  .blog-detail__comment-input {
    height: auto;
    min-height: 184px;
    max-width: 100%;
  }

  .blog-detail__comment-input textarea {
    min-height: 120px;
  }

  .blog-detail__comment-footer {
    margin-left: 0;
    max-width: 100%;
  }

  .blog-detail__tags-title {
    font-size: 28px;
    letter-spacing: -0.7px;
  }

  .blog-detail__table th:first-child,
  .blog-detail__table td:first-child,
  .blog-detail__table th:not(:first-child),
  .blog-detail__table td:not(:first-child) {
    padding: 10px 8px;
  }

  .blog-detail__table thead th {
    font-size: 12px;
    line-height: 140%;
  }

  .blog-detail__table tbody td {
    font-size: 11px;
    line-height: 140%;
  }

  .blog-detail__table tbody td:first-child {
    font-size: 12px;
  }

  .blog-detail__subheading {
    font-size: 22px;
    letter-spacing: -0.6px;
  }

  .blog-detail__comment-toolbar {
    padding: 6px 10px;
    gap: 8px;
  }

  .blog-detail__comment-tools {
    gap: 8px;
  }

  .blog-detail__tool--bold,
  .blog-detail__tool--italic,
  .blog-detail__tool--underline,
  .blog-detail__tool--strike {
    font-size: 12px;
  }

  .blog-detail__tool-icon {
    width: 12px;
    height: 12px;
  }

  .blog-detail__comment-avatar {
    width: 48px;
    height: 48px;
    padding: 14px;
  }

  .blog-detail__comment-avatar img {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 576px) {
  .blog-detail__wrapper {
    padding: 32px 16px 48px;
  }

  .blog-detail__share-title {
    display: none;
  }

  .blog-detail__share-icon {
    width: 40px;
    height: 40px;
  }

  .blog-detail-page .blog-detail-about-top .about-hero__bg,
  .blog-detail-page .blog-detail-about-top .about-hero__bg-media,
  .blog-detail-page .blog-detail-about-top .about-hero-bg-tint {
    height: 360px;
  }

  .blog-detail__table th:first-child,
  .blog-detail__table td:first-child,
  .blog-detail__table th:not(:first-child),
  .blog-detail__table td:not(:first-child) {
    padding: 8px 6px;
  }

  .blog-detail__table thead th {
    font-size: 11px;
  }

  .blog-detail__table tbody td {
    font-size: 10px;
  }

  .blog-detail__table tbody td:first-child {
    font-size: 11px;
  }

  .blog-detail__tag {
    font-size: 13px;
    padding: 8px 12px;
  }
}

@media (max-width: 425px) {
  .floating-widgets {
    right: 10px;
    bottom: 10px;
    gap: 6px;
    width: 36px;
  }

  .floating-contact,
  .floating-back-top {
    width: 36px;
    height: 36px;
  }

  .floating-contact__icon {
    width: 18px;
    height: 18px;
  }

  .floating-back-top__icon {
    width: 36px;
    height: 36px;
  }

  .blog-detail__title {
    font-size: 26px;
    letter-spacing: -0.56px;
  }

  .blog-detail__table th:first-child,
  .blog-detail__table td:first-child,
  .blog-detail__table th:not(:first-child),
  .blog-detail__table td:not(:first-child) {
    padding: 6px 4px;
  }

  .blog-detail__table thead th {
    font-size: 10px;
  }

  .blog-detail__table tbody td {
    font-size: 9px;
  }

  .blog-detail__table tbody td:first-child {
    font-size: 10px;
  }
}

/* ===== Privacy Policy page ===== */
/* =========================================================
   Privacy Policy page - Figma desktop specs
   ========================================================= */

.privacy-page {
  overflow-x: clip;
}

.privacy-page.about-page .privacy-about-top.about-top {
  position: relative;
  z-index: auto;
  isolation: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  background: transparent;
}

/* Tall decorative band so the rotated video shows in the top-right corner */
.privacy-page .privacy-about-top .about-hero__bg {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: 1920px;
  height: 720px;
  max-width: none;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}

.privacy-page .privacy-about-top .about-hero__bg-media {
  position: relative;
  width: 1920px;
  height: 720px;
  max-width: none;
  isolation: isolate;
  overflow: visible;
}

.privacy-page .privacy-about-top .about-hero__bg-base {
  background-color: #ffffff;
}

.privacy-page .privacy-about-top .about-hero-bg-tint {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 1920px;
  height: 720px;
  background: #1cb1a9;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.privacy-page .privacy-about-top .about-hero-video {
  /* Same corner placement as About Us ??? teal line graphic */
  position: absolute;
  top: -538px;
  right: -729px;
  left: auto;
  z-index: 1;
  width: 1920px;
  height: 1080px;
  max-width: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: right center;
  opacity: 0.2;
  mix-blend-mode: luminosity;
  transform: rotate(30deg) scaleX(-1);
  transform-origin: center center;
  pointer-events: none;
}

.privacy-page .privacy-about-top .site-header--about {
  position: relative;
  z-index: 50;
  background-color: transparent;
}

.privacy-page__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 120px 20px 80px;
  box-sizing: border-box;
  background: transparent;
}

.privacy-page__container::before {
  display: none;
}

.privacy-page__sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
}

.privacy-page__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.privacy-page__breadcrumb-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-decoration: none;
}

.privacy-page__breadcrumb-icon {
  display: block;
  width: 16px;
  height: 16px;
  aspect-ratio: 1 / 1;
}

.privacy-page__breadcrumb-sep {
  display: block;
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.privacy-page__breadcrumb-current {
  color: #525252;
  text-align: center;
  font-family: Outfit, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}

.privacy-page__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin: 0 0 40px;
  max-width: 1190px;
}

.privacy-page__nav {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

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

.privacy-page__nav-link {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 8px;
  color: #525252;
  font-family: Outfit, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.privacy-page__nav-link:hover {
  background: #f4f4f4;
  color: #333333;
}

.privacy-page__nav-link--active {
  background: #f4f4f4;
  color: #333333;
}

.privacy-page__main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.privacy-page__title {
  margin: 0;
  max-width: 1190px;
  color: #1c1c1c;
  font-family: Outfit, sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -1.68px;
}

.privacy-page__updated {
  margin: 0;
  color: #525252;
  font-family: Outfit, sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.privacy-page__updated time {
  color: #333333;
  font-weight: 600;
}

.privacy-page__sections {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 41px;
  align-self: stretch;
  max-width: 991px;
}

.privacy-page__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  scroll-margin-top: 120px;
}

.privacy-page__heading {
  margin: 0;
  align-self: stretch;
  color: #1c1c1c;
  font-family: Outfit, sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -1.2px;
}

.privacy-page__body {
  margin: 0;
  align-self: stretch;
  width: 100%;
  max-width: 991px;
  color: #333333;
  font-family: Outfit, sans-serif;
  font-size: clamp(18px, 2vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.privacy-page__subheading {
  color: #333333;
  font-family: Outfit, sans-serif;
  font-size: inherit;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}

.privacy-page__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  color: #333333;
  font-family: Outfit, sans-serif;
  font-size: clamp(18px, 2vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.privacy-page__list > li {
  position: relative;
  padding-left: 28px;
  margin: 0;
}

.privacy-page__list > li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1cb1a9;
}

.privacy-page__email {
  margin: 0;
}

.privacy-page__email a {
  color: #1cb1a9;
  font-family: Outfit, sans-serif;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
}

.privacy-page__email a:hover {
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .privacy-page__container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 80px;
    margin-top: 0;
    padding: 175px 120px 120px 320px;
  }

  .privacy-page__sidebar {
    position: sticky;
    top: 24px;
    display: flex;
    width: 390px;
    padding: 0 16px 90px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 80px; /* Privacy Policy breadcrumb ??? Introduction tab */
  }

  .privacy-page__nav {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding-bottom: 0;
    width: 100%;
  }

  .privacy-page__nav-link {
    flex: 1 0 0;
    justify-content: flex-start;
    white-space: normal;
    font-size: 24px;
    color: #525252;
  }

  .privacy-page__nav-link--active,
  .privacy-page__nav-link:hover {
    color: #333333;
  }

  .privacy-page__main {
    padding-top: 0;
    max-width: 1210px;
  }

  .privacy-page__header {
    margin-bottom: 40px;
  }

  .privacy-page__title {
    font-size: 56px;
  }

  .privacy-page__heading {
    font-size: 40px;
  }

  .privacy-page__body,
  .privacy-page__list {
    font-size: 24px;
  }
}

@media (min-width: 1280px) and (max-width: 1599px) {
  .privacy-page__container {
    padding-left: 80px;
    padding-right: 80px;
    gap: 48px;
  }

  .privacy-page__sidebar {
    width: 320px;
  }
}

@media (min-width: 1600px) {
  .privacy-page__container {
    padding-left: 320px;
    padding-right: 120px;
    gap: 80px;
  }

  .privacy-page__sidebar {
    width: 390px;
  }
}

@media (max-width: 1279px) and (min-width: 1024px) {
  .privacy-page__container {
    padding-left: 48px;
    padding-right: 48px;
    padding-top: 140px;
    margin-top: 0;
    gap: 40px;
  }

  .privacy-page__sidebar {
    width: 260px;
    gap: 48px;
  }

  .privacy-page__nav-link {
    font-size: 18px;
  }

  .privacy-page__title {
    font-size: 44px;
  }
}

@media (max-width: 1023px) {
  .privacy-page .privacy-about-top .about-hero__bg,
  .privacy-page .privacy-about-top .about-hero__bg-media,
  .privacy-page .privacy-about-top .about-hero-bg-tint {
    height: 220px;
    min-height: 220px;
    overflow: hidden;
  }

  .privacy-page .privacy-about-top .about-hero__bg-base {
    background-color: #ffffff;
  }

  .privacy-page__container {
    margin-top: 0;
    padding-top: 40px;
  }

  /* Hide section tabs on tablet & mobile */
  .privacy-page__nav {
    display: none;
  }
}

@media (max-width: 767px) {
  .privacy-page .privacy-about-top .about-hero__bg,
  .privacy-page .privacy-about-top .about-hero__bg-media,
  .privacy-page .privacy-about-top .about-hero-bg-tint {
    height: 180px;
    min-height: 180px;
  }

  .privacy-page__container {
    margin-top: 0;
    padding: 24px 16px 64px;
    gap: 28px;
  }

  .privacy-page__header {
    margin-bottom: 0;
    gap: 12px;
  }

  .privacy-page__updated {
    font-size: 16px;
  }

  .privacy-page__sections {
    gap: 32px;
  }

  .privacy-page__list {
    gap: 12px;
  }

  .privacy-page__list > li {
    padding-left: 24px;
  }

  .privacy-page__list > li::before {
    width: 10px;
    height: 10px;
    top: 0.5em;
  }
}

/* Sidebar Active Links */
html:not(:has(:target)) #privacy-sidebar-nav a[href="#introduction"],
html:has(#introduction:target) #privacy-sidebar-nav a[href="#introduction"],
html:has(#services-provided:target) #privacy-sidebar-nav a[href="#services-provided"],
html:has(#sla:target) #privacy-sidebar-nav a[href="#sla"],
html:has(#customer-responsibilities:target) #privacy-sidebar-nav a[href="#customer-responsibilities"],
html:has(#payment-terms:target) #privacy-sidebar-nav a[href="#payment-terms"],
html:has(#cancellation-and-refund:target) #privacy-sidebar-nav a[href="#cancellation-and-refund"],
html:has(#limitation-of-liability:target) #privacy-sidebar-nav a[href="#limitation-of-liability"],
html:has(#intellectual-property:target) #privacy-sidebar-nav a[href="#intellectual-property"],
html:has(#privacy-policy:target) #privacy-sidebar-nav a[href="#privacy-policy"],
html:has(#changes-to-terms:target) #privacy-sidebar-nav a[href="#changes-to-terms"],
html:has(#governing-law:target) #privacy-sidebar-nav a[href="#governing-law"],
html:has(#contact-information:target) #privacy-sidebar-nav a[href="#contact-information"] {
  background: #f4f4f4;
  color: #333333;
}