/* Reuse the portfolio case-study system; only this page's composition differs. */
.konfidi-page { background: #f4f4f4; }
.konfidi-page .boltwagon-content { --bw-section-before: 120px; --bw-section-after: 80px; }
/* Challenge uses the shared 80px bottom padding; Wireframes owns its
   shared 80px top padding inside this full-width white section. */
.konfidi-page .kh-wireframes-background { background: #fff; }
.konfidi-page main figure img { border-radius: 12px; }
.konfidi-page .bw-cover img { border-radius: 0; }
.kh-type { grid-template-columns: minmax(0, 2532fr) minmax(0, 2828fr); }
.kh-screens { grid-template-columns: minmax(0, 2196fr) minmax(0, 3164fr); }
/* Let the navbar stick within the full page, rather than its hero-only wrapper.
   Negative bottom spacing preserves the existing overlay and content positions. */
.kh-hero-shell { display: contents; }
.konfidi-page .topbar { position: sticky; top: 0; left: auto; z-index: 1000; width: 100%; max-width: 1360px; margin-inline: auto; margin-bottom: -62px; padding-inline: 40px; background: transparent; }
.konfidi-page .kh-image-reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(.22,1,.36,1), transform 700ms cubic-bezier(.22,1,.36,1); }
.konfidi-page .kh-image-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (min-width: 761px) {
  .konfidi-page .topbar .desktop-nav { visibility: hidden; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .konfidi-page .bw-introduction { grid-template-columns: minmax(0,1fr); gap: 28px; }
}
@media (max-width: 760px) {
  .kh-type, .kh-screens { grid-template-columns: minmax(0,1fr); }
  .konfidi-page .topbar { margin-bottom: -58px; padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .konfidi-page .kh-image-reveal { opacity: 1; transform: none; transition: none; }
}