/* DENEM Labs — brand overrides on Osvald template */

/* Nav + footer logo mark: constrain the square CommonTrace mark to header size */
.navbar-logo-wrapper img {
  height: 40px !important;
  width: auto !important;
  object-fit: contain;
}

/* Small brand emblem shown beside each testimonial */
.testimonial-logo-image {
  height: 26px !important;
  width: 26px !important;
  object-fit: contain;
}

/* EVERY heading is split into per-letter masks and revealed on a scroll-
   scrubbed timeline, so at most scroll positions the headings sit half-drawn
   (garbled fragments like "B.." / "nli"). Force all split text fully visible.
   CSS !important beats GSAP's inline styles every frame — no JS, can't fail.
   Words/lines keep their layout transform (some titles position words that
   way); only the letters are pinned in place. */
[class*="gsap_split_word"],
[class*="gsap_split_line"] {
  opacity: 1 !important;
  visibility: visible !important;
}
[class*="gsap_split_letter"] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  clip-path: none !important;
}
/* The hero title + footer wordmark have the scrub on their CONTAINER too. */
.hero-title-wrapper,
.hero-title-wrapper .display-large,
.footer-section .display-large {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Stats: the template pins this section (position:sticky) so the Services
   section slides up over it — with this content that reads as a broken overlap
   (light cards on the black band, clipped odometer). Put it in normal flow
   with a solid background and its own stacking; numbers are now static. */
.stats-section {
  position: static !important;
  z-index: 5;
  background: #010101;
}
.stats-wrapper { position: static !important; height: auto !important; }
.stats-number-count { height: auto !important; overflow: visible !important; }
/* Numbers were hidden by the template's anti-flash rule (revealed only by the
   odometer animation, which no longer runs on static numbers). Show them. */
.stats-number-count .display-medium {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Scroll-distance reserved for the old pinned slide-overs rendered as blank
   bands (and let the fixed footer bleed through). Collapse them. */
.service-section { margin-bottom: 0 !important; }
.testimonial-stiky-wrapper,
.testimonial-stiky-block {
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
}

/* The footer is a position:fixed "reveal" footer that bleeds through any
   section not perfectly stacked above it. Put it in normal flow at the bottom
   so it can never overlap page content. */
.footer-section-wrapper { position: static !important; height: auto !important; }
.footer-section { position: static !important; }

/* Short utility pages (changelog) have a footer whose raised wordmark overlaps
   the content above it. Add room at the bottom of the changelog list. */
.changelog-section { padding-bottom: 0 !important; }

/* Trim the LinkedIn embed to its content (1251px left a big white void). */
.denem-work-media iframe { height: 815px; }
@media (max-width: 767px) { .denem-work-media iframe { height: 780px; } }

/* Selected Work section (Veolia "Victoria" + LinkedIn embed) */
.denem-work-section {
  padding: 120px 5vw;
  border-top: 1px solid #ececec;
  background: #fafafa;
}
.denem-work-inner { max-width: 1200px; margin: 0 auto; }
.denem-work-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
  margin-top: 32px;
}
.denem-work-copy { flex: 1 1 340px; min-width: 280px; }
.denem-work-copy h2 { color: #0b0e0c; }
.denem-work-text { margin-top: 20px; max-width: 40ch; color: #4a4a4a; }
.denem-work-link {
  display: inline-block;
  margin-top: 28px;
  color: #0b0e0c;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid #7CFF00;
  padding-bottom: 4px;
}
.denem-work-media { flex: 0 0 auto; width: 100%; max-width: 504px; margin: 0 auto; }
.denem-work-media iframe {
  width: 100%;
  height: 1251px;
  max-width: 504px;
  border: 0;
  border-radius: 12px;
  background: #fff;
}
@media (max-width: 767px) {
  .denem-work-section { padding: 80px 6vw; }
  .denem-work-media iframe { height: 1050px; }
}

/* LinkedIn embed: let page-scroll pass through the tall iframe (it was
   capturing the wheel and stalling scroll). Overlay keeps it clickable. */
.denem-work-media { position: relative; }
.denem-work-media iframe { pointer-events: none; }
.denem-work-media-overlay { position: absolute; inset: 0; display: block; cursor: pointer; z-index: 2; }