/* Commosieur additions on top of the Webflow design language.
   Uses the existing palette: charcoal surfaces + cream/pale-yellow accent (#f5e6a3). */

.hero-search {
  margin: 24px auto 28px;
  max-width: 560px;
}

.hero-search .text-field,
.navbar_search .text-field {
  background-color: #0000;
  border: 1px solid #f5e6a355;
  border-radius: 999px;
  color: inherit;
  height: auto;
  margin-bottom: 0;
  padding: 14px 22px;
  text-align: center;
}

.hero-search .text-field:focus,
.navbar_search .text-field:focus {
  border-color: #f5e6a3;
  outline: none;
}

.navbar_search {
  margin: 0 0 0 12px;
  max-width: 190px;
}

.navbar_search .text-field {
  font-size: 13px;
  padding: 8px 16px;
  text-align: left;
}

.interest-cloud {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin: 24px 0 32px;
}

.interest-cloud .interest-word {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}

.interest-cloud .interest-word:hover {
  color: #f5e6a3;
}

.interest-cloud .interest-word.quiet {
  letter-spacing: .12em;
  opacity: .55;
}

/* Shared chrome for the React product pages so they read as more pages of this site. */
.cm-page {
  background-color: #0b091b;
  color: #f6f9f2;
  min-height: 100vh;
}

.cm-section {
  padding: 80px 0;
}

.cm-eyebrow {
  color: #f5e6a3;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.cm-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.cm-list li {
  border-top: 1px solid #ffffff1f;
  padding: 22px 0;
}

.cm-list a {
  color: inherit;
  text-decoration: none;
}

.cm-list a:hover {
  color: #f5e6a3;
}

.cm-input,
.cm-textarea {
  background-color: #0000;
  border: 1px solid #ffffff33;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  padding: 12px 16px;
  width: 100%;
}

.cm-input:focus,
.cm-textarea:focus {
  border-color: #f5e6a3;
  outline: none;
}

.cm-muted {
  opacity: .7;
}

/* Nav labels must not wrap: the hover duplicate is absolutely positioned. */
.navbar_text {
  white-space: nowrap;
}

.navbar_search {
  max-width: 220px;
  width: 220px;
}

/* React product pages: container gutters + no default link underline. */
.cm-page .container.cm-section {
  max-width: 1200px;
  padding-left: 24px;
  padding-right: 24px;
}

.cm-page a {
  text-decoration: none;
}

.cm-page main a:hover {
  color: #f5e6a3;
}

.interest-cloud .cloud-break {
  flex-basis: 100%;
  height: 0;
}

/* Engine: a quiet horizontal rule of steps, existing type scale. */
.cm-engine {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: center;
  margin: 40px 0 28px;
}

.cm-engine-arrow {
  opacity: .45;
}

.cm-engine-line {
  margin: 0 auto;
  max-width: 780px;
  opacity: .75;
}

/* Numbered collectives directory: thin rules, no cards. */
.cm-index {
  border-top: 1px solid currentColor;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

.cm-index-row {
  border-bottom: 1px solid #8080804d;
}

.cm-index-link {
  align-items: baseline;
  color: inherit;
  display: grid;
  gap: 6px 28px;
  grid-template-columns: 4rem minmax(7rem, 12rem) 1fr auto;
  padding: 22px 0;
  text-decoration: none;
  transition: color .2s;
}

.cm-index-link:hover {
  color: #f5e6a3;
}

.cm-index-num,
.cm-index-day {
  font-size: 12px;
  letter-spacing: .16em;
  opacity: .65;
}

.cm-index-name {
  font-size: 26px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.cm-index-q {
  font-size: 17px;
  opacity: .8;
}

@media (max-width: 767px) {
  .cm-index-link {
    grid-template-columns: 3.2rem 1fr;
  }
  .cm-index-q,
  .cm-index-day {
    grid-column: 2;
  }
}

/* Hero curiosity input carries the page: wide, cream underline. */
.hero-search {
  max-width: 720px;
}

.hero-search .text-field {
  border: 0;
  border-bottom: 2px solid #f5e6a3;
  border-radius: 0;
  font-size: 22px;
  padding: 16px 4px;
}

/* Engine panel sits on the cream surface: keep type dark and stacked. */
#engine .cm-engine-head,
#engine .cm-engine,
#engine .cm-engine-line,
#engine .u-heading-style-h2 {
  color: #14121f;
}

#engine .cm-engine-eyebrow {
  letter-spacing: .18em;
  margin: 0 0 14px;
  opacity: .6;
}

#engine .u-heading-style-h2 {
  margin: 0;
}

#engine .cm-engine-head {
  align-items: center;
  display: flex;
  flex-direction: column;
}

/* React homepage marquee: webflow.js IX does not run on app routes. */
.cm-marquee {
  animation: cm-marquee-scroll 28s linear infinite;
  display: flex;
  gap: 40px;
  white-space: nowrap;
  will-change: transform;
}

@keyframes cm-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-33.33%, 0, 0); }
}

.cm-engine-step-wrap {
  align-items: baseline;
  display: inline-flex;
  gap: 20px;
}

/* Interest marquee band: reuse the Webflow marquee, drop the 300vh sticky rig. */
.cm-marquee-area {
  background-color: #14121f;
  height: auto;
  min-height: 0;
  overflow: hidden;
  padding: 96px 0;
}

.cm-marquee-area .service-sticky-main {
  height: auto;
  min-height: 0;
  position: static;
}

.cm-marquee-area .service-marquee {
  display: none;
}

.cm-marquee-area .marquee-title {
  color: #f5e6a3;
}

/* Static Webflow homepage: preserve the framed mosaic without the 280vh IX
   spacer that made every following section look absent in the preview. */
body > .page-wrap .section_header .header_component {
  height: min(920px, 100svh);
  min-height: 720px;
  margin-bottom: 0;
}

body > .page-wrap .section_header .header_content-wrapper {
  height: 100%;
  position: relative;
}

body > .page-wrap,
body > .page-wrap .main-wrap,
body > .page-wrap .section_header,
body > .page-wrap .cm-interest-marquee,
body > .page-wrap .about-area,
body > .page-wrap .project-area {
  background-color: #14121f;
}

body > .page-wrap .section_header .header_background-images {
  z-index: 0;
}

body > .page-wrap .section_header .header_image-overlay {
  z-index: 1;
  background-color: rgba(20, 18, 31, 0.5);
}

body > .page-wrap .section_header .header_content {
  z-index: 2;
  opacity: 1 !important;
  position: relative;
}

body > .page-wrap .section_header .header_images-layout {
  transform: scale(1) !important;
}

body > .page-wrap .section_header .header_image-wrapper {
  min-height: 0;
}

body > .page-wrap .section_header .header_ix-trigger {
  display: none;
}

.cm-interest-marquee,
.cm-engine-service {
  height: auto;
  min-height: 0;
  padding: 110px 0;
}

.cm-interest-marquee .service-sticky-main {
  height: auto;
  min-height: 0;
  padding: 28px 0 70px;
  position: relative;
}

.cm-interest-marquee .marquee-title {
  color: #f5e6a3;
}

.cm-interest-links {
  justify-content: center;
  margin-bottom: 0;
}

.cm-interest-links .interest-word,
.about-area .breadcrubms,
.about-area .heading-three,
.about-area .cm-index-link,
.project-area .heading-three,
.project-area .section-content-sm,
.project-area .cm-index-link {
  color: #f6f9f2;
}

.about-area .cm-index-row,
.project-area .cm-index-row {
  border-color: rgba(246, 249, 242, 0.28);
}

.cm-rabbit-list {
  margin-top: 0;
}

.cm-rabbit-list .cm-index-link {
  grid-template-columns: 3.5rem minmax(6rem, 9rem) 1fr auto;
}

.cm-engine-service {
  background-color: #14121f;
}

.cm-engine-service .cm-engine-title {
  align-items: flex-start;
  flex-direction: column;
}

.cm-engine-service .breadcrubms,
.cm-engine-service .heading-three {
  color: #f6f9f2;
}

.cm-engine-service .service-wrap {
  gap: clamp(40px, 9vw, 140px);
  justify-content: center;
}

.cm-engine-service .service-inner {
  gap: 40px;
}

.cm-engine-service .service-inner.last {
  padding-top: 80px;
}

.cm-engine-service .service-card {
  background-color: #f5e6a3;
}

.cm-engine-summary {
  color: #f5e6a3;
  margin-top: 72px;
  text-align: center;
  word-spacing: 10px;
}

@media (max-width: 767px) {
  body > .page-wrap .section_header .header_component {
    height: 760px;
    min-height: 760px;
  }

  body > .page-wrap .section_header .header_images-layout {
    grid-template-columns: repeat(2, 1fr);
  }

  .cm-interest-marquee,
  .cm-engine-service {
    padding: 72px 0;
  }

  .cm-rabbit-list .cm-index-link {
    grid-template-columns: 3rem 1fr;
  }

  .cm-engine-service .service-inner.last {
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cm-marquee {
    animation: none;
  }
}