@charset "UTF-8";
/* Critical path CSS - styles needed for initial render */
.portfolio-body {
  display: flex;
  padding-bottom: var(--spacing-4xl, 80px); /* Reduced from 5xl to 4xl to bring content up */
  flex-direction: column;
  /* Avoid overflow-y: hidden here — it clips tall children and + backdrop-filter can
     cause tiled / delayed paints when scrolling (especially live on slower GPUs). */
  overflow-x: clip;
  overflow-y: visible;
  align-items: center;
  justify-content: start;
}
@supports not (overflow: clip) {
  .portfolio-body {
    overflow-x: hidden;
  }
}

.portfolio-container {
  width: 100%;
  max-width: 100%;
}

.portfolio-header {
  width: 100%;
}

.header-title {
  color: var(--color-text, #fff);
  font-family: var(--font-family);
  font-size: var(--font-size-xs, 16px);
  font-weight: var(--font-weight-normal, 400);
  line-height: 1;
  letter-spacing: 0.4px;
}

.content-wrapper {
  margin-top: var(--spacing-xs, 8px); /* Reduced from md to xs to move info cards up */
  width: 100%;
}

.info-section {
  border-radius: var(--border-radius, 16px);
  display: flex;
  width: 100%;
  align-items: start;
  gap: var(--gutter-width-sm, 12px);
  justify-content: start;
  flex-wrap: wrap;
}

@media (min-width: 1200px) {
  .portfolio-body {
    padding-bottom: var(--spacing-4xl, 100px);
  }
  .info-card {
    padding: var(--spacing-md, 20px);
  }
  .portfolio-container,
  .content-wrapper,
  .info-section {
    max-width: 100%;
  }
}