/* ─────────────────────────────────────────────
   EMPLOYEE MANAGER — Project-Specific Styles
   Import AFTER style.css and case-study.css
   ───────────────────────────────────────────── */
/* Project accent tokens — extend the shared palette, no overrides */
:root {
  --accent:        #5838B8;
  --accent-hover:  #44279d;
  --accent-light:  #efe9ff;
  --accent-mid:    #c4b1f9;
  --accent-subtle: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Page-level token overrides — scoped so they don't bleed into other pages */
.em-page {
  --dark:               #1B1B1B;
  --dark-surface:       #242329;
  --dark-surface-hover: #2f2e35;
  --text-on-dark:       #d1ceda;
  --mid:                #5d5968;
  --light:              #f7f4fc;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans:  'Source Sans 3', system-ui, sans-serif;
  --em-hero-gradient:   linear-gradient(180deg, #19181d 0%, #241f31 100%);
}
body { font-family: var(--sans); background: var(--light); }
/* Image edge — prevents radius disappearing when image bg matches page bg */
img { box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-optical-sizing: auto;  /* activates Source Serif 4's opsz axis */
}
/* Weight hierarchy — all 400 is too flat */
h1, h2 { font-weight: 400; }
h3, h4  { font-weight: 600; }
.section-label {
  color: var(--accent);
}
.section-title {
  max-width: 26ch;
  font-family: var(--serif);
}
.section-title em {
  color: var(--accent);
  font-style: italic;
}
.divider { background: var(--accent); }
.divider--light { background: var(--accent-mid); opacity: 1 !important; }
.body-text strong { color: var(--dark); font-weight: 700; }
.cs-section--dark .section-title,
.cs-section--dark .cs-principle-title,
.cs-section--dark .metric-number,
.cs-section--dark .quote-card__quote,
.cs-section--dark .logic-card h3,
.cs-section--dark .body-text strong { color: var(--white); }
.cs-section--dark .section-label { color: var(--accent-mid); }
.cs-section--dark .section-title em { color: var(--accent-mid); }
.cs-section--dark .divider { background: var(--accent-mid); }
nav { background: color-mix(in srgb, var(--light) 92%, transparent); }
.nav-logo { font-family: var(--serif); }
.cs-meta-value { font-weight: 400; }
/* Line-height + measure corrections for Source Sans 3 */
.body-text { font-weight: 400; line-height: 1.65; max-width: 65ch; }
/* Line-heights for display type — headings inherit body 1.7 without this */
.cs-hero__title        { line-height: 1.08; }
.cs-hero__problem h2   { line-height: 1.25; }
.section-title         { line-height: 1.15; }
.cs-principle-title    { line-height: 1.3; }  /* case-study.css sets 1.5 — too open */
.flow-card h3          { line-height: 1.25; }
.flow-card p           { line-height: 1.65; }
/* Tabular nums for metric values so digits align */
.impact-metric__value,
.metric-number { font-variant-numeric: tabular-nums; }
/* Testimonial quote — case-study.css sets 1.8 which is too loose for Source Serif 4 */
.cs-testimonial__quote { line-height: 1.6; }
.nav-links a[aria-current="page"] { border-bottom-color: var(--accent); }
.cs-hero__left {
  background: var(--em-hero-gradient);
}
.cs-hero__tag,
.cs-hero__accent-word { color: var(--accent-mid); }
.cs-hero__right {
  background: var(--accent);
}
.cs-hero__problem-label {
  color: rgba(255,255,255,0.6);
}
.cs-hero__problem h2 {
  font-size: clamp(1.45rem, 2.3vw, 2.2rem);
  color: var(--white);
}
.em-problem-section { overflow: hidden; }
.em-bottleneck-wrap {
  position: relative;
  /* no overflow: hidden — image can spill into section padding below */
}
.em-bottleneck-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
}
.cs-fq-dot { background: var(--accent); }
.cs-fq-dot-row::after { background: var(--accent); }
.cs-fq-stop:last-child .cs-fq-dot-row::after { display: block; }
.cs-fq-moment { color: var(--accent); }
.cs-tag {
  background: var(--accent-light);
  color: var(--accent);
}
.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--accent-subtle);
  margin-top: 3rem;
}
.metric-card {
  background: var(--white);
}
.metric-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 700;
}
.metric-number {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--dark);
  line-height: 1.1;
}
.metric-sub {
  font-size: 0.92rem;
  color: var(--mid);
}
.system-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: start;
  margin-top: 3rem;
}
.logic-card {
  background: var(--white);
  padding: 2rem;
  border-top: 3px solid var(--accent);
}
.logic-card h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: var(--dark);
}
.logic-card .body-text { max-width: none; }
.placeholder-stack {
  display: grid;
  gap: 1rem;
}
.em-placeholder {
  background: linear-gradient(180deg, var(--accent-subtle), color-mix(in srgb, var(--accent) 2%, transparent));
  border: 1px dashed var(--accent-border);
  border-radius: 8px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
}
.em-placeholder--dark {
  background: rgba(255,255,255,0.03);
  border-color: rgba(196,177,249,0.25);
}
.em-placeholder__label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.em-placeholder--dark .em-placeholder__label { color: var(--accent-mid); }
.em-placeholder__title {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--dark);
  margin-top: 0.6rem;
}
.em-placeholder--dark .em-placeholder__title { color: var(--white); }
.em-placeholder__desc {
  margin-top: 0.6rem;
  color: var(--mid);
  max-width: 34ch;
  line-height: 1.65;
}
.em-placeholder--dark .em-placeholder__desc { color: var(--text-on-dark); }
.kicker {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 1rem;
}
.kicker--dark { color: var(--accent-mid); }
.em-testimonial--accent {
  background: var(--accent);
}
.em-testimonial--accent .cs-testimonial__quote,
.em-testimonial--accent .cs-testimonial__attr {
  color: var(--white);
}
.em-testimonial--accent .cs-testimonial__attr {
  opacity: 0.72;
}
.flow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.08);
}
.flow-card {
  background: var(--dark-surface);
  padding: 2rem;
}
.flow-card__label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-mid);
  font-weight: 700;
}
.flow-card h3 {
  margin-top: 0.7rem;
  font-size: 1.3rem;
  font-family: var(--serif);
  color: var(--white);
}
.flow-card p {
  margin-top: 0.75rem;
  color: var(--text-on-dark);
  line-height: 1.75;
}
.flow-card ul {
  margin-top: 1rem;
  padding-left: 1rem;
  color: var(--text-on-dark);
}
.flow-card li + li { margin-top: 0.4rem; }
.surface-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
.surface-card {
  background: var(--white);
  padding: 1.6rem;
  border-top: 3px solid var(--accent);
}
.surface-card h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.surface-card p { color: var(--mid); font-size: 0.96rem; line-height: 1.7; }
.impact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1rem;
  margin-top: 3rem;
}
.impact-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(0,0,0,0.08);
}
.impact-metric {
  background: var(--white);
  padding: 1.8rem;
}
.impact-metrics--dark {
  background: rgba(255,255,255,0.04);
}
.impact-metric--dark {
  background: var(--dark-surface);
  border-radius: 4px;
}
.impact-metric--dark .impact-metric__value { color: var(--accent-mid); }
.impact-metric--dark .impact-metric__label { color: var(--text-on-dark); }
.impact-metric--dark .impact-metric__desc  { color: var(--text-on-dark); opacity: 0.7; }
.impact-metric__value {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--accent);
  line-height: 1.05;
}
.impact-metric__label {
  margin-top: 0.55rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 700;
}
.impact-metric__desc {
  margin-top: 0.55rem;
  color: var(--mid);
  line-height: 1.65;
  font-size: 0.93rem;
}
.final-proof {
  background: var(--accent);
}
.final-proof .body-text,
.final-proof .body-text strong,
.final-proof .section-title { color: var(--white); }
.final-proof .section-title em { color: var(--accent-mid); }
.final-proof .section-label { color: var(--accent-mid); }
.final-proof .divider { background: var(--accent-mid); }
.final-proof .em-placeholder {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
}
.final-proof .em-placeholder__label,
.final-proof .em-placeholder__title,
.final-proof .em-placeholder__desc { color: var(--white); }
.project-nav__item:hover { background: var(--accent-light); }
.footer-note { font-size: 0.72rem; opacity: 0.6; }
.em-strategy-body { margin-top: 3rem; max-width: 64ch; }
.em-strategy-body .body-text + .em-strategy-quote { margin-top: 1.5rem; }
.em-strategy-body .em-strategy-quote + .body-text { margin-top: 1.5rem; }
.em-strategy-quote {
  display: inline-block;
  padding: 1.5rem;
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
}
.em-strategy-quote__text {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--dark);
}
.em-strategy-quote__attr {
  margin-top: 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.em-strategy-quote--dark {
  background: rgba(255,255,255,0.06);
  border-left-color: var(--accent-mid);
}
.em-strategy-quote--dark .em-strategy-quote__text { color: var(--white); }
.em-strategy-quote--dark .em-strategy-quote__attr { color: var(--accent-mid); }
/* ─── Layer Stack Animation ─── */
.em-layers-wrap {
  width: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.em-layers-scene {
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  perspective: 800px;
}
.em-layers-stack {
  position: relative;
  width: 319px;
  height: 215px;
  transform-style: preserve-3d;
  transform: rotateX(30deg) rotateY(45deg) translateX(-50px);
  transition: transform 1000ms cubic-bezier(0.4, 0, 0.2, 1);
}
.em-layers-stack.is-animated {
  transform: rotateX(-30deg) rotateY(0deg) translateX(-50px);
}
@media (max-width: 768px) {
  .em-layers-stack.is-animated {
    transform: rotateX(-30deg) rotateY(0deg) translateX(0px);
  }
}
.em-layer {
  position: absolute;
  border-radius: 16px;
}
.em-layer__label {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.25;
  pointer-events: none;
}
.em-layer-4 {
  width: 319px; height: 215px;
  left: 0; top: 0;
  background: rgba(165, 133, 255, 1);
  transform: translateZ(0px);
}
.em-layer-3 {
  width: 290px; height: 196px;
  left: 15px; top: 10px;
  background: rgba(185, 160, 255, 0.9);
  transform: translateZ(40px);
}
.em-layer-2 {
  width: 238px; height: 160px;
  left: 41px; top: 28px;
  background: rgba(208, 191, 255, 0.9);
  transform: translateZ(80px);
}
.em-layer-1 {
  width: 192px; height: 130px;
  left: 64px; top: 43px;
  background: rgba(210, 198, 242, 0.9);
  transform: translateZ(120px);
}

/* Video figure + caption */
.em-video-fig {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.em-video-fig figcaption {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.65;
  padding: 0 0.25rem;
}

@media (max-width: 900px) {
  .metric-strip,
  .surface-grid,
  .impact-grid,
  .system-grid { grid-template-columns: 1fr; }
  .impact-metrics { grid-template-columns: 1fr; }
  .em-bottleneck-wrap { display: none; }
}

/* ── Reduced motion — disable all decorative transitions and animations ── */
@media (prefers-reduced-motion: reduce) {
  .em-layers-stack,
  .em-slot__strip,
  .em-insight-overlay,
  .em-bottleneck-img { transition: none !important; }
}