:root {
  --report-hero-bg: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(236, 229, 216, 0.75) 48%,
    rgba(228, 221, 204, 0.88) 100%
  );
}

.report-page {
  color: var(--slate);
}

/* Match portfolio page background */
body.report-page{
  background-color:#f6f2e9;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(228,221,204,.85), rgba(228,221,204,.32) 42%, rgba(228,221,204,0) 72%),
    linear-gradient(180deg, #f8f6f1 0%, #f4f0e8 38%, #f9f6ef 72%, #ffffff 100%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--slate);
  min-height:100vh;
}

.report-hero {
  position: relative;
  padding: 4.5rem 0 3.5rem;
  background: var(--report-hero-bg);
  overflow: hidden;
  border-bottom: 1px solid rgba(43, 47, 51, 0.08);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4);
}

.report-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1.5rem;
  list-style: none;
  font-size: 0.95rem;
  color: rgba(43, 47, 51, 0.65);
}

.report-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.report-breadcrumb a:hover {
  text-decoration: underline;
}

.report-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  color: rgba(43, 47, 51, 0.58);
}

.report-title,
#reportTitle {
  margin: 0.75rem 0 1rem;
}

.report-summary {
  max-width: 52ch;
  margin: 0 0 1.75rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(43, 47, 51, 0.74);
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.report-viewer-section {
  padding: 2.5rem 0 4rem;
}

.report-status {
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  color: rgba(43, 47, 51, 0.68);
  letter-spacing: 0.01em;
}

.report-viewer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding: clamp(24px, 4vw, 36px);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-xl, 28px);
  border: 1px solid rgba(43, 47, 51, 0.08);
  box-shadow: var(--shadow-2, 0 18px 46px rgba(0, 0, 0, 0.16));
  min-height: clamp(420px, 60vh, 720px);
  transition: box-shadow 0.35s ease;
}

.report-viewer[data-empty="true"] #reportFrame {
  display: none;
}

.report-viewer[data-empty="true"] .report-controls {
  display: none;
}

.report-viewer:hover {
  box-shadow: 0 36px 74px rgba(0, 0, 0, 0.18);
}

.report-viewer iframe {
  width: 100%;
  height: clamp(480px, 70vh, 960px);
  border: 0;
  border-radius: calc(var(--radius-lg, 22px) - 4px);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 0 0 1px rgba(43, 47, 51, 0.06);
}

.report-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.report-download {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

@media (max-width: 768px) {
  .report-hero {
    padding: 3.5rem 0 2.5rem;
  }

  .report-viewer {
    padding: clamp(18px, 6vw, 28px);
    border-radius: var(--radius-lg, 22px);
  }

  .report-viewer iframe {
    height: clamp(360px, 65vh, 860px);
  }
}
}
/* === 3D Hero Particle Layer (shared) === */

.hero-3d-layer{
  position:absolute;
  inset:0;
  z-index:-1;          /* behind hero content */
  overflow:hidden;
}

.hero-3d-canvas{
  display:block;
  width:100%;
  height:100%;
  filter:saturate(0.96) contrast(1.02);
}

/* Ensure hero containers create a stacking context */
.gallery-hero,
.report-hero{
  position:relative;
  overflow:hidden;
}