.culture-showcase,
.culture-gallery{
  padding:14vh 4vw;
  max-width:1600px;
  margin:0 auto;
  border-top:1px solid var(--line);
}

.culture-board{
  display:grid;
  grid-template-columns:minmax(360px,.92fr) minmax(0,1fr);
  gap:clamp(22px,4vw,56px);
  align-items:start;
}

.culture-stage{
  --mx:50%;
  --my:50%;
  position:sticky;
  top:112px;
  height:min(720px,74vh);
  min-height:520px;
  border:1px solid var(--line-strong);
  border-radius:24px;
  overflow:hidden;
  background:#08080b;
  box-shadow:0 32px 90px rgba(0,0,0,.34);
  isolation:isolate;
}

.culture-stage::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:4;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 30%, transparent) 0 8%, transparent 27%),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.52));
  mix-blend-mode:screen;
  opacity:.82;
  transition:opacity .35s var(--ease);
}

.culture-stage::after{
  content:attr(data-label);
  position:absolute;
  left:22px;
  bottom:20px;
  z-index:6;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg);
  padding:8px 12px;
  border:1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius:999px;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(12px);
}

.culture-stage img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.05);
  transition:opacity .65s var(--ease), transform 1.2s var(--ease), filter .65s var(--ease);
  filter:saturate(.92) contrast(1.02) brightness(.78);
}

.culture-stage[data-active="0"] img:nth-child(1),
.culture-stage[data-active="1"] img:nth-child(2),
.culture-stage[data-active="2"] img:nth-child(3),
.culture-stage[data-active="3"] img:nth-child(4){
  opacity:1;
  transform:scale(1.01);
  filter:saturate(1.04) contrast(1.05) brightness(.94);
}

.culture-copy{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.culture-kicker{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
}

.culture-kicker::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg,var(--accent),transparent);
  opacity:.5;
}

.culture-title{
  max-width:920px;
}

.culture-points{
  display:grid;
  gap:12px;
  margin-top:22px;
}

.culture-step{
  --step-alpha:.035;
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px;
  align-items:start;
  min-height:118px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) calc(var(--step-alpha) * 100%), transparent), transparent 72%),
    rgba(255,255,255,.028);
  color:var(--fg);
  cursor:pointer;
  transition:transform .38s var(--ease), border-color .38s var(--ease), background .38s var(--ease), box-shadow .38s var(--ease);
  overflow:hidden;
}

.culture-step::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 18%, transparent), transparent);
  transform:translateX(-120%);
  opacity:0;
  transition:transform .75s var(--ease), opacity .45s var(--ease);
}

.culture-step:hover,
.culture-step.is-active{
  --step-alpha:.11;
  border-color:color-mix(in srgb, var(--accent) 62%, var(--line));
  transform:translateX(8px);
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}

.culture-step:hover::before,
.culture-step.is-active::before{
  transform:translateX(120%);
  opacity:1;
}

.culture-step-num{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  border-radius:50%;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:800;
  color:#fff;
  background:var(--accent);
  box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent);
}

.culture-step h3{
  font-size:clamp(20px,2vw,30px);
  line-height:1;
  letter-spacing:0;
  margin:0 0 10px;
}

.culture-step h3 .it{
  font-family:var(--font-quote);
  font-weight:400;
  font-style:italic;
  color:var(--accent);
}

.culture-step p{
  max-width:620px;
  color:var(--fg-muted);
  font-size:15px;
  line-height:1.58;
}

.culture-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:20px;
}

.culture-metric{
  padding:18px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}

.culture-metric strong{
  display:block;
  font-size:clamp(22px,3vw,42px);
  line-height:.95;
  color:var(--fg);
}

.culture-metric span{
  display:block;
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--fg-muted);
}

.culture-gallery-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr 1fr;
  grid-auto-rows:220px;
  gap:14px;
  margin-top:48px;
}

.culture-shot{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--bg-elevated-2);
  transform:translateZ(0);
}

.culture-shot.wide{grid-column:span 2}
.culture-shot.tall{grid-row:span 2}

.culture-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.92) brightness(.86);
  transform:scale(1.015);
  transition:transform 1s var(--ease), filter .55s var(--ease);
}

.culture-shot:hover img{
  transform:scale(1.08);
  filter:saturate(1.08) brightness(.98);
}

.culture-shot figcaption{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg);
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(0,0,0,.48);
  backdrop-filter:blur(12px);
}

.culture-shot figcaption span:last-child{
  color:var(--accent);
}

@media(max-width:980px){
  .culture-board{grid-template-columns:1fr}
  .culture-stage{position:relative;top:auto;height:520px;min-height:0}
  .culture-gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:190px}
  .culture-shot.wide{grid-column:span 2}
}

@media(max-width:640px){
  .culture-showcase,
  .culture-gallery{padding:10vh 24px}
  .culture-stage{height:410px;border-radius:18px}
  .culture-step{grid-template-columns:1fr;gap:14px;min-height:0;padding:18px}
  .culture-step:hover,
  .culture-step.is-active{transform:none}
  .culture-metrics{grid-template-columns:1fr}
  .culture-gallery-grid{grid-template-columns:1fr;grid-auto-rows:260px}
  .culture-shot.wide,
  .culture-shot.tall{grid-column:auto;grid-row:auto}
}