/* Homepage responsive polish — overrides Webflow export issues at intermediate widths.
   Does not change visual identity; fixes overflow, collision, and narrow-column bugs. */

/* -------------------------------------------------------------------------- */
/* Gray emphasis — readable on all breakpoints                                 */
/* -------------------------------------------------------------------------- */

.font-matte {
  color: #707070;
}

@media screen and (max-width: 767px) {
  .font-matte {
    color: #5c5c5c;
  }
}

/* -------------------------------------------------------------------------- */
/* Base: fluid type, prevent fixed-width / fixed-height collisions             */
/* -------------------------------------------------------------------------- */

/*
  Do NOT use overflow-x: hidden on html/body — it forces overflow-y to auto
  (CSS overflow pairing) and breaks position:sticky.
  Clip only on html so body does not become a sticky-containing block
  (which kills Clients Value + Services sticky stages).
*/
html {
  overflow-x: clip;
  background-color: #ffffff;
}

.body {
  overflow-x: visible;
}

/*
  Black seam on resize: body is Webflow --black (#050505). Subpixel gaps
  between light sections flash that canvas. Use a light page canvas, and keep
  the hero's own black stage so the cinematic hero is unchanged.
*/
body.body {
  background-color: #ffffff;
}

.hero-section {
  background-color: #050505;
}

/* Protect Services sticky/card-scroll — keep Webflow scroll runway intact */
.works-container {
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
}

.hexagon-sticky {
  position: sticky;
  overflow: visible;
}

.works-container .w-container,
.hexagon-front.w-container {
  overflow: visible;
}

/* -------------------------------------------------------------------------- */
/* Hero — restore production cinematic overlap; keep layering + viewport safety */
/* -------------------------------------------------------------------------- */

.hero-section {
  overflow-x: hidden;
  overflow-y: visible;
}

.hero-container {
  /* Allow headline to extend past the video frame into side margins */
  overflow: visible;
}

.hero-wrapper {
  position: relative;
  overflow: visible;
}

.background-video,
.background-video.w-background-video {
  z-index: 0;
  position: absolute;
  inset: 0;
}

.hero-flex {
  z-index: 10;
  position: relative;
  /* Production left-overlap beyond the video frame */
  margin-left: -4.44vw;
  max-width: none;
  width: auto;
  min-width: 0;
  padding-right: 0;
}

.hero-text {
  z-index: 11;
  position: relative;
  /* Base floor — desktop (min-width:992) refines further; mobile uses !important */
  font-size: clamp(3.1rem, 5.4vw, 6rem);
  line-height: 0.82;
  width: min(72vw, 58rem);
  max-width: none;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.hero-description {
  z-index: 11;
  position: relative;
  max-width: 29vw;
  font-size: clamp(0.95rem, 1.5vw, 1.35rem);
  line-height: 1.35;
}

.large-title {
  font-size: clamp(3.25rem, 7vw, 8rem);
  line-height: 0.85;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.about-block {
  height: auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
}

.div-block-8.metrics-title.slide-up-animation,
.div-block-8 {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-left: 0;
}

.metrics-title.slide-up-animation {
  max-width: min(52rem, 90%);
  width: 100%;
  height: auto;
  margin-left: clamp(0rem, 4vw, 7.8rem);
  margin-right: auto;
  margin-top: 0;
  padding-right: 1rem;
  font-size: clamp(1.375rem, 2.2vw, 2.0625rem);
  line-height: 1.2;
  box-sizing: border-box;
}

.div-block-3 {
  width: 100%;
  max-width: 50rem;
  height: auto;
  padding-left: clamp(1rem, 6vw, 5.8125rem);
  box-sizing: border-box;
}

.div-block-9 {
  width: 100%;
  max-width: 50rem;
  box-sizing: border-box;
}

.paragraph-19,
.paragraph-20 {
  width: 100%;
  max-width: 50rem;
  line-height: 1.55;
  font-size: clamp(0.95rem, 1.25vw, 1.125rem);
  box-sizing: border-box;
}

.paragraph-18 {
  width: 100%;
  max-width: 42rem;
  height: auto;
  line-height: 1.5;
  box-sizing: border-box;
}

.cta-title {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: clamp(2.5rem, 11vw, 8rem);
}

.cta-title.outline-white {
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  white-space: normal;
}

/*
  Expertise + Background collage:
  Webflow sets .container.overflow { overflow: visible } so cards can bleed.
  Do NOT force overflow-x: hidden on that container — it creates a white clip box.
*/
.container.overflow {
  overflow: visible;
  max-width: 100%;
}

.cta-wrapper {
  overflow: visible;
  max-width: 100%;
}

.cta-cards-wraooer {
  overflow: visible;
  max-width: 100%;
}

.cta-3d-perspective {
  overflow: visible;
  max-width: none;
  width: 100%;
  position: relative;
  z-index: 0;
  /*
    Webflow IX starts .cta-cards-flex at translateX(+25%) → empty left.
    Nudge the 3D rail left so cards occupy lower-left from the start,
    while overflow:visible keeps the right side unclipped.
  */
  transform: translate3d(-20vw, 0, 0) rotateX(40deg) rotateY(0deg) rotateZ(-16deg);
}

/* Webflow uses z-index: -1 which hides cards behind the white container background */
.cta-cards-flex {
  z-index: 0;
  position: relative;
}

/*
  Seamless CTA card marquee.
  Webflow IX a-373 loops translateX(25% → -13%) and hard-resets.
  Neutralize that transform and animate a duplicated track by exactly one set.
*/
.cta-cards-flex.chl-cta-marquee {
  transform: none !important;
  width: 100%;
  max-width: none;
  display: block;
  overflow: visible;
}

.chl-cta-marquee__track {
  --chl-cta-duration: 150s;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: chl-cta-marquee var(--chl-cta-duration) linear infinite;
}

.chl-cta-marquee__set {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  flex: 0 0 auto;
  /* Trailing gap matches Webflow .cta-cards-flex column-gap so -50% lands cleanly */
  column-gap: 2.22vw;
  padding-right: 2.22vw;
}

@media screen and (max-width: 991px) {
  .chl-cta-marquee__set {
    column-gap: 2rem;
    padding-right: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .chl-cta-marquee__set {
    column-gap: 1rem;
    padding-right: 1rem;
  }
}

@keyframes chl-cta-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    /* Exactly one duplicated set (incl. trailing gap) */
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chl-cta-marquee__track {
    animation: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Expertise + Background composition lives in index.html                      */
/* <style id="chl-expertise-composition"> — single authoritative override.     */
/* Do not re-add competing .cta-cards-wraooer / section-6 headline rules here. */
/* -------------------------------------------------------------------------- */

.hexagon-works-title {
  font-size: clamp(1.75rem, 3.5vw, 2.8125rem);
  line-height: 1.05;
  max-width: min(90vw, 28rem);
  text-align: center;
}

/* Keep PORTFOLIO OVERSIGHT on one line (longer than Build / Market) */
.work-01 .hexagon-works-title {
  max-width: min(96vw, 40rem);
  white-space: nowrap;
  font-size: clamp(1.55rem, 3.1vw, 2.8125rem);
}

.div-block-10 {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  box-sizing: border-box;
}

.div-block-18 {
  width: 100%;
  max-width: 31.25rem;
  margin-left: clamp(0rem, 4vw, 7.375rem);
  box-sizing: border-box;
}

.text-block-5 {
  width: 100%;
  max-width: 31.25rem;
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------- */
/* ~1200px — narrow desktop still above Webflow tablet breakpoint              */
/* -------------------------------------------------------------------------- */

@media screen and (max-width: 1200px) {
  .hero-wrapper {
    width: 84%;
    margin-top: 5vw;
    overflow: visible;
  }

  .hero-flex {
    /* Keep cinematic left overlap */
    margin-left: -3.5vw;
  }

  .hero-text {
    font-size: clamp(3.1rem, 6vw, 5.75rem);
    width: min(80vw, 60rem);
    max-width: none;
  }

  .hero-description {
    max-width: min(29vw, 22rem);
  }

  .div-block-3 {
    padding-left: clamp(1rem, 4vw, 3rem);
  }

  .metrics-title.slide-up-animation {
    max-width: 92%;
    margin-left: clamp(0.5rem, 3vw, 4rem);
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  }

  .large-title {
    font-size: clamp(3.5rem, 6.5vw, 6.5rem);
  }
}

/* -------------------------------------------------------------------------- */
/* ~1024px — tablet / narrow desktop                                           */
/* -------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
  .hero-wrapper {
    overflow: visible;
  }

  .hero-text {
    font-size: clamp(2.75rem, 5.8vw, 4.25rem);
    width: min(82vw, 52rem);
    max-width: none;
  }

  .hero-description {
    display: block;
    max-width: min(26rem, 40vw);
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.45;
  }

  .hero-flex {
    z-index: 10;
    margin-left: -2.5vw;
    top: auto;
    max-width: none;
  }

  .metrics-title.slide-up-animation {
    margin-top: 0;
    margin-left: 0;
    max-width: 100%;
    font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  }

  .div-block-8.metrics-title.slide-up-animation {
    margin-left: 0;
  }

  .large-title {
    font-size: clamp(3.25rem, 8vw, 5.5rem);
    text-align: left;
  }

  .paragraph-18,
  .paragraph-20 {
    width: 100%;
    max-width: 100%;
  }

  .div-block-3 {
    width: 100%;
    max-width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .cta-title.outline-white {
    font-size: clamp(1.35rem, 5vw, 2.25rem);
  }

  .div-block-18 {
    margin-left: 0;
  }

  .hexagon-works-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
  }

  .about-block {
    height: auto;
  }
}

/* -------------------------------------------------------------------------- */
/* ~900px                                                                      */
/* -------------------------------------------------------------------------- */

@media screen and (max-width: 900px) {
  .hero-wrapper {
    width: 88%;
    height: auto;
    min-height: 70vh;
    align-items: flex-end;
    padding-bottom: 2rem;
    overflow: visible;
  }

  .hero-text {
    font-size: clamp(2.5rem, 6.2vw, 3.5rem);
    line-height: 0.85;
    width: min(85vw, 44rem);
    max-width: none;
  }

  .hero-description {
    display: block;
    max-width: min(22rem, 55%);
  }

  .hero-flex {
    margin-left: -2vw;
    max-width: none;
  }

  .large-title {
    font-size: clamp(2.75rem, 9vw, 4.5rem);
    line-height: 0.9;
  }

  .metrics-title.slide-up-animation {
    font-size: clamp(1.3rem, 3.2vw, 1.65rem);
    line-height: 1.25;
  }

  .page-title-wrapper {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
  }

  .work-title-wrapper {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    box-sizing: border-box;
  }
}

/* -------------------------------------------------------------------------- */
/* Override Webflow 991px rules that cause overlap / hidden hero copy          */
/* -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .hero-description {
    display: block;
    max-width: min(22.5rem, 70%);
    font-size: 1rem;
    line-height: 1.45;
  }

  .hero-text {
    z-index: 11;
    font-size: clamp(2.4rem, 6vw, 3.35rem) !important;
    left: auto;
    width: min(86vw, 40rem) !important;
    max-width: none !important;
    line-height: 0.88;
  }

  .hero-flex {
    z-index: 10;
    /* Keep reduced cinematic overlap on tablet */
    margin-left: -1.5rem !important;
    top: auto !important;
    position: relative;
    max-width: none;
    padding-right: 0;
  }

  .hero-wrapper {
    width: 88%;
    overflow: visible;
  }

  .hero-container {
    overflow: visible;
  }

  .background-video,
  .background-video.w-background-video {
    z-index: 0;
  }

  /* Logo fully visible — Webflow uses margin-left: -119px on .w--current */
  .logo-link-wrapper,
  .logo-link-wrapper.w--current {
    margin-left: 0 !important;
    width: auto !important;
    max-width: calc(100vw - 5.5rem);
    height: auto !important;
    min-height: auto;
    overflow: visible;
  }

  .logo {
    max-width: min(280px, calc(100vw - 5.5rem)) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
  }

  .navbar {
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }

  .nav-container {
    max-width: 100%;
    margin-right: 0;
    justify-content: flex-end;
  }

  /* Hamburger visible on light nav */
  .menu-button,
  .menu-button.w-nav-button {
    color: #000 !important;
    margin-right: 0;
    padding-right: 0.25rem;
  }

  .burger-icon,
  .burger-icon.invert,
  .burger-icon.invert.w-icon-nav-menu {
    color: #000 !important;
    filter: none !important;
    -webkit-filter: none !important;
    margin-right: 0 !important;
  }

  .metrics-title.slide-up-animation {
    margin-top: 0;
  }

  .paragraph-18,
  .paragraph-20 {
    width: 100%;
    max-width: 100%;
    line-height: 1.55;
  }

  .div-block-3 {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
  }

  .cta-title {
    font-size: clamp(2.5rem, 10vw, 5rem);
  }

  .cta-title.outline-white {
    font-size: clamp(1.25rem, 4.5vw, 2rem) !important;
  }

  .large-title {
    font-size: clamp(3rem, 9vw, 5rem);
  }

  .container.overflow-on-tab {
    overflow: visible;
    max-width: 100%;
  }

  /* clip, not hidden — hidden breaks position:sticky on .reviews-image */
  .chl-clients-value .reviews-flex {
    overflow-x: clip;
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* ~768px                                                                      */
/* -------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
  .hero-wrapper {
    width: 90%;
    margin-top: 4rem;
    min-height: 65vh;
    overflow: visible;
  }

  .hero-text {
    font-size: clamp(2.25rem, 6.5vw, 2.85rem) !important;
    width: min(88vw, 36rem) !important;
    max-width: none !important;
    line-height: 0.9;
  }

  .hero-description {
    max-width: min(20rem, 85%);
    font-size: 1rem;
    line-height: 1.5;
  }

  .hero-flex {
    margin-left: -0.75rem !important;
    padding-right: 0;
    max-width: none;
  }

  .large-title {
    font-size: clamp(2.5rem, 11vw, 4rem);
    text-align: center;
  }

  .metrics-title.slide-up-animation {
    margin-left: 0;
    max-width: 100%;
    font-size: clamp(1.25rem, 4.2vw, 1.75rem);
    text-align: left;
  }

  .div-block-8,
  .div-block-8.metrics-title.slide-up-animation {
    width: 100%;
    height: auto;
    margin-left: 0;
  }

  .about-block {
    height: auto;
    align-items: flex-start;
    width: 100%;
  }

  .hexagon-works-title {
    font-size: clamp(1.35rem, 6vw, 2.25rem);
  }

  .work-01 .hexagon-works-title {
    white-space: normal;
    max-width: min(92vw, 22rem);
    font-size: clamp(1.25rem, 5.5vw, 2rem);
  }

  .div-block-10,
  .div-block-18,
  .text-block-5 {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  /* CTA left edge owned by index.html #chl-expertise-composition */
  .cta-cards-wraooer > .button-with-circle-icon {
    padding-left: 0 !important;
    left: auto !important;
    right: auto !important;
  }

  .cta-3d-perspective {
    transform: translate3d(-12vw, 0, 0) rotateX(40deg) rotateY(0deg) rotateZ(-16deg);
  }
}

@media screen and (max-width: 767px) {
  .hero-text {
    font-size: clamp(2.15rem, 7vw, 2.7rem) !important;
  }
}

/* True mobile — conservative, fully contained */
@media screen and (max-width: 640px) {
  .hero-flex {
    margin-left: 0 !important;
    max-width: 100%;
    padding-right: 0.5rem;
  }

  .hero-text {
    font-size: clamp(2rem, 9vw, 2.5rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    line-height: 0.95;
  }

  .hero-description {
    max-width: 92%;
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .hero-wrapper {
    width: 92%;
    overflow: visible;
  }

  .large-title {
    font-size: clamp(2.25rem, 12vw, 3.5rem);
  }

  .metrics-title.slide-up-animation {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
  }

  .paragraph-18,
  .paragraph-20 {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .logo-link-wrapper,
  .logo-link-wrapper.w--current {
    margin-left: 0 !important;
    max-width: calc(100vw - 4.5rem);
  }

  .logo {
    max-width: min(240px, calc(100vw - 4.5rem)) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile — kill fixed 200×300 / clipped paragraph heights from Webflow export */
/* -------------------------------------------------------------------------- */

@media screen and (max-width: 479px) {
  .cta-3d-perspective {
    transform: translate3d(-8vw, 0, 0) rotateX(40deg) rotateY(0deg) rotateZ(-16deg);
  }

  .div-block-8 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .div-block-8.metrics-title.slide-up-animation {
    margin-left: 0 !important;
  }

  .metrics-title.slide-up-animation {
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    font-size: clamp(1.2rem, 6.5vw, 1.5rem) !important;
    line-height: 1.25 !important;
    text-align: left;
  }

  .about-block {
    height: auto !important;
    width: 100%;
    text-align: left;
    align-items: flex-start;
  }

  .div-block-3 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem;
  }

  .paragraph-18 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .paragraph-20 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .div-block-9 {
    width: 100%;
    max-width: 100%;
    padding-bottom: 1.5rem;
  }

  .div-block-10 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 1.5rem;
  }

  .div-block-18 {
    width: 100%;
    margin-left: 0;
  }

  .hero-text {
    font-size: clamp(2rem, 11vw, 2.6rem) !important;
    margin-bottom: 0.75rem;
    max-width: 100% !important;
  }

  .hero-description {
    display: block;
    max-width: 92%;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .hero-flex {
    z-index: 10;
    margin-left: 0 !important;
    position: relative;
    max-width: 100%;
  }

  .logo-link-wrapper,
  .logo-link-wrapper.w--current {
    margin-left: 0 !important;
    width: auto !important;
    max-width: calc(100vw - 4rem);
    height: auto !important;
  }

  .logo {
    max-width: min(220px, calc(100vw - 4rem)) !important;
    height: auto !important;
  }

  .burger-icon,
  .burger-icon.invert,
  .burger-icon.invert.w-icon-nav-menu {
    color: #000 !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  .large-title {
    font-size: clamp(2.1rem, 12vw, 3rem);
  }

  .hexagon-works-title {
    font-size: clamp(1.15rem, 7.5vw, 1.75rem);
  }

  .work-01 .hexagon-works-title {
    white-space: normal;
    max-width: 92vw;
    font-size: clamp(1.05rem, 6.5vw, 1.55rem);
  }

  .font-matte {
    color: #555555;
  }

  #learn-more .space-4rem {
    min-height: 1.5rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Intro editorial composition — #learn-more / .chl-intro-section only         */
/* -------------------------------------------------------------------------- */

/*
  Use padding-top on the white section itself — NOT margin-top on the child.
  Child margin-top collapses through .section and creates a black body gap
  (body is #050505), so the headline never gains white breathing room.
*/
.chl-intro-section,
#learn-more.chl-intro-section {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: clamp(140px, 10vw, 190px);
  padding-bottom: 0;
  background-color: #fff;
}

.chl-intro-section .container.padding-9rem,
#learn-more .container.padding-9rem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0;
  grid-row-gap: 0;
  /* Do not use margin-top for hero→intro gap (collapses into black body) */
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: clamp(1.5rem, 9vw, 9rem);
  padding-right: clamp(1.5rem, 9vw, 9rem);
  box-sizing: border-box;
}

/* Small internal spacer only — main offset is section padding-top */
.chl-intro-section > .container > .space-4rem:first-child,
#learn-more > .container > .space-4rem:first-child {
  min-height: 0;
  height: 0;
  width: 100%;
  overflow: hidden;
}

#learn-more .about-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 56.25rem; /* 900px */
  height: auto;
  min-height: 0;
  margin: 0;
}

#learn-more .div-block-8,
#learn-more .div-block-8.metrics-title.slide-up-animation {
  width: 100%;
  max-width: 53.75rem; /* ~860px editorial measure */
  height: auto;
  margin: 0;
}

#learn-more .metrics-title.slide-up-animation {
  width: 100%;
  max-width: 53.75rem;
  height: auto;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: clamp(1.5rem, 2.35vw, 2.125rem);
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

/* Tighter, intentional gap between headline and body */
#learn-more .about-block > .space-4rem {
  min-height: clamp(1rem, 1.6vw, 1.5rem);
  width: 100%;
}

#learn-more .div-block-9 {
  width: 100%;
  max-width: 50rem; /* 800px */
  margin: 0;
  /* Override Webflow mobile .div-block-9 { padding-bottom: 40px } */
  padding: 0;
  padding-bottom: 0;
}

#learn-more .paragraph-20 {
  width: 100%;
  max-width: 50rem;
  margin: 0;
  padding: 0;
  color: var(--secondary);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.65;
}

/* Operating model rail — editorial process, not a table */
section.section.operating-model-section {
  margin: 0;
  /* Balanced band; entry-path now sits before Services */
  padding-top: 90px;
  padding-bottom: 72px;
  background-color: #fff;
  color: var(--secondary);
}

section.section.operating-model-section .container.padding-4-5rem {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: clamp(1.5rem, 9vw, 9rem);
  padding-right: clamp(1.5rem, 9vw, 9rem);
  box-sizing: border-box;
}

.operating-model-wrap {
  width: min(86%, 68.75rem); /* ~80–88% / 1100px */
  max-width: 68.75rem;
  margin: 0 auto;
}

.operating-model__overline {
  margin: 0 0 1.2rem;
  color: var(--black);
  font-family: Archivo, sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: left;
}

.operating-model {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(1.75rem, 3.5vw, 3rem);
  width: 100%;
  margin: 0;
  padding: 1.85rem 0 2rem;
  border-top: 1px solid rgba(5, 5, 5, 0.16);
  border-bottom: 1px solid rgba(5, 5, 5, 0.16);
}

.operating-model__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.35rem 0.25rem 0 0;
}

.operating-model__index,
.operating-model__label,
.operating-model__text {
  margin: 0;
}

.operating-model__index {
  color: #8a8a8a;
  font-family: Archivo, sans-serif;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.2;
}

.operating-model__label {
  color: var(--black);
  font-family: Archivo, sans-serif;
  font-size: clamp(0.875rem, 1.05vw, 1.0625rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.operating-model__text {
  color: #707070;
  font-family: Archivo, sans-serif;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.5;
  max-width: 14.5rem;
  margin-top: 0.2rem;
}

/* Keep Services gap controlled by preceding section padding only */
section.operating-model-section + section.section.relative {
  margin-top: 0;
  padding-top: 0;
}

section.operating-model-section + section.section.relative .space-2rem {
  min-height: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/* Homepage Assessment — post-Services conversion (before Expertise)           */
/* -------------------------------------------------------------------------- */

section.chl-entry-path {
  --chl-ep-ink: #1c1c1c;
  --chl-ep-ink-soft: rgba(28, 28, 28, 0.78);
  --chl-ep-pad: clamp(1.5rem, 4vw, 3rem);
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: clamp(7.5rem, 9vw, 8.75rem) 0; /* ~120–140px */
  overflow-x: hidden;
  box-sizing: border-box;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fdfcfa 34%,
      #faf7f1 56%,
      #ffffff 100%
    );
}

/* Soft mist — unified wash, not a box */
section.chl-entry-path::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: 12% 8% 18%;
  background:
    radial-gradient(
      ellipse 70% 65% at 42% 48%,
      rgba(245, 240, 230, 0.55) 0%,
      rgba(245, 240, 230, 0.18) 45%,
      rgba(245, 240, 230, 0) 72%
    );
  filter: blur(36px);
  opacity: 0.85;
  transform: translateZ(0);
}

.chl-entry-path__wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding-left: var(--chl-ep-pad);
  padding-right: var(--chl-ep-pad);
  box-sizing: border-box;
  text-align: left;
}

.chl-entry-path__eyebrow {
  margin: 0 0 1.25rem; /* ~20px */
  color: rgba(28, 28, 28, 0.52) !important;
  font-family: Archivo, Lato, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  -webkit-text-fill-color: rgba(28, 28, 28, 0.52);
}

.chl-entry-path__title {
  margin: 0 0 1.5rem; /* ~24px */
  max-width: 720px;
  color: var(--chl-ep-ink) !important;
  font-family: Lato, sans-serif;
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-transform: none;
  -webkit-text-fill-color: var(--chl-ep-ink);
}

.chl-entry-path__body {
  margin: 0 0 1.875rem; /* ~30px */
  max-width: 640px;
  color: var(--chl-ep-ink-soft) !important;
  font-family: Archivo, Lato, sans-serif;
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.65;
  -webkit-text-fill-color: var(--chl-ep-ink-soft);
}

.chl-entry-path__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  margin: 0;
  padding: 0.15rem 0 0.2rem;
  color: #111 !important;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(28, 28, 28, 0.3);
  border-radius: 0;
  font-family: Archivo, Lato, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-decoration: none !important;
  text-transform: uppercase;
  -webkit-text-fill-color: #111;
  box-sizing: border-box;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    -webkit-text-fill-color 0.2s ease;
}

.chl-entry-path__cta span {
  font-size: 0.88rem;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.chl-entry-path__cta:hover,
.chl-entry-path__cta:focus-visible {
  color: #000 !important;
  border-bottom-color: #111;
  -webkit-text-fill-color: #000;
}

.chl-entry-path__cta:hover span,
.chl-entry-path__cta:focus-visible span {
  opacity: 1;
  transform: translateX(3px);
}

/* Soft chapter break into Expertise (no extra space-10rem spacer) */
section.chl-entry-path + section.chl-bottom-cta {
  margin-top: 0;
}

@media screen and (max-width: 1024px) {
  section.operating-model-section + section.section.relative {
    padding-top: 0;
  }

  section.operating-model-section + section.section.relative .space-2rem {
    min-height: 0;
    height: 0;
  }
}

@media screen and (max-width: 767px) {
  section.chl-entry-path {
    --chl-ep-pad: 24px;
    padding: clamp(4.5rem, 12vw, 5.5rem) 0 clamp(3.5rem, 10vw, 4.5rem); /* ~72–88 top; ~56–72 bottom into Expertise */
  }

  section.chl-entry-path::before {
    inset: 8% -4% 14%;
    opacity: 0.7;
  }

  .chl-entry-path__eyebrow {
    margin-bottom: 1.125rem;
  }

  .chl-entry-path__title {
    max-width: none;
    margin-bottom: 1.25rem;
    font-size: clamp(1.75rem, 7.5vw, 2rem); /* ~28–32px */
  }

  .chl-entry-path__body {
    max-width: none;
    margin-bottom: 1.75rem;
    font-size: clamp(1rem, 4.2vw, 1.0625rem); /* ~16–17px */
    line-height: 1.65;
  }

  .chl-entry-path__cta {
    font-size: 0.78rem;
  }
}

@media screen and (max-width: 640px) {
  section.operating-model-section + section.section.relative {
    padding-top: 0;
  }

  section.operating-model-section + section.section.relative .space-2rem {
    min-height: 0;
    height: 0;
  }
}

@media screen and (max-width: 1200px) {
  section.section.operating-model-section .container.padding-4-5rem {
    padding-left: clamp(1.5rem, 6vw, 5rem);
    padding-right: clamp(1.5rem, 6vw, 5rem);
  }

  .operating-model-wrap {
    width: min(90%, 62.5rem);
    max-width: 62.5rem;
  }

  .operating-model__text {
    max-width: 13rem;
  }
}

@media screen and (max-width: 1024px) {
  section.section.operating-model-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  section.operating-model-section + section.section.relative {
    padding-top: 0;
  }

  section.operating-model-section + section.section.relative .space-2rem {
    min-height: 0;
    height: 0;
  }

  .operating-model-section .container.padding-4-5rem {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .operating-model-wrap {
    width: 100%;
    max-width: 100%;
  }

  .operating-model {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
    row-gap: 1.85rem;
    padding: 1.65rem 0 1.75rem;
  }

  .operating-model__item:nth-child(odd) {
    padding-right: 0.35rem;
  }

  .operating-model__item:nth-child(even) {
    padding-left: 0.35rem;
  }

  .operating-model__text {
    max-width: none;
  }
}

@media screen and (max-width: 640px) {
  section.section.operating-model-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  section.operating-model-section + section.section.relative {
    padding-top: 0;
  }

  section.operating-model-section + section.section.relative .space-2rem {
    min-height: 0;
    height: 0;
  }

  .operating-model-section .container.padding-4-5rem {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .operating-model__overline {
    margin-bottom: 0.95rem;
  }

  .operating-model {
    grid-template-columns: 1fr;
    row-gap: 0;
    padding: 0.4rem 0;
  }

  .operating-model__item {
    padding: 1.15rem 0;
  }

  .operating-model__item:not(:last-child) {
    border-bottom: 1px solid rgba(5, 5, 5, 0.1);
  }

  .operating-model__label {
    font-size: 0.9375rem;
  }

  .operating-model__text {
    font-size: 0.9375rem;
  }
}

@media screen and (max-width: 479px) {
  .operating-model-section .container.padding-4-5rem {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media screen and (max-width: 1200px) {
  #learn-more .container.padding-9rem {
    padding-left: clamp(1.5rem, 6vw, 5rem);
    padding-right: clamp(1.5rem, 6vw, 5rem);
  }

  #learn-more .div-block-8,
  #learn-more .div-block-8.metrics-title.slide-up-animation,
  #learn-more .metrics-title.slide-up-animation {
    max-width: 50rem;
  }

  #learn-more .metrics-title.slide-up-animation {
    font-size: clamp(1.45rem, 2.5vw, 1.95rem);
    line-height: 1.3;
  }

  #learn-more .div-block-9,
  #learn-more .paragraph-20 {
    max-width: 46rem;
  }

  #learn-more .about-block > .space-4rem {
    min-height: 1.5rem;
  }
}

@media screen and (max-width: 1024px) {
  .chl-intro-section,
  #learn-more.chl-intro-section {
    padding-top: 120px;
  }

  #learn-more .container.padding-9rem {
    margin-top: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 0;
  }

  #learn-more .about-block,
  #learn-more .div-block-8,
  #learn-more .div-block-8.metrics-title.slide-up-animation,
  #learn-more .metrics-title.slide-up-animation,
  #learn-more .div-block-9,
  #learn-more .paragraph-20 {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  #learn-more .metrics-title.slide-up-animation {
    font-size: clamp(1.4rem, 2.8vw, 1.8rem);
    line-height: 1.32;
  }

  #learn-more .paragraph-20 {
    font-size: 1.05rem;
    line-height: 1.65;
  }

  #learn-more .about-block > .space-4rem {
    min-height: 1.35rem;
  }
}

@media screen and (max-width: 768px) {
  .chl-intro-section,
  #learn-more.chl-intro-section {
    padding-top: 96px;
  }

  #learn-more .container.padding-9rem {
    margin-top: 0;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 0;
  }

  #learn-more > .container > .space-4rem:first-child {
    min-height: 0;
    height: 0;
  }

  #learn-more .metrics-title.slide-up-animation {
    font-size: clamp(1.3rem, 4.2vw, 1.65rem);
    line-height: 1.35;
  }

  #learn-more .paragraph-20 {
    font-size: 1rem;
    line-height: 1.6;
  }

  #learn-more .about-block > .space-4rem {
    min-height: 1.15rem;
  }
}

@media screen and (max-width: 479px) {
  .chl-intro-section,
  #learn-more.chl-intro-section {
    padding-top: 80px;
  }

  #learn-more .container.padding-9rem {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0;
    padding-bottom: 0;
  }

  #learn-more .div-block-9 {
    padding-bottom: 0 !important; /* beat Webflow 40px */
  }

  #learn-more .metrics-title.slide-up-animation {
    font-size: clamp(1.25rem, 5.5vw, 1.5rem) !important;
    line-height: 1.35 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  #learn-more .div-block-8,
  #learn-more .div-block-8.metrics-title.slide-up-animation {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  #learn-more .paragraph-20 {
    font-size: 0.95rem;
    line-height: 1.6;
    width: 100% !important;
  }

  #learn-more .about-block > .space-4rem {
    min-height: 1rem;
  }

  #learn-more > .container > .space-4rem:first-child {
    min-height: 0;
    height: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* When to bring us in — editorial use-case panels                             */
/* -------------------------------------------------------------------------- */

.chl-bring-in .container.padding-4-5rem {
  padding-top: 0;
  padding-bottom: clamp(4rem, 7vw, 6rem);
  box-sizing: border-box;
}

.chl-bring-in__inner {
  width: min(100%, 68.75rem);
  max-width: 68.75rem;
  margin: 0 auto;
}

.chl-bring-in__subline {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: 40rem;
  color: #707070;
  font-family: Archivo, sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: 300;
  line-height: 1.55;
}

.chl-bring-in__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.75rem, 3.5vw, 3rem);
  row-gap: 0;
  width: 100%;
  border-top: 1px solid rgba(5, 5, 5, 0.16);
}

.chl-bring-in__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  padding: clamp(1.35rem, 2.5vw, 1.85rem) 0.35rem clamp(1.5rem, 2.75vw, 2rem) 0;
  border-bottom: 1px solid rgba(5, 5, 5, 0.12);
  background: transparent;
}

.chl-bring-in__index,
.chl-bring-in__title,
.chl-bring-in__text {
  margin: 0;
}

.chl-bring-in__index {
  color: #8a8a8a;
  font-family: Archivo, sans-serif;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.2;
}

.chl-bring-in__title {
  color: var(--black, #050505);
  font-family: Archivo, sans-serif;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.chl-bring-in__text {
  color: #707070;
  font-family: Archivo, sans-serif;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.55;
  max-width: 28rem;
}

.chl-bring-in__closing {
  width: 100%;
  max-width: none;
  margin: clamp(2.75rem, 5.5vw, 3.75rem) 0 0;
  padding-top: clamp(1.25rem, 2.25vw, 1.65rem);
  padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
  border-top: 1px solid rgba(5, 5, 5, 0.08);
  box-sizing: border-box;
  text-align: left;
}

.chl-bring-in__closing-text {
  display: block;
  max-width: 38rem;
  margin: 0;
  color: var(--black, #050505);
  font-family: Archivo, sans-serif;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.45;
}

@media screen and (max-width: 1024px) {
  .chl-bring-in .container.padding-4-5rem {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .chl-bring-in__inner {
    width: 100%;
    max-width: 100%;
  }

  .chl-bring-in__grid {
    column-gap: 2rem;
  }
}

@media screen and (max-width: 640px) {
  .chl-bring-in .container.padding-4-5rem {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 3.25rem;
  }

  .chl-bring-in__subline {
    margin-bottom: 1.5rem;
    font-size: 0.975rem;
  }

  .chl-bring-in__grid {
    grid-template-columns: 1fr;
  }

  .chl-bring-in__card {
    padding: 1.2rem 0 1.35rem;
  }

  .chl-bring-in__title {
    font-size: 1.0625rem;
  }

  .chl-bring-in__text {
    font-size: 0.9375rem;
    max-width: none;
  }

  .chl-bring-in__closing {
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    padding-bottom: 0.85rem;
  }

  .chl-bring-in__closing-text {
    max-width: 34rem;
    font-size: 1.0625rem;
  }
}

@media screen and (max-width: 479px) {
  .chl-bring-in .container.padding-4-5rem {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* -------------------------------------------------------------------------- */
/* What Clients Value — readable frosted cards + editorial fourth value        */
/* -------------------------------------------------------------------------- */

.chl-clients-value .reviews,
.chl-clients-value .reviews-02,
.chl-clients-value .reviews-03 {
  background-color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(2.5rem);
  backdrop-filter: blur(2.5rem);
  box-shadow: 0 12px 40px rgba(5, 5, 5, 0.06);
}

.chl-clients-value .brand-reviews {
  max-width: min(220px, 70%);
  opacity: 0.85;
  /* Consistent muted gray mark — supports, does not compete with titles */
  filter: brightness(0) invert(0.55);
}

.chl-clients-value .paragraph-5,
.chl-clients-value .paragraph-6,
.chl-clients-value .paragraph-7 {
  color: #5c5c5c;
  font-family: Archivo, sans-serif;
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  font-weight: 300;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.chl-clients-value .reviews-name {
  color: #050505;
  font-family: Archivo, sans-serif;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-transform: none;
  margin: 0 0 0.4rem;
}

.chl-clients-value .font-light-gray,
.chl-clients-value .heading-5,
.chl-clients-value .heading-6 {
  color: #707070;
  font-family: Archivo, sans-serif;
  font-size: clamp(0.625rem, 0.75vw, 0.6875rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
  margin: 0;
  border: none;
}

.chl-clients-value__strip {
  /* Full-bleed closing band; soft bottom so mist continues into Expertise */
  width: 100%;
  max-width: 100%;
  /* Drop the full block (divider + copy) below the card stage */
  margin: clamp(4.75rem, 6.5vw, 6.75rem) auto 0;
  padding: clamp(1.75rem, 2.5vw, 2.25rem) clamp(1.25rem, 4vw, 2rem) clamp(6.75rem, 9.5vw, 9.75rem);
  border-top: 1px solid rgba(5, 5, 5, 0.1);
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  background-color: transparent;
  /* Hold ivory through the copy, then dissolve softly in the bottom padding */
  background-image: linear-gradient(
    180deg,
    var(--chl-ivory, #f4efe6) 0%,
    var(--chl-ivory, #f4efe6) 42%,
    var(--chl-ivory-mist, #f8f4ec) 62%,
    rgba(250, 247, 242, 0.75) 78%,
    rgba(253, 252, 250, 0.35) 90%,
    rgba(255, 255, 255, 0) 100%
  );
}

.chl-clients-value__strip-title,
.chl-clients-value__strip-text {
  margin: 0 auto;
  font-family: Archivo, sans-serif;
  text-align: center;
}

.chl-clients-value__strip-title {
  color: #050505;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin-bottom: 0.45rem;
  max-width: 40rem;
}

.chl-clients-value__strip-text {
  max-width: 36rem;
  color: #707070;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.55;
}

@media screen and (max-width: 991px) {
  .chl-clients-value .reviews-name {
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    line-height: 1.35;
  }

  .chl-clients-value .paragraph-5,
  .chl-clients-value .paragraph-6,
  .chl-clients-value .paragraph-7 {
    font-size: 0.95rem;
  }

  .chl-clients-value__strip {
    margin-top: clamp(3.25rem, 5vw, 4.5rem);
    padding-bottom: clamp(4.5rem, 8vw, 6.5rem);
  }
}

@media screen and (max-width: 767px) {
  .chl-clients-value .reviews,
  .chl-clients-value .reviews-02,
  .chl-clients-value .reviews-03 {
    background-color: rgba(255, 255, 255, 0.82);
  }

  .chl-clients-value .reviews-name {
    font-size: 1.1rem;
    line-height: 1.35;
    text-align: inherit;
  }

  .chl-clients-value__strip {
    width: 100%;
    max-width: 100%;
    margin-top: clamp(2.75rem, 6vw, 3.75rem);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: clamp(3.75rem, 10vw, 5.25rem);
  }

  .chl-clients-value__strip-title {
    font-size: 1.1rem;
  }

  .chl-clients-value__strip-text {
    font-size: 0.95rem;
    max-width: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Lower-page atmosphere — warm ivory behind Clients Value                     */
/* -------------------------------------------------------------------------- */

:root {
  --chl-ivory: #f4efe6;
  --chl-ivory-deep: #ebe3d4;
  --chl-ivory-mist: #f8f4ec;
}

/* Soft mist out of When to Bring Us In → into warm zone */
.chl-bring-in {
  background-color: #fff;
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 72%,
    var(--chl-ivory-mist) 100%
  );
}

/* What Clients Value — continuous warm wash (title + collage) */
.chl-clients-value-head,
.chl-clients-value {
  background-color: var(--chl-ivory);
}

.chl-clients-value-head {
  color: #0a0a0a;
  /* Continue mist from bring-in; no hard white band */
  background-image: linear-gradient(
    180deg,
    var(--chl-ivory-mist) 0%,
    var(--chl-ivory) 40%,
    var(--chl-ivory) 100%
  );
}

/*
  Webflow .space-10rem is hard white — keep spacing, drop the white fill
  inside the warm Clients Value zone.
*/
.chl-clients-value .space-10rem,
.chl-clients-value-head .space-10rem,
.chl-clients-value-head .space-page-top,
.chl-clients-value-head .space-2rem,
.chl-clients-value-head .space-4rem {
  background-color: transparent;
  background-image: none;
}

/* Keep frosted cards bright / premium against the warm wash */
.chl-clients-value .reviews,
.chl-clients-value .reviews-02,
.chl-clients-value .reviews-03 {
  position: relative;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.chl-clients-value__strip {
  border-top-color: rgba(10, 10, 10, 0.12);
}

/*
  Sticky Clients Value stage.
  Webflow .container { overflow: hidden } prevents position:sticky and clips
  the rolling cards. Restore visible overflow so the 100vh stage can pin while
  cards animate across it (IX a-313 / reviews-trigger unchanged).
*/
.chl-clients-value .container.overflow-on-tab {
  overflow: visible;
}

.chl-clients-value .reviews-flex {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  overflow: visible;
  /* Scroll runway under the pinned stage so cards can finish rolling while stuck */
  margin-bottom: min(30vh, 16rem);
}

/*
  Soft exit from warm zone → Expertise.
  Ivory holds through the lowered closing strip, then dissolves in the
  bottom runway. Footer / CTA→footer gradient untouched.
*/
.chl-clients-value {
  position: relative;
  z-index: 1;
  /* Clip card translateX bleed without creating a Y scrollport (sticky-safe) */
  overflow-x: clip;
  overflow-y: visible;
  background-color: var(--chl-ivory);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: linear-gradient(
    180deg,
    var(--chl-ivory) 0,
    var(--chl-ivory) calc(100% - 12rem),
    var(--chl-ivory-mist) calc(100% - 8rem),
    #faf7f2 calc(100% - 4.5rem),
    #fdfcfa calc(100% - 2rem),
    #ffffff 100%
  );
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.chl-clients-value::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(7rem, 12vw, 10rem);
  pointer-events: none;
  z-index: 1;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.18) 35%,
    rgba(255, 255, 255, 0.55) 68%,
    rgba(255, 255, 255, 0.88) 88%,
    #ffffff 100%
  );
}

.chl-clients-value + .space-10rem {
  position: relative;
  z-index: 0;
  background-color: #ffffff;
  background-image: none;
  min-height: clamp(1.25rem, 2vw, 1.75rem);
}

@media screen and (max-width: 991px) {
  /* Tablet: Webflow already sticky-pins .reviews-image; keep flex in flow */
  .chl-clients-value .reviews-flex {
    position: relative;
    top: auto;
    height: auto;
    margin-bottom: 0;
  }

  .chl-clients-value {
    padding-bottom: clamp(2rem, 4vw, 2.75rem);
    background-image: linear-gradient(
      180deg,
      var(--chl-ivory) 0,
      var(--chl-ivory) calc(100% - 9rem),
      var(--chl-ivory-mist) calc(100% - 5.5rem),
      #faf7f2 calc(100% - 2.5rem),
      #ffffff 100%
    );
  }

  .chl-clients-value::after {
    height: clamp(5.5rem, 11vw, 7.5rem);
  }

  .chl-clients-value + .space-10rem {
    min-height: clamp(1.1rem, 2vw, 1.5rem);
  }
}

@media screen and (max-width: 767px) {
  .chl-clients-value {
    padding-bottom: clamp(1.75rem, 5vw, 2.5rem);
    background-image: linear-gradient(
      180deg,
      var(--chl-ivory) 0,
      var(--chl-ivory) calc(100% - 7rem),
      var(--chl-ivory-mist) calc(100% - 3.5rem),
      #ffffff 100%
    );
  }

  .chl-clients-value::after {
    height: clamp(4.5rem, 12vw, 6rem);
  }

  .chl-clients-value + .space-10rem {
    min-height: 1rem;
  }
}

.chl-clients-value + .space-10rem + .section {
  background-color: #fff;
  /* Contain Expertise collage horizontal bleed (body stays overflow-x:visible for sticky) */
  overflow-x: clip;
  overflow-y: visible;
  /*
    Top stays white (continuation of the bottom mist).
    Bottom warm handoff into footer — unchanged.
  */
  background-image: linear-gradient(
    180deg,
    #ffffff 0,
    #ffffff calc(100% - 28rem),
    #faf7f2 calc(100% - 18rem),
    var(--chl-ivory-mist) calc(100% - 8rem),
    var(--chl-ivory-mist) 100%
  );
}

/* Soft handoff into Expertise — tighten only the approach spacing, not type */
.chl-clients-value + .space-10rem + .section .cta-wrapper.slide-up-animation {
  margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

.chl-clients-value + .space-10rem + .section .cta-cards-wraooer {
  margin-top: clamp(2.25rem, 3.5vw, 3.25rem);
}

/* Desktop nav hover — keep move-down effect, make hover text readable */
@media screen and (min-width: 992px) {
  .nav-link:hover,
  .nav-link.move-down.hide-on-tab:hover {
    color: #050505;
  }
}

/* -------------------------------------------------------------------------- */
/* Desktop hero — full-width cinematic media + mist handoff                    */
/* Replaces the prior inset/boxed desktop refinement.                          */
/* Mobile (max-width: 767px) rules below remain the source of truth for phone. */
/* -------------------------------------------------------------------------- */

@media screen and (min-width: 992px) {
  .hero-section {
    /*
      White base under the full-bleed media — kills the 1px black hairline
      where the mist meets the intro (was #050505 peeking at the edge).
    */
    background-color: #ffffff;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
    /* Keep stacking local, but allow difference blend to read video texture */
    isolation: auto;
    overflow: visible;
  }

  .hero-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-bottom: 0;
    /* visible — overflow:hidden painted a 1px compositing seam at the media floor */
    overflow: visible;
  }

  .hero-wrapper {
    position: relative;
    width: 100%;
    max-width: none;
    height: 88vh;
    min-height: 36rem;
    margin: 0;
    padding: 0;
    overflow: visible;
    align-items: flex-end;
    justify-content: flex-start;
  }

  .background-video,
  .background-video.w-background-video {
    z-index: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    /* Hold solid video longer; mist only in the last ~8% */
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 92%,
      rgba(0, 0, 0, 0.5) 97%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 92%,
      rgba(0, 0, 0, 0.5) 97%,
      transparent 100%
    ) !important;
  }

  .background-video video,
  .w-background-video > video {
    object-fit: cover;
    /*
      Push bright tablet / outdoor light further right so the type plane
      sits over darker, calmer footage.
    */
    object-position: 78% 42%;
    width: 100%;
    height: 100%;
  }

  .hero-section .hero-flex,
  .hero-flex {
    z-index: 10;
    position: relative;
    /*
      Original Webflow acid-wash (chlabs.webflow.css):
      mix-blend-mode: difference on .hero-flex — video-reactive layered type.
      No intervening overlay between video and type (that flattens the blend).
    */
    mix-blend-mode: difference;
    margin-left: 0;
    margin-right: 0;
    /* Lower the type group — more open sky above the headline */
    margin-bottom: clamp(4.75rem, 8.5vh, 6.75rem) !important;
    padding-left: clamp(2.75rem, 5.5vw, 5.5rem);
    padding-right: clamp(2rem, 4vw, 4rem);
    max-width: none;
    width: auto;
    box-sizing: border-box;
  }

  .hero-section .hero-text,
  .hero-text {
    font-size: clamp(2.85rem, 4.7vw, 5.15rem) !important;
    line-height: 0.84 !important;
    /* Keep size; limit span so type stays in the darkened plane */
    width: min(62vw, 46rem) !important;
    max-width: none;
    /* Original Webflow --white (whitesmoke) */
    color: var(--white);
    text-shadow: none;
    filter: none;
    opacity: 1;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
  }

  .hero-description {
    max-width: min(32rem, 34vw);
    color: var(--white);
    text-shadow: none;
    filter: none;
    opacity: 1;
  }

  /*
    Webflow .transition blur stacks sit at z-index 7 with overflow:hidden
    full-bleed frames — their bottom edge paints the thin horizontal seam.
    Not used by the full-width mist treatment; hide on desktop only.
  */
  .hero-section .transition {
    display: none;
  }

  /*
    Desktop mist handoff — soft dissolve into intro.
    z-index above former transition layer; below .hero-flex (10).
    Overlap 3px past the section edge to kill any remaining hairline.
  */
  .hero-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    /* Compact mist — leave more lower video open */
    height: calc(clamp(4.75rem, 8vh, 6.25rem) + 3px) !important;
    z-index: 8;
    pointer-events: none;
    background:
      linear-gradient(#ffffff, #ffffff) bottom / 100% 8px no-repeat,
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.02) 30%,
        rgba(255, 255, 255, 0.12) 55%,
        rgba(255, 255, 255, 0.38) 74%,
        rgba(255, 255, 255, 0.76) 90%,
        rgba(255, 255, 255, 0.96) 96%,
        #ffffff 100%
      ) !important;
  }

  /* Micro-overlap so intro white sits under the mist endpoint */
  .chl-intro-section,
  #learn-more.chl-intro-section {
    margin-top: -3px;
    padding-top: calc(clamp(140px, 10vw, 190px) + 3px);
  }
}

body .chl-site-footer,
.chl-site-footer {
  background-color: var(--chl-ivory-mist) !important;
  background-image: linear-gradient(
    180deg,
    var(--chl-ivory-mist) 0,
    var(--chl-ivory-mist) 6rem,
    #faf7f2 18rem,
    #fdfcfa 32rem,
    #ffffff 48rem,
    #ffffff 100%
  ) !important;
  /* IX data-w-id removed — keep static in case IX is reintroduced */
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

.chl-site-footer > .container {
  background-color: transparent !important;
}

/* Restore Webflow container white if needed for collage clipping context */
.chl-clients-value + .space-10rem + .section > .container.overflow {
  background-color: transparent;
}

/*
  Strengthen pale EXPERTISE title slightly so it stays intentional on white
  without going dark/heavy.
*/
.chl-clients-value + .space-10rem + .section .cta-title:not(.outline-white) {
  color: #d6d6d6;
}

.chl-site-footer .footer-line {
  background-color: rgba(28, 28, 28, 0.14) !important;
  height: 1px !important;
}

.chl-site-footer .footer-top {
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1.5rem;
  padding-top: clamp(5.5rem, 9vw, 8.5rem) !important;
  padding-bottom: clamp(2.75rem, 4.5vw, 4.25rem) !important;
}

.chl-site-footer .footer-block {
  align-items: flex-start !important;
  text-align: left !important;
}

.chl-site-footer .footer-logo-link-wrapper .image-2 {
  max-width: min(415px, 42vw);
  width: auto;
  height: auto;
}

/*
  Contact sits on the black pill (.button-flex-copy-copy).
  Label must be white/ivory — not near-black.
*/
.chl-site-footer .footer-top .button-flex-copy-copy {
  color: #f7f3ec !important;
  background-color: #000 !important;
  min-height: 2.75rem;
  padding: 0.55rem 1.65rem !important;
  border-radius: 999px !important;
}

.chl-site-footer .footer-top .button-text {
  color: #f7f3ec !important;
  margin: 0;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  line-height: 1.2;
}

.chl-site-footer .footer-top a:hover .button-flex-copy-copy,
.chl-site-footer .footer-top .button-flex-copy-copy:hover {
  color: #f7f3ec !important;
  background-color: #111 !important;
}

.chl-site-footer .footer-top a:hover .button-text {
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------- */
/* Mobile QA only — balanced hero, mist restore, footer reveal                 */
/* Desktop / tablet-desktop polish above stays untouched.                      */
/* -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  /*
    Cinematic mobile hero: one full-bleed media block.
    Video fills the stage — no inset frame, no black gutters.
  */
  .hero-section {
    /* White page shows through video mask at the bottom — not black */
    background-color: #ffffff;
    /* Size to the media — do not extend a taller empty black stage */
    min-height: 0;
    height: auto;
    justify-content: flex-start;
    align-items: stretch;
    padding-bottom: 0;
    box-sizing: border-box;
  }

  .hero-container {
    padding-bottom: 0 !important;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100% !important;
    max-width: none !important;
  }

  .hero-wrapper {
    position: relative;
    /* Full-bleed media stage — kill 90%/92% inset that left black side gutters */
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    /* Taller cinematic stage — reclaim empty white without tower / black frame */
    min-height: calc(72vh + 8.75rem) !important;
    margin-top: 0;
    /* 3px overlap into next white section — kill hard mask edge, no size change */
    margin-bottom: -3px;
    margin-left: 0;
    margin-right: 0;
    /* Clear sticky/fixed nav without shrinking the media width */
    padding-top: 4.5rem;
    padding-bottom: 1.35rem;
    padding-left: 0;
    padding-right: 0;
    flex-flow: column;
    justify-content: flex-end;
    align-items: flex-start;
    box-sizing: border-box;
    overflow: hidden;
    /* Revealed by video mask at the bottom */
    background-color: #ffffff;
  }

  /*
    Webflow .transition blur stacks end mid-frame with overflow:hidden —
    their hard bottom edge reads as a blunt white cutoff under the mask.
    Hide on mobile (same as desktop); mist is the intended handoff.
  */
  .hero-section .transition {
    display: none;
  }

  .background-video,
  .background-video.w-background-video {
    z-index: 0;
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    /*
      Keep media solid through headline/subcopy (~bottom 9%), then dissolve
      only in the last strip — avoids washing type while killing a hard cut.
    */
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 88%,
      rgba(0, 0, 0, 0.72) 93%,
      rgba(0, 0, 0, 0.32) 97%,
      rgba(0, 0, 0, 0.06) 99%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 88%,
      rgba(0, 0, 0, 0.72) 93%,
      rgba(0, 0, 0, 0.32) 97%,
      rgba(0, 0, 0, 0.06) 99%,
      transparent 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  /*
    Soft white foot under the masked media — longer gradual ramp, overlaps 3px.
    Sits under .hero-flex (z10) so type stays crisp; not a smoky mid-band.
  */
  .hero-section {
    position: relative;
  }

  .hero-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: calc(6.25rem + 3px);
    z-index: 8;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.04) 22%,
      rgba(255, 255, 255, 0.16) 45%,
      rgba(255, 255, 255, 0.4) 68%,
      rgba(255, 255, 255, 0.72) 86%,
      rgba(255, 255, 255, 0.94) 95%,
      #ffffff 100%
    );
  }

  .background-video video,
  .w-background-video > video {
    object-fit: cover !important;
    object-position: center 38% !important;
    width: 100% !important;
    height: 100% !important;
  }

  .hero-flex {
    z-index: 10;
    position: relative;
    margin-left: 0 !important;
    /* Lift headline + subcopy as one group above the bottom fade */
    margin-bottom: 3.5rem; /* ~56px */
    max-width: 100%;
    width: 100%;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    padding-bottom: 0.35rem;
    padding-top: 0.5rem;
    box-sizing: border-box;
  }

  /* Dramatic but slightly eased so lines fit without crowding the nav */
  .hero-text {
    font-size: clamp(2.55rem, 11.5vw, 3.35rem) !important;
    line-height: 0.86 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.55rem;
  }

  .hero-description {
    display: block;
    max-width: 92%;
    font-size: 0.95rem;
    line-height: 1.45;
  }

  /*
    Seam fix only — kill Webflow's 10px .section.relative gap.
    Keep warm mist dissolve into Expertise (do not strip the mist).
  */
  .chl-clients-value-head.section.relative,
  .section.relative.chl-clients-value-head {
    margin-top: 0 !important;
  }

  /* Soft ivory → mist → white runway (no hard beige cut, no white flash strip) */
  .chl-clients-value {
    background-image: linear-gradient(
      180deg,
      var(--chl-ivory) 0,
      var(--chl-ivory) calc(100% - 8rem),
      var(--chl-ivory-mist) calc(100% - 4.75rem),
      #faf7f2 calc(100% - 2.25rem),
      #ffffff 100%
    );
  }

  .chl-clients-value::after {
    height: clamp(4.75rem, 12vw, 6.5rem);
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.16) 32%,
      rgba(255, 255, 255, 0.5) 64%,
      rgba(255, 255, 255, 0.86) 86%,
      #ffffff 100%
    );
  }

  .chl-clients-value + .space-10rem {
    background-color: #ffffff;
    background-image: none;
    min-height: 1rem;
  }

  /* Expertise top continues the white mist landing — soft, not abrupt */
  .chl-clients-value + .space-10rem + .section {
    background-image: linear-gradient(
      180deg,
      #ffffff 0,
      #ffffff calc(100% - 22rem),
      #faf7f2 calc(100% - 14rem),
      var(--chl-ivory-mist) calc(100% - 6rem),
      var(--chl-ivory-mist) 100%
    );
  }

  /*
    Footer: static in flow via .chl-site-footer + removed IX data-w-id.
    Mobile: more air above logo, soft hairline, readable CONTACT.
  */
  .chl-site-footer {
    background-image: linear-gradient(
      180deg,
      var(--chl-ivory-mist) 0,
      var(--chl-ivory-mist) 4rem,
      #faf7f2 14rem,
      #ffffff 28rem,
      #ffffff 100%
    ) !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }

  .chl-site-footer .footer-top {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem;
    grid-template-columns: none !important;
    padding-top: clamp(5.25rem, 20vw, 7.5rem) !important;
    padding-bottom: clamp(2.25rem, 8vw, 3.5rem) !important;
  }

  .chl-site-footer .footer-logo-link-wrapper .image-2 {
    max-width: min(168px, 48vw) !important;
  }

  .chl-site-footer .footer-line {
    background-color: rgba(28, 28, 28, 0.12) !important;
  }

  .chl-site-footer .footer-top .button-flex-copy-copy {
    min-height: 2.5rem !important;
    padding: 0.5rem 1.35rem !important;
  }

  .chl-site-footer .footer-top .button-text {
    color: #f7f3ec !important;
    font-size: 0.68rem !important;
  }

  /*
    White handoff below the media — extra breath before intro copy (~+40px).
    +3px offsets the hero wrapper overlap so intro text position stays put.
  */
  .chl-intro-section,
  #learn-more.chl-intro-section {
    padding-top: calc(5rem + 3px); /* was 2.5rem; +2.5rem ≈ +40px */
  }
}

@media screen and (max-width: 479px) {
  .hero-wrapper {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(72vh + 8.5rem) !important;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 4.25rem;
    padding-bottom: 1.15rem;
  }

  .hero-text {
    font-size: clamp(2.6rem, 12vw, 3.4rem) !important;
    line-height: 0.85 !important;
    margin-bottom: 0.5rem;
  }

  .hero-description {
    max-width: 94%;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .hero-flex {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.25rem;
    margin-bottom: 3.25rem; /* ~52px */
  }

  .chl-intro-section,
  #learn-more.chl-intro-section {
    padding-top: calc(4.75rem + 3px); /* was 2.25rem; +2.5rem ≈ +40px */
  }
}