/* Shared responsive rhythm for every Tribe page. Loaded last on purpose. */
:root {
  --site-content-max: 1200px;
  --site-gutter: clamp(18px, 4vw, 48px);
  --section-title-size: clamp(3.25rem, 4.45vw, 4.0625rem);
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

html body .wrap {
  width: min(var(--site-content-max), calc(100% - (2 * var(--site-gutter)))) !important;
  max-width: var(--site-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

html body .wrap > *,
html body .section *,
html body .c-hero * {
  min-width: 0;
  box-sizing: border-box;
}

html body .lt-shell,
html body .lt-head,
html body .price-grid,
html body .fq2-grid,
html body .loc-grid,
html body .why-grid,
html body .culture-grid,
html body .pw-grid,
html body .sw-grid,
html body .rev-row,
html body .form-bento {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* What We Do and Service Channels use one shared card grid. */
html body #services .sw-grid,
html body #schannels .sw-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 0 !important;
  row-gap: 52px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* On desktop, both card grids span the same shell as the header pill. */
@media (min-width: 1025px) {
  html body #services > .wrap,
  html body #schannels > .wrap {
    width: min(1386px, calc(100% - (2 * var(--gutter)))) !important;
    max-width: min(1386px, calc(100% - (2 * var(--gutter)))) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body #services .sw-grid,
  html body #schannels .sw-grid {
    width: 100% !important;
    max-width: 100% !important;
  }
}

html body #services .sw-cell,
html body #schannels .sw-cell {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}

html body #services .sw-cell:nth-child(3n + 1),
html body #schannels .sw-cell:nth-child(3n + 1) {
  padding-left: 0 !important;
}

html body #approach > .approach-card,
html body #approach > .ap-card {
  width: min(var(--site-content-max), calc(100% - (2 * var(--site-gutter)))) !important;
  max-width: var(--site-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body #contact > .wrap,
html body #form > .wrap {
  width: min(var(--site-content-max), calc(100% - (2 * var(--site-gutter)))) !important;
  max-width: var(--site-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body .sec-head,
html body .sw-head,
html body .pw-head,
html body .fq2-head,
html body .lt-head {
  width: 100% !important;
  max-width: 920px !important;
}

html body .sec-head.center,
html body #services .sw-head,
html body #schannels .sw-head,
html body #process .pw-head,
html body #reviews .sec-head,
html body #pricing .pr-head,
html body .fq2-head {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  align-items: center !important;
}

/* What We Do inherits the same content measure as Service Channels. */
html body #services .sw-head,
html body #schannels .sw-head {
  width: 100% !important;
  max-width: 840px !important;
}

html body #services .sw-grid,
html body #schannels .sw-grid {
  margin-left: auto !important;
  margin-right: auto !important;
}

html body #contact .lt-head,
html body #form .lt-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto 36px !important;
  gap: 12px !important;
  text-align: center !important;
}

html body #contact .lt-h-eyebrow,
html body #contact .lt-h-title,
html body #contact .lt-h-sub,
html body #form .lt-h-eyebrow,
html body #form .lt-h-title,
html body #form .lt-h-sub {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body #contact .lt-h-sub,
html body #form .lt-h-sub {
  max-width: 58ch !important;
}

html body .c-hero h1,
html body .hero-copy h1 {
  width: 100% !important;
  max-width: 15ch !important;
  font-size: clamp(3.75rem, 7.2vw, 6.75rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.05em !important;
  text-wrap: balance;
  overflow-wrap: normal;
}

html body .section .sec-head > h2,
html body .section .sw-title,
html body .section .pw-title,
html body .section .pr-title,
html body .section .lt-h-title,
html body .section .fq2-title,
html body .section .ap-title,
html body #location .sec-head > h2,
html body #why .sec-head > h2,
html body #apply .sec-head > h2,
html body #culture .sec-head > h2,
html body[data-screen-label^="About"] #who .split h2,
html body[data-screen-label^="About"] #culture .split h2 {
  width: auto !important;
  max-width: 22ch !important;
  font-size: var(--section-title-size) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  font-weight: 800 !important;
  white-space: normal !important;
  text-wrap: balance;
  overflow-wrap: normal;
}

html body .section .sec-head > h2 span,
html body .section .sw-title span,
html body .section .pw-title span,
html body .section .pr-title span,
html body .section .lt-h-title span,
html body .section .fq2-title span,
html body .section .ap-title span,
html body #reviews .sec-head > h2 span,
html body[data-screen-label^="About"] #who .split h2 span,
html body[data-screen-label^="About"] #culture .split h2 span {
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

html body .sec-head.center > h2,
html body #services .sw-title,
html body #schannels .sw-title,
html body #process .pw-title,
html body #reviews .sec-head > h2,
html body #pricing .pr-title,
html body .lt-h-title,
html body .fq2-title {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body #approach .ap-title {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

html body .section .lt-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
}

html body .sec-head > p,
html body .sw-sub,
html body .pw-sub,
html body .fq2-sub,
html body .lt-h-sub {
  width: auto !important;
  max-width: 62ch !important;
  height: auto !important;
  font-size: clamp(0.9375rem, 1.35vw, 1.125rem) !important;
  line-height: 1.6 !important;
  text-wrap: pretty;
}

@media (max-width: 1024px) {
  :root {
    --site-gutter: clamp(22px, 4vw, 40px);
    --section-title-size: clamp(2.5rem, 5.5vw, 3.5rem);
    --responsive-shell-width: min(1386px, calc(100% - (2 * var(--gutter))));
  }

  /* Every responsive page section follows the exact outer edge of the header pill. */
  html body .site-header,
  html body .c-hero > .wrap,
  html body .section > .wrap,
  html body .section > .ap-stage {
    width: var(--responsive-shell-width) !important;
    max-width: var(--responsive-shell-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body .c-hero > .wrap,
  html body .section > .wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body #approach .ap-inner {
    width: 100% !important;
    margin-left: 0 !important;
  }

  html body .c-hero h1,
  html body .hero-copy h1 {
    max-width: 13ch !important;
    font-size: clamp(3.5rem, 9vw, 5.75rem) !important;
    font-weight: 900 !important;
  }

  html body .c-hero h1 span,
  html body .hero-copy h1 span {
    font-weight: 900 !important;
  }

  html body .section .sec-head > h2,
  html body .section .sw-title,
  html body .section .pw-title,
  html body .section .pr-title,
  html body .section .lt-h-title,
  html body .section .fq2-title,
  html body .section .ap-title,
  html body[data-screen-label^="About"] #who .split h2,
  html body[data-screen-label^="About"] #culture .split h2 {
    max-width: 20ch !important;
    font-weight: 900 !important;
  }

  html body .section .sec-head > h2 span,
  html body .section .sw-title span,
  html body .section .pw-title span,
  html body .section .pr-title span,
  html body .section .lt-h-title span,
  html body .section .fq2-title span,
  html body .section .ap-title span,
  html body[data-screen-label^="About"] #who .split h2 span,
  html body[data-screen-label^="About"] #culture .split h2 span {
    font-weight: 900 !important;
  }

  html body .section .lt-title {
    font-weight: 900 !important;
  }

  html body[data-screen-label^="About"] .section .sec-head > h2,
  html body[data-screen-label^="About"] .section .pw-title,
  html body[data-screen-label^="About"] .section .lt-h-title {
    font-size: var(--section-title-size) !important;
  }

  html body .price-grid,
  html body #pricing .price-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body #services .sw-grid,
  html body #schannels .sw-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 34px !important;
  }

  html body #services .sw-cell,
  html body #schannels .sw-cell,
  html body #services .sw-cell:nth-child(3n + 1),
  html body #schannels .sw-cell:nth-child(3n + 1) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 640px) {
  :root {
    /* The mobile header sits 12px from each viewport edge. */
    --responsive-shell-width: calc(100% - 24px);
  }
}

@media (max-width: 600px) {
  :root {
    --site-gutter: 18px;
    --section-title-size: clamp(2.125rem, 9.2vw, 2.375rem);
  }

  html body .wrap {
    width: var(--responsive-shell-width) !important;
  }

  html body #contact > .wrap,
  html body #form > .wrap {
    width: var(--responsive-shell-width) !important;
  }

  html body #contact .lt-head,
  html body #form .lt-head {
    margin-bottom: 28px !important;
  }

  html body .c-hero h1,
  html body .hero-copy h1 {
    max-width: 11ch !important;
    font-size: clamp(3.15rem, 14.5vw, 4.25rem) !important;
    line-height: 0.96 !important;
  }

  html body .section .sec-head > h2,
  html body .section .sw-title,
  html body .section .pw-title,
  html body .section .pr-title,
  html body .section .lt-h-title,
  html body .section .fq2-title,
  html body .section .ap-title,
  html body[data-screen-label^="About"] #who .split h2,
  html body[data-screen-label^="About"] #culture .split h2 {
    max-width: 16ch !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em !important;
  }

  html body .sec-head,
  html body .sw-head,
  html body .pw-head,
  html body .fq2-head,
  html body .lt-head {
    margin-bottom: 28px !important;
  }

  html body .section .lt-title {
    font-size: clamp(1.65rem, 7vw, 2rem) !important;
  }

  html body #services .sw-grid,
  html body #schannels .sw-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* WHAT WE DO: keep the complete heading at the heaviest Poppins weight. */
html body #services .sw-title,
html body #services .sw-title .acc,
html body #services .sw-title span {
  font-weight: 900 !important;
}

html body #services .sw-title .title-line {
  display: block !important;
  max-width: none !important;
  white-space: nowrap !important;
}

@media (max-width: 600px) {
  html body #services .sw-title .title-line {
    white-space: normal !important;
  }
}

/* WHAT WE DO: white elevated cards, preserving the existing type system. */
html body #services .sw-grid {
  gap: 18px !important;
  align-items: stretch !important;
}

html body #services .sw-cell,
html body #services .sw-cell:nth-child(3n + 1),
html body #services .sw-cell:first-child {
  position: relative !important;
  min-height: 100% !important;
  padding: 28px 26px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(29, 43, 63, 0.1) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease, background-color 0.3s ease !important;
}

html body #services .sw-cell::before {
  content: none !important;
  display: none !important;
}

html body #services .sw-cell:hover {
  transform: none !important;
  background: #ffffff !important;
  border-color: rgba(29, 43, 63, 0.18) !important;
  box-shadow: none !important;
}

html body #services .sw-cell h3,
html body.dark #services .sw-cell h3 {
  color: #1d2b3f !important;
}

html body #services .sw-cell p,
html body.dark #services .sw-cell p {
  color: rgba(29, 43, 63, 0.72) !important;
}

html body #services .sw-cell .when,
html body.dark #services .sw-cell .when {
  color: #1d2b3f !important;
}

html body #services .sw-cell .ic,
html body #services .sw-cell .ic svg,
html body.dark #services .sw-cell .ic,
html body.dark #services .sw-cell .ic svg {
  color: #1d2b3f !important;
  stroke: #1d2b3f !important;
}

html body #services .sw-cell:hover .ic,
html body #services .sw-cell:hover .ic svg,
html body.dark #services .sw-cell:hover .ic,
html body.dark #services .sw-cell:hover .ic svg {
  color: #7ccb5a !important;
  stroke: #7ccb5a !important;
}

@media (max-width: 600px) {
  html body #services .sw-grid {
    gap: 14px !important;
  }

  html body #services .sw-cell,
  html body #services .sw-cell:nth-child(3n + 1),
  html body #services .sw-cell:first-child {
    padding: 28px 26px !important;
    border-radius: 24px !important;
  }
}

/* Home hero: editorial split layout with a photo-led operations story. */
html body[data-screen-label^="Home"] .hero-zone .home-hero {
  min-height: auto !important;
  padding: 196px 0 76px !important;
  overflow: visible !important;
}

html body[data-screen-label^="Home"] .home-hero > .wrap {
  width: min(1386px, calc(100% - (2 * var(--gutter)))) !important;
  max-width: min(1386px, calc(100% - (2 * var(--gutter)))) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

html body[data-screen-label^="Home"] .home-hero .hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 0.82fr) minmax(560px, 1.18fr) !important;
  align-items: center !important;
  gap: clamp(44px, 5vw, 82px) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  transform: none !important;
}

html body[data-screen-label^="Home"] .home-hero .hero-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 590px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

html body[data-screen-label^="Home"] .home-hero .hero-copy .eyebrow {
  width: fit-content !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #1d2b3f !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

html body[data-screen-label^="Home"] .home-hero h1 {
  width: 100% !important;
  max-width: 9.5ch !important;
  margin: 0 !important;
  color: #1d2b3f !important;
  font-family: Poppins, sans-serif !important;
  font-size: clamp(4rem, 6.2vw, 6.4rem) !important;
  font-weight: 900 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.055em !important;
  text-wrap: balance !important;
}

html body[data-screen-label^="Home"] .home-hero h1 span {
  color: #73bd57 !important;
  font-weight: 900 !important;
}

html body[data-screen-label^="Home"] .home-hero .intro {
  width: 100% !important;
  max-width: 48ch !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  color: rgba(29, 43, 63, 0.74) !important;
  font-family: Manrope, sans-serif !important;
  font-size: clamp(1rem, 1.25vw, 1.16rem) !important;
  line-height: 1.65 !important;
}

html body[data-screen-label^="Home"] .home-hero .hero-actions {
  justify-content: flex-start !important;
  margin-top: 34px !important;
}

html body[data-screen-label^="Home"] .home-hero .hero-visual {
  position: relative !important;
  width: calc(100% - 76px) !important;
  min-height: 620px !important;
  border-radius: 52px !important;
  overflow: visible !important;
  justify-self: end !important;
  isolation: isolate;
}

html body[data-screen-label^="Home"] .home-hero .hero-visual > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: inherit !important;
}

html body[data-screen-label^="Home"] .home-hero .hero-callout {
  position: absolute !important;
  z-index: 2 !important;
  width: min(330px, 48%) !important;
  padding: 27px 28px 26px !important;
  border: 0 !important;
  border-radius: 30px !important;
  box-shadow: none !important;
}

html body[data-screen-label^="Home"] .home-hero .hero-callout h2 {
  margin: 0 !important;
  color: #1d2b3f !important;
  font-family: Poppins, sans-serif !important;
  font-size: clamp(1.25rem, 1.8vw, 1.65rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance !important;
}

html body[data-screen-label^="Home"] .home-hero .hero-callout p {
  margin: 13px 0 0 !important;
  color: rgba(29, 43, 63, 0.66) !important;
  font-family: Manrope, sans-serif !important;
  font-size: clamp(0.9rem, 1.15vw, 1.05rem) !important;
  line-height: 1.5 !important;
}

html body[data-screen-label^="Home"] .home-hero .hero-callout-top {
  top: 34px !important;
  left: -30px !important;
  background: #a9e390 !important;
  transform: scale(0.95) !important;
  transform-origin: top left !important;
}

html body[data-screen-label^="Home"] .home-hero .hero-callout-bottom {
  right: -34px !important;
  bottom: 34px !important;
  background: #ffffff !important;
  transform: scale(0.95) !important;
  transform-origin: bottom right !important;
}

html body[data-screen-label^="Home"] .home-hero .hero-stats {
  grid-column: 1 / -1 !important;
  margin-top: 4px !important;
}

html body.dark[data-screen-label^="Home"] .home-hero .hero-copy .eyebrow,
html body.dark[data-screen-label^="Home"] .home-hero h1 {
  color: #ffffff !important;
}

html body.dark[data-screen-label^="Home"] .home-hero .intro {
  color: rgba(255, 255, 255, 0.74) !important;
}

@media (max-width: 1180px) {
  html body[data-screen-label^="Home"] .home-hero .hero-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr) !important;
    gap: 46px !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-visual {
    width: calc(100% - 52px) !important;
    min-height: 550px !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-callout {
    width: min(285px, 52%) !important;
    padding: 23px 24px !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-callout-top {
    left: -18px !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-callout-bottom {
    right: -18px !important;
  }
}

@media (max-width: 900px) {
  html body[data-screen-label^="Home"] .hero-zone .home-hero {
    padding: 166px 0 66px !important;
  }

  html body[data-screen-label^="Home"] .hero-zone .home-hero > .wrap {
    width: var(--responsive-shell-width) !important;
    max-width: var(--responsive-shell-width) !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 42px !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-copy {
    align-items: center !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-copy .eyebrow {
    margin: 0 auto 20px !important;
  }

  html body[data-screen-label^="Home"] .home-hero h1 {
    max-width: 11ch !important;
    font-size: clamp(3.55rem, 10.5vw, 5.6rem) !important;
  }

  html body[data-screen-label^="Home"] .home-hero .intro {
    margin: 22px auto 0 !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-actions {
    justify-content: center !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-visual {
    width: 100% !important;
    min-height: 570px !important;
    border-radius: 42px !important;
    justify-self: stretch !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-callout-top {
    left: 18px !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-callout-bottom {
    right: 18px !important;
  }
}

@media (max-width: 600px) {
  html body[data-screen-label^="Home"] .hero-zone .home-hero {
    padding: 148px 0 54px !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-grid {
    gap: 32px !important;
  }

  html body[data-screen-label^="Home"] .home-hero h1 {
    max-width: 10ch !important;
    font-size: clamp(3.1rem, 14vw, 4.25rem) !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-actions {
    width: 100% !important;
    margin-top: 28px !important;
    align-items: center !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-actions > a {
    width: min(250px, calc(100% - 36px)) !important;
    justify-content: center !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-visual {
    min-height: 520px !important;
    border-radius: 32px !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-visual > img {
    object-position: center center !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-callout {
    width: min(270px, calc(100% - 34px)) !important;
    padding: 19px 20px !important;
    border-radius: 23px !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-callout h2 {
    font-size: 1.18rem !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-callout p {
    margin-top: 8px !important;
    font-size: 0.88rem !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-callout-top {
    top: 16px !important;
    left: 10px !important;
  }

  html body[data-screen-label^="Home"] .home-hero .hero-callout-bottom {
    right: 10px !important;
    bottom: 16px !important;
  }

html body[data-screen-label^="Home"] .home-hero .hero-stats .hs:last-child {
    grid-column: 1 / -1 !important;
  }
}

/* WHAT WE DO: translucent cards with a cursor-tracked green glow. */
html body #services .sw-cell,
html body #services .sw-cell:nth-child(3n + 1),
html body #services .sw-cell:first-child {
  background: rgba(255, 255, 255, 0.58) !important;
  border-color: rgba(29, 43, 63, 0.11) !important;
  -webkit-backdrop-filter: blur(12px) saturate(115%) !important;
  backdrop-filter: blur(12px) saturate(115%) !important;
}

@media (hover: hover) and (pointer: fine) {
  html body #services .sw-cell:hover {
    background:
      radial-gradient(
        240px circle at var(--card-pointer-x, 50%) var(--card-pointer-y, 50%),
        rgba(169, 227, 144, 0.3) 0%,
        rgba(169, 227, 144, 0.13) 38%,
        rgba(255, 255, 255, 0) 72%
      ),
      rgba(255, 255, 255, 0.58) !important;
    border-color: rgba(124, 203, 90, 0.34) !important;
  }
}

html body.dark #services .sw-cell,
html body.dark #services .sw-cell:nth-child(3n + 1),
html body.dark #services .sw-cell:first-child {
  background: rgba(255, 255, 255, 0.72) !important;
}

@media (hover: hover) and (pointer: fine) {
  html body.dark #services .sw-cell:hover {
    background:
      radial-gradient(
        240px circle at var(--card-pointer-x, 50%) var(--card-pointer-y, 50%),
        rgba(169, 227, 144, 0.34) 0%,
        rgba(169, 227, 144, 0.14) 38%,
        rgba(255, 255, 255, 0) 72%
      ),
      rgba(255, 255, 255, 0.72) !important;
  }
}

/* SERVICE CHANNELS: portrait-led split layout and glass service cards. */
html body #schannels .sw-title,
html body #schannels .sw-title .acc,
html body #schannels .sw-title span {
  font-weight: 900 !important;
}

html body #schannels .sw-head {
  max-width: 1080px !important;
}

html body #schannels .sw-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

html body #schannels .sw-cell,
html body #schannels .sw-cell:nth-child(3n + 1),
html body #schannels .sw-cell:first-child {
  position: relative !important;
  min-height: 100% !important;
  padding: 26px 24px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(29, 43, 63, 0.11) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-backdrop-filter: blur(12px) saturate(115%) !important;
  backdrop-filter: blur(12px) saturate(115%) !important;
  transition: border-color 0.3s ease, background-color 0.3s ease !important;
}

html body #schannels .sw-cell h3,
html body.dark #schannels .sw-cell h3,
html body #schannels .sw-cell .when,
html body.dark #schannels .sw-cell .when {
  color: #1d2b3f !important;
}

html body #schannels .sw-cell p,
html body.dark #schannels .sw-cell p {
  color: rgba(29, 43, 63, 0.72) !important;
}

html body #schannels .sw-cell .ic,
html body #schannels .sw-cell .ic svg,
html body.dark #schannels .sw-cell .ic,
html body.dark #schannels .sw-cell .ic svg {
  color: #1d2b3f !important;
  stroke: #1d2b3f !important;
}

@media (hover: hover) and (pointer: fine) {
  html body #schannels .sw-cell:not(.sw-ai):hover {
    background:
      radial-gradient(
        220px circle at var(--card-pointer-x, 50%) var(--card-pointer-y, 50%),
        rgba(169, 227, 144, 0.28) 0%,
        rgba(169, 227, 144, 0.11) 40%,
        rgba(255, 255, 255, 0) 72%
      ),
      rgba(255, 255, 255, 0.62) !important;
    border-color: rgba(124, 203, 90, 0.34) !important;
    transform: none !important;
  }
}

html body #schannels .sw-cell.sw-ai,
html body.dark #schannels .sw-cell.sw-ai {
  isolation: isolate !important;
  background: #1d2b3f !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  animation: none !important;
}

html body #schannels .sw-cell.sw-ai::before {
  content: none !important;
  display: none !important;
}

html body #schannels .sw-cell.sw-ai::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  z-index: 0 !important;
  border-radius: 24px !important;
  pointer-events: none !important;
  background: linear-gradient(120deg, #22d3ee, #a855f7, #f472b6, #fde047, #4ade80, #22d3ee) !important;
  background-size: 220% 220% !important;
  animation: sw-ai-hue 14s ease-in-out infinite !important;
  -webkit-mask: url('assets/ai-dots-mask.png') center / cover no-repeat,
    linear-gradient(180deg, transparent 0, transparent 25%, #000 45%, #000 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask: url('assets/ai-dots-mask.png') center / cover no-repeat,
    linear-gradient(180deg, transparent 0, transparent 25%, #000 45%, #000 100%) !important;
  mask-composite: intersect !important;
  opacity: 0.9 !important;
}

html body #schannels .sw-cell.sw-ai > * {
  position: relative !important;
  z-index: 1 !important;
}

html body #schannels .sw-cell.sw-ai h3,
html body.dark #schannels .sw-cell.sw-ai h3 {
  color: #ffffff !important;
}

html body #schannels .sw-cell.sw-ai p,
html body.dark #schannels .sw-cell.sw-ai p {
  color: rgba(255, 255, 255, 0.72) !important;
}

html body #schannels .sw-cell.sw-ai .when,
html body.dark #schannels .sw-cell.sw-ai .when,
html body #schannels .sw-cell.sw-ai .ic,
html body #schannels .sw-cell.sw-ai .ic svg,
html body.dark #schannels .sw-cell.sw-ai .ic,
html body.dark #schannels .sw-cell.sw-ai .ic svg {
  color: #a9e390 !important;
  stroke: #a9e390 !important;
}

html body #schannels .sw-cell.sw-ai:hover {
  transform: none !important;
  filter: none !important;
}

@media (max-width: 980px) {
  html body #schannels .sw-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  html body #schannels .sw-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
}

/* Section-title emphasis requested for the home page. */
html body #services .sw-head h2.sw-title span.acc,
html body #schannels .sw-title .acc,
html body.dark #services .sw-head h2.sw-title span.acc,
html body.dark #schannels .sw-title .acc {
  color: #1d2b3f !important;
}

html body #pricing .pr-title,
html body #pricing .pr-title *,
html body .lt-h-title,
html body .lt-h-title *,
html body .fq2-title,
html body .fq2-title * {
  font-weight: 900 !important;
}

/* Responsive hero: stack the green callout above the white card. */
@media (max-width: 900px) {
  html body[data-screen-label^="Home"] .home-hero .hero-callout-top {
    top: auto !important;
    right: auto !important;
    bottom: 196px !important;
    left: 18px !important;
    transform-origin: bottom left !important;
  }
}

@media (max-width: 600px) {
  html body[data-screen-label^="Home"] .home-hero .hero-callout-top {
    top: auto !important;
    right: auto !important;
    bottom: 158px !important;
    left: 10px !important;
  }
}

/* SERVICE CHANNELS: use the textured navy surface from the PRICING panel. */
html body #schannels .sw-cell,
html body #schannels .sw-cell:nth-child(3n + 1),
html body #schannels .sw-cell:first-child,
html body #schannels .sw-cell.sw-ai,
html body.dark #schannels .sw-cell,
html body.dark #schannels .sw-cell.sw-ai {
  background:
    linear-gradient(180deg, rgba(15, 27, 41, 0.18), rgba(15, 27, 41, 0.03) 40%, rgba(15, 27, 41, 0.12) 70%, rgba(15, 27, 41, 0.3)),
    url('assets/process-wall-topo.png') center / cover no-repeat,
    #1d2b3f !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

html body #schannels .sw-grid .sw-cell h3,
html body.dark #schannels .sw-grid .sw-cell h3,
html body #schannels .sw-grid .sw-cell .when,
html body.dark #schannels .sw-grid .sw-cell .when {
  color: #ffffff !important;
}

html body #schannels .sw-grid .sw-cell p,
html body.dark #schannels .sw-grid .sw-cell p {
  color: rgba(255, 255, 255, 0.82) !important;
}

html body #schannels .sw-cell .when,
html body.dark #schannels .sw-cell .when,
html body #schannels .sw-cell .ic,
html body #schannels .sw-cell .ic svg,
html body.dark #schannels .sw-cell .ic,
html body.dark #schannels .sw-cell .ic svg {
  color: #a9e390 !important;
  stroke: #a9e390 !important;
}

@media (hover: hover) and (pointer: fine) {
  html body #schannels .sw-grid .sw-cell:not(.sw-ai):hover {
    background:
      radial-gradient(
        220px circle at var(--card-pointer-x, 50%) var(--card-pointer-y, 50%),
        rgba(169, 227, 144, 0.18) 0%,
        rgba(169, 227, 144, 0.06) 42%,
        transparent 72%
      ),
      linear-gradient(180deg, rgba(15, 27, 41, 0.18), rgba(15, 27, 41, 0.03) 40%, rgba(15, 27, 41, 0.12) 70%, rgba(15, 27, 41, 0.3)),
      url('assets/process-wall-topo.png') center / cover no-repeat,
      #1d2b3f !important;
    border-color: rgba(169, 227, 144, 0.34) !important;
  }
}

/* Lock SERVICE CHANNELS icons to the requested base green. */
html body:not(.dark) #schannels .sw-grid .sw-cell .ic,
html body:not(.dark) #schannels .sw-grid .sw-cell .ic svg,
html body:not(.dark) #schannels .sw-grid .sw-cell .ic svg *,
html body.dark #schannels .sw-grid .sw-cell .ic,
html body.dark #schannels .sw-grid .sw-cell .ic svg,
html body.dark #schannels .sw-grid .sw-cell .ic svg *,
html body #schannels .sw-grid .sw-cell:hover .ic,
html body #schannels .sw-grid .sw-cell:hover .ic svg,
html body #schannels .sw-grid .sw-cell:hover .ic svg * {
  color: #a9e390 !important;
  stroke: #a9e390 !important;
}

/* Consistent compact compliance badges across every responsive page. */
@media (max-width: 760px) {
  html body .site-footer .comp-strip {
    gap: 14px !important;
    align-items: flex-start !important;
  }

  html body .site-footer .comp-strip > img {
    width: auto !important;
    height: 60px !important;
    max-width: 350px !important;
    object-fit: contain !important;
  }
}

/* Unified button labels: no inline arrows and navy text across every theme. */
html body :is(.btn-pill,.btn-ghost,.pilot-primary,.pilot-secondary,.ap-cta,.pr-bar-cta,.rev-cta,.fq2-link,.send-req-btn,.rc-submit,.rc-success-close,.tv-lead-submit,.tv-start,.tv-stop),
html body :is(.btn-pill,.btn-ghost,.pilot-primary,.pilot-secondary,.ap-cta,.pr-bar-cta,.rev-cta,.fq2-link,.send-req-btn,.rc-submit,.rc-success-close,.tv-lead-submit,.tv-start,.tv-stop) * {
  color:#1D2B3F !important;
}
html body :is(.btn-pill,.btn-ghost,.pilot-primary,.pilot-secondary,.ap-cta,.pr-bar-cta,.rev-cta,.fq2-link,.send-req-btn,.rc-submit,.rc-success-close,.tv-lead-submit,.tv-start,.tv-stop) .ar,
html body :is(.btn-pill,.btn-ghost,.pilot-primary,.pilot-secondary,.ap-cta,.pr-bar-cta,.rev-cta,.fq2-link,.send-req-btn,.rc-submit,.rc-success-close,.tv-lead-submit,.tv-start,.tv-stop) > span[aria-hidden="true"] {
  display:none !important;
}
html body button:not(.theme-btn):not(.tv-close):not(.rc-close),
html body button:not(.theme-btn):not(.tv-close):not(.rc-close) * {
  color:#1D2B3F !important;
}
html body button:not(.theme-btn):not(.tv-close):not(.rc-close) .ar,
html body button:not(.theme-btn):not(.tv-close):not(.rc-close) > span[aria-hidden="true"] {
  display:none !important;
}

/* Match the AI Assistant bubble's animated multicolor dot treatment. */
html body #schannels .sw-cell.sw-ai::after,
html body .lt-cards a.lt-ai::after,
html body .tv-dialog::before {
  animation:tv-fab-hue 12s ease-in-out infinite !important;
  opacity:1 !important;
  background-size:220% 220% !important;
  -webkit-mask:url('assets/ai-dots-mask.png') center/cover no-repeat !important;
  mask:url('assets/ai-dots-mask.png') center/cover no-repeat !important;
}

/* Keep the floating AI Agent label readable over its animated wallpaper. */
html body button.tv-fab:not(.theme-btn):not(.tv-close):not(.rc-close),
html body button.tv-fab:not(.theme-btn):not(.tv-close):not(.rc-close) * {
  color:#fff !important;
}

/* AI + Human Support mirrors the AI Agent bubble's animated wallpaper. */
html body #schannels .sw-cell.sw-ai {
  background:#1D2B3F !important;
  isolation:isolate !important;
  overflow:hidden !important;
}
html body #schannels .sw-cell.sw-ai::after {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  border-radius:inherit !important;
  background:linear-gradient(120deg,#22D3EE,#A855F7,#F472B6,#FDE047,#4ADE80,#22D3EE) !important;
  background-size:220% 220% !important;
  -webkit-mask:url('assets/ai-dots-mask.png') center/cover no-repeat !important;
  mask:url('assets/ai-dots-mask.png') center/cover no-repeat !important;
  opacity:.78 !important;
  pointer-events:none !important;
  animation:tv-fab-hue 12s ease-in-out infinite, ai-card-color-cycle 6s ease-in-out infinite !important;
}

/* Hue rotation makes the color shift perceptible even on masked dot layers. */
@keyframes ai-card-color-cycle {
  0%,100% { filter:hue-rotate(0deg) saturate(1); }
  50% { filter:hue-rotate(180deg) saturate(1.25); }
}