/* Contextual line artwork and tactile icon badges for the public site. */
.site-meaning-card:not(.has-brand-art),
.site-meaning-section:not(.has-brand-atmosphere) {
  position: relative;
  isolation: isolate;
}

/* The shared atmosphere layer supplies one large authentic cube behind the
   hero, avoiding a second small cube over the contextual heading badges. */
.page-hero.site-meaning-section > .ambient-brand-cube-scene {
  display: none;
}

.site-meaning-section > .brand-atmosphere-layer > .meaning-motif {
  width: clamp(190px, 31vw, 420px);
  height: clamp(190px, 31vw, 420px);
  inset: auto max(2%, calc((100vw - 1320px) / 2)) 6% auto;
  color: var(--cb-brand-700, #0b5a42);
  opacity: .065;
  transform: rotate(-8deg);
  transition: opacity 240ms ease, transform 300ms ease;
}

.site-meaning-section.is-brand-dark > .brand-atmosphere-layer > .meaning-motif {
  color: var(--cb-accent, #c8f36e);
  opacity: .075;
}

.site-meaning-card > .brand-atmosphere-layer > .meaning-motif {
  width: clamp(140px, 17vw, 230px);
  height: clamp(140px, 17vw, 230px);
  inset: auto -18px -18px auto;
  color: var(--cb-brand-700, #0b5a42);
  opacity: .04;
  transform: rotate(-9deg);
  transition: opacity 240ms ease, transform 300ms ease;
}

.section-dark .site-meaning-card > .brand-atmosphere-layer > .meaning-motif,
.site-meaning-card.is-featured > .brand-atmosphere-layer > .meaning-motif {
  color: var(--cb-accent, #c8f36e);
  opacity: .07;
}

.site-meaning-card .site-card-icon {
  display: grid;
  position: relative;
  width: 46px;
  height: 46px;
  min-width: 46px;
  margin: 0 0 17px;
  padding: 10px;
  color: var(--cb-brand-800, #084734);
  border: 1px solid rgba(8, 71, 52, .16);
  border-radius: 13px;
  background: linear-gradient(145deg, #f9fff0, #e7f5ce);
  box-shadow: inset 0 1px 0 #fff, 0 5px 0 rgba(8, 71, 52, .045);
  font-size: inherit;
  letter-spacing: normal;
  line-height: 1;
  transform: none;
}

.section-dark .site-meaning-card .site-card-icon,
.site-meaning-card.is-featured .site-card-icon {
  color: var(--cb-accent, #c8f36e);
  border-color: rgba(200, 243, 110, .24);
  background: linear-gradient(145deg, rgba(200, 243, 110, .14), rgba(200, 243, 110, .035));
  box-shadow: inset 0 1px 0 rgba(247, 255, 242, .12), 0 5px 0 rgba(0, 0, 0, .08);
}

.site-meaning-media-card .site-card-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 8px;
  margin-block: 12px;
  border-radius: 10px;
}

.service-tile .service-icon.has-semantic-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.service-icon .site-service-icon {
  display: grid;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  color: inherit;
  border: 0;
  background: none;
  box-shadow: none;
}

.service-detail-icon.has-semantic-icon {
  display: grid;
  place-items: center;
  min-height: 240px;
}

.service-detail-icon .site-service-hero-icon {
  width: clamp(130px, 14vw, 210px);
  height: clamp(130px, 14vw, 210px);
  color: var(--cb-brand-800, #084734);
}

.has-meaning-heading > .site-heading-icon {
  display: inline-grid;
  width: 27px;
  height: 27px;
  margin: 0 10px 0 0;
  vertical-align: -8px;
  padding: 4px;
  border: 1px solid currentColor;
  border-radius: 8px;
  opacity: .9;
  color: inherit;
}

.results-wall .stat-card .site-stat-icon {
  display: inline-grid;
  width: 22px;
  height: 22px;
  margin: 0 7px 0 0;
  vertical-align: -6px;
  color: inherit;
}

.site-meaning-tab.has-meaning-heading,
.contact-points .has-meaning-heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
}

.contact-points .has-meaning-heading {
  justify-content: flex-start;
}

.site-meaning-tab .site-tab-icon,
.contact-points .site-contact-icon {
  display: inline-grid;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin: 0;
  padding: 0;
  color: inherit;
}

.showcase-filter-tabs a.site-meaning-tab:focus-visible,
.ba-tabs button.site-meaning-tab:focus-visible {
  outline: 2px solid var(--cb-focus, #236b51);
  outline-offset: 4px;
}

.ba-tabs button.site-meaning-tab.is-active {
  background: var(--cb-brand-800, #084734);
  color: var(--cb-on-brand, #f7fff2);
  box-shadow: 0 5px 14px rgba(8, 71, 52, .15);
}

.ba-tabs button.site-meaning-tab.is-active .site-tab-icon {
  color: var(--cb-accent, #c8f36e);
}

.site-meaning-card:focus-within > .brand-atmosphere-layer > .meaning-motif {
  opacity: .09;
  transform: rotate(-3deg) translate3d(-4px, -4px, 0);
}

@media (hover: hover) and (pointer: fine) {
  .site-meaning-section:hover > .brand-atmosphere-layer > .meaning-motif { opacity: .09; }
  .site-meaning-card:hover > .brand-atmosphere-layer > .meaning-motif {
    opacity: .1;
    transform: rotate(-3deg) translate3d(-4px, -4px, 0);
  }
  .section-dark .site-meaning-card:hover > .brand-atmosphere-layer > .meaning-motif,
  .site-meaning-card.is-featured:hover > .brand-atmosphere-layer > .meaning-motif { opacity: .11; }
}

@media (max-width: 600px) {
  .site-meaning-section > .brand-atmosphere-layer > .meaning-motif {
    width: 190px;
    height: 190px;
    right: -32px;
    bottom: 18px;
    opacity: .045;
  }
  .site-meaning-card > .brand-atmosphere-layer > .meaning-motif { width: 150px; height: 150px; }
  .ba-tabs .site-meaning-tab { gap: 6px; padding-inline: 10px; font-size: 14px; }
  .ba-tabs .site-tab-icon { width: 17px; height: 17px; flex-basis: 17px; }
}

html:not(.meaning-motion-enabled) .site-meaning-card > .brand-atmosphere-layer > .meaning-motif,
html:not(.meaning-motion-enabled) .site-meaning-section > .brand-atmosphere-layer > .meaning-motif {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-meaning-card > .brand-atmosphere-layer > .meaning-motif,
  .site-meaning-section > .brand-atmosphere-layer > .meaning-motif {
    transform: none !important;
    transition: none;
  }
}

@media print {
  .site-card-icon, .site-heading-icon, .site-stat-icon, .site-tab-icon, .site-contact-icon { display: none !important; }
}

/* A more readable public UI, using the site's existing typefaces. Keep the
   scale on content and controls rather than the decorative media overlays. */
#main .section-lede,
#main .section-heading > p:not(.eyebrow),
#main .page-hero .container > p:not(.eyebrow),
#main .contact-hero .two-col > div > p:not(.eyebrow),
#main .mission-vision-copy > p:not(.eyebrow),
#main .final-cta-card > div > p:not(.eyebrow) {
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.7;
}

#main :is(.service-tile, .pricing-card, .mission-card, .detail-card,
  .service-outcome-card, .values-grid article, .story-steps > div,
  .process-list > div, .case-content, .showcase-card-body,
  .blog-card) > p:not(.eyebrow):not(.showcase-card-kicker),
#main .ba-panel li,
#main .pricing-card li,
#main .faq-list details > p,
#main .contact-meta p,
#main .product-summary {
  font-size: 17px;
  line-height: 1.7;
}

#main .eyebrow,
#main .service-tile > span:not(.brand-atmosphere-layer),
#main .case-content > span,
#main .mission-card-index small,
#main .stat-card > span:not(.brand-atmosphere-layer) {
  font-size: 14px;
  line-height: 1.55;
}

#main .showcase-card-kicker { font-size: 16px; }
#main .showcase-mini-content > p { font-size: 14px; }

.primary-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  font-size: 15px;
}

#main .service-tile :is(h2, h3) {
  font-size: clamp(27px, 2.35vw, 34px);
  line-height: 1.18;
}

#main .btn {
  min-height: 50px;
  padding: 13px 22px;
  font-size: 16px;
  line-height: 1.5;
  white-space: normal;
  text-align: center;
  touch-action: manipulation;
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1);
}

#main .service-tile > a,
#main .case-content > a,
#main .blog-card > a,
#main .showcase-actions > a,
#main .showcase-mini-actions > a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding-block: 9px;
  font-size: 16px;
  line-height: 1.5;
  text-underline-offset: 5px;
  touch-action: manipulation;
}

#main .contact-points a {
  min-height: 48px;
  font-size: 17px;
  overflow-wrap: anywhere;
  text-underline-offset: 5px;
  touch-action: manipulation;
}

#main .contact-form label,
#main .showcase-filter-form label {
  font-size: 16px;
  line-height: 1.6;
}

#main .contact-form :is(input:not([type="hidden"]), select, textarea),
#main .showcase-filter-form :is(input, select) {
  min-height: 50px;
  padding: 13px 14px;
  font-size: 16px;
  line-height: 1.5;
}

#main .site-meaning-tab {
  min-height: 48px;
  padding: 11px 16px;
  font-size: 16px;
  line-height: 1.45;
  white-space: normal;
  touch-action: manipulation;
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1);
}

#main .ba-tabs {
  gap: 8px;
}

#main .site-meaning-tab:is(.is-active, [aria-current="page"]) {
  box-shadow: inset 0 -3px 0 var(--cb-accent, #c8f36e), 0 5px 14px rgba(8, 71, 52, .12);
}

#main :is(a, button, summary):focus-visible {
  outline: 3px solid var(--cb-focus, #236b51);
  outline-offset: 5px;
}

#main .section-dark :is(a, button, summary):focus-visible,
#main .final-cta :is(a, button):focus-visible {
  outline-color: var(--cb-accent, #c8f36e);
}

#main .site-meaning-card :is(.site-card-icon, .service-icon) {
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}

html.meaning-motion-enabled #main .site-meaning-card:focus-within :is(.site-card-icon, .service-icon) {
  transform: translate3d(0, -4px, 0) rotate(-3deg);
}

html.meaning-motion-enabled #main :is(.btn, .site-meaning-tab):active {
  transform: scale(.98);
  transition-duration: 90ms;
}

@media (hover: hover) and (pointer: fine) {
  #main :is(.service-tile > a, .case-content > a, .blog-card > a, .contact-points a):hover {
    text-decoration: underline;
  }

  html.meaning-motion-enabled #main .site-meaning-card:hover :is(.site-card-icon, .service-icon) {
    transform: translate3d(0, -4px, 0) rotate(-3deg);
  }

  html.meaning-motion-enabled #main .site-meaning-tab:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 600px) {
  #main .service-tile { padding: 24px; }
  #main .site-meaning-tab { padding-inline: 12px; }
  #main .ba-tabs .site-meaning-tab { flex: 1 1 0; min-width: 0; padding-inline: 8px; font-size: 14px; }
  #main .showcase-actions { flex-wrap: wrap; }
  #main .contact-form { padding: 22px; }
}

html:not(.meaning-motion-enabled) #main :is(.btn, .site-meaning-tab),
html:not(.meaning-motion-enabled) #main .site-meaning-card :is(.site-card-icon, .service-icon) {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  #main :is(.btn, .site-meaning-tab),
  #main .site-meaning-card :is(.site-card-icon, .service-icon) {
    transform: none !important;
    transition: none;
  }
}